В Markswebb написали, как научить держателей кредиток правильно ими пользоваться и мотивировать к покупкам.

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

Оксана Киселёва написала о чекбоксах и радиокнопках.

— Радиокнопки используют для списков из двух и более взаимоисключающих вариантов, когда можно выбрать только один;
— Чекбоксы — когда можно выбрать несколько вариантов или не выбрать ни одного;
— Списки вариантов располагайте вертикально, так их легче просматривать;
— Текстовую подпись размещайте рядом с селектором (квадратным у чекбокса, круглым у радиокнопки), так понятнее, к чему она относится;
— Избегайте отрицания в подписи (если вы, конечно, не адепт тёмных паттернов): «Не присылать оповещения» → «Присылать оповещения». Иногда группа из 2 радиокнопок может быть понятнее одного чекбокса;
— В группе радиокнопок один из вариантов должен быть выбран по умолчанию;
— Нажатие и на селектор и на подпись должно приводить к выбору варианта;
— Нажатие на чекбокс или радиокнопку должно приводить к выбору варианта, а не выполнению действия (для действий используют кнопки);
— Сделанный с помощью чекбоксов и радиокнопок выбор сохраняйте не автоматически, а после подтверждения пользователем (нажатие на кнопку «Сохранить» или «Применить»).

#checkbox #radio_button

Лена Нексман написала об ошибках в анимации сайтов и приложений.

— Добавление анимации туда, где она не нужна. Например, где важен максимально быстрый отклик системы или железо слишком слабое, из-за чего всё тормозит;
— Слишком медленная анимация. Если анимация длится дольше 250 миллисекунд, подумайте, действительно ли она нужна, можно ли её ускорить и как часто пользователи будут её видеть;
— Анимация часто повторяется. Нет смысла анимировать добавление товара в корзину в приложении гипермаркета, где пользователь добавляет много товаров за сеанс;
— Превращение сайта или приложения в мультфильм, когда анимированы вообще все взаимодействия;
— Отображение бесконечного спиннера вместо прогресс-бара, когда время выполнения запроса известно;
— Полное отсутствие анимации. Она добавляет обратной связи и может принести пользователю дополнительное удовольствие от взаимодействия с продуктом.

Кейт Моран написала об основных диаграммах для визуализации результатов пользовательских исследований.

— Перед созданием диаграммы определите цель: что должен понять смотрящий на неё человек;
— Цифры бессмысленны без контекста. Процент завершённых покупок составляет 24% — это хорошо или плохо? Сколько было в прошлом году? Сколько у других продуктов?
— Контекст лучше всего показывают столбчатые (гистограммы), линейные и точечные диаграммы. В других типах диаграмм надо визуально оценивать углы, площади и объёмы, что сложно. Различия между представленными значениями легче всего понять из гистограмм;
— На парной гистограмме можно сравнить два ряда данных. Например, процент завершённых покупок для нескольких продуктов в прошлом и этом году. Столбцы сравниваемых параметров должны стоять рядом. Иногда вместо парной диаграммы может подойти обычная гистограмма, показывающая значение дельты (процент этого года минус процент прошлого);
— Горизонтальная гистограмма — хороший вариант, если подписи к столбцам оказались слишком длинными;
— Гистограмма с накоплением — популярный вариант, но не все её секции удобно сравнивать с соседними диаграммами (у части секций не будет одинаковой начальной точки); на ней не показать доверительные интервалы, важные для надёжного сравнения. В целом она сложна для понимания и входит в число диаграмм с высоким уровнем ошибок, лучше её не использовать;
— Линейная диаграмма лучше гистограммы подходит, чтобы показать тенденцию изменения данных со временем. Точки на ней должны показывать моменты получения данных;
— Диаграмма рассеяния (как линейная, но точки не связаны линиями) хорошо показывает взаимосвязь между двумя переменными.

Игорь Штанг опубликовал раздел о многостраничных изданиях из брендбука NASA 1976 года, который тянет на маленький учебник вёрстки, и поделился наблюдениями.

