Нора референсов

42. Фиксация соотношения сторон

Прекрасная фича Фигмы, которую не все замечали!

При закреплении, инпуты ширины и длины соприкасаются и «связываются» между собой, создавая стойкую метафору

Прекрасный пример, как микро-анимации могут оживить продукт и придать ему динамику 🙂


💜Источник: ссылка

#анимации
@references_burrow

41. Бенто-карточки

Все чаще вижу карточки с точечным паттерном. И мне нравится этот тренд, ведь такой фон помогает минималистичным иллюстрациям не теряться в пустом пространстве.

В этом примере автор делает карточки еще красивее и объемнее, как будто наводя на них софиты:
— подсвечивает паттерн и верхнюю часть бордера
— добавляет почти незаметные, мерцающие белые точки
— использует «светящиеся изнутри» иллюстрации

💜Источник: ссылка

#карточка
@references_burrow

40. Голосовой ввод в Grok

Мы привыкли, что при записи голосового сообщения появляется отдельный компонент с визуализацией звука либо само поле ввода меняется, добавляя таймер

В Grok решили сделать лучше: они просто подсветили поле градиентом — и красиво, и понятно, без лишнего визуального шума

Если и есть, что добавить, то это секундомер — он уже стал стандартным паттерном, наглядно подтверждающим, что идёт запись

💜Источник: ссылка

#анимации
@references_burrow

39. Настройка скринсейвера

Я хочу отметить три вещи:
— Часы отлично читаются на кастомном анимированном фоне благодаря стеклянной подложке, которая делает их более обособленными
— Затемнение основного экрана во время настройки эффективно фокусирует пользователя на основных действиях — выборе фона и просмотре превью
— Анимация делает этот процесс приятным и бесшовным ❤️

💜Источник: ссылка

#анимации #карточка
@references_burrow

38. Карточки интеграции

Они выделются за счет лакончиных и аккуратных графических деталей:
— Лого сервисов расположены на едва заметной светлой подложке, которая дает глубину и четкость решению
— Баннер каждой карточки повторяет форму лого в абстрактном пиксельном виде и имеет светлую обводку, которая отделяет его от основной части карточки.

Честно говоря, этот дизайн меня покорил. Очень минималистичное, необычное и стильное решение

🩷Источник: ссылка

#карточка
@references_burrow

37. Интро в ИИ

Отличный пример онбординга, где Notion ненавязчиво показывают примеры использования их нейронки 🤖

Классно, что вместо абстрактных обещаний «ИИ может все», пользователь получает реальные и практичные кейсы, которые можно сразу попробовать самим.

И также обращу внимание на анимацию: скролл позволяет до бесконечности увеличивать количество юз-кейсов. Выглядит живо и здорово!

Таким образом:
1. Notion AI успешно промоутируется
2. Конверсия в использование продукта повышается

Профит!🌟

🩷Источник: ссылка

#анимации #ИИ #онбординг
@references_burrow

36. Карта реализации историй

Наткнулась на прекрасную статью, в которой Андрей Шапиро предлагает новый инструмент «Карта реализации историй» как развитие уже известного User Story Mapping (USM).

Главные тезисы:
— Проблема традиционного USM — истории являются слишком наводящими на одно конкретное решение, которое оказывается неверным из-за слабой связи с реальной проблемой пользователя
— Карта реализации историй — матричная система, где по горизонтали располагаются последовательные истории, а по вертикали смысловые слои, описывающие переход от бизнес-ценности к решению

Краткая структура схемы приложена к посту.

⚡️Основной смысл в том, что каждый столбец в отдельности собирает одну историю. Истории намеренно разбиты на категории-слои. Заполняя каждый слой в отдельности, мы наполняем шаблон

🩷Почитать подробнее: ссылка

#статья
@references_burrow

35. «Марка» качества

Прекрасный пример скевоморфизма. Airbnb использует анимацию восковой печати, чтобы отметить «качественных» арендодателей.

Этот прием создает ассоциацию с качеством и надежностью продуктов из реального мира, что помогает пользователям больше доверять таким предложениям

