Якоб Нильсен написал о новой (третьей) парадигме пользовательского интерфейса.

— 1. Пакетная обработка. Точкой контакта были перфокарты. С их помощью пользователь задавал набор инструкций для компьютера, с которыми работал центр обработки данных. Результат приходил через некоторое время (например, на следующий день) в виде распечаток;
— 2. Взаимодействие на основе команд. Происходит через командные строки, полноэкранные текстовые терминалы, графические интерфейсы. После выполнения каждой команды пользователь может оценить ситуацию и изменить последующие команды. Он может не знать точного пути к цели и корректировать свои действия после ответов системы;
— 3. Результаты на основе запроса. Пользователь сообщает системе не какие команды надо выполнить, а какой результат хочет получить (генеративный AI);
— Это сложно назвать взаимодействием, так как нет очерёдности и постепенного продвижения вперёд. Постепенная доработка полученного результата — форма взаимодействия, которая работает сейчас неидеально;
— Когда пользователь не знает, как именно выполнена та или иная операция, сложнее выявить и устранить проблемы;
— Скорее всего, AI-системы будут иметь гибридный пользовательский интерфейс;
— Клики и касания — важный аспект взаимодействия с пользователем, от которого не стоит отказываться. Заполнить длинную форму, общаясь с ботом (даже очень умным), всё ещё слишком сложно.

In English. #ai

Илья Бирман написал о методе предложений.

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

#process

Повышение зарплаты

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

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

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

Анастасия Ланцева из UXART написала о контрастности.

— WCAG допускает 2 уровня хорошего контраста: достаточный (АА) и повышенный (ААА);
— АА: от 4,5 для основного текста, от 3 для крупного больше 24 px или жирного больше 18 px;
— ААА: от 7 для основного текста, от 4,5 для крупного или жирного;
— Для элементов, которые не надо читать: от 3;
— Самый светлый цвет в 21 раз ярче самого тёмного. Яркость измеряется от 0 до 1, чтобы не делить на ноль, поделили 1,05 на 0,05 и получили 21. Порог контрастной чувствительности глаза — 0,02;
— Стандарт WCAG рекомендует придерживаться уровня АА, если нет особых требований, придерживаться уровня ААА не обязательно;
— Слишком высокая контрастность может вызывать усталость глаз, повышенную утомляемость, способствовать приступам эпилепсии, создавать визуальные искажения (вспомните визуальные иллюзии с контрастными объектами). Близорукость усиливает эти эффекты;
— Такая контрастность подойдёт промосайтам, с которыми пользователь не взаимодействует долго;
— Вычисляется по значениям RGB, но в реальности на неё влияет тип экрана (TN-матрица понижает контраст), освещение и свойства шрифтов (слишком тонкие линии менее контрастны);
— Текущий алгоритм некорректно оценивает некоторые цветовые пары и в целом не учитывает а) размер цветного элемента, б) где фон, а где текст. В WCAG 3.0 обещают новый алгоритм (APCA);
— Контрастность растёт нелинейно. Для чёрного цвета первая половина цветовой шкалы даёт 4 пункта контрастности, а вторая — 17.

#color #accessibility

Илья Бирман написал о ещё одном методе проектирования интерфейса — потоке данных.

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

#process

Иван Вендров написал о тирании маржинального пользователя.

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

In English. #product

Полина Захарова-Щукина рассказала о повышении эффективности онбординга в сложный продукт, в котором много инструментов и возможностей для использования.

— Их онбординг был в формате гайда из 8 шагов для новых пользователей, который помогал с базовой настройкой инструментов и получением первой пользы;
— Персонализируйте онбординг. Можно при регистрации уточнить, какую из предложенных задач хочет решить пользователь. Регистрация станет длиннее, но такой вопрос может даже повысить конверсию, убеждая, что продукт действительно подходит. После этого покажите более короткий гайд, заточенный под выбранную задачу;
— Определите, в какой момент пользователь осознаёт ценность предлагаемого инструмента (aha-момент) и становится готов заплатить. Онбординг должен привести пользователя к aha-моменту раньше, чем закончится бесплатный пробный период;
— Сначала проведите онбординги вручную, чтобы получить обратную связь, выявить барьеры и так далее;
— Подберите подходящие инструменты онбординга. Кроме гайда могут подойти всплывающие подсказки (с помощью сервиса UserGuiding), готовые шаблоны для разных задач, разделы в базе знаний;
— Пользователям может быть сложно выбрать из множества шаблонов. Можно сделать квиз (на Typeform) с вопросами, которые помогут подобрать подходящий шаблон;
— Ссылки на инструменты, которые не решают указанную при регистрации задачу, можно заблокировать, пока не наступит связанное с aha-моментом событие. Чтобы пользователи не плутали по интерфейсу и не отвлекались;
— В базу знаний можно добавить информацию не только по отдельным инструментам, но и по задачам, например, «Увеличить конверсию сайта в заявку».

