Дайджест продуктового дизайна

@pdigest Like 0

Юрий @jvetrau Ветров собирает свежие статьи, инструменты, паттерны, кейсы и тренды с 2009 года. 250 000 читателей на vc, Хабре и других каналах:
ВК — https://vk.com/pdigest
FB — https://www.facebook.com/groups/pdigest/
Рассылка — http://eepurl.com/bu61XX
Channel's geo & Language
Russian, Russian
Category
Design


Contact author
Channel's geo
Russian
Channel language
Russian
Category
Design
Added to index
19.12.2017 22:20
advertising
SearcheeBot
Your guide in the world of telegram channels
TGAlertsBot
Monitoring of keywords in channels and chats
Telegram Analytics
Subscribe to stay informed about TGStat news.
30 378
members
~9.5k
avg post reach
~2k
daily reach
~2
posts per week
31.2%
ERR %
102.7
citation index
Forwards & channel mentions
348 mentions of channel
872 post mentions
58 forwards
👄👁👁👄
19 Sep, 16:33
20 Jul, 10:32
UX Horn 🌀
16 Jul, 10:24
UX Horn 🌀
29 Jun, 12:25
UX Horn 🌀
26 Jun, 11:13
UX Horn 🌀
17 Jun, 10:25
8 Jun, 13:40
Spasibonastya
26 May, 11:41
UX Horn 🌀
25 May, 11:28
UX Horn 🌀
18 May, 11:34
UX Horn 🌀
7 May, 10:05
19 Mar, 10:04
UX Horn 🌀
16 Mar, 10:29
ProductWork.ru
16 Mar, 10:05
UX Horn 🌀
2 Mar, 12:40
ProductWork.ru
27 Feb, 17:24
Jasheaux
25 Feb, 18:33
Much More
25 Feb, 14:20
SETTERS
25 Feb, 14:15
23 Dec 2019, 10:05
bangbangeducation
3 Dec 2019, 13:02
28 Nov 2019, 10:09
21 Nov 2019, 10:04
21 Nov 2019, 06:52
seven days out
14 Nov 2019, 19:07
IT Radio Streams
11 Nov 2019, 13:45
29 Oct 2019, 13:20
Channels quoted by @pdigest
Figma design
9 Sep 2019, 10:04
Digital Доктор
17 Apr 2019, 10:20
Mail.ru Design
11 Apr 2019, 10:04
sternina
28 Mar 2019, 10:04
Product Management
27 Mar 2019, 10:20
cult of details
27 Feb 2019, 10:20
PSDEU
28 Jan 2019, 09:28
Package Design
28 Jan 2019, 09:28
Magazine Design
28 Jan 2019, 09:28
Now How Channel
27 Dec 2018, 15:04
UI/UX Designer
24 Oct 2018, 12:07
22 Aug 2018, 15:55
9 Aug 2018, 10:14
bangbangeducation
6 Aug 2018, 09:41
UX Work
23 Jul 2018, 09:48
UX Notes
23 Jul 2018, 09:48
No Flame No Game
2 Jul 2018, 10:31
Диалоги
26 Mar 2018, 14:35
Designgest
8 Feb 2018, 10:24
Recent posts
Deleted
With mentions
Forwards
В сентябрьском дайджесте снова будет пачка статей о лучших паттернах и практиках. Вот что выйдет в нём и выходило в предыдущем:

1. IBM: памятка по поддержке пользователей с ограниченными возможностями.

2. Baymard: ссылки на товары в эффектных промо-фото в интернет-магазинах.

3. Google: адаптация интерфейса для стран, где мобильный трафик дорог. Как ограничивать объём скачиваемых данных и вовремя информировать пользователя.

4. Alex Trudov: все версии формы регистрации Google с 2005 года.

5. Arun Venkatesan: эволюция настроек macOS. Как менялся их состав и конкретные иконки.

6. Val Head: режим ограниченной анимации в вебе. Это проблема для пользователей, у которых большое количество движения на экране вызывает когнитивные нагрузки.

7. Baymard: хлебные крошки в мобильных интернет-магазинах.

8. Сравнение процесса открытия нового счёта в американских банках Chime и Wells Fargo.

