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

Меня зовут Виктория Тертычная, я 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-дизайнеры стремятся только к одному — сделать его максимально комфортным.

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

👍НравитсяПонравилось7
В избранноеВ избранном6
LinkedIn
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Пятый уровень — магистр

Шестой уровень — милорд

Дизайн — больная тема бывшего СССР.
Там, где старательно уничтожалось все красивое — тяжело создать красивый интерфейс.
Бытие определяет сознание итд

Предположение хорошее, но не имеет оснований. Иначе бы украинцы массово покупали Ладу, да и то потому что УАЗ не удовлетворял спрос.

Потреблять и создавать — разные вещи.

Дизайн приложений и сайтов на ближнем востоке видели? А ведь никакого совка здесь не было.

Видел — там весьма контрастно.

Плюсую. Самый обычный абсолютно нормальный день в полиграфии: приходит грядка клонированных рагулей (владельцы СТОшек, шаурмячных, кофе-улиток, писько-восково-лазерных учреждений) и тычут визитку/флаер/спиз*енный штендер своего «братишки»-конкурента с просьбой сделать «так, чтобы было круче чем вот это». А дизайнерам потом приходится выкручивать красно-фиолетовый фон с зеленым шрифтом и приделывают ангельские крылышки в уголках. И рагули еще жлобятся на нормальную бумагу, в итоге их поделки печатаются на какой-то обуховке и выглядят они соотвественно.

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

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

Верните нам скучные кнопки, скучное меню, скучный контроль над тем что происходит и скучные сообщения об ошибках с их скучным текстом о том что на самом деле случилось.

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

Так все и есть.
Проблема, приходит очередной аналитик и говорит, что все это нам не нужно и по а/б тесту наши показатели лучше когда пользователи страдают.
В итоге, имеем что имеем и скучаем за старыми временами.
А компании поменьше просто копируют.
Мало кто думает головой сейчас.

Подписаться на комментарии