22. Виджеты с подсчетом метрик.
Нравятся:
- Воздушная структура карточки и верный акцент на числе
- Ровная верстка без ступенек
- Отображение дохода за предыдущие месяцы в виджете продаж
Единственное, что вызывает вопросы — цветовое решение графика конверсий: желтый цвет ассоциируется с опасностью, хотя в данном случае обозначает количество продаж.
#карточка #графики
Нравятся:
- Воздушная структура карточки и верный акцент на числе
- Ровная верстка без ступенек
- Отображение дохода за предыдущие месяцы в виджете продаж
Единственное, что вызывает вопросы — цветовое решение графика конверсий: желтый цвет ассоциируется с опасностью, хотя в данном случае обозначает количество продаж.
#карточка #графики
❤5
23. Графики с метриками.
Нравятся:
- Горизонтальный график с воронкой конверсий — экономит вертикального пространства и упрощает сравнение значений
- UI графика популярных дней — яркая синяя полоска отображает значение переходов, а мягкий градиент создает связь с соответствующим днем
Вот только не знаю, насколько эти 2 виджета сочетаются между собой, ведь их стилистика сильно отличается 🤔
#карточка #графики
Нравятся:
- Горизонтальный график с воронкой конверсий — экономит вертикального пространства и упрощает сравнение значений
- UI графика популярных дней — яркая синяя полоска отображает значение переходов, а мягкий градиент создает связь с соответствующим днем
Вот только не знаю, насколько эти 2 виджета сочетаются между собой, ведь их стилистика сильно отличается 🤔
#карточка #графики
👍2
24. Настройка внешнего вида вложений
Наверное, впервые вижу хороший пример использования кастомного неоднотонного фона, который не идет в конфликт с интерфейсом🙂
Нравятся округлые формы, вдохновленные MacOS, и стекляный эффект.
Этот продукт называется Shuttle, можно подглядеть за ними в Nicely done
#карточка #настройки
Наверное, впервые вижу хороший пример использования кастомного неоднотонного фона, который не идет в конфликт с интерфейсом
Нравятся округлые формы, вдохновленные MacOS, и стекляный эффект.
Этот продукт называется Shuttle, можно подглядеть за ними в Nicely done
#карточка #настройки
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2👍1
25. Календарь в Acme
Хочу отметить:
– Верхний бар с предстоящими встречами — потенциально удобная штука для планирования дня и быстрого доступа к созвонам. Однако смущает её расположение, ведь основное внимание пользователя сосредоточено на центре экрана.
– Поиск по встречам — супер-фича, которой так не хватает в Outlook😢
⭐️ Источник: ссылка
#карточка #календарь
Хочу отметить:
– Верхний бар с предстоящими встречами — потенциально удобная штука для планирования дня и быстрого доступа к созвонам. Однако смущает её расположение, ведь основное внимание пользователя сосредоточено на центре экрана.
– Поиск по встречам — супер-фича, которой так не хватает в Outlook
#карточка #календарь
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3
делюсь своей первой статьей в наш тг-канал ❤️
пишите в комментариев свое мнение! буду рада!
пишите в комментариев свое мнение! буду рада!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
Forwarded from #ФФДД2Д
Эффективная работа в Figma
Привет! На связи Настя, продуктовых дизайнер внутренних сервисов🌻
Продуктовый дизайнер — это одна из ключевых ролей в команде, к которому предъявляются большие требования. Ведь он должен не только создавать удобные и эстетичные продукты, но делать это быстро и качественно. Однако постоянная работа «руками» может сильно влиять на итоговый лидтайм фичи и самочувствие самого дизайнера.
В этой статье поделюсь лайфхаками, которые помогают мне быть более продуктивной в ежедневной работе.
Прочитать →
Привет! На связи Настя, продуктовых дизайнер внутренних сервисов🌻
Продуктовый дизайнер — это одна из ключевых ролей в команде, к которому предъявляются большие требования. Ведь он должен не только создавать удобные и эстетичные продукты, но делать это быстро и качественно. Однако постоянная работа «руками» может сильно влиять на итоговый лидтайм фичи и самочувствие самого дизайнера.
В этой статье поделюсь лайфхаками, которые помогают мне быть более продуктивной в ежедневной работе.
Прочитать →
🔥4👍1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
This media is not supported in your browser
VIEW IN TELEGRAM
27. Быстрое удаление
Мне одновременно очень нравится и не нравится, насколько плавным стал этот флоу🤔
С одной стороны, дабл-клик может стать отличной заменой подтверждающего попапа — он не выдирает пользователя из сценария, делая его бесшовным.
Но с другой стороны, для важных, необратимых удалений такая механика точно не подходит.
Поэтому такое взаимодействие можно классно адаптировать для других действий, но в случае удаления его стоит применять с осторожностью
💜 Источник: ссылка
#анимации #удаление #дропдаун
Мне одновременно очень нравится и не нравится, насколько плавным стал этот флоу
С одной стороны, дабл-клик может стать отличной заменой подтверждающего попапа — он не выдирает пользователя из сценария, делая его бесшовным.
Но с другой стороны, для важных, необратимых удалений такая механика точно не подходит.
Поэтому такое взаимодействие можно классно адаптировать для других действий, но в случае удаления его стоит применять с осторожностью
#анимации #удаление #дропдаун
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
28. Руководство пользователя с перелистываемыми страничками
Недавно начала погружаться в тему скевоморфизма —устаревшей тенденции в дизайне, которая имитирует объекты из физического мира в интерфейсах.
И заметила то, на что раньше совсем не обращала внимание — практически все в iOS построено на этом стиле: кнопки, камера, заметки и другие встроенные приложения повторяют логику работы предметов из реального мира.
Частично благодаря этому интерфейс становится понятным и очевидным, ведь мы все уже этим пользовались
Прекрасный пример использования скевоморфизма — руководство пользователя в Halide. Ребята даже переиспользовали шрифт, который использовался бы в печатной версии. Получаем полное погружение, так сказать🧞♀️
💜 Источник: ссылка
#скевоморфизм
Недавно начала погружаться в тему скевоморфизма —
И заметила то, на что раньше совсем не обращала внимание — практически все в iOS построено на этом стиле: кнопки, камера, заметки и другие встроенные приложения повторяют логику работы предметов из реального мира.
Частично благодаря этому интерфейс становится понятным и очевидным, ведь мы все уже этим пользовались
Прекрасный пример использования скевоморфизма — руководство пользователя в Halide. Ребята даже переиспользовали шрифт, который использовался бы в печатной версии. Получаем полное погружение, так сказать
#скевоморфизм
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
29. Замена попапу
Нравится эта механика тем, что:
- в отличие от попапа, такой дропдаун не вырывает пользователя из сценария. Благодаря этому процесс получается более плавным и бесшовным
- не плодим модальность, тем самым снижаем когнитивную нагрузку пользователя
Также удобно, что дропдаун может включать в себя многошаговые сценарии — это позволяет, при грамотном подходе, масштабировать его использование
⭐️ Источник: ссылка
#дропдаун
Нравится эта механика тем, что:
- в отличие от попапа, такой дропдаун не вырывает пользователя из сценария. Благодаря этому процесс получается более плавным и бесшовным
- не плодим модальность, тем самым снижаем когнитивную нагрузку пользователя
Также удобно, что дропдаун может включать в себя многошаговые сценарии — это позволяет, при грамотном подходе, масштабировать его использование
#дропдаун
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍1
This media is not supported in your browser
VIEW IN TELEGRAM
30. Автофокус на первый вариант
В Skype при вызове контекстного меню, интерфейс автоматически фокусится на первый вариант, так как он самый ожидаемый.
Тема классная, но достаточно неожиданная, потребует привыкания, но зато в будущем сэкономит клики и время на перемещение курсора🏃♂️
Подсмотрела в канале у Никиты Семенова: ссылка
#дропдаун
В Skype при вызове контекстного меню, интерфейс автоматически фокусится на первый вариант, так как он самый ожидаемый.
Тема классная, но достаточно неожиданная, потребует привыкания, но зато в будущем сэкономит клики и время на перемещение курсора
Подсмотрела в канале у Никиты Семенова: ссылка
#дропдаун
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
31. UX-бенчмаркинг
Сегодня захотелось отойти от привычного анализа референсов в сторону обзора статьи на животрепещащую тему: как все-таки измерять успешность дизайна?
Оля Ходаковская из Selectel поделилась, как метрика Task Success Rate может помочь замерить насколько успешно пользователи справляются с той или иной задачей.
Главные тезисы:
— Продуктовые метрики не позволяют объективно оценить влияние дизайна
— UX-бенчмаркинг позволяет увидеть и понять, как пользователи работают с разными задачами.
— Успешность метрики оценивается относительно базового уровня. Это могут быть средние значения, показатели конкурентов или первый замер
— UX-бенчмаркинг — одна из возможностей для дизайнера взять на себя больше ответственности, потому что можно аргументировать дизайн-решения метриками
💜Статья
#статья
Сегодня захотелось отойти от привычного анализа референсов в сторону обзора статьи на животрепещащую тему: как все-таки измерять успешность дизайна?
Оля Ходаковская из Selectel поделилась, как метрика Task Success Rate может помочь замерить насколько успешно пользователи справляются с той или иной задачей.
Главные тезисы:
— Продуктовые метрики не позволяют объективно оценить влияние дизайна
— UX-бенчмаркинг позволяет увидеть и понять, как пользователи работают с разными задачами.
— Успешность метрики оценивается относительно базового уровня. Это могут быть средние значения, показатели конкурентов или первый замер
— UX-бенчмаркинг — одна из возможностей для дизайнера взять на себя больше ответственности, потому что можно аргументировать дизайн-решения метриками
💜Статья
#статья
🔥4
Media is too big
VIEW IN TELEGRAM
32. 60fps
Пополняемая коллекция концептов и анимаций. Можно подсмотреть интересные взаимодействия
#коллекция
Пополняемая коллекция концептов и анимаций. Можно подсмотреть интересные взаимодействия
#коллекция
🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
33. Анимация изображений
При ховере на карточу, вложенные изображения раскрываются, создавая ощущения просмотра альбома!
До чего же красивый эффект, который позволяет увидеть краткое содержимое, не переходя в детали
💜 Источник: ссылка
#анимации #карточка
@references_burrow
При ховере на карточу, вложенные изображения раскрываются, создавая ощущения просмотра альбома!
До чего же красивый эффект, который позволяет увидеть краткое содержимое, не переходя в детали
💜 Источник: ссылка
#анимации #карточка
@references_burrow
❤9🔥2
34. Графики для дашбордов
Выглядят очень чисто и аккуратно. Эти виджеты будут круто гармонировать, если из них собрать интерфейс для продажника.
Особенно понравились:
— лидер-борд с пьедесталом, который визуализирует успехи сотрудников, тем самым мотивируя их продавать больше
— график воронки, который наглядно показывает этапы проведения сделки и успешность по ним. Иногда кажется, что этот тип графика незаслуженно мало используется в интерфейсах
А какой виджет понравился вам больше всего?🌼
🩷Источник: ссылка
#графики
@references_burrow
Выглядят очень чисто и аккуратно. Эти виджеты будут круто гармонировать, если из них собрать интерфейс для продажника.
Особенно понравились:
— лидер-борд с пьедесталом, который визуализирует успехи сотрудников, тем самым мотивируя их продавать больше
— график воронки, который наглядно показывает этапы проведения сделки и успешность по ним. Иногда кажется, что этот тип графика незаслуженно мало используется в интерфейсах
А какой виджет понравился вам больше всего?🌼
🩷Источник: ссылка
#графики
@references_burrow
❤6👍5
This media is not supported in your browser
VIEW IN TELEGRAM
35. «Марка» качества
Прекрасный пример скевоморфизма. Airbnb использует анимацию восковой печати, чтобы отметить «качественных» арендодателей.
Этот прием создает ассоциацию с качеством и надежностью продуктов из реального мира, что помогает пользователям больше доверять таким предложениям
🩷Источник: ссылка
#скевоморфизм #анимации
@references_burrow
Прекрасный пример скевоморфизма. Airbnb использует анимацию восковой печати, чтобы отметить «качественных» арендодателей.
Этот прием создает ассоциацию с качеством и надежностью продуктов из реального мира, что помогает пользователям больше доверять таким предложениям
🩷Источник: ссылка
#скевоморфизм #анимации
@references_burrow
❤9👍1
36. Карта реализации историй
Наткнулась на прекрасную статью, в которой Андрей Шапиро предлагает новый инструмент «Карта реализации историй» как развитие уже известного User Story Mapping (USM).
Главные тезисы:
— Проблема традиционного USM — истории являются слишком наводящими на одно конкретное решение, которое оказывается неверным из-за слабой связи с реальной проблемой пользователя
— Карта реализации историй — матричная система, где по горизонтали располагаются последовательные истории, а по вертикали смысловые слои, описывающие переход от бизнес-ценности к решению
Краткая структура схемы приложена к посту.
⚡️Основной смысл в том, что каждый столбец в отдельности собирает одну историю. Истории намеренно разбиты на категории-слои. Заполняя каждый слой в отдельности, мы наполняем шаблон
🩷Почитать подробнее: ссылка
#статья
@references_burrow
Наткнулась на прекрасную статью, в которой Андрей Шапиро предлагает новый инструмент «Карта реализации историй» как развитие уже известного User Story Mapping (USM).
Главные тезисы:
— Проблема традиционного USM — истории являются слишком наводящими на одно конкретное решение, которое оказывается неверным из-за слабой связи с реальной проблемой пользователя
— Карта реализации историй — матричная система, где по горизонтали располагаются последовательные истории, а по вертикали смысловые слои, описывающие переход от бизнес-ценности к решению
Краткая структура схемы приложена к посту.
⚡️Основной смысл в том, что каждый столбец в отдельности собирает одну историю. Истории намеренно разбиты на категории-слои. Заполняя каждый слой в отдельности, мы наполняем шаблон
🩷Почитать подробнее: ссылка
#статья
@references_burrow
🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
37. Интро в ИИ
Отличный пример онбординга, где Notion ненавязчиво показывают примеры использования их нейронки 🤖
Классно, что вместо абстрактных обещаний «ИИ может все», пользователь получает реальные и практичные кейсы, которые можно сразу попробовать самим.
И также обращу внимание на анимацию: скролл позволяет до бесконечности увеличивать количество юз-кейсов. Выглядит живо и здорово!
Таким образом:
1. Notion AI успешно промоутируется
2. Конверсия в использование продукта повышается
Профит!🌟
🩷Источник: ссылка
#анимации #ИИ #онбординг
@references_burrow
Отличный пример онбординга, где Notion ненавязчиво показывают примеры использования их нейронки 🤖
Классно, что вместо абстрактных обещаний «ИИ может все», пользователь получает реальные и практичные кейсы, которые можно сразу попробовать самим.
И также обращу внимание на анимацию: скролл позволяет до бесконечности увеличивать количество юз-кейсов. Выглядит живо и здорово!
Таким образом:
1. Notion AI успешно промоутируется
2. Конверсия в использование продукта повышается
Профит!🌟
🩷Источник: ссылка
#анимации #ИИ #онбординг
@references_burrow
❤10