7. Слава Шестопалов: псевдо-диаграммы. Они хорошо смотрятся на Dribbble, но плохо представляют данные.

8. NN/g: иконки для раскрывающихся списков на мобильных. Стрелка вниз ожидаемо самая узнаваемая, при этом с такой иконкой чаще нажимают на неё саму, а не на название элемента списка.

9. Конспект выступления редактора интерфейсов Анны Кочетковой из Тинькофф Бизнес. Советы и лучшие практики.

10. Salesforce: приборные панели для метрик, которые могут меняться со временем.

11. Andrew Birgiolas: редизайн приложения Sephora. Они проверяли много прототипов с помощью метода RITE и постепенно фильтровали идеи.

12. NN/g: проблемы виртуальных туров по туристическим местам. Из-за пандемии они вроде бы должны стать востребованы, но обычная фотогалерея удобнее и практичнее.

Много — не мало.

#patterns
Read more
Хайп вокруг дизайн-систем ушёл, но польза никуда не делась. Многие компании спокойно пилят компонентные фреймворки для своих задач и не особо светят их наружу. 29 сентября поговорим с Андреем Сундиевым из Intercom и Сергеем Никишкиным из Acronis про текущее состояние темы.

А ещё сегодня пройдёт европейская ветка конференции Figma Config. Я стараюсь добавлять в эту подборку только материалы о компонентных фреймворках, не шаблонах в инструментах дизайна. Но в программе есть трушные выступления.

Вот что свежего публиковали в интернетах:

1. Nathan Curtis: процесс поддержки. Как и в каком формате её пользователи обращаются к тем, кто её создаёт.

2. Amazon: всего 10% публичных дизайн-систем описывают нативные мобильные платформы. Это ключевая, но сложная тема, в которой он видит следующую точку роста для профессии.

3. Sprout Social: отслеживание здоровья дизайн-системы. Они показывают текущий статус компонента или страницы описания, а также подробные детали по нескольким параметрам.

4. FAST: Фреймворк от Microsoft, выросший из технологий Fluent Design. Даёт гибкую тематизацию и работает с React, Angular, Vue и другими платформами.

5. Команда Storybook запустила сайт-памятку по созданию компонентных дизайн-систем.

6. Обновлённая дизайн-система Atlassian. Как и зачем переработали живой гайдлайн.

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

8. Бренд-система Airbus. В живом гайдлайне скриншоты компонентов, а не настоящий код, но это всё равно хороший пример цельного подхода.

9. Дизайн-система GitLab.

10. Обзор нюансов создания дизайн-системы для писем рассылки от Ovi Demetrian, Jr. из Superfriendly.

11. Leslie Mu: модель «луковицы». Это мало отличается от других брендированных версий модульного дизайна, но полезно до кучи.

12. Большой список возможных элементов. Хотя она должна идти от реальных задач, а не отраслевых стандартов наполненности, это полезное облако тегов на память. Сопроводительная статья.

До следующего выпуска!

#designsystems
Read more
Пока я заканчиваю чистовик книги по дизайн-менеджменту (готово 94%), частота дайджеста выходит менее регулярной. Осталось всего несколько недель марафона, после которого ритм вернётся. А пока — мини-подборка на тему:

1. José Torre: Управление календарём для дизайнеров. Как расчистить его и выделить время для дизайнерских задач.

2. Книга Andrea Mignolo «Design Leadership: The First 90 Days» выходит в начале 2021 года. Она посвящена первым шагам дизайн-менеджера в компании. В одной из недавних статей описывает разницу между менеджментом и лидерством. Это разные стороны одной медали, которые работают в разных ситуациях.

3. NN/g: Точность расчётов ROI дизайна. Должны ли мы всегда говорить про деньги и насколько комплексные обоснования нужны.

4. IBM: Зоны ответственности. На чём они фокусируются и как измеряют успех — https://medium.com/design-ibm/the-growing-practice-of-ibm-designops-df6439cd8da8.

5. Julie Zhuo: Руководство по работе с конкретным сотрудником. Он показывает особенности поведения, а также сильные и слабые стороны.

А я пошёл дописывать 4 главы (из 37) и несколько хвостов к ещё пятёрке.

#designmanagement
Read more
Собрал дайджест продуктового дизайна за август 2020. Сотня свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.

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