#onboarding

Евгений Трифонов написал о feature creep.

— Это процесс излишнего добавления фич, когда получается переусложнённый продукт с кучей малозначимых возможностей, которые только путают людей;
— Философия UNIX: пусть каждая программа хорошо выполняет одну задачу. Для выполнения новой задачи начинайте с нуля, а не усложняйте старые программы добавлением новых фич;
— Причины feature creep: 1) Считается, что добавлять — хорошо; 2) Негативный эффект не заметен сразу, а накапливается со временем; 3) Новые фичи проще продать начальству; 4) Люди, работающие над продуктом, хорошо его знают, меню для них выглядит понятным, а функции — нужными; 5) Обычно пользователи просят добавить фич, а не убрать; 6) Новые фичи проще продать аудитории;
— Чтобы что-то с этим сделать, надо сначала признать существование проблемы и начать о ней говорить;
— Регулярно спрашивайте себя, не хрень ли я делаю;
— Осознайте, что количество фич, которые можно впихнуть в продукт — тоже ограниченный ресурс. Не надо им бездумно расшвыриваться;
— Проверяйте, как продукт выглядит для нового пользователя. Смотрите, как он его использует, чтобы сломать своё «проклятие знания»;
— Измеряйте, какими фичами насколько активно пользуются;
— Задумывайтесь, если бы фича была платной, стал бы кто-то платить за неё;
— Если продукт используют более чем для одной задачи, точно ли это должен быть один продукт, а не несколько разных;
— Важно уметь говорить «нет». Многим проще что-то добавить в продукт, чем объяснить, почему этого делать не надо.

#product

UX Notes оказались на 3-м месте в списке источников информации для продуктовых дизайнеров, согласно свежему исследованию DevCrowd!

Хороший повод сказать спасибо всем читателям и, конечно же, авторам публикуемых материалов. Спасибо вам!

Павел Шечков написал о методе экспертной оценки интерфейса PURE.

— Расшифровывается как Pragmatic Usability Rating by Experts;
— Помогает проверить существующие сценарии и сделать их менее сложными. Можно использовать для сравнения с предыдущими версиями сценария и с решениями конкурентов;
— Оценки экспертов усредняются, чтобы итоговые цифры стали объективнее;
— Учитывается время до точки входа в сценарий и время на прохождение сценария. Чем дольше, тем больше баллов. О схеме перевода секунд в баллы надо договориться;
— Лучше оценивать не макеты, а тестовую сборку или хотя бы прототип с эмуляцией времени отклика системы. Так время прохождения сценария будет ближе к правде;
— В сценарии считаются все нажатия кроме ввода данных с клавиатуры, а также все скролы. За каждое нажатие и скрол — балл;
— Если есть затруднения с выполнением действия (есть когнитивная нагрузка, нужны усилия, но пользователи справляются) — 2 балла и жёлтая отметка;
— Если шаг выполнить трудно (высокая когнитивная нагрузка, вызывает смятение, часть пользователей может не справиться) — 3 балла и красная отметка;
— Если есть хотя бы одна жёлтая или красная отметка, весь сценарий окрашивается в этот цвет;
— Сценарий получает от эксперта цвет и сумму баллов. Чем больше баллов, тем сценарий сложнее. В красном сценарии надо исправлять шаги с красными отметками.

Статья Кристиана Рорера из Nielsen Norman Group о PURE (in English). #research #expert_valuation

Эмиль Аминев написал о повышении конверсии в чекауте.

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

#ecommerce #checkout

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

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

#search #ecommerce

Дана Спиридонова написала об интерфейсном тексте на примере мессенджеров.

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

#writing

Алжанбек Шахнавазов написал, как проверить текст, презентующий ваш продукт.

