Станислав Хрусталёв написал о каталоге товаров.

— Кнопку каталога размещайте в шапке, таббаре (на мобильных устройствах), чтобы она была доступна при любом уровне прокрутки страницы;
— Лучше расположить её рядом со строкой поиска, так как это два основных способа поиска товаров;
— Она должна привлекать внимание, быть акцентной, включать иконку и текст (привычный вариант — «Каталог»);
— Меню каталога должно отображаться при нажатии, а не при наведении курсора на эту кнопку;
— Каталог можно структурировать по нескольким направлениям (типам товаров, поводам, стилям, брендам и так далее), отталкиваясь от пользовательских шаблонов поиска;
— Разделение каталога на категории и подкатегории должно быть достаточно детальным, чтобы пользователь экономил время (зачем переходить в категорию «Ноутбуки» тому, кто хочет купить Макбук), и в то же время таким, чтобы в итоговом списке товаров было из чего выбрать;
— Аксессуары к товарам размещайте в одной с ними категории;
— Если каталог большой, чтобы избежать информационной перегрузки, подкатегории можно отображать только для выбранной категории (поэтапное отображение);
— На десктопе раскрытие подкатегорий — при наведении курсора на категорию, открытие списка товаров — при нажатии на неё;
— На мобильном раскрытие подкатегорий может происходить при нажатии на специальный контрол (например, плюс рядом с названием категории), либо при нажатии на категорию. Тогда для перехода в список товаров категории может быть отдельный пункт в раскрывающемся списке подкатегорий;
— В выбранной категории (например, «Детские товары») можно показывать и подкатегории, и популярные бренды (вроде Lego);
— Также в меню каталога можно разместить ссылки на конструкторы, гайды по выбору товаров, тематические подборки;
— Если верхнеуровневых категорий немного, можно разместить их прямо в шапке, сопроводить иллюстрациями, сделать частью главной страницы;
— Сортируйте категории (по типам товаров) по популярности. Бренды лучше сортировать по алфавиту;
— Собирайте подкатегории в вертикальный список, а не в строку;
— Добавляйте кнопку «Ещё» или «Ещё N», если подкатегорий слишком много. Не отображайте её, если не влезла всего одна подкатегория. Визуально она должна отличаться от подкатегорий в списке. После нажатия дайте возможность вернуться к сокращённому списку подкатегорий («Свернуть»).

#catalog #ecommerce

Ксения Морозова пересказала ключевые мысли из книги Дона Нормана «Дизайн привычных вещей».

Например, об ограничителях:

Знания определяют точность действий. Но не все они удерживаются в нашей памяти. Часть хранится в окружающем мире и в его ограничителях. И нет необходимости заучивать абсолютно всё со стопроцентной точностью.

Такие ограничители (физические, смысловые, культурные, логические) стоит активно использовать в дизайне. Важно помнить, что надписи и пометки хороши не везде. Точнее почти везде они необходимы, но как дополнительный элемент, обеспечивающий запоминание. Норман заявляет: «Если без надписей не обойтись — меняйте дизайн!». (Забавный пример такого дизайна.)

Очевидное назначение предмета предлагает пользователю возможности, а ограничители помогают выбрать среди множества вариантов правильные.

#book

Энтони Ценг написал о боковой панели меню.

— Добавьте иконки, чтобы ускорить распознавание пунктов меню;
— Расстояние между пунктами должно быть не слишком маленьким, чтобы пользователи реже нажимали не туда;
— Выделяйте пункт при наведении курсора;
— Если пунктов много, группируйте их (например, с помощью разделителей). Группы можно озаглавить;
— В сочетании с таким меню поле поиска и информацию о пользователе часто располагают в верхней части экрана;
— Если в верхней части страниц есть навигация и другие элементы управления, поиск и информацию о пользователе можно переместить на панель меню: поиск — под логотип, пользователя — в нижнюю её часть;
— На планшетах боковую панель можно сделать раздвижной. В уменьшенном состоянии на ней будут: иконки пунктов меню, поиска, фото пользователя и контрол увеличения размера панели.

In English. #sidebar #menu

В «Атвинте» написали о дашбордах.

