Не знаешь, какой мини-дайджест выпускать? Выпускай про интерфейсные паттерны и лучшие практики:
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. Виталий Фридман: Хорошая динамическая валидация форм. Она часто срабатывают неправильно, поэтому лучше использовать её аккуратно.
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
Smashing Magazine
A Complete Guide To Live Validation UX — Smashing Magazine
Live, or inline validation in web forms is useful when it works, but frustrating when it fails. Too often it leads to an endless stream of disruptive error messages or dead-ends without any chance of getting out. Let’s fix it.
Пора отпустить на волю накопления по лучшим интерфейсным паттернам и практикам:
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. 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
Medium
Usability heuristic frameworks: which one is right for you?
Going beyond Nielsen’s Usability Heuristics (with Infographic)
Давненько не было обзоров лучших интерфейсных практик и паттернов. Ща буит мясо:
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. 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
Built for Mars
The UX of Banking: 900 days of progress
A unique opportunity to revisit 12 UK banks, re-benchmark them, and highlight what 900 days of progress looks like.
Вкрации расскажу тута чучуть о лудший интерфейсный практики и паттерны. Кокраз туды ивойный и примените:
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. 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
Ishadeed
The Guide To Responsive Design In 2023 and Beyond
A modern look at responsive web design.
Собралась большая пробка из свежих ссылок, так что темы типа свежих интерфейсных паттернов и лучших практик всплывают чаще обычного. Но по весне это нормально:
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. 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. 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
ALEX HOLLENDER LEGAL PRACTICE - No one fights harder for your rights
ALEX HOLLENDER LEGAL PRACTICE
ALEX HOLLENDER LEGAL PRACTICE ABOUT USOUR LOCATIONSMinnesotaNew MexicoCaliforniaMontanaUnderstanding the Role of New York Injury Lawyers: A Comprehensive Guide by Alex Hollender Legal Practice In the dynamic and bustling landscape of New York, personal injuries…
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
The Pudding
How companies use dark patterns to keep you subscribed
Unsubscribing should be easy. It’s not.
Свежая подборка свежего про свежие интерфейсные паттерны и лучшие практики:
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
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
rauno.me
Invisible Details of Interaction Design
What makes great interactions feel right?
Ещё чутка свежих интерфейсных паттернов и лучших практик:
1. Тарас Бакушевич: Удачные практики создания индикаторов загрузки для разных ситуаций.
2. GNOME: Новый способ организации окон программ в операционной системе. Это «мозаика» — смесь плитки и свободного расположения.
3. Пошаговые методички по методам проектирования, дизайна и исследования интерфейсов от Университета Аризоны.
4. Léonie Watson и Rakesh Paladugula: Основные тезисы из дискуссии о поддержке accessibility. Получился отличный чеклист.
5. NN/g: Тренды в интранетах 2023 года. Недавно они анонсировали победителей своих ежегодных наград.
6. Hajira Atheeque: Подробно разбирает принципы пространственного дизайна в Apple Vision.
7. NN/g: Памятка по дизайну аккордеонов в интерфейсах. Когда они работают и когда мешают.
8. Hannah Milan: Разные способы наложения текста на изображение в вебе, которые хорошо поддерживают accessibility. Часть 2.
#patterns
1. Тарас Бакушевич: Удачные практики создания индикаторов загрузки для разных ситуаций.
2. GNOME: Новый способ организации окон программ в операционной системе. Это «мозаика» — смесь плитки и свободного расположения.
3. Пошаговые методички по методам проектирования, дизайна и исследования интерфейсов от Университета Аризоны.
4. Léonie Watson и Rakesh Paladugula: Основные тезисы из дискуссии о поддержке accessibility. Получился отличный чеклист.
5. NN/g: Тренды в интранетах 2023 года. Недавно они анонсировали победителей своих ежегодных наград.
6. Hajira Atheeque: Подробно разбирает принципы пространственного дизайна в Apple Vision.
7. NN/g: Памятка по дизайну аккордеонов в интерфейсах. Когда они работают и когда мешают.
8. Hannah Milan: Разные способы наложения текста на изображение в вебе, которые хорошо поддерживают accessibility. Часть 2.
#patterns
Medium
Loading & progress indicators — UI Components series
Engage users and enhance waiting experiences with these simple recommendations.
Новое про лучшие интерфейсные паттерны и практики:
1. Коллекция паттернов автомобильных интерфейсов. Разбито по сценариям использования и экранам, в бета-версии есть полтора десятка машин.
2. Creative Navy: Памятка по дизайну интерфейса мастеров настройки. Она грамотно структурирована и собирает хорошие примеры.
3. NN/g: Структурированная подборка своих статей о веб-интерфейсах.
4. Creative Navy: Обзор интерфейсов управления роботами.
5. Alyaa Al-Jasim и Pietro Murano: Юзабилити-тестирование разных вариантов тумблеров и переключателей состояний в интерфейсе. Они составили рекомендации по их проектированию.
6. NN/g: Упрощение интерфейсных текстов. Как убирать лишнее и упрощать подачу информации в целом.
7. Costa Alexoglou: Способы реализации «безопасного треугольника» для выпадающих меню. Это старый, но важный приём, который помогает пользователю легче попадать мышью в пункты таких меню.
8. Lawrence H. Williams: Неоднозначность оценки времени прохождения сценария использования. В примере его исследования видно, что где-то много проведённого времени говорит о проблеме, а где-то — наоборот, о качестве контента.
9. MeasuringU: Новое сравнительное исследование сайтов товаров для дома. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
1. Коллекция паттернов автомобильных интерфейсов. Разбито по сценариям использования и экранам, в бета-версии есть полтора десятка машин.
2. Creative Navy: Памятка по дизайну интерфейса мастеров настройки. Она грамотно структурирована и собирает хорошие примеры.
3. NN/g: Структурированная подборка своих статей о веб-интерфейсах.
4. Creative Navy: Обзор интерфейсов управления роботами.
5. Alyaa Al-Jasim и Pietro Murano: Юзабилити-тестирование разных вариантов тумблеров и переключателей состояний в интерфейсе. Они составили рекомендации по их проектированию.
6. NN/g: Упрощение интерфейсных текстов. Как убирать лишнее и упрощать подачу информации в целом.
7. Costa Alexoglou: Способы реализации «безопасного треугольника» для выпадающих меню. Это старый, но важный приём, который помогает пользователю легче попадать мышью в пункты таких меню.
8. Lawrence H. Williams: Неоднозначность оценки времени прохождения сценария использования. В примере его исследования видно, что где-то много проведённого времени говорит о проблеме, а где-то — наоборот, о качестве контента.
9. MeasuringU: Новое сравнительное исследование сайтов товаров для дома. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
Autointerfaces
Auto Interfaces
Auto Interfaces is the best collection of modern vehicle infotainment system designs, interactions and screens.
Не успевал упаковать весь свежак про свежие интерфейсные паттерны и лучшие практики, да как вдруг успел:
1. Casper Kessels: Отличная памятка по прототипированию автомобильных интерфейсов подручными средствами. Инструменты и способы быстрого вывода на устройство.
2. Scott Jenson: Шикарный детальный анализ проблем в клавиатурах на мобильных от легенды нашей профессии. Он также предлагает своё решение, которое представил на симпозиуме UIST.
3. Коллекция примеров интересных «подвалов» сайтов.
4. Dongkyu Lee: Как сделать анимацию переходов между экранами и их состояниями более логичной и симпатичной.
5. Swiggy: Редизайн процесса встречи нового пользователя в приложении. Как упрощали его и вовлекали людей.
6. NN/g: Структурированная подборка своих статей об accessibility и инклюзивности.
7. Аида Пачева: Подход к адаптивности в вебе. Она ориентируется на современные подходы вроде component queries, а не жёсткие breakpoints для всего макета.
8. Creative Navy: Интерфейсы производственных линий по сборке автомобилей.
9. Slack: Рассказ о недавнем крупном редизайне интерфейса. Результат неоднозначный, но интересно посмотреть на ход процесса. Отдельные статьи про мобильную версию и боковую панель.
10. NN/g: Оглавления в вебе и на мобильных.
11. Growth Design: Эффект «фрейминга» в интерфейсах. Как правильно подавать варианты выбора и рекомендации.
12. Peter Ramsey: Процесс оформления подписки на сервис доставки готовой еды Hello Fresh.
13. Creative Navy: Интерфейсы медицинских приборов для диализа.
14. Jason Grigsby: Просит не использовать «ленивую загрузку» для абсолютно всей графики — это ломает саму идею и пользовательский опыт.
15. Ксения Толокнова: Разница между action sheets, диалогами и панелями для уведомлений в мобильных приложениях. Когда и для чего их использовать.
16. MeasuringU: Сравнительное исследование сайтов краски для дома. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
1. Casper Kessels: Отличная памятка по прототипированию автомобильных интерфейсов подручными средствами. Инструменты и способы быстрого вывода на устройство.
2. Scott Jenson: Шикарный детальный анализ проблем в клавиатурах на мобильных от легенды нашей профессии. Он также предлагает своё решение, которое представил на симпозиуме UIST.
3. Коллекция примеров интересных «подвалов» сайтов.
4. Dongkyu Lee: Как сделать анимацию переходов между экранами и их состояниями более логичной и симпатичной.
5. Swiggy: Редизайн процесса встречи нового пользователя в приложении. Как упрощали его и вовлекали людей.
6. NN/g: Структурированная подборка своих статей об accessibility и инклюзивности.
7. Аида Пачева: Подход к адаптивности в вебе. Она ориентируется на современные подходы вроде component queries, а не жёсткие breakpoints для всего макета.
8. Creative Navy: Интерфейсы производственных линий по сборке автомобилей.
9. Slack: Рассказ о недавнем крупном редизайне интерфейса. Результат неоднозначный, но интересно посмотреть на ход процесса. Отдельные статьи про мобильную версию и боковую панель.
10. NN/g: Оглавления в вебе и на мобильных.
11. Growth Design: Эффект «фрейминга» в интерфейсах. Как правильно подавать варианты выбора и рекомендации.
12. Peter Ramsey: Процесс оформления подписки на сервис доставки готовой еды Hello Fresh.
13. Creative Navy: Интерфейсы медицинских приборов для диализа.
14. Jason Grigsby: Просит не использовать «ленивую загрузку» для абсолютно всей графики — это ломает саму идею и пользовательский опыт.
15. Ксения Толокнова: Разница между action sheets, диалогами и панелями для уведомлений в мобильных приложениях. Когда и для чего их использовать.
16. MeasuringU: Сравнительное исследование сайтов краски для дома. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
На редкость длинная пауза вышла с мини-выпусками про свежие интерфейсные паттерны и лучшие практики. Обнуляю её:
1. Baymard: Как выводы из их многочисленных пользовательских исследований сайтов и приложений электронной коммерции во многом пересекаются. Это в целом и так понятно, но он приводит конкретные доли таких пересечений.
2. NN/g: Годное дневниковое исследование паттернов использования умных часов. Они выделили 6 основных задач и приводят нюансы работы пользователей по ним. В 80% случаев используют только встроенные приложения от производителя и не ставят дополнительные.
3. Pushkeen: Коллекция примеров push-уведомлений.
4. Storefront: Коллекция примеров главных страниц интернет-магазинов одежды.
5. Emailspiration: Коллекция примеров писем рассылки.
6. Индия запретила использование «тёмных паттернов» в интерфейсах. Jakob Nielsen разбирает 12 таких манипулятивных приёмов, которые упомянуты в этом законе.
7. Creative Navy: Подробный обзор интерфейсов сервисов для нанимающих менеджеров.
8. Alaïs de Saint Louvent: Сайт-памятка по поддержке accessibility.
9. Baymard: Типичные проблемы интерфейса проверки адреса в интернет-магазинах.
10. Peter Ramsey: Разбирает парадоксальный сайт Zara. Это богатейшая компания с огромным оборотом, интернет-магазин которой — полнейшая катастрофа.
11. MeasuringU: Новое сравнительное исследование сайтов краски для дома. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
1. Baymard: Как выводы из их многочисленных пользовательских исследований сайтов и приложений электронной коммерции во многом пересекаются. Это в целом и так понятно, но он приводит конкретные доли таких пересечений.
2. NN/g: Годное дневниковое исследование паттернов использования умных часов. Они выделили 6 основных задач и приводят нюансы работы пользователей по ним. В 80% случаев используют только встроенные приложения от производителя и не ставят дополнительные.
3. Pushkeen: Коллекция примеров push-уведомлений.
4. Storefront: Коллекция примеров главных страниц интернет-магазинов одежды.
5. Emailspiration: Коллекция примеров писем рассылки.
6. Индия запретила использование «тёмных паттернов» в интерфейсах. Jakob Nielsen разбирает 12 таких манипулятивных приёмов, которые упомянуты в этом законе.
7. Creative Navy: Подробный обзор интерфейсов сервисов для нанимающих менеджеров.
8. Alaïs de Saint Louvent: Сайт-памятка по поддержке accessibility.
9. Baymard: Типичные проблемы интерфейса проверки адреса в интернет-магазинах.
10. Peter Ramsey: Разбирает парадоксальный сайт Zara. Это богатейшая компания с огромным оборотом, интернет-магазин которой — полнейшая катастрофа.
11. MeasuringU: Новое сравнительное исследование сайтов краски для дома. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
Baymard Institute
Generalizability of UX E-Commerce Research – Articles – Baymard Institute
Our 10+ years of UX research show that UI-related issues are highly generalizable across industries and platforms: 76% of UX issues are shared between desktop and mobile web, and 74+% across industries selling physical products.
Первый в этом году выпуск мини-дайджеста о лучших интерфейсных паттернах и практиках:
Ahmad Shadeed: Кажется, появилась лучшая в истории статья про комфортный размер интерактивных элементов в сенсорных интерфейсах. Он разобрал со всех сторон дизайн и реализацию в коде — тему можно считать закрытой надолго.
2. Casper Kessels: Принципы проектирования автомобильных интерфейсов.
3. UXDA: Концепт банковского интерфейса для Apple Vision Pro.
4. Maggie Appleton: Хороший интерфейс истории перемещений в браузерах и других продуктах. Она предлагает свой концепт в духе веток Git.
5. Bjango: Проанализировали интерфейс управления объектом и размытия в популярных графических редакторах.
6. Amelia Wattenberger: Как грамотно проектировать поведение контента в вебе, который представлен в виде бесконечной канвы а-ля FigJam или Miro.
7. Growth Design: Проанализировали итоги года Spotify Wrapped 2024 на предмет механик вовлечения пользователей.
8. Peter Ramsey: Сравнил работу нескольких сервисов доставки в Великобритании. Он отправил 6 одинаковых посылок с каждым из них и сравнил интерфейс и пользовательский опыт в целом.
9. Maggie Appleton: Способы показать в интерфейсе, что несколько пользователей работают с ним прямо сейчас или взаимодействовали какое-то время назад.
10. Creative Navy: Изучили сайты нескольких юридических компаний. Что пользователи ждут от них и как они это отрабатывают.
11. Christina Gilbert: Советы по дизайну интерфейса импорта из CSV-файла.
#patterns
Ahmad Shadeed: Кажется, появилась лучшая в истории статья про комфортный размер интерактивных элементов в сенсорных интерфейсах. Он разобрал со всех сторон дизайн и реализацию в коде — тему можно считать закрытой надолго.
2. Casper Kessels: Принципы проектирования автомобильных интерфейсов.
3. UXDA: Концепт банковского интерфейса для Apple Vision Pro.
4. Maggie Appleton: Хороший интерфейс истории перемещений в браузерах и других продуктах. Она предлагает свой концепт в духе веток Git.
5. Bjango: Проанализировали интерфейс управления объектом и размытия в популярных графических редакторах.
6. Amelia Wattenberger: Как грамотно проектировать поведение контента в вебе, который представлен в виде бесконечной канвы а-ля FigJam или Miro.
7. Growth Design: Проанализировали итоги года Spotify Wrapped 2024 на предмет механик вовлечения пользователей.
8. Peter Ramsey: Сравнил работу нескольких сервисов доставки в Великобритании. Он отправил 6 одинаковых посылок с каждым из них и сравнил интерфейс и пользовательский опыт в целом.
9. Maggie Appleton: Способы показать в интерфейсе, что несколько пользователей работают с ним прямо сейчас или взаимодействовали какое-то время назад.
10. Creative Navy: Изучили сайты нескольких юридических компаний. Что пользователи ждут от них и как они это отрабатывают.
11. Christina Gilbert: Советы по дизайну интерфейса импорта из CSV-файла.
#patterns
Ishadeed
Designing better target sizes
An interactive guide on designing better target sizes on the web.
Счастливые часы для интерфейсных паттернов и лучших практик: количество ссылок удваивается:
1. Casper Kessels: Логика проектирования автомобильных интерфейсов. Он сделал небольшой концепт, где показал принципы принятия решений.
2. NN/g: Лучшие практики использования QR-кодов. Как показывать их, какие аннотации давать, куда вести.
3. Alexander Obenauer: Концепт OLLOS, который помогает представить заметки, письма, задачи и другие кусочки повседневной информации в связанной хронологии.
4. NN/g: Обновили свою топчанскую памятку по дизайну интерфейса сравнительных таблиц.
5. Google: Лучшие практики поддержки accessibility в интерфейсах с инфографикой и визуализацией данных.
6. NN/g: Три интерфейсных паттерна для отображения статуса системы: индикаторы, валидация и уведомления.
7. НЛМК: Особенности дизайна профессиональных интерфейсов для производств.
8. Baymard: Проблема валидации полей формы оформления заказа — по закону нельзя даже временно хранить данные карты, так что они пропадают после перезагрузки страницы. И предлагает несколько подходов к реорганизации интерфейса.
7. Paul Sonnentag, Alexander Obenauer и Geoffrey Litt: Концепт интерактивных составных документов Embark.
8. NN/g: Пробуют применить классические эвристики Нильсена к настолкам. Он показывает, какие принципы работают и где их можно нарушать.
9. Николай Тонский: Чекбоксы всё чаще делают круглыми, так что теряется их изначальная задумка — отличие от радиокнопок.
10. Creative Navy: Проанализировало сайты химических концернов. Они составили рекомендации по интерфейсу.
11. MeasuringU: Новое сравнительное исследование сайтов по продаже мебели. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
1. Casper Kessels: Логика проектирования автомобильных интерфейсов. Он сделал небольшой концепт, где показал принципы принятия решений.
2. NN/g: Лучшие практики использования QR-кодов. Как показывать их, какие аннотации давать, куда вести.
3. Alexander Obenauer: Концепт OLLOS, который помогает представить заметки, письма, задачи и другие кусочки повседневной информации в связанной хронологии.
4. NN/g: Обновили свою топчанскую памятку по дизайну интерфейса сравнительных таблиц.
5. Google: Лучшие практики поддержки accessibility в интерфейсах с инфографикой и визуализацией данных.
6. NN/g: Три интерфейсных паттерна для отображения статуса системы: индикаторы, валидация и уведомления.
7. НЛМК: Особенности дизайна профессиональных интерфейсов для производств.
8. Baymard: Проблема валидации полей формы оформления заказа — по закону нельзя даже временно хранить данные карты, так что они пропадают после перезагрузки страницы. И предлагает несколько подходов к реорганизации интерфейса.
7. Paul Sonnentag, Alexander Obenauer и Geoffrey Litt: Концепт интерактивных составных документов Embark.
8. NN/g: Пробуют применить классические эвристики Нильсена к настолкам. Он показывает, какие принципы работают и где их можно нарушать.
9. Николай Тонский: Чекбоксы всё чаще делают круглыми, так что теряется их изначальная задумка — отличие от радиокнопок.
10. Creative Navy: Проанализировало сайты химических концернов. Они составили рекомендации по интерфейсу.
11. MeasuringU: Новое сравнительное исследование сайтов по продаже мебели. Как пользователи оценивают их по метрикам SUPR-Q, NPS и UX-Lite.
#patterns
Непонятно, как за неделю собралось ещё столько свежего про интерфейсные паттерны и лучшие практики. Но времени объяснять нет, так что читайте:
1. Michael Molen: Примеры настольных игр, которые работают вместе с приложением-компаньоном. Или наоборот — цифровых игр, которые сделали настолки-дополнения. Как строится взаимодействие между ними.
2. Kate Kalcevich: Обзор способов работы пользователей с ограниченными возможностями с приложениями Android и iOS.
3. Jon Yablonski: Закон Теслера в дизайне. Он о минимальной сложности конкретного интерфейса, ниже которой его не упростить.
4. Ксения Толокнова и Марина Сапожникова: Поиск на мобильных.
5. Коллекция минималистичных сайтов.
6. Georgie Cooke: Как сделать заглушку аватара с инициалами пользователя, если у него нет своего изображения. По факту всё не так тривиально.
7. Creative Navy: Сайты производителей медицинских устройств. Они выделили лучшие практики.
#patterns
1. Michael Molen: Примеры настольных игр, которые работают вместе с приложением-компаньоном. Или наоборот — цифровых игр, которые сделали настолки-дополнения. Как строится взаимодействие между ними.
2. Kate Kalcevich: Обзор способов работы пользователей с ограниченными возможностями с приложениями Android и iOS.
3. Jon Yablonski: Закон Теслера в дизайне. Он о минимальной сложности конкретного интерфейса, ниже которой его не упростить.
4. Ксения Толокнова и Марина Сапожникова: Поиск на мобильных.
5. Коллекция минималистичных сайтов.
6. Georgie Cooke: Как сделать заглушку аватара с инициалами пользователя, если у него нет своего изображения. По факту всё не так тривиально.
7. Creative Navy: Сайты производителей медицинских устройств. Они выделили лучшие практики.
#patterns
Medium
Board game UX: Including technology
Many board games have started to include apps and other technologies over recent years. How has this been done? What can we learn from it?
И снова прорва свежих ссылок об интерфейсных паттернах и лучших практиках:
1. Creative Navy: Браузерные расширения. Популярные подходы и их особенности.
2. Brad Woods: Концепция «сока» в играх, которую можно применить для внедрения эмоционального дизайна в интерфейсах.
3. Коллекция примеров страниц ошибки 404.
4. Коллекция примеров интересных интерфейсных решений, во многом на базе анимации.
5. Welcome to the Jungle: Проектирование и тестирование навигации.
6. NN/g: Главные страницы сайта. Правда, с поправкой на то, что у многих сайтов пользователи в основном попадают на конкретную страницу из поиска или соцсетей, минуя главную.
7. Luke Wroblewski: Проблемный интерфейсный паттерн «пинбол», когда глазу приходится сканировать последовательность элементов на экране в хаотичном порядке.
8. Brian Merrell: Переосмысление панели настроек анимации в After Effects. Визуализация с помощью метафоры автобусного маршрута помогла упростить работу.
9. Baymard Institute: Как спроектировать правильный фильтр по размерам одежды и обуви в интернет-магазинах.
10. Creative Navy: Проанализировали сайты производителей промышленного оборудования.
11. Arun Venkatesan: Толковая навигация по содержанию статьи в своём блоге.
#patterns
1. Creative Navy: Браузерные расширения. Популярные подходы и их особенности.
2. Brad Woods: Концепция «сока» в играх, которую можно применить для внедрения эмоционального дизайна в интерфейсах.
3. Коллекция примеров страниц ошибки 404.
4. Коллекция примеров интересных интерфейсных решений, во многом на базе анимации.
5. Welcome to the Jungle: Проектирование и тестирование навигации.
6. NN/g: Главные страницы сайта. Правда, с поправкой на то, что у многих сайтов пользователи в основном попадают на конкретную страницу из поиска или соцсетей, минуя главную.
7. Luke Wroblewski: Проблемный интерфейсный паттерн «пинбол», когда глазу приходится сканировать последовательность элементов на экране в хаотичном порядке.
8. Brian Merrell: Переосмысление панели настроек анимации в After Effects. Визуализация с помощью метафоры автобусного маршрута помогла упростить работу.
9. Baymard Institute: Как спроектировать правильный фильтр по размерам одежды и обуви в интернет-магазинах.
10. Creative Navy: Проанализировали сайты производителей промышленного оборудования.
11. Arun Venkatesan: Толковая навигация по содержанию статьи в своём блоге.
#patterns
Medium
The Ultimate Guide to Browser Extensions Design
Discover the best UX design practices from our in-depth research.
Что сегодня собралось в мини-подборке по лучшим интерфейсным паттернам и практикам:
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.
Сегодня в программе мини-подборки — лучшие интерфейсные паттерны и практики:
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.
Попробую более компактные выпуски в ближайшие недели. Начнём со лучших интерфейсных паттернов и практик:
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…