#digest
Read more
Я часто пишу о том, что в современных кросс-функциональных командах дизайнер должен знать базовые вещи о менеджменте продуктов и наоборот. Поэтому дайджест читают менеджеры продуктов и рекомендуют для коллег — например, Аркадий Морейнис и Анна Булдакова.

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

Принимают заявки до 2 сентября, обучение удалённое — есть ещё пара дней собраться с силами и податься. Курс идёт 8 недель, по итогу готовится учебный проект и портфолио. Полная программа.

P.S. Я не размещаю рекламу, но иногда делаю обмен постами — в Телеграме почти нет органического роста.
Read more
Пару недель назад закончился курс Future London Academy по UX и продуктовому дизайну, который я курирую. В этом году о прошёл в онлайне и новом формате. Основные заметки из отчёта (там много картинок):

1. Carolyn Chmielewski из Spotify рассказала об организации команды пользовательских исследований. До этого она работала в BlaBlaCar и исследователи находились в группе UX. В Spotify они объединены в группу продуктовых инсайтов вместе с data science.

2. Clara Gaggero Westaway из Special Projects описала подход к созданию необычных концептов. Агентство предлагает сильные идеи для взаимодействия пользователя с продуктом, которые сильно выделяются из общей массы. Clara рассказала про подход, который помогает добиться этого.

3. Katie Wishlade из Clearleft показала, как проектируются услуги на примере их городского проекта. У неё наглядная модель, которая учитывает путь от начала до конца для клиента и внутри организации.

4. James Greenfield из Koto прошёлся по проблемам, мешающим выразить бренд в интерфейсе. Это относительно молодая студия выходцев из Design Studio, которые успели поработать над BlaBlaCar, Skyscanner, Venmo, Airbnb и другими брендами. Он наглядно показал на примере сервисов бронирования, что в базовом виде интерфейсы плохо отличимы друг от друга.

5. Dan Makoski из Lloyds Banking Group закрыл программу яркой историей о дизайн-лидерстве. Как сформулировать и транслировать цели дизайна в бизнес-стратегии. Он привёл пример метафор графического пользовательского интерфейса и предложил группе набросать свою для управления финансами. А после связал их с моделью жизненного пути клиента, где банк помогает на каждом этапе.

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

Онлайн получился отличным, хотя очень хочется вернуться в живой Лондон в 2021 году :)

#fla
Read more
Пользовательские исследования делают внутри всё больше компаний. Так что и толковых свежих материалов на тему всё больше:

1. NN/g: фреймворк ResearchOps. Это шесть составляющих: рекрутинг, администрирование, знания, инструменты, компетенция и евангелизм.

2. IBM: лучшая и самая детальная методичка по созданию базы знаний и инсайтов на базе Airtable. Структура, привязка к вопросу исследований, разбивка на находки и наблюдения.

3. Контур: презентация результатов, которая вовлекает всю команду. Это позволяет гораздо лучше понять и прочувствовать находки.

4. NN/g: три вида проблемных респондентов: не подходящие под требования, обманщики и профессиональные респонденты. Что делать с каждым из них и как вообще определить их.

5. Pallabi Roy Singh: надёжность и валидность результатов.

6. Контур: памяткя по подготовке исследования для заказчика. Цели, гипотезы и вопросы, что уже известно о проблеме, пользователи и сценарии, сроки. Шаблон.

7. User Fountain: опрос 55 пользователей на тему используемых методов. Обзор выводов.

8. Facebook: рабочее место для удалённых сессий с пользователями.

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

#research
Read more
1 сентября стартует четвёртый поток моего курса о дизайн-менеджменте цифровых продуктов на Bang Bang Education.

На первых трёх отучились 170 дизайн-директоров, дизайн-менеджеров, арт-директоров, ведущих дизайнеров, креативных директоров из многих отечественных (и нескольких международных) компаний: ABBYY, Альфа-Банк, Apalon, App in the Air, Aviasales, Avito, Badoo, БКС, ВТБ, Chatfuel, EPAM, Foodplex, Mail.ru Group, ManyChat, Miro, Модульбанк, МТС, OneTwoTrip, Открытие, Ozon, ПИК, ПСБ, QIWI, Qlean, Райффайзенбанк, Rambler Group, РБК, Redmadrobot, Ростелеком, Сбербанк, S7, SEMrush, Tele2, Тинькофф, TomTom, Учи.ру, ЦИАН, Voximplant, Wargaming, Wrike, X5, Яндекс и многих других.