— Замените своё название на название конкурента. Хороший текст перестанет быть актуальным. Если текст подходит конкурентам, значит, это белый шум, который клиенты слышат отовсюду;
— Сформулируйте противопоставление вашему преимуществу. Если оно как преимущество начинает звучать абсурдно, исходное преимущество тоже так себе. «Айфоны по очень низким ценам» → «Айфоны по очень высоким ценам» (абсурдное преимущество);
— Не упоминайте преимущества явно, пусть читатели выведут их самостоятельно. Пишите: «Перед продажей проверяем каждое устройство по 5 параметрам». Читатель думает: «Им точно не всё равно на качество».

#writing

Артём Плаксин написал о доступности изображений.

— Альтернативный текст нужен фотографиям, стикерам и смайликам, логотипам, дополняющим статью изображениям;
— Не нужен иконкам списков, декоративным иконкам вроде телефона рядом с номером телефона или конверта рядом с адресом электронной почты, декоративным изображениям и картинкам с подписями;
— В этом случае атрибут alt оставляйте пустым;
— Для тега svg добавляйте атрибут aria-hidden="true";
— Альтернативный текст к картинке должен кратко описывать изображение. Например: «Люди сидят на диванчиках и работают за ноутбуками»;
— Желательно уложиться в 80 символов, использовать простые предложения, начинать с заглавной буквы и не ставить точку в конце, не упоминать роль элемента: изображение, графика, иконка;
— Можно указать категорию изображения: фотография, логотип, скриншот.

#accessibility #image

Аида Пачева написала о новом подходе к адаптивности сайтов.

— Оптимального вьюпорта нет, значит, адаптивность должна быть гибкой;
— Но это не значит, что надо больше брейкпоинтов и под все рисовать макеты;
— С помощью контейнерных запросов и min(), max() и clamp() можно делать адаптивными отдельные компоненты;
— При этом для каждого компонента проработать надо только те состояния, которые ему нужны. Некоторым надо совсем немного;
— Например, хедеру может хватить двух состояний: 1) Навигация свёрнута в бургере; 2) Навигация развёрнута. Место для неё появляется с ширины в 995 px;
— «Шампуров [брейкпоинтов] стало больше, но суммарное количество шашлчыков на них [состояний компонентов] — меньше»;
— Если компоненты готовы измениться на близких значениях ширины (995 и 1000 px), стоит их синхронизировать;
— Чтобы независимые компоненты сходились вместе по вертикальным направляющим, помогут глобальные правила для сетки и шрифтовых стилей для конкретных диапазонов брейкпоинтов;
— Адаптивность может быть многоуровневой. При изменении ширины вьюпорта может перестраиваться блок с карточками, а уже при изменении ширины карточки в этом бллоке — перестраиваться её содержимое.

#adaptive

В Сбербанке подготовили гайд о двух адаптированных вариантах языка: ясном и простом.

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

#accessibility #writing

Самхита Танкала написала о каркасных экранах (Skeleton screen).

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

In English. #loader

Вячеслав Андреев написал об адаптации мобильного браузера под ТВ.

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

#tv

Катя Григорьева написала о влиянии визуальной привлекательности на удобство использования.

— Позитивная эмоциональная реакция на привлекательный интерфейс делает людей терпимее к небольшим неудобствам при взаимодействии (но только небольшим);
— Они могут оценивать удобство интерфейса выше, чем на самом деле. Это мешает увидеть часть проблем на пользовательском тестировании;
— Исследование Центра дизайна Hitachi в 1995 году показало сильное влияние эстетики на людей, даже если они оценивают функциональность системы;
— Можно немного снизить разрыв между опытом респондентов и тем, какие они дают оценки;
— Респонденты не должны давать свои оценки под давлением. Убеждайте, что это полезно. Давайте возможность комментировать, задавая открытые вопросы, но не давите, если им нечего сказать. Молчание — важная составляющая в общении исследователя и респондента;
— Они не должны хотеть порадовать вас. Подчёркивайте, что не вы разрабатываете этот дизайн и негативные комментарии вас не расстроят. И старайтесь эмоционально не реагировать;
— Направляйте респондентов за пределы визуального слоя. Используйте расплывчатые формулировки вроде «Есть ли у вас комментарии о том, насколько легко или сложно было найти эту информацию?»;
— Можно вернуть респондента на шаг, показавшийся особенно сложным, и попросить описать, что здесь произошло.

#user_testing