🩷Источник: ссылка

#скевоморфизм #анимации
@references_burrow

34. Графики для дашбордов

Выглядят очень чисто и аккуратно. Эти виджеты будут круто гармонировать, если из них собрать интерфейс для продажника.

Особенно понравились:
— лидер-борд с пьедесталом, который визуализирует успехи сотрудников, тем самым мотивируя их продавать больше
— график воронки, который наглядно показывает этапы проведения сделки и успешность по ним. Иногда кажется, что этот тип графика незаслуженно мало используется в интерфейсах

А какой виджет понравился вам больше всего?🌼

🩷Источник: ссылка

#графики
@references_burrow

33. Анимация изображений

При ховере на карточу, вложенные изображения раскрываются, создавая ощущения просмотра альбома!
До чего же красивый эффект, который позволяет увидеть краткое содержимое, не переходя в детали

💜 Источник: ссылка

#анимации #карточка
@references_burrow

32. 60fps

Пополняемая коллекция концептов и анимаций. Можно подсмотреть интересные взаимодействия

#коллекция

31. UX-бенчмаркинг

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

Оля Ходаковская из Selectel поделилась, как метрика Task Success Rate может помочь замерить насколько успешно пользователи справляются с той или иной задачей.

Главные тезисы:
— Продуктовые метрики не позволяют объективно оценить влияние дизайна
— UX-бенчмаркинг позволяет увидеть и понять, как пользователи работают с разными задачами.
— Успешность метрики оценивается относительно базового уровня. Это могут быть средние значения, показатели конкурентов или первый замер
— UX-бенчмаркинг — одна из возможностей для дизайнера взять на себя больше ответственности, потому что можно аргументировать дизайн-решения метриками

💜Статья

#статья

30. Автофокус на первый вариант

В Skype при вызове контекстного меню, интерфейс автоматически фокусится на первый вариант, так как он самый ожидаемый.

Тема классная, но достаточно неожиданная, потребует привыкания, но зато в будущем сэкономит клики и время на перемещение курсора 🏃‍♂️

Подсмотрела в канале у Никиты Семенова: ссылка

#дропдаун

29. Замена попапу

Нравится эта механика тем, что:
- в отличие от попапа, такой дропдаун не вырывает пользователя из сценария. Благодаря этому процесс получается более плавным и бесшовным
- не плодим модальность, тем самым снижаем когнитивную нагрузку пользователя

Также удобно, что дропдаун может включать в себя многошаговые сценарии — это позволяет, при грамотном подходе, масштабировать его использование

⭐️Источник: ссылка

#дропдаун

28. Руководство пользователя с перелистываемыми страничками

Недавно начала погружаться в тему скевоморфизма — устаревшей тенденции в дизайне, которая имитирует объекты из физического мира в интерфейсах.
И заметила то, на что раньше совсем не обращала внимание — практически все в iOS построено на этом стиле: кнопки, камера, заметки и другие встроенные приложения повторяют логику работы предметов из реального мира.
Частично благодаря этому интерфейс становится понятным и очевидным, ведь мы все уже этим пользовались

Прекрасный пример использования скевоморфизма — руководство пользователя в Halide. Ребята даже переиспользовали шрифт, который использовался бы в печатной версии. Получаем полное погружение, так сказать 🧞‍♀️

💜Источник: ссылка

#скевоморфизм

27. Быстрое удаление

Мне одновременно очень нравится и не нравится, насколько плавным стал этот флоу 🤔

С одной стороны, дабл-клик может стать отличной заменой подтверждающего попапа — он не выдирает пользователя из сценария, делая его бесшовным.
Но с другой стороны, для важных, необратимых удалений такая механика точно не подходит.

Поэтому такое взаимодействие можно классно адаптировать для других действий, но в случае удаления его стоит применять с осторожностью

💜Источник: ссылка

#анимации #удаление #дропдаун

26. Флоу верификации возраста

До чего же плавная и приятная анимация! Она классно имитирует процесс сканирования документа и мягко переводит пользователя между этапами процесса

💜Источник: ссылка

#анимации