Интерфейсы: скучные кнопки или дизайн мира вокруг нас

💡 Усі статті, обговорення, новини про дизайн — в одному місці. Приєднуйтесь до Design спільноти!

Меня зовут Виктория Тертычная, я Lead UI Artist в компании Kevuru Games. Дизайном занимаюсь с 2007 года, в GameDev — c 2010-го. Я искренне считаю, что UI/UX-дизайнер — одна из самых популярных (и востребованных!) профессий сегодня.

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

UI/UX-дизайн — интересный и одновременно сложный процесс. Его суть заключается в создании красивого и удобного инструмента взаимодействия, который помогает пользователю не потеряться в современном мире. С этим пониманием новичку-дизайнеру стоит учиться развивать художественные навыки и быть тонким психологом. Да, дизайнеру нужно быть эмпатом, ведь от этого качества зависит успех его будущего творения!

А теперь подробней обо всем этом.

Понятия User Experience и User Interface

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

И понятие «вовлечение» как нельзя лучше отвечает на вопрос, что же такое UI и UX.

Для тех, кто рассматривает возможность развития в профессии UI/UX Designer, важно понимать, что интерфейсы — это не (только) про кнопки (варфреймы, блок-схемы и верстку приложений). Хороший производитель отличается от плохого тем, что прежде, чем пустить свой продукт в массовое производство, он проводит исследования, собирает данные с целевой аудитории, изучает опыт пользователей.

Дизайнер интерфейсов — это дизайнер мира вокруг нас.

О чем нужно помнить при разработке интерфейса

В погоне за улучшением дизайнеры не всегда получают оптимальный результат. Часто бывает такое, что какое-то решение выглядит успешным, с ним идут дальше в разработку, а на практике выясняется, что оно было удобно только ограниченному кругу лиц. Или же про это никто не подумал. Или подумал, но решил, что это не важно. Поэтому разработка любого продукта — будь то приложение, игра, духовка или автомобиль — начинается с прототипа.

Прототип — это работающая конструкция продукта, которую можно отдать пользователям для тестирования. Прототипированием занимаются UX-дизайнеры на этапе задумки, отвечая на все каверзные вопросы типа «А что будет, если я сюда нажму/открою/потяну». На этапе прототипа нет смысла думать о красоте и высоком чувстве прекрасного. По сути, UX-дизайнер — это в первую очередь психолог, а уже потом художник. Часто он вообще может не быть художником. Мой опыт показывает, что UXer — это скорее человек с техническим складом ума, ему гораздо полезнее быть программистом, чем художником. Ну, в идеальном мире, конечно, лучше совмещать это все в одном лице (что и позволяет толковым ребятам с должностью UI/UX Designer получать очень неплохие деньги).

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

Здесь можно привести в пример один из проектов нашей компании. Заказчик придумал игру. Игра в привычном и любимом многими казуальном сеттинге, в жанре ситибилдера под mobile. В качестве основной механики игры заказчик не хотел видеть популярные Match3 или HOPA. Он придумал нечто оригинальное: игрок будет управлять некими механизмами, существующими в реальности, подключаясь к ним через сервера.

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

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

В целом можно вывести основные требования к качественному UX/UI-дизайну. Про них можно прочитать в книгах по проектировании интерфейсов.

• Одинаковое удобство в использовании при кроссплатформенной разработке. Если продукт можно использовать, например, в мобильном приложении и в браузере, то функции элементов интерфейса должны совпадать. Яркий антипример — интерфейс фейсбука. Есть хоть кто-нибудь, кто им доволен?
• Узнаваемость привычных элементов дизайна. Например, кнопка закрытия приложения в 99% случаев находится в правом верхнем углу экрана. Переносить ее в нижний левый угол — плохая идея.
• Реакция интерфейса на действия пользователя. Речь идет и про отклик на нажатие кнопки (если интерфейс на экране — то это будет визуальная имитация нажатия, если это сенсорная кнопка на стиральной машине — то звуковое сопровождение), и про сообщение в ответ на действие («Ваша заявка оформлена»). Пользователь должен получать обратную связь.
• Предотвращение ошибок. При проектировании интерфейса лучше всего принимать за отправную точку ситуацию, в которой взаимодействовать с продуктом будет совершенно неопытный человек. Если у какого-то действия, сообщения, статуса будет несколько трактовок — это усложнит жизнь. Нужно стремиться к тому, чтобы у пользователя не возникало запинок на пути следования к своей цели. Самый простой пример — открытие двери. Можно написать на ней табличку «от себя» и «на себя». Или же сделать двери самооткрывающимися, что решит проблему намного глобальнее.
• Обозначение начала и конца процесса. Когда бабушка хочет снять свою пенсию с банкомата, она меньше всего хочет вчитываться в бесконечные предложения оформить кредит, распечатать чек, не распечатывать чек, пожертвовать на благотворительность и оценить работу отделения. Она хочет увидеть цепочку «Ввести сумму — подтвердить снятие — получить назад карточку». Все остальное — от лукавого.
• Легкая отмена действия. Даже если наш пользователь ошибся — не нужно его за это корить. Например, уже уходят в прошлое турникеты в метро, которые били тебя железяками по самому ценному, если вдруг твой жетончик не считался.
• Не стоит перегружать кратковременную память пользователя. Нужно, чтобы пользователь знал, что вся информация доступна, не надо ничего запоминать или записывать. Хороший пример — кнопка «отправить квитанцию на электронку».

