Февраль '18

Команда энтузиастов из GOV.uk запускает первую международную конференцию по дизайну государственных сайтов. Конференция International Design in Government пройдёт 17-18 июля в Лондоне.

Конференция O'Reilly Design Conference 2017 прошла 20-22 марта в Сан-Франциско. Pabini Gabriel-Petit и Krispian Emert публикуют отчёт о мастер-классах в рамках неё.

Дмитрий Барбанель запускает новую учебную программу для дизайнеров — ежедневные тренировки для дизайнеров в Телеграме. Деталей пока мало, но выглядит как зрелая версия формата Daily UI. Программа на сайте Bang! Bang! Education.

Stephen Hay советует дизайнерам разумно тратить силы и не рисовать макет на каждый чих ― зачастую передать знания об интерфейсе разработчику или менеджеру можно гораздо более простыми способами.

Хорошая памятка Александра Беспоясова для фронтенд-разработчиков, которая близка по духу к манифесту продуктового дизайнера. Важно, чтобы движение в эту сторону от всех участников продуктовой команды.

Angela Nguyen из Amazon даёт советы по проектированию для голосового помощника Alexa.

Snapchat постепенно выкатывает упрощённый интефрейс.

На фоне общего падения интереса к умным часам и браслетам есть проблемы и у Nokia, которые купили Withings.

У Fitbit тоже не всё сладко — рынок умных браслетов сократился на 18% в 2017 году, хоть какая-то жизнь есть в умных часах.

продажи умных браслетов в 2017

-18%

Подборка автомобильного HMI-дизайна (2018-2019) и немного истории.

Luke Wroblewski показывает, как сильно выросло время использования телефонов за последние годы ― как в целом, так и относительно других устройств.

Из других новостей мобильного рынка: в Китае впервые просели продажи мобильных. Рост рынка в мире в целом стал ниже, но это очередной звоночек к его сильному замедлению. Интересно, что скажут адепты Post-PC.

Sandra Upson рассуждает об этике в эпоху сгенерированного алгоритмами контента. Учитывая распространение экспериментов, создающих реалистичные речи политиков или отзывы о ресторанах, скоро будет сложно отличить настоящие события от вымышленных.

Scott Prevost из Adobe рассказывает о своём видении инструментов алгоритмического дизайна. Он выделяет три задачи, в которых они особенно полезны — дать идеи по доработке дизайна, упростить работу с макетами и оценить эффективность результата.

Michael Schrage описывает пять моделей взаимодействия пользователей с алгоритмами — от ассистента до «босса».

Команда uKit рассказывает об их новом решении, которое автоматически перерабатывает дизайн сайтов.

Erin Bradner из Autodesk рассказывает об алгоритмическом дизайне в пром.дизайне. Они называют подход генеративным дизайном, но на ранних этапах развития передовых направлений всегда идёт путаница в терминах.

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

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

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

Sanette Tanaka и Katie Kovalcin из Vox Media рассказывают о том, как делали для Chorus CMS новый формат публикаций ― расширенные подборки по теме.

Aytekin Tank рассказывает о запуске новой функциональности в сервисе онлайн-форм JotForm — как они выкатывали её на пользователей, чтобы не просадить вовлечённость.

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

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

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

Дизайн-менеджер IBM Sandra Tipton даёт советы дизайнерам по планированию большого количества встреч. Как выделить важные и второстепенные, как сокращать их в зависимости от целей и вовлечённости.

Booking: Kelly van der Veen рассказывает о структуре и взаимодействии продуктовых команд в компании, а также агрегации пользовательских инсайтов с помощью сервиса NomNom. А Anna Efimenko — о задачах, которые решают пользовательские исследования в компании.

Facebook: Courtney Kaplan о том, как устроены дизайн-команды и какова роль дизайн-менеджера в них.

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

Мощнейший пример стратегического мышления при обновлении продукта для корпоративных пользователей от Burcu S. Bakioglu, Ben Basilan и JonDelina ‘JD’ Buckley из ADP Innovation Center. Они выстроили отличный понятный подход для выделения интерфейсных метрик, которые завязаны на ключевые показатели бизнеса, а затем — анализа ключевых пользовательских задач и их сравнительной оценки, чтобы можно было отслеживать улучшения в течение длительного времени. Редко встретишь такой осмысленный и целенаправленный подход с минимумом воды.

Tim Dixon из Nomensa рассказывает о подходе Digital Impact Framework (DIF), который позволяет связать конкретные задачи и результаты при работе над продуктом с долгосрочными целями. У него четыре точки приложения усилий: экономические, социальные, процессные и инновационные.

