Ежегодная выставка технической крутоты и дичи CES 2019 прошла 8-11 января в Лас-Вегасе — https://www.ces.tech/. Как обычно, показали много чумовых и чумных вещей. Самое интересное, касающееся интерфейсов:

Голосовые интерфейсы
Рынок ищет следующую большую вещь и, кажись, наконец-то нащупал её. Хвалились цифрами: Amazon поставил 100 млн устройств с Alexa (https://www.engadget.com/2019/01/06/amazon-100-million-alexa-devices-sold/), а Google Assistant стоит аж на 1 млрд (правда, в основном смартфонов, где его необязательно используют — https://www.engadget.com/2019/01/07/google-assistant-1-billion-devices/).

И показали тонну интеграций во всё, что может быть установлено дома: душ (https://www.engadget.com/2019/01/06/u-by-moen-google/), туалет (https://www.engadget.com/2019/01/07/kohler-alexa-enabled-sensate-faucet/), зеркало (https://www.engadget.com/2019/01/07/simplehuman-made-a-mirror-with-google-assistant-built-in/), выключатель (https://www.theverge.com/circuitbreaker/2019/1/7/18171690/tp-link-kasa-smart-wifi-light-switch-voice-assistant), велик (https://www.engadget.com/2019/01/09/cybic-amazon-alexa-electric-bicycle/), клавишные (https://www.engadget.com/2019/01/07/roland-go-piano-alexa-built-in/), мышка (https://www.engadget.com/2019/01/08/razer-chroma-alexa-support/). Адекватность под вопросом, но идея дешёвого добавления голосового ассистента в существующие гаджеты — например, подставка для планшета (https://www.engadget.com/2019/01/08/lenovo-smart-tab-hands-on/), расширители для ТВ (https://www.theverge.com/circuitbreaker/2019/1/7/18171949/jbl-link-bar-android-tv-release-date-price-features-ces-2019) или гаджеты для прикуривателей в машинах (https://www.theverge.com/circuitbreaker/2019/1/8/18168678/anker-roav-bolt-car-charger-google-assistant-jbl-link-drive-hands-free-ces-2019) — действительно полезный способ повысить распространение голосовых помощников.

Google тут догоняет Amazon (https://www.theverge.com/2019/1/10/18175524/google-assistant-devices-ces-2019-tvs-soundbars-smart-speakers-kitchen-bathroom-cars), который показал многое из этого ещё в прошлом году — они анонсировали свою платформу (https://www.theverge.com/2019/1/8/18172082/google-assistant-connect-vs-alexa-interpreter-mode-maps-features-devices-ces-2019).

Гибкие экраны
Royole отобрали у Samsung звание первого коммерческого продукта — https://www.engadget.com/2019/01/07/royole-flexpai-hands-on/. А накануне выставки утек прототип 3-панельного телефона вроде как от Xiaomi — https://www.engadget.com/2019/01/03/xiaomi-three-panel-foldable-phone/. Ну и LG ещё раз показали свой сворачиваемый телевизор — https://www.engadget.com/2019/01/07/LG-OLED-TV-R-rollable/.

Умный дом
Выставка про бытовую технику, так что этого добра выше крыши:
— Проекция интерфейса на деревянную панель (https://www.engadget.com/2019/01/06/mui-wooden-smart-display/).
— Плиты, которые анализируют блюдо и помогают в готовке (https://www.engadget.com/2019/01/07/whirlpool-connected-hub-wall-oven/ и https://www.engadget.com/2019/01/08/whirlpool-smart-countertop-oven/)
— Снова умные зеркала (https://www.engadget.com/2019/01/07/careos-artemis-smart-mirror/).
— Снова холодильники с тачскрином (https://www.engadget.com/2019/01/07/samsung-updates-family-hub-smart-fridge-new-ui/).

[продолжение в https://t.me/pdigest/150]

#ces #trends #events

[начало в https://t.me/pdigest/149]

Автомобильные интерфейсы
Производители боятся отстать от жизни. Они не просто давно на выставке, Mercedes представил новое поколение CLA вместо традиционного автошоу (https://www.engadget.com/2019/01/08/mercedes-benz-cla-coupe-unveil/). Управление жестами и голосом из коробки в обычной модели, а не концепте. Из другого — имитация прозрачности прицепа (https://www.engadget.com/2019/01/07/valeo-xtravue-camera-makes-trailer-disappear/), сенсоры в рамке для номера (https://www.engadget.com/2019/01/09/fensens-ces-2019/) и много автопилотов (https://www.engadget.com/2019/01/08/nvidia-drive-autopilot/). Из маразма — весёлая виртуальная реальность для пассажиров вместо унылого реального мира (https://www.engadget.com/2019/01/07/audi-backseat-vr-disney-marvel/).

Умные часы и носимые устройства
Уже никого не вдохновляют, анонсов мало. Интересные разве что часы Matrix, которые заряжаются от солнца и тепла тела (https://www.theverge.com/2019/1/6/18170731/matrix-powerwatch-2-wearable-body-heat-solar-power-never-charge-color-screen-specs-features-price). И умный пластырь от L'Oreal (https://www.theverge.com/2019/1/6/18168205/loreal-my-skin-track-ph-sensor-measure-wearable-skincare-ces-2019).

Виртуальная и дополненная реальность
Постепенное развитие без прорывов. Отслеживание взгляда у HTC (https://www.engadget.com/2019/01/08/htc-vive-pro-eye-hands-on-gaze-tracking-ces-2019/) и трансляции в Фейсбук (https://www.engadget.com/2019/01/09/oculus-rift-facebook-live-streaming/), компактная версия Hololens и Magic Leap (https://www.engadget.com/2019/01/08/nreal-light-mixed-reality-glasses-sunglasses-hands-on/).

Телевизоры и мониторы
Разрешения подскочили аж до 8K (https://www.engadget.com/2019/01/07/samsung-q900-8k-tvs/), а  технология Dolby позволяет обходиться без динамиков — экран работает за них (https://www.engadget.com/2019/01/07/lg-display-88-inch-8k-oled-dolby-atmos-no-speakers/). Компактный монитор работает через USB-C без подключения к розетке (https://www.theverge.com/circuitbreaker/2019/1/8/18174745/lapscreen-usb-c-monitor-thin-portable-power-ces-2019).

Много говорят о 5G, который поможет построить настоящий интернет вещей (https://www.engadget.com/2019/01/08/verizon-disney-the-new-york-times-5g/). Показывают объёмное видео (https://www.engadget.com/2019/01/08/intel-studios-volumetric-grease/). Продолжают впаривать гаджеты для запахов (https://www.theverge.com/2019/1/7/18171432/moodo-artiris-parfum-pod-connected-scent-ces-2019). Модно оформляют квантовые компьютеры (https://www.engadget.com/2019/01/08/ibm-q-system-one-quantum-computer/). Опять пытаются сделать клавиатуру с кнопками-экранами (https://www.engadget.com/2019/01/07/nemeio-eink-keyboard-customize-any-language/).

В общем, где-то быстрее, выше, сильнее, где-то — тупой и ещё тупее. Эти два стула хорошо показывает криповое видение будущего от LG — https://www.engadget.com/2019/01/08/lg-ai-concept-video-future-vision/. Без комментариев, как говорят новостники.

Я подобрал те анонсы, что так или иначе касаются интерфейсов — есть неплохой шанс поработать над ними. Что из этого взлетит, а что останется бесполезной грудой пластика — увидим через год (вот что было в прошлом — https://t.me/pdigest/16). Следующий CES пройдёт 7-10 января 2020 года — https://www.ces.tech/.

#ces #trends #events

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

Кадровики давно используют карты навыков и умений (карты компетенций), которые помогают подсветить сильные и слабые стороны сотрудника, а потом целенаправленно качать их. Инструмент не новый, но дизайнеры прочухали про него только несколько лет назад. К сожалению, как и с многими другими методами — на деле используют немногие. А зря.

Jonny Burch собрал коллекцию карт компетенций для дизайнеров и разработчиков от разных компаний — http://www.progression.fyi/. Именно дизайнерских, конечно, маловато, но есть примеры от Basecamp, Buzzfeed, Coryndon Luxmoore, Lyst, Ope, Peter Merholz (самая толковая, хотя там нет hard skills), Zendesk. Устроены они просто: есть перечень навыков, у каждого даётся оценка уровня владения.

Мы используем этот инструмент с 2016 года — https://jvetrau.com/uxstrategy-4. Сначала я заполнял его руками сам, а в позапрошлом году запустили отдельный инструмент в интранете. Как это работает:

1. Дизайнер и дизайн-менеджер оценивают текущие навыки. Получаем отчёт о сильных и слабых сторонах.

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

3. Там же выбираем 4-7 навыков, которые дизайнер хочет качать — это добровольный выбор, к чему больше лежит душа. Навык становится одной из целей на год, у него есть чёткий todo из теории (книги, курсы и т.п.) и практики (реальные задачи из продуктового плана).

4. На регулярных встречах 1:1 берём кусок из todo и смотрим прогресс, решаем возникающие проблемы.

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

На только что возникший у вас вопрос «какой готовый инструмент взять» простого ответа нет. Большинство использует сервисы для оценки 360 (например, студия Made by Many взяла Coach Amp 360 — https://www.uxmatters.com/mt/archives/2018/07/review-ux-and-digital-design-week-2017.php). Мы адаптировали аналогичное внутреннее решение для игровиков. Макс Бабич запустил отечественный сервис Cloveri — https://cloveri.com/. Кстати, Jonny Burch делает специализированный инструмент — https://progressionpack.com/.

А вот ещё парочка свежих примеров:

— Figma: https://www.figma.com/blog/how-we-built-the-figma-design-team/. Шаблон для карточек-профилей дизайнеров — https://www.figma.com/file/Dt8aRANBGlPQULz2S8ofE8F9/Team-Trading-Cards?node-id=0%3A1.

— Facebook: https://medium.com/elegant-tools/designing-a-better-career-path-for-designers-872b0aa50b5b. Одна из версий в компании.

— Jason Mesut: https://medium.com/shapingdesign. Серия статей о его карте.

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

P.S. Кстати, подробнее про карту компетенций я буду рассказывать на курсе о о дизайн-менеджменте цифровых продуктов на Bang Bang Education — https://bangbangeducation.ru/course/dmpatterns (стартует 26 февраля).

#designmanagement #teams #designops

Запустился неплохой каталог конференций по дизайну на 2019 год — https://design-conferences-2019.com/. Сейчас там 117 событий по всему миру.

Продвинутые пользователи ПК давно знают про Find UX Events (https://www.finduxevents.com/) — лучший источник и базу знаний по дизайн-мероприятиям, где есть данные на пару лет вперёд. Их подборка — https://www.finduxevents.com/ux-conferences-2019/. К сожалению, погиб смертью храбрых ещё один толковый каталог, http://lanyrd.com/.

Долгое время подборки на основе таких каталогов делали Smashing Magazine, но в последнее время перестали. Знамя перехватили UX Collective — https://uxdesign.cc/the-best-ux-design-conferences-2019-events-bcd7b28f722d.

Судя по всему, списки конференций буду запускаться ещё не раз. Например, совсем недавно открылся https://designconf.site/. Не самый полный, но до кучи. Таблица, из которой они берут данные ― https://docs.google.com/spreadsheets/d/1jMa4aOuq2eahfPfhBttGZNS0PIm1CS39zyJUS3KLieY/edit#gid=912669276.

А ещё в 2019 году исполняется 100 лет легендарной школе Bauhaus, одной из основополагателей современного дизайна. Официальный сайт юбилея собрал все события и материалы на тему ― https://www.bauhaus100.com/.

Я побывал на приличном количестве отечественных и международных конференций, фестивалей, мастер-классов и митапов за последние годы. Сделал для себя вывод, что есть два типа контента и посещать их стоит под задачу:

— Общетематические конференции. Это в первую очередь про вдохновение, ведь сложно ожидать целенаправленной прокачки каких-то навыков от контента про всё сразу. Вы получите неплохой срез того, о чём сейчас говорят в профессии, и заряд бодрости, чтобы не отставать от трендов. В этом плане мне понравились Amuse (Будапешт), UXLx (Лиссабон) и OFFF (Барселона). Занятной была Google SPAN (Лондон). Из отечественных хорошо работают Дизайн-выходные (разные города) и наша Mail.ru Design Conference × Dribbble Meetup (Москва). Давно хочу попасть на Awwwards Conference и Interaction.

— Узкоспециализированные. Дизайн-менеджмент, дизайн-системы, брендинг, типографика и т.п. Это крутой способ прокачать конкретный навык и углубить знания в теме. Здесь хорошо зашли MXConference / LXConference (Сан-Франциско) и DesignOps Summit (Нью-Йорк) по дизайн-менеджменту, Серебро набора (Москва) по типографике. Где-то на стыке между двумя форматами Future London Academy (Лондон). Сильное разочарование — Clarity (Сан-Франциско) якобы по дизайн-системам. В этом году попаду на Brand New (США) по брендингу и Leading Design (Лондон) по дизайн-менеджменту.

Поэтому на вопрос «какую конференцию посоветуешь» я часто отвечаю: смотря что вы хотите узнать. Свой подход я описал выше.

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

#events

Вы, наверное, уже заметили, что я давно дружу с ребятами из https://t.me/psd_eu. Пару раз участвовал в их онлайн-интенсивах Design Line (http://intensive.dsgnline.ru/), где выступает много сильных отечественных дизайнеров в развёрнутом полуторачасовом формате. Мы постоянно обмениваемся опытом по ведению Телеграма.

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

​Год только начался, а список новых инструментов дизайна и свежих обновлений уже распирает размер одного поста. Завалило не хуже чем знатной метелью по зиме. Ну, попробую не расплескать:

Design Camera: Приложение для Mac позволяет вставить в макет устройство и на лету повернуть его в 3D нужным образом.

Sketch 53 (бета): Обещают более точные настройки изменяемых свойств символов и более удобный интерфейс их замены. Обзор. Плагины: 

— MakeUI: Конструктор UI Kit для Sketch. Можно выбрать основные параметры элементов интерфейса (цвета, радиус скругления и т.п.), на выходе получите библиотеку символов.

— Pointbreak: Позволяет делать адаптивные макеты.

Draftium: Занятный новый онлайн-инструмент прототипирования. Выбираете промо-сайт из шаблона, меняете тексты и смотрите на устройстве.

Studio 2.0: Вышла вторая версия инструмента. Теперь это не просто прототипирование, а цельный инструмент дизайна с возможностью экспортировать код и опубликовать сайт. Совместная работа прилагается.

Adobe XD: Декабрьское обновление. Облачное хранение макетов и намёк на совместную работу как в Figma. Также обещают версионирование и организацию грамотной библиотеки компонентов для команды. 

Shane Williams сделал пачку простых и наглядных примеров использования новой возможности авто-анимации в Adobe XD. Какие состояния экранов нужны для каждого из прототипов.

Figma: Как прототипировать интерфейсы дополненной реальности в связке с инструментом Torch.

Weblium: Ещё один конструктор промо-сайтов. Подаётся как основанный на ИИ, но, видимо, имеются в виду совсем простые вещи. Из интересного ― гибкое применение тем оформления (можно отдельно и цельно менять цветовую палитру, шрифтовой набор и вид элементов управления).

Tilda: Обзор новых возможностей, запущенных в 2018 году.

Readymag: Запустили галерею примеров удачно сделанных сайтов, показывающих возможности платформы.

Webflow: Коллекция шаблонов и других вспомогательных ресурсов.

remove.bg: Онлайн-сервис убирает фон с фотографии.

Nolt: Сервис для работы с базой знаний инсайтов. Агрегирует обратную связь из разных источников и помогает сформировать продуктовый план на их основе.

User Interviews: Сервис помогает хранить базу респондентов для пользовательских исследований и находить новых.

Marvel: Шаблоны для рабочих сессий дизайн-мышления.

Illustrations.design: И ещё один сервис стоковых иллюстраций, которые можно настраивать под свою ситуацию. На сдачу дают ещё и шаблоны самих промо-сайтов.

Flare: Команда показывает, что можно сделать с помощью инструмента.

Palette: Достаточно гибкий и интересный генератор цветовых палитр. Свежий подход относительно тысяч других решений на тему, которые запускаются каждые полчаса.

В 2019 будет жарко — ключевые инструменты сделали мощные ставки в прошлом году. Figma несётся с космической скоростью и каждый второй уже изменяет Скетчу с ней. Adobe XD поднялись над собой и закрыли кучу брешей, мешавших им восприниматься серьёзно. Sketch как текущий дефолтный выбор должен сделать рывок, чтобы не проиграть наседающим на пятки. Рыба карась — игра началась.

 #tools

​А вот и свежий выпуск магазина на диване готовых решений. Наберите короткий номер @pdigest, чтобы получить подборку новых интерфейсных паттернов:

1. Коллекция примеров интерфейсных звуков известных сервисов. На старте есть Skype, Slack, Facebook, Apple, Whatsapp и другие.

2. Google выложили методички с лучшими практиками, где разобрали многие известные бренды:

― Мобильные интернет-магазины
― Путешествия
― Финансы
― Недвижимость
― Новостные и контентные сайты
― Промо-сайты

3, Компания Growth Rock исследовала 40 крупнейших американских интернет-магазинов и выделила ключевые паттерны оформления заказа в их мобильных версиях. Они проводили некие A/B-тесты на прототипах, что выглядит сомнительно. Но как чеклист — годно.

4. Библиотека паттернов мобильных приложений. Каждый пример можно получить в коде.

5. Коллекция интерфейсных паттернов с фокусом на психологический комфорт пользователей. Пока только наполняется, но заход интересный.

6. Raluca Budiu из Nielsen/Norman Group разбирает паттерны хороших чатов поддержки. Плюсы, минусы, подводные камни.

7. Гайдлайны по доступности интерфейсов для пользователей с ограниченными возможностями от Сбербанка. Толковый подробный чеклист.

8. Addy Osmani разбирает этапы загрузки страницы сайта и выделяет критические точки, в которых пользователь ожидает увидеть не только основной контент, но и работающие инструменты взаимодействия. Он приводит выкладки влияния этих этапов на конверсию.

9. Команда Codea показывает интересный пример меню в iOS для профессиональных инструментов ― оно ближе к десктопным продуктам. Часть 2.

10. Katie Sherwin и Jakob Nielsen продолжают рассказ о новом исследовании Nielsen/Norman Group особенностей использования интерфейсов детьми разного возраста. В этой статье приводят разницу восприятия типовых интерфейсных паттернов.

12. Colin Eagan показывает, как можно проектировать сервисы, предполагающие персонализацию.

12. Raluca Budiu из Nielsen/Norman Group исследовала, как пользователи реагируют на рекомендательные системы. Зачастую непонятно, почему сервис выдаёт именно этот контент. В другой статье разбирают проблемы рекомендательных систем, которые загоняют пользователя в «пузырь» одинакового контента.

13. Chris Ashton попробовал использовать программу для чтения контента сайта вслух. Проблем у известных сервисов выше крыши.

Тут выше крыши идей для ваших интерфейсов, так что не упустите шанс ― сделайте их лучше и шелковистее уже сейчас.

#patterns

​InVision предложили свою модель зрелости дизайна. Это 5 стадий взросления дизайн-команды ― от исполнителя до визионера. В дополнение к модели они опросили 2000 дизайнеров и попытались понять, как отличается зрелость в разных странах, отраслях и типах компаний.

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

Я давно собираю модели зрелости в рамках своей серии статей о паттернах дизайн-менеджмента. Серию начал в 2013 году со своей модели, вокруг которой дальше провязал конкретные методы и практики. Она сочетает в себе два подхода:
― «лестница», по которой дизайн-команда поднимается вверх по мере взросления;
― «луковица», где каждый слой можно развивать самостоятельно.

Большинство моделей зрелости используют первый подход, «лестницу»:
1998: Jonathan Earthy (http://www.idemployee.id.tue.nl/g.w.m.rauterberg/lecturenotes/usability-maturity-model[1].pdf). У неё бесчисленное количество вариаций от самых разных авторов.
2006: Rosa Wu и Jess McMullin
2006: Jakob Nielsen
2007: Danish Design Centre
2008: Forrester

Более удачные варианты «лестницы» предлагают фреймворк с описанием действий на каждом шаге:
2004: HFI
2013: HIMSS
2014: Keikendo
2015: Macadamian
2015: Nomensa
2015: Infosys
2015: DMI
2018: Richard Banfield

Фреймворки/чек-листы:
2012: Milan Guenther
2016: Forrester

Совмещение «лестницы» и «луковицы»:
2017: Natalie Hanson

«Луковица»:
2009: Sabine Junginger
2017: David Service

Пирамида:
2012: Stefan Klocek

Лепестковая диаграмма:
2018: Gebruiker Centraal

Если собирать все вариации на основе популярных подходов, то за 20 лет наберётся с полсотни моделей зрелости (собираю всё это добро в Pinterest). Зачем так много? Если откинуть задачу продажи консультантами своих услуг, то многообразие организаций и их реальных ситуаций не позволяет создать одну универсальную. Даже если цели системного улучшения дизайна у компаний похожи, особенности орг.структуры и процессов, а также наследие создают уникальную ситуацию, где у каждого будет свой путь.

Более полная версия статьи с картинками.

Кстати, про модели зрелости я рассказываю на курсе о дизайн-менеджменте цифровых продуктов на Bang Bang Education. Места в первом потоке раскуплены, но второй уже объявлен — стартует 14 октября.

#designmanagement #designops #maturity

​Собрал дайджест продуктового дизайна за январь 2019. Сотня свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.

Напомню, что его можно получать разными способами: 
— ВКонтакте
— Facebook
— Рассылка по почте

#digest

​Пользовательские исследования становятся всё доступнее — и в плане методов (тонны методичек), и в плане инструментов (даже на русском), и в плане осознания важности (спасибо (без шуток) переупаковщикам под марками «дизайн-мышление» и «customer development»). А значит меньше компаний запускает продукты наудачу (шутка.jpeg). Но для тех, кто всё-таки осознал, подсобрал пачку свежих памяток и шпаргалок по базовым и не очень методам:

1. Крутой онлайн-учебник по проведению пользовательских исследований от сервиса User Interviews. Он описывает основы, разведочные методы и валидацию/тестирование, подбор респондентов, инструменты и построение исследовательских команд.

2. Erika Hall показывает разницу между вопросом самого пользовательского исследования и конкретным вопросом интервью с пользователем. Менеджеры продуктов и другие заказчики часто путают их и приходят с конкретным методом в голове, хотя правильно сформулированный вопрос исследования может потребовать вообще другого подхода.

3. Andrea Drugay из Dropbox рассказывает о формате регулярных быстрых сессий пользовательских исследований. Раз в две недели они приглашают несколько респондентов, которые общаются с продуктовыми командами в формате «быстрых свиданий».

4. Простой и мощный подход к выбору методов пользовательских исследований от David Travis из UserFocus. Он основан на классических матрицах 2x2 и предлагает 10 точек зрения на разные задачи.

5. Jared Spool критикует авторов книг о Jobs to Be Done за то, что они поверхностно рассказывают об исследовательской работе в ходе выявления потребностей пользователей. Из-за этого повторить успех красивых кейсов-примеров сложновато.

6. Kate Moran даёт советы по ситуациям, когда данные разных исследований интерфейса противоречат друг другу. Как правильно проверить данные, методы и вообще правильно действовать.

7. Paula Barraza делится советами по проведению быстрого итеративного пользовательского тестирования интерфейсов. Как проводить сессии, фиксировать результаты и общаться с командой.

8. Jim Ross разбирает типичные ошибки при планировании и проведении пользовательских исследований. Часть 2.

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

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

#research

​Сборник лучших хитов про дизайн-менеджмент и командную работу по версии дайджеста продуктового дизайна, volume 10: январь-февраль 2019 [скачать бесплатно без смс]:

1. Обновил свою презентацию о подходе к долгосрочному планированию изменений в дизайне Mail.ru (с учётом плана на 2019). В начале прошлого года мы запустили свежую версию, с помощью которой системно улучшаем дизайн продуктов и внедряем новые методы работы. В основе — классическая пирамида стратегического планирования от видения и миссии до конкретных шагов на базе OKR (Objectives & Key Results).

2. Рассказы о работе других дизайн-команд:
— Лена Куликова о Райффайзен Банке;
— Саша Гришин о Badoo.

И относительно недавно появившиеся блоги:
— Spotify;
— Яндекс;
— Рамблер;
— Mail.ru.

3. Erin Woo рассказывает о формате недельных выездов дизайнеров мобильного MS Outlook. Коллеги из разных городов съезжаются вместе и решают проблемы пользователей, до которых давно хотелось добраться.

4. James Rotanson из Atlassian даёт советы по настройке Jira для дизайнеров. Он приводит пример работы собственной команды.

5. Советы по правильному взаимодействию интерфейсных писателей с менеджерами продуктов и дизайнерами от Gene Shannon из Shopify. Толковые мысли про формирование ожиданий и хороший пример матрицы RACI для учёта заинтересованных лиц.

6. Jenny Wen из команды Dropbox Paper даёт советы по взаимодействию дизайнеров и разработчиков. Как упростить коллегам жизнь и оптимизировать совместную работу.

7. Конференция по дизайн-менеджменту Design Leadership Summit 2018 прошла 29 сентября в Торонто. Опубликованы видео-записи выступлений.

8. Конференции по дизайн-системам поняли ограниченность темы и переметнулись на общие вопросы по управлению дизайн-командами. DSConf из Хельсинки теперь Joint Futures, а Design Systems London вот-вот объявят ребрендинг. Хайп DesignOps пожирает предыдущих хайпожоров.

Соляночка без какого-то единого посыла, как я люблю, но грамотно отфильтрованная для опытных и начинающих дизайн-менеджеров, арт-директоров и продуктологов. Сделаем продуктовый быт лучше!

#designmanagement #designops

​Рождаемость новых инструментов дизайна такая, что астрологи могут чилить ― им не нужно объявлять какие-то особенные недели. Год только раскачивается, а они уже шарашат вовсю:

UserBit: Интересный комбинированный онлайн-сервис для анализа пользователей и концептуального проектирования. Позволяет вести заметки с пользовательских исследований и записывать инсайты, описывать персонажей, делать карты сайта.

Window: Приложение для Android помогает проверить точность сборки экранов. По сути работает как Zeplin, показывая параметры элементов интерфейса. Анонс.

ScreenSpace: Онлайн-сервис (уже второй) позволяет вставить в макет устройство и на лету повернуть его в 3D нужным образом.

Adobe XD: Январское и февральское обновления. Развитие прототипирования голосовых интерфейсов, улучшение импорта из Photoshop и Illustrator, экспорт в AfterEffects, рост количества плагинов, доработки по ключевым функциям.

Color by Cloudflare Design: Генератор цветовых палитр с учётом пользователей с ограниченными возможностями.

Mockplus iDoc: Ещё один инструмент для передачи макетов разработчикам.

Figma: Получили ещё $40 млн инвестиций (суммарно в них вложили уже $82,9 млн). В ожидании новых рывков посмотрите бесплатные шаблоны и заранее подобранные шрифтовые комбинации.

Sketch: Плагины: Anima 3.0 собрали все свои плагины воедино с возможностью делать достаточно мощные интерактивные прототипы с вводом данных и микро-анимациями.

Screen Guru: Простой сервис для создания скриншотов сайтов — даёте ему ссылку, он на выходе — картинку в окне браузера.

Image Resizer: Онлайн-сервис готовит версию любого изображения в 50 форматах для соц.сетей и других типовых задач.

Tilda: Выпустили учебник по анимации, помогающий собирать более интересные проекты в инструменте.

wiARframe: Сервис для прототипирования в дополненной реальности. Работает в браузере, есть предпросмотр на телефонах и планшетах.

Stubborn Illustrations: Ещё одна библиотека иллюстраций с возможностью сборки конкретного сюжета для конкретной задачи. Судя по всему, в этом году их число дойдёт до сотни — такая модель распространения гораздо лучше стандартных стоков.

Mixed: Ещё один инструмент для совместной работы на «маркерной доске» в браузере в духе RealtimeBoard.

InVision Studio: Купили сервис для версионирования макетов Trunk для интеграции в инструмент. Читайте также учебник по работе с инструментом.

Кажется, следующий выпуск придётся делать уже на следующей неделе. А вы пока поковыряйте эту подборку.

#tools

​Когда говорят о внедрении дизайн-систем, как правило используют стандартный набор выхлопа для бизнеса:
1. Повысить скорость сборки макетов и продуктов;
2. Повысить качество продуктов;
3. Получить кумулятивный эффект от удачных продуктовых решений;
4. Упростить взаимодействие с другими командами;
5. Перейти от крупных редизайнов раз в несколько лет к постоянному поддержанию актуальности интерфейса.

Некоторые пробуют посчитать эти умозрительные выгоды в понятных метриках, чтобы просить дополнительные ресурсы на внедрение с цифрами в руках:

1. Cristiano Rastelli предложил подход к расчёту выхлопа на примере Cosmos от Badoo. Он сравнил изменения в коде до и после внедрения единых компонентов и увидел, что активность перетекла из обновлений мобильного сайта в доработки тех же элементов уже во фреймворке. Конечно, многие разработчики скептически относятся к измерениям чего-либо через количество коммитов, но идея интересная.

2. Bryn Rozzier провёл интереснейшие расчёты выхлопа для одного из клиентов. Он попытался перевести стандартные вещи вроде уменьшения трудозатрат, ускорения запусков и улучшения качества в деньги. Показана вся цепочка вычислений и формулы, так что можно применить к своим задачам. Лучший материал на тему ROI внедрения дизайн-систем.

3. Jeroen Ransijn рассказывает о создании дизайн-системы инструмента аналитики Segment. Она выросла из прототипа нового дизайна для конференции — необычный путь создания. Автор показывает толковый дашборд, отслеживающий внедрение дизайн-системы в продукте. Сайт дизайн-системы.

4. Варя Степанова рассказывает о пользовательских исследованиях продуктовых команд, использующих дизайн-систему финского телеком-оператора Elisa. Это помогает понять её проблемы и определить направления развития.

А вот просто немного толковых свежих материалов на тему:

1. Specify: Занятный инструмент для связки двух ключевых частей дизайн-системы — дизайнерских шаблонов в Sketch и компонентов в коде. На вид что-то в духе более мощного Zeplin — ключевые переменные визуального языка экспортируются в виде токенов, дальше они подключаются к компонентам в коде (обещают pull- и push-запросы к Git).

2. Дизайн-система отечественной компании БАРС Груп (дочка Ростех). Страница в клубе создателей отечественных дизайн-систем.

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

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

5. Ryan Cordell из Deliveroo показывает, как интерфейсные писатели интегрировали правила работы с текстами в дизайн-систему.

6. Alan B Smith показывает, как создавать компоненты с поддержкой разных тем оформления на базе фреймфорка Styled System.

7. Пара относительно свежих фреймворков:
— CodyHouse.
— Emotion.
— MDX.js.

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

#designsystems

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

1. Классические исследования по NPS проверяют влияние метрики на будущую прибыль привычного бизнеса. Jeff Sauro попробовал посчитать его для программных продуктов. Связь есть (порядка 40% точности предсказания через NPS и SUS), хотя примеров для выборки маловато.

2. У NPS, как и у любого другого метода, есть свои особенности и ограничения, а также критики, которые книжек не читали, но высказаться должны. Jeff повторил эксперимент автора метрики Fred Reichheld и показал распределение оценок и готовности рекомендовать продукт. Спойлер: почти всё работает как обещано.

3. И ещё раз повторил, чтобы убедиться в её валидности. В целом всё так ― обосновывается прибыль в прошлом и с вероятностью в 30% будущая.

4. Исследовал различия между метриками, основанными на готовности рекомендовать продукт в будущем и свершившейся рекомендацией. Второе честнее, но в идеале — связка обоих показателей.

5. Подробнейше разбирает метрику CE11 от Gallup, которую Jared Spool рекомендует использовать вместе NPS. Это 11 вопросов про удовлетворённость брендом и готовность рекомендовать его — опросник появился в одно и то же время с NPS, но не стал популярным. Более распространённые UMUX-Lite и SUPR-Q дают более надёжные результаты.

Не устану рекомендовать подписаться на его бложик — ДУХ СТАРОЙ ШКОЛЫ ЖИВЁТ ТОЛЬКО В MEASURINGU, ГДЕ ПОЛЬЗОВАТЕЛЬСКИЕ ИССЛЕДОВАТЕЛИ ЖИВУТ ЭНЕРГИЕЙ, МОЛОДОСТЬЮ И НОРМИРУЮТ СИСТЕМУ! ТОЛЬКО СТАТИСТИЧЕСКАЯ ЗНАЧИМОСТЬ, ТОЛЬКО ХАРДКОР! ЮНИТИ УЛЬТРАХАРДКОР MEASURINGU!!! ГОВОРИТЕ ОТКРЫТО И СМЕЛО ПРЯМО В ЛИЦО!

#metrics #nps

​Я регулярно выкладываю подборки интерфейсных паттернов для повышения насмотренности — это помогает расширить инструментарий дизайнера интерфейсов и технично обходить давно известные грабли (архив выпусков ищите по хештегу #patterns). 

Ребята из https://t.me/cultofdetails посвятили этому отдельный канал, где под микроскопом разбирают интересные детальки, пружинки и винтики интерфейсных решений. 

Долгое время главным источником вдохновения был Little Big Details, но он затух, а шариться по десяткам Пинтерестов не всегда удобно. Есть десятки сайтов с коллекциями паттернов вроде UI Patterns, но там не особо удобно следить за новостями. Листайте интересные наработки и присылайте свои примеры на @cultofdetails.

​В Барселоне проходит традиционная выставка Mobile World Congress по теме достижений мобильных технологий и прочей бытовой техники на пару с просто модными гаджетами. Здесь больше фокуса, чем на CES, хотя меньше уморительной дичи.

Естественно, главная тема года — гибкие экраны. Их, на удивление, меньше сотни:

1. Третий коммерческий гибкий телефон, Huawei Mate X. Экран у него единый, при складывании остаётся снаружи.

2. Oppo показали свой прототип, который подозрительно похож на Huawei Mate X.

3. Nubia показали обновлённую смесь телефона и часов с гибким экраном.

4. Полуживой прототип от TCL с интересными трансформациями.

5. За несколько дней до MWC Samsung показали свой первый коммерческий гибкий телефон Galaxy Fold. Он, конечно, не самый компактный, зато его можно купить и он лучше первого продающегося гибкого телефона от Royole.

6. Комично выглядит затычка в виде двухэкранного телефона от LG, которые не успели на поезд гибких экранов. Nintendo DS на минималках.

Среди других телефонных забав были:

— Ультравысокие киношные экраны 21:9 от Alcatel и Sony.

— Дикий телефон размером с кирпич и батареей на 18 000 mAh от Energizer.

— Производители Android-телефонов массово добавляют отдельную физическую кнопку для вызова Google Assistant.

А ещё оказалось, что мобильная ОС KaiOS стала третьей по популярности в мире — на руках 80 млн телефонов. Она базируется на наработках Firefox OS и заточена под дешёвые кнопочные телефоны.

Вишенкой была презентация Microsoft Hololens 2 за день до открытия. Он стал значительно лучше по всем показателям — качество картинки, угол обзора, распознавание объектов и управление жестами без отдельного контроллера, отслеживание взгляда и управление им. Устройство ориентировано на компании, а не конечных пользователей.

В Unreal Engine 4 появится поддержка устройства. Нарезка ключевых моментов презентации (рвань!).

Ну и возродили Kinect для B2B-рынка.

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

На нашем конкурсе Mail.ru Design Cup дизайнеры решали задачу на тему почты для гибких экранов. На Dribbble тоже есть пара концептиков: Максим Гедрович, Kizuku Kitada и Александр Шевенёнов. Не все идеи интересные, но любые эксперименты на тему приближают нас к осуществлению эффектных картинок из брендовых видео, показывающих видение будущего.

#trends #mwc

​Ничто не собирается так быстро, как непрочитанные письма, вечерние пробки, новые инструменты дизайна и интерфейсные паттерны. Вот что накопалось по последнему пункту:

1. Отличная памятка Anna Kaley из Nielsen/Norman Group о правильных названиях интерактивных элементов и выборе комбинаций для горячих клавиш (десктопные и веб-приложения).

2. Слава Шестопалов достаточно подробно описал паттерны сложных таблиц с возможностью редактирования. Учтено куча нюансов по взаимодействию с ними.

3. Свежая версия классической подборки ошибок в интерфейсах от Jakob Nielsen и Page Laubheimer.

4. Сотрудники Центра цифровой этнографии в RMIT University Bjorn Nansen и Rowan Wilken исследовали, как дети взаимодействуют с интерфейсами мобильных устройств. Перевод от Usethics.

5. Советы по грамотной локализации продуктов от Jonathan Walter и Elena Dunne, а также отличиях термина от интернационализации и глобализации.

6. Maria Rosala из Nielsen/Norman Group собрала памятку по дизайну интерфейса отслеживания статуса заказа. Она рассматривает два формата — отдельный экран со статусом и письма или уведомления по ходу обновления статуса.

7. Therese Fessenden из Nielsen/Norman Group собрала памятку по проектированию подвалов на сайтах. Типовые элементы и польза в целом.

8. Чеклист по обработке ошибок в формах от Rachel Krause из Nielsen/Norman Group.

9. Edward Scott из Baymard Institute перечисляет способы помощи пользователю при нулевых результатах поиска в интернет-магазинах.

10. Edward Scott показывает, как правильно подавать аксессуары и сопутствующие товары в интернет-магазинах.

11. Jeff Sauro рассказывает о сравнительном исследовании юзабилити сайтов американских авиакомпаний.

В последнее время Nielsen/Norman Group усилили качество и количество своих и без того топовых публикаций, так что эта подборка всё чаще выезжает на их горбу. Некоторые из их статей совсем уж капитанские, но в основном — годнота. Они съели собаку на подтверждении работы интерфейсных паттернов и обнаружении проблем, так что доверие к их выводам повышенное.

#patterns

​Пс-с-с, как насчёт свежего выпуска бесплатной инструкции по пониманию пользователей? Вы только посмотрите на эти статеечки!

1. Золотые слова David Travis из Userfocus: хватит спрашивать пользователя, какой вариант дизайна ему нравится. Это даёт ложные результаты, которые создают иллюзию принятия решений на основе данных.

2. Alan Klement предлагает свою модель Jobs to Be Done, которая очень здорово и подробно описывает предпосылки возникновения «работы», процесс выбора и «найма» продукта. Наикрутейший и ультраполезнейший чеклист ситуаций, опирающийся на десяток существовавших до этого других моделей.

3. В другой статье он разбирает интерфейс LinkedIn в рамках Jobs to Be Done. Alan говорит, что это отличный и яркий пример использования метода — соц.сеть чётко делит пользователей на 4 «работы» и грамотно продаёт каждую из них правильными словами и ценностью.

4. J. Henry McKeen продолжает рассказ о проблемах персонажей в сравнении с Jobs to Be Done.

5. Kate Kaplan из Nielsen/Norman Group показывает, как проводить пользовательские исследования для создания Customer Journey Map.

6. Karan Gupta из Dropbox описывает подход к работе с данными аналитики, пользовательских исследований и поддержки, которые дизайнеры используют в своей работе.

7. Kathryn Whitenton даёт советы для тех, кто только начинает внедрять юзабилити-тестирование в компании и встречает первичное отрицание со стандартными вопросами «это слишком маленькая выборка» и «это какие-то неправильные пользователи».

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

#research #jtbd

Собрал дайджест продуктового дизайна за февраль 2019 — https://jvetrau.com/digest-2019-feb/. Сотня свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.

Напомню, что его можно получать разными способами:
— ВКонтакте — https://vk.com/pdigest
— Facebook — https://www.facebook.com/groups/pdigest/
— Рассылка по почте — http://eepurl.com/bu61XX

#digest

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

Sketch: Получили $20 млн от инвестфонда Benchmark. В отличие от всех остальных компания все эти годы развивалась на деньги основателей. Но становится видно, как Figma с суммарными $82,9 млн обходит их на повороте.

Ребята тизернули планы на год — браузерная версия с совместной работой, передача макетов из коробки, командные тарифы и пространство в облаке. Правда, темпы всё равно не огонь — первую версию в браузере обещают только к концу года. За это время Figma сделает немало витков вокруг земли.

И немного плагинов:
― Динамичные стрелки для карт сайтов и переходов.

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

Figma: Книга Саши Окунева с подробной инструкцией работы. Thomas Lowry написал памятку по созданию библиотеки элементов. Maxime Robinet поженил инструмент с Lottie.

Haiku Animator: Инструмент сфокусировался на интерфейсной анимации и переименовался соответствующе.

Marvel: Добавили возможность пользовательского тестирования прототипов. Они помогают как с записью сессии, так и с рекрутингом. Также вышла вторая версия плагина Maze для тех же задач.

Adobe XD: Мартовское обновление. Упростилось использование наработок в Adobe Illustrator, доработки интерфейса, улучшение интеграции с Jira.

Joe Schmoe: Коллекция иллюстраций-аватаров пользователей для ваших макетов.

Populate: Огромная коллекция полу-реальных данных для макетов и прототипов. Имена людей, клички животных, адреса, цвета, музеи, художники — всего 120 списков.

AfterEffects: Jonas Naimark из Google выложил шаблон, облегчающий работу с анимацией в Material Design.

Accessible Brand Colors: Сервис подсказывает, насколько выбранные цвета хорошо работают для пользователей с ограниченными возможностями в разных контекстах — фон, шрифты разного размера и т.п.

Usabilla: Инструмент купили SurveyMonkey.

Supernova: Серьёзно обновили техническую начинку.

Рынок (нокаляеться).

#tools