Дайджест заметок UX-дизайнера за июль 2022

Автор заметок UX-дизайнера — Антон Григорьев — опытный проектировщик информационных систем, преподаватель и автор статей. Он каждый месяц прочитывает десятки публикаций, отбирает из них самые достойные, выписывает основные тезисы и публикует в своём канале. В июльский дайджест полезных материалов для UX-дизайнеров попало 14 материалов:

В Sparkbox написали о мобильной навигации по большим контентным сайтам [English]

— Иконку бургера стоит подписывать «Меню», если у сайта широкая аудитория с разным опытом и культурными особенностями;

— В главном меню разделяйте основные и второстепенные пункты визуально. Пункты (например, в меню второго уровня) можно группировать с помощью заголовков;

— Дайте возможность раскрыть несколько подменю одновременно. Отображайте иконки раскрытия и скрытия;

— Если навигация по дочерним страницам отображается на родительской, проверяйте, насколько она заметна и понятна пользователям (они склонны уходить в главное меню);

— В меню выделяйте страницу, на которой пользователь находится. На мобильных устройствах меню закрывает текущую страницу, пользователь теряет контекст и может выбрать её повторно (и расстроиться);

— Хлебные крошки помогают понять, где в структуре расположена текущая страница;

— Если ссылка или пункт меню ведёт на другой сайт с отличающейся навигацией, добавьте такой идентификатор. Открытие такого сайта в новой вкладке на мобильных устройствах сбивает с толку;

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

Александр Чудеснов написал, как сделать доступным продукт из множества приложений, которые написаны разными командами

— Страница с правильной цветовой контрастностью, структурой заголовков и HTML-вёрсткой, скорее всего, уже отвечает критериям доступности;

— Есть нюансы: разная реализация некоторых функций в разных браузерах, отдельные неудобные элементы вроде нативного поля ввода даты;

— Проблема в том, что Single Page Applications выходят за рамки возможностей HTML. В них много компонентов, которые не предоставляет сам браузер. При их создании надо отвечать на множество вопросов о взаимодействии с помощью клавиатуры, разметке для скринридеров, управлении фокусом;

— Дизайн-система не всегда спасает: проработанный компонент из ДС может не подходить продукту и не использоваться;

— Относитесь к ДС как к продукту: собирайте статистику использования и обратную связь, отслеживайте и исправляйте проблемы;

— ДС должна решать проблемы команд, предоставлять компоненты с разумными дефолтами, которые можно менять в определённых рамках. Без инструкций в формате «собери сам»;

— Есть проблема в совмещении визуальных и интерактивных паттернов. Кроме визуального стиля компонента важно прорабатывать способы взаимодействия с ним и возможную композицию с другими элементами;

— ДС может содержать визуальный слой, слой интерактивных паттернов и отдельно — собранные готовые компоненты (как в ДС Adobe Spectrum);

— Не пренебрегайте автоматическим тестированием. Тестировать компоненты в разных состояниях проще в Storybook, чем в продакшене. После ручного аудита (в Lighthouse или axe DevTools) стоит написать автоматизированные тесты (axe-Selenium);

— Важно, чтобы доступность интерфейсов стала частью культуры компании: помогите сформировать запрос на доступность, зовите на тестирование людей с инвалидностью, дайте сотрудникам возможность научиться создавать доступные продукты, установить цели, связанные в том числе и с процессами («80% команд знают и используют принципы обеспечения доступности»).

Майкл Виллар написал о скролбарах

— Их стиль и поведение отличается для разных операционных систем, браузеров и устройств прокрутки: мыши с колёсиком, Magic Mouse, трекпада. Например, скролбар в macOS может ездить по отдельной видимой дорожке (мышь с колёсиком) или просто поверх контента (трекпад и Magic Mouse);

— Для второго случая следует предусматривать дополнительный отступ справа, чтобы скролбар не закрывал контент;