Курс построен на базе будущей книги по паттернам дизайн-менеджмента (чистовик готов на 92%). Какие-то части вы уже могли прочитать ранее и, возможно, знакомы с общей концепцией модели зрелости дизайна и продвижения по ней. Значительная часть контента добавлена, а тот что был раньше — переработан и реструктурирован под более практичный формат использования.

Получился огромный массив знаний из 37 уроков на 8,5 часов — 32 паттерна и 5 обзорных уроков, а также несколько инструментов-приложений к ним (помогут подниматься по уровням зрелости). Курс идёт 4 месяца. Помимо видео-лекций есть домашние задания и вебинары после каждого блока. Я постепенно добавляю шаблоны для домашних заданий, которые здорово структурируют мысли.

Самые вовлечённые студенты внедряли улучшения в дизайн-командах по ходу курса, так что к окончанию получили осязаемый выхлоп :)
Курс «Паттерны дизайн-менеджмента» — Bang Bang Education
Курс даёт теорию и практику дизайн-менеджмента цифровых продуктов. Студенты смогут разобраться в том, как работает дизайн-менеджер и за что он должен отвечать. Изучим, какие инструменты, ресурсы, методы и организационные подходы нужно использовать, чтобы дизайн цифровых продуктов становился лучше не только в макетах, но и в реальной жизни. На примере большой компании посмотрим, как работает дизайн-команда на каждом уровне зрелости: оперативном, тактическом, стратегическом.
Read more
Раз мини-дайджест на этой неделе только один, то объём должен быть увеличен. Свежие, сочные интерфейсные паттерны на каждый день:

1. Smashing Magazine: набор карточек с чеклистами. Как сделать их по уму и избежать типовых ошибок. Желающие могут купить пакет вместе с обучающим вебинаром.

2. George Cave: приёмы организации интерфейсов на примере игрушечных компьютеров из LEGO. Шикарная историческая справка и советы в одном флаконе.

3. Google: медленный интернет.

4. Fintech Insights: анализ интернет-банков. Начали с процесса открытия счёта. У них своя методика оценки — изначально дают каждому 1000 баллов, а дальше вычитают их за сложные этапы процесса. Сравнение крупных британских банков по функциональности.

5. Jeff Sauro и Jim Lewis: сравнительное исследование американских сервисов онлайн-видео Netflix, Hulu, Disney Plus, HBO Plus, Prime Video. Среди прочего они выделили ключевые драйверы, которые важны для пользователей.

6. Caroline Sinders и Natalie Cadranel: чеклист по учёту безопасности и приватности пользователей в интерфейсе и методах работы. Сам чеклист.

7. Caterina Falleni и Mike Shebanek: советы по поддержке accessibility.

8. NN/g: представление сложных и трудночитаемых правил использования сервисов.

9. Andy Clarke: журнальная вёрстка в вебе: Emmett McBain и Bradbury Thompson.

10. Baymard: пользовательские фото в отзывах о товарах в интернет-магазинах.

11. Baymard: наиболее востребованные фильтры в поиске по интернет-магазинам. Цена, рейтинг, цвет, размер, бренд.

12. Atlassian: улучшение экранов встречи нового пользователя. Они помогли улучшить продуктовые метрики за счёт правильного фокуса на важных вещах.

Плотно, но добротно.

#patterns
Read more
На прошлой неделе вышел июльский дайджест, в котором был кусок свежего про алгоритмический дизайн. Вынесу его в мини-подборочку:

1. Некролог генеративному дизайну от Daniel Davis на примере пром.дизайна и архитектуры. Он очень точно и жёстко описывает причины, по которым эта идея не взлетела ещё в 80х, не взлетает сейчас и вряд ли взлетит в будущем. Daniel приводит утрированный пример с генератором писем электронной почты, что звучит абсурдной идеей. Но результат мало чем отличается от генеративного дизайна:
а) Алгоритмы написаны под очень узкие задачи и их нужно каждый раз переписывать заново.
б) Количество сгенерированных вариантов не приводит к качеству.
в) Вдумчиво выбирать из множества вариантов на деле сложно.
г) Невозможно измерить качество результата, чтобы отфильтровать лучшее.
д) Это примитивизация реального процесса работы дизайнера.
е) Нет примеров универсальных инструментов в других отраслях.

