DevNotes Live
6 subscribers
84.2K photos
12K videos
195 files
35.4K links
Автоматический агрегатор IT ресурсов в Telegram (@devnotes_robot)
Информация: https://t.me/devnotes_live/121
Download Telegram
Что сегодня собралось в мини-подборке по лучшим интерфейсным паттернам и практикам:
 
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. 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. Ирина Сильянова: Хорошая памятка по написанию интерфейсных текстов. Здорово, что они находятся на стыке дизайна (как использовать текст в контексте экрана) и редактуры (как правильно писать).

2. NN/g: Советуют больше времени тратить на убирание барьеров и «засоров» в интерфейсе, чем на подталкивание пользователя к правильному решению. Оба направления работы важны, но отдача от первого быстрее и понятнее.

3. Baymard: В интернет-магазинах одежды большинство пользователей пользуется навигацией по категориям, а не поиском. Iva Olah рассказывает, почему это так и почему частые поисковые запросы здесь — симптом проблем.

4. Baymard: Советуют добавлять визуальное представление фильтров для сложных категорий товаров в интернет-магазинах.

5. Chiara Santella: Как менялась концепция будильника — от улучшения функциональности в самостоятельных устройствах до переосмысления самой концепции в эпоху мобильных приложений.
 
#patterns
Немного лучших интерфейсных паттернов и практик в начале недели:
 
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
Овердофига свежих ссылок о лучших интерфейсных паттернах и практиках:
 
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. 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. 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. 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. NN/g: Принципы дизайна форм: структура, прозрачность, ясность и поддержка. Это пошаговая памятка, которая поможет разложить общую структуру и конкретные поля.

2. Гайдлайны accessibility WCAG, переписанные простым языком.

3. Creative Navy: Изучили информационную архитектуру в интерфейсах медицинского оборудования.
А ещё — как такие интерфейсы помогают пользователям разобраться в них.
 
4. Tom Barrasso: Как оптимизировать мобильные сайты для кнопочных телефонов. Их намного меньше смартфонов, но всё равно заметное количество.
 
5. NN/g: Ещё раз про то, почему важно сохранять место на странице, куда докрутил пользователь, если он возвращается назад. И приводит несколько ситуаций-исключений, где это не нужно.
 
6. Виталий Фридман: Памятка из полезных ссылок на тему адаптации мобильных интерфейсов для левшей.

7. A11Y Collective: Как учитывать accessibility при создании инфографики.
 
#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
Ещё немного свежих интерфейсных паттернов и лучших практик:
 
1. UX Ray 2.0: Baymard обновили свой инструмент автоматического анализа интерфейса сайта. Теперь он не только выдаёт рекомендации по улучшению, но и делает ранжированный по приоритетам план улучшений. И поможет сравниться с другими сайтами.
 
2. Milan Balać: Интерфейсные паттерны современных телевизоров. Как устроена навигация, представление информации и ввод информации на них.
 
3. Linear: Как они держат баланс анимации в интерфейсе. Так, чтобы она добавляла характера, но не отвлекала.
 
4. NN/g: Лучшие практики для интерфейсов мобильных приложений, которые управляют умными устройствами. Во второй статье разбирают процесс их настройки через приложение.

5. Markswebb: Хорошие интерфейсные паттерны, которые помогают покупателю сделать более правильный выбор. А значит — снизить возвраты, ведь ошибки при выборе являются одной из их главных причин.
 
6. Adobe Illustrator: Как команда раобтала над дизайном интерфейса быстрого пера.
 
7. Karan Rawal: Делится своим опытом дизайна интерфейсов информационных панелей, показывающих информацию в реальном времени.
 
#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
This media is not supported in your browser
VIEW IN TELEGRAM
50 уникальных паттернов.

• 50 автоматически сгенерированных бесшовных паттернов
• Создано с помощью Figma-плагина Snapatterns
• Идеально для фонов, соцсетей и акцентных элементов

#patterns #seamless #backgrounds #generative #resources

Открыть в Figma
Неразобранные с прошлого года свежие ссылки про лучшие интерфейсные паттерны и практики, пока руки и глаза не дошли до самого новья:
 
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
Пачка свежего уже точно из 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. Baymard Institute: Плагин для Figma на основе своего ИИ-анализатора интерфейсов UX-Ray. Он сопоставляет ваш макет с паттернами и лучшими практиками из их гигантской базы знаний.
 
2. Lazyweb: Сервис помогает быстро анализировать экраны и сценарии мобильных приложений в нужной отрасли. Это связка классической коллекции паттернов и гибкого ИИ-поиска по ней.
 
3. Victor Ayomipo: Памятка по психологии и дизайну интерфейса мотивационной системы streaks для пользователей.
 
4. NN/g: Памятка о проектировании полезных уведомлений для устройств умного дома. Они могут быть реактивными, проактивными и оптимизационными.
 
5. NN/g: Несколько простых интерфейсных паттернов в ИИ-чат-ботах, которые помогают пользователям общаться с ними. Это чекбоксы и варианты выбора из списка в Google и Claude — вроде бы банальные, но очень уместные в контексте задачи.
 
#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
Чуток свежих интерфейсных паттернов и лучших практик:
 
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. Magic Pointer: Новая интерфейсная концепция, заточенная под ИИ. Это специальный режим курсора, который позволяет объяснять, ремикшировать и в целом широко взаимодействовать с элементами на экране.
 
2. WebAIM: Проверили миллион главных страниц сайтов в интернете на поддержку accessibility. Они подсветили основные проблемы по итогу.
 
3. IBM: Толковые публикации о концепции Explainable AI. И выделили несколько ключевых тезисов из них.
 
4. NN/g: Шпаргалка по работе с текстами в интерфейсах на основе мнений экспертов. Это обзор по ключевым темам: Простота, тональность, жаргонизмы, структура, SEO и согласования.
 
5. David Mello: Автоматизированные инструменты проверки accessibility пропускают до 60-70% проблем. Как исправить это.
 
6. NN/g: Исследование поискового поведения китайских пользователей. Почему сильно упала доля классического поисковика Baidu и как они балансируют между ИИ-чат-ботами и привычным поиском.
 
#patterns
This media is not supported in your browser
VIEW IN TELEGRAM
50 уникальных паттернов.

• 50 автоматически сгенерированных бесшовных паттернов
• Создано с помощью Figma-плагина Snapatterns
• Идеально для фонов, соцсетей и акцентных элементов

#patterns #seamless #backgrounds #generative #resources

Открыть в Figma