— Кастомные скролбары помогают сохранять консистентность продукта на разных платформах и не перегружать интерфейс видимыми дорожками;

— Скрытые скролбары, которые отображаются после начала прокрутки, затрудняют обнаружение скрытого контента. Также сложно нажать на сам скролбар — он быстро исчезает после окончания прокрутки;

— В Height скролбар отображается при наведении курсора на блок с прокруткой;

— Кастомные скролбары дают полный контроль над тем, когда их отображать. Например, на канбан-досках имеет смысл показывать скролбары всегда, чтобы можно было быстро оценить количество задач в каждом столбце;

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

Кэтрин Тотц написала об отображении цен и скидок на странице товара

— Цена — одна из самых важных характеристик товара, влияющая на решение о покупке;

— Цена не должна теряться на фоне других элементов страницы. Очевидный совет, но посмотрите в статье примеры сайтов, на которых цены найти весьма непросто (Adidas, Patagonia);

— Стоит учесть, что пользователи просматривают каталог и страницы товаров быстро, а цена (в долларах особенно) может быть довольно коротким текстом;

— Если пользователь не увидит цены, он может посчитать, что магазин намеренно скрывает важную информацию. Появится недоверие;

— Хороший вариант отображения скидки: новая цена и зачёркнутая старая;

— Отображайте скидки, описания спецпредложений и иконки с метафорами скидки рядом с ценой. Пользователи могут не понять, что предложения и скидки относятся к товару, который они изучают, или даже полностью их проигнорировать;

— Неудобно, когда безусловная скидка на товар отображается только в корзине;

— Не стоит писать об одном и том же спецпредложении несколько раз. Люди начинают путаться в том, что же они получат в итоге;

— Если о спецпредложении надо рассказать на странице несколько раз, его описания должны быть одинаковыми (или почти), чтобы пользователь понял, что это одно и то же;

— Стоит отображать размер скидки: в абсолютном выражении и в процентном. Если места хватает только для одного варианта, выбирайте тот, где цифры получаются больше. Если скидка 20→15 долларов, то лучше написать, что скидка 25%. Если 1000→900, то лучше скидка $100.

Станислав Хрусталёв написал о лучших практиках работы с корзиной

— После добавления товара в корзину кнопка должна менять свой вид, показывая, что товар добавлен. Лучше обойтись микроанимацией кнопки. Анимация улетающего в корзину товара может быть неуместной;

— Если товары обычно покупают по одной штуке, кнопку добавления можно заменить на кнопку перехода в корзину;

— Дайте возможность удалить товар из корзины, не переходя в неё;

— Если у вас хорошо запоминающиеся пакеты для товаров (ЦУМ), можно стилизовать иконку корзины в шапке под такой пакет. В остальных случаях выбирайте стандартную метафору корзины;

— Не отображайте рядом с иконкой корзины бейдж с нулём. Бейдж привлекает внимание, которое не требуется, если в корзине пусто;

— В корзине можно ненавязчиво рассказать о следующих шагах, например, что дата и стоимость доставки станут известны при оформлении заказа;

— Полезная функция: очистить корзину;

— Если свободное место позволяет, в корзине можно разместить список преимуществ магазина;

— Если в покупке обычно участвуют несколько людей (Сантехника онлайн), полезной будет возможность поделиться корзиной;

— В пустой корзине можно разместить призыв к действию, ссылки на каталог и главную, на авторизацию (возможно, товары у пользователя в корзине есть, просто он не вошёл), кнопки активации поиска, добавления товаров из последнего заказа;

— Дайте возможность отложить выбранные товары или заказать часть того, что есть в корзине;

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

— Интересная возможность: группировка товаров по категориям (Утконос), по наличию, чтобы быстро сориентироваться, что надо заменить;

— Не стоит акцентировать поле для ввода промокода, чтобы не побуждать пользователя прерывать заказ и отправляться на поиски кода.

Роман Местер написал о коридорном тесте