— Страницы объединены горизонтальными связями. Почти в каждой сетке есть колонки, но далеко не в каждой есть этажи. Из-за этого вертикальные связи обычно возникают сами собой, а о горизонтальных приходится думать специально. Многостраничник без крепких горизонталей часто выглядит как разрозненный набор страниц, а не единая композиция;
— Большой воздух зашит в макет заранее. Часто дизайнеры вспоминают о воздухе в последний момент, когда весь макет уже полностью забит материалом. Лучше решить эту проблему заранее и заложить свободное пространство ещё на этапе эскизов;
— Иллюстрации на развороте контрастны по размеру. Разница в размере картинок моментально организует композицию: из однородной каши получается визуальная иерархия. Если размеры всё-таки вышли одинаковыми, стоит развести картинки по тону: контурный чертёж на белом фоне против тёмного прямоугольника.

Джон Эгеланд написал о реализации в Дискорде подсветки элементов, получивших фокус.

— Шорткаты позволяли переключать каналы, перемещаться по полям форм, открывать поиск и быстрый переключатель. Нужна была возможность полноценной работы с продуктом с помощью одной лишь клавиатуры;
— Сложнее всего было реализовать подсветку элемента, получившего фокус;
— Решение с псевдоклассом :focus и свойством outline в большом проекте ломается: обводка обрезается в контейнере со стилем overflow-hidden, не совпадает с радиусом скругления отдельных элементов, искажается маржинами и падингами;
— В итоге нашли масштабируемое решение, работающее «из коробки». JavaScript, React, подробнее в статье;
— Оно позволяет отследить фокус на отдельном элементе, а подсветить весь включающий его контейнер. Полезно, например, когда в чекбоксе можно нажать и на селектор и на текст, но фокус получает только селектор;
— Покрывает ситуации, когда элементы частично закрыты или прокручены за пределы экрана;
— Позволяет задать любой радиус скругления для обводки (в частности, это нужно, чтобы он совпадал с радиусом скругления элемента или компонента);
— Относительные сложности с подсветкой двигающегося или трансформирующегося элемента (обводка иногда запаздывает), что важно, так как анимаций в интерфейсах становится больше. А также — с изменением цвета обводки в зависимости от цвета фона (решение есть, но некрасивое и неэффективное).

Михаил Греков составил топ популярных недостатков в интерфейсах b2b-продуктов.

— Отсутствие разрядов в числах. 100000 → 100 000;
— Склонения с числами. «Найдено 21 результатов»;
— Сортировка списков. Разработчики любят сортировать рандомно или по ID;
— Не сообщают об ограничениях для текстовых полей. Пользователь вводит много текста и удивляется, что сохранилось не всё;
— Не сохраняют состояния. Пользователь что-то фильтрует, сортирует, изменяет размеры столбцов, но любая перезагрузка возвращает всё в состояние по умолчанию;
— Открывают модальные окна для редактирования любой мелочи;
— Все настройки в формате Да/Нет;
— Не делают никаких маркеров отправки запроса;
— Позволяют редактировать всё подряд, даже если есть взаимоисключающая логика, а все проблемы вываливают на пользователя при попытке сохранения.

Андрей Шапиро написал об отображении ошибок в асинхронном вебе.

— Проблемные ситуации возникают, когда не удалось выполнить запрос а) отвечающий за часть интерфейса, б) ставящий под угрозу работу всего приложения;
— Если пользователь не может повлиять на ситуацию, ему достаточно знать, что действие не сработало. Средства мониторинга должны автоматически отправлять техническим специалистам детали;
— Даже если информация об ошибке пришла моментально, стоит показывать состояние обработки запроса и после паузы в 300–600 миллисекунд возвращать интерфейс в предыдущее состояние;
— Сообщать о неудаче лучше в пределах элемента, группы или формы и не использовать для этого всплывающее сообщение вроде снекбара;
— Круто переиспользовать для этого существующие элементы, например, покачать полем для ввода пароля (если пароль неверный) или анимировать кнопку вместо отображения отдельной крутилки;
— При повторе действия надо скрывать сообщение о предыдущей неудаче.

Вида Чжан написала об использовании пространственной логики при проектировании интерфейса.

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

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

Энтони Ценг написал о структуре экрана настроек.

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

In English.

Джейк Рич поделился советами о проектировании больших и сложных продуктов с нуля.

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

In English.

Николай Морев написал о повышении доступности iOS-приложений (на примере Яндекс Go).

