UX Notes

Алёна Сарокина написала, зачем нужна интерфейсная анимация.

— Объяснить суть действия. Галочка в чекбоксе может появляться так же, как человек поставил бы её на бумаге;
— Показать структуру. Анимацией при переключении табов можно показать, что пользователь не переходит глубже в структуре приложения, а остаётся на том же уровне;
— Отразить какое-то временное состояние системы. Например, что стартовала загрузка файла;
— Подсказать жесты. Если гамбургерное меню выезжает слева, возможно, оно закроется свайпом влево;
— Облегчить работу мозга: ему не надо самостоятельно достраивать переходы между состояниями элементов интерфейса и экранами.

#animation

Илья Бирман написал об обрезании текста.

— Обрезание длинного текста в случайном месте (например, для анонса) — неуважение к автору и тексту. Обрезание по определённому числу символов даже не позволяет получить ровный прямоугольник текста, так как ширина символов может отличаться в разы (iii — ЮЮЮ);
— Иногда это приводит к искажению текста и появлению нежелательного смысла. «Илон Маск начнёт продавать каменный анал…», «Чипсы со вкусом горя»;
— Число символов, в которое надо уложиться, стоит считать примерным ориентиром;
— Если текст немного длиннее, его можно не трогать;
— Если заметно длиннее — разделить на предложения и попытаться взять столько полных предложений, сколько влезет;
— Если в результате получилось слишком мало или предложение не влезло целиком — поискать другие признаки безопасных мест: точки с запятой, тире, запятые, скобки;
— Если ничего этого нет — ориентироваться на пробелы;
— Если и пробелов нет, тогда можно резать по символам;
— Если надо уложиться в определённый прямоугольник, можно наложить на последнюю строку градиент. Важно, чтобы он был достаточно большим — так не будет разрыва на конкретной букве.

#typography

Лена Райан рассказала об отдельной версии сайта для слабовидящих.

— Доступность — это не только версии для слабовидящих. Есть люди с когнитивными нарушениями, тремором рук, ДЦП, без конечностей. Плюс, любой человек может столкнуться с ситуативными и временными ограничениями: одна рука занята, перелом;
— Доступность расширяет аудиторию продукта;
— Если при разработке реализовывать требования доступности сразу, объём работ вырастает всего на 5–7%. Если выносить эти работы на отдельный этап, возможно, придётся перевёрстывать уже сделанное;
— Пользователю проще ориентироваться, если навигация с клавиатуры соответствует естественному потоку документа. Не используйте положительный tabindex;
— Закон не обязывает создавать версию сайта для слабовидящих, если основная версия доступна (и в том числе есть тёмная тема);
— Специальные версии не всегда работают как надо: с одной только клавиатурой проблематично включить навигацию с клавиатуры на сайте Bershka; версия для слабовидящих сайта РЖД теряет акценты и разделение на блоки, чтобы что-то найти надо пользоваться экранной лупой и всё читать;
— Отдельная версия для слабовидящих — не универсальное решение, если там не будет части функций, вместо инклюзивности выйдет дискриминация. Плюс, это дополнительные затраты на вторую версию сайта.

#accessibility

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

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

#principles

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

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

In English. #affordance #definition

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

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

#data_visualization

Энтони Ценг написал, на что можно заменить большое меню, состоящее из нескольких колонок.

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

In English. #menu

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

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

#user_testing #unmoderated #process

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

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

#modal

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

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

#table

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

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

#user_testing

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

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

#prototype

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

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

#thinking

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

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

#review

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

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

In English. #navigation

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

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

#carousel #ecommerce

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

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

#wireframe

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

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

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

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

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

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

#layout

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

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

#typography