— Он помогает найти мешающие пользователям ошибки дизайна и неучтённые сценарии, узнать, как пользователи воспринимают дизайн;

— Не позволяет определить, какой вариант дизайна лучше;

— Прототип может быть линейным. Подходит для проверки онбординга, простых фич без сложного взаимодействия;

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

— Чем реалистичнее прототип, тем больше инсайтов можно получить;

— В начале теста надо задать контекст (рассказать легенду), но не стоит говорить, что именно вы тестируете;

— Обычно достаточно 3–5 тестов, чтобы выявить основные проблемы;

— Спрашивайте респондента: что он видит (станет понятно, как он воспринимает интерфейс и понимает ли, где находится), что понимает, что хочет сделать (чтобы избежать беспорядочного кликания на всё подряд).

Павел Шерер описал идеальную схему регистрации (через электронную почту и соцсети), логина и восстановления пароля

Например, в ней учтены:

— Временные профили, у которых не подтверждены адреса электронной почты;

— Ограничение срока действия ссылки для подтверждения профиля;

— Ситуация, когда соцсеть при регистрации не сообщила почту пользователя;

— Объединение профилей при регистрации и логине через разные соцсети;

— Восстановление пароля, если пользователь регистрировался через соцсеть;

— Деактивация ссылки на восстановление пароля после того, как пользователь восстановил пароль по этой ссылке;

— Автоматический вход в профиль после перехода по ссылке для восстановления пароля;

— Возвращение пользователя после авторизации на страницу, с которой он перешёл к авторизации;

— Подсказка о том, через какую соцсеть пользователь входил раньше.

«Кто из нас не сталкивался с тем, что тупит перед формой входа, не помня, как именно он регался на этом сервисе: через почту или какую-то из соцсетей? И таких примеров тьма. Но самое грустное в том, что мы сами считаем это нормой, и чаще всего виним себя и свою забывчивость, тогда как чаще всего виноват в этом именно сервис».

Мария Нижегородова написала об особенностях работы со специфичными респондентами: дворовый парень, VIP, провинциал, эксперт и продвинутый

— Чем удивляет дворовый парень: часто интуитивно понимает наиболее важные для себя функции и обладает телефоном-флагманом (вопрос престижа);

— Чем помогает: не стесняется критиковать продукт, при должном доверии может подсказать схемы, как что-то сделать супервыгодно для себя;

— Чем удивляет VIP: благожелательностью и уважением к исследователю; тем, что иногда можно расслабиться и использовать сложную лексику. Если исследователь сможет наладить контакт, изначально выделенные 15 минут на интервью могут перерасти в 1,5 часа с отменой других встреч;

— Чем помогает: комментариями по существу и выстроенной аргументацией, вниманием к деталям. Одно продуктивное интервью может принести много инсайтов;

— Чем удивляет провинциал: моделью смартфона, качеством локального интернета, сердечностью и искренностью;

— Чем помогает: проверкой продукта на любом продукте с любым интернетом, проверкой текста (берегите редактора, чей текст её пройдёт);

— Чем удивляет эксперт: неожиданным взглядом на проблему и рынок, внезапным прогнозом. Но не всегда;

— Чем помогает: становится источником принципиально новой для компании информации, помогает обобщениями, сравнительным анализом и мультидисциплинарным подходом;

— Чем удивляет продвинутый: эмоциональной вовлечённостью в продукт, которой иногда не хватает участникам команды, вниманием к деталям и творческим использованием продукта;

— Чем помогает: подсвечивает реальные и воспринимаемые ошибки, обозначает опережающие рынок потребности.

Павел Григорьев написал об ошибках при создании дизайн-системы

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

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

— Подход с целевыми разрешениями себя не оправдал. Надо закладывать ресурсы на проработку экранных форм, элементов ДС и UI-кита под разные разрешения;

— Сложные модули лучше делать более гибкими, чтобы проще было их изменить (в первую очередь с точки зрения кода), так как для таких модулей сложно всё предусмотреть с самого начала;

