Дмитрий Подлужный написал о проектировании интерфейсов интерактивных экранов.
— Надо понимать размеры экрана, для которого проектируете. В идеале — иметь доступ к устройству. Если доступа нет, создайте макет в натуральную величину;
— Важную роль играет расположение экрана: на какой высоте, под каким углом он находится, каким будет освещение;
— Вертикальные экраны требуют явного обозначения интерактивности. Например, с помощью подсказки «Нажмите, чтобы начать»;
— Наклонённые экраны сразу воспринимаются как интерактивные. А разные их участки доступнее, чем на вертикальных экранах;
— Размещайте элементы управления в легкодоступных зонах;
— Контент и навигация (интерактивные элементы) должны заметно отличаться визуально;
— Обеспечьте заметный отклик на действия пользователя;
— С большим экраном естественнее взаимодействовать ладонью или несколькими пальцами, а не только кончиком одного пальца;
— Минимизируйте количество нажатий, ручного ввода текста и других действий, требующих высокой точности;
— Двигать рукой утомительнее, особенно если она остаётся на весу;
— Избегайте утомительных действий вроде долгой прокрутки, частого перетаскивания объектов;
— Зоны клика должны быть больше самих элементов, особенно если пользователь смотрит на них под углом;
— Экраны большие, но пользователь находится близко к ним, на расстоянии вытянутой руки, и его поле зрения ограничено;
— Не разбрасывайте элементы по экрану, чтобы не заставлять человека поворачивать голову. Это утомляет;
— Используйте анимацию, чтобы привлечь внимание к определённым элементам;
— Дайте возможность перемещать экранную клавиатуру в удобное место на экране;
— Автоматически возвращайте экран в исходное состояние, если он долгое время не используется, чтобы следующему пользователю было удобно начать взаимодействие.
#interactive_display
— Надо понимать размеры экрана, для которого проектируете. В идеале — иметь доступ к устройству. Если доступа нет, создайте макет в натуральную величину;
— Важную роль играет расположение экрана: на какой высоте, под каким углом он находится, каким будет освещение;
— Вертикальные экраны требуют явного обозначения интерактивности. Например, с помощью подсказки «Нажмите, чтобы начать»;
— Наклонённые экраны сразу воспринимаются как интерактивные. А разные их участки доступнее, чем на вертикальных экранах;
— Размещайте элементы управления в легкодоступных зонах;
— Контент и навигация (интерактивные элементы) должны заметно отличаться визуально;
— Обеспечьте заметный отклик на действия пользователя;
— С большим экраном естественнее взаимодействовать ладонью или несколькими пальцами, а не только кончиком одного пальца;
— Минимизируйте количество нажатий, ручного ввода текста и других действий, требующих высокой точности;
— Двигать рукой утомительнее, особенно если она остаётся на весу;
— Избегайте утомительных действий вроде долгой прокрутки, частого перетаскивания объектов;
— Зоны клика должны быть больше самих элементов, особенно если пользователь смотрит на них под углом;
— Экраны большие, но пользователь находится близко к ним, на расстоянии вытянутой руки, и его поле зрения ограничено;
— Не разбрасывайте элементы по экрану, чтобы не заставлять человека поворачивать голову. Это утомляет;
— Используйте анимацию, чтобы привлечь внимание к определённым элементам;
— Дайте возможность перемещать экранную клавиатуру в удобное место на экране;
— Автоматически возвращайте экран в исходное состояние, если он долгое время не используется, чтобы следующему пользователю было удобно начать взаимодействие.
#interactive_display
Хабр
Проектирование для интерактивных экранов
Я работаю в области проектирования интерфейсов уже давно и недавно столкнулся с возможностью поработать над проектированием интерфейсов для интерактивных экранов. Основная задача экранов — это...
👍13❤3
Анастасия Зайцева написала об отличиях в поведении возрастных пользователей.
— Доля такой аудитории растёт из-за демографических изменений, повышения цифровой грамотности и доступности интернет-ресурсов;
— Их частая проблема — изолированность и одиночество, поэтому им важно оставаться на связи с родными и близкими;
— Они выросли до широкого проникновения технологий, поэтому могут не распознавать общепринятые паттерны (может потребоваться дополнительный онбординг), неуверенно чувствуют себя с технологиями и боятся ошибиться, поэтому склонны придерживаться уже знакомых сценариев;
— В Одноклассниках их лента почти полностью состоит из контента друзей, они не склонны подписываться на блогеров или СМИ;
— Когда в ленту просто добавили блок с короткими видео, к нему отнеслись негативно: скрывали, жаловались. Внедрить его получилось только с помощью социальных механик («Ваши друзья смотрят»);
— Зачастую новые функции, которые пользователь точно должен увидеть, приходится показывать «в лоб»: на главный экран или в другие популярные разделы без возможности пропуска;
— У них низкая устойчивость к ошибкам (столкнувшись с ошибкой, они просто закрывают сессию);
— Они часто используют увеличенные шрифты. Важно убедиться, что вёрстка в этом случае не плывёт и важный контент и контролы остаются доступными;
— Нередко они используют нестабильный и медленный интернет, находясь на даче или в транспорте. Это учитывается при подгрузке контента на будущее, а также при ранжировании контента в ленте — при плохом соединении (или слабом устройстве) приоритетнее становятся более лёгкие форматы (текст, картинки);
— Они крайне чувствительны к токсичности, негативу и грубой лексике, поэтому часто избегают написания комментариев к чужим постам, так как боятся неадекватных ответов. И даже просто не заходят в комментарии;
— Также они ставят больше дизлайков и отправляют жалоб. Особенно остро воспринимают эротику (даже лёгкую), постановочные фото и видео, направленные на вызов эмоций («Помогите приюту»), политику;
— Помогает размытие неоднозначного контента, фильтр мата, механики снижения токсичности в комментариях, переразметка контента по своим правилам и улучшение персонализации.
#old
— Доля такой аудитории растёт из-за демографических изменений, повышения цифровой грамотности и доступности интернет-ресурсов;
— Их частая проблема — изолированность и одиночество, поэтому им важно оставаться на связи с родными и близкими;
— Они выросли до широкого проникновения технологий, поэтому могут не распознавать общепринятые паттерны (может потребоваться дополнительный онбординг), неуверенно чувствуют себя с технологиями и боятся ошибиться, поэтому склонны придерживаться уже знакомых сценариев;
— В Одноклассниках их лента почти полностью состоит из контента друзей, они не склонны подписываться на блогеров или СМИ;
— Когда в ленту просто добавили блок с короткими видео, к нему отнеслись негативно: скрывали, жаловались. Внедрить его получилось только с помощью социальных механик («Ваши друзья смотрят»);
— Зачастую новые функции, которые пользователь точно должен увидеть, приходится показывать «в лоб»: на главный экран или в другие популярные разделы без возможности пропуска;
— У них низкая устойчивость к ошибкам (столкнувшись с ошибкой, они просто закрывают сессию);
— Они часто используют увеличенные шрифты. Важно убедиться, что вёрстка в этом случае не плывёт и важный контент и контролы остаются доступными;
— Нередко они используют нестабильный и медленный интернет, находясь на даче или в транспорте. Это учитывается при подгрузке контента на будущее, а также при ранжировании контента в ленте — при плохом соединении (или слабом устройстве) приоритетнее становятся более лёгкие форматы (текст, картинки);
— Они крайне чувствительны к токсичности, негативу и грубой лексике, поэтому часто избегают написания комментариев к чужим постам, так как боятся неадекватных ответов. И даже просто не заходят в комментарии;
— Также они ставят больше дизлайков и отправляют жалоб. Особенно остро воспринимают эротику (даже лёгкую), постановочные фото и видео, направленные на вызов эмоций («Помогите приюту»), политику;
— Помогает размытие неоднозначного контента, фильтр мата, механики снижения токсичности в комментариях, переразметка контента по своим правилам и улучшение персонализации.
#old
Хабр
OLD’s cool: паттерны поведения взрослой аудитории и как с ними работают в ОК
При создании любого продукта надо сразу оценивать, кто и как им будет пользоваться — это универсальное правило применимо к любому сервису и даже товару. Особенно актуально оно,...
❤17👍6🔥1
Андрей Шапиро написал о вопросах, направляющих проектирование.
— Вопрос — коммуникационный инструмент направленного размышления;
— В проектировании чаще всего имеют дело с вопросами исследовательскими (определение области, которую надо изучить подробнее) и проблематизирующими (постановка задачи);
— В начале проекта, когда идёт снятие задачи, проектировщики иногда не понимают, куда двигаться дальше;
— Чтобы задать качественные вопросы, надо начать исследование и минимально погрузиться в предметную область;
— Основа мышления — создание в голове схем, отражающих модели реальности. Обнаружив отсутствие важных деталей или нарушение логики в построении схем, мы можем это исправить;
— Вопросы позволяют подсветить себе или проектной группе эти проблемные места. Белое пятно — полное отсутствие понимания (по аналогии с картами до великих географических открытий). Серая зона — место, где понимание туманно, и мы это знаем;
— Есть практики ненаправленного интуитивного творческого поиска (вроде поиска образа в каракулях), но в проектировании нужны более надёжные направляющие;
— Ими могут быть следующие артефакты, уточняющие устройство человеческой деятельности: структура потоков, процессы как цепочки последовательных действий и событий, типичные ситуации и способы принятия решений в них, структура внутреннего устройства объекта, структура взаимодействий объектов и так далее;
— Получив новую порцию знаний в диалоге с экспертами и представителями заказчика, проектировщик обновляет картину и подсвечивает вопросами новые моменты для уточнения;
— Беглость приходит с опытом. Не страшно, если новая пачка вопросов появляется между встречами;
— Шаблонные вопросы позволяют снизить неопределённость на старте. Всегда есть фаза предварительного анализа замысла, выяснения сути задачи, её границ и целей заказчика;
— Всегда важно, как будут построены отношения, каковы у сторон ожидания друг к другу, из чего будет строиться процесс, как будет достигаться результат;
— Примеры вопросов о бизнесе клиента: Как вы работаете? На чём зарабатываете? Где вы берёте клиентов? Какой канал продаж самый эффективный?
— Есть ещё вопросы, демонстрирующие проблемы, когда вы уже увидели проблему, а собеседник — нет;
— Большую часть времени проектировщик задаёт вопросы сам себе. Это проблематизирующие вопросы, в которых сформулирована задача. Например: «Как проверяющий узнает, что по портфелю заново запущена проверка?»;
— Шаблоны таких вопросов: Как сделать так, чтобы появился <отсутствующий пока желаемый эффект> или исчез <наблюдаемый нежелательный эффект>? Как или за счёт чего будет работать <отсутствующий пока механизм> с <таким-то результатом на выходе>? Что, где и как поменять в системе, чтобы удовлетворить <новому требованию>?
#analysis
— Вопрос — коммуникационный инструмент направленного размышления;
— В проектировании чаще всего имеют дело с вопросами исследовательскими (определение области, которую надо изучить подробнее) и проблематизирующими (постановка задачи);
— В начале проекта, когда идёт снятие задачи, проектировщики иногда не понимают, куда двигаться дальше;
— Чтобы задать качественные вопросы, надо начать исследование и минимально погрузиться в предметную область;
— Основа мышления — создание в голове схем, отражающих модели реальности. Обнаружив отсутствие важных деталей или нарушение логики в построении схем, мы можем это исправить;
— Вопросы позволяют подсветить себе или проектной группе эти проблемные места. Белое пятно — полное отсутствие понимания (по аналогии с картами до великих географических открытий). Серая зона — место, где понимание туманно, и мы это знаем;
— Есть практики ненаправленного интуитивного творческого поиска (вроде поиска образа в каракулях), но в проектировании нужны более надёжные направляющие;
— Ими могут быть следующие артефакты, уточняющие устройство человеческой деятельности: структура потоков, процессы как цепочки последовательных действий и событий, типичные ситуации и способы принятия решений в них, структура внутреннего устройства объекта, структура взаимодействий объектов и так далее;
— Получив новую порцию знаний в диалоге с экспертами и представителями заказчика, проектировщик обновляет картину и подсвечивает вопросами новые моменты для уточнения;
— Беглость приходит с опытом. Не страшно, если новая пачка вопросов появляется между встречами;
— Шаблонные вопросы позволяют снизить неопределённость на старте. Всегда есть фаза предварительного анализа замысла, выяснения сути задачи, её границ и целей заказчика;
— Всегда важно, как будут построены отношения, каковы у сторон ожидания друг к другу, из чего будет строиться процесс, как будет достигаться результат;
— Примеры вопросов о бизнесе клиента: Как вы работаете? На чём зарабатываете? Где вы берёте клиентов? Какой канал продаж самый эффективный?
— Есть ещё вопросы, демонстрирующие проблемы, когда вы уже увидели проблему, а собеседник — нет;
— Большую часть времени проектировщик задаёт вопросы сам себе. Это проблематизирующие вопросы, в которых сформулирована задача. Например: «Как проверяющий узнает, что по портфелю заново запущена проверка?»;
— Шаблоны таких вопросов: Как сделать так, чтобы появился <отсутствующий пока желаемый эффект> или исчез <наблюдаемый нежелательный эффект>? Как или за счёт чего будет работать <отсутствующий пока механизм> с <таким-то результатом на выходе>? Что, где и как поменять в системе, чтобы удовлетворить <новому требованию>?
#analysis
ashapiro.ru
Вопрошание. Вопросы, направляющие проектирование
Откуда появляются вопросы, как их получать и направлять с пользой в процессе проектирования
❤5👍3🔥1
Оля Ходаковская написала об измерении успешности дизайна с помощью UX-бенчмаркинга.
— Иногда метрики вроде количества зарабатываемых денег не подходят. В B2B успехи сильно зависят от отдела продаж (выиграли тендер, привели хороших лидов). Да и продукты могут быть бесплатными;
— Ключевые метрики юзабилити: результативность (effectiveness), эффективность (efficiency), удовлетворённость (satisfaction);
— В технически сложных продуктах эффективность или time on task (время выполнения задачи) падает при добавлении новых фич. Они увеличивают путь пользователя (например, время конфигурации сервера), но привлекают клиентов;
— Результативность — task completion rate, насколько успешно пользователи справляются с задачей. Обычно задачи состоят из 2–5 шагов, на микрозадачи нет смысла смотреть из-за высокой конверсии;
— UX-бенчмаркинг — сравнительное количественное исследование. Можно сравнивать показатели продукта в этом и прошлом периоде (или до и после редизайна), разных продуктов компании, конкурирующих продуктов (сложно и дорого);
— Проводя его регулярно, надо выбрать период, который будет учитывать сезонные колебания и длину цикла разработки (чтобы успевали накопиться изменения в продукте);
— Показатели у разных задач могут отличаться. Базовые уровни в Селектеле: 48% для ключевых сервисов, 33% для базовых вспомогательных, 20% для сложных и тех, которые нужны только определённым сегментам клиентов;
— Для сбора данных используют self-hosted PostHog. UX-дизайнеры проектируют все события и единообразно по шаблону их называют: Источник события_Продуктовое направление_Продукт или фича_Объект и действие с ним;
— При сборе данных надо фильтровать внутренних и тестовых пользователей, учитывать только уникальных пользователей (2 раза прошёл сценарий = 1 справившийся с задачей пользователь);
— Также надо подобрать окно конверсии. Например, человек мог 2 недели заходить в форму и уходить подумать, что-то согласовать с коллегами, но в итоге выполнить задачу. Это тоже будет посчитано как 1 успешное прохождение сценария;
— Сравнивать показатели можно с первым замером, известными значениями у аналогичных продуктов, целевым значением, выбранным как OKR, например, которого хочется достичь после релиза нового дизайна;
— Зная значение метрики, можно на неё влиять, внося изменения в продукт и его интерфейс. Можно количественно оценивать эффективность своих решений;
— Промо метрики: ежеквартальные встречи для обсуждения итогов очередного бенча и шагов по оптимизации метрики, публикация итогов в корпоративном канале, рассказ о процессе и подключение к нему новых продуктов и сценариев, ссылки на метрику при обсуждении со стейкхолдерами.
#metrics
— Иногда метрики вроде количества зарабатываемых денег не подходят. В B2B успехи сильно зависят от отдела продаж (выиграли тендер, привели хороших лидов). Да и продукты могут быть бесплатными;
— Ключевые метрики юзабилити: результативность (effectiveness), эффективность (efficiency), удовлетворённость (satisfaction);
— В технически сложных продуктах эффективность или time on task (время выполнения задачи) падает при добавлении новых фич. Они увеличивают путь пользователя (например, время конфигурации сервера), но привлекают клиентов;
— Результативность — task completion rate, насколько успешно пользователи справляются с задачей. Обычно задачи состоят из 2–5 шагов, на микрозадачи нет смысла смотреть из-за высокой конверсии;
— UX-бенчмаркинг — сравнительное количественное исследование. Можно сравнивать показатели продукта в этом и прошлом периоде (или до и после редизайна), разных продуктов компании, конкурирующих продуктов (сложно и дорого);
— Проводя его регулярно, надо выбрать период, который будет учитывать сезонные колебания и длину цикла разработки (чтобы успевали накопиться изменения в продукте);
— Показатели у разных задач могут отличаться. Базовые уровни в Селектеле: 48% для ключевых сервисов, 33% для базовых вспомогательных, 20% для сложных и тех, которые нужны только определённым сегментам клиентов;
— Для сбора данных используют self-hosted PostHog. UX-дизайнеры проектируют все события и единообразно по шаблону их называют: Источник события_Продуктовое направление_Продукт или фича_Объект и действие с ним;
— При сборе данных надо фильтровать внутренних и тестовых пользователей, учитывать только уникальных пользователей (2 раза прошёл сценарий = 1 справившийся с задачей пользователь);
— Также надо подобрать окно конверсии. Например, человек мог 2 недели заходить в форму и уходить подумать, что-то согласовать с коллегами, но в итоге выполнить задачу. Это тоже будет посчитано как 1 успешное прохождение сценария;
— Сравнивать показатели можно с первым замером, известными значениями у аналогичных продуктов, целевым значением, выбранным как OKR, например, которого хочется достичь после релиза нового дизайна;
— Зная значение метрики, можно на неё влиять, внося изменения в продукт и его интерфейс. Можно количественно оценивать эффективность своих решений;
— Промо метрики: ежеквартальные встречи для обсуждения итогов очередного бенча и шагов по оптимизации метрики, публикация итогов в корпоративном канале, рассказ о процессе и подключение к нему новых продуктов и сценариев, ссылки на метрику при обсуждении со стейкхолдерами.
#metrics
Хабр
Как измерить успешность дизайна в техническом продукте? Погружаемся в UX-бенчмаркинг
Привет, я Оля Ходаковская — ведущий продуктовый дизайнер облака Selectel . Я отвечаю за проектирование и развитие облачных продуктов: сетей, файрволов, балансировщиков, глобального роутера и логов — и...
👍10❤6🤩1
Александр Букин написал, как упростить поиск актуальных макетов и ответственных за них в большом продукте.
— Иногда работа дизайнера связана с экранами, за которые отвечает другая команда. К кому обратиться за актуальными макетами?
— Создали схему структуры департамента дизайна и исследований (меняется реже структуры продуктовых команд);
— Для каждого дизайнера показаны главные экраны фич, за которые он отвечает (для визуального ориентира), добавлены ссылки на макеты и даты скринов;
— Иногда дизайнеры переходят между командами, и тогда на схеме можно найти их лидов или руководителей направления, чтобы уточнить авторство и актуальность макетов;
— Если за экран отвечает несколько команд, на нём выделяют зоны ответственности разных дизайнеров;
— С ростом карты добавили оглавление со списком ссылок на самые популярные экраны: главный, каталог, корзина, чекаут и несколько других;
— Когда кто-то из дизайнеров переходит из команды в команду или меняет зону ответственности, лид сообщает оунеру карты, который правит схему. (Лид может и сам внести правки.)
#management
— Иногда работа дизайнера связана с экранами, за которые отвечает другая команда. К кому обратиться за актуальными макетами?
— Создали схему структуры департамента дизайна и исследований (меняется реже структуры продуктовых команд);
— Для каждого дизайнера показаны главные экраны фич, за которые он отвечает (для визуального ориентира), добавлены ссылки на макеты и даты скринов;
— Иногда дизайнеры переходят между командами, и тогда на схеме можно найти их лидов или руководителей направления, чтобы уточнить авторство и актуальность макетов;
— Если за экран отвечает несколько команд, на нём выделяют зоны ответственности разных дизайнеров;
— С ростом карты добавили оглавление со списком ссылок на самые популярные экраны: главный, каталог, корзина, чекаут и несколько других;
— Когда кто-то из дизайнеров переходит из команды в команду или меняет зону ответственности, лид сообщает оунеру карты, который правит схему. (Лид может и сам внести правки.)
#management
Хабр
Дизайн в масштабе: как мы связали макеты и оргструктуру, ускорив работу в несколько раз
Привет! Я Александр Букин, дизайн-лид направления Фудтех в Магнит OMNI, объединяющем сервис доставки «Магнит Фудтех», маркетплейс «Магнит Маркет» и программу лояльности «Магнит Плюс». Сегодня я...
❤10👍3
This media is not supported in your browser
VIEW IN TELEGRAM
«ИИстина» — митап Яндекса про ИИ, людей и то, что между ними
4 декабря в Москве и онлайн Яндекс собирает технокреативных людей — дизайнеров, продюсеров, маркетологов, контент-лидеров и арт-директоров. Те, кто задаёт тренды в своих командах и уже использует ИИ, но часто точечно и без системы.
На «ИИстине» мы вместе:
• Систематизируем знания и опыт с ИИ
• Посмотрим, что реально работает, а что нет
• Заберём проверенные инструменты и лайфхаки коллег
А потом расслабимся и отдохнём: технококтейли, ИИ-диджей и афтерпати — даже самые крутые алгоритмы точно не заменят живое общение.
📍 4 декабря, 17:00, Москва и онлайн
👾 Регистрируйтесь, если хотите понимать нейросети, а не просто их использовать.
Реклама. ООО "Яндекс". ИНН 7736207543
4 декабря в Москве и онлайн Яндекс собирает технокреативных людей — дизайнеров, продюсеров, маркетологов, контент-лидеров и арт-директоров. Те, кто задаёт тренды в своих командах и уже использует ИИ, но часто точечно и без системы.
На «ИИстине» мы вместе:
• Систематизируем знания и опыт с ИИ
• Посмотрим, что реально работает, а что нет
• Заберём проверенные инструменты и лайфхаки коллег
А потом расслабимся и отдохнём: технококтейли, ИИ-диджей и афтерпати — даже самые крутые алгоритмы точно не заменят живое общение.
📍 4 декабря, 17:00, Москва и онлайн
👾 Регистрируйтесь, если хотите понимать нейросети, а не просто их использовать.
Реклама. ООО "Яндекс". ИНН 7736207543
🤮5❤2
Энтони Ценг написал о форме ввода данных банковской карты.
— До того, как пользователь откроет эту форму, покажите логотипы платёжных систем, карты которых принимаются;
— После ввода первых цифр номера карты отобразите логотип платёжной системы, чтобы показать, что пользователь вводит правильный номер;
— Группируйте вводимые цифры так же, как они отображаются на карте, чтобы легче было их сверять;
— Для ввода срока действия карты не используйте выпадающие списки, не давайте вводить номер месяца одной цифрой, а год четырьмя. Используйте маску MM/YY;
— Подпись для поля «Name on card (Имя на карте)» понятнее, чем «Cardholder name (Имя держателя карты)»;
— Подпись «Security code (Код безопасности)» для цифр с обратной стороны карты понятнее, чем аббревиатуры вроде CVV или CVC (встречаются и другие варианты);
— Порядок полей: Номер карты, Срок действия, Код безопасности, Имя на карте;
— Поля «Срок действия» и «Код безопасности» можно сделать уже, чтобы подчеркнуть, что в них можно ввести меньше символов;
— Валидируйте поле для ввода номера карты после того, как пользователь закончил ввод, чтобы не пугать его раньше времени;
— Отображайте сообщения об ошибках под соответствующими полями, чтобы была чёткая взаимосвязь;
— Кнопка в такой форме не всегда приводит к платежу. Пишите в кнопке, что произойдёт при нажатии. Например: «Continue to review order».
#form #payment
— До того, как пользователь откроет эту форму, покажите логотипы платёжных систем, карты которых принимаются;
— После ввода первых цифр номера карты отобразите логотип платёжной системы, чтобы показать, что пользователь вводит правильный номер;
— Группируйте вводимые цифры так же, как они отображаются на карте, чтобы легче было их сверять;
— Для ввода срока действия карты не используйте выпадающие списки, не давайте вводить номер месяца одной цифрой, а год четырьмя. Используйте маску MM/YY;
— Подпись для поля «Name on card (Имя на карте)» понятнее, чем «Cardholder name (Имя держателя карты)»;
— Подпись «Security code (Код безопасности)» для цифр с обратной стороны карты понятнее, чем аббревиатуры вроде CVV или CVC (встречаются и другие варианты);
— Порядок полей: Номер карты, Срок действия, Код безопасности, Имя на карте;
— Поля «Срок действия» и «Код безопасности» можно сделать уже, чтобы подчеркнуть, что в них можно ввести меньше символов;
— Валидируйте поле для ввода номера карты после того, как пользователь закончил ввод, чтобы не пугать его раньше времени;
— Отображайте сообщения об ошибках под соответствующими полями, чтобы была чёткая взаимосвязь;
— Кнопка в такой форме не всегда приводит к платежу. Пишите в кнопке, что произойдёт при нажатии. Например: «Continue to review order».
#form #payment
Teletype
UX онлайн-платежей: ввод данных банковской карты
Лучшие практики дизайна форм для заполнения платёжных данных
👍12❤4👎2
Кристина Мруц написала, как снизить влияние когнитивных искажений на восприятие пользовательского фидбека.
— Перед релизом новой версии вы могли переживать, что пользователи её не примут, и негативные отзывы (даже если их несколько) подтвердят ваши сомнения;
— Чтобы уменьшить эффект подтверждения, когда мы принимаем только аргументы, подтверждающие нашу исходную позицию, перед чтением отзывов изучите объективные данные (например, продуктовые метрики);
— Можно привлечь независимого аналитика или автоматически кластеризовать отзывы по темам (BERTopic, GPT-based summarization), чтобы оценить тренды без влияния предположений команды;
— Чтобы уменьшить негативное искажение, делите отзывы на позитивные, негативные и нейтральные и смотрите на их баланс. Тональность отзывов помогают определять RoBERTa и BERT-based модели;
— Смотрите на частоту проблем: сколько пользователей пишет об одном и том же;
— Но учтите, так сложнее заметить отдельные отзывы, которые сами по себе могут стать проблемой. Например, негативные публикации инфлюенсеров;
— Стоит отделять отзывы о временных негативных или позитивных событиях. Если сервер лежал несколько часов, будет много негатива, но это проблема не продукта, а инфраструктуры;
— Один яркий запоминающийся кейс из саппорта может создать впечатление, что это значимая проблема (эвристика доступности);
— Систематизируйте отзывы по сценариям, чтобы не принимать редкие проблемы за типичные. С этим помогает LDA, BERTopic и GPT-топики. Полезно иметь базу типовых пользовательских сценариев, чтобы ссылаться на них и лучше понимать контекст отзыва;
— Чтобы снизить эффект авторитета, не указывайте статус автора;
— Но иногда полезно наоборот сегментировать отзывы по авторам: эксперты, инфлюенсеры, новички, обычные пользователи. При развитии продуктов для узких сегментов отзывы экспертов критически важны;
— Тон отзыва влияет на интерпретацию. Учитесь не вестись на манипулятивный, эмоциональный, экспертно-уверенный стиль высказываний.
#feedback
— Перед релизом новой версии вы могли переживать, что пользователи её не примут, и негативные отзывы (даже если их несколько) подтвердят ваши сомнения;
— Чтобы уменьшить эффект подтверждения, когда мы принимаем только аргументы, подтверждающие нашу исходную позицию, перед чтением отзывов изучите объективные данные (например, продуктовые метрики);
— Можно привлечь независимого аналитика или автоматически кластеризовать отзывы по темам (BERTopic, GPT-based summarization), чтобы оценить тренды без влияния предположений команды;
— Чтобы уменьшить негативное искажение, делите отзывы на позитивные, негативные и нейтральные и смотрите на их баланс. Тональность отзывов помогают определять RoBERTa и BERT-based модели;
— Смотрите на частоту проблем: сколько пользователей пишет об одном и том же;
— Но учтите, так сложнее заметить отдельные отзывы, которые сами по себе могут стать проблемой. Например, негативные публикации инфлюенсеров;
— Стоит отделять отзывы о временных негативных или позитивных событиях. Если сервер лежал несколько часов, будет много негатива, но это проблема не продукта, а инфраструктуры;
— Один яркий запоминающийся кейс из саппорта может создать впечатление, что это значимая проблема (эвристика доступности);
— Систематизируйте отзывы по сценариям, чтобы не принимать редкие проблемы за типичные. С этим помогает LDA, BERTopic и GPT-топики. Полезно иметь базу типовых пользовательских сценариев, чтобы ссылаться на них и лучше понимать контекст отзыва;
— Чтобы снизить эффект авторитета, не указывайте статус автора;
— Но иногда полезно наоборот сегментировать отзывы по авторам: эксперты, инфлюенсеры, новички, обычные пользователи. При развитии продуктов для узких сегментов отзывы экспертов критически важны;
— Тон отзыва влияет на интерпретацию. Учитесь не вестись на манипулятивный, эмоциональный, экспертно-уверенный стиль высказываний.
#feedback
Хабр
Когда отзывы обманывают: как когнитивные искажения меняют восприятие пользовательского фидбека
Пользователь сказал — продукт перевернулся История, о которой хочется рассказать, случилась давно. Я управляла сервисом по продаже билетов в кино, и основные продажи происходили в мобилке. Тогда мы...
🔥2❤1
10 декабря в 19:00 мск UX Feedback и Лемана Про расскажут об опыте сбора и интерпретации фидбека.
— Ошибки в этом процессе приводят к тому, что продукт улучшили, а роста нет;
— Иногда исследователи приносят слишком общие данные, с которыми сложно принимать решения. Точечно и быстро собирать данные помогают ad-hoc опросы;
— Инструментов для исследования много. Чтобы не возникал хаос, надо уметь всех их поженить и распределить по этапам.
Кроме этого эксперты (менеджер по развитию бизнеса UX Feedback Артем Кардава и руководитель отдела онлайн-продуктов Лемана Про Ольга Сурда) расскажут:
— Как принимать решения о доработках на основе данных, а не предположений;
— Как точечные опросы помогли Лемана Про повысить конверсию на 5% без долгих и дорогих экспериментов;
— Как превратить фидбек в инструмент роста: какие изменения реально влияют на метрики и как их внедрять в процесс разработки;
— Как перевести работу с обратной связью в систему. Методология Voice of the Customer (VoC).
Зарегистрироваться на вебинар
Реклама ООО «ФИДБЕК». ИНН: 5030094661, erid: 2VtzqwnZWvu
— Ошибки в этом процессе приводят к тому, что продукт улучшили, а роста нет;
— Иногда исследователи приносят слишком общие данные, с которыми сложно принимать решения. Точечно и быстро собирать данные помогают ad-hoc опросы;
— Инструментов для исследования много. Чтобы не возникал хаос, надо уметь всех их поженить и распределить по этапам.
Кроме этого эксперты (менеджер по развитию бизнеса UX Feedback Артем Кардава и руководитель отдела онлайн-продуктов Лемана Про Ольга Сурда) расскажут:
— Как принимать решения о доработках на основе данных, а не предположений;
— Как точечные опросы помогли Лемана Про повысить конверсию на 5% без долгих и дорогих экспериментов;
— Как превратить фидбек в инструмент роста: какие изменения реально влияют на метрики и как их внедрять в процесс разработки;
— Как перевести работу с обратной связью в систему. Методология Voice of the Customer (VoC).
Зарегистрироваться на вебинар
Реклама ООО «ФИДБЕК». ИНН: 5030094661, erid: 2VtzqwnZWvu
❤3👍1🔥1
Илья Безделев написал, что делать с дизайн-долгом (papercuts).
— Дизайн-долг — места в интерфейсе, где что-то получилось криво по незнанию или неумению или где срезали углы, чтобы сделать быстрее;
— По отдельности проблемы вроде лишнего шага или немного кривой валидации формы не смертельны, как порез бумагой;
— Но если нанести слишком много порезов, может случиться «death by a thousand papercuts» — продукт перестанет приносить пользователям радость;
— В каждом цикле планирования выделяйте время на исправление мелких недочётов;
— Их можно закидывать в планы с низким приоритетом как бонусные задачи. Сделал большое дело, можно заняться мелочью;
— В командах с полноценными онколл-ротациями у разработчиков может быть свободное время онколла, когда не надо тушить пожары. Они могут заниматься papercuts;
— Хакатон-фиксатон — на неделю отложить работу над фичами и заняться фиксом дизайн-долга.
#design_debt
— Дизайн-долг — места в интерфейсе, где что-то получилось криво по незнанию или неумению или где срезали углы, чтобы сделать быстрее;
— По отдельности проблемы вроде лишнего шага или немного кривой валидации формы не смертельны, как порез бумагой;
— Но если нанести слишком много порезов, может случиться «death by a thousand papercuts» — продукт перестанет приносить пользователям радость;
— В каждом цикле планирования выделяйте время на исправление мелких недочётов;
— Их можно закидывать в планы с низким приоритетом как бонусные задачи. Сделал большое дело, можно заняться мелочью;
— В командах с полноценными онколл-ротациями у разработчиков может быть свободное время онколла, когда не надо тушить пожары. Они могут заниматься papercuts;
— Хакатон-фиксатон — на неделю отложить работу над фичами и заняться фиксом дизайн-долга.
#design_debt
Bezdelev
UX долг a.k.a. Papercuts
Думаю, все знакомы с концепцией технического долга - это все те места в технической имплементации продукта, где мы срезали углы, потому что хотели побыстрее шипнуть, потому что чего-то не знали или потому что руки растут оттуда же откуда ноги. Технический…
❤10👍4
В Rutube обновили дизайн веб-версии Студии для авторов. Обновление основных разделов доступно всем пользователям.
— Полностью обновили UI, он стал красивее и приятнее;
— Появилось больше воздуха, контент стал заметнее, а графики информативнее;
— Унифицировали расположение элементов интерфейса и функциональность;
— Загрузка и редактирование видео теперь доступны в модальном окне;
— При загрузке нескольких файлов отображается виджет со статусом их загрузки;
— Объединены и скрыты необязательные настройки (раздел «Расширенные настройки»);
— Сериалы в плейлистах вынесены в отдельную вкладку, чтобы более чётко структурировать контент;
— Сами плейлисты отображаются карточками, как на основной платформе;
— Появилась возможность редактировать их обложки, сортировать их по новизне, а внутри плейлиста — настроить порядок видео в списке;
— Статистика просмотров плейлиста стала ярче и нагляднее;
— Данные о подписчиках, просмотрах, общем времени просмотра, комментариях и зрителях представлены в виде графиков и собраны на одной странице;
— В разделе трансляций и донатов изменили форму настроек, убрали лишние элементы, увеличили плеер для авторов и вынесли чат сбоку от него;
— К вкладкам «В эфире», «Ожидают начала» и «Завершённые» добавили счётчики;
— Кнопку добавления новой трансляции перенесли в правый верхний угол;
— Список трансляций стал плотнее, сетка отображает до 24 обложек одновременно;
— В итоге улучшилась навигация и управление большим объёмом контента.
«По результатам нашего опроса новый дизайн воспринимается как более интересный, современный и удобный, а средняя оценка составила 6,5 из 7. Проделанная работа по редизайну сервиса позволит ускорить реализацию будущих обновлений и улучшений, так что Студия RUTUBE будет постоянно развиваться и обрастать новыми функциями», — директор по продукту Евгений Ильчук.
— Полностью обновили UI, он стал красивее и приятнее;
— Появилось больше воздуха, контент стал заметнее, а графики информативнее;
— Унифицировали расположение элементов интерфейса и функциональность;
— Загрузка и редактирование видео теперь доступны в модальном окне;
— При загрузке нескольких файлов отображается виджет со статусом их загрузки;
— Объединены и скрыты необязательные настройки (раздел «Расширенные настройки»);
— Сериалы в плейлистах вынесены в отдельную вкладку, чтобы более чётко структурировать контент;
— Сами плейлисты отображаются карточками, как на основной платформе;
— Появилась возможность редактировать их обложки, сортировать их по новизне, а внутри плейлиста — настроить порядок видео в списке;
— Статистика просмотров плейлиста стала ярче и нагляднее;
— Данные о подписчиках, просмотрах, общем времени просмотра, комментариях и зрителях представлены в виде графиков и собраны на одной странице;
— В разделе трансляций и донатов изменили форму настроек, убрали лишние элементы, увеличили плеер для авторов и вынесли чат сбоку от него;
— К вкладкам «В эфире», «Ожидают начала» и «Завершённые» добавили счётчики;
— Кнопку добавления новой трансляции перенесли в правый верхний угол;
— Список трансляций стал плотнее, сетка отображает до 24 обложек одновременно;
— В итоге улучшилась навигация и управление большим объёмом контента.
«По результатам нашего опроса новый дизайн воспринимается как более интересный, современный и удобный, а средняя оценка составила 6,5 из 7. Проделанная работа по редизайну сервиса позволит ускорить реализацию будущих обновлений и улучшений, так что Студия RUTUBE будет постоянно развиваться и обрастать новыми функциями», — директор по продукту Евгений Ильчук.
💩29👍5😁4❤1
Евгений Шпилевой написал о 40 основных элементах интерфейса: используемые названия, особенности применения, рекомендации по дизайну.
— Например, кто-то называет переключатель тогглом (toggle), а кто-то свитчем (switch). Нижнюю панель навигации в мобильных приложениях Material Design называет Nav bar (Navigation bar), а Human Interface Guidelines — Tab bar;
— Аккордеон отличается от коллапса (позволяет свернуть и развернуть часть контента) тем, что состоит сразу из нескольких блоков, которые можно разворачивать и сворачивать. Аккордеон часто используют для FAQ (часто задаваемых вопросов), а коллапс — для блока «Показать ещё»;
— Пагинация (pagination) позволяет перемещаться между разделённым на порции (страницы) контентом. Классический вид — перечень номеров страниц, но также есть вариант с кнопкой «Загрузить ещё» (нажатие приводит к загрузке следующей порции) и бесконечным скролом (следующая порция загружается автоматически при прокрутке страницы);
— Кроме бургерного меню есть ещё кебаб (3 вертикальные точки), фрикадельки (3 горизонтальные точки) и бенто (2×2 или 3×3 точек или квадратов). Кебаб (чаще в Android) и фрикадельки (iOS) обычно открывают меню с дополнительными действиями или настройками. Бенто — меню приложений или сервисов;
— Табы — элемент навигации, позволяющий переключаться между контентом, находясь на одной странице, не используются для ввода пользовательских данных;
— Выпадающий список (dropdown) — это панель, которая отображается после нажатия на селект, мультиселект или кнопку и включает список вариантов для выбора;
— Textarea правильно произносится «текстэреа»;
— В поле для ввода пароля текст по умолчанию скрыт и отображается иконка открытого глаза, нажатие на которую позволяет увидеть введённый текст;
— Если операция длится больше 3–5 секунд, вместо лоадера (показывает, что система выполняет какую-то операцию) лучше отображать прогресс-бар (показывает, насколько продвинулось выполнение какой-либо операции);
— Тост (toast notification) в отличие от уведомления (notification) должен исчезнуть спустя 3–5 секунд, поэтому в нём мало текста и нет кнопок для дополнительных действий.
— Например, кто-то называет переключатель тогглом (toggle), а кто-то свитчем (switch). Нижнюю панель навигации в мобильных приложениях Material Design называет Nav bar (Navigation bar), а Human Interface Guidelines — Tab bar;
— Аккордеон отличается от коллапса (позволяет свернуть и развернуть часть контента) тем, что состоит сразу из нескольких блоков, которые можно разворачивать и сворачивать. Аккордеон часто используют для FAQ (часто задаваемых вопросов), а коллапс — для блока «Показать ещё»;
— Пагинация (pagination) позволяет перемещаться между разделённым на порции (страницы) контентом. Классический вид — перечень номеров страниц, но также есть вариант с кнопкой «Загрузить ещё» (нажатие приводит к загрузке следующей порции) и бесконечным скролом (следующая порция загружается автоматически при прокрутке страницы);
— Кроме бургерного меню есть ещё кебаб (3 вертикальные точки), фрикадельки (3 горизонтальные точки) и бенто (2×2 или 3×3 точек или квадратов). Кебаб (чаще в Android) и фрикадельки (iOS) обычно открывают меню с дополнительными действиями или настройками. Бенто — меню приложений или сервисов;
— Табы — элемент навигации, позволяющий переключаться между контентом, находясь на одной странице, не используются для ввода пользовательских данных;
— Выпадающий список (dropdown) — это панель, которая отображается после нажатия на селект, мультиселект или кнопку и включает список вариантов для выбора;
— Textarea правильно произносится «текстэреа»;
— В поле для ввода пароля текст по умолчанию скрыт и отображается иконка открытого глаза, нажатие на которую позволяет увидеть введённый текст;
— Если операция длится больше 3–5 секунд, вместо лоадера (показывает, что система выполняет какую-то операцию) лучше отображать прогресс-бар (показывает, насколько продвинулось выполнение какой-либо операции);
— Тост (toast notification) в отличие от уведомления (notification) должен исчезнуть спустя 3–5 секунд, поэтому в нём мало текста и нет кнопок для дополнительных действий.
dsgners.ru
40 основных элементов интерфейса, которые должен знать UX-дизайнер — дизайнерс
Многие начинающие UX-дизайнеры путаются в названиях элементов интерфейса и не всегда понимают, где и как их применять. Это совершенно нормально — все проходят через этот этап. Поэтому, чтобы помочь разобраться с данной проблемой, я собрал в этой статье 40…
👍24❤9🥱3🔥1
Илья Безделев написал об одно- и двусторонних дверях при принятии продуктовых решений.
— В двустороннюю дверь можно войти, осмотреться и, если не понравилось, выйти обратно;
— В продукте это решения, которые не приведут к катастрофе и которые можно откатить назад;
— Односторонняя дверь, как турникет в метро, позволяет пройти только в одну сторону;
— Это решения, которые нельзя откатить вовсе, либо это слишком дорого с точки зрения ресурсов, PR, доверия пользователей и так далее;
— Аналогию с дверьми придумали в Амазоне, чтобы было понятно, когда можно быстро принимать решения, а когда важно внимание к деталям;
— Сотрудники, принимающие решения, должны понять, в какую дверь они собираются войти;
— Двусторонние решения принимают без консультации с руководством. Односторонние могут доходить до самого верха.
#prioritization
— В двустороннюю дверь можно войти, осмотреться и, если не понравилось, выйти обратно;
— В продукте это решения, которые не приведут к катастрофе и которые можно откатить назад;
— Односторонняя дверь, как турникет в метро, позволяет пройти только в одну сторону;
— Это решения, которые нельзя откатить вовсе, либо это слишком дорого с точки зрения ресурсов, PR, доверия пользователей и так далее;
— Аналогию с дверьми придумали в Амазоне, чтобы было понятно, когда можно быстро принимать решения, а когда важно внимание к деталям;
— Сотрудники, принимающие решения, должны понять, в какую дверь они собираются войти;
— Двусторонние решения принимают без консультации с руководством. Односторонние могут доходить до самого верха.
#prioritization
Bezdelev
Как Амазон управляет рисками при помощи дверей
Амазон - компания контрастов, в которой иерархичность сочетается с огромной свободой на местах. Как им это удаётся?
❤8👍5
Александр Попов написал об измерении удобства промышленных продуктов.
— Такие продукты прилагаются к рабочему месту, и пользователи не могут от них отказаться, даже если продукт неудобен;
— От них может зависеть безопасность производства, персонала и окружающей среды, и было бы здорово, чтобы интерфейс сам по себе не добавлял проблем;
— Nielsen Norman Group предложили оценивать удобство таких продуктов с помощью фреймворка CASTLE;
— Cognitive load — сколько когнитивных усилий надо для выполнения задачи. Метрики: NASA Task Load Index, количество обращений в службу поддержки;
— Advanced feature usage — насколько активно люди используют продвинутые функции;
— Satisfaction — помогает ли продукт решать рабочие задачи. Метрики: System Usability Scale, Single Ease Question (сразу после выполнения задачи спрашиваем, насколько легко было её выполнить), Customer Effort Score (похоже на SEQ, но спрашиваем, как много усилий пришлось приложить);
— Task efficiency — как быстро и успешно пользователи справляются со своими рабочими обязанностями с помощью продукта. Метрики эффективности: Time on Task (время выполнения задачи), Task Success Rate (процент успешного выполнения задач), Number of Steps to Complete a Task (количество действий для выполнения задачи);
— Learnability — насколько легко новые пользователи осваивают продукт;
— Errors — частота и критичность совершаемых ошибок, и насколько пользователю легко исправить свою ошибку;
— Для сбора данных можно логировать ключевые действия в системе, а также интервьюировать пользователей и наблюдать за ними в естественной среде;
— Полезно отслеживать частоту использования обходных путей и дополнительных инструментов: держат ли пользователи калькулятор, выгружают ли данные, чтобы обработать в Excel?
— Ценность улучшений для бизнеса: увеличение скорости обучения новых сотрудников и производительности, уменьшение количества ошибок и связанных с ними потерь и текучки.
#metrics #industrial
— Такие продукты прилагаются к рабочему месту, и пользователи не могут от них отказаться, даже если продукт неудобен;
— От них может зависеть безопасность производства, персонала и окружающей среды, и было бы здорово, чтобы интерфейс сам по себе не добавлял проблем;
— Nielsen Norman Group предложили оценивать удобство таких продуктов с помощью фреймворка CASTLE;
— Cognitive load — сколько когнитивных усилий надо для выполнения задачи. Метрики: NASA Task Load Index, количество обращений в службу поддержки;
— Advanced feature usage — насколько активно люди используют продвинутые функции;
— Satisfaction — помогает ли продукт решать рабочие задачи. Метрики: System Usability Scale, Single Ease Question (сразу после выполнения задачи спрашиваем, насколько легко было её выполнить), Customer Effort Score (похоже на SEQ, но спрашиваем, как много усилий пришлось приложить);
— Task efficiency — как быстро и успешно пользователи справляются со своими рабочими обязанностями с помощью продукта. Метрики эффективности: Time on Task (время выполнения задачи), Task Success Rate (процент успешного выполнения задач), Number of Steps to Complete a Task (количество действий для выполнения задачи);
— Learnability — насколько легко новые пользователи осваивают продукт;
— Errors — частота и критичность совершаемых ошибок, и насколько пользователю легко исправить свою ошибку;
— Для сбора данных можно логировать ключевые действия в системе, а также интервьюировать пользователей и наблюдать за ними в естественной среде;
— Полезно отслеживать частоту использования обходных путей и дополнительных инструментов: держат ли пользователи калькулятор, выгружают ли данные, чтобы обработать в Excel?
— Ценность улучшений для бизнеса: увеличение скорости обучения новых сотрудников и производительности, уменьшение количества ошибок и связанных с ними потерь и текучки.
#metrics #industrial
Хабр
Как измерить удовлетворенность пользователей, у которых нет выбора
Привет, коллеги. Меня зовут Александр Попов, я представляю группу продуктовых дизайнеров и UX‑исследователей группы компаний «Цифра». Сегодня поговорим о теме, которая заставляет многих...
❤7👍4
Forwarded from Tresholder
Про «Эмоциональный дизайн»
Если коротко: это плеоназм, маркетинговый булщит.
Соседство этих двух слов вызывает вопросы. Дизайн в своей сути — процесс, деятельность, получается какая-то «эмоциональная деятельность». Да, в русском языке под «дизайном» понимают всё что угодно, «дизайн» является предметом, макетом, результатом, но и в это случае «эмоциональный дизайн» звучит как что-то сделанное с эмоциями или в сильном эмоциональном состоянии.
Если взять схожее словосочетание, «эмоциональный текст», то это текст написанный с эмоциями (кто-нибудь пишет капсом, доказывая свою правоту). А вот «текст вызывающие эмоции» — совершенно другое, шутка в сообщении или меткий, подходящий текст рядом с картинкой, который был продуман и написан без эмоции.
Возможно это и имеется в виду — «дизайн вызывающий эмоции»?
Если под этим понимается результат работы дизайнера который вызывает у кого-нибудь эмоции — всё равно получается ерунда.
Любой результат дизайна вызывает эмоции, слабые или сильные — в этом суть дизайна (деятельность по проектированию эстетических свойств, художественное конструирование). Дизайн автомобиля не может не вызвать эмоции (тут полный спектр, от брезгливости до восхищения). Более того, дизайн не вызывающий эмоций (нейтральный, универсальный, «никакой») еще сложнее создавать и это отдельно-стоящая задача.
Трактуется «эмоциональный дизайн» также по разному:
— дизайн в котором много эффектной анимации
— яркий и сочный, «вкусный» дизайн
— дизайн цепляющий за душу
— запоминающийся дизайн
— необычный, отличающийся дизайн
и так далее, то есть всё существующее разнообразие дизайна.
Термин и концепцию описал в своей книге Дональд Норман (Emotional Design, 2003). В этой концепции три уровня восприятия: висцеральный, поведенческий и рефлексивный завернутые в классическую модель отношений ABC. И человек воспринимает дизайн объектов на этих трёх уровнях…
Дальше можно не читать, модель Норман основывается на фундаментальных столпах дизайна (обычного, не «эмоционального»): эстетика, эргономика и психология (восприятия). Именно с помощью этих учений, дизайнер создаёт объекты вызывающие нужные эмоции.
«Эта кружка, моя любимая (эмоция) — она керамическая, без рисунка (эстетика), у нее удобная ручка, приятно держать, хорошо держит тепло (эргономика), стоит дорого, но это ручная работа! (психология)».
Любите и изучайте базу! 🫶
Если коротко: это плеоназм, маркетинговый булщит.
Соседство этих двух слов вызывает вопросы. Дизайн в своей сути — процесс, деятельность, получается какая-то «эмоциональная деятельность». Да, в русском языке под «дизайном» понимают всё что угодно, «дизайн» является предметом, макетом, результатом, но и в это случае «эмоциональный дизайн» звучит как что-то сделанное с эмоциями или в сильном эмоциональном состоянии.
Если взять схожее словосочетание, «эмоциональный текст», то это текст написанный с эмоциями (кто-нибудь пишет капсом, доказывая свою правоту). А вот «текст вызывающие эмоции» — совершенно другое, шутка в сообщении или меткий, подходящий текст рядом с картинкой, который был продуман и написан без эмоции.
Возможно это и имеется в виду — «дизайн вызывающий эмоции»?
Если под этим понимается результат работы дизайнера который вызывает у кого-нибудь эмоции — всё равно получается ерунда.
Любой результат дизайна вызывает эмоции, слабые или сильные — в этом суть дизайна (деятельность по проектированию эстетических свойств, художественное конструирование). Дизайн автомобиля не может не вызвать эмоции (тут полный спектр, от брезгливости до восхищения). Более того, дизайн не вызывающий эмоций (нейтральный, универсальный, «никакой») еще сложнее создавать и это отдельно-стоящая задача.
Трактуется «эмоциональный дизайн» также по разному:
— дизайн в котором много эффектной анимации
— яркий и сочный, «вкусный» дизайн
— дизайн цепляющий за душу
— запоминающийся дизайн
— необычный, отличающийся дизайн
и так далее, то есть всё существующее разнообразие дизайна.
Термин и концепцию описал в своей книге Дональд Норман (Emotional Design, 2003). В этой концепции три уровня восприятия: висцеральный, поведенческий и рефлексивный завернутые в классическую модель отношений ABC. И человек воспринимает дизайн объектов на этих трёх уровнях…
Дальше можно не читать, модель Норман основывается на фундаментальных столпах дизайна (обычного, не «эмоционального»): эстетика, эргономика и психология (восприятия). Именно с помощью этих учений, дизайнер создаёт объекты вызывающие нужные эмоции.
«Эта кружка, моя любимая (эмоция) — она керамическая, без рисунка (эстетика), у нее удобная ручка, приятно держать, хорошо держит тепло (эргономика), стоит дорого, но это ручная работа! (психология)».
Любите и изучайте базу! 🫶
❤29👍5
Forwarded from Дайджест продуктового дизайна
Седьмой год я провожу исследование: какие дизайн-команды в отечественных продуктовых компаниях самые сильные?
Такой рейтинг будет полезен рынку. Дизайнерам — лучше понимать, где есть хорошие вызовы и комфортная среда для профессионального роста. Компаниям и дизайн-командам — видеть, что нужно докачать.
Буду благодарен, если вы пройдёте опрос. Результаты исследования опубликую в январе. Вы найдёте отчёт в крупных дизайн-каналах и изданиях.
P.S. Результаты за 2024, 2023, 2021, 2020, 2019 и 2018.
Такой рейтинг будет полезен рынку. Дизайнерам — лучше понимать, где есть хорошие вызовы и комфортная среда для профессионального роста. Компаниям и дизайн-командам — видеть, что нужно докачать.
Буду благодарен, если вы пройдёте опрос. Результаты исследования опубликую в январе. Вы найдёте отчёт в крупных дизайн-каналах и изданиях.
P.S. Результаты за 2024, 2023, 2021, 2020, 2019 и 2018.
❤5
This media is not supported in your browser
VIEW IN TELEGRAM
Хороший дизайн — это когда каждая деталь работает на пользователя.
Команды VK знают: красота — это не только эстетика, но ещё и ясность, удобство и эмоции. Смотрите истории cотрудников VK, и находите вакансии по душе!
Команды VK знают: красота — это не только эстетика, но ещё и ясность, удобство и эмоции. Смотрите истории cотрудников VK, и находите вакансии по душе!
😁6💩3💊2
В Markswebb написали, как интернет-магазины снижают количество возвратов.
— 4 из 5 причин возврата связаны с неправильным выбором товара. В 2024 году в мире возвращали каждый 6-й товар;
— В России в категории одежды и обуви (критичны размер и посадка) возвращают 30–45% заказов на маркетплейсах и 15–25% на сайтах брендов;
— В категории мебели и товаров для дома (важны габариты и стиль) — высокие средние чеки и дорогая транспортировка возвратов, поэтому их минимизация тоже актуальна;
— Lamoda показывает замеры, когда пользователь выбирает размер в карточке товара. Например, M/46 — обхват груди 92 см, талии 72 см, рост 170 см;
— ASOS автоматически выбирает размеры для пользователей, которые указали в профиле рост, вес и предпочтения по посадке для верхней и нижней части тела;
— Walmart предлагает примерить вещь на виртуальной модели с похожим телосложением. В Zalando для этого из 2 фото можно создать свой 3D-аватар;
— IKEA не только даёт посмотреть на мебель в своей комнате в AR, но может удалить из помещения текущую мебель;
— Обобщение информации из отзывов с помощью ИИ позволяет быстро узнать важные детали, плюсы и минусы (BestBuy);
— В Amazon есть поиск по отзывам — можно проверить характеристики, которые важны пользователю для выбора;
— ASOS ещё и визуализирует на диаграммах клиентские оценки, насколько вещь соответствует размеру, комфортна и качественна;
— В Wildberries можно просматривать только отзывы с фото или с видео, чтобы можно было быстро оценить, как товар выглядит в реальности;
— В маркетплейсе возврат по причине «Нашёл дешевле» можно снизить, показав в карточке товара, что есть варианты дешевле от других продавцов.
#retail #product_page
— 4 из 5 причин возврата связаны с неправильным выбором товара. В 2024 году в мире возвращали каждый 6-й товар;
— В России в категории одежды и обуви (критичны размер и посадка) возвращают 30–45% заказов на маркетплейсах и 15–25% на сайтах брендов;
— В категории мебели и товаров для дома (важны габариты и стиль) — высокие средние чеки и дорогая транспортировка возвратов, поэтому их минимизация тоже актуальна;
— Lamoda показывает замеры, когда пользователь выбирает размер в карточке товара. Например, M/46 — обхват груди 92 см, талии 72 см, рост 170 см;
— ASOS автоматически выбирает размеры для пользователей, которые указали в профиле рост, вес и предпочтения по посадке для верхней и нижней части тела;
— Walmart предлагает примерить вещь на виртуальной модели с похожим телосложением. В Zalando для этого из 2 фото можно создать свой 3D-аватар;
— IKEA не только даёт посмотреть на мебель в своей комнате в AR, но может удалить из помещения текущую мебель;
— Обобщение информации из отзывов с помощью ИИ позволяет быстро узнать важные детали, плюсы и минусы (BestBuy);
— В Amazon есть поиск по отзывам — можно проверить характеристики, которые важны пользователю для выбора;
— ASOS ещё и визуализирует на диаграммах клиентские оценки, насколько вещь соответствует размеру, комфортна и качественна;
— В Wildberries можно просматривать только отзывы с фото или с видео, чтобы можно было быстро оценить, как товар выглядит в реальности;
— В маркетплейсе возврат по причине «Нашёл дешевле» можно снизить, показав в карточке товара, что есть варианты дешевле от других продавцов.
#retail #product_page
www.markswebb.ru
Семь раз примерь, один раз купи: как UX помогает e-com уменьшать число возвратов
4 из 5 ключевых причин возвратов связаны с этапом выбора товара — значит, работа по их снижению начинается задолго до оформления заказа. Мы проанализировали 25 мобильных приложений лидеров e-commerce в популярных категориях и выбрали 14 UX-решений, которые…
❤7👍3
Артемий Талалуев написал о повышении эффективности работы продуктовых дизайнеров.
— Когда обратить внимание на эффективность дизайнера?
— Тот использует устаревшие подходы и инструменты;
— Демонстрирует низкую дисциплину и самоорганизацию: опоздания, несоблюдение дедлайнов, отсутствие планов на день, неделю или месяц, хаос в макетах;
— С трудом объясняет решения и коммуницирует с командой;
— Нет инициативы: не предлагает улучшений, слабо участвует в обсуждениях, перекладывает задачи на других;
— После проверки лидом его макеты постоянно требуют доработки, часть комментариев теряется, решения не соответствуют требованиям или предоставляются не полностью, не продуманы пограничные случаи;
— 2–3 месяца работы дизайнера не привели к заметному улучшению метрик или UX-показателей. Значит, он не стремится решать пользовательские проблемы, выжидает, берёт минорные задачи;
— Лид должен фиксировать примеры перечисленного. Когда станет ясно, что это не разовые ошибки, следует встретиться с дизайнером;
— На встрече: обозначьте зону ответственности и ожидания от работы, KPI или OKR, критерии качества работы и покажите, где дизайнер не соответствует;
— Можно запустить Performance Improvement Plan (PIP): зафиксировать проблемы и измеримые критерии их исправления, дать от 2 до 6 недель на это;
— Например, критерий при проблемах с инициативой: «Дизайнер каждый месяц предлагает не менее 4 идей по улучшению продукта»;
— Не оставляйте дизайнера один на один с проблемами. Компания и лид могут помочь, например, предоставить доступы к курсам;
— Неисправление проблем в рамках PIP может быть поводом для увольнения в соответствии с Трудовым кодексом РФ. Для этого по каждому нарушению запрашивайте у дизайнера письменное объяснение;
— PIP можно использовать для развития, а не только как антикризисный инструмент.
#management
— Когда обратить внимание на эффективность дизайнера?
— Тот использует устаревшие подходы и инструменты;
— Демонстрирует низкую дисциплину и самоорганизацию: опоздания, несоблюдение дедлайнов, отсутствие планов на день, неделю или месяц, хаос в макетах;
— С трудом объясняет решения и коммуницирует с командой;
— Нет инициативы: не предлагает улучшений, слабо участвует в обсуждениях, перекладывает задачи на других;
— После проверки лидом его макеты постоянно требуют доработки, часть комментариев теряется, решения не соответствуют требованиям или предоставляются не полностью, не продуманы пограничные случаи;
— 2–3 месяца работы дизайнера не привели к заметному улучшению метрик или UX-показателей. Значит, он не стремится решать пользовательские проблемы, выжидает, берёт минорные задачи;
— Лид должен фиксировать примеры перечисленного. Когда станет ясно, что это не разовые ошибки, следует встретиться с дизайнером;
— На встрече: обозначьте зону ответственности и ожидания от работы, KPI или OKR, критерии качества работы и покажите, где дизайнер не соответствует;
— Можно запустить Performance Improvement Plan (PIP): зафиксировать проблемы и измеримые критерии их исправления, дать от 2 до 6 недель на это;
— Например, критерий при проблемах с инициативой: «Дизайнер каждый месяц предлагает не менее 4 идей по улучшению продукта»;
— Не оставляйте дизайнера один на один с проблемами. Компания и лид могут помочь, например, предоставить доступы к курсам;
— Неисправление проблем в рамках PIP может быть поводом для увольнения в соответствии с Трудовым кодексом РФ. Для этого по каждому нарушению запрашивайте у дизайнера письменное объяснение;
— PIP можно использовать для развития, а не только как антикризисный инструмент.
#management
Хабр
Как понять, что продуктовый дизайнер работает неэффективно
Сегодня хочу поговорить об очень дискуссионной, «холиварной» теме, поделиться своим опытом и выводами. Но прежде чем рассуждать о повышении эффективности, расскажу о её признаках. Признаки...
👎41🤡40🤮26🥴15👍5🔥5🌚3❤2
Forwarded from Стой под стрелой (Nikita Prokopov)
Почему-то считается, что дизайнеру или программисту круто бы думать об интересах бизнеса, что инженер, который о них думает, ценнее, чем тот, который не думает.
А мне кажется наоборот. У вас уже есть бизнесмен, пусть он о них думает. Зачем компании два бизнесмена, один хороший, другой плохой? Мне кажется, дизайнер должен думать про дизайн, программист — про программы. И целью своей себе ставить сделать хороший дизайн или хорошую программу, а не угодить бизнесу. И вот в их конфликте возникнет некое целое, которое больше частей, их синтез.
Грубо, дизайнера должно заботить, чтобы интерфейс хорошо выглядел и им было удобно пользоваться, а не метрики. Метрики будут заботить бизнес. Если дизайнера будут заботить метрики, и бизнес будут заботить метрики, получится не конфликт и поиск его решения, а повторение и топтание на месте.
Я много раз разговаривал с инженерами, которые жаловались, что бизнес не дает им времени на рефакторинг или сделать нормально. Ну так он и не должен давать! Бизнес интересует бизнес, а вас, как инженера, должно интересовать, как сделать качественно, устойчиво, эффективно. К вам никто никогда снаружи с этим запросом не придет, это должна быть ваша собственная мотивация, ваши собственные ценности, ваши собственные стандарты, понимаете?
И к вам приходят, чтобы вы их продавливали. А бизнес бизнес и без вас сделает.
А мне кажется наоборот. У вас уже есть бизнесмен, пусть он о них думает. Зачем компании два бизнесмена, один хороший, другой плохой? Мне кажется, дизайнер должен думать про дизайн, программист — про программы. И целью своей себе ставить сделать хороший дизайн или хорошую программу, а не угодить бизнесу. И вот в их конфликте возникнет некое целое, которое больше частей, их синтез.
Грубо, дизайнера должно заботить, чтобы интерфейс хорошо выглядел и им было удобно пользоваться, а не метрики. Метрики будут заботить бизнес. Если дизайнера будут заботить метрики, и бизнес будут заботить метрики, получится не конфликт и поиск его решения, а повторение и топтание на месте.
Я много раз разговаривал с инженерами, которые жаловались, что бизнес не дает им времени на рефакторинг или сделать нормально. Ну так он и не должен давать! Бизнес интересует бизнес, а вас, как инженера, должно интересовать, как сделать качественно, устойчиво, эффективно. К вам никто никогда снаружи с этим запросом не придет, это должна быть ваша собственная мотивация, ваши собственные ценности, ваши собственные стандарты, понимаете?
И к вам приходят, чтобы вы их продавливали. А бизнес бизнес и без вас сделает.
👍41👎13💯10🤔9❤8🔥4💩2❤🔥1🖕1