— Дашборд должен экономить время, показывать реальную ситуацию в бизнесе и процессах, помогать принимать решения;
— При его разработке учитывайте потребности конкретных специалистов. Одна и та же информация может быть сигналом к действию для одних и совершенно бесполезной для других;
— Без исследований не обойтись: поговорите с теми, кто будет пользоваться дашбордом, понаблюдайте за их рабочим днём, привлеките разбирающихся в процессах консультантов;
— Выявленные показатели распределите по группам. Основной принцип: в группе описывается одно явление или субъект. Например: показатели эффективности, отдельного направления, подразделения или сотрудника;
— Группировать данные удобно с помощью плашек. На одной плашке может быть диаграмма, структура и общее количество, но все они должны рассказывать об одном явлении;
— Если данных мало, можно поместить их на плашке дашборда. Если много, стоит выделить им отдельный экран;
— Многоуровневый дашборд: 1) На главном экране — плашки с основными показателями групп данных, отражающие картину в целом; 2) На дополнительных экранах — более подробная информация, позволяющая рассмотреть картину детально;
— Принцип «чем больше данных, тем лучше» в дашбордах не работает;
— Основные показатели выделяйте размером, чтобы пользователь обращал на них внимание в первую очередь;
— Чтобы максимизировать полезное пространство (и чтобы осталось место для воздуха), сокращайте и сворачивайте элементы интерфейса: сайдбары, навигацию, выпадающие списки, фильтрацию, кнопки;
— Используйте цвет. Есть сложившиеся паттерны: зелёный воспринимается как что-то позитивное, красный как негативное;
— Графики, схемы, диаграммы и карты помогают анализировать данные быстрее. Это основной инструмент дашборда;
— В структурных диаграммах видны преобладающие доли и обычно нет абсолютных величин, но пользователь быстро замечает отклонение от обычной структуры и может углубиться в детали;
— Выбирайте более простые и очевидные виды диаграмм и проверяйте с будущими пользователями, насколько они понятны. Особенно, если надо визуализировать нестандартный набор данных;
— Полезно создать тёмную тему: части пользователей так будет удобнее, плюс, она лучше смотрится на больших экранах на совещаниях;
— Если есть чётко регламентированные процессы, то в случае ухудшения того или иного показателя можно выводить на дашборде план действий для сотрудника;
— Удобно отображать поясняющую информацию по показателю при наведении курсора на диаграмму.

#dashboard

Кейт Моран написала о пользовательском тестировании контента.

— Исследователь должен хорошо знать контент. Не надо быть экспертом, например, в сложных финансовых инструментах, но надо примерно понимать, что читают респонденты;
— Лучше проводить модерируемые тесты. Респонденты сравнительно много времени просто читают в тишине. Без модератора они могут почувствовать себя неловко, решить, что в их работе мало толка, и отнестись к задачам поверхностно;
— Также модератор может задать уточняющие вопросы вроде «Я заметил, что вы колебались по поводу этого пункта, не могли бы вы рассказать, о чем вы думали?»;
— Или спросить «Представьте, что человек сказал вам эти слова. Кем бы он мог быть? Как бы он выглядел или вёл себя? Какая у него была бы работа?», чтобы респондент таким образом описал тон текста;
— Не используйте слово «контент» при общении с респондентами;
— Тестировать контент надо на тех, для кого он написан. В отличие от исследования интерфейса, респондент не должен представлять, что находится в той или иной ситуации, например, что ему надо узнать о неходжкинской лимфоме. Это, конечно, усложняет поиск респондентов;
— Подготовьте для теста общие задания, но будьте готовы адаптировать или создавать новые во время исследования по мере того, как будете узнавать больше о ситуации участника;
— Также можно обсудить его ситуацию в начале сессии или на предварительном собеседовании, чтобы убедиться, что сценарий тестирования будет ей соответствовать;
— Чтобы оценить качество и актуальность контента, используйте открытые вопросы, у которых нет окончательного ответа.

In English. #user_testing #writing

Илья Бирман написал о кнопке «Подробнее» в карточках.