— Недостаточно разово разметить интерфейс для скринридера. Без системного подхода в развивающемся продукте такие доработки неизбежно деградируют;
— Учёт требований доступности увеличивает трудозатраты примерно на 10%;
— Что можно сделать быстро: а) подписать элементы, состоящие из картинки; б) объединить связанные элементы; в) добавить признак «Кнопка» элементам, на которые можно нажать;
— В приложении могут быть тупики, из которых нельзя выйти с помощью VoiceOver. Оказавшийся в тупике пользователь обычно закрывает приложение и запоминает этот сценарий, чтобы больше не попасться;
— Тупик может появиться из-за не поддерживаемых VoiceOver способов взаимодействия. Например, когда экран выбора адресов закрывается только свайпом. Какие-то экраны из-за этого, наоборот, невозможно открыть;
— Для борьбы с тупиками на все экраны можно добавить: а) кнопки закрытия; б) стандартный звук открытия нового экрана; в) стандартный для VoiceOver жест закрытия экрана «зигзаг двумя пальцами»;
— Для экранов, открываемых только свайпом, можно добавить дополнительные способы открытия. Например, экран с карточками в Яндекс Go полностью раскрывается свайпом вверх. Для VoiceOver он раскрывается автоматически, когда фокус достигает последней видимой карточки и пользователь пытается пройти дальше;
— Если элемент, обновляющийся каждые несколько секунд (через сколько минут приедет такси), находится в фокусе, каждое обновление скринридер будет зачитывать. Чтобы он не частил, можно добавить признак updatesFrequently;
— Если обновившийся элемент не в фокусе, важное изменение можно объявить с помощью announcement;
— Когда происходит выбор варианта из горизонтального списка (например, из списка тарифов), хорошо подходит элемент adjustable, позволяющий легко переключаться между вариантами вертикальным свайпом;
— Чтобы скринридер не принимал число вроде 1812 за год, можно добавить в него разделители разрядов. Скринридер не озвучивает разделители, соответствующие пользовательской локали (в русской это запятая).

Станислав Хрусталёв написал о лучших практиках в работе поисковой строки в интернет-магазинах. Вот некоторые из них:

— На всех страницах, где есть поисковая строка, располагайте её в одном и том же месте и оформляйте одинаково;
— Поисковая строка и кнопка перехода в каталог — ключевые методы работы с интернет-магазином, размещайте их рядом;
— При прокрутке страницы закрепляйте шапку сайта с поиском. На мобильных сайтах размещайте кнопку поиска на нижней панели;
— Поле поиска должно быть одно, даже если способов поиска несколько;
— И достаточно широким — не менее трети от ширины шапки. Узкое поле можно расширить при фокусе;
— Если поиск вторичен, поле можно отображать по нажатию на иконку;
— В поле поиска размещайте лупу и плейсхолдер;
— Плейсхолдер может быть призывом к действию («Найти в каталоге»), вопросом пользователю («Что вы ищете?»), примером запроса (часто покупаемые товары или товары к событию), рассказывать о способах поиска («Введите название товара, заболевания или симптома»), отражать широту ассортимента («Поиск по 110 000 дизайнов»);
— Подсказки отображайте сразу после фокуса на поле. Пока пользователь ничего не ввёл, там могут быть популярные товары и бренды, тренды, новые товары, а также история поиска;
— Возможность одним кликом очистить историю поиска;
— Список подсказок должен полностью умещаться на экране без прокрутки;
— В поле поиска дополняйте текст, введённый пользователем, текстом самой подходящей подсказки, чтобы не надо было вводить запрос целиком. Текст дополнения должен отличаться от введённого текста визуально;
— Распознавайте текст, введённый с неправильной раскладкой клавиатуры, опечатки, сленг, аббревиатуры и синонимы;
— Возможность перейти из поиска в категорию;
— Учитывайте, что человек может искать не продукт, а что-то иное: условия доставки, возврата, адреса магазинов;
— Для товара в списке подсказок отображайте фото, цену (валюту лучше показать символом), за что эта цена (упаковка, килограмм), скидку, баллы программы лояльности, рейтинг;
— Возможность добавить знакомый товар в корзину прямо из списка подсказок.

Энтони Ценг написал, как снизить когнитивную нагрузку при работе с похожими кнопками.

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

In English. #cognitive_load #button

В «Собаке Павловой» написали о специфике проектирования медицинских интерфейсов.

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

Ксения Стернина рассказала, что международные компании ценят в UX-специалистах.

