Саша Море
2 750

Продуктовый дизайн: 18 самых важных материалов за февраль

Традиционный дайджест руководителя портальной дизайн-команды Mail.Ru Group Юрия Ветрова.

Поделиться

В избранное

В избранном

1. Handlebars in UI Design

Шанкар Баласубраманиан (Shankar Balasubramanian) анализирует сравнительно новый паттерн handlebars (грубо говоря, рукоятки), который продвигают ориентированные на скрытые жесты интерфейсы (например, их много в iPhone X). Он добавляет необходимый аффорданс, от отсутствия которого долгое время страдали экспериментальные тач-интерфейсы.

2. Designing A Perfect Responsive Configurator

Виталий Фридман разбирает примеры и предлагает толковый чек-лист для проектирования конфигураторов техники и других товаров в интернет-магазинах. Как обычно, звиздиллион примеров.

3. Branding for Builders

Бывший вице-президент по продукту в Netflix Гибсон Биддл (Gibson Biddle) рассказал о работе над брендом. Описана толковая модель его определения от позиционирования к конкретным ценностям, а также поэтапная эволюция самого продукта — естественно, через традиционные для компании эксперименты.

Вряд ли это что-то сильно новое для специалистов по теме, но связка бренда с интерфейсом и цифровой брендинг в целом — одна из самых важных тем последних лет, когда всё больше интернет-компаний становятся зрелыми и пытаются работать с пользователем на всех уровнях. Здесь хороших примеров крайне мало, и такой подробный кейс на вес золота.

4. Designing Windows 95’s User Interface

Найдена утерянная статья Кента Салливана (Kent Sullivan) 1996 года, в которой он рассказывает о работе над интерфейсом Windows 95. Это ценнейший материал, который показывает, насколько передовым подход был на тот момент — итеративная работа, упор на юзабилити-тестирование и многие другие методы и практики, которые кажутся обыденными сейчас, но 25 лет назад использовались единицами.

Очень интересно читать о том, как, например, трудно было приучить людей к привычному сейчас двойному щелчку мыши. Windows 95 — один из важнейших интерфейсов в истории, сделавших такую ранее сложную вещь, как компьютер, доступной самому массовому пользователю, в том числе благодаря миссии «компьютер в каждый дом».

5. Best Practices for Modals / Overlays / Dialog Windows

Толковый чеклист для проектирования попапов от Нэйма Баскандери (Naema Baskanderi). Есть аналогичный чек-лист для проектирования диалогов подтверждения от Jakob Nielsen.

6. BEM Design

«Яндекс» запустил набор инструментов прототипирования и тем оформления для BEM. Получился неплохой шаблон для быстрого запуска своей дизайн-системы — можно переопределить стили под свои задачи (так делали студию «Мануфактура» и первую версию платформы «Альфа-банка»). Статья Михаила Колоскова о подходе в целом и презентация BEM Design.

Такие инициативы помогают менять сознание дизайнеров, многие из которых всё ещё понимают под дизайн-системой шаблон в Sketch или другом инструменте, а не технологическое решение на компонентах в коде, в которые вшит дизайн. Брэд Фрост (Brad Frost) тоже устал от этого.

Это мышление середины прошлого века, когда под этим словом понималась система визуальной идентификации бренда, к которой шла красивая печатная книжка (их активно переиздают в последние годы).

Но тогда речь шла о физических продуктах и объектах, которые стоят на полке в магазине (или сама сеть магазинов), а мы-то с вами работаем с цифровыми продуктами, где макет ничего не гарантирует и много раз меняется перед запуском. Так что работать надо с основным материалом этой среды ― кодом.

В прошлом выпуске дайджеста упоминался мостик между двумя мирами (компоненты в коде и дизайнерские инструменты), который будет одной из главных тем года. Так вот, Марк Далглиш (Mark Dalgleish) в деталях расписывает, как компания Seek связала компоненты на React и шаблоны в Sketch (они собираются из живого гайдлайна). Внимательно следите за такими штуками и пробуйте сами ― это проще внедрить у себя, чем кажется.