— Это не информативное слово. Что за ним скрывается, приходится узнавать из контекста. Добавлю: особенно непросто это пользователям скринридеров;
— Множественные «Подробнее» выглядят совершенно одинаково;
— Лучше написать конкретно, что по ссылке, например, «Условия и подключение»;
— В случае с карточкой кнопка вообще не нужна, сам внешний вид карточки должен показывать, что на неё можно нажать, чтобы узнать подробности. Можно добавить в её угол › (стрелочку вправо).

#writing

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

— Не пытайтесь онбордингом вызвать вау-эффект. Он должен быть максимально простым. Рассказывайте о базовых и желаемых фичах по модели Кано;
— Важно исследовать контекст, в котором пользователь существует и взаимодействует с продуктом: физический, эмоциональный и социальный. Для этого проведите этнографические исследования;
— Определите категорию вашего продукта, как он решает пользовательские задачи. Онбординг начинается не в приложении, а когда человек находит его по названию или в категории и читает описание;
— Инструменты онбординга: статические слайды (которые пользователь просматривает перед началом работы), интерактивные слайды (интегрированы в контекст использования, на них пользователь взаимодействует с реальным интерфейсом), подсказки (если есть много интерактивных элементов или сложная навигация), пустые состояния и примеры данных (хорошо подходят для продуктов с большим объёмом пользовательского контента);
— Пустые состояния помогают органично рассказывать о том, как работают те или иные фичи, и подталкивать к нужным действиям;
— Онбординг должен рассказывать не о возможностях продукта, а о том, как он поможет пользователю достичь своей цели.

In English. #onboarding

Михаил Рубанов написал о дизайне слайдера для быстрой оплаты.

— В приложении кнопка быстрого заказа кофе появлялась прямо в списке товаров. Она позволяла и перейти в корзину, и сразу оплатить;
— Чтобы решить проблему мискликов и добавить кайфа от использования приложения, решили заменить нажатие на свайп. Так действие станет сложнее, но позволит избежать ошибок и будет более интересным. Отлично подходит для финального действия в приложении;
— Основой стал Slide to Unlock из самого первого айфона;
— Проработали состояния, анимации (метафора натяжения), вибрации, разные ответвления сценария (длительное ожидание оплаты, открытие экрана ввода карты при первой оплате), а также доступность этого элемента.

«Анимации помогают в самых разных ситуациях: учат, скрашивают ожидание или дают обратную связь. В любом случае, анимация должна быть осмысленна.

В самом начале мы должны научить людей пользоваться нашим слайдером. Сценариев несколько:
— при добавлении в корзину запускаем анимацию, которая показывает надпись и подсказывает, что нужно перетащить. Так научим новых пользователей;
— при тапе на кнопку делаем то же самое. Так переучим старых пользователей: теперь нужно не тапать, а тащить;
— время от времени ещё раз мигаем анимацией, чтобы привлечь внимание, если пропустили на прошлых этапах».

#slider #animation

Эдвард Скотт написал о частых ошибках в дизайне интернет-магазинов одежды.

— 94% исследованных Baymard Institute магазинов совершают как минимум одну из этих ошибок;
— Если в интернет-магазине нет нужной для принятия решения информации, покупатель скорее откажется от покупки, так как рискует купить то, что будет плохо сидеть;
— 1) Недостаточно информации о размерах. Добавьте мерки предметов одежды, используйте разные единицы измерения (дюймы, сантиметры), добавьте таблицы соответствия международных размеров, инструкции по снятию мерок, укажите параметры моделей на фото;
— 2) Разновидности товара по цветам, размерам и другим параметрам представлены отдельными карточками товаров. Объедините их в одну, а параметры покажите в переключателе (но будет сложно технически и организационно);
— 3) Не очевидно, какие размеры есть в наличии. Не используйте раскрывающийся список для выбора размера, показывайте все доступные размеры отдельными кнопками;
— 4) Нет фотографий вещей на моделях. Манекенов или виртуальных моделей стоит использовать только в крайнем случае;
— 5) Низкое разрешение фотографий, невозможность приблизить их хотя бы на 50%, чтобы рассмотреть детали.

In English. #ecommerce