2. Обзор экспериментов на базе модели машинного обучения GPT-3 (часть инициативы OpenAI). Она позволяет генерировать части интерфейса или, скажем, цветовую палитру на основе текстового описания:

Плагин для Figma генерирует интерфейс. Вы описываете результат словами, он переводит это в JSON с разметкой элементов. Похожий пример, позволяющий создать промо-страницу.

Debuild генерирует интерфейс и код на React на основе текстового описания. Пример.

Генератор цветовых палитр.

3. Salesforce: движок Einstein Designer. Он персонализирует блоки интерфейса на базе истории пользователя и его предпочтений — например, карточка товара в интернет-магазине может делать акцент на разной информации. Видео с кратким рассказом.

Процесс анализа и генерации паттернов.

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

Когда-нибудь руки доберутся перенести сайт-коллекцию на новый движок, чтобы её можно было обновлять без мозолей на руках. А пока ждём Adobe MAX 2020 — хоть там показывают что-то реально толкое из этой области.

#ai #algorithms
Read more
Собрал дайджест продуктового дизайна за июль 2020. Сотня свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.

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

#digest
Read more
Дизайн-системы стали решённой проблемой — плюс-минус понятно, как их делать. Поэтому хайпа вокруг них стало поменьше — это важный, но понятный инструмент (как, скажем, юзабилити-тестирование).

А ещё оказалось, что для её нормального внедрения нужна выделенная команда, чего получается не у всех. Многие компании спокойно пилят себе компонентные фреймворки для своих задач и не особо кичатся этим. Да, стали меньше выкладывать наружу живые гайдлайны — но это большая работа по подготовке, которая приносит пользу далеко не всем (хотя её немало). Поэтому и в дайджесте поток материалов чутка пересох. Но не навсегда:

1. Societe Generale: модель консулов. Это 4 человека из разных команд, которые регулярно ротируются. Процесс добавления нового компонента в таком подходе: как любой участник сообщества в компании может сделать это.

2. Deliveroo: история запуска. Стратсессия для старта работ, набор индикаторов здоровья, расчёт ROI по разным срезам (шаблон).

3. Toolabs: плагин для Figma позволяет управлять токенами дизайн-системы: цвета, шрифты, отступы, анимация, графика и многое другое. Можно переключать темы оформления, есть состояния компонентов. Анонс.

4. Storybook: возможность поиграть с компонентом прямо в живом гайдлайне. А версия 6.0 позволяет собрать несколько веток в единый живой гайдлайн. Для ситуаций, когда разные команды внутри компании делают разные фреймворки.

5. Adobe Spectrum: фреймворк на React.

6. Salesforce Lightning: плагин для Sketch со всеми компонентами.

7. Shopify Polaris:

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

8. Brad Frost: опросник, с которым он приходит к клиентам при работе над дизайн-системой.

9. SuperFriendly: возможные разделы живого гайдлайна. Исчерпывающий список, хотя заполнять вообще все его пункты необязательно.

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

#designsytems
Read more
Брендинг цифровых продуктов — важная область в эпоху, когда границы между офлайном и онлайном стираются. Правда, толковых примеров мизер — как правило, всё ограничивается маркетинговой коммуникацией, но не попадает в интерфейс. Да и научиться толком негде — авторы тех 10-15 успешных примеров (Airbnb, Google Material Design, Microsoft Fluent Design, Apple, Miro, Яндекс.Драйв) рассказывают о деталях не так много. Но я не сдаюсь и копаю этот рудник в надежде составить методичку. Вот что происходило в этой сфере с начала года:

1. Microsoft: интеграция команд бренда и продукта, которые позволили сделать сильное обновление в 2015 году. Формат взаимодействия команд на нескольких примерах.

2. Skyeng от Шуки. Освежение, добавление характера и поддержка растущей архитектуры бренда. Применение на сам интерфейс, правда, не показано. Кейс в портфолио.