Отличная краткая памятка Page Laubheimer из Nielsen/Norman Group о вариантах опроса респондентов в ходе пользовательских тестирований — как работают SUS, SEQ и NASA-TLX.

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

Небольшая инструкция по настройке вариативных шрифтов в CSS от Richard Rutter из Clearleft.

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

Плагин для Chrome позволяет быстро сохранить всю SVG-графику с сайта.

Скрипт позволяет сделать эффект наведения зависящим от направления движения курсора.

Библиотека на JavaScript для глитч-представления текста.

Реализация iMac для презентации макетов на CSS. При прокрутке — эффектный параллакс.

Скрипт делает эффектную анимацию загрузки изображения с разделением на части.

Эффект наведения с помощью анимированного градиента.

Harris Schneiderman показывает, как сделать список с перетаскиваемыми строками в вебе с учётом требований доступности для людей с ограниченными возможностями.

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

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

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

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

InVision

$235M

Figma

$42,9M

Framer

$9M

Marvel

$8M

Zeplin

$1,2M

Есть и покупки, но пока частично удачные — InVision свою экосистему укрепляет, а Гугл сгноил Pixate и Form.

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

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: На сайте появилась подборка статей о том, как команды и дизайнеры используют его на практике, а в сентябре состоится собственная конференция Loupe. Пошаговое руководство по созданию интерактивного прототипа от Greg Rog и перевод выдержки из книги Meng To «Design + Code» с частями по работе с Framer.

Zach Johnston рассказывает, как дизайн-команда Dropbox прототипирует десктопные приложения с помощью Framer. Важно, что они делают это в контексте настоящего рабочего стола, относительно загруженного.

Lingo: Вышла версия 4 с множественными улучшениями интерфейса.

PDFI.js: Скрипт позволяет разобрать PDF на составляющие. Как сделать из него PSD.

Zeplin: Появилась возможность создавать плагины.

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

Andrea Drugay из Dropbox показывает свой шаблон для работы с интерфейсными текстами. В целом ничего особенного, обычная спецификация на таблицах.

Ещё один инструмент для создания карт сайта в браузере.

Интересные размышления на тему того, насколько привязанность к новым технологиям является проблемой или болезнью или это просто особенность любого тренда и в прошлом всё проходило похожим образом.

В конце 2016 года издательство Two Waves Books выпустило книгу Dave Gray «Liminal Thinking». UXmatters публикует отрывок из неё о формировании убеждений ― хорошо поданные для дизайнеров особенности психологии пользователей.

Шаблон Google Pixel для Photoshop от Daniel Bolyhos.

Аналитическая система Firebase позволяет предсказывать момент, когда пользователю лучше всего предложить оценить приложение.

Apple ужесточила требования к разработчикам и запретила использовать эмоджи для оформления интерфейса.

Яндекс запустил набор инструментов прототипирования и тем оформления для БЭМ. Получился неплохой шаблон для быстрого старта своей дизайн-системы — можно переопределить стили под свои задачи (так делали студия Мануфактура и первую версию платформы Альфа-Банка). Статья Михаила Колоскова о подходе в целом и презентация к запуску. БЭМ вообще одна из самых уважаемых в международном сообществе отечественных наработок ― огромное количество людей на прошлогодней конференции по дизайн-системам Clarity с теплотой вспоминали о нём. Будет здорово, если из этого получится «наш Bootstrap».

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

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

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

Marcin Treder описывает 6-дневный спринт по формализации дизайн-системы, который они использовали при систематизации интерфейса UX Pin. Правда, тут только про уровень визуального языка без множества важных деталей реализации в коде.

Дизайн-система HubSpot Canvas. Julie Nergararian рассказывает о том, как она создавалась.

Nathan Curtis описывает три модели архитектуры команд поддержки дизайн-системы и самого технического решения.

Cristiano Rastelli рассказывает о создании дизайн-системы сервиса знакомств Badoo. В первой части про постановку проблемы и архитектуру.

Christian Holst из Baymard Institute даёт советы интернет-магазинам по правильному моменту в процессе оформления заказа, когда стоит просить у пользователя зарегистрироваться.

Matt Helbig, куратор коллекции Really Good Emails, показывает, как они выбирают качественные рассылки на примере нескольких добротных писем.

Подробная памятка по дизайну мобильных приложений от Николая Бабича.

Jeff Sauro провёл сравнительное тестирование нескольких американских сайтов для доставки цветов. Есть в том числе значения NPS (очень низкие, кстати).

средний NPS

-2%

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

Советы по созданию типовых интерфейсных текстов от Matt Jones из GE.

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

Толковый чеклист для проектирования попапов от Naema Baskanderi. Аналогичный чеклист для проектирования диалогов подтверждения от Jakob Nielsen.

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

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