Дайджест продуктового дизайна
53.4K subscribers
100 photos
18 videos
546 links
Юрий @jvetrau Ветров собирает свежие статьи, инструменты, паттерны и тренды с 2009 года. 250 000 читателей на vc, VK и других каналах.

Все выпуски — https://jvetrau.com/category/digest/
ВК — https://vk.com/pdigest

РЕКЛАМЫ НЕТ.
Download Telegram
Как говорили братья Богдановы в своих легендарных мемах: «Кончились идеи? Выпускайте выпуск мини-дайджеста про лучшие интерфейсные паттерны и практики»:
 
1. NN/g: Структурированная подборка своих статей о мобильных интерфейсах.
 
2. Dan Brown: Информационная архитектура для сквозных тем, которые пересекаются с основной структурой во множестве мест.
 
3. Tess Gadd: Под геймификацией учебного процесса обычно понимают просто награды. Хотя это в первую очередь вовлекающие игровые способы усвоения материала.

4. NN/g: Тренды в интранетах из их свежего ежегодного исследования.
 
5. Peter Ramsey: Анализ интерфейса приложения DocuSign, крупнейшего сервиса электронных подписей.
 
6. Виталий Фридман: Советы на тему адекватности мер безопасности при авторизации. Какие способы входа и восстановления доступа и в каком порядке лучше использовать.
 
7. NN/g: Проблемы расширенных поисковых подсказок в интернет-магазинах. Частично это некачественная реализация, но во многом они просто не нужны пользователям в решении текущей задачи.
 
8. Daniel Schwarz: Советы по оформлению длинных статей с помощью CSS.
 
9. Elise Hein: Оптимизация для accessibility обычно упрощает пасхалки и другие интересные интерфейсные решения до совсем утилитарных. Нужно ли что-то делать с этим?
 
10. Growth Design: Как повысить конверсию в активацию учётной записи с помощью ссылок на почтовый сервис пользователя (и конкретный поисковой запрос в нём).

11. NN/g: Гайдлайны для роботизированных меню в поддержке по телефону.
 
12. Виталий Фридман: Советы по проектированию поведения кнопки «назад» в браузере.
 
13. MeasuringU: Обновили своё сравнительное исследование юзабилити сайтов американских авиакомпаний. Анализ включает ключевые драйверы — важные для пользователей сценарии использования.
 
#patterns
Обзоры интерфейсных паттернов и лучших практик копятся быстрее, чем проценты на микрозаймы. Что у нас на этот раз:
 
1. Виталий Фридман: Сообщения об ошибках в формах.
2. Чеклист требований и лучших практик поддержки accessibility.
 
2. Slack: Переосмыслении интерфейса для iPad. Они проанализировали типичные сценарии использования и построили навигацию и логику адаптивности вокруг них.
 
3. Chameleon: Толковая беседа с Pulkit Agrawal о грамотном мышлении при проектировании процесса встречи нового пользователя.
 
4. Pencil & Paper: Серия разборов интерфейсных паттернов и лучших практик.
 
5. Baymard: описывает типичные проблемы интерфейса сравнения товаров в интернет-магазинах — https://baymard.com/blog/provide-comparison-features.
 
6. Peter Ramsey: Анализ интерфейса приложения HBO Max, у которого самые низкие оценки в магазинах приложений среди кино-сервисов.
 
7. Growth Design: Анализ проблем в процессе отказа от подписки Typeform.
 
8. Drupal: Как поддержали accessibility в новом главном меню.
 
9. NN/g: Ещё одна подборка плюсов и минусов бесконечной прокрутки. Без нового, но структурировано норм.
 
#patterns
Не знаешь, какой мини-дайджест выпускать? Выпускай про интерфейсные паттерны и лучшие практики:
 
1. Виталий Фридман: Хорошая динамическая валидация форм. Она часто срабатывают неправильно, поэтому лучше использовать её аккуратно.
 
2. Polyplane: Популярные breakpoints для адаптивного дизайна. Они собрали несколько разных срезов на текущий момент.

3. Wix: Крутая инициатива — команда зарубилась на месяц и переписала тексты всех ошибок в продукте. Они предлагают отличную формулу для хорошего сообщения об ошибке.
 
4. Ashlee M Boyer: Когда корректно использовать настоящую кнопку и ссылку, стилизованную под кнопку.
 
5. Maggie Appleton: Не самые тривиальные интерфейсные паттерны для современных продуктов.
 
6. Information Architects: Советы по использованию эмоджи в интерфейсах. Они приводят много полезной статистики и исследований.
 
7. Onno Westra: Как и какие номера телефонов указывать на сайте, который работает с разными странами.
 
