Станислав Хрусталёв написал об избранном.
— Добавление в избранное должно быть доступно в списке товаров, корзине, на странице товара;
— Привычная иконка для избранного — сердечко или закладка. Привычное расположение — в правом верхнем углу карточки товара и рядом с кнопкой покупки на странице товара;
— Если надо разгрузить интерфейс, можно отображать её при наведении курсора. При этом маркер того, что товар в избранном, должен быть виден всегда;
— Рядом с иконкой можно показывать, сколько раз товар добавили в избранное, получится аналог счётчика лайков;
— Иконка удаления из избранного должна заметно отличаться от иконки добавления. Также должен меняться текст подсказки;
— Кнопка перехода в избранное должна быть в шапке, таббаре (на мобильных устройствах) и отображаться, даже если в избранном ничего нет. Если товары там есть, можно отображать бейдж с их количеством;
— Если пользователь не авторизован, можно предложить ему войти, так как у него могли быть товары в избранном. После авторизации можно пометить новые товары в избранном;
— Как плейсхолдер в пустом избранном можно также отображать лаконичное пояснение и призыв к действию, кнопки перехода в каталог, возврата назад;
— В избранном должны быть полноценные карточки товаров;
— Можно добавить разделение на категории, сортировку, возможность перенести всё в корзину, похожие товары;
— Дайте возможность очистить избранное в одно нажатие.
#favorites
— Добавление в избранное должно быть доступно в списке товаров, корзине, на странице товара;
— Привычная иконка для избранного — сердечко или закладка. Привычное расположение — в правом верхнем углу карточки товара и рядом с кнопкой покупки на странице товара;
— Если надо разгрузить интерфейс, можно отображать её при наведении курсора. При этом маркер того, что товар в избранном, должен быть виден всегда;
— Рядом с иконкой можно показывать, сколько раз товар добавили в избранное, получится аналог счётчика лайков;
— Иконка удаления из избранного должна заметно отличаться от иконки добавления. Также должен меняться текст подсказки;
— Кнопка перехода в избранное должна быть в шапке, таббаре (на мобильных устройствах) и отображаться, даже если в избранном ничего нет. Если товары там есть, можно отображать бейдж с их количеством;
— Если пользователь не авторизован, можно предложить ему войти, так как у него могли быть товары в избранном. После авторизации можно пометить новые товары в избранном;
— Как плейсхолдер в пустом избранном можно также отображать лаконичное пояснение и призыв к действию, кнопки перехода в каталог, возврата назад;
— В избранном должны быть полноценные карточки товаров;
— Можно добавить разделение на категории, сортировку, возможность перенести всё в корзину, похожие товары;
— Дайте возможность очистить избранное в одно нажатие.
#favorites
Hardclient
Проектируем работу с избранным в интернет-магазине: 117 гайдлайнов
Лучшие практики UX/UI в E-Commerce
Ксения Беляева написала о дизайн-ревью, когда дизайнер проверяет, как разработчик воплотил его дизайн.
— Он делает это перед релизом: фиксирует отличия реализации от макетов, а потом подтверждает, что они были устранены;
— Без ревью дизайнер не знал, что уже готово, реальный продукт мог отличаться от макетов, а его замечания по отличиям получали низкий приоритет (вызывало ощущение работы в стол);
— Это не дополнительный этап: ревью дизайнера не должно задерживать разработку и может происходить параллельно с тестированием или до него;
— У задач по ревью самый высокий приоритет. Сложно предугадать их появление, поэтому ревью иногда сдвигает другие задачи по дизайну;
— Ревью улучшает качество выпускаемых продуктов и коммуникацию между менеджером, дизайнером и разработчиком, которая часто отсутствует. Разработчик может повлиять на дизайн в процессе вёрстки;
— Без подтверждения дизайнера задачу закрыть нельзя, но иногда приходится идти на компромисс. В свойствах ошибки есть приоритет. Если все ошибки со средним и высоким приоритетом исправлены, а на правки с низким нет времени, задачу можно подтвердить;
— В статье есть пример настройки Джиры под этот процесс, шаблоны для фиксации отличий, чеклист для дизайн-ревью.
#process
— Он делает это перед релизом: фиксирует отличия реализации от макетов, а потом подтверждает, что они были устранены;
— Без ревью дизайнер не знал, что уже готово, реальный продукт мог отличаться от макетов, а его замечания по отличиям получали низкий приоритет (вызывало ощущение работы в стол);
— Это не дополнительный этап: ревью дизайнера не должно задерживать разработку и может происходить параллельно с тестированием или до него;
— У задач по ревью самый высокий приоритет. Сложно предугадать их появление, поэтому ревью иногда сдвигает другие задачи по дизайну;
— Ревью улучшает качество выпускаемых продуктов и коммуникацию между менеджером, дизайнером и разработчиком, которая часто отсутствует. Разработчик может повлиять на дизайн в процессе вёрстки;
— Без подтверждения дизайнера задачу закрыть нельзя, но иногда приходится идти на компромисс. В свойствах ошибки есть приоритет. Если все ошибки со средним и высоким приоритетом исправлены, а на правки с низким нет времени, задачу можно подтвердить;
— В статье есть пример настройки Джиры под этот процесс, шаблоны для фиксации отличий, чеклист для дизайн-ревью.
#process
Хабр
Как дизайнеры тестируют, или Что такое дизайн-ревью
Привет! Меня зовут Ксюша, я старший продуктовый дизайнер в Ozon: проектирую разделы возвратов для личных кабинетов покупателя ( Ozon.ru ) и продавца (Seller Center) и немного — админки. Дизайнеры на...
Тоня Сергеева написала, что делать с цифрами в тексте.
— Цифры сами по себе мало что значат. Важно задать контекст (рассказать о ситуации и показать, насколько значима конкретная цифра) и убедиться, что аудитория его понимает;
— Цифрами хорошо заменять относительные словесные характеристики. Дорого — это сколько? Что значит быстрая доставка?
— Можно сравнить имеющиеся цифры с чем-то более понятным;
— Если факт и цифра — любопытные, но в основной текст их не вставить, можно рассказать о них в подписи к иллюстрации.
#writing
— Цифры сами по себе мало что значат. Важно задать контекст (рассказать о ситуации и показать, насколько значима конкретная цифра) и убедиться, что аудитория его понимает;
— Цифрами хорошо заменять относительные словесные характеристики. Дорого — это сколько? Что значит быстрая доставка?
— Можно сравнить имеющиеся цифры с чем-то более понятным;
— Если факт и цифра — любопытные, но в основной текст их не вставить, можно рассказать о них в подписи к иллюстрации.
#writing
Тоня Сергеева
Что делать с цифрами в статьях, инструкциях и других материалах
Парочка приемов
Тарас Бакусевич написал, как улучшить визуализацию данных.
— Всегда начинайте гистограммы с нулевого базового уровня. Иначе воспринимаемая разница в высотах прямоугольников будет отличаться от реальной разницы показанных ими значений;
— Для линейных диаграмм можно адаптировать масштаб оси Y, чтобы график не был слишком плоским (пусть он занимает 2/3 диапазона оси Y);
— Будьте осторожны с двухосными диаграммами, на которых отображается два ряда данных в разном масштабе. Люди часто ошибаются при их чтении;
— Ограничивайте количество секторов на круговой диаграмме. Оставьте 5—7 сегментов, а самые маленькие сгруппируйте в «Другое»;
— Перемещайте подписи из легенды прямо на диаграмму, но не на сами графические элементы диаграммы (понизит их читаемость);
— Упорядочивайте элементы диаграммы по значениям, а не по подписям (в алфавитном порядке), чтобы легко можно было увидеть самое большое значение, второе, самое маленькое и так далее;
— Чем тоньше кольцевая диаграмма, тем сложнее её читать.
In English. #data_visualization
— Всегда начинайте гистограммы с нулевого базового уровня. Иначе воспринимаемая разница в высотах прямоугольников будет отличаться от реальной разницы показанных ими значений;
— Для линейных диаграмм можно адаптировать масштаб оси Y, чтобы график не был слишком плоским (пусть он занимает 2/3 диапазона оси Y);
— Будьте осторожны с двухосными диаграммами, на которых отображается два ряда данных в разном масштабе. Люди часто ошибаются при их чтении;
— Ограничивайте количество секторов на круговой диаграмме. Оставьте 5—7 сегментов, а самые маленькие сгруппируйте в «Другое»;
— Перемещайте подписи из легенды прямо на диаграмму, но не на сами графические элементы диаграммы (понизит их читаемость);
— Упорядочивайте элементы диаграммы по значениям, а не по подписям (в алфавитном порядке), чтобы легко можно было увидеть самое большое значение, второе, самое маленькое и так далее;
— Чем тоньше кольцевая диаграмма, тем сложнее её читать.
In English. #data_visualization
UXPUB 🇺🇦 Дизайн-спільнота
20 правил для улучшения визуализации данных
Приложения, которые мы проектируем, все больше зависят от данных. Потребность в качественной...
Энтони Мёрфи написал о пользовательских исследованиях и сборе историй.
— Чтобы выявить пользовательские потребности, нельзя просто спрашивать пользователей, чего бы они хотели. Их мнения будут обусловлены предубеждениями и стереотипами;
— Задача исследователя на интервью — выявить пользовательские проблемы и потребности, а не собрать идеи решений. «Более быстрая лошадь» → «Быстрее добираться до места назначения»;
— Когда респондент говорит, что ему что-то нравится, это не значит, что он это купит. Опытные интервьюеры задают более конкретные вопросы вроде «Как вы думаете, вы будете это использовать?»;
— Слова респондента могут расходиться с реальным поведением, его ответы могут зависеть от формулировок вопросов. С этим помогает наблюдение (в том числе пользовательское тестирование);
— Контекстное исследование — тип полевого исследования, которое включает в себя углублённое наблюдение и интервью с небольшой выборкой пользователей для получения глубокого понимания рабочих практик и поведения;
— Сбор историй — описание прошлого поведения. Респондент подробно рассказывает о своём опыте: что делал, почему и как;
— Это проще контекстного исследования, позволяет узнать факты (прошлое поведение — факт) и не упустить контекст (в отличие от наблюдения за пользователями в юзабилити-лаборатории);
— Но стоит помнить, что а) память человека несовершенна, б) действия, выполняемые на автомате, сложно вспомнить, в) люди могут врать.
In English. #research #interview
— Чтобы выявить пользовательские потребности, нельзя просто спрашивать пользователей, чего бы они хотели. Их мнения будут обусловлены предубеждениями и стереотипами;
— Задача исследователя на интервью — выявить пользовательские проблемы и потребности, а не собрать идеи решений. «Более быстрая лошадь» → «Быстрее добираться до места назначения»;
— Когда респондент говорит, что ему что-то нравится, это не значит, что он это купит. Опытные интервьюеры задают более конкретные вопросы вроде «Как вы думаете, вы будете это использовать?»;
— Слова респондента могут расходиться с реальным поведением, его ответы могут зависеть от формулировок вопросов. С этим помогает наблюдение (в том числе пользовательское тестирование);
— Контекстное исследование — тип полевого исследования, которое включает в себя углублённое наблюдение и интервью с небольшой выборкой пользователей для получения глубокого понимания рабочих практик и поведения;
— Сбор историй — описание прошлого поведения. Респондент подробно рассказывает о своём опыте: что делал, почему и как;
— Это проще контекстного исследования, позволяет узнать факты (прошлое поведение — факт) и не упустить контекст (в отличие от наблюдения за пользователями в юзабилити-лаборатории);
— Но стоит помнить, что а) память человека несовершенна, б) действия, выполняемые на автомате, сложно вспомнить, в) люди могут врать.
In English. #research #interview
vc.ru
Искусство проведения пользовательских интервью — Маркетинг на vc.ru
Как раскрыть скрытые потребности пользователей путем сбора историй
Альтернативные решения по организации хлебных крошек (в мобильных версиях интернет-магазинов) из опубликованной ранее статьи Эдварда Скотта:
— Чтобы уменьшить длину хлебных крошек, можно не отображать в них некоторые категории (уровни иерархии);
— Но тогда пользователи могут а) неправильно понять, как организован сайт и где они находятся, б) перейти на более высокий уровень иерархии, чем хотели бы, и увидеть менее релевантные товары;
— Также в хлебных крошках можно отображать только текущую категорию;
— Но это не позволяет а) понять, как организован сайт, б) перейти больше чем на один уровень иерархии за раз;
— Такое решение даёт удобную возможность вернуться на шаг назад, но создаёт проблемы тем, кто попадает на страницу товара нелинейно. Ссылка вернёт их в родительскую категорию? Сохранятся ли применённые фильтры и сортировки?
— Ссылки в хлебных крошках можно переносить на следующие строки;
— Но так пользователям сложнее прицеливаться в нужную ссылку, а верхняя часть страницы визуально перегружается. Решение актуально для сайтов с неглубокой иерархией, где вероятность переноса невелика.
In English. #breadcrumbs
— Чтобы уменьшить длину хлебных крошек, можно не отображать в них некоторые категории (уровни иерархии);
— Но тогда пользователи могут а) неправильно понять, как организован сайт и где они находятся, б) перейти на более высокий уровень иерархии, чем хотели бы, и увидеть менее релевантные товары;
— Также в хлебных крошках можно отображать только текущую категорию;
— Но это не позволяет а) понять, как организован сайт, б) перейти больше чем на один уровень иерархии за раз;
— Такое решение даёт удобную возможность вернуться на шаг назад, но создаёт проблемы тем, кто попадает на страницу товара нелинейно. Ссылка вернёт их в родительскую категорию? Сохранятся ли применённые фильтры и сортировки?
— Ссылки в хлебных крошках можно переносить на следующие строки;
— Но так пользователям сложнее прицеливаться в нужную ссылку, а верхняя часть страницы визуально перегружается. Решение актуально для сайтов с неглубокой иерархией, где вероятность переноса невелика.
In English. #breadcrumbs
www.uprock.ru
Создаем эффективные «хлебные крошки» для мобильных устройств
Название элемента является отсылкой к немецкой сказке «Гензель и Гретель», в которой дети разбрасывали хлебные крошки в лесу, чтобы найти дорогу домой.
Станислав Хрусталёв написал о каталоге товаров.
— Кнопку каталога размещайте в шапке, таббаре (на мобильных устройствах), чтобы она была доступна при любом уровне прокрутки страницы;
— Лучше расположить её рядом со строкой поиска, так как это два основных способа поиска товаров;
— Она должна привлекать внимание, быть акцентной, включать иконку и текст (привычный вариант — «Каталог»);
— Меню каталога должно отображаться при нажатии, а не при наведении курсора на эту кнопку;
— Каталог можно структурировать по нескольким направлениям (типам товаров, поводам, стилям, брендам и так далее), отталкиваясь от пользовательских шаблонов поиска;
— Разделение каталога на категории и подкатегории должно быть достаточно детальным, чтобы пользователь экономил время (зачем переходить в категорию «Ноутбуки» тому, кто хочет купить Макбук), и в то же время таким, чтобы в итоговом списке товаров было из чего выбрать;
— Аксессуары к товарам размещайте в одной с ними категории;
— Если каталог большой, чтобы избежать информационной перегрузки, подкатегории можно отображать только для выбранной категории (поэтапное отображение);
— На десктопе раскрытие подкатегорий — при наведении курсора на категорию, открытие списка товаров — при нажатии на неё;
— На мобильном раскрытие подкатегорий может происходить при нажатии на специальный контрол (например, плюс рядом с названием категории), либо при нажатии на категорию. Тогда для перехода в список товаров категории может быть отдельный пункт в раскрывающемся списке подкатегорий;
— В выбранной категории (например, «Детские товары») можно показывать и подкатегории, и популярные бренды (вроде Lego);
— Также в меню каталога можно разместить ссылки на конструкторы, гайды по выбору товаров, тематические подборки;
— Если верхнеуровневых категорий немного, можно разместить их прямо в шапке, сопроводить иллюстрациями, сделать частью главной страницы;
— Сортируйте категории (по типам товаров) по популярности. Бренды лучше сортировать по алфавиту;
— Собирайте подкатегории в вертикальный список, а не в строку;
— Добавляйте кнопку «Ещё» или «Ещё N», если подкатегорий слишком много. Не отображайте её, если не влезла всего одна подкатегория. Визуально она должна отличаться от подкатегорий в списке. После нажатия дайте возможность вернуться к сокращённому списку подкатегорий («Свернуть»).
#catalog #ecommerce
— Кнопку каталога размещайте в шапке, таббаре (на мобильных устройствах), чтобы она была доступна при любом уровне прокрутки страницы;
— Лучше расположить её рядом со строкой поиска, так как это два основных способа поиска товаров;
— Она должна привлекать внимание, быть акцентной, включать иконку и текст (привычный вариант — «Каталог»);
— Меню каталога должно отображаться при нажатии, а не при наведении курсора на эту кнопку;
— Каталог можно структурировать по нескольким направлениям (типам товаров, поводам, стилям, брендам и так далее), отталкиваясь от пользовательских шаблонов поиска;
— Разделение каталога на категории и подкатегории должно быть достаточно детальным, чтобы пользователь экономил время (зачем переходить в категорию «Ноутбуки» тому, кто хочет купить Макбук), и в то же время таким, чтобы в итоговом списке товаров было из чего выбрать;
— Аксессуары к товарам размещайте в одной с ними категории;
— Если каталог большой, чтобы избежать информационной перегрузки, подкатегории можно отображать только для выбранной категории (поэтапное отображение);
— На десктопе раскрытие подкатегорий — при наведении курсора на категорию, открытие списка товаров — при нажатии на неё;
— На мобильном раскрытие подкатегорий может происходить при нажатии на специальный контрол (например, плюс рядом с названием категории), либо при нажатии на категорию. Тогда для перехода в список товаров категории может быть отдельный пункт в раскрывающемся списке подкатегорий;
— В выбранной категории (например, «Детские товары») можно показывать и подкатегории, и популярные бренды (вроде Lego);
— Также в меню каталога можно разместить ссылки на конструкторы, гайды по выбору товаров, тематические подборки;
— Если верхнеуровневых категорий немного, можно разместить их прямо в шапке, сопроводить иллюстрациями, сделать частью главной страницы;
— Сортируйте категории (по типам товаров) по популярности. Бренды лучше сортировать по алфавиту;
— Собирайте подкатегории в вертикальный список, а не в строку;
— Добавляйте кнопку «Ещё» или «Ещё N», если подкатегорий слишком много. Не отображайте её, если не влезла всего одна подкатегория. Визуально она должна отличаться от подкатегорий в списке. После нажатия дайте возможность вернуться к сокращённому списку подкатегорий («Свернуть»).
#catalog #ecommerce
Hardclient
Работа с каталогом товаров в интернет-магазине: 152 гайдлайна
Лучшие практики UX/UI в E-Commerce
Ксения Морозова пересказала ключевые мысли из книги Дона Нормана «Дизайн привычных вещей».
Например, об ограничителях:
Знания определяют точность действий. Но не все они удерживаются в нашей памяти. Часть хранится в окружающем мире и в его ограничителях. И нет необходимости заучивать абсолютно всё со стопроцентной точностью.
Такие ограничители (физические, смысловые, культурные, логические) стоит активно использовать в дизайне. Важно помнить, что надписи и пометки хороши не везде. Точнее почти везде они необходимы, но как дополнительный элемент, обеспечивающий запоминание. Норман заявляет: «Если без надписей не обойтись — меняйте дизайн!». (Забавный пример такого дизайна.)
Очевидное назначение предмета предлагает пользователю возможности, а ограничители помогают выбрать среди множества вариантов правильные.
#book
Например, об ограничителях:
Знания определяют точность действий. Но не все они удерживаются в нашей памяти. Часть хранится в окружающем мире и в его ограничителях. И нет необходимости заучивать абсолютно всё со стопроцентной точностью.
Такие ограничители (физические, смысловые, культурные, логические) стоит активно использовать в дизайне. Важно помнить, что надписи и пометки хороши не везде. Точнее почти везде они необходимы, но как дополнительный элемент, обеспечивающий запоминание. Норман заявляет: «Если без надписей не обойтись — меняйте дизайн!». (Забавный пример такого дизайна.)
Очевидное назначение предмета предлагает пользователю возможности, а ограничители помогают выбрать среди множества вариантов правильные.
#book
Хабр
«Дизайн привычных вещей» Нормана
Зачем читать книгу Для того, чтобы научиться отличать плохой дизайн от хорошего и находить решения по его улучшению. Чем крут автор Дональд Норман — учёный-когнитивист, профессор информатики. Успел...
Энтони Ценг написал о боковой панели меню.
— Добавьте иконки, чтобы ускорить распознавание пунктов меню;
— Расстояние между пунктами должно быть не слишком маленьким, чтобы пользователи реже нажимали не туда;
— Выделяйте пункт при наведении курсора;
— Если пунктов много, группируйте их (например, с помощью разделителей). Группы можно озаглавить;
— В сочетании с таким меню поле поиска и информацию о пользователе часто располагают в верхней части экрана;
— Если в верхней части страниц есть навигация и другие элементы управления, поиск и информацию о пользователе можно переместить на панель меню: поиск — под логотип, пользователя — в нижнюю её часть;
— На планшетах боковую панель можно сделать раздвижной. В уменьшенном состоянии на ней будут: иконки пунктов меню, поиска, фото пользователя и контрол увеличения размера панели.
In English. #sidebar #menu
— Добавьте иконки, чтобы ускорить распознавание пунктов меню;
— Расстояние между пунктами должно быть не слишком маленьким, чтобы пользователи реже нажимали не туда;
— Выделяйте пункт при наведении курсора;
— Если пунктов много, группируйте их (например, с помощью разделителей). Группы можно озаглавить;
— В сочетании с таким меню поле поиска и информацию о пользователе часто располагают в верхней части экрана;
— Если в верхней части страниц есть навигация и другие элементы управления, поиск и информацию о пользователе можно переместить на панель меню: поиск — под логотип, пользователя — в нижнюю её часть;
— На планшетах боковую панель можно сделать раздвижной. В уменьшенном состоянии на ней будут: иконки пунктов меню, поиска, фото пользователя и контрол увеличения размера панели.
In English. #sidebar #menu
www.uprock.ru
Как сделать боковую панель меню более удобной?
Боковая панель меню — идеальный компонент навигации веб-приложений. Она раскрывается на всю ширину экрана, чтобы пользователям было легче ориентироваться.
В «Атвинте» написали о дашбордах.
— Дашборд должен экономить время, показывать реальную ситуацию в бизнесе и процессах, помогать принимать решения;
— При его разработке учитывайте потребности конкретных специалистов. Одна и та же информация может быть сигналом к действию для одних и совершенно бесполезной для других;
— Без исследований не обойтись: поговорите с теми, кто будет пользоваться дашбордом, понаблюдайте за их рабочим днём, привлеките разбирающихся в процессах консультантов;
— Выявленные показатели распределите по группам. Основной принцип: в группе описывается одно явление или субъект. Например: показатели эффективности, отдельного направления, подразделения или сотрудника;
— Группировать данные удобно с помощью плашек. На одной плашке может быть диаграмма, структура и общее количество, но все они должны рассказывать об одном явлении;
— Если данных мало, можно поместить их на плашке дашборда. Если много, стоит выделить им отдельный экран;
— Многоуровневый дашборд: 1) На главном экране — плашки с основными показателями групп данных, отражающие картину в целом; 2) На дополнительных экранах — более подробная информация, позволяющая рассмотреть картину детально;
— Принцип «чем больше данных, тем лучше» в дашбордах не работает;
— Основные показатели выделяйте размером, чтобы пользователь обращал на них внимание в первую очередь;
— Чтобы максимизировать полезное пространство (и чтобы осталось место для воздуха), сокращайте и сворачивайте элементы интерфейса: сайдбары, навигацию, выпадающие списки, фильтрацию, кнопки;
— Используйте цвет. Есть сложившиеся паттерны: зелёный воспринимается как что-то позитивное, красный как негативное;
— Графики, схемы, диаграммы и карты помогают анализировать данные быстрее. Это основной инструмент дашборда;
— В структурных диаграммах видны преобладающие доли и обычно нет абсолютных величин, но пользователь быстро замечает отклонение от обычной структуры и может углубиться в детали;
— Выбирайте более простые и очевидные виды диаграмм и проверяйте с будущими пользователями, насколько они понятны. Особенно, если надо визуализировать нестандартный набор данных;
— Полезно создать тёмную тему: части пользователей так будет удобнее, плюс, она лучше смотрится на больших экранах на совещаниях;
— Если есть чётко регламентированные процессы, то в случае ухудшения того или иного показателя можно выводить на дашборде план действий для сотрудника;
— Удобно отображать поясняющую информацию по показателю при наведении курсора на диаграмму.
#dashboard
— Дашборд должен экономить время, показывать реальную ситуацию в бизнесе и процессах, помогать принимать решения;
— При его разработке учитывайте потребности конкретных специалистов. Одна и та же информация может быть сигналом к действию для одних и совершенно бесполезной для других;
— Без исследований не обойтись: поговорите с теми, кто будет пользоваться дашбордом, понаблюдайте за их рабочим днём, привлеките разбирающихся в процессах консультантов;
— Выявленные показатели распределите по группам. Основной принцип: в группе описывается одно явление или субъект. Например: показатели эффективности, отдельного направления, подразделения или сотрудника;
— Группировать данные удобно с помощью плашек. На одной плашке может быть диаграмма, структура и общее количество, но все они должны рассказывать об одном явлении;
— Если данных мало, можно поместить их на плашке дашборда. Если много, стоит выделить им отдельный экран;
— Многоуровневый дашборд: 1) На главном экране — плашки с основными показателями групп данных, отражающие картину в целом; 2) На дополнительных экранах — более подробная информация, позволяющая рассмотреть картину детально;
— Принцип «чем больше данных, тем лучше» в дашбордах не работает;
— Основные показатели выделяйте размером, чтобы пользователь обращал на них внимание в первую очередь;
— Чтобы максимизировать полезное пространство (и чтобы осталось место для воздуха), сокращайте и сворачивайте элементы интерфейса: сайдбары, навигацию, выпадающие списки, фильтрацию, кнопки;
— Используйте цвет. Есть сложившиеся паттерны: зелёный воспринимается как что-то позитивное, красный как негативное;
— Графики, схемы, диаграммы и карты помогают анализировать данные быстрее. Это основной инструмент дашборда;
— В структурных диаграммах видны преобладающие доли и обычно нет абсолютных величин, но пользователь быстро замечает отклонение от обычной структуры и может углубиться в детали;
— Выбирайте более простые и очевидные виды диаграмм и проверяйте с будущими пользователями, насколько они понятны. Особенно, если надо визуализировать нестандартный набор данных;
— Полезно создать тёмную тему: части пользователей так будет удобнее, плюс, она лучше смотрится на больших экранах на совещаниях;
— Если есть чётко регламентированные процессы, то в случае ухудшения того или иного показателя можно выводить на дашборде план действий для сотрудника;
— Удобно отображать поясняющую информацию по показателю при наведении курсора на диаграмму.
#dashboard
vc.ru
Как дизайн помогает принимать решения бизнесу и государству: делаем дашборды, которыми будут пользоваться — Дизайн на vc.ru
«Атвинта» на примерах показывает, как и какие данные размещать на аналитических панелях.
Кейт Моран написала о пользовательском тестировании контента.
— Исследователь должен хорошо знать контент. Не надо быть экспертом, например, в сложных финансовых инструментах, но надо примерно понимать, что читают респонденты;
— Лучше проводить модерируемые тесты. Респонденты сравнительно много времени просто читают в тишине. Без модератора они могут почувствовать себя неловко, решить, что в их работе мало толка, и отнестись к задачам поверхностно;
— Также модератор может задать уточняющие вопросы вроде «Я заметил, что вы колебались по поводу этого пункта, не могли бы вы рассказать, о чем вы думали?»;
— Или спросить «Представьте, что человек сказал вам эти слова. Кем бы он мог быть? Как бы он выглядел или вёл себя? Какая у него была бы работа?», чтобы респондент таким образом описал тон текста;
— Не используйте слово «контент» при общении с респондентами;
— Тестировать контент надо на тех, для кого он написан. В отличие от исследования интерфейса, респондент не должен представлять, что находится в той или иной ситуации, например, что ему надо узнать о неходжкинской лимфоме. Это, конечно, усложняет поиск респондентов;
— Подготовьте для теста общие задания, но будьте готовы адаптировать или создавать новые во время исследования по мере того, как будете узнавать больше о ситуации участника;
— Также можно обсудить его ситуацию в начале сессии или на предварительном собеседовании, чтобы убедиться, что сценарий тестирования будет ей соответствовать;
— Чтобы оценить качество и актуальность контента, используйте открытые вопросы, у которых нет окончательного ответа.
In English. #user_testing #writing
— Исследователь должен хорошо знать контент. Не надо быть экспертом, например, в сложных финансовых инструментах, но надо примерно понимать, что читают респонденты;
— Лучше проводить модерируемые тесты. Респонденты сравнительно много времени просто читают в тишине. Без модератора они могут почувствовать себя неловко, решить, что в их работе мало толка, и отнестись к задачам поверхностно;
— Также модератор может задать уточняющие вопросы вроде «Я заметил, что вы колебались по поводу этого пункта, не могли бы вы рассказать, о чем вы думали?»;
— Или спросить «Представьте, что человек сказал вам эти слова. Кем бы он мог быть? Как бы он выглядел или вёл себя? Какая у него была бы работа?», чтобы респондент таким образом описал тон текста;
— Не используйте слово «контент» при общении с респондентами;
— Тестировать контент надо на тех, для кого он написан. В отличие от исследования интерфейса, респондент не должен представлять, что находится в той или иной ситуации, например, что ему надо узнать о неходжкинской лимфоме. Это, конечно, усложняет поиск респондентов;
— Подготовьте для теста общие задания, но будьте готовы адаптировать или создавать новые во время исследования по мере того, как будете узнавать больше о ситуации участника;
— Также можно обсудить его ситуацию в начале сессии или на предварительном собеседовании, чтобы убедиться, что сценарий тестирования будет ей соответствовать;
— Чтобы оценить качество и актуальность контента, используйте открытые вопросы, у которых нет окончательного ответа.
In English. #user_testing #writing
Teletype
Как тестировать контент с пользователями
Перевод статьи NN/g.
Forwarded from Визуальные приёмы
Хаос
Один из любимых приёмов: не стесняясь, вывалить на зрителя всю мощь хаоса.
Источник
#композиция #плакат
Один из любимых приёмов: не стесняясь, вывалить на зрителя всю мощь хаоса.
Источник
#композиция #плакат
Илья Бирман написал о кнопке «Подробнее» в карточках.
— Это не информативное слово. Что за ним скрывается, приходится узнавать из контекста. Добавлю: особенно непросто это пользователям скринридеров;
— Множественные «Подробнее» выглядят совершенно одинаково;
— Лучше написать конкретно, что по ссылке, например, «Условия и подключение»;
— В случае с карточкой кнопка вообще не нужна, сам внешний вид карточки должен показывать, что на неё можно нажать, чтобы узнать подробности. Можно добавить в её угол › (стрелочку вправо).
#writing
— Это не информативное слово. Что за ним скрывается, приходится узнавать из контекста. Добавлю: особенно непросто это пользователям скринридеров;
— Множественные «Подробнее» выглядят совершенно одинаково;
— Лучше написать конкретно, что по ссылке, например, «Условия и подключение»;
— В случае с карточкой кнопка вообще не нужна, сам внешний вид карточки должен показывать, что на неё можно нажать, чтобы узнать подробности. Можно добавить в её угол › (стрелочку вправо).
#writing
Бюро Горбунова
Кнопка «Подробнее»
Привет!
Мне не нравится кнопка «Подробнее» в карточках, ведь всегда можно обойтись без неё. Но у клиентов и других дизайнеров иное мнение, поэтому её часто можно встретить на сайтах.
Расскажите, по какому принципу стоит ставить кнопку и вовсе отказаться…
Мне не нравится кнопка «Подробнее» в карточках, ведь всегда можно обойтись без неё. Но у клиентов и других дизайнеров иное мнение, поэтому её часто можно встретить на сайтах.
Расскажите, по какому принципу стоит ставить кнопку и вовсе отказаться…
Аджая из Opera написал, каким должен быть онбординг, чтобы помогать удерживать пользователей.
— Не пытайтесь онбордингом вызвать вау-эффект. Он должен быть максимально простым. Рассказывайте о базовых и желаемых фичах по модели Кано;
— Важно исследовать контекст, в котором пользователь существует и взаимодействует с продуктом: физический, эмоциональный и социальный. Для этого проведите этнографические исследования;
— Определите категорию вашего продукта, как он решает пользовательские задачи. Онбординг начинается не в приложении, а когда человек находит его по названию или в категории и читает описание;
— Инструменты онбординга: статические слайды (которые пользователь просматривает перед началом работы), интерактивные слайды (интегрированы в контекст использования, на них пользователь взаимодействует с реальным интерфейсом), подсказки (если есть много интерактивных элементов или сложная навигация), пустые состояния и примеры данных (хорошо подходят для продуктов с большим объёмом пользовательского контента);
— Пустые состояния помогают органично рассказывать о том, как работают те или иные фичи, и подталкивать к нужным действиям;
— Онбординг должен рассказывать не о возможностях продукта, а о том, как он поможет пользователю достичь своей цели.
In English. #onboarding
— Не пытайтесь онбордингом вызвать вау-эффект. Он должен быть максимально простым. Рассказывайте о базовых и желаемых фичах по модели Кано;
— Важно исследовать контекст, в котором пользователь существует и взаимодействует с продуктом: физический, эмоциональный и социальный. Для этого проведите этнографические исследования;
— Определите категорию вашего продукта, как он решает пользовательские задачи. Онбординг начинается не в приложении, а когда человек находит его по названию или в категории и читает описание;
— Инструменты онбординга: статические слайды (которые пользователь просматривает перед началом работы), интерактивные слайды (интегрированы в контекст использования, на них пользователь взаимодействует с реальным интерфейсом), подсказки (если есть много интерактивных элементов или сложная навигация), пустые состояния и примеры данных (хорошо подходят для продуктов с большим объёмом пользовательского контента);
— Пустые состояния помогают органично рассказывать о том, как работают те или иные фичи, и подталкивать к нужным действиям;
— Онбординг должен рассказывать не о возможностях продукта, а о том, как он поможет пользователю достичь своей цели.
In English. #onboarding
Блог ProductSense
Онбординг в приложении как инструмент retention: основные принципы проектирования и механики
Удержание пользователей происходит с помощью правильной активации и онбординга, а не за счет навязчивой бомбардировки пушами и постоянного добавления новых функций (в итоге пользователи просто уста…
Михаил Рубанов написал о дизайне слайдера для быстрой оплаты.
— В приложении кнопка быстрого заказа кофе появлялась прямо в списке товаров. Она позволяла и перейти в корзину, и сразу оплатить;
— Чтобы решить проблему мискликов и добавить кайфа от использования приложения, решили заменить нажатие на свайп. Так действие станет сложнее, но позволит избежать ошибок и будет более интересным. Отлично подходит для финального действия в приложении;
— Основой стал Slide to Unlock из самого первого айфона;
— Проработали состояния, анимации (метафора натяжения), вибрации, разные ответвления сценария (длительное ожидание оплаты, открытие экрана ввода карты при первой оплате), а также доступность этого элемента.
«Анимации помогают в самых разных ситуациях: учат, скрашивают ожидание или дают обратную связь. В любом случае, анимация должна быть осмысленна.
В самом начале мы должны научить людей пользоваться нашим слайдером. Сценариев несколько:
— при добавлении в корзину запускаем анимацию, которая показывает надпись и подсказывает, что нужно перетащить. Так научим новых пользователей;
— при тапе на кнопку делаем то же самое. Так переучим старых пользователей: теперь нужно не тапать, а тащить;
— время от времени ещё раз мигаем анимацией, чтобы привлечь внимание, если пропустили на прошлых этапах».
#slider #animation
— В приложении кнопка быстрого заказа кофе появлялась прямо в списке товаров. Она позволяла и перейти в корзину, и сразу оплатить;
— Чтобы решить проблему мискликов и добавить кайфа от использования приложения, решили заменить нажатие на свайп. Так действие станет сложнее, но позволит избежать ошибок и будет более интересным. Отлично подходит для финального действия в приложении;
— Основой стал Slide to Unlock из самого первого айфона;
— Проработали состояния, анимации (метафора натяжения), вибрации, разные ответвления сценария (длительное ожидание оплаты, открытие экрана ввода карты при первой оплате), а также доступность этого элемента.
«Анимации помогают в самых разных ситуациях: учат, скрашивают ожидание или дают обратную связь. В любом случае, анимация должна быть осмысленна.
В самом начале мы должны научить людей пользоваться нашим слайдером. Сценариев несколько:
— при добавлении в корзину запускаем анимацию, которая показывает надпись и подсказывает, что нужно перетащить. Так научим новых пользователей;
— при тапе на кнопку делаем то же самое. Так переучим старых пользователей: теперь нужно не тапать, а тащить;
— время от времени ещё раз мигаем анимацией, чтобы привлечь внимание, если пропустили на прошлых этапах».
#slider #animation
Хабр
Анимации и вибрации: как задизайнить фидбэк слайдера оплаты
Кофе — продукт, который можно покупать и пить хоть несколько раз в день. Заказ в приложении Дринкит должен быть супер-пупер быстрым. В идеале, чтобы можно было даже не запускать его, а заказывать из...
Эдвард Скотт написал о частых ошибках в дизайне интернет-магазинов одежды.
— 94% исследованных Baymard Institute магазинов совершают как минимум одну из этих ошибок;
— Если в интернет-магазине нет нужной для принятия решения информации, покупатель скорее откажется от покупки, так как рискует купить то, что будет плохо сидеть;
— 1) Недостаточно информации о размерах. Добавьте мерки предметов одежды, используйте разные единицы измерения (дюймы, сантиметры), добавьте таблицы соответствия международных размеров, инструкции по снятию мерок, укажите параметры моделей на фото;
— 2) Разновидности товара по цветам, размерам и другим параметрам представлены отдельными карточками товаров. Объедините их в одну, а параметры покажите в переключателе (но будет сложно технически и организационно);
— 3) Не очевидно, какие размеры есть в наличии. Не используйте раскрывающийся список для выбора размера, показывайте все доступные размеры отдельными кнопками;
— 4) Нет фотографий вещей на моделях. Манекенов или виртуальных моделей стоит использовать только в крайнем случае;
— 5) Низкое разрешение фотографий, невозможность приблизить их хотя бы на 50%, чтобы рассмотреть детали.
In English. #ecommerce
— 94% исследованных Baymard Institute магазинов совершают как минимум одну из этих ошибок;
— Если в интернет-магазине нет нужной для принятия решения информации, покупатель скорее откажется от покупки, так как рискует купить то, что будет плохо сидеть;
— 1) Недостаточно информации о размерах. Добавьте мерки предметов одежды, используйте разные единицы измерения (дюймы, сантиметры), добавьте таблицы соответствия международных размеров, инструкции по снятию мерок, укажите параметры моделей на фото;
— 2) Разновидности товара по цветам, размерам и другим параметрам представлены отдельными карточками товаров. Объедините их в одну, а параметры покажите в переключателе (но будет сложно технически и организационно);
— 3) Не очевидно, какие размеры есть в наличии. Не используйте раскрывающийся список для выбора размера, показывайте все доступные размеры отдельными кнопками;
— 4) Нет фотографий вещей на моделях. Манекенов или виртуальных моделей стоит использовать только в крайнем случае;
— 5) Низкое разрешение фотографий, невозможность приблизить их хотя бы на 50%, чтобы рассмотреть детали.
In English. #ecommerce
www.uprock.ru
5 лучших UX-практик в дизайне интернет-магазинов одежды, которым не следуют 94% сайтов
Интернет-магазин одежды, который соответствует ожиданиям пользователей или превосходит их, будет выделяться среди конкурентов и сможет оказать своим клиентам достаточную поддержку.
Кирилл Шерстобитов написал о тестировании User Flow продукта.
Если продукт уже работает:
— Можно дать респондентам задание и по итогам прохождения задать вопросы из анкеты оценки юзабилити (System Usability Scale). Полезно таким же способом проверить конкурентов и сравнить результаты. Опрос даёт количественные оценки и прямую речь респондентов;
— Провести удалённое немодерируемое тестирование. Респонденты выполняют задание под запись экрана, а потом дают обратную связь. Тестирование помогает увидеть, с какими проблемами сталкиваются люди, но не позволяет уточнить у них непонятные моменты;
— Провести модерируемое тестирование. Интервьюер очно или удалённо наблюдает за респондентом и может задать уточняющие вопросы. Более трудоёмкий способ, требующий определённой квалификации.
Если продукт ещё в разработке, для каждого шага сценария можно провести First Click Test: показать дизайн или эскизы респондентам, дать задание и посмотреть, куда они нажмут. Тест даёт количественные данные, можно понять, какой шаг вызывает затруднения.
#userflow #user_testing
Если продукт уже работает:
— Можно дать респондентам задание и по итогам прохождения задать вопросы из анкеты оценки юзабилити (System Usability Scale). Полезно таким же способом проверить конкурентов и сравнить результаты. Опрос даёт количественные оценки и прямую речь респондентов;
— Провести удалённое немодерируемое тестирование. Респонденты выполняют задание под запись экрана, а потом дают обратную связь. Тестирование помогает увидеть, с какими проблемами сталкиваются люди, но не позволяет уточнить у них непонятные моменты;
— Провести модерируемое тестирование. Интервьюер очно или удалённо наблюдает за респондентом и может задать уточняющие вопросы. Более трудоёмкий способ, требующий определённой квалификации.
Если продукт ещё в разработке, для каждого шага сценария можно провести First Click Test: показать дизайн или эскизы респондентам, дать задание и посмотреть, куда они нажмут. Тест даёт количественные данные, можно понять, какой шаг вызывает затруднения.
#userflow #user_testing
vc.ru
Как тестировать user flow: четыре метода и лайфхак для бесплатного UI тестирования — Дизайн на vc.ru
Работа над User flow, пользовательским сценарием — важный этап создания интерфейса. User flow принимает различные формы в зависимости от этапа развития продукта. Расскажу, как тестировать сценарии в разных ситуациях и как это можно делать бесплатно. Пригодится…
Дарья Райт написала о кернинге.
— Кернинг — изменение интервала между двумя символами в зависимости от их размера и формы. При наборе текста между парой символов может появиться неправильное расстояние. Кернинг позволяет скорректировать пространство между ними, чтобы улучшить читаемость текста;
— Леттер-спейсинг в отличие от кернинга применяется ко всей строке, а не выбранной паре букв;
— Чтобы успешно выполнять кернинг, текст на экране надо увеличивать. Чем больше масштаб, тем точнее изображается шрифт и пробелы между буквами;
— При этом для достижения желаемого результата (одинаковые пробелы во всём фрагменте текста) желательно видеть весь фрагмент;
— Каждая буква должна находиться точно по центру между двумя соседними, то есть она должна занимать пассивную позицию между соседями;
— Также в статье много ссылок на дополнительные материалы и инструменты.
#typography
— Кернинг — изменение интервала между двумя символами в зависимости от их размера и формы. При наборе текста между парой символов может появиться неправильное расстояние. Кернинг позволяет скорректировать пространство между ними, чтобы улучшить читаемость текста;
— Леттер-спейсинг в отличие от кернинга применяется ко всей строке, а не выбранной паре букв;
— Чтобы успешно выполнять кернинг, текст на экране надо увеличивать. Чем больше масштаб, тем точнее изображается шрифт и пробелы между буквами;
— При этом для достижения желаемого результата (одинаковые пробелы во всём фрагменте текста) желательно видеть весь фрагмент;
— Каждая буква должна находиться точно по центру между двумя соседними, то есть она должна занимать пассивную позицию между соседями;
— Также в статье много ссылок на дополнительные материалы и инструменты.
#typography
Оди. О дизайне
Кернинг — Оди. О дизайне
Мы открываем новую рубрику «Термины дизайна». В ней мы будем делать небольшое саммари по определенному термину и давать ссылки на примеры, чтобы было легко разобраться в его сути. Сегодня мы расскажем о кернинге и его роли в типографике Кернинг — это изменение…