Forwarded from Дайджест продуктового дизайна
Что сегодня собралось в мини-подборке по лучшим интерфейсным паттернам и практикам:
1. NN/g: Принципы работы трёх видов калькуляторов: конвертеры, предположения и рекомендации.
И советы по их дизайну.
2. Karri Saarinen: Редизайн сервиса управления задачами Linear. В первой части говорит о том, как продавать такие изменения. Во второй — как шёл сам процесс.
3. Evil Martians: Интерфейсы для разработчиков должны быть оптимизированы под высокую продуктивность. В статье собраны самые частые паттерны.
4. Ксения Толокнова: Толковый анализ возможностей экранных клавиатур в Android и iOS. Что и когда можно использовать в ваших приложениях.
5. Baymard Institute: Режим примерки товара в дополненной реальности в интернет-магазинах на мобильных работает коряво и достаточно бесполезно выводы из свежего исследования).
6. Creative Navy: Профессиональные интерфейсы для производственных линий по упаковке и наполнению товаров.
7. Виталия Фридман: Краткий обзор паттернов сканирования информации на экране.
8. Creative Navy: Интерфейсы описания университетских курсов. Они прошлись по 280 вузам и провели 45 интервью.
9. Baymard Institute: Рекомендуют делать навигацию между фото пользователей в отзывах о товаре. Обычно они открываются поодиночке, что заставляет делать много лишних телодвижений.
10. Luke Wroblewski: Самая ценная вещь, которую дизайнеры могут дать продукту — лучше показать пользователю ценность этого продукта.
11. Matthew Ström: Разные виды информационной плотности в интерфейсе — насыщенность на единицу пространства, во времени и в плане ценности.
12. Baymard Institute: Сложные фильтры на B2B-сайтах по продаже электроники и советы по организации поиска в них.
13. Baymard Institute: Советуют использовать табличные списки на B2B-сайтах по продаже электроники на компьютере и обычные списки на телефоне.
14. MeasuringU: Новые сравнительные исследования сайтов американских банков и заказа цветов. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
1. NN/g: Принципы работы трёх видов калькуляторов: конвертеры, предположения и рекомендации.
И советы по их дизайну.
2. Karri Saarinen: Редизайн сервиса управления задачами Linear. В первой части говорит о том, как продавать такие изменения. Во второй — как шёл сам процесс.
3. Evil Martians: Интерфейсы для разработчиков должны быть оптимизированы под высокую продуктивность. В статье собраны самые частые паттерны.
4. Ксения Толокнова: Толковый анализ возможностей экранных клавиатур в Android и iOS. Что и когда можно использовать в ваших приложениях.
5. Baymard Institute: Режим примерки товара в дополненной реальности в интернет-магазинах на мобильных работает коряво и достаточно бесполезно выводы из свежего исследования).
6. Creative Navy: Профессиональные интерфейсы для производственных линий по упаковке и наполнению товаров.
7. Виталия Фридман: Краткий обзор паттернов сканирования информации на экране.
8. Creative Navy: Интерфейсы описания университетских курсов. Они прошлись по 280 вузам и провели 45 интервью.
9. Baymard Institute: Рекомендуют делать навигацию между фото пользователей в отзывах о товаре. Обычно они открываются поодиночке, что заставляет делать много лишних телодвижений.
10. Luke Wroblewski: Самая ценная вещь, которую дизайнеры могут дать продукту — лучше показать пользователю ценность этого продукта.
11. Matthew Ström: Разные виды информационной плотности в интерфейсе — насыщенность на единицу пространства, во времени и в плане ценности.
12. Baymard Institute: Сложные фильтры на B2B-сайтах по продаже электроники и советы по организации поиска в них.
13. Baymard Institute: Советуют использовать табличные списки на B2B-сайтах по продаже электроники на компьютере и обычные списки на телефоне.
14. MeasuringU: Новые сравнительные исследования сайтов американских банков и заказа цветов. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
Nielsen Norman Group
3 Types of Online Calculator and Quiz Tools
Most calculator and quiz tools provide at least one or more of the following services: converting inputs, predicting the future, or providing recommendations.
Forwarded from Дайджест продуктового дизайна
Сегодня в программе мини-подборки — лучшие интерфейсные паттерны и практики:
1. NN/g: Памятка по дизайну интерфейса меню в вебе. Простой и наглядный чеклист, который начинается с одной из главных проблем — люди читают Рамса и Нормана, а потом прячут навигацию на больших мониторах под иконку.
2. Atlassian: Смогли стандартизировать интерфейс drag&drop и его реализацию в своих продуктах. Это позволило здорово поднять производительность и упростить его использование. Alex Reardon, Lewis Healey, Melissa Jaén и Maria Christley описывают процесс работы и детали паттерна, а также делятся кодом.
3. Luke Wroblewski: Текст и видео презентации о трёх разрывах в UX: организационном, сути продукта и его реализации, которые мешают получить ценность от продукта.
4. DOC: Хорошая памятка по созданию осмысленных дизайн-концептов. Они должны быть про основную концептуальную модель взаимодействия, а не просто пыль в глаза.
5. Handheld Design: Коллекция паттернов мобильных приложений.
6. NN/g: Памятка по использованию чекбоксов в интерфейсах. Одиночные, списки, вложенные и их нюансы.
7. Baymard: Советуют сразу предлагать пользователям интернет-магазинов фильтр по размеру. Они не будут тратить время на поиск одежды, которой по факту нет в наличии.
8. Will Boyd: Как грамотно реализовать ссылки-якори на странице сайта.
9. Alexander Obenauer: Новая серия статей о концептуальных моделях интерфейсах. Пока есть только первые материалы, но автор всегда выдаёт интереснейшие размышления о глубинной логике продуктов для персональной продуктивности.
10. IBM: Советы по планированию и созданию интерактивных прототипов в Figma.
#patterns
1. NN/g: Памятка по дизайну интерфейса меню в вебе. Простой и наглядный чеклист, который начинается с одной из главных проблем — люди читают Рамса и Нормана, а потом прячут навигацию на больших мониторах под иконку.
2. Atlassian: Смогли стандартизировать интерфейс drag&drop и его реализацию в своих продуктах. Это позволило здорово поднять производительность и упростить его использование. Alex Reardon, Lewis Healey, Melissa Jaén и Maria Christley описывают процесс работы и детали паттерна, а также делятся кодом.
3. Luke Wroblewski: Текст и видео презентации о трёх разрывах в UX: организационном, сути продукта и его реализации, которые мешают получить ценность от продукта.
4. DOC: Хорошая памятка по созданию осмысленных дизайн-концептов. Они должны быть про основную концептуальную модель взаимодействия, а не просто пыль в глаза.
5. Handheld Design: Коллекция паттернов мобильных приложений.
6. NN/g: Памятка по использованию чекбоксов в интерфейсах. Одиночные, списки, вложенные и их нюансы.
7. Baymard: Советуют сразу предлагать пользователям интернет-магазинов фильтр по размеру. Они не будут тратить время на поиск одежды, которой по факту нет в наличии.
8. Will Boyd: Как грамотно реализовать ссылки-якори на странице сайта.
9. Alexander Obenauer: Новая серия статей о концептуальных моделях интерфейсах. Пока есть только первые материалы, но автор всегда выдаёт интереснейшие размышления о глубинной логике продуктов для персональной продуктивности.
10. IBM: Советы по планированию и созданию интерактивных прототипов в Figma.
#patterns
Nielsen Norman Group
Menu-Design Checklist: 17 UX Guidelines
People rely on menus to find content and use features. Use this checklist to make sure your menus do their job.
Forwarded from Дайджест продуктового дизайна
Попробую более компактные выпуски в ближайшие недели. Начнём со лучших интерфейсных паттернов и практик:
1. Ирина Сильянова: Хорошая памятка по написанию интерфейсных текстов. Здорово, что они находятся на стыке дизайна (как использовать текст в контексте экрана) и редактуры (как правильно писать).
2. NN/g: Советуют больше времени тратить на убирание барьеров и «засоров» в интерфейсе, чем на подталкивание пользователя к правильному решению. Оба направления работы важны, но отдача от первого быстрее и понятнее.
3. Baymard: В интернет-магазинах одежды большинство пользователей пользуется навигацией по категориям, а не поиском. Iva Olah рассказывает, почему это так и почему частые поисковые запросы здесь — симптом проблем.
4. Baymard: Советуют добавлять визуальное представление фильтров для сложных категорий товаров в интернет-магазинах.
5. Chiara Santella: Как менялась концепция будильника — от улучшения функциональности в самостоятельных устройствах до переосмысления самой концепции в эпоху мобильных приложений.
#patterns
1. Ирина Сильянова: Хорошая памятка по написанию интерфейсных текстов. Здорово, что они находятся на стыке дизайна (как использовать текст в контексте экрана) и редактуры (как правильно писать).
2. NN/g: Советуют больше времени тратить на убирание барьеров и «засоров» в интерфейсе, чем на подталкивание пользователя к правильному решению. Оба направления работы важны, но отдача от первого быстрее и понятнее.
3. Baymard: В интернет-магазинах одежды большинство пользователей пользуется навигацией по категориям, а не поиском. Iva Olah рассказывает, почему это так и почему частые поисковые запросы здесь — симптом проблем.
4. Baymard: Советуют добавлять визуальное представление фильтров для сложных категорий товаров в интернет-магазинах.
5. Chiara Santella: Как менялась концепция будильника — от улучшения функциональности в самостоятельных устройствах до переосмысления самой концепции в эпоху мобильных приложений.
#patterns
Smashing Magazine
How To Improve Your Microcopy: UX Writing Tips For Non-UX Writers — Smashing Magazine
Interface copy plays a crucial role in the overall user experience, helping guide users smoothly, allowing them to navigate easily through the app, discover and start using product features, and more. In this article, you’ll find simple, practical tips and…
Forwarded from Дайджест продуктового дизайна
1. Casper Kessels: Попробовал сделать сам физическую кнопку управления климатом в машине. Он дотошно записывал все свои находки о нюансах взаимодействия пользователя с ней.
2. NN/g: Словарик, описывающий типовые элементы интерфейса.
3. Scott Jenson: Как команда Android использовала обратную связь через haptic-эффект для разделения действий в панели быстрых действий: обычное нажатие и длинное для вызова дополнительных действий.
4. NN/g: Фреймворк EAS (Eliminate, Automate, Simplify) для упрощения форм в интерфейсах.
5. Kyle Lambert: Интересные примеры развития работы с курсором в инструментах и играх. И даёт советы на тему таких экспериментов.
6. Steven Kramer: Редизайн процесса подписи документов в Adobe Acrobat.
7. Ted Goas: Чеклист, который он использует для оценки дизайна в своей команде сервиса Dialpad.
8. Денис Теплов: Хороший пример о том, что иногда при редизайне нужно дать пользователям привыкнуть к нему. Как Лига Ставок сильно поменяла интерфейс и получила сначала просадку к ключевым метрикам, а потом рост.
9. Penpot: Чеклист по проверке accessibility в дизайне интерфейсов.
10. MeasuringU: Новое сравнительное исследование цифровых продуктов. Как пользователи оценивают их по метрикам UMUX-Lite и NPS.
11. Baymard: Обзор недавних исследований по лучшим практикам интернет-магазинов в большом вебе. В том числе выделили 10 типичных проблем.
#patterns
The Turn Signal - a Blog About automotive UX Design
The Subtle Art of Designing Physical Controls for Cars
Prototyping a concept for simpler, physical climate controls
Forwarded from Дайджест продуктового дизайна
Овердофига свежих ссылок о лучших интерфейсных паттернах и практиках:
1. Wise: Как передавали в разработку анимацию сложного экрана мобильного приложения с кучей состояний. Это динамические и статические спецификации — они детально показаны в статье.
2. Baymard: Советы по улучшению каруселей в интернет-магазинах в большом вебе и на мобильных.
3. Михаил Просмицкий: Отличия стандарта accessibility WCAG 3.0 от текущего 2.2. У него более гибкая оценка поддержки пользователей с ограниченными возможностями, что одновременно и плюс (учитывается больше факторов) и минус (их можно вольно трактовать).
4. Figma: Как решали простые на вид задачи — добавить горизонтальную прокрутку к панели слоёв и найти хорошее название для возможности использовать прототип в офлайне. Какие варианты они перебирали и с какими проблемами сталкивались.
5. NN/g: Советы по грамотному проектированию подсказок в ИИ-чат-ботах. Они могут обучать пользователей возможностям бота, дополнять запрос и предлагать следующие запросы в диалоге.
6. Adobe: Упрощение интерфейса для работы с анимацией в Adobe Express. Как они искали баланс между простотой и возможностью настройки.
7. Adobe: Работа над дизайном интерфейса мобильной версии Adobe Photoshop. Как они искали базовую модель взаимодействия пользователей с продуктом и развивали её.
8. NN/g: Разница между видами текста и контента в целом в интерфейсах.
9. Martin Underhill: Почему важны быстрые ссылки для перехода к основному контенту для поддержки accessibility. И как прикрутить их к сайту.
10. Mike Gower: Способы улучшить accessibility интерфейса чата с ИИ-ассистентом.
11. Eleanor Hecks: Памятка по поддержке навигации с клавиатуры для поддержки accessibility.
12. Baymard: Советы по улучшению интерфейсов интернет-магазинов-агрегаторов.
13. Amy Hupe: Советы по написанию толковых сообщениях об ошибках в интерфейсе.
14. Baymard: Как интернет-магазины, заботящиеся об окружающей среде, могут рассказывать об этом на своих сайтах и в приложениях.
15. MeasuringU: Новое сравнительное исследование американских брокерских сайтов. Как пользователи оценивают их по метрикам UX-Lite, SUPR-Q и NPS.
#patterns
1. Wise: Как передавали в разработку анимацию сложного экрана мобильного приложения с кучей состояний. Это динамические и статические спецификации — они детально показаны в статье.
2. Baymard: Советы по улучшению каруселей в интернет-магазинах в большом вебе и на мобильных.
3. Михаил Просмицкий: Отличия стандарта accessibility WCAG 3.0 от текущего 2.2. У него более гибкая оценка поддержки пользователей с ограниченными возможностями, что одновременно и плюс (учитывается больше факторов) и минус (их можно вольно трактовать).
4. Figma: Как решали простые на вид задачи — добавить горизонтальную прокрутку к панели слоёв и найти хорошее название для возможности использовать прототип в офлайне. Какие варианты они перебирали и с какими проблемами сталкивались.
5. NN/g: Советы по грамотному проектированию подсказок в ИИ-чат-ботах. Они могут обучать пользователей возможностям бота, дополнять запрос и предлагать следующие запросы в диалоге.
6. Adobe: Упрощение интерфейса для работы с анимацией в Adobe Express. Как они искали баланс между простотой и возможностью настройки.
7. Adobe: Работа над дизайном интерфейса мобильной версии Adobe Photoshop. Как они искали базовую модель взаимодействия пользователей с продуктом и развивали её.
8. NN/g: Разница между видами текста и контента в целом в интерфейсах.
9. Martin Underhill: Почему важны быстрые ссылки для перехода к основному контенту для поддержки accessibility. И как прикрутить их к сайту.
10. Mike Gower: Способы улучшить accessibility интерфейса чата с ИИ-ассистентом.
11. Eleanor Hecks: Памятка по поддержке навигации с клавиатуры для поддержки accessibility.
12. Baymard: Советы по улучшению интерфейсов интернет-магазинов-агрегаторов.
13. Amy Hupe: Советы по написанию толковых сообщениях об ошибках в интерфейсе.
14. Baymard: Как интернет-магазины, заботящиеся об окружающей среде, могут рассказывать об этом на своих сайтах и в приложениях.
15. MeasuringU: Новое сравнительное исследование американских брокерских сайтов. Как пользователи оценивают их по метрикам UX-Lite, SUPR-Q и NPS.
#patterns
Medium
Translating Motion into Code
How we worked with engineering to create moments of delight
Forwarded from Дайджест продуктового дизайна
И снова плотный список свежих интерфейсных паттернов и практик:
1. Motion Log: Сайт анализирует анимацию мобильных приложений и позволяет покадрово рассмотреть, что происходит при переходах.
2. Spotted in Production: Галерея примеров эффектной анимации в мобильных приложениях.
3. Automattic (создатели Wordpress): Как дизайн-команда работает с текстами в интерфейсе. Они всегда пишут первую версию текста сами, до подключения редакторов. И создали плагин для Figma в помощь.
4. Benji Taylor: Дизайн интерфейса необычного мессенджера Honk. Кладезь нетривиальных паттернов и анимационных приёмов.
5. Deliveroo: Как обновили анимацию отслеживания заказа под новую цветовую палитру и векторную графику.
6. Social Proof Examples: Коллекция примеров социального подтверждения в интерфейсах.
7. Microsoft: Как доработали каноническое меню «Пуск» для недавнего обновления Windows.
8. Adobe: Проектирование и дизайн интерфейса Firefly Boards. Как они упаковывали концепции алгоритмического дизайна простым языком.
9. Whitney Lewis: Толковый практический разбор примеров ALT-текстов для изображений на сайте. Она показывает, как правильно писать их для разных ситуаций.
10. NN/g: Интерфейсные паттерны, которые помогают бороться с расфокусом внимания в современном мире.
11. CTA Gallery: Коллекция примеров призывов к действию в интерфейсе — отдельных кнопок и цельных блоков.
12. Adobe: Редизайн интерфейса Premiere Elements, который не менялся 12 лет.
13. Отчёт о поддержке интернетом accessibility в письмах рассылки в 2025 году.
14. Экзон (продукт для строительных компаний): В деталях о работе над обновлённой «шапкой» в интерфейсе.
15. EatSleepPrototype: Галерея экспериментальных прототипов мобильных интерфейсов от разных дизайнеров (можно загрузить свой).
16. Markswebb: Проанализировали интерфейс вывода TON через Телеграм и подсветили основные проблемы.
#patterns
1. Motion Log: Сайт анализирует анимацию мобильных приложений и позволяет покадрово рассмотреть, что происходит при переходах.
2. Spotted in Production: Галерея примеров эффектной анимации в мобильных приложениях.
3. Automattic (создатели Wordpress): Как дизайн-команда работает с текстами в интерфейсе. Они всегда пишут первую версию текста сами, до подключения редакторов. И создали плагин для Figma в помощь.
4. Benji Taylor: Дизайн интерфейса необычного мессенджера Honk. Кладезь нетривиальных паттернов и анимационных приёмов.
5. Deliveroo: Как обновили анимацию отслеживания заказа под новую цветовую палитру и векторную графику.
6. Social Proof Examples: Коллекция примеров социального подтверждения в интерфейсах.
7. Microsoft: Как доработали каноническое меню «Пуск» для недавнего обновления Windows.
8. Adobe: Проектирование и дизайн интерфейса Firefly Boards. Как они упаковывали концепции алгоритмического дизайна простым языком.
9. Whitney Lewis: Толковый практический разбор примеров ALT-текстов для изображений на сайте. Она показывает, как правильно писать их для разных ситуаций.
10. NN/g: Интерфейсные паттерны, которые помогают бороться с расфокусом внимания в современном мире.
11. CTA Gallery: Коллекция примеров призывов к действию в интерфейсе — отдельных кнопок и цельных блоков.
12. Adobe: Редизайн интерфейса Premiere Elements, который не менялся 12 лет.
13. Отчёт о поддержке интернетом accessibility в письмах рассылки в 2025 году.
14. Экзон (продукт для строительных компаний): В деталях о работе над обновлённой «шапкой» в интерфейсе.
15. EatSleepPrototype: Галерея экспериментальных прототипов мобильных интерфейсов от разных дизайнеров (можно загрузить свой).
16. Markswebb: Проанализировали интерфейс вывода TON через Телеграм и подсветили основные проблемы.
#patterns
Forwarded from Дайджест продуктового дизайна
Чемпионство по потоку свежих ссылок сейчас у интерфейсных паттернов и практик. Погнали:
1. NN/g: Рассматривать пользователей корпоративных приложений как либо новичков, либо экспертов — неправильно. Они предлагает другую категоризацию: Legacy (используют давно, но знают только самую базу), Legend (глубоко знают интерфейс) и Learner (эксперты в предметной области, но с интерфейсом ещё не работали). И дают советы на тему того, как помочь каждой группе.
2. Sharang Sharma: Типичные способы встроить ИИ-помощника в интерфейс — от небольшого окошка чата до полной интеграции в основное взаимодействие.
3. Luke Wroblewski пишет много и толково про паттерны ИИ-интерфейсов:
— Ограничения модели простого чата при взаимодействии с ИИ-продуктами. Он разбирает гибридные подходы, которые гибче и удобнее.
— Какими могут быть интерфейсы для управления сразу несколькими ИИ-агентами, которые выполняют множество задач. Он примеряет стандартные интерфейсные решения и рассуждает, как это могло бы работать.
— Многие популярные ИИ-сервисы при старте работ спрашивают пользователей, что они хотели бы сделать. Но пользователи сами до конца не знают, что умеют эти инструменты.
4. Casper Kessels: В деталях анализирует интерфейс Panorama i-Cockpit новых машин Peugeot.
5. Louis Charron: Роль метафор в интерфейсах и дизайне в целом. Почему они помогают человеку быстрее понять новую для себя вещь.
6. Design Beyond Barriers: Сборник принципов дизайна с учётом требований accessibility.
7. Stéphanie Walter: Прорва ссылок на гайдлайны, памятки, принципы и другие полезные материалы по дизайну для пользователей с особенностями восприятия.
8. Neurodiversity Design System: Коллекция принципов и гайдлайнов по дизайну для пользователей с особенностями восприятия.
9. David Hoang: Проводит параллель между управлением ИИ-агентами и стратегиями в реальном времени. В них много общего — пользователь отдаёт верхнеуровневые команды, не управляет каждой мелочью.
10. NN/g: Лучшие практики для обучения написанию хороших запросов в ИИ-чат-ботах. Они выделили несколько паттернов для разных ситуаций и показали примеры их реализации.
11. NN/g: Как правильно суммировать отзывы пользователей в интернет-магазинах с помощью ИИ. Они собрали удачные и не очень примеры.
12. Jared Cunha: Как сделать удобное меню на сайте для пользователей с ограниченными возможностями, использующих навигацию с клавиатуры.
#patterns
1. NN/g: Рассматривать пользователей корпоративных приложений как либо новичков, либо экспертов — неправильно. Они предлагает другую категоризацию: Legacy (используют давно, но знают только самую базу), Legend (глубоко знают интерфейс) и Learner (эксперты в предметной области, но с интерфейсом ещё не работали). И дают советы на тему того, как помочь каждой группе.
2. Sharang Sharma: Типичные способы встроить ИИ-помощника в интерфейс — от небольшого окошка чата до полной интеграции в основное взаимодействие.
3. Luke Wroblewski пишет много и толково про паттерны ИИ-интерфейсов:
— Ограничения модели простого чата при взаимодействии с ИИ-продуктами. Он разбирает гибридные подходы, которые гибче и удобнее.
— Какими могут быть интерфейсы для управления сразу несколькими ИИ-агентами, которые выполняют множество задач. Он примеряет стандартные интерфейсные решения и рассуждает, как это могло бы работать.
— Многие популярные ИИ-сервисы при старте работ спрашивают пользователей, что они хотели бы сделать. Но пользователи сами до конца не знают, что умеют эти инструменты.
4. Casper Kessels: В деталях анализирует интерфейс Panorama i-Cockpit новых машин Peugeot.
5. Louis Charron: Роль метафор в интерфейсах и дизайне в целом. Почему они помогают человеку быстрее понять новую для себя вещь.
6. Design Beyond Barriers: Сборник принципов дизайна с учётом требований accessibility.
7. Stéphanie Walter: Прорва ссылок на гайдлайны, памятки, принципы и другие полезные материалы по дизайну для пользователей с особенностями восприятия.
8. Neurodiversity Design System: Коллекция принципов и гайдлайнов по дизайну для пользователей с особенностями восприятия.
9. David Hoang: Проводит параллель между управлением ИИ-агентами и стратегиями в реальном времени. В них много общего — пользователь отдаёт верхнеуровневые команды, не управляет каждой мелочью.
10. NN/g: Лучшие практики для обучения написанию хороших запросов в ИИ-чат-ботах. Они выделили несколько паттернов для разных ситуаций и показали примеры их реализации.
11. NN/g: Как правильно суммировать отзывы пользователей в интернет-магазинах с помощью ИИ. Они собрали удачные и не очень примеры.
12. Jared Cunha: Как сделать удобное меню на сайте для пользователей с ограниченными возможностями, использующих навигацию с клавиатуры.
#patterns
Nielsen Norman Group
Supporting “Power Users” Isn’t Enough: 3 Complex-App User Types
Complex-app users don’t always fit neatly into “novice” or “expert” labels. Designing for Legacy, Legend, and Learner users leads to more inclusive, effective systems.
Forwarded from Дайджест продуктового дизайна
Пакет обновлений о связи бренда с интерфейсом:
1. Muse Group: Семейство музыкальных сервисов от американского агентства Collins. Шоурил, где показано приземление на интерфейсы. Я уже писал о том, как мы делали этот проект — но теперь появилось больше материалов.
2. Shuer Zhuo и Jeeyun Oh: Проверили серию гипотез о том, что большие скругления в интерфейсе добавляют теплоты, а значит и доверия. Они показали хорошую цепочку гипотез о характере выражения бренда в интерфейсе и методов их проверки. Хотя вывод про обязательность теплоты и мягкости слишком заряженный.
3. Solflare: Финтех от американского агентства Ragged Edge.
4. Jupi: Система поддержки принятия решений с помощью ИИ от британского агентства How&How.
5. HeadHunter: Сервис поиска работы от отечественного агентства ONY.
6. Lyft: Такси от британо-американского агентства Koto.
7. Big Cartel: Платформа электронной коммерции от британского агентства How&How.
8. Google Gemini: ИИ-помощник от американского агентства Porto Rocha.
9. Care: Каталог социальных работников от американского агентства Manual.
10. TripAdvisor: Каталог отзывов для путешественников от британо-американского агентства Koto.
11. Moonbeam: Web3-платформа от американского агентства View Source.
12. AlphaSense: ИИ-платформа от британского агентства Saffron.
13. Inbox Monster: Платформа email-маркетинга от голландского агентства Verve.
13. Adobe: Освежение бренда от британского агентства Mother Design (кейс почему-то пропал с их собственного сайта).
14. Streamtime: Сервис управления проектами от британского агентства NB Studio.
15. Grubhub: Сервис доставки еды, сделанный внутренними силами.
16. Shutterstock: Новый логотип.
#patterns
1. Muse Group: Семейство музыкальных сервисов от американского агентства Collins. Шоурил, где показано приземление на интерфейсы. Я уже писал о том, как мы делали этот проект — но теперь появилось больше материалов.
2. Shuer Zhuo и Jeeyun Oh: Проверили серию гипотез о том, что большие скругления в интерфейсе добавляют теплоты, а значит и доверия. Они показали хорошую цепочку гипотез о характере выражения бренда в интерфейсе и методов их проверки. Хотя вывод про обязательность теплоты и мягкости слишком заряженный.
3. Solflare: Финтех от американского агентства Ragged Edge.
4. Jupi: Система поддержки принятия решений с помощью ИИ от британского агентства How&How.
5. HeadHunter: Сервис поиска работы от отечественного агентства ONY.
6. Lyft: Такси от британо-американского агентства Koto.
7. Big Cartel: Платформа электронной коммерции от британского агентства How&How.
8. Google Gemini: ИИ-помощник от американского агентства Porto Rocha.
9. Care: Каталог социальных работников от американского агентства Manual.
10. TripAdvisor: Каталог отзывов для путешественников от британо-американского агентства Koto.
11. Moonbeam: Web3-платформа от американского агентства View Source.
12. AlphaSense: ИИ-платформа от британского агентства Saffron.
13. Inbox Monster: Платформа email-маркетинга от голландского агентства Verve.
13. Adobe: Освежение бренда от британского агентства Mother Design (кейс почему-то пропал с их собственного сайта).
14. Streamtime: Сервис управления проектами от британского агентства NB Studio.
15. Grubhub: Сервис доставки еды, сделанный внутренними силами.
16. Shutterstock: Новый логотип.
#patterns
Forwarded from Дайджест продуктового дизайна
За месяц собрал чутка новья по лучшим интерфейсным практикам и паттернам:
1. NN/g: Принципы дизайна форм: структура, прозрачность, ясность и поддержка. Это пошаговая памятка, которая поможет разложить общую структуру и конкретные поля.
2. Гайдлайны accessibility WCAG, переписанные простым языком.
3. Creative Navy: Изучили информационную архитектуру в интерфейсах медицинского оборудования.
А ещё — как такие интерфейсы помогают пользователям разобраться в них.
4. Tom Barrasso: Как оптимизировать мобильные сайты для кнопочных телефонов. Их намного меньше смартфонов, но всё равно заметное количество.
5. NN/g: Ещё раз про то, почему важно сохранять место на странице, куда докрутил пользователь, если он возвращается назад. И приводит несколько ситуаций-исключений, где это не нужно.
6. Виталий Фридман: Памятка из полезных ссылок на тему адаптации мобильных интерфейсов для левшей.
7. A11Y Collective: Как учитывать accessibility при создании инфографики.
#patterns
1. NN/g: Принципы дизайна форм: структура, прозрачность, ясность и поддержка. Это пошаговая памятка, которая поможет разложить общую структуру и конкретные поля.
2. Гайдлайны accessibility WCAG, переписанные простым языком.
3. Creative Navy: Изучили информационную архитектуру в интерфейсах медицинского оборудования.
А ещё — как такие интерфейсы помогают пользователям разобраться в них.
4. Tom Barrasso: Как оптимизировать мобильные сайты для кнопочных телефонов. Их намного меньше смартфонов, но всё равно заметное количество.
5. NN/g: Ещё раз про то, почему важно сохранять место на странице, куда докрутил пользователь, если он возвращается назад. И приводит несколько ситуаций-исключений, где это не нужно.
6. Виталий Фридман: Памятка из полезных ссылок на тему адаптации мобильных интерфейсов для левшей.
7. A11Y Collective: Как учитывать accessibility при создании инфографики.
#patterns
Nielsen Norman Group
Few Guesses, More Success: 4 Principles to Reduce Cognitive Load in Forms
Four principles of form design — structure, transparency, clarity, and support — minimize users’ cognitive load and improve usability.
Forwarded from Дайджест продуктового дизайна
Придётся выложить недочитанную подборку свежих интерфейсных паттернов и практик — шибко плотный поток. Во вкладках томится ещё больше:
1. ScreenBook: Коллекция примеров отечественных мобильных приложений для Android и iOS.
2. Jon Daiello: Необычный креативный метод подуктовой работы — обязательно сделать самый худший концепт реализации продуктовой идеи. Это позволяет не только расшатать мышление, но и лучше понять решаемую проблему.
3. Pricing Pages: Коллекция примеров интерфейсов страницы цен и тарифов.
4. Craig Abbott: Понятие «лучшие практики» на деле бывает сложно характеризовать — насколько такие дизайн-решения актуальны на текущий момент.
5. Анализ дизайна тонны японских сайтов. Почему они такие и чем отличаются от других стран.
6. Linear: Гайдлайны для интерфейсов ИИ-агентов.
7. Более гибкий подход к рекомендациям по улучшениям accessibility в продукте. Он не обязывает внедрить конкретные правки, а напоминает чего важно добиться.
8. A11Y Collective: Как учитывать accessibility при использовании видео на сайте.
9. Milan Balać: История ТВ — как менялись пульты дистанционного управления и базовые интерфейсные решения.
10. Natasha Tenggoro: Как делала прототипы работы с видео в Figma Buzz с помощью их же ИИ-инструмента Make.
11. Редактор HTML для мобильных. Как его проектировали и что из этого получилось.
12. MeasuringU: Новое сравнительное исследование американских сайтов по уходу за животными. Как пользователи оценивают их по метрикам UX-Lite, SUPR-Q и NPS.
#patterns
1. ScreenBook: Коллекция примеров отечественных мобильных приложений для Android и iOS.
2. Jon Daiello: Необычный креативный метод подуктовой работы — обязательно сделать самый худший концепт реализации продуктовой идеи. Это позволяет не только расшатать мышление, но и лучше понять решаемую проблему.
3. Pricing Pages: Коллекция примеров интерфейсов страницы цен и тарифов.
4. Craig Abbott: Понятие «лучшие практики» на деле бывает сложно характеризовать — насколько такие дизайн-решения актуальны на текущий момент.
5. Анализ дизайна тонны японских сайтов. Почему они такие и чем отличаются от других стран.
6. Linear: Гайдлайны для интерфейсов ИИ-агентов.
7. Более гибкий подход к рекомендациям по улучшениям accessibility в продукте. Он не обязывает внедрить конкретные правки, а напоминает чего важно добиться.
8. A11Y Collective: Как учитывать accessibility при использовании видео на сайте.
9. Milan Balać: История ТВ — как менялись пульты дистанционного управления и базовые интерфейсные решения.
10. Natasha Tenggoro: Как делала прототипы работы с видео в Figma Buzz с помощью их же ИИ-инструмента Make.
11. Редактор HTML для мобильных. Как его проектировали и что из этого получилось.
12. MeasuringU: Новое сравнительное исследование американских сайтов по уходу за животными. Как пользователи оценивают их по метрикам UX-Lite, SUPR-Q и NPS.
#patterns
Jondaiello
Designing Terrible Solutions Makes You a Better Designer
Intentionally designing terrible solutions reveals problem boundaries and constraints that "good enough" thinking misses, leading to breakthrough innovations through systematic failure exploration.
Forwarded from Дайджест продуктового дизайна
Ещё немного свежих интерфейсных паттернов и лучших практик:
1. UX Ray 2.0: Baymard обновили свой инструмент автоматического анализа интерфейса сайта. Теперь он не только выдаёт рекомендации по улучшению, но и делает ранжированный по приоритетам план улучшений. И поможет сравниться с другими сайтами.
2. Milan Balać: Интерфейсные паттерны современных телевизоров. Как устроена навигация, представление информации и ввод информации на них.
3. Linear: Как они держат баланс анимации в интерфейсе. Так, чтобы она добавляла характера, но не отвлекала.
4. NN/g: Лучшие практики для интерфейсов мобильных приложений, которые управляют умными устройствами. Во второй статье разбирают процесс их настройки через приложение.
5. Markswebb: Хорошие интерфейсные паттерны, которые помогают покупателю сделать более правильный выбор. А значит — снизить возвраты, ведь ошибки при выборе являются одной из их главных причин.
6. Adobe Illustrator: Как команда раобтала над дизайном интерфейса быстрого пера.
7. Karan Rawal: Делится своим опытом дизайна интерфейсов информационных панелей, показывающих информацию в реальном времени.
#patterns
1. UX Ray 2.0: Baymard обновили свой инструмент автоматического анализа интерфейса сайта. Теперь он не только выдаёт рекомендации по улучшению, но и делает ранжированный по приоритетам план улучшений. И поможет сравниться с другими сайтами.
2. Milan Balać: Интерфейсные паттерны современных телевизоров. Как устроена навигация, представление информации и ввод информации на них.
3. Linear: Как они держат баланс анимации в интерфейсе. Так, чтобы она добавляла характера, но не отвлекала.
4. NN/g: Лучшие практики для интерфейсов мобильных приложений, которые управляют умными устройствами. Во второй статье разбирают процесс их настройки через приложение.
5. Markswebb: Хорошие интерфейсные паттерны, которые помогают покупателю сделать более правильный выбор. А значит — снизить возвраты, ведь ошибки при выборе являются одной из их главных причин.
6. Adobe Illustrator: Как команда раобтала над дизайном интерфейса быстрого пера.
7. Karan Rawal: Делится своим опытом дизайна интерфейсов информационных панелей, показывающих информацию в реальном времени.
#patterns
Forwarded from Дайджест продуктового дизайна
Свежая мини-подборка свежего об интерфейсных паттернах и лучших практиках. Прочитал ещё не все открытые вкладки, но держите пока эти:
1. Navbar Gallery: Коллекция паттернов навигации в вебе.
2. Loadmore: Коллекция необычных видов взаимодействия в мобильных приложениях и сайтах.
3. Emil Kowalski (Linear): Показывает на примерах, как он балансирует анимацию интерфейсных элементов. Он показывает хорошую и плохую реализацию.
4. NN/g: Важность дизайна краевых ситуаций в жизни пользователей. Она приводит много таких примеров и даёт советы по ним.
5. Ke Lyu: Проанализировал настолки, в которые играет с сыном, по 10 эвристикам Нильсена. Получился необычный анализ.
6. Luke Wroblewski: Необычный способ встречи нового пользователя в продукте. ИИ создаёт первый документ на глазах пользователя и даёт возможность подправить его.
7. Steve Frenzel: Детальная инструкция по подготовке PDF с учётом требований accessibility.
8. A11y Collective: Советы по оформлению информации на сайте, которые помогают улучшить accessibility.
9, Jared Cunha: Попробовал писать ALT-тексты для изображений с помощью ИИ. За несколько итераций получилось вполне сносно.
10. Barclays: Принципы инклюзивного дизайна от команды банка.
11. MeasuringU: Новое сравнительное исследование сайтов международных банков. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
1. Navbar Gallery: Коллекция паттернов навигации в вебе.
2. Loadmore: Коллекция необычных видов взаимодействия в мобильных приложениях и сайтах.
3. Emil Kowalski (Linear): Показывает на примерах, как он балансирует анимацию интерфейсных элементов. Он показывает хорошую и плохую реализацию.
4. NN/g: Важность дизайна краевых ситуаций в жизни пользователей. Она приводит много таких примеров и даёт советы по ним.
5. Ke Lyu: Проанализировал настолки, в которые играет с сыном, по 10 эвристикам Нильсена. Получился необычный анализ.
6. Luke Wroblewski: Необычный способ встречи нового пользователя в продукте. ИИ создаёт первый документ на глазах пользователя и даёт возможность подправить его.
7. Steve Frenzel: Детальная инструкция по подготовке PDF с учётом требований accessibility.
8. A11y Collective: Советы по оформлению информации на сайте, которые помогают улучшить accessibility.
9, Jared Cunha: Попробовал писать ALT-тексты для изображений с помощью ИИ. За несколько итераций получилось вполне сносно.
10. Barclays: Принципы инклюзивного дизайна от команды банка.
11. MeasuringU: Новое сравнительное исследование сайтов международных банков. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
www.navbar.gallery
Navbar Gallery – Navigation Design Inspiration
Navbar Gallery is a collection of the best website navbar inspiration designs on the web. Find the ideal navigation example for your design from our collection.
Forwarded from Дизайн-Телега 🔥
This media is not supported in your browser
VIEW IN TELEGRAM
50 уникальных паттернов.
• 50 автоматически сгенерированных бесшовных паттернов
• Создано с помощью Figma-плагина Snapatterns
• Идеально для фонов, соцсетей и акцентных элементов
#patterns #seamless #backgrounds #generative #resources
Открыть в Figma
• 50 автоматически сгенерированных бесшовных паттернов
• Создано с помощью Figma-плагина Snapatterns
• Идеально для фонов, соцсетей и акцентных элементов
#patterns #seamless #backgrounds #generative #resources
Открыть в Figma
Forwarded from Дайджест продуктового дизайна
Неразобранные с прошлого года свежие ссылки про лучшие интерфейсные паттерны и практики, пока руки и глаза не дошли до самого новья:
1. Linear: Воссоздали эффекты «жидкого стекла» в своём приложении для iOS. Им нужна была расширенная нижняя панель навигации, так что стандартных решений ОС не хватало.
2. Creative Navy: Фундаментальная статья о проблемах в интерфейсах научных программ. И способах посчитать ROI их улучшения — это лучшее, что я встречал на эту тему.
3. NN/g: Советы по дизайну интерфейса контекстных меню.
4. Website Inspo: Галерея примеров интересных по дизайну сайтов, разбитая по типовым компонентам.
5. Сайт собрал классические эвристики Нильсена и новые принципы дизайна для ИИ.
6. NN/G: Дневниковое исследование пользователей умных домов. Что им важно, как строятся их потребности и ожидания.
7. Виталий Фридман: Как интерфейсы могут помочь пользователям в стрессе лучше справляться с задачами.
8. Bad UX World Cup: Конкурс на худший интерфейс выбора даты.
9. NHS: Принципы дизайна команды британской системы здравоохранения.
10. Adobe: Как снизить негативное влияние анимации в интерфейсе на пользователей с ограниченными возможностями. Это техники на стыке с разработкой.
11. Fernando Rojo: В деталях разбирает дизайн интерфейса приложения Vercel v0 и его реализацию. Много подробностей про самые мелкие нюансы взаимодействия с чатом.
12. Adobe Express: Пример решения задачи growth. Как здесь сработала связка дизайнера и исследователя.
#patterns
1. Linear: Воссоздали эффекты «жидкого стекла» в своём приложении для iOS. Им нужна была расширенная нижняя панель навигации, так что стандартных решений ОС не хватало.
2. Creative Navy: Фундаментальная статья о проблемах в интерфейсах научных программ. И способах посчитать ROI их улучшения — это лучшее, что я встречал на эту тему.
3. NN/g: Советы по дизайну интерфейса контекстных меню.
4. Website Inspo: Галерея примеров интересных по дизайну сайтов, разбитая по типовым компонентам.
5. Сайт собрал классические эвристики Нильсена и новые принципы дизайна для ИИ.
6. NN/G: Дневниковое исследование пользователей умных домов. Что им важно, как строятся их потребности и ожидания.
7. Виталий Фридман: Как интерфейсы могут помочь пользователям в стрессе лучше справляться с задачами.
8. Bad UX World Cup: Конкурс на худший интерфейс выбора даты.
9. NHS: Принципы дизайна команды британской системы здравоохранения.
10. Adobe: Как снизить негативное влияние анимации в интерфейсе на пользователей с ограниченными возможностями. Это техники на стыке с разработкой.
11. Fernando Rojo: В деталях разбирает дизайн интерфейса приложения Vercel v0 и его реализацию. Много подробностей про самые мелкие нюансы взаимодействия с чатом.
12. Adobe Express: Пример решения задачи growth. Как здесь сработала связка дизайнера и исследователя.
#patterns
linear.app
A Linear spin on Liquid Glass - Linear
Forwarded from Дайджест продуктового дизайна
Пачка свежего уже точно из 2026 года про свежие интерфейсные паттерны и практики:
1. GoodCart: Коллекция хороших интерфейсов интернет-магазинов.
2. Detail Design: Коллекция хороших интерфейсных паттернов — от мелких деталей до экранов.
3. NN/g: Типичные проблемы подсказок в интерфейсе. Зачастую вместо простой контекстной помощи они вызывают модальные элементы с водянистым описанием.
4. Sai Mohanty и Priyanka Raju: Дельный кейс проектирования сложного интерфейса для безопасников. Они пошагово описывают весь процесс от исследования пользователей до первых концептов и запуска продукта.
5. Александр Шпак: Проанализировал игровые интерфейсы по классическим эвристикам Нильсена.
6. Luke Wroblewski: Вариант интерфейса для управления множеством ИИ-агентов.
7. Adobe Photoshop: Дизайн интерфейса работы с разными ИИ-моделями. Он также участвовал в создании знаковой функции Generative Fill, которая показала как можно органично встраивать такие вещи в классические инструменты.
8. Eric Bailey: Огромная справочная таблица горячих клавиш, которые можно и нельзя использовать веб-приложениям для поддержки accessibility. Часть из них заняты на каком-то уровне — браузер, плагины, операционная система, экранный диктор и т.п.
9. Виталий Фридман: Памятка о разных вариантах множественного выбора в формах.
10. Jude Ejike: Концепция нейро-адаптивных интерфейсов для пользователей с особенностями восприятия. Её тестируют в том числе в специализированных областях вроде авиации или обучения.
11. MeasuringU: Новое сравнительное исследование сайтов американских торговых сетей. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
1. GoodCart: Коллекция хороших интерфейсов интернет-магазинов.
2. Detail Design: Коллекция хороших интерфейсных паттернов — от мелких деталей до экранов.
3. NN/g: Типичные проблемы подсказок в интерфейсе. Зачастую вместо простой контекстной помощи они вызывают модальные элементы с водянистым описанием.
4. Sai Mohanty и Priyanka Raju: Дельный кейс проектирования сложного интерфейса для безопасников. Они пошагово описывают весь процесс от исследования пользователей до первых концептов и запуска продукта.
5. Александр Шпак: Проанализировал игровые интерфейсы по классическим эвристикам Нильсена.
6. Luke Wroblewski: Вариант интерфейса для управления множеством ИИ-агентов.
7. Adobe Photoshop: Дизайн интерфейса работы с разными ИИ-моделями. Он также участвовал в создании знаковой функции Generative Fill, которая показала как можно органично встраивать такие вещи в классические инструменты.
8. Eric Bailey: Огромная справочная таблица горячих клавиш, которые можно и нельзя использовать веб-приложениям для поддержки accessibility. Часть из них заняты на каком-то уровне — браузер, плагины, операционная система, экранный диктор и т.п.
9. Виталий Фридман: Памятка о разных вариантах множественного выбора в формах.
10. Jude Ejike: Концепция нейро-адаптивных интерфейсов для пользователей с особенностями восприятия. Её тестируют в том числе в специализированных областях вроде авиации или обучения.
11. MeasuringU: Новое сравнительное исследование сайтов американских торговых сетей. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
GoodCart
GoodCart - Ecommerce UI & UX Design Inspiration
Browse the best designed ecommerce websites in one place.
Forwarded from Дайджест продуктового дизайна
Немного свежего о лучших интерфейсных паттернах и практиках:
1. Baymard Institute: Плагин для Figma на основе своего ИИ-анализатора интерфейсов UX-Ray. Он сопоставляет ваш макет с паттернами и лучшими практиками из их гигантской базы знаний.
2. Lazyweb: Сервис помогает быстро анализировать экраны и сценарии мобильных приложений в нужной отрасли. Это связка классической коллекции паттернов и гибкого ИИ-поиска по ней.
3. Victor Ayomipo: Памятка по психологии и дизайну интерфейса мотивационной системы streaks для пользователей.
4. NN/g: Памятка о проектировании полезных уведомлений для устройств умного дома. Они могут быть реактивными, проактивными и оптимизационными.
5. NN/g: Несколько простых интерфейсных паттернов в ИИ-чат-ботах, которые помогают пользователям общаться с ними. Это чекбоксы и варианты выбора из списка в Google и Claude — вроде бы банальные, но очень уместные в контексте задачи.
#patterns
1. Baymard Institute: Плагин для Figma на основе своего ИИ-анализатора интерфейсов UX-Ray. Он сопоставляет ваш макет с паттернами и лучшими практиками из их гигантской базы знаний.
2. Lazyweb: Сервис помогает быстро анализировать экраны и сценарии мобильных приложений в нужной отрасли. Это связка классической коллекции паттернов и гибкого ИИ-поиска по ней.
3. Victor Ayomipo: Памятка по психологии и дизайну интерфейса мотивационной системы streaks для пользователей.
4. NN/g: Памятка о проектировании полезных уведомлений для устройств умного дома. Они могут быть реактивными, проактивными и оптимизационными.
5. NN/g: Несколько простых интерфейсных паттернов в ИИ-чат-ботах, которые помогают пользователям общаться с ними. Это чекбоксы и варианты выбора из списка в Google и Claude — вроде бы банальные, но очень уместные в контексте задачи.
#patterns
Figma
UX-Ray by Baymard | Figma
Design experiences that actually convert. Analyze your designs against Baymard's research-backed UX best practices.
Scan your frames and identify critical usability issues that hurt conversions and user experiences.
With UX-Ray for Figma you can:
Identify…
Scan your frames and identify critical usability issues that hurt conversions and user experiences.
With UX-Ray for Figma you can:
Identify…
Forwarded from Дайджест продуктового дизайна
Новое о новых и старых интерфейсных паттернах и лучших практиках:
1. Florian Shulz: Как делать современные подсказки по заполнению поля ввода. Т.е. прямо в контексте этого поля.
2. Jakub Krehel: Пачка простых, но добротных советов по улучшению деталей реализации дизайна интерфейса. Он упаковал их в навык для ИИ-сред разработки, так что можно проще применить их к своему проекту.
3. Luke Wroblewski: Как менялось взаимодействие с продуктами на базе ИИ в их интерфейсах. От невидимой логики до смены рабочего процесса вообще.
4. Daniel Rodrigues и Lucas Fischer: Дизайне интерфейса приложения для заметок Monologue от Every. Как они искали и внедряли конкретные решения.
5. Buzz Usborne: Проблема в интерфейсах ИИ-продуктов, которые часто оставляют пользователя с белым листом наедине. Это древняя проблема в дизайне интерфейсов и здесь она проявляется как и всегда до этого — пользователь не понимает, что можно делать и с чего начать.
6. Adobe Photoshop: Как запускали дизайн интерфейса ИИ-функции для вставки картинки-примера в существующее изображение. Процесс исследований и прототипирования с промежуточными решениями.
7. NN/g: Разбираются с полезностью и находимостью чат-ботов на сайтах компаний. В основном всё плохо и вообще не имеет смысла.
8. Виталий Фридман: Отдельный экран или модальное окно? Памятка по выбору для конкретной ситуации в интерфейсе
9. Intercom: Как пользователям важно получать разные модели общения от ИИ в зависимости от среды и контекста. И как это влияет на уместность и доверие.
10. Taylor Dykes: Примеры трёх критериях хороших информационных текстов в интерфейсе. Они должны быть понятными, ёмкими и передавать характер бренда.
11. Terry Godier: Серия эссе об избыточной роли цифровых продуктов в жизни пользователя. И напоминание о том, чего избегать дизайнерам интерфейсов.
12. Elizabeth Lin: Бесплатный текстовый мини-курс о продуктовом дизайне и карьере в нём.
#patterns
1. Florian Shulz: Как делать современные подсказки по заполнению поля ввода. Т.е. прямо в контексте этого поля.
2. Jakub Krehel: Пачка простых, но добротных советов по улучшению деталей реализации дизайна интерфейса. Он упаковал их в навык для ИИ-сред разработки, так что можно проще применить их к своему проекту.
3. Luke Wroblewski: Как менялось взаимодействие с продуктами на базе ИИ в их интерфейсах. От невидимой логики до смены рабочего процесса вообще.
4. Daniel Rodrigues и Lucas Fischer: Дизайне интерфейса приложения для заметок Monologue от Every. Как они искали и внедряли конкретные решения.
5. Buzz Usborne: Проблема в интерфейсах ИИ-продуктов, которые часто оставляют пользователя с белым листом наедине. Это древняя проблема в дизайне интерфейсов и здесь она проявляется как и всегда до этого — пользователь не понимает, что можно делать и с чего начать.
6. Adobe Photoshop: Как запускали дизайн интерфейса ИИ-функции для вставки картинки-примера в существующее изображение. Процесс исследований и прототипирования с промежуточными решениями.
7. NN/g: Разбираются с полезностью и находимостью чат-ботов на сайтах компаний. В основном всё плохо и вообще не имеет смысла.
8. Виталий Фридман: Отдельный экран или модальное окно? Памятка по выбору для конкретной ситуации в интерфейсе
9. Intercom: Как пользователям важно получать разные модели общения от ИИ в зависимости от среды и контекста. И как это влияет на уместность и доверие.
10. Taylor Dykes: Примеры трёх критериях хороших информационных текстов в интерфейсе. Они должны быть понятными, ёмкими и передавать характер бренда.
11. Terry Godier: Серия эссе об избыточной роли цифровых продуктов в жизни пользователя. И напоминание о том, чего избегать дизайнерам интерфейсов.
12. Elizabeth Lin: Бесплатный текстовый мини-курс о продуктовом дизайне и карьере в нём.
#patterns
blog.florianschulz.info
Design Engineering 101: Typeahead
Forwarded from Дайджест продуктового дизайна
Чуток свежих интерфейсных паттернов и лучших практик:
1. A11Y.md: Контекстная инструкция для ИИ-моделей по поддержке accessibility. Это MD-файл, который загружается в сессию работы с нейронкой.
2. Durgesh Rajubhai Pawar перечисляет пачку типичных проблем с accessibility в коде, сгенерированном ИИ. И показывает, как их исправить.
3. AI Interaction Atlas: Большой каталог паттернов дизайна для ИИ-продуктов и взаимодействия с ИИ в целом.
4. NN/g: Чеклист лучших практик при дизайне чат-ботов на сайтах компаний. Как они должны работать, чтобы помогать пользователям и не конфликтовать с другими частями интерфейса.
5. Raghvi Kabra: Дизайн интерфейса приложения Adobe Aqua для детей. Как родилась идея, какие концепты они перебирали, что узнали о пользователях.
6. Claude Piché: Дизайн интерфейса второй версии Adobe Express. Как они пришли к концепции «сделай-бота» вместо «чат-бота», который решает конкретные задачи, а не просто трепется.
7. Ollie Fielding: Как неправильно делать формы для ввода медицинских данных. И что можно улучшить в них.
8. Demelza Feltham: Советы по улучшению интерфейсов для пользователей с тревожностью.
#patterns
1. A11Y.md: Контекстная инструкция для ИИ-моделей по поддержке accessibility. Это MD-файл, который загружается в сессию работы с нейронкой.
2. Durgesh Rajubhai Pawar перечисляет пачку типичных проблем с accessibility в коде, сгенерированном ИИ. И показывает, как их исправить.
3. AI Interaction Atlas: Большой каталог паттернов дизайна для ИИ-продуктов и взаимодействия с ИИ в целом.
4. NN/g: Чеклист лучших практик при дизайне чат-ботов на сайтах компаний. Как они должны работать, чтобы помогать пользователям и не конфликтовать с другими частями интерфейса.
5. Raghvi Kabra: Дизайн интерфейса приложения Adobe Aqua для детей. Как родилась идея, какие концепты они перебирали, что узнали о пользователях.
6. Claude Piché: Дизайн интерфейса второй версии Adobe Express. Как они пришли к концепции «сделай-бота» вместо «чат-бота», который решает конкретные задачи, а не просто трепется.
7. Ollie Fielding: Как неправильно делать формы для ввода медицинских данных. И что можно улучшить в них.
8. Demelza Feltham: Советы по улучшению интерфейсов для пользователей с тревожностью.
#patterns
GitHub
GitHub - fecarrico/A11Y.md: A context system for building accessible software by default — for developers and AI, with enforceable…
A context system for building accessible software by default — for developers and AI, with enforceable rules aligned to WCAG. - fecarrico/A11Y.md
Forwarded from Дайджест продуктового дизайна
Немного нового о свежих интерфейсных паттернах и практиках:
1. Magic Pointer: Новая интерфейсная концепция, заточенная под ИИ. Это специальный режим курсора, который позволяет объяснять, ремикшировать и в целом широко взаимодействовать с элементами на экране.
2. WebAIM: Проверили миллион главных страниц сайтов в интернете на поддержку accessibility. Они подсветили основные проблемы по итогу.
3. IBM: Толковые публикации о концепции Explainable AI. И выделили несколько ключевых тезисов из них.
4. NN/g: Шпаргалка по работе с текстами в интерфейсах на основе мнений экспертов. Это обзор по ключевым темам: Простота, тональность, жаргонизмы, структура, SEO и согласования.
5. David Mello: Автоматизированные инструменты проверки accessibility пропускают до 60-70% проблем. Как исправить это.
6. NN/g: Исследование поискового поведения китайских пользователей. Почему сильно упала доля классического поисковика Baidu и как они балансируют между ИИ-чат-ботами и привычным поиском.
#patterns
1. Magic Pointer: Новая интерфейсная концепция, заточенная под ИИ. Это специальный режим курсора, который позволяет объяснять, ремикшировать и в целом широко взаимодействовать с элементами на экране.
2. WebAIM: Проверили миллион главных страниц сайтов в интернете на поддержку accessibility. Они подсветили основные проблемы по итогу.
3. IBM: Толковые публикации о концепции Explainable AI. И выделили несколько ключевых тезисов из них.
4. NN/g: Шпаргалка по работе с текстами в интерфейсах на основе мнений экспертов. Это обзор по ключевым темам: Простота, тональность, жаргонизмы, структура, SEO и согласования.
5. David Mello: Автоматизированные инструменты проверки accessibility пропускают до 60-70% проблем. Как исправить это.
6. NN/g: Исследование поискового поведения китайских пользователей. Почему сильно упала доля классического поисковика Baidu и как они балансируют между ИИ-чат-ботами и привычным поиском.
#patterns
Google DeepMind
Shaping the future of AI interaction by reimagining the mouse pointer
Google DeepMind is transforming the mouse pointer into a context-aware AI partner. Move beyond the friction of traditional prompting with intuitive AI collaboration in Chrome and beyond.
Forwarded from Дизайн-Телега 🔥
This media is not supported in your browser
VIEW IN TELEGRAM
50 уникальных паттернов.
• 50 автоматически сгенерированных бесшовных паттернов
• Создано с помощью Figma-плагина Snapatterns
• Идеально для фонов, соцсетей и акцентных элементов
#patterns #seamless #backgrounds #generative #resources
Открыть в Figma
• 50 автоматически сгенерированных бесшовных паттернов
• Создано с помощью Figma-плагина Snapatterns
• Идеально для фонов, соцсетей и акцентных элементов
#patterns #seamless #backgrounds #generative #resources
Открыть в Figma