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

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

Этап анализа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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