— Набора элементов недостаточно, нужны инструкции по их правильному использованию, примеры и шаблоны с лучшими практиками;

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

Дэмиен Ньюман в 2002-м нарисовал популярную схему, иллюстрирующую дизайн-процесс

— Создание дизайн-решения происходит в три этапа: 1) research, погружение в задачу и изучение возможностей по её решению, 2) concept, формирование концепции, которая помогает перейти к проработке нюансов, 3) design, совершенствование концепции на основе обратной связи;

— Важно не пропускать этапы. Все три шага можно повторить;

— Почему такая визуализация: всё начинается с беспорядка и неопределённости и завершается в точке ясности завершённым дизайн-решением;

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

— «Загогулину» можно использовать бесплатно с указанием автора (в том числе и с коммерческой целью).

Игорь Кузнецов написал о 10 принципах Дитера Рамса

— Некоторые принципы понятны, а некоторые требуют обдумывания. Игорь работает в сфере дизайна интерьеров и мебели, но его расшифровки могут быть полезны и дизайнерам интерфейсов;

— Хороший дизайн — инновационный, он развивается вместе с технологиями. Осваивайте новые технологии, чтобы двигаться вперёд;

— Удобен в использовании;

— Эстетичен. Красота субъективна, но есть классические принципы композиции, баланса. Плюс, со временем человек устремляется к большей простоте и осознанности;

— Делает продукт понятным для потребителя. Дизайн объясняет структуру продукта, помогает работать с ним без инструкции;

— Ненавязчив. Практичные визуально чистые предметы хорошо встают в разные интерьеры (см. видео Антона Шнайдера «Дизайн без дизайна» (https://www. youtube. com/watch? v=PeAFLzzeXIk));

— Честен. Самый сложный в расшифровке принцип. Дизайн не должен завышать ожидания от продукта или манипулировать ими. Напишите в комментариях, как этот принцип понимаете вы?

— Актуален. Трендовый дизайн быстро устаревает. Крутой дизайн не создать, повторяя трендовые решения (только предугадывая). Он должен идти от сердца, веры в себя, увлечённости и удовольствия от своей работы;

— Продуман до каждой детали. Ничто не должно быть случайным или оставленным на волю случая;

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

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

Фейфей Лиу написала о переключателях языка (страны, валюты) в интернет-магазинах

— По умолчанию отображайте языковую версию, ориентируясь на настройки браузера и IP-адрес пользователя;

— Если так сделать проблематично, показывайте специальную страницу, на которой пользователь может выбрать регион и язык и перейти на региональный сайт (Zara);

— Размещайте переключатель в правом или левом верхнем углу на десктопных версиях сайтов (Asos), на мобильных — в верхней части (обычно занята более важной информацией) или в меню (Amcal+);

— Название языка пишите на том же языке, то есть вместо «Испанский» пишите «Español» (см. Airbnb и мобильный сайт Burberry);

— Если список вариантов стран и языков большой, в отдельном блоке можно отобразить предложения языка и страны для быстрого выбора: что часто выбирают или что соответствует настройкам браузера пользователя (Airbnb);

— Переключатель обозначайте сочетанием текста и иконок (флаг, символ валюты). Так его легче заметить и распознать, он подсказывает о возможности, например, выбрать валюту для оплаты (Selfridges);

— Флаг прямоугольной формы распознать проще, чем стилизованный круглый (Asos);

— Разрешите настраивать язык, страну и валюту независимо друг от друга (AliExpress).

Сергей Шандарин написал о поиске работы дизайнером за рубежом (после 24 февраля)

— Будьте готовы к более формальному и длинному процессу найма, чем в России. Самая быстрая компания сделала оффер через месяц после заявки. Компания, оффер которой Сергей принял, — через 7 недель;

— Как правило, проходит от 2 до 6 отборочных этапов;

— Итоговая конверсия из заявок в офферы — 4%;

— Во всех компаниях на интервью задают идентичные вопросы, имеет смысл отрепетировать ответы;

— Отказы на поздних этапах иногда содержат обратную связь («не хватило А, Б, В»), но бывает, она противоречит тому, что происходило во время звонка. Или комментариям другой команды. Обращайте внимание только на то, что упомянули несколько разных людей;

— Сергей не встретил негатива от собеседующих из Украины и стран Восточной Европы, но сложилось впечатление, что отказов на поздних этапах от таких команд было больше. Полезно узнавать о составе команды как можно раньше;

— Если переезжаешь, зарплату предлагают одинаковую: 80–90 тысяч евро в год в Европе и 90–120 тысяч евро в Великобритании. В большинстве компаний за релокацию предлагают 5% от зарплаты;

— Портфолио оформляйте в виде сайта. Разместите там а) красивые картинки сделанных проектов с кратким описанием вашего вклада и результатов или б) детальные разборы сделанных проектов. Их никто не читает, но они показывают, что вы умеете делать не только визуал;

