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

— Выделить кнопку основного действия;
— Если подписи имеют схожие значения, добавить иконки, которые подчеркнут разницу. Но подобрать такие иконки может быть непросто;
— Например, для кнопок «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. Ставьте палец вверх, если подписались на кого-нибудь из комментариев.

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

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

In English. Но лучше Nielsen Norman Group тему раскрыл Михаил Греков: раз, два, три.

Сюзанна Лабарр написала об исследовании того, как шрифты влияют на скорость чтения.

— Скорость чтения зависит от шрифта и возраста читателя;
— С возрастом скорость чтения снижается. Это может быть связано с ухудшением зрения и когнитивными изменениями;
— Нельзя выделить один шрифт, который повышал бы скорость чтения для всех;
— Но читатели старше 35 лет быстрее всего читали с EB Garamond и Montserrat;
— Из исследованных 16 шрифтов у Montserrat была самая большая высота строчных знаков (x-height);
— EB Garamond может быть привычнее таким читателям за счёт засечек. При этом у него есть полезные современные свойства вроде более высоких строчных знаков;
— «Среднего пользователя» не существует.

In English.

Полина Вострикова написала об особенностях процесса дизайна b2b- и b2c-продуктов.

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

Дмитрий Ваницкий написал введение в веб-аналитику для дизайнеров.

— Веб-аналитики заняты анализом бизнес-моделей клиентов, разработкой стратегии измерения, её внедрением, настройкой и поддержкой. Это необходимо для принятия решений и точной оценки изменений в процессах. Настольная книга: «Веб-аналитика 2.0 на практике» Авинаша Кошика;
— Что, как и зачем измерять, остаётся загадкой. Появляются фреймворки вроде HEART, но начинают сбоить или не подходят бизнес-модели, и всё откатывается к стандартным настройкам;
— Часто дизайнеры меряют, чтобы измерить. Дальше констатации фактов дело не идёт;
— Метрики, доступные из коробки: посещения и посетители, время на сайте и на странице, отказы, выходы, коэффициент конверсии;
— Чтобы понимать суть значений любого показателя, нужно смотреть на них в динамике;
— Примитивные показатели приводят к выводам о работе всей системы. Если с новым релизом увеличилось время пребывания на странице, сложно сделать вывод о причинах. И это не повод откатывать релиз;
— Воронки помогают увидеть показатели по каждому перевалочному пункту пользователей;
— Аналитики обычно не доверяют тепловым картам. Они вешают триггеры на каждый интерактивный элемент, чтобы точно знать, куда пользователь нажал, без оглядки на ширину экрана, устройство и так далее;
— Воронки могут не работать: а) важно понимать, кто именно отваливается и что с ними в принципе происходит, б) это анализ количества кликов, а не намерений, в) анализ данных в статике — плохая затея;
— Коэффициент конверсии скажет неправду, если не учесть посещения, предшествовавшие целевому действию. Иногда люди не готовы купить товар сразу;
— Усреднённый показатель конверсии или отказов тоже ничего не скажет. Надо сегментировать аудиторию, например, по источникам трафика. Может оказаться, что высокий процент отказов возник из-за плохой рекламы, создающей неадекватные ожидания;
— Сегментация — основная стратегия анализа данных, если надо докопаться до сути;
— Важно чистить данные перед анализом, например, не принимать в расчёт сессии длиной в 0 секунд;
— KPI (key performance indicator) — любая метрика, отображающая успешность работы сервиса или его части. У разных продуктов они разные;
— При выборе KPI можно скатиться к «покупкам», но стоит поискать менее тривиальные варианты вроде: процент выполнения задачи, распределение трафика, лояльность и недавность, продолжительность и глубина посещения, альтернативные каналы потребления, процент важных выходов;
— В электронной коммерции это отказы от корзины или оплаты, время и посещения до целевого действия, объём заказа, основная цель пользователя;
— Есть основные цели, критичные для бизнеса (макроконверсии, например, покупка или подписка), и вспомогательные, направленные в основном на увеличение лояльности (микроконверсии, например, получение помощи или чтение статей).

Вячеслав Лазарев написал о правилах хорошего дизайна.

— Теория близости: любые объекты, расположенные рядом, воспринимаются связанно. При вёрстке текстовой страницы заголовок ставят к тексту, к которому он относится;
— Правило внутреннего и внешнего: внутреннее ≤ внешнее. Например, расстояние между словами должно быть меньше межстрочного расстояния или равно ему. Оно в свою очередь должно быть ≤ абзацного отступа, который должен быть ≤ полей вокруг блока с текстом;
— Правило якорных объектов: объекты, которые сразу бросаются в глаза читателю (иллюстрации, заголовки, пиктограммы), должны тяготеть к якорным точкам модуля, расположенным в его углах или центре;
— Закон Фиттса: чем больше расстояние от курсора до цели и чем меньше размер цели, тем сложнее в неё попасть. Поэтому кнопки делают больше, увеличивают область нажатия вокруг иконок и не ставят кнопки «Ок» и «Отмена» слишком близко друг к другу;
— Правило тинктур: нельзя накладывать эмаль на эмаль и металл на металл. Любопытное правило из геральдики о соблюдении контраста при сочетании цветов.

Энтони Ценг написал об адаптации таблиц под маленькие экраны.

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

In English. #adaptive #table

Гонсалу Диас написал об иллюзии свечения.

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

Егор Камелев поделился чеклистом и серией видео о проектировании регистрации.

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

Смотрите также статью Павла Шерера об идеальной схеме регистрации, логина и восстановления пароля. #sign_up

Я написал о функциональной спецификации интерфейса.

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

#docs

В Kode поделились итогами митапа о голосовых интерфейсах.

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

Виталий Фридман написал о форме подписки на рассылку во всплывающем окне на главной странице.

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

In English.

Александра Савельева написала о подтверждении пользовательского действия в модальном окне.

— Проблема в том, что пользователи подтверждают свои действия не задумываясь и, например, иногда удаляют не то, что хотели;
— Можно реализовать отмену действия в течение 10 секунд и отображать уведомление об этом. Так делает Gmail после отправки письма. Фактически, действие происходит на 10 секунд позднее, если пользователь не решает его отменить;
— Если разработчики не готовы так делать, можно доработать модальное окно: описать, что происходит (человек подтверждает выход именно из профиля Ozon), к чему приведёт подтверждение (перестанут отображаться персональные рекомендации). Окно станет чуть менее стандартным, повысится вероятность, что пользователь в него вчитается;
— К кнопке подтверждения можно добавить кнопку отказа от действия и сделать её акцентной. Кнопки с разрушительными действиями стоит делать красными;
— Для подтверждения самых разрушительных и редких действий (удаление проекта или профиля) можно попросить ввести в текстовое поле какую-нибудь фразу, например, название удаляемого проекта.

#modal

Игорь Штанг написал о современной русской пунктуации на примере упаковки умной розетки Яндекса.

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

#typography