109. Этап анализа

В этом выпуске рассылки Проектората: статьи об этапе анализа, создании интерфейса для игры, учёте требований информационной безопасности, выводах из «Биологии добра и зла», способах сообщить пользователю о состоянии системы, умении кодить, а также видео об интерфейсах систем автомобиля.

Этап анализа

Евгений Игнашов написал для начинающих об этапе анализа, который идёт перед проектированием интерфейса.

  • Что надо спросить у заказчика;
  • Какие показатели посмотреть в Яндекс Метрике (если есть);
  • Как составить карточку пользователя и описать сценарий;
  • Что смотреть у конкурентов;
  • Две карты интерфейса: как сейчас (если есть) и как надо;
  • Как подбирать примеры стилистики.

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

После этапа анализа:

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

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

Создание интерфейса для игры

Михаил Кравченко написал о создании интерфейса для игры.

Обзорно рассмотрел шаги:

  • Описание проблемы;
  • Работа с референсами;
  • Пользовательский сценарий;
  • Согласование с командой (особенно важно в самом начале, посмотрите примеры обратной связи от команды);
  • Набросок структуры интерфейса;
  • Создание и тестирование прототипа (желательно, если есть время);
  • Оформление интерфейса, сбор из UI Kit’а;
  • Подготовка материалов для программистов;
  • Контроль качества сборки;
  • Тестирование на игроках.

Если UI Kit’а нет, то перед оформлением интерфейса надо сделать:

  • Визуальный стиль интерфейса под сеттинг игры;
  • Работа с референсами визуального стиля;
  • Наброски визуального стиля интерфейса;
  • Чистовая отрисовка интерфейса;
  • Сборка UI Kit’а.

Есть примеры артефактов.

Хороший пример соответствия оформления интерфейса сеттингу игры в StarCraft II. Когда играем за людей, интерфейс состоит из металлических панелей, пластин, проводов и заклёпок. Когда играем за зергов, интерфейс представляет собой аморфную биомассу с прожилками из когтей, хитиновых пластин и подобного.

Учёт требований информационной безопасности

Павел Шерер написал об учёте требований информационной безопасности при проектировании интерфейса. Например:

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

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

Для предотвращения этого достаточно сделать ещё одну ветку сценария и отрисовать ещё один типовой макет. Через сутки мы деактивируем ссылку из письма с восстановлением доступа. Дизайнер собирает один макет, на котором показывает сообщение типа «Ссылка устарела».

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

Биология добра и зла

Дмитрий Ваницкий поделился краткими выводами из монументальной «Биологии добра и зла» Роберта Сапольски.

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

Книгу можно рекомендовать всем, кто увлекается или хочет увлечься нейробиологической основой нашей модели принятия решений.

Давайте представим, что вы участвуете в эксперименте по определению длины отрезков вместе с другими испытуемыми. Всё идёт хорошо, пока вам не показывают отрезки, 1-й из которых явно длиннее. Вы думаете: «Изи!». Но вот все остальные говорят, что длиннее 2-й отрезок. Настаёт ваша очередь. Что вы сделаете? Пойдёте против большинства или дадите заведомо неверный ответ, чтобы не выделяться? Я скажу, что с вероятностью 75% — второе.

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

Интерфейсы систем автомобиля

Автомобильный дизайнер Артём Степанов рассказал об интерфейсах систем автомобиля.

Мы сейчас на этапе развития автомобильных технологий «Это ужасно, но все привыкли» и тихонечко его перескакиваем. 80% автомобилистов пользуются 10% функций автомобиля.

Из-за унификации в пределах больших концернов (например, Volkswagen-Audi Group) владельцы дорогих машин садятся на кожаные сидения, но видят те же панели (например, управления кондиционером), что и владельцы машин в 2 раза дешевле.

Маркетологи тоже думают, как сделать круто, ведь нельзя же покупателям новых моделей предлагать старые добрые крутилки. Так в БМВ 7-й серии мультимедиа можно управлять 5 способами:

  • Крутилка на передней консоли;
  • Касание экрана;
  • Тач-панель на крутилке (вместо использования экранной клавиатуры можно рисовать буквы);
  • Жесты рукой в воздухе (изменение громкости, переключение каналов);
  • Голос.

Тач-панель в Тесле в виде огромного планшета — это просто экономия огромной кучи денег. Конечно, этот планшет дороже обычных экранов и пластиковых кнопок. Экономия происходит при разработке новых элементов.

Информирование о состоянии системы

Николай Бабич написал, как сообщить пользователю о состоянии системы.

  • Выделить в меню раздел, в котором пользователь сейчас находится;
  • Показать количество шагов, которое необходимо для завершения процедуры;
  • Обратная связь на действия пользователя — нажатия на кнопки и переключатели;
  • Показать индикатор загрузки; с прогресс-баром, если операция занимает больше 10 секунд;
  • Анимированные экраны-заставки для мобильных приложений;
  • Отобразить скелет страницы, пока загружается её содержимое (паттерн skeleton page/screen);
  • Уведомления об изменениях в системе;
  • Моментальная обратная связь о неправильно заполненном поле.

Дизайнер и код

Матвей Правосудов написал, зачем дизайнеру уметь кодить.

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

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

Так вот, понимание принципов работы технологий (HTML/CSS/JS/API для веба, Swift для iOS и Kotlin/Java для Android) помогает сразу делать макеты более жизнеспособными, а иногда, при возникающих сложностях у разработчиков, ухищряться и выдавать оптимизированное решение, которое достигает того же эффекта, но заметно дешевле.

Обсуждение в комментариях в ВК.

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

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

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

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