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

— В приложении кнопка быстрого заказа кофе появлялась прямо в списке товаров. Она позволяла и перейти в корзину, и сразу оплатить;
— Чтобы решить проблему мискликов и добавить кайфа от использования приложения, решили заменить нажатие на свайп. Так действие станет сложнее, но позволит избежать ошибок и будет более интересным. Отлично подходит для финального действия в приложении;
— Основой стал 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

Александр Кочеванов написал о немодерируемом тестировании.

— Такое тестирование позволяет выявить проблемы предлагаемого интерфейсного решения, подтвердить или опровергнуть гипотезы до того, как разработчики это решение реализуют;
— Провести его можно после подготовки первой версии дизайна;
— Процесс состоит из а) подготовки прототипов к тестированию, б) составления вопросов для респондентов, в) запуска на специальной платформе, г) обработки результатов, д) составления отчёта;
— Платформы: Userfeel, Loop11, Hotjar, UserZoom, UserTasting, Usability Hub, Maze, Marvel;
— Прототипы лучше делать как можно более полными. Например, кому-то из респондентов удобнее график, кому-то таблица, и лучше, если прототип даст возможность выбрать удобный вариант отображения;
— Перед запуском проверьте прототипы и вопросы на коллегах, чтобы выявить ошибки;
— Проведите тест сначала на части респондентов из запланированных, чтобы найти и исправить первые проблемы. Затем можно сосредоточиться на остальном;
— Начинайте тест с вводной, которая погрузит респондента в контекст. Разместить её можно на первой странице прототипа (с кнопкой «Начать исследование»), чтобы возможности платформы по оформлению текста вас не ограничивали;
— Старайтесь использовать реальный контент вплоть до актуальной текущей даты;
— Попросите респондентов озвучивать всё, что они видят и думают. Особенно, если они сталкиваются с трудностями;
— Подумайте, что может пойти не так и подготовьте респондентов. Например, расскажите, как перезагрузить прототип, если произошёл сбой;
— Просите отвечать на вопросы вслух, а не письменно, чтобы не тратить на это время;
— Используйте скрининговые тесты, чтобы отфильтровать участников, которые вам не интересны;
— Просите оставить контакты, чтобы можно было обратиться в следующий раз к тем респондентам, кто показал себя ответственным и ориентированным на результат.

#user_testing #unmoderated #process

Олег Бурцев, Елизавета Горлова и Арина Шулева поделились советами о дизайне диаграмм. Некоторые советы в дополнение к рекомендациям Тараса Бакусевича.

— В круговых диаграммах используйте контрастные цвета вместо тонов одного цвета;
— В линейных диаграммах не используйте больше 5–7 линий;
— Выбирайте разные стили линий для выделения, сравнения и подчёркивания иерархии. Например, данные за прошлый год можно показать пунктиром;
— Не используйте диаграммы с областями, если хотите показать больше 3–4 показателей;
— Диаграммы с накоплением подходят, чтобы показать суммарную величину и понять, как она распределяется по показателям;
— Оставляйте небольшие отступы между столбцами одной группы, чтобы облегчить восприятие диаграммы;
— Добавляйте значения над столбцами диаграммы, когда это возможно. Если нет, показывайте их в подсказке при наведении;
— Воронкообразные диаграммы используйте, если этапов 4 и более;
— Сравнивать этапы проще, если это выравненная по левому краю столбчатая диаграмма. Но если надо придерживаться формы воронки, высоту прямоугольника каждого из этапов лучше сделать пропорциональной его ширине;
— Каскадная диаграмма показывает влияние положительных и отрицательных изменений на изначальное значение. Обозначайте цветом характер изменения;
— Для построения пузырьковой диаграммы ограничивайте количество значений;
— Дайте возможность скрывать показатели. Выключатель в виде чекбокса можно объединить с квадратом легенды;
— Добавляйте элементам диаграммы состояние при наведении, чтобы пользователю было легче фокусироваться;
— Продумайте, что делать с подписями, если значений будет слишком много. Если скрывать часть значений нельзя, можно занять диаграммой всю ширину экрана и при необходимости отображать скрол.

#data_visualization

Марина Яланска написала об аффордансах в интерфейсах.

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

In English. #affordance #definition

В «Атвинте» написали о хорошем UX (с примерами).

— Опыт взаимодействия с технологичным продуктом может быть хорошим или плохим, но он зависит не только от дизайна интерфейса;
— Хороший интерфейс может стать преимуществом, но его одного недостаточно, нужны и другие ценности (например, размер каталога в онлайн-кинотеатре);
— Дизайнер отвечает за понятность структуры и навигации, UI, переходы и анимации. За производительность и скорость загрузки сервиса отвечают разработчики. За то, что продукт решает проблему пользователя, и за соответствие его социальному, культурному и демографическому контексту — аналитики. А скорость интернета, производительность устройства и настроение пользователя обычно не зависят от сотрудников сервиса;
— Есть законы восприятия и тому подобное, но нет универсальных законов дизайна, которые работают для любого интерфейса: и для мобильной игры, и для интернет-магазина, и для интранет-портала;
— Пользователю важен не дизайн, а получится ли у него решить задачу с помощью продукта. При его создании надо думать о ценности продукта, пользовательских задачах и том, как их эффективно решить, не раздувая издержки компании.

#principles