Лучший интерфейс — минималистичный интерфейс

Как ни странно, несмотря на то, сколько труда стоит за работой UI/UX-дизайнера, можно сказать, что лучший интерфейс — это самый минималистичный интерфейс. Главная ошибка начинающих — вместить всего и побольше. Больше кнопочек, больше всплывающих окон, нам же надо дать пользователю обратную связь. Но речь скорее о лишней суете, которая мешает пользователям дойти до конечного результата как можно быстрее. Пример такой суеты — обязательная форма регистрации при покупке в интернет-магазине. Зачастую достаточно объединить два шага — покупки и предоставления своих контактных данных. Но до сих пор очень распространены магазины, в которых ты сначала должен пройти обязательную регистрацию, получить смс на телефон, ввести его в специальное поле, получить на почту подтверждение, и только после этого наконец получить возможность купить вожделенную упаковку ушных палочек.

Хороший пример интерфейса и заботы — приложение «Новой почты», в котором у пользователя есть виртуальная карта клиента со штрих-кодом, по считыванию которого пользователю не требуется предъявлять документы для получения почты.

Интерфейс — творчество или решение задач?

И все же. Разработка интерфейса — это творчество или решение задач?

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

Так как наша компания разрабатывает игры, то в работе творчества хватает. Игровые интерфейсы позволяют продуктивно совмещать решение задач с красотой картинки. Кажется, что сложно сделать интересным интерфейс какого-нибудь интернет-банкинга, а вот интерфейс для игры — простор для фантазии. Но часто бывает так, что творчество увлекает художника с головой, и за красотой теряется функциональность интерфейса. Мы же помним, что мы в первую очередь решаем задачи?

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

Какими навыками должен обладать UI/UX-дизайнер

Для того чтобы продуктивно решать задачи, дизайнер проходит этапы роста, или уровни осознанности. По мере роста специалист задает все более сложные вопросы. Я намеренно не использую стандартную терминологию Junior, Senior и т. д., чтобы не привязываться к грейдам. Но каждый может для себя провести аналогию с привычными названиями должностей.

Первый уровень — подмастерье. По сути, на этом уровне у дизайнера больше чистого творчества, которое не преследует далекоидущие цели. Вопросы, которые он задает, в большей степени касаются технических аспектов. Как настроить градиент? Что значит «добавить больше воздуха»? Как работать с сеткой?

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

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

Четвертый уровень — мастер. Его волнуют уже более глобальные вопросы. Ему важно, как продукт будет работать в целом, какую бизнес-задачу будет выполнять конкретно это окно. Ставит под сомнения дизайн-документы, вмешивается в процессы, может убедить команду, что стоит вернуться на несколько шагов назад и попробовать по-другому.

Пятый уровень — магистр. Его уже волнует не столько процесс, сколько дальнейшая перспектива продукта. Какую пользу сможет принести этот продукт в будущем? Каков стратегический план развития?

На всех уровнях развития дизайнер должен задавать вопросы. Хорошо, если он проактивен и его осознанность растет вместе с его опытом. Если джуниор сидит второй год на типовых задачах, не задает вопросы типа «зачем это нужно» — это плохо. Значит, его уровень осознанности не растет, и большой вопрос — сможет ли он быть полезен в сложном проекте.

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

• Что делает эта кнопка, которую ты сейчас рисуешь?
• Зачем нужно это окно?
• Какие проблемы решает этот поп-ап?
• Сложно ли будет внедрить в проект этот функционал?

По мере роста осознанности дизайнер сам себе задает вопросы в процессе работы. И тогда уже рост не остановить.

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

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

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

Что нужно знать и уметь, если хочешь стать дизайнером интерфейсов

• Типографика и верстка. Базовые инструменты для начала — Sketch и Figma. Очень часто в UI/UX идут из графического дизайна и обнаруживают, что правила одни и те же. Нужно хорошо разбираться в шрифтах и правилах их использования, знать основы композиции для гармоничного расположения и компоновки элементов.
• CG. Да, без графики никуда. Векторные пакеты, Photoshop — в обязательном порядке. Если мы говорим про игровые интерфейсы, крайне полезным будет хотя бы Blender — для упрощения себе жизни.
• Анимация. Отлично, если дизайнер владеет After Effect или Spine. Если он знает основы Unity-анимации — цены ему не будет.

А самый главный навык — критическое мышление. Дизайнер интерфейсов всегда придирчив. Когда он заходит в лифт, то всегда заметит, если кнопка закрытия дверей расположена неудобно. Если у него не получится быстро оплатить свой заказ в интернет-магазине, он никогда в него больше не пойдет. Дизайнер интерфейсов всегда сам находит себе задачи. Необязательно кинется их воплощать, но, если видит, что меню на сайте неудобно, у него уже будет готовое решение, как бы его переделать.

Весь мир вокруг нас — это один огромный интерфейс. И UI/UX-дизайнеры стремятся только к одному — сделать его максимально комфортным.

Фото: Виктория Тертычная