3. Mixcloud от Output. Хороший приём с пронизыванием фирменной звуковой волны в логотипе, шрифте, анимации и других деталях. Кейс в портфолио.

4. Eventbrite от Moving Brands. Есть примеры приземления в вебе, хотя характера не так много. Кейс в портфолио.

5. TripAdvisor от Mother Design. Удачный пример простого упрощения и освежения без надрыва. Кейс в портфолио.

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

7. Envoy от команды продукта.

8. OLX от Design Studio. Динамический логотип с конструктором под разные ситуации, хотя применения на интерфейсы нет.

9. Фирменный шрифт YouTube Sans.

10. Khan Academy: поиск единого визуального языка на базе принципов дизайна.

11. Mentimeter от Bold. Графики и диаграммы здорово провязаны с визуальной рифмой и логотипом.

12. Huma от Koto. С помощью достаточно простых приёмов (градиент, иллюстрации, типографика) удалось сделать хорошо работающее в интерфейсах решение, достаточное чтобы выделиться.

13. Zendesk: создание системы иконок, которые поддерживают бренд. Получился хороший конструктор из базовых форм, которые повторяются в логотипе и других элементах оформления.

14. Waze от Pentagram. Сохранили дурашливый характер персонажа и превратили его в маскота, поддержав в компоновках сайта.

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

#branding
Read more
Подборка-подборочка про пользовательские исследования. Ловите жменю ссылок:

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

2. Структурированная памятка по вопросам при проведении интервью.

3. Как конвертировать любую шкалу опроса типа SUS в значение от 0 до 100. Оно, как правило, проще для общения внутри продуктовой команды. То же для 5 и 7 вариантов ответа.

4. Выборка респондентов для проведения сравнительных исследований.

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

6. Каталог инструментов для удалённых пользовательских исследований.

7. Формат отчёта о пользовательском исследовании, который продуктовая команда сможет прочитать и понять.

8. Вкусвилл: изменение поведения покупателей в период карантина.

9. Яндекс Взгляд сделал интерфейс для быстрого удалённого юзабилити-тестирования простых прототипов на аудитории Яндекс Толоки. Дёшево (999 ₽) и быстро, но к аудитории Толоки всегда были вопросы.

10. Стоит ли использовать шкалу рейтинга со звёздами вместо цифр.

