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

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

В закладки

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

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

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

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

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

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

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

«Яндекс» запустил набор инструментов прототипирования и тем оформления для 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. Проектирование новых поликлиник в Кирове

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

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

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

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

Мощнейший пример стратегического мышления при обновлении продукта для корпоративных пользователей от Бурку С. Бакиоглу (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 запустили опросник для дизайн-команд, помогающий определить уровень их зрелости. Неплохой шаблон, хотя он скорее про дизайн-менеджмент и очень абстрактно затрагивает саму продуктовую работу.

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

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

{ "author_name": "Саша Море", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 1, "likes": 16, "favorites": 30, "is_advertisement": false, "subsite_label": "design", "id": 33967, "is_wide": false, "is_ugc": true, "date": "Wed, 28 Feb 2018 16:19:03 +0300", "is_special": false }
0
{ "id": 33967, "author_id": 81289, "diff_limit": 1000, "urls": {"diff":"\/comments\/33967\/get","add":"\/comments\/33967\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/33967"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
1 комментарий
Популярные
По порядку
1

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

Это прекрасно! Друзья, загляните к Варламову на эту статью.

Ответить

Комментарий удален

Комментарий удален

{ "page_type": "article" }

Прямой эфир

[ { "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": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "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, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }