В этом выпуске: статьи об этапе анализа, создании интерфейса для игры, учёте требований информационной безопасности, выводах из «Биологии добра и зла», способах сообщить пользователю о состоянии системы, умении кодить, а также видео об интерфейсах систем автомобиля.
Этап анализа
Евгений Игнашов написал для начинающих об этапе анализа, который идёт перед проектированием интерфейса:
- Что надо спросить у заказчика;
- Какие показатели посмотреть в Яндекс Метрике (если есть);
- Как составить карточку пользователя и описать сценарий;
- Что смотреть у конкурентов;
- Две карты интерфейса: как сейчас (если есть) и как надо;
- Как подбирать примеры стилистики.
При анализе конкурентов выписываю только то, что можно у них почерпнуть. Нет смысла выписывать слабые стороны. Клиенты с небольшой иронией в голосе говорили что-то вроде: «А, ну нормально. Просто взял, что увидел у кого-то, и к нам применяешь». После этого я специально в презентацию добавил фразу «Можно почерпнуть у конкурентов», сходу говоря, что если надо, то именно это я и возьму, не стесняясь.
После этапа анализа:
- Клиенту стало чуть-чуть понятнее, чего ожидать в итоге;
- Дизайнеру стало понятнее, как делать и почему именно так;
- Дизайнеру проще оценить сложность проекта и выдать почти точные сроки;
- Дизайнеру и клиенту проще сдать и принять результат;
- Проект будет более продуманным, и это хорошо.
(Самая популярная ссылка в этой подборке, если судить по количеству лайков в ВК.)
Создание интерфейса для игры
Михаил Кравченко написал о создании интерфейса для игры.
Обзорно рассмотрел шаги:
- Описание проблемы;
- Работа с референсами;
- Пользовательский сценарий;
- Согласование с командой (особенно важно в самом начале, посмотрите примеры обратной связи от команды);
- Набросок структуры интерфейса;
- Создание и тестирование прототипа (желательно, если есть время);
- Оформление интерфейса, сбор из 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 способами:
- Крутилка на передней консоли;
- Касание экрана;
- Тач-панель на крутилке (вместо использования экранной клавиатуры можно рисовать буквы);
- Жесты рукой в воздухе (изменение громкости, переключение каналов);
- Голос.
Тач-панель в Тесле в виде огромного планшета — это просто экономия огромной кучи денег. Конечно, этот планшет дороже обычных экранов и пластиковых кнопок. Экономия происходит при разработке новых элементов.