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

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

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

TED-видео Тима Брауна о дизайн-мышлении (2009-й год).

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

#thinking

Олег Удалов рассказал об интерактивных прототипах.

— Интерактивный прототип симулирует взаимодействие пользователя с продуктом;
— У прототипов может быть разная детализация: от вайрфреймов (можно проверить сценарии взаимодействия) до готовых макетов (становятся основной для разработки продукта);
— Состав прототипа и уровень детализации можно адаптировать под текущие задачи, например: составить представление о будущем продукте, увидеть возможные проблемы предлагаемого решения и потерянные сценарии и экраны, оценить и протестировать удобство интерфейса, получить обратную связь и новые идеи от заказчика или целевой аудитории;
— Прототип создаётся до написания кода и позволяет быстро вносить изменения. Как следствие, сокращаются срок и стоимость разработки;
— Инструменты для создания: Figma, Invision, Protopie, Principle, Framer. От себя добавлю: Axure.

#prototype

В KISLOROD написали, почему не стоит бездумно внедрять «лучшие практики».

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

#user_testing

Костя Кислейко написал об оформлении таблиц.

— Чем больше визуального шума, тем тяжелее через него прорваться и выделить нужную информацию. Начать стоит с того, чтобы убрать весь шум (заливку, обводку ячеек и так далее);
— Используйте моноширинный шрифт для цифр (например, Courier, PT Mono). В этом случае у них будет одинаковая ширина, и число 999999 не будет выглядеть больше, чем 1111111;
— Числа выравнивайте по правому краю или по запятой, отделяющей десятые доли. Так легче считывать разрядность и сравнивать значения;
— Текст — по левому краю. Ровный левый край сформирует столбец, и можно отказаться от вертикальных линий в таблице;
— Удерживать строку помогают линии и чересполосица, но надо подобрать такие цвет и яркость, чтобы они не шумели и не мешали воспринимать данные;
— Расстояние между столбцами не должно быть большим (на растягивайте таблицу на всю ширину формата), иначе будет сложно сравнивать и группировать информацию;
— Названия столбцов обычно менее важны, чем данные. Их можно сделать менее заметными и отчертить чуть более толстой линией. Также постарайтесь сделать названия лаконичными.

#table

Андрей Насонов написал о модальных окнах.

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

#modal