78. UI-киты, фреймворки, гайдлайны и дизайн-системы

В этом выпуске рассылки Проектората: статьи о работе фильтров мата, сторибордах, работе антифрод-машины Яндекса, различиях приложений для iOS и Android, UI-китах, фреймворках, гайдлайнах платформ и корпоративных дизайн-системах.

Фильтр мата

Ольга Назина написала, какой должна быть обратная связь в текстовых полях с фильтром мата и другого запрещённого контента.

  • Если в тексте есть ссылка, выводить сообщение об ошибке «Поле содержит ссылку»;
  • Если в тексте — запрещённое слово, выводить «Поле содержит некорректное выражение»;
  • При этом некорректные выражения надо выделять в тексте или перечислять в сообщении об ошибке. Фильтры могут ошибаться и принимать за мат нейтральные слова вроде «ребенок». В большом тексте сложно найти такое ложноматерное выражение.

Очевидные рекомендации, но, например, Wildberries так не умеет.

Сториборд

Рэйчел Краузе написала про сториборды (storyboard — раскадровка) в UX-дизайне.

Сториборд передаёт историю через выстроенные в хронологическом порядке изображения, которые отражают основные события. Его можно использовать для презентации дополнительного контекста команде и заинтересованным сторонам.

Сториборды основаны на сценарии или пользовательской истории. Каждый шаг персоны в сценарии представлен визуально через эскизы, иллюстрации или фотографии.

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

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

Сториборды часто используют для описания фрагмента путешествия пользователя (user journey).

Когда стоит использовать сториборды:

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

Антифрод-машина Яндекса

Евгений Шкляр написал, как работает антифрод-машина Яндекса и как она улучшает пользовательский опыт.

Например:

  • Если машина доверяет пользователю, для совершения платежа от него не требуется платёжный пароль и смс-подтверждение. Это экономит время и повышает конверсию;
  • Лучше защищены профили с накопленными бонусными баллами.

Если где-то есть незащищенный аккаунт с деньгами, его взломают. Поэтому много где в интернете продают бонусные карточки крупных торговых сетей с балансом в несколько тысяч рублей за сумму раза в 3−4 меньше. Это реальные аккаунты в программах лояльности, за которыми недосмотрели владельцы.

Также можно определить:

  • Неплатёжеспособных клиентов;
  • Мошенников (заказ дорогой вещи без предоплаты в спальный район мутным клиентом);
  • Поддельные комментарии и накрутку (или скрутку) рейтинга;
  • Неадекватные заказы (особенно, если лавина таких заказов завалила CRM);
  • Создание нескольких профилей одним человеком (например, для получения бонуса за регистрацию или скидки за первый заказ);
  • Легитимность данных (когда кто-то подсмотрел номер билета на самолёт и перерегистрировал пассажира на другой рейс).

Различие приложений для iOS и Android

Дизайнеры SteelKiwi написали о различиях приложений для iOS и Android (Material Design).

В шаблонах навигации:

  • Вкладки MD похожи на сегментированный контрол iOS, нижняя панель навигации MD — на панель вкладок в нижней части экрана iOS. В MD первичная навигация часто скрыта в бургерном меню, в iOS его используют для вторичной навигации;
  • В iOS на внутренних экранах приложения должна быть верхняя навигационная панель с кнопкой «Назад» слева.

В стандартных элементах управления, например, выбор даты в iOS делается с помощью барабана, а в Android — календаря.

В стиле кнопок:

  • Текст на кнопках в Android обычно имеет верхний регистр. В iOS чаще встречается верхний регистр первой буквы каждого слова;
  • Основная кнопка (call to action) в iOS располагается в центре панели вкладок.

Микровзаимодействия:

  • iOS: если пользователь открывает экран, опустив его вниз с верхней части экрана, он ожидает, что сможет убрать его, сдвинув вверх;
  • MD: экраны одного типа (фотографии в альбоме, разделы в профиле) двигаются синхронно, это подчёркивает связь между ними. Когда один экран появляется справа, его брат смещается влево.

UI-киты, фреймворки, гайдлайны платформ и корпоративные дизайн-системы

Команда «Тильды» написала очень хороший вводный материал о UI-китах, фреймворках, гайдлайнах платформ и корпоративных дизайн-системах.

  • Что такое UI-кит (с примерами), кто применяет, какие обычно элементы в него входят, какие бывают состояния, зачем использовать, где взять готовые киты;
  • Что такое фреймворки и чем они отличаются от UI-китов. Из чего состоит Bootstrap, и как с ним работать;
  • Что такое гайдлайны платформ, подробнее про Material Design от Google и Human Interface Guidelines от Apple, ссылки для более глубокого изучения;
  • Что такое корпоративные дизайн-системы, чем они отличаются от UI-китов и фреймворков и зачем разрабатываются, ссылки на примеры.

(Самая популярная ссылка в этой подборке, если судить по количеству лайков в UX Notes ВКонтакте.)

Рассылка Проектората × UX Notes

Опечатка? Выделите её и нажмите кнопки Control и Enter.

Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 250 рублей.

Теперь электронную версию можно купить и читать на Литресе.