Кирилл Шерстобитов написал о тестировании User Flow продукта.

Если продукт уже работает:

— Можно дать респондентам задание и по итогам прохождения задать вопросы из анкеты оценки юзабилити (System Usability Scale). Полезно таким же способом проверить конкурентов и сравнить результаты. Опрос даёт количественные оценки и прямую речь респондентов;
— Провести удалённое немодерируемое тестирование. Респонденты выполняют задание под запись экрана, а потом дают обратную связь. Тестирование помогает увидеть, с какими проблемами сталкиваются люди, но не позволяет уточнить у них непонятные моменты;
— Провести модерируемое тестирование. Интервьюер очно или удалённо наблюдает за респондентом и может задать уточняющие вопросы. Более трудоёмкий способ, требующий определённой квалификации.

Если продукт ещё в разработке, для каждого шага сценария можно провести First Click Test: показать дизайн или эскизы респондентам, дать задание и посмотреть, куда они нажмут. Тест даёт количественные данные, можно понять, какой шаг вызывает затруднения.

#userflow #user_testing

Дарья Райт написала о кернинге.

— Кернинг — изменение интервала между двумя символами в зависимости от их размера и формы. При наборе текста между парой символов может появиться неправильное расстояние. Кернинг позволяет скорректировать пространство между ними, чтобы улучшить читаемость текста;
— Леттер-спейсинг в отличие от кернинга применяется ко всей строке, а не выбранной паре букв;
— Чтобы успешно выполнять кернинг, текст на экране надо увеличивать. Чем больше масштаб, тем точнее изображается шрифт и пробелы между буквами;
— При этом для достижения желаемого результата (одинаковые пробелы во всём фрагменте текста) желательно видеть весь фрагмент;
— Каждая буква должна находиться точно по центру между двумя соседними, то есть она должна занимать пассивную позицию между соседями;
— Также в статье много ссылок на дополнительные материалы и инструменты.

#typography

Павел Голюдов написал о композиции в дизайне интерфейсов.

Композиция интерфейса — это взаимодействие его элементов, которое подсказывает пользователю, как с помощью интерфейса удовлетворить его потребность.

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

Задачи композиции:
1. Управление вниманием. Мы выстраиваем порядок, в котором пользователь будет изучать интерфейс;
2. Cохранение внимания. Пользователю проще воспринимать структурированную информацию. Чем меньше усилий он тратит, тем дольше может сохранять внимание.

Выделить информацию, добавить ей визуального веса можно размером, цветом, формой и негативным пространством. Сложная форма выделяет объект среди объектов с простой формой. Также пустое место вокруг объекта выделяет его.

Создать гармоничную композицию помогает:
— Расположение якорных объектов (самых заметных объектов) в одном из углов, в центре прямоугольника или у одной из его сторон;
— Соблюдение ритма, когда одинаковые объекты обладают одинаковым размером, отступом и так далее;
— Близкое расположение связанных объектов. Создание таких групп облегчает восприятие информации.

#layout

Юрий Пухов написал о вайрфреймах.

— Вайрфреймы — экраны с минимальной детализацией: без изображений и видео, реального текста, использования разных цветов. Например, вместо изображений в них используются плейсхолдеры — накрест перечёркнутые прямоугольники;
— Они позволяют сосредоточиться на структуре страниц и их связях в рамках всего продукта, а также с минимальными трудозатратами показать заказчикам, что значит «главное изображение» или «фильтрация продуктов»: где они будут размещаться, как работать и насколько могут быть полезны на самом деле;
— В ходе работы над проектом их можно использовать для обсуждения внутри команды и согласования видения и масштабов продукта;
— Прототипы отличаются от вайрфреймов тем, что включают больше деталей (вроде реального текста и микровзаимодействий) и направлены на то, чтобы дать возможность оценить опыт взаимодействие с продуктом (например, проведя пользовательское тестирование);
— Вайрфреймы можно делать на этапе дискавери. Хорошо работать с ними параллельно с созданием BPMN-диаграммы. Вместе они помогают увидеть, каких экранов не хватает и какие процессы не учтены.

#wireframe

Станислав Хрусталёв написал о карусели.