8. Wix: Несколько интерфейсных решений, где пришлось искать баланс между точностью описания элементов дизайна и широким кругом пользователей.
 
9. NN/g: Хорошие и неудачные решения в обучающем процессе для приложений с дополненной реальностью.

10. Jim Lewis и Jeff Sauro: Сравнительные исследования корпоративного ПО и сайтов с отзывами пользователей. Они сравнили их по метрикам SUS и NPS.
 
#patterns
Пора отпустить на волю накопления по лучшим интерфейсным паттернам и практикам:
 
1. Michael Kritsch: Фешенебельный анализ чеклистов и фреймворков для эвристической оценки интерфейсов. Он проанализировал популярные и толковые и разложил их по полочкам. Как и другие авторы, он рекомендует создавать свой чеклист под свои задачи, используя чужие списки как ориентир.
 
2. Ad Hoc: Методичка по поддержке accessibilty на всех уровнях. Это пошаговая инструкция, позволяющая внедрить хорошие практики в продуктах, командах и культуре.
 
3. Figma: Как проектировали новый интерфейс поиска и замены.
 
4. Charlotte Wittels: Подход к решению задач по дизайну интерфейсов: понять 5C (context, cases, concept, content, constraints).
 
5. Jim Nielsen: Разбирает концепцию Kyle Simpson «качества воспроизведения» сайтов. Самая простая вещь — текстовая версия для людей с плохим интернетом.
 
6. Maggie Appleton: Интерфейсная парадигма «порталов для программирования», которые объединяют лучшее из двух миров — командной строки и графических интерфейсов. Она приводит примеры нескольких исторических и современных продуктов, которые используют этот подход.
 
7. NN/g: Структурированная подборка своих статей о психологии пользователей.
 
8. Adam Argyle: Как реализовать хорошую всплывающую подсказку.
 
9. NN/g: Настройка приложений с дополненной реальностью.
 
10. Ceara Crawshaw: Памятка по проектированию хорошего интерфейса drag&drop.
 
11. Lukas Oppermann: Нюансы поддержки цветового контраста в стандарте accessibility WCAG 2.1.
 
12. Feifei Liu: Грамотное написание и отправка транзакционных уведомлений (как правило, в смс- и push-уведомлениях).
 
13. Jim Lewis и Jeff Sauro: Обновили своё сравнительное исследование сайтов покупки билетов на мероприятия. Они сравнили их по метрикам SUS и NPS.
 
14. NN/g: Как международные интернет-сервисы переводят пользовательский контент типа рецензий и отзывов на разные языки.
 
16. Wix: Опыт дизайна интерфейсов для разработчиков.
 
17. Maggie Appleton: Примеры удачных решений с быстрым поискам по командам, который всё чаще встраивают в интерфейсы (они обычно вызываются по CTRL/CMD+K).
 
#patterns
Давненько не было обзоров лучших интерфейсных практик и паттернов. Ща буит мясо:
 
1. Peter Ramsey: Освежил своё сравнительное исследование приложений британских банков. Печальный вывод — классические банки не особо догоняют современные, во многом из-за малой скорости обновлений.
 
2. Spotify: Редизайн главной страницы в вебе — теперь это плеер.
 
3. NN/g: Выбор часового пояса. Nielsen/Norman Group провели своё исследование разных подходов и дают рекомендации по проектированию.
 
4. Duolingo: Основные идеи редизайна приложения: хвалят и ругают.
 
4. NN/g: Типичные проблемы мобильных приложений с дополненной реальностью, а также удачные интерфейсные решения.
 
5. Knock: Проектирование процесса встречи нового пользователя. Они выделили самое важное действие на старте (отправка первого уведомления клиентам) и построили интерфейс вокруг него.
 
6. Gov.uk: Пользователи с дискалькулией. Это особенность восприятия информации, когда человек плохо воспринимает числа и цифры.
 
7. Creative Navy: Крупные международные сервисы для ведения электронных медицинских карт.
 
8. Adrian Bece: Вёрстка адаптивных таблиц с учётом требований accessibility (часть 2).
 
9. Jim Lewis и Jeff Sauro: Обновили своё сравнительное исследование сервисов бронирования ресторанов и видео-звонков. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
 
10. Colin Eagan и Jeffrey MacIntyre: Фреймворк по персонализации продукта для пользователей. Они также описывают формат воркшопа для его заполнения.
 
11. Spotify: Локализация интерфейса и контента.
 
12. Alex Russell: Обзор текущего состояния оптимизации производительности веба.
 
13. Creative Navy: Интерфейсы программ для программирования мобильных роботов.
 
