Разработка пользовательского интерфейса

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

Мы создаём пользовательский интерфейс: User Interface (UI), который позволяет человеку взаимодействовать с устройством, решать свои задачи, достигать быстрее определенных целей.

Содержание

Что такое UI

Говоря о пользовательском интерфейсе, я подразумеваю способ общения между пользователем (человеком) и программой.

Пользовательский интерфейс (User Interface) часто понимают только как внешний вид программы. Однако через взаимодействие с интерфейсом у человека складывается впечатление о продукте в целом. Разработка пользовательского интерфейса объединяет в себе множество элементов и компонентов, которые способны влиять на реализацию программного продукта. А ещё интерфейс влияет на то, будет ли продукт приносить деньги и любовь аудитории.

Зачем нужен UI

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

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

Этапы разработки пользовательского интерфейса

Анализ

Любой проект начинается с проработки его концепции — без понимания назначения разрабатываемого продукта не прокатит. Сбор информации о разрабатываемом продукте начинается с ответов на вопросы «для чего?», «кому?», «как?».

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

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

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

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

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

Примерно тут хорошо уже понимать, какие задачи решает интерфейс в разрезе работ. Это очень удобный фреймворк для формулирования задач. Как если бы продукт делал работу — Jobs To Be Done. Он делает ставку не на личные качества ключевой персоны, а исследует ее мотивации, потребности, проблемы. Микроволновка — греет пищу, поезд — доставляет из станции А на станцию Б, а все остальные действия интерфейса лучше упразднить.

В конечном итоге формулируется цель, которую хочет достичь пользователь в данных обстоятельствах, используя интерфейс. Этапы выполнения «работ» взаимодействия пользователя с интерфейсом складываются в Job Story. Job Stories учитывают контекст.

Представление интерфейса через призму UX/UI-дизайна

Объединив полученные сведения, мы имеем на руках пользовательский сценарий (User scenario), который поможет нам уже проложить маршрут пользователя к достижению цели, то есть сформировать скелет интерфейса.

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

С помощью блоков и стрелок он наглядно демонстрирует каждый шаг будущего пользователя, показывает дополнительные маршруты. Как должен выглядеть варфрейм (или макет)? Можно рисовать на бумаге карандашом. Важно, чтобы в варфрейме была отражена структура путей по продукту.

Презентация прототипа разрабатываемого интерфейса покажет, как будущий пользователь взаимодействует с элементами интерфейса. Для этого команда проектировщиков составляет карту экранов, связанных между собой линиями, стрелками. Такая карта, или user flow, подробно описывает ожидаемые действия пользователя и различные реакции на них элементов интерфейса.

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

UI (User Interface) — проектирование является визуальным воплощением UX-дизайна. Нередко эти задачи реализует один и тот же человек, поэтому грань между UX и UI едва просматривается. И всё же разница в том, что UI-дизайнер отвечает за графические элементы управления, решает, как именно будет выглядеть каждый экран (мобильного приложения), страница (интернет-сайта), сможет ли любой человек интуитивно разобраться в вашем интерфейсе, не читая инструкций. Тут может возникнуть путаница, так как разработка всего интерфейса и разработка его визуальной части называются UI в разных источниках, и лишь иногда визуальная составляющая называется корректно — Visual design.

Вот простой бытовой пример. Обыкновенный утюг с отпаривателем. В какой момент утюг автоматически выпустит пар из дырочек в подошве, где будет располагаться кнопка разбрызгивателя, – это сфера ответственности UX-дизайнера. А вот какой формы, какого цвета и размера будет эта кнопка, решит Visual или UI-дизайнер.

Прототипирование

Иногда прототипом называют вайрфреймы — то, что делает UX проектировщик. Иногда — интерактивные прототипы, которые выглядят и работают почти как законченный продукт. Этот пункт про последние. И этот этап — вновь UX.

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

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

Снова анализ

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