Ну и просто несколько свежих рассказов о создании дизайн-систем:

  • Marcin Treder описывает шестидневный спринт по формализации дизайн-системы, который они использовали при систематизации интерфейса UX Pin. Правда, тут только про уровень визуального языка без множества важных деталей реализации в коде.
  • Дизайн-система HubSpot Canvas. Джулия Нергарарян (Julie Nergararian) рассказывает о том, как она создавалась.
  • Нейтан Кёртис (Nathan Curtis) описывает три модели архитектуры команд поддержки дизайн-системы и самого технического решения.
  • Кристиано Растелли (Cristiano Rastelli) рассказывает о создании дизайн-системы сервиса знакомств Badoo. В первой части — про постановку проблемы и архитектуру.

7. Phase

Первый в 2018 году новый инструмент для дизайна и прототипирования интерфейсов. Стандартный набор из возможностей анимации, создания символов для чего угодно, адаптивности, экспорта в код для веба и нативных платформ.

Последние три-четыре года движуха на этом рынке стала настолько заметной, что про неё написало даже издание Bloomberg, которое обычно витает в облаках мега-корпораций. Неплохой индикатор зрелости рынка, где дизайнеры ещё лет шесть назад смиренно думали, что им придётся вечно довольствоваться Photoshop — обноском со старшего плеча, никак не заточенным под интерфейсы.

Это видно и по деньгам: в InVision вложили уже $235 млн, Figma — $42,9 млн, Framer — $9 млн, Marvel — $8 млн, Zeplin — $1,2 млн. Есть и покупки, но пока только частично удачные — InVision свою экосистему укрепляет, а Google сгноила Pixate и Form.

Если возвращаться к практике, то вот что интересного происходило за последние месяц-полтора:

  • Wireflow: ещё один инструмент для создания карт сайта в браузере.
  • Sketch: Свежие плагины: быстрое создание направляющих вокруг выделенного объекта; быстрая конвертация экранов интерфейса и просто фигуры в изометрическую проекцию; Diya для анимации внутри Sketch. Статьи: Том Гебауэр (Tom Gebauer) показывает организацию символов для работы с таблицами; перевод памятки по созданию современной библиотеки символов от Michael Fouquet из Hudl. Подборка ссылок на бесплатные шаблоны.
  • Adobe XD: Февральское обновление: улучшение работы с векторной графикой, генератором спецификаций и просто улучшения интерфейса. Другие новости: наборы пиктограмм от известных дизайнеров ― Lance Wyman, Anton & Irene и Büro Destruct. Дискуссия с Кайлом Галле (Kyle Galle), где он отвечает на вопросы по развитию плагинов.
  • InVision: Maze помогает проводить юзабилити-тестирование на базе прототипов InVision. Даёте пользователям специальную ссылку, на выходе много полезной аналитики вроде тепловых карт и времени выполнения задач.
  • Haiku: вышел предварительный релиз. Можно скачать приложение для Mac и посмотреть движок веб-компонентов.
  • Framer: на сайте появилась подборка статей о том, как команды и дизайнеры используют его на практике, а в сентябре 2018 года состоится собственная конференция Loupe. Пошаговое руководство по созданию интерактивного прототипа от Грега Рога (Greg Rog) и перевод выдержки из книги Менга Ту (Meng To) «Design + Code» с частями по работе с Framer. А Зак Джонстон (Zach Johnston) рассказывает, как дизайн-команда Dropbox прототипирует десктопные приложения с помощью Framer. Важно, что они делают это в контексте настоящего рабочего стола относительно загруженного.
  • Lingo: вышла четвёртая версия с множественными улучшениями интерфейса.

8. Бесплатный онлайн-курс про мировую историю дизайна от лучших русских дизайнеров

Bang! Bang! Education и издательство «Яндекса» запускают бесплатный онлайн-курс по истории дизайна с 1918 по 2018 год. В списке преподавателей ― добрая половина сильных отечественных компаний и дизайнеров. Старт 9 июня 2018 года.

9. Проектирование новых поликлиник в Кирове

Рассказ о перепроектировании поликлиник в Кирове с учётом принципов проектирования услуг и бережливого производства. Интересные факты о том, как анализировали поведение пациентов и работу врачей.

10. Does the Net Promoter Score Predict Company Growth

Джефф Суаро (Jeff Sauro) сделал ценнейший обзор исследований на тему влияния NPS на финансовые метрики ― доходы компании и повторные покупки. Чёткого ответа нет, зато получился отличный критический взгляд.

