Дайджест продуктового дизайна, ноябрь 2014
Уже четыре года я публикую регулярные обзоры свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-октябрь 2014.
Паттерны и Best Practices
Website Style Guide ResourcesОбъемная коллекция материалов по живым гайдлайнам сайтов. Статьи, книги, руководства, подкасты, доклады с конференций, инструментарий и реальные примеры — все собрано вместе, удобно каталогизировано и регулярно обновляется. Вынесу оттуда мощнейшую сравнительную таблицу фреймворков и готовых решений.Fluid-Touch DesignRalph Thomas разбирает интерфейсное решение плавающей кнопки быстрого добавления в почтовом клиенте Inbox от Google. Оно позволяет сократить количество нажатий за счет достаточно комфортных жестов. Их, правда, непросто обнаружить, но как шорткат решение отличное. Luke Wroblewski также разбирает его плюсы.
CrayonПоисковой движок поверх огромной коллекции реальных «маркетинговых» дизайнов. У вас есть возможность фильтровать результаты по типу страницы, индустрии, используемой CMS, уровню трафика. Так и искать прямыми запросами вида «landing pages» или «home pages on squarespace». Ресурс будет полезен дизайнерам, маркетологам, менеджерам продуктов для поиска вдохновений и решений.
High Performance Map Interactions Using HTML5 CanvasEd Kelley рассказывает о решении достаточно нетривиальной задачи — представлении в мобильном вебе карты стадиона с широкими возможностями выбора мест.
Design Details: Inbox by GoogleBrian Lovin разбирает интерфейсные паттерны приложения Inbox для iOS.
Eye-tracking: кейсы и инсайтыЮрий Грановский сделал обзор исследований золотого треугольника.
Form Usability: Getting 'Address Line 2' RightО проблемах поля «Address 2» при оформлении корзины. Это специфично для западных интернет-магазинов, но многие специалисты работают на иностранные рынки.
uiGIFs — Animated UI inspiration in your inbox every MondayГалерея uiGIFs с примерами анимации в приложениях.
OceanЕще одно Dribbble-подобное сообществ.
Понимание пользователя The Rise of the Phablet: Designing for Larger PhonesSteven Hoober о том, что большие экраны не являются большой проблемой, поскольку большинство пользователей не пользуется телефоном одной рукой.60 ways to understand user needs that aren«t focus groups or surveysDavid Travis перечисляет 60 способов понять потребности пользователей.
Typography & DyslexiaСловолитня Bigelow & Holmes поставила под сомнение эффективность специальных шрифтов для дислектиков.
Take Note, Facebook: How Colleges Are Training Designers To Treat Users Like More Than Lab RatsFast Co Design об этике скрытых пользовательских исследований и университетских программах, которые учат специалистов не переходить грань.
Информационная архитектура, концептуальное проектирование, контент-стратегия Алексей Копылов — Введение в Customer Journey MapВидеозапись вебинара и слайды презентации Алексея Копылова «Введение в Customer Journey Map» в рамках Школы проектирования интерфейсов.[embedded content]
CJM OnlineОнлайн-сервис для создания Customer Journey Map от минской компании UXPresso и разработчика ReactiveBit.
System Thinking and UXСтатья Stew Dean на основе его выступления на конференции EuroIA 2014, посвященная системному мышлению в дизайне. Он очень подробно разбирает его применение к интерфейсам и разбирает проблемы популярных подходов к решению дизайнерских задач. Первая часть.
Проектирование и дизайн экранов интерфейса Atomic — Design the FutureЧто за неделя без нового инструмента проектирования и дизайна интерфейсов? Atomic тоже обещает современный подход к прототипированию мобильных и командной работе над ним. Не зря на недавней гугловской дизайн-конференции Form была отдельная панель для создателей таких продуктов. Ребята уже успели запустить свой Designer News.Новое о Material Design
Новое для Sketch
Новое для Apple Watch
Новое для Android Wear
Новое для iPhone 6
Новое для iOS7/iOS8
Proto.io SpacesБиблиотека готовых решений для онлайн-инструмента проектирования мобильных и планшетных сайтов и приложений Proto.io.
Prott — Rapid Prototyping & Radical CollaborationЕще одно приложение для быстрого прототипирования на мобильных.
Пользовательские исследования и тестирование, аналитика Navilytics — Powerfully simple tools at your disposalИнтересный сервис веб-аналитики с расширенными возможностями. Позволяет записывать последовательность действий на странице, выдает тепловые карты, воронки прокрутки страницы, анализировать формы и разные области страницы, а также сегментировать все это.Как Chartbeat улучшает медиасайтыКак АиФ работает с сервисом Chartbeat для повышения продуктовых показателей. Он отслеживает вовлеченность пользователей как дополнение к традиционным метрикам вроде глубины просмотра.
Мнение Яны Москвиной: На всякий случай: на Chartbeat реально отдельного человека надо сажать — слишком много инфы он обновляет в реалтайме, и от ежесекундного мигания экрана голова болит. Если хочется бесплатный вариант попробовать, и без ряби в глазах, то можно использовать отчет Realtime в Google Analytics и Вебвизор Яндекс.Метрики.
Если говорить в целом, то вместо просвещения сайт СМИ может быстро скатиться в шоу для пользователей — показывать всем только самое кликабельное. Задача про «обвязку» страниц хорошая, трафигенерящая. Но реально с умом подходить надо.
An introduction to user research techniquesСправочник по пользовательским исследованиям от GOV.UK. В продолжение темы:
Recruiting User Research Participants by EmailJim Ross о том, как находить пользователей для исследований с помощью электронной почты. В статье описан сценарий и подводные камни.
A Guide To Conducting A Mobile UX DiagnosticLyndon Cerejo о вариации метода экспертной оценки, более формализованной и заточенной на сценарии.
How To Run User Tests At A ConferenceОтличная методичка по проведению пользовательских исследований на конференциях от Daniel Suable. Вначале много воды, но вторая половина по делу. В продолжение темы:
Refining Your Mobile Onboarding Experience Using Visual AnalyticsAlon Even из команды сервиса мобильной аналитики AppSee о том, как отслеживать эффективность onboarding на мобильных. В первой половине достаточно дефолтная категоризация подходов, по теме начинается позже.
Визуальное программирование Tumult Hype Pro 3Еще один современный инструмент для дизайнеров, третья версия Hype Pro. Обещают интерактивные повторно используемые анимированные объекты с физической моделью и адаптивность для сайтов, iBooks, рекламы.The Art of UI AnimationsВоркшоп с Mark Geyer про анимации в интерфейсе. Довольно интерсный формат подачи, запускается в браузере. Сам воркшоп весьма познавателен. Mark Geyer работает в отделе исследований и разработки компании Salesforce.
BlocsЕще один инструмент для визуального создания сайтов. Это приложение для Mac от Norm Sheeran, являющееся по сути умной обвязкой над Bootstrap. Небольшой скринкаст и видео работы.
[embedded content]
Form is Joining GoogleGoogle купил Form, Origami-подобный инструмент для интерактивного прототипирования. Из очевидных преимуществ — возможность взаимодействовать с прототипом на устройстве на лету, так же, как при помощи Sketch Mirror.
Новые скрипты
Designers Code DifferentlyMeng To о кодирующих дизайнерах и их отличиях от разработчиков.
Styling And Animating SVGs With CSSРазвернутое руководство Sara Soueidan по стилизации и анимации SVG с помощью CSS. В продолжение темы:
Метрики и ROI 5-Steps For Getting Started Measuring The Customer ExperienceСоветы Jeff Sauro по обсчету CX с учетом важности функций продукта.Управление интерфейсными проектами, процессами и командами About Face 4: Chapter 6: Creative TeamworkUXMatters публикует шестую главу из четвертого издания книги About Face. В продолжение темы: Beyond the UX Tipping PointJared Spool о переломном моменте принятия UX в организациях. Оно становится необратимым, когда компания больше не соглашается идти на компромиссы относительно пользовательских впечатлений. Теперь технологии начинают подстраиваться под требуемые впечатления, а не наоборот. Джаред перефразирует уровни UX зрелости компаний:
Тёмные века UX; Случайные инвестиции и проекты; UX начинает включаться в команды. После этого этапа может наступить тот самый переломный момент невозврата, когда компания переходит на следующий этап. Интеграция UX и услуг. Zeplin — Collaboration app for UI designers & frontend developersДесктопное приложение Zeplin для совместной работы дизайнеров и разработчиков. Подключается к Sketch и скоро сможет к Фотошопу, облегчает передачу спецификаций. Группа в Фейсбуке.
Gibbon — Peer-to-peer learning for your organizationИнтересный сервис для организации обмена знаниями внутри компании и команды, а также быстрого включения в рабочий процесс новичков.
Hanno PlaybookОтличная подробная методичка по работе над дизайн-проектом от студии Hanno. Меньше про конкретные методики, больше про общий процесс и выстраивание отношений с клиентом. Анонс ее запуска.
Wake — Open Your Design ProcessСервис Wake для командной работы над макетами и мудбордами. Позволяет загружать и обсуждать свой дизайн и собирать коллекцию примеров.
Where to find great UX candidatesIrene Au о том, где найти кандидатов на UX-должности. Написано для США, но частично актуально и для нашего рынка.
Продуктовый менеджмент и аналитика 5 Mistakes We All Make with Product FeedbackDes Traynor пишет в блоге Intercom о 5 ошибках, которых следует избегать при работе с отзывами пользователей о вашем продукте. Его советы: разделять пользователей на группы; постоянно собирать отзывы; разделять платящих и бесплатных пользователей; не следовать мнению «громкого меньшинства»; перепроверять требования пользователей, стараясь определить их мотивы. В продолжение темы:[embedded content]
Data-Informed Design: Three Data StoriesPamela Pavliscak начинает серию публикаций о работе с данными аналитики при проектировании интерфейсов. Первая из них посвящена задачам, которые помогают решать такие данные — убедить кого-то, улучшить что-то, исследовать.
Методологии, процедуры, стандарты Ведомственный приказ «Об утверждении профессионального стандарта «Специалист по дизайну графических и пользовательских интерфейсов«Текст профессионального стандарта «Специалист по дизайну графических и пользовательских интерфейсов» ушел на согласование министру.Кейсы Building SoundCloudИнтереснейший рассказ Michael Nino Evensen о том, как было переделано iPhone-приложение SoundCloud, одно из самых интересных в этом году. Очень подробно и с кучей деталей.Новые кейсы дизайна и редизайна
Современные редакционные CMS
4 Things HealthCare.Gov 2.0 Gets Right (And 5 Things It Still Gets Wrong)Дизайнеры обсуждают вторую версию портала HealthCare.gov, запуск которого в прошлом году сопровождался уймой юзабилити- и технических проблем.
История The Evolution of the Title Bar ButtonsKarla Urbina изучает эволюцию привычных теперь кнопок закрытия, минимизации и максимизации окна приложения в десктопных ОС. Интересно, что во многих случаях все начиналось с иконки бургера. В продолжение темы: Краткая история контент-стратегииПеревод на русский язык истории дисциплины контент-стратегии, интерес к которой активно растет в последние годы. Впервые заговорили о ней в 1997–1998, а в 2009 году произошел взрыв интереса.
Тренды IBM DesignВ ближайшие недели IBM представит свой язык дизайна, который обещает стать одним из самых масштабных среди крупных компаний на уровне BBC GEL и Material Design. Он появится на сайте IBM Design. Пока там общая информация об инициативах компании, но в недавнем выступлении Phil Gilbert (руководитель дизайна корпорации) достаточно подробно рассказал об этих гайдлайнах (конкретика начинается во второй половине).Язык дизайна IBM будет описывать общие принципы, визуальные и интерфейсные гайдлайны, методики и инструменты работы. В частности, они предложили свою вариацию дизайн-мышления, более прагматичную и применимую в реальной жизни. Судя по показанным наброскам реальных продуктов, на жизнь корпорации это ложится очень здорово.
Компании уже больше ста лет и за это время она несколько раз смогла переизобрести себя и выходить из тяжелых кризисов. К дизайну они подошли также системно, как и ко всему остальному — стратегия его внедрения в жизнь компании впечатляет, как и масштабы (штат дизайнеров должен дойти до 1000 человек). За анонсами можно следить в Твиттере команды.
HP Sprout is a Bold Attempt to Reimagine the Desktop PCНа прошлой неделе HP показала безбашенный концепт нового подхода к взаимодействию с десктопным компьютером для дизайнеров Sprout. Вместо клавиатуры у него проецируемая тач-поверхность, которая вместе с 3D-камерой меняет привычный формат работы. Причем это уже рабочий продукт, который можно будет купить за $1899. Авторы других известных концептов дают свою оценку.
Checkout/login designers, this is your new bar: ONE tap/NO formsРадикальное упрощение процесса оформления заказа на мобильных, возможное при широком распространении сканеров отпечатков пальцев.
The End of Apps as We Know ThemPaul Adams предсказывает, что приложения будут использоваться всё меньше. Пользователи будут все больше взаимодействовать с потоками интерактивных карточек с контентом либо уведомлениями от приложений, чем с самими приложениями. Позже он дал пояснения к статье.
Designing to Co-Designing to Collective Dreaming — Three Slices in TimeLiz Sanders и Pieter Stappers разбирают историю форматов совместной работы дизайнеров, исследователей, разработчиков и пользователей и пророчат активное развитие практик ко-дизайна сейчас и в будущем. Многие компании приходят к подобным мыслям.
Physical Web — Walk up and use anythingИнициатива Google Physical Web, направленная на стандартизацию с тем, чтобы не пришлось иметь приложение для каждого бытового прибора.
Web AppsLukas Mathis о гибридных приложениях и общих трендах мобильной разработки.
Профессиональное развитие Фоновые исследования. Как много читать, знать и не офигевать (презентация Юрия Ветрова)Моя презентация о подходе фоновых исследований с конференции World Usability Day 2014. О том, как много читать, знать и не офигевать. Сложность современных продуктов все растет, а формат работы современных продуктовых команд становится более динамичным. От нас ждут достаточно высокого уровня профессиональной эрудиции, который набрать бывает непросто, а поддерживать — и того сложнее.Я плотно работаю с информацией по профессии и структурирую понимание по ее областям, с которыми работаю или наверняка поработаю в будущем. Изначально тратил на это уйму времени, но постепенно научился справляться с этим адовым потоком, так что теперь уходит час-полтора в день. В презентации рассказал, почему считаю это важным, как устроены информационные потоки и как это выручает меня на практике. Там ОЧЕНЬ много ссылок на всевозможные подборки и списки. Какие-то уже полные, какие-то еще только собираются.
7 Rules for Creating Gorgeous UI7 правил создания красивых интерфейсов для не-дизайнеров от Erik D. Kennedy. Очень доступным языком и с хорошими примерами, хотя и местами несистемно. Вторая часть статьи.
Time with Users: Set Personal and Company GoalsJakob Nielsen описывает нормы ГТО по работе с пользователями для всех участников продуктовой команды. В статье занятная табличка важности регулярного участия в исследованиях для разных специалистов.
Онлайн-курс «Визуализация. Основы«Стали доступны первые лекции бесплатного онлайн-курса Тани Бибиковой (Мисютиной) по основам визуализации данных.
Книга Scott Jehl «Responsible Responsive Design«В продолжение «цветной серии» A Book Apart вышла книга Scott Jehl «Responsible Responsive Design». Рассмотрены многие аспекты проектирования и дизайна при поддержке адаптивности для мобильных и веб-версий продукта.
User Experience Salaries & Calculator (2014)Jeff Sauro обработал результаты опроса о зарплатах в UX, проведенного UXPA. Основными факторами являются занимаемая должность и географическое положение работы. Также можно поэкспериментировать с зарплатным калькулятром. В продолжение темы:
9 basic principles of responsive web designДизайнеры сервиса Froont подготовили наглядный обзор принципов адаптивного дизайна в виде 9 анимаций. Перевод на русский.
Люди и компании в отрасли AMA: I’m Julie Zhuo, director of product design @ FacebookСессия вопросов и ответов с главой продуктового дизайна Facebook Julie Zhuo на Designer News. Перевод отдельных вопросов на русский. Другие сессии AMA: Покупки дизайн-студий крупными компаниями
Материалы конференций Google FORM 2014Видео выступлений с конференции Google Form 2014, которая проходила 4–5 ноября в Сан-Франциско, США. Она была посвящена связке дизайна и технологий и включала мощный состав спикеров из модных интернет-сервисов. Несколько интересных выступлений:[embedded content][embedded content][embedded content][embedded content][embedded content]Видео-отчет с семинара Виталия Фридмана в Mail.Ru Group14–15 ноября Vitaly Friedman делал расширенный мастер-класс в офисе Mail.Ru Group, в котором подробно рассказал о многих из техник оптимизации производительности адаптивного сайта. Наши коллеги опубликовали видео-запись лекции, предваряющей тренинг. Там не все 8 часов, но много интересного.
UX Immersion 2014Видео выступлений с конференции UX Immersion 2014, которая проходила 7–9 апреля в Денвере, США. Несколько интересных выступлений:
Midwest UX 2014Видео выступлений с конференции Midwest UX 2014, которая проходила 23–25 октября в Индианаполисе, США. Выступающие, на которых стоит обратить внимание: Stephen Andeson, Jared Spool, Peter Morville, Mark Rolston, Jon Kolko, Steven Hoober.
UX in Japan (выступление Takumi Yoshida)Доклад Takumi Yoshida с ORIENT Uxpress. Много и интересно про различие в проектировании продуктов для восточного и западного рынков, с реальными примерами на продуктах Sony / Nokia и пр. Рассмотрены культурные и кросс-национальные различия в построениях ментальных моделей взаимодействия, восприятии паттернов. В продолжение темы:
[embedded content][embedded content]ConveyUX 2014Видео выступлений с конференции ConveyUX 2014, которая проходила 5–7 февраля в Сиэтле, США.
Свежие ссылки можно также отслеживать в одноименной Facebook-группе. Спасибо всем, кто также публикует ссылки в ней, особенно Геннадию Драгуну, Павлу Скрипкину, Дмитрию Подлужному и Антону Артемову. Все больше материалов в обзорах появляется благодаря им.
