Андрей Богданов написал книгу «Дизайн-стройка. Как создать команду мечты за 90 дней», и вот что там было о ревью макетов лидом и другими дизайнерами:

— Созваниваться с дизайнером и вместе пробегаться по макетам оказалось плохой идеей;
— Если макеты оформлены плохо, дизайнер может их пояснить, но всем остальным придётся иметь дело с непонятным артефактом;
— Непроработанные ветки сценариев, корнер-кейсы, используемые компоненты во время беседы выпадают из фокуса внимания;
— Из-за невозможности как следует подумать рекомендации иногда получаются необдуманными;
— В некоторых компаниях встречается кросс-ревью (дизайн-чек в Альфа-Банке), когда макеты смотрит не лид, а другие дизайнеры (в том числе из других команд);
— Эта практика позволяет разгрузить лида и прокачать навыки ревью у дизайнеров;
— Но она не должна замещать ревью дизайн-лида, так как последний отвечает за качество дизайна в своей команде. Без ревью он теряет связь с продуктом и выпадает из контекста;
— Если будете внедрять кросс-ревью, подумайте, как обеспечить ответственный подход ситуативных ревьюеров и разумный контроль со стороны лида.

#design_check #management #book

Илья Бирман написал о кнопке «На главную» в пустом состоянии списка.

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

#error #empty_state

Ольга Свистунова написала, как работают UX-редакторы в Госуслугах и каких правил придерживаются.

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

#writing

Андрей Шапиро написал книгу о рабочих историях и карте реализации историй.

— Общее представление о них можно получить из опубликованной ранее статьи;
— В книге рассмотрены недостатки User stories, Job stories и некоторых других шаблонов (шаблон вопроса, похоже, используется в Модели информационных ожиданий «Собаки Павловой»);
— Например, они могут наводить на одно конкретное решение, которое часто оказывается неверным, так как задача ещё слабо изучена, либо проблема лишь подразумевается и формулируется в виде решения-кандидата;
— Оперировать альтернативами в разработке крайне важно, так как время и деньги ограничены, и непонятно, какое решение уложится в срок и бюджет;
— Они не описывают предметную область, что нередко приводит к последующему перепроектированию;
— Рабочая история как текстовая модель построена таким образом, чтобы этих недостатков избежать;
— Её состав: цель действия (зачем?), носитель (кто или что выполняет действие), ситуация (контекст, когда происходит действие), способ действия (каким образом что-то делается), объекты оперирования (с чем взаимодействует носитель, что получается в итоге);
— Кроме шаблона истории, инструкции по его заполнению, примеров из многолетней практики и разбора потенциальных ошибок при составлении историй в книге есть даже примеры бесед с заказчиком, в ходе которых история появляется и обрастает деталями;
— Карта реализации историй, подобно User story map, собирает все истории вместе и помогает увидеть всю картину, а также позволяет дополнить истории информацией о возможных формах их реализации (варианты технических решений) и составе блоков соответствующего интерфейса;
— Можно сначала записать «кнопку», которую хочет добавить стейкхолдер, и потом разобраться с её первопричиной и контекстом. Главное, чтобы все слои в конце концов оказались согласованы.

#user_story #book

Татьяна Бублик написала об основах продуктовой колористики.

— Модель OKLCH удобнее RGB, так как сложно задавать цвет, меняя количество красного, зелёного и синего;
— Также она поддерживает расширенный набор цветов P3, что актуально для современных устройств, которые поддерживают на 30% больше цветов, чем есть в RGB;
— Стоит придерживаться схемы процентного соотношения цветов в продукте 3-17-80 (или её вариаций), где 3% — бренд-цвет для всех самых главных акцентов, 17% — остальные хроматические цвета, 80% — белый, чёрный и оттенки серого (ахроматические);
— Так акценты не будут теряться в макетах;
— В серый и чёрный можно подмешивать хрому бренд-цвета, чтобы усилить восприятие бренда, сделать их комфортнее и интереснее;
— Лайфхак: делать длинную тоновую растяжку (25–30 цветов). Это даст при любом изменении или масштабировании подобрать нужный тон.

Копия на Dsgners. #color

Светлана Диденко написала об эвристиках Бена Шнейдермана для проектирования интерактивных систем.

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

#heuristic

Таня Двенадцатова написала о прожарке.

— Она помогает улучшать разрабатываемые фичи и синхронизировать команды. Она похожа на совместное проектирование;
— Это еженедельная встреча на 1–1,5 часа. Лучше выбрать время в начале дня, когда все ещё свежи (самое то для креативных и аналитических задач);
— Докладчики записываются заранее: указывают, какую задачу решали, и добавляют ссылку на артефакт;
— На встрече они презентуют своё решение и отвечают на вопросы и критические замечания зрителей (обычно выстраивается очередь из поднявших руки);
— Вопросы и комментарии лучше не добавлять заранее. Так и комментирующие не тратят на это много времени, и дискуссия получается более живой;
— Обычно участвуют дизайнеры, исследователи, продакты и UX-редакторы, но заглядывают и представители бизнеса, методологи, маркетологи;
— Полезно фиксировать, о чём договорились во время прожарки, чтобы потом учесть это при доработке фичи;
— Участие в прожарке (и необходимость успешно её пройти) можно сделать обязательным шагом в процессе. Для прохождения прожарки может потребоваться несколько итераций;
— По отдельным фичам (незначительное влияние на клиентский путь, регуляторка) можно ограничиться прожаркой и не проводить пользовательское исследование, если зрителям всё было понятно;
— Важно донести, что это не повинность, а полезный процесс. Также это маркер атмосферы и культуры в коллективе.

#design_check

Станислав Хрусталёв написал об интересных решениях ВкусВилла в списке товаров и корзине.

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

#cart #list #ecommerce

Настройка количества товаров с мусоркой

Иногда встречается такой дизайн элемента для настройки количества товаров в корзине, где вместо минуса рисуют мусорку — мол, товар уже удалится, а не просто уменьшится количество.

Сначала это кажется логичным, ведь уменьшение количества и удаление — разные вещи, и выглядеть должны по-разному. Возможно, кто-то из дизайнеров в этом видит возможность дополнительно предупредить об удалении. Наверное, кому-то просто кажется остроумной такая динамичность.

Но вообще-то хорошо бы, чтобы при уменьшении количества до нуля, товар не удалялся сразу: у пользователя должно быть право на ошибку и возможность вернуть товар обратно. Если же удаление товара неотменяемое, то превращение минуса в мусорку не поможет предотвратить ошибку; тогда надо дисейблить минус, а кнопку удаления ставить отдельно. Что касается остроумности, то это только в голове дизайнера мусорка — частный случай минуса для одного значения, но для пользователя изначально никакого минуса нет, а есть лишь эта мусорка, ведь обычно количество будет «1 шт.».

Короче, не рекомендую так делать. Элемент хуже узнаётся, ощущается нестабильным и не решает никакой задачи.

Алиса Колядова поделилась мыслями о проектировании таблиц.

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

#table