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

— Чем визуально сильнее новое содержимое экрана отличается от предыдущего, тем больше вероятность, что пользователи будут воспринимать его как новую страницу и ожидать, что кнопка «Назад» вернёт их к «предыдущей странице». Хотя технически это может быть одна и та же страница;
— Например: список товаров после фильтрации или сортировки, отдельные шаги заказа в виде аккордеона, дополнительно открываемый на странице контент (особенно, если его много);
— Не надо возвращать пользователя к предыдущим фотографиям в галерее, предыдущим слайдам карусели, а также связывать кнопку «Назад» с переключением просмотра и динамическими секциями, так как они лишь меняют состояния страницы;
— Если нажатие «Назад» может привести к потере пользовательских данных, стоит сообщать об этом и предлагать подтвердить действие;
— Можно добавить отдельную кнопку «Назад» в интерфейс — специфичную для конкретной формы. Поведение браузерной кнопки не всегда очевидно, а кнопку в интерфейсе можно подписать, например, «К предыдущему шагу»;
— Чтобы избежать ошибок, кнопки «Назад» и «Далее» лучше разнести подальше друг от друга;
— Пользователям может и не потребоваться эта кнопка, если им будет доступен предыдущий контент. Например, снапшоты параметров гитары в конфигураторе в магазине 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;
— Прототипы лучше делать как можно более полными. Например, кому-то из респондентов удобнее график, кому-то таблица, и лучше, если прототип даст возможность выбрать удобный вариант отображения;
— Перед запуском проверьте прототипы и вопросы на коллегах, чтобы выявить ошибки;
— Проведите тест сначала на части респондентов из запланированных, чтобы найти и исправить первые проблемы. Затем можно сосредоточить