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

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

Интересные статьи

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

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

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

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

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

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

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

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

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

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

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

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

Например:

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

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

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

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

Дизайнеры 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-китов. Из чего состоит Bootstrap, и как с ним работать.
  • Что такое гайдлайны платформ, подробнее про Material Design от Google и Human Interface Guidelines от Apple, ссылки для более глубокого изучения.
  • Что такое корпоративные дизайн-системы, чем они отличаются от UI-китов и фреймворков и зачем разрабатываются, ссылки на примеры.

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

Неопубликованное

Допустим, вы ИП и работаете с заказчиками по договору, и вы сделали мелкий проект за 15000 рублей.

7% уйдут на налоги, останется чуть меньше 14000 рублей. Для ровного счёта допустим, что ваш час стоит 1400 рублей. На выполнение задачи у вас есть 10 оплаченных часов.

Если у вас нет помощника, который с меньшей часовой ставкой помогает оформлять бумаги, получается забавно:

  • Переписка с бухгалтерией об обмене документами. Плюс, переписка с менеджером проекта, так как бухгалтерия письма игнорирует. Суммарно 30 минут;
  • Печать подписанного заказчиком договора и акта, подписание с вашей стороны, сканирование получившихся документов. Этот скан почему-то запросили в бухгалтерии. 30 минут;
  • Поход на почту для отправки оригиналов. 1 час;
  • Поход на почту для получения оригиналов, подписанных заказчиком. 1 час.

Время на изначальную подготовку договора и акта не учтено.

Чтобы стоимость вашего часа в этом проекте не опустилась ниже 1400 рублей, на проектирование вы должны потратить 7 часов.

Получается, что мелкие проекты оформлять договорами не выгодно. Надо:

  • Либо отдельно оценивать документооборот. В данном случае это +30% к стоимости;
  • Либо подписывать документы электронной подписью, например, через Диадок. Чаще всего клиенты не подключены совсем или подключены к другой системе;
  • Либо расширяться и со временем нанимать помощника для работы с документами;
  • Либо оставить мелкие проекты фрилансерам, которые работают вообще без договора.

(Заметка из моего личного телеграм-канала «Френч-пресс».)

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

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