— Всё должно быть переведено на английский, особенно макеты;

— Важнейший фактор отбора — есть ли у вас разрешение на работу в стране. Выясните заранее, насколько реально его получить. Сергею не ответил никто из США, так как не было рабочей визы и единственный в году розыгрыш виз уже прошёл;

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

— Срок годности вакансии: от 1 до 3 дней с момента публикации. Потом откликов становится слишком много, и их перестают смотреть;

— В известных компаниях срок годности: от 1 до 3 часов. Постарайтесь найти сотрудника компании, который вас порекомендует;

— Компании, которые просят указать в заявке текущую или ожидаемую зарплату, обычно платят ниже рынка. Укажите честные цифры, чтобы они поняли, стоит ли начинать процесс;

— Рекрутёры отвечают в пределах 3–4 дней. Долгие ответы в самом начале — индикатор беспорядка в мелких и средних компаниях и бюрократии в крупных;

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

— Сорсер — человек, который ищет специалистов под заданные требования (в них не разбираясь) и приглашает поговорить. Если вы сами откликаетесь на вакансии, говорить с ним не придётся;

— Перед звонком ваше резюме не будут внимательно читать. Все важные и интересные факты о себе стоит проговаривать при разговоре с новым человеком;

— Презентация — это готовая последовательность слайдов о проекте: от формулировки проблемы до полученных результатов;

— Тестовые задания не очень популярны. Их дали только 4 компании из 15, с которыми Сергей серьёзно общался;

— Важно не воспринимать их буквально. Если для решения, хорошего для пользователей и бизнеса, надо оспорить задачу, значит, аргументированно её оспаривайте;

— У нанимающих менеджеров можно поинтересоваться, чего ожидать от предстоящего разговора с топ-менеджером. Он обычно заинтересован, чтобы у вас всё получилось;

— Текущую или ожидаемую зарплату называть не стоит. Если рекрутёр настаивает, можно ответить, что в среднем по рынку такие специалисты получают X. Это даст пространство для манёвра в будущем;

— Лучшая компенсация — не всегда более высокая зарплата. Это может быть пакет акций, подписной бонус, удалённая работа, больше дней отпуска, более гибкий график. Предложенную компанией компенсацию почти всегда можно улучшить.

Игорь Штанг написал, что делать с текстом в скобках (например)

— Скобки — парный знак препинания. Они больше шумят и занимают места, чем запятая или иной одинарный символ;

— «Аренда телеги (за час)» → «Аренда телеги, за час» или «Аренда телеги / за час»;

— Можно убрать знаки препинания и выделить текст кеглем, цветом или начертанием и таким образом создать визуальный слой. Скобки на такое не способны;

— Если примечаний много или они однотипные, их стоит сгруппировать в отдельной колонке или в другом отдельном блоке.

Следить за заметками UX-дизайнера можно в Телеграме.