Позже он провёл собственное исследование того, влияет ли удовлетворённость пользователей, выраженная в разных метриках (SAT и NPS), на будущие прибыли компании на примере авиалиний. В целом ― связь есть. В дополнение — отличная краткая памятка Пэйдж Лаубхаймер (Page Laubheimer) из Nielsen/Norman Group о вариантах опроса респондентов в ходе пользовательских тестирований — как работают SUS, SEQ и NASA-TLX.

11. The Facilitator’s Handbook ― 23 Design Sprint Tips

Автор книги «Sprint» про дизайн-спринты Джейк Кнапп (Jake Knapp) даёт пачку советов их фасилитатору.

12. Measuring the ROI for UX in an Enterprise Organization, Part 1

Мощнейший пример стратегического мышления при обновлении продукта для корпоративных пользователей от Бурку С. Бакиоглу (Burcu S. Bakioglu), Бена Басилана (Ben Basilan) и ДжонДелины Бакли (JonDelina ‘JD’ Buckley) из ADP Innovation Center.

Они выстроили отличный понятный подход для выделения интерфейсных метрик, которые завязаны на ключевых показателях бизнеса, а затем — анализа ключевых пользовательских задач и их сравнительной оценки, чтобы можно было отслеживать улучшения в течение длительного времени. Редко встретишь такой осмысленный и целенаправленный подход с минимумом воды.

В продолжение темы устройства работы дизайн-команд:

  • Facebook: Кортни Каплан (Courtney Kaplan) — о том, как устроены дизайн-команды и какова роль дизайн-менеджера в них.
  • Booking: Келли ван дер Вин (Kelly van der Veen) рассказывает о структуре и взаимодействии продуктовых команд в компании, а также агрегации пользовательских инсайтов с помощью сервиса NomNom. А Анна Ефименко — о задачах, которые решают пользовательские исследования в компании.

13. Connecting things — Broadening design to include systems, platforms, and product-service ecologies

Мощнейший обзор того, как меняется роль и задачи дизайна в последние десятилетия от Хью Дабберли (Hugh Dubberly). Особенно ценно то, что свидетельства этой эволюции ссылаются на ключевые книги и статьи, так что можно проследить её самостоятельно.

14. Solving Product Design Exercises — Interview Questions & Answers

Книга Артёма Дашинского, посвящённая решению тестовых заданий при приёме на работу.

В продолжение темы:

Марсель ван Риммерден (Marcel van Remmerden) рассказывает о тестовом задании от Google.

15. Affinity Diagramming — Collaboratively Sort UX Findings & Design Ideas

Кара Пернис (Kara Pernice) из Nielsen/Norman Group даёт пошаговую инструкцию по проведению рабочей сессии для составления диаграммы родства из множества неструктурированных идей.

16. Introducing C.A.R.E. — A simple framework for user onboarding

Руаири Галаван (Ruairí Galavan) из Intercom описывает подход компании к встрече нового пользователя. Как и Самуэль Хулик (Samuel Hulick), они смотрят на проблему шире, чем просто несколько обучающих сообщений — важно провести клиента по всему жизненному циклу (он у них ориентирован на платную подписку).

17. Level Up

Хитер Филипс (Heather Phillips) вместе с Designer Fund запустили опросник для дизайн-команд, помогающий определить уровень их зрелости. Неплохой шаблон, хотя он скорее про дизайн-менеджмент и очень абстрактно затрагивает саму продуктовую работу.

18. UX-кинотеатр — Эмоции. Чувства

Мария Гончарова из «Альфа-банка» рассказывает о лучшем понимании пользователей у продуктовых команд с помощью показа мини-фильмов на базе проведённых исследований.

Читайте полную версию дайджеста в моём блоге. В нём, как обычно, много новых материалов по дизайну для Apple Watch, Android Wear, Material Design, расширений для Sketch, свежих скриптов и ещё тонна всего. За свежими ссылками также можно следить в группах на Facebook или во «ВКонтакте», а также в Telegram-канале. Спасибо всем, кто помогает наполнять их. Вы также можете получать свежие обзоры по почте.

#дизайн

{ "author_name": "Саша Море", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 3, "likes": 16, "favorites": 29, "is_advertisement": false, "section_name": "default", "id": "33967", "is_wide": "" }
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Подписаться на push-уведомления
[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]