— Владение методологиями ценится меньше, чем способность выбрать и эффективно использовать то, что максимально подходит здесь и сейчас;
— Важно, как вы обходитесь с коллегами. Относитесь к ним как к клиентам;
— Во время работы над проектом надо постоянно коммуницировать со всеми заинтересованными лицами, вовремя подключать тех, чьё мнение следует учитывать;
— Часто плохо развито у русскоязычных специалистов: воспринимать компанию как бизнес-партнёра, понимать, что ей выгодно и куда она движется, и выстраивать работу соответственно;
— Сохранять постоянство в работе без всплесков и упадков в активности;
— Быть готовым взять ответственность, объединить и повести за собой людей, довести проект до конца (если хотите карьерного роста, конечно);
— Учитывать культурные особенности. Русскоязычные специалисты иногда говорят в лоб, используют «должен» в рабочей коммуникации, что может быть совершенно недопустимым в конкретной компании;
— Быть хорошим человеком, комфортным и приятным в работе.

#career

Маргарита Романова написала о поиске работы продуктовым дизайнером в Европе. Часть рекомендаций:

— Некоторые компании не считают стажировки опытом. Если без них опыта недостаточно, в резюме можно убрать слово Intern из должностей. Но тогда не стоит упоминать уровни вообще;
— Часто они используют системы автоматической проверки резюме. Резюме в Фигме такую проверку не проходит. Его можно сделать в resume.io и сохранить в PDF;
— Не стоит упоминать расу, национальность и пол, а также вставлять фото (кто-то считает это дурным тоном);
— Напишите свой суммарный опыт, чтобы не надо было высчитывать;
— Не ленитесь и добавьте побольше ключевых слов с тем, что вы используете в работе: figma, wireframing, design systems и так далее;
— Резюме должно быть не больше 2 страниц, если только вы не работаете уже 10–15 лет;
— Названия резюме и вакансии, на которую вы откликаетесь, должны совпадать;
— Подготовьте на английском ответы на типовые вопросы HR и других специалистов (в статье есть примеры);
— Подготовьте вопросы для них. Задавайте вопросы, адекватные должности интервьюера;
— Не только рассказывайте о пользовательских исследованиях, но и показывайте разные визуальные артефакты, связанные с ними. Упоминайте, как именно эти исследования помогли улучшить продукт;
— При решении задачи на маркерной доске полезно задать вопросы, прежде чем что-то предлагать. Начинать с вайрфреймов = провал;
— Старайтесь придерживаться стандартных дизайн-практик, чтобы не показалось, что вы себе на уме и с вами будет непросто работать;
— При работе с рекрутинговым агентством можно пропускать этап собеседования с HR;
— Пишите дизайнерам из компаний, в которых хотите работать, и просите дать рефералку. Обычно все хорошо воспринимают такие просьбы.

#career

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

— Автономия — способность использовать интерфейс согласно личным предпочтениям и приоритетам;
— Предоставление пользователям автономии может мешать росту бизнес-показателей. Если флаг не будет стоять по умолчанию, меньше людей подпишутся на рассылку. Но те, кто подпишутся, лучше будут открывать письма;
— Распространённый способ предоставления автономии — кастомизация. Пользователи редко тратят на неё много времени;
— Настройки, не влияющие на рабочие процессы (замена фона в чате), могут порадовать людей и дать им почувствовать продукт своим;
— Связанные с рабочими процессами настройки помогают адаптировать интерфейс к меняющимся потребностям (изменение размера текста, переключение режима отображения файлов) или повысить производительность (шорткаты);
— Автономию повышает сканируемость информации. Хорошая визуальная иерархия позволяет быстрее выбрать то, что пользователю актуально;
— Также её повышает возможность выбора времени и порядка взаимодействия: пропуск онбординга, выбор порядка прохождения тем на курсе в Khan Academy, доступность разных способов связи;
— Увеличение автономии ≠ увеличение количества вариантов для выбора. Это скорее предоставление выбора там, где его не было;
— Чтобы предоставить автономию там, где люди это оценят, лучше провести пользовательское исследование;
— Не стоит перегружать людей количеством вариантов или предлагать им настраивать продукт перед началом работы.

In English.

Энтони Ценг написал о чипах (chips).

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

In English.

Расскажите в комментариях о своём телеграм-канале о дизайне. Или если вы дизайнер и ведёте канал о своём хобби, не связанном с дизайном. Или если вы читаете такой канал, и его автор вряд ли увидит этот призыв. Даже если подписчиков совсем немного. Выберите один канал и напишите о нём несколько слов.

Update. Ставьте палец вверх, если подписались на кого-нибудь из комментариев.