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

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

РЕКЛАМЫ НЕТ.
Download Telegram
Семейная упаковка свежих материалов о лучших интерфейсных паттернах и практиках:
 
1. Стас Хрусталёв: Каталоги паттернов интернет-магазинов:
Допродажи и кросс-продажа
Характеристики и описание товара
Фотографии и видео товара
 
2. platformOS: Перепроектирование сайта с документацией для разработчиков. Хороший поэтапный рассказ с кучей деталей и методов.
 
3. GOV.uk: Чат-бот поддержки в британских государственных сервисах. Как проектировали его и с какими проблемами столкнулись.
 
4. NN/g: Почему многие люксовые бренды делают такие плохие интернет-магазины по сравнению с фешенебельным опытом в офлайне.
 
5. Wikipedia: Работа над функциями редактирования материалов в версии для Android.
 
6. Baymard: Как выделять кликабельные элементы в сложных карточках. Тем более, если есть риск перепутать области нажатия.
 
7. Sophie Clifton-Tucker: Оптимизация интерфейса под разные виды «нейроразнрообразия» (термин, который всё чаще всплывает в дизайнерских статьях).
 
8. Growth Design: Отличный паттерн для включения уведомлений в LinkedIn. Он гипер-контекстный и от этого работает особенно удачно.
 
9. Instamart: Работа над функцией популярных заказов. Как пришли к идее, анализировали и исследовали её.
 
10. Salesforce: Доработка интерфейса карт для пользователей с нарушениями цветового восприятия.
 
11. Andrew Allen: Экспериментальное приложение-планировщик, которое делает момент закрытия задачи выдающимся.
 
12. MeasuringU: Свежее сравнительное исследование американских сайтов и сервисов недвижимости. Они выделяют ключевые драйверы, влияющие на оценку.
 
13. NN/g: Беглый обзор особенностей взаимодействия с ресторанами без обслуживания людьми.
 
14. Eric Bailey: Оформление ссылок и кнопок со скрытым полным названием для правильной поддержки accessibility.
 
#patterns
И снова о том, как делать интерфейсные решения по-красоте на основе лучших паттернов и практик:
 
1. Виталий Фридман: Таблица тарифов. Тонна примеров для разных ситуаций.
 
2. Graeme Fulton: Анализ особенностей работы курсора в iPad, который развивает классическую идею курсора, существовавшую много десятилетий без особых изменений.
 
3. NN/g: Продолжение анализа интерфейсов сайтов дорогой одежды и аксессуаров. Ожидания типичных пользователей и примеры реализации.
 
4. Peter Ramsey: Особенности использования карт Google и Apple на смартфонах.
 
5. Baymard: Размеры в интернет-магазинах.
 
6. NN/g: Памятка по концепции таксономии в информационной архитектуре.

7. Kaylan Wingard: Анализ интерфейсов нескольких поколений устройств для диабетиков.
 
8. Albert Mauri: Навигационные паттерны для перемещения между сценами в виртуальной реальности.
 
#patterns
Как говорили братья Богдановы в своих легендарных мемах: «Кончились идеи? Выпускайте выпуск мини-дайджеста про лучшие интерфейсные паттерны и практики»:
 
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