— Размещайте её на первом экране, но не занимайте ей всё пространство по вертикали;
— На первых слайдах — наиболее важные и релевантные предложения. Не стоит показывать предложения для городов, отличающихся от выбранного пользователем. Можно привязывать предложения ко времени суток или типу клиента (новым — рассказать о скидке за первый заказ);
— Соблюдайте баланс между качеством изображения и скоростью его загрузки;
— Добавьте на слайд кнопку с призывом к действию. Здорово, если она будет не изображением, а настоящей кнопкой, реагирующей на наведение и нажатие курсора. Также можно внедрить интерактивные отметки конкретных товаров (мебель в интерьере на фото), таймер обратного отсчёта до конца акции;
— Не забудьте об адаптации для мобильных, чтобы текст на слайде не становился слишком мелким;
— Карусель лучше одного статичного баннера. Добавьте возможность переключения между слайдами кнопками «Предыдущий» и «Следующий» (можно показывать при наведении на слайд), свайпами, клавишами «Влево» и «Вправо», на конкретный слайд — с помощью Page Control;
— Областью клика для кнопок «Предыдущий» и «Следующий» можно сделать всю левую и правую части слайда;
— В Page Control отображайте столько точек, сколько в карусели слайдов. Чтобы они не сливались с содержимым, их можно вынести за пределы слайда. Также их можно заменить на миниатюры слайдов;
— Слайды должны быть закольцованы;
— Переключайте слайды автоматически. Специальными индикаторами можно показывать, сколько времени осталось до переключения. Приостанавливайте переключение, если пользователь навёл на карусель курсор или прокрутил страницу, и карусель оказалась не видна;
— Можно показывать часть следующего слайда или несколько небольших слайдов одновременно.

#carousel #ecommerce

Виталий Фридман написал о кнопке «Назад».

— Чем визуально сильнее новое содержимое экрана отличается от предыдущего, тем больше вероятность, что пользователи будут воспринимать его как новую страницу и ожидать, что кнопка «Назад» вернёт их к «предыдущей странице». Хотя технически это может быть одна и та же страница;
— Например: список товаров после фильтрации или сортировки, отдельные шаги заказа в виде аккордеона, дополнительно открываемый на странице контент (особенно, если его много);
— Не надо возвращать пользователя к предыдущим фотографиям в галерее, предыдущим слайдам карусели, а также связывать кнопку «Назад» с переключением просмотра и динамическими секциями, так как они лишь меняют состояния страницы;
— Если нажатие «Назад» может привести к потере пользовательских данных, стоит сообщать об этом и предлагать подтвердить действие;
— Можно добавить отдельную кнопку «Назад» в интерфейс — специфичную для конкретной формы. Поведение браузерной кнопки не всегда очевидно, а кнопку в интерфейсе можно подписать, например, «К предыдущему шагу»;
— Чтобы избежать ошибок, кнопки «Назад» и «Далее» лучше разнести подальше друг от друга;
— Пользователям может и не потребоваться эта кнопка, если им будет доступен предыдущий контент. Например, снапшоты параметров гитары в конфигураторе в магазине Fender Mod Shop.

In English. #navigation

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

— А есть ли в этом случае у человека какая-то привычка? Есть ли в мире какие-то привычные паттерны такого интерфейса? Могу ли я сделать максимально приближённый интерфейс к этой привычке?
— Не заставляю ли я делать что-то пользователя, что может сделать компьютер? Например, поле сразу в фокусе.
— Не потерял ли я данные, которые дал мне пользователь?
— Убрал ли я все лишнее с этого экрана? Есть ли возможность соединить какую-то функциональность? Могу ли я добавить какую-то полезность?
— Я стараюсь представить, что я не видел ничего до попадания на конкретный экран. А понятно ли мне на этом экране всё, с учётом всего вышесказанного?
— Сделал ли я всё, чтобы не использовать модальный интерфейс? Могу ли я показать все функции сразу? Могу ли я использовать квазирежим? Хорошо ли я продумал навигацию стеков?
— Легко ли мне попасть в каждый элемент? Показал ли я области клика?
— И ещё 11 пунктов.

#review