Никак не получается меньше десятки :(

#research
Read more
А вот и ещё одна подборка новых интерфейсных паттернов и лучших практик. Поехали:

1. Интерфейс мобильного видео-плеера в Netflix, Hulu и YouTube. Самые интересные решения у Hulu — они здорово понимают контекст использования.

2. Встреча нового пользователя в почтовом клиенте Hey.

3. Проектирование интерфейса командной строки.

4. Хороший пример работы интерфейсного копирайтера. Как Shopify улучшили форму запроса информации так, чтобы показать пользу, а не просто задачу.

5. Анализ структуры push-уведомлений от разных платформ, браузеров и программ. Шаблон в Figma.

6. Встреча нового пользователя в мобильных приложениях. По возможности избегайте их вообще.

7. Выбор правильных полей ввода и их организации в форме.

8. Состояния элементов форм для выбора (чекбоксы, радиокноки, тумблеры, чипы).

9. Интерфейсы британских банковских приложений: сложность открытия счёта, первый платёж, приостановка счёта, международные платежи, открытый банкинг, поддержка.

10 Насколько эмоджи в названии писем рассылки привлекают пользователей. Такие вещи лучше проверять A/B-тестированием, но заметки полезные.

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

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

13. Адаптация таблиц для мобильных.

14. Паттерн «любовь с первого взгляда» в результатах поиска — пользователь выбирает первый результат.

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

16. Поисковая выдача от Google и Baidu. Как они устроены и как это влияет на поведение пользователей.

Этот выпуск явно не соблюдал социальную дистанцию ссылок.

#patterns
Read more
Nielsen/Norman Group методично прокапывают методы и практики дизайна интерфейсов. Подсобрал все недавние статьи про создание Customer Journey Map и родственных инструментов вроде Service Blueprint:

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

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

3. Шаблон, который адаптирован для заполнения распределённой командой.

4. Анализ для поиска проблем и точек роста. Хорошая памятка с примерами.

5. Пошаговая инструкция по составлению. Это пять этапов по сбору инициативной группы, проведению исследований и созданию самой карты.

6. Памятка.

7. Советы по созданию. Стоит ли разбивать карту на несколько, как вовлекать недизайнеров, какие исследования проводить и другие полезные вводные.

8. Пользовательские исследования.

9. Обзор видов карт.

10. Опрос UX-специалистов на тему использования service blueprints. В них видят три ценности: артефакт, фреймворк и способ улучшить командное взаимодействие.

11. Основы создания service blueprint.

12. Суть и задачи service blueprint.

13. Разница между User Experience и Customer Experience. Три уровня взаимодействия человека с компанией — конкретные взаимодействия, целостные сценарии и общая история отношений.

Так сказать, служба одного (браузерного) окна.

#cjm
Read more
Лёгкая добавка к коллекции материалов о создании тёмной темы оформления. Для тех, кто хочет иногда побыть мрачным, как во вселенной DC:

1. Годная памятка по разным аспектам реализации тёмной темы оформления в вебе от Adhuham. Больше про вёрстку, но достаточно развёрнуто.

2. GitLab: как внедряли. Для редакторов кода это стандарт, но сам веб-интерфейс нужно было проработать.

3. Вариативный шрифт от Dalton Maag, оптимизированный для светлой и тёмной темы оформления.

4. Инструкция от Jecelyn Yeen.

5. Телеканал Пятница сделал тёмную тему для ночного эфира. После 23:00 яркие и громкие проморолики заменит тихая, спокойная айдентика со сказками и стихотворениями.

6. Ростелеком Ключ. Правда, только дизайнерская часть, без дизайн-системы в коде.

7. Ну и на сдачу — лучшая в мире переключалка (в правом верхнем углу).

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

#designsystems #darkmode
Read more
Собрал дайджест продуктового дизайна за июнь 2020. Сотня свежих статей, инструментов, паттернов, кейсов, трендов и исторических рассказов.

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

#digest
Read more
Очень примерная хронология развития инструментов алгоритмического дизайна.

#ai #algorithms
В приличном обществе в анонсах алгоритмического дизайна принято показывать технологическое обоснование — абсолютное большинство дельных экспериментов делают это. Многие публикуют код на GitHub. Кто-то показывает видео рабочего процесса с инструментом. Шарлатанам достаточно пресс-релиза или пустого видео-ролика с изображением культурных кодов «умная штука» — примерно как показывали хакеров в фильмах 90х, взламывающих сервер по IP в адресной строке браузера.

Жаль, что у многих СМИ и дизайнеров отсутствует критическое мышление и проверка фактов. При том что на рынке полно примеров надувания пузыря — Juicero, Theranos, ё-Мобиль и многие другие. Тем более печально, когда речь идёт об уходящем тренде, о котором было достаточно написано в последние годы.

Как и на любом рынке, в отечественном дизайне хватает компаний и команд мирового уровня, много крепких локальных игроков. Хватает и откровенно слабых, которые заменяют реальные достижения пресс-релизами и показухой на уровне представителей стареющей телевизионной эстрады. Эпатаж не оправдывает позорный результат. Уверен, что ориентироваться нужно на первых — таких ребят хватает как среди дизайн-агентств, так и среди продуктовых компаний. Тогда общий уровень профессии будет расти, а не оставаться местечковым.

Если подытожить 8 лет наблюдения за алгоритмическим дизайном (и 4 года его активного развития):

Плохая новость: экзоскелета для дизайнера не получилось — в лучшем случае палки для спортивной ходьбы.

Хорошая: мы сейчас внизу кривой хайпа Gartner. Нереализованные обещания уже случились и поток попыток сотворить чудо уменьшился. Зато продолжают появляться реальные внедрения в массовые продукты, которые влияют на жизнь людей. И здесь главный локомотив — Adobe (а Autodesk поставили генеративный дизайн на поток работы с клиентами). Это гораздо сложнее, чем выдавать поделку за технологический прорыв. Но это реально решает задачи, ради которых работает дизайнер.

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

#ai #algorithms
Read more