#patterns
Вкрации расскажу тута чучуть о лудший интерфейсный практики и паттерны. Кокраз туды ивойный и примените:
 
1. Ahmad Shadeed: Что значит «адаптивный дизайн» в 2023 году.
 
2. Виталий Фридман: Показ субтитров к видео.
 
3. Creative Navy: Интерфейсы программ для управления космическими полётами.
 
4. NN/g: Классические путеводители по интерфейсу после регистрации не работают. Примеры хороших контекстных подсказок.
 
5. Peter Ramsey: Сценарий перевыпуска карты в британских банках.
 
6. Chiara Aliotta: Использование сторителлинга в дизайне на примере подачи одного из курсов Smashing Magazine.
 
7. Wix: Разные грани локализации. От простого перевода текстов до региональных доменов и конкретных посылов.
 
8. Baymard Institute: Хорошая и плохая реализация покупки без регистрации в интернет-магазинах.
 
9. Sandrina Pereira: Памятка по валидации форм с учётом требований accessibility.
 
10. Creative Navy: Медицинские интерфейсы шприцевых помп.
 
11. Creative Navy: Интерфейсы программ для 3D-моделирования.
 
12. Jim Lewis и Jeff Sauro: Обновили своё сравнительное исследование интернет-магазинов одежды. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
 
13. Creative Navy: Интерфейсы управления популярными тепловыми насосами.
 
14. Baymard Institute: Заметные проблы сайтов бронирования.
 
Вообщем, выпий за любовь к лутышые решения.
 
#patterns
Собралась большая пробка из свежих ссылок, так что темы типа свежих интерфейсных паттернов и лучших практик всплывают чаще обычного. Но по весне это нормально:
 
1. Microsoft: Расширили свои гайдлайны по инклюзивному дизайну — появился раздел про когнитивные ограничения и работу с ними. Tracy Jones сделала обзор основных тезисов и приводит примеры решений из продуктов компании.
 
2. Acronis: Опыт работы с текстами в интерфейсе. Как добиться согласованности по всему продукту.
 
3. Frank Rausch: Простая памятка по современным навигационным паттернам в iOS.
 
4. NN/g: Советуют ограничивать использование технического жаргона в интерфейсах. Он уместен только для узкоспециализированных сервисов, для остальных — стоит давать расшифровку или вообще избегать их.
 
5. Creative Navy: Большой обзор интерфейсных паттернов, которые используются в сервисах-дашбордах.
 
6. NN/g: Подходы к китайским «интернет-магазинам на диване». Как они ведут трансляции и связывают их с покупкой товара.
 
7. Gil Bouhnik: Примеры манипуляции с данными на графиках. Как искажают информацию с помощью тёмных паттернов.
 
8. Подборка иконок-переключаетелей тёмной темы оформления с кодом на CSS.
 
9. Creative Navy: Интерфейсы приложений для отслеживания симптомов хронических болезней.
 
10. Daley Wilhelm: Заметила популярность эмоджи и иконок искр в интерфейсах. Она копнула, откуда они появились и не советует увлекаться ими.
 
#patterns
Что там нового по лучшим интерфейсным паттернам и практикам?
 
1. Alex Hollender: Недавний редизайн Wikipedia. Какие проблемы решали, как шёл дизайн-процесс и насколько сложно было согласовать выкатку.
 
2. Slack: Поддержка accessibility. Как прорабатывали эти возможности и тестировали с пользователями.
 
3. Daley Wilhelm: Разбирает интерфейс игровой приставки Playdate.
 
4. Baymard: Подсказки точного адреса в интернет-магазинах.
 
5. Julien Martin: Все этапы работы над брендом и интерфейсом сервиса Zenly, который недавно закрылся.
 
6. NN/g: Лучшие практики проектирования «магазинов на диване» в мобильных приложениях.
 
7. Chamjo: Ещё одна коллекция интерфейсных паттернов.
 
8. Peter Ramsey: Лютый схематоз со скидками на сайте Domino's Pizza. Жёсткий тёмный паттерн ценообразования.
 
9. Rosie Hoggmascall: Анализ процесса встречи нового пользователя в приложении для знакомств Bumble.
 
10. Growth Design: Анализ процесса встречи нового пользователя в сервисе Loom. Как они ненапряжно вовлекают.
 
11. Swiggy: Виджет live activity и «динамический остров» в iOS для сервиса доставки.
 
12. NN/g: Типичные проблемы в информационной архитектуре.
 
13. Eva Katharina Wolf: Поддержке пользователей с дислексией в интерфейсах.
 
#patterns
Двойная Тройная порция свежих ссылок о лучших интерфейсных паттернах и практиках:
 
1. The Pudding: Крутой обзор тёмных паттернов прекращения подписки. Они потратили свои деньги на эксперимент с парой десятков сервисов. Спойлер: потеряли почти все.

2. Lyft: Виджет live activity и «динамический остров» в iOS.
 
3. Creative Navy: Подробная памятка по дизайну дашбордов на основе своего многолетнего опыта.
 
4. Alex Ivanovs: Памятка по поддержке accessibility на разных уровнях.
 
5. Baymard Institute: Актуализировали список лучших практик для интернет-магазинов. Edward Scott сделал обзор из их недавнего исследования.
 
6. NN/g: Ограничения и проблемы экранных дикторов на мобильных.
 
7. Marcus Herrmann: Как поддержать accessibility в запросах на сбор персональных данных на сайтах.
 
8. Christopher Butler: Правильный ритм в подаче информации на длинных страницах, чтобы пользователи докручивали их до конца. Он ссылается на исследования Nielsen/Norman Group и Chartbeat на эту тему. Он также показывает пример перестройки длинной промо-страницы в более читабельный формат. И выделяет ключевые правила такого переосмысления.
 
9. Luke Wroblewski: Сценарии использования дополненной реальности.
 
10. Uber: Редизайн навигации. Они делали много интерактивных прототипов разного уровня сложности и активно тестировали их.
 
11. NN/g: Памятка по показу сообщений об ошибках в интерфейсе.
 
12. Creative Navy: Изучили и сравнили медицинские интерфейсы.
 
13. Adam Silver: Проблемы «залипающей» навигации на сайте и заблокированных кнопок в формах (это древний спор, я на его стороне).
 
14. Camryn Manker: Чеклист по поддержке accessibility в игровых интерфейсах.
 
15. Коллекция идиотских вариантов интерфейса правил использования сайта и реализации старого эппловского жеста «проведите, чтобы разблокировать».
 
16. NN/g: Особенности использования «шторок» в мобильных интерфейсах. Статья полезная, но с оговоркой про спорную рекомендацию всегда использовать явную иконку «крестика» для закрытия — не нужно переизобретать системные элементы операционных систем.
 
17. Luke Wroblewski: Напоминает, что нудные длинные туры при встрече нового пользователя часто бесполезны. И приводит пару примеров продуктов, которые поменяли их на реальную ценность.
 
18. Asma Aldrees и Denis Gračanin: Большое исследование государственных цифровых сервисов. Что пользователи ожидают от них и как системно подступаться к работе такими проектами.
 
19. Peter Ramsey: Дикая механика покупки билетов в сервисе Ticketmaster. Он ограничивает время на оплату, что в условиях вереницы партнёров уполовинивает шансы на покупку.
 
20. Baymard: Удачные и плохие интерфейсные приёмы, чтобы показать состав витаминов в интернет-аптеках.
 
21. NN/g: Короткая шпаргалка по «скелетным» экранам загрузки.
 
22. Jim Lewis и Jeff Sauro: Сравнительные исследования сайтов интернет-магазинов офисных товаров и интернет-магазинов электроники. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
 
#patterns
Свежая подборка свежего про свежие интерфейсные паттерны и лучшие практики:
 
1. Rauno Freiberg: Под микроскопом разбирает жесты и анимацию интерфейса в операционках Apple. Он делал интересный концепт MercuryOS, которая ощущается так же плавно и аккуратно, как и они.
 
2. Swiggy: Отличный рассказ о работе над конкретным компонентом кнопки в сценарии оформления заказа. Как они замеряли связанные метрики и доработали первую версию, уделяя внимание небольшим, но критичным деталям.
 
3. Wikipedia: Как делали редизайн.
 
4. Dan Brown: Рассуждает о сложностях описания информационной архитектуры продуктов, где интерфейс строится вокруг центрального объекта (например, календарь или документ). А ещё — о корпоративных продуктах и их отличии от продуктов для массового пользователя.
 
5. NN/g: Советы по дизайну интерфейса виртуальной очереди. Как показывать пользователю статус и сообщать о важных вещах.
 
6. Robert Goesch: Интересный концепт поиска авиабилетов. Их агентство DUMBO попробовало пересмотреть порядок действий пользователя, чтобы оптимизировать основной (по их мнению) сценарий использования.
 
7. Indeed: Роль прототипов в проверке продуктовых решений. В статье есть ещё одна классификация глубины их проработки и общие советы по применению.
 
8. IBM: Простой чеклист по свежему стандарту accessibility WCAG 2.2.
 
9. MeasuringU: Новое сравнительное исследование сайтов парков развлечений. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
 
#patterns