В этом выпуске: статьи о работе фильтра мата, сторибордах, работе антифрод-машины Яндекса, различиях приложений для iOS и Android, UI-китах, фреймворках, гайдлайнах платформ и корпоративных дизайн-системах.
Фильтр мата
Ольга Назина написала, какой должна быть обратная связь в текстовых полях с фильтром мата и другого запрещённого контента:
- Если в тексте есть ссылка, выводить сообщение об ошибке «Поле содержит ссылку»;
- Если в тексте — запрещённое слово, выводить «Поле содержит некорректное выражение»;
- При этом некорректные выражения надо выделять в тексте или перечислять в сообщении об ошибке. Фильтры могут ошибаться и принимать за мат нейтральные слова вроде «ребенок». В большом тексте сложно найти такое ложноматерное выражение.
Очевидные рекомендации, но, например, Wildberries так не умеет.
Сториборд
Рэйчел Краузе написала о сторибордах (storyboard — раскадровка) в UX-дизайне.
Сториборд передаёт историю через выстроенные в хронологическом порядке изображения, которые отражают основные события. Его можно использовать для презентации дополнительного контекста команде и заинтересованным сторонам.
Сториборды основаны на сценарии или пользовательской истории. Каждый шаг персоны в сценарии представлен визуально через эскизы, иллюстрации или фотографии.
В зависимости от цели сториборда и его аудитории изображения могут быть быстрыми набросками и тщательно проработанными проектами. Они могут содержат детали истории: окружающие пользователя предметы, его слова и мысли в виде облаков диалогов, эскизы экранов, с которыми он взаимодействует.
В подписях к изображениям описываются действия пользователя, окружающая среда, эмоциональное состояние, техническое устройство и так далее. Они должны быть краткими.
Сториборды часто используют для описания фрагмента путешествия пользователя (user journey).
Когда стоит использовать сториборды:
- Подведение итогов юзабилити-тестирования. Сториборд может включать процитированные слова пользователя, а также передавать элементы языка тела;
- Дополнение карты путешествия пользователя (визуализация используемого устройства, офисного пространства и социальной группы) для лучшего понимания его ситуации;
- Понимание и запоминание, какие функции нужны пользователю для завершения сценария и, следовательно, на чём необходимо сосредоточиться;
- Оформление идей: визуализация будущего опыта или лучшее понимание среды пользователя перед началом разработки.
Антифрод-машина Яндекса
Евгений Шкляр написал, как работает антифрод-машина Яндекса и как она улучшает пользовательский опыт.
Например:
- Если машина доверяет пользователю, для совершения платежа от него не требуется платёжный пароль и смс-подтверждение. Это экономит время и повышает конверсию;
- Лучше защищены профили с накопленными бонусными баллами.
Если где-то есть незащищенный аккаунт с деньгами, его взломают. Поэтому много где в интернете продают бонусные карточки крупных торговых сетей с балансом в несколько тысяч рублей за сумму раза в 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-китов и фреймворков и зачем разрабатываются, ссылки на примеры.
(Самая популярная ссылка в этой подборке, если судить по количеству лайков в ВК.)