Заходя на сайты и в приложения, человек взаимодействует с пользовательским интерфейсом. Он помогает ему лучше ориентироваться в возможностях программного продукта и быстрее находить нужные функции.
Что такое пользовательский интерфейс
Посетители заходят на сайт с конкретной целью, например, выбрать одежду, заказать еду или найти фильм. Здесь в игру вступает пользовательский интерфейс, задача которого – упростить взаимодействие с сайтом, сделать его более дружелюбным по отношению к пользователю. С помощью пользовательского интерфейса бизнес может увеличивать число клиентов, расширять свою целевую аудиторию, мотивировать на совершение целевых действий.
Чем привлекательнее будет пользовательский интерфейс, тем больше шансов, что посетитель не уйдет к конкурентам и сделает то, зачем приходил. Фактически, создание интерфейса означает проектирование пользовательского опыта, который охватывает все его ключевые этапы. Решением этой задачи занимаются два разных специалиста:
- UX-дизайнер – отвечает за пользовательский опыт. Он занимается разработкой структуры сайта, которая должна быть выстроена таким образом, чтобы пользователь без труда смог прийти к своей цели, например, найти нужные разделы или кнопки, заполнить формы и т.д. В зависимости от задач, стоящих перед конкретным продуктом, может изменяться представление интерфейсов.
- UI-дизайнер отвечает за визуальное представление интерфейсов. Он разрабатывает графические элементы, подбирает цветовую гамму и шрифты, продумывает композицию и внешний вид продукта.
В некоторых компаниях и digital-студиях за эти два направления отвечает один универсальный специалист. Его часто называют UX/ UI-дизайнер. С каждым годом такая практика становится более распространенной.
От того, как представлен пользовательский интерфейс, зависит его тип. Наиболее распространены: текстовый, тактильный, жестовый, голосовой, нейронный и графический. Текстовый подразумевает взаимодействие с системой посредством программного кода или текста. Яркий пример – интерфейс командной строки. С его помощью можно устранять технические проблемы, обращаясь напрямую к системе. Такой способ помогает в тех случаях, когда на другие действия устройство не реагирует.
Тактильные интерфейсы применяются в системах навигации, которые можно встретить в торговых центрах, крупных музеях и других местах с большим скоплением людей. В роли устройств выступают панели с сенсорными дисплеями. С их помощью посетители могут найти нужную информацию.
Голосовые интерфейсы позволяют управлять устройствами при помощи голоса. Они лежат в основе всех голосовых помощников, к которым относятся умные колонки, голосовые системы управления, системы умного дома и т.д. Жестовые интерфейсы распознают движения тела и головы. Подобное управление применяется в VR-играх, где игроки используют специальные джойстики, для сканирования движения. Графические интерфейсы представляют собой окна, в которых расположены различные элементы. Ими можно управлять с помощью мыши и пальцев рук. Получается, что графический интерфейс может быть и жестовым, и тактильным. Самый известный пример графического интерфейса – планшеты и смартфоны. При помощи пальцев на них можно просматривать страницы, нажимать на кнопки, переходить по ссылкам, заходить в приложения и прочее. На практике именно с этим типом интерфейсов приходится работать дизайнерам.
Графический пользовательский интерфейс
Графический интерфейс – это внешний вид сайта или приложения, та его часть, которую видит пользователь. При оформлении используются все доступные графические средства, включая стили, шрифты, формы и т.д. Качественный графический интерфейс одинаково хорошо отображается как на десктопах, так и на мобильных устройствах. В последнем случае, важно соблюдать определенные правила.
Прежде всего, речь идет о размерах элементов. Они должны быть крупными, чтобы хорошо читаться на экранах с небольшим разрешением. Это касается как информационных блоков, так и всех кнопок, иконок и ссылок. Важно чтобы их расположение было анатомически удобным. Не стоит забывать, что управление происходит при помощи одной руки. Пользователь должен попадать по кнопкам, иначе он будет испытывать раздражение.
Интерфейсы десктопных версий сайтов и приложений могут сильно отличаться от мобильных. При создании не нужно думать о размерах экрана, поэтому размер элементов и их композиция может быть абсолютно любой. Управление в этом случае происходит при помощи мыши. Все это дает возможность использовать видео, сложные анимации и объемные текстовые блоки.
Довольно часто интерфейс обладает гибкими настройками, которые пользователь может менять по своему усмотрению. Например, многие приложения имеют светлую и темную темы, изменяющиеся размеры шрифтов, стили блоков и кнопок. Однако базовые элементы, составляющие структуру сайта или приложения, остаются неизменными.
Элементы пользовательского интерфейса
Одним из базовых и самых распространенных элементов является кнопка. Она применяется на всех сайтах и дает возможность пользователю совершить определенное действие. Это может быть переход в новый раздел, добавление товара в «Избранное», отправка данных формы и т.д. Как правило, кнопка представляет собой прямоугольник крупной формы с контрастным фоном. Она должна быть заметна и отчетливо выделяться на странице.
К другим элементам относят:
- список – это перечень строк, в которых содержатся различные пункты или разделы. В некоторых случаях, содержимое списка можно добавлять или удалять. К примеру, это может быть список товаров в корзине. В виде списка часто оформляют тематические подразделы сайта. В этом случае его разделяют на несколько колонок, чтобы содержимое не выходило за пределы экрана;
- меню – список ссылок, позволяющий перемещаться по разделам сайта. Каждый элемент меню может содержать свой собственный список. В таком случае говорят про вложенное меню. Наравне со строкой поиска, это ключевой элемент навигации. С его помощью пользователь сможет быстрее найти нужный раздел или контент. В верхней части сайтов зачастую располагается главное меню всего ресурса.
- поле ввода – окно для ввода текстовой информации и кнопкой для подтверждения действия. С его помощью можно реализовать поиск и блок с комментариями. Обычно кнопка находится с правой стороны от строки ввода. После нажатия на нее публикуется отзыв или показываются найденные результаты;
- чек-бокс – небольшое поле квадратной формы. Служит для подтверждения или отказа от чего-либо. С его помощью создаются списки фильтров. Напротив нужных пользователь ставит галочки и поиск отображает лишь те позиции, которые соответствуют нужным параметрам;
- полоса прокрутки – небольшой ползунок, размещенный справа и снизу страницы. Он позволяет скроллить ее в разные стороны. Для управления может использоваться как мышь, так палец руки, если речь идет про мобильные устройства. Данный элемент рекомендуется использовать для длинных списков, которые могут занимать весь экран. Особенно это актуально для ноутбуков, планшетов и смартфонов.
Перед дизайнером стоит задача гармонично объединить все элементы, чтобы получилась законченная единая система, имеющая общий стиль и композицию. Только так пользователь сможет разобраться в структуре ресурса и поймет какими именно элементами воспользоваться для достижения нужного результата.
Этапы создания пользовательского интерфейса
Процесс разработки пользовательского интерфейса состоит из нескольких этапов:
- сбор данных – на встрече с заказчиком дизайнер узнает информацию о компании, ее продукте, целевой аудитории и задачах, которые должен решить сайт или приложение. На основе этого составляется подробное техническое здание. Если компания имеет свой брендбук или контент-стратегию, это учитывается при работе над проектом;
- анализ – прежде чем приступать к работе, дизайнер изучает рынок, потребности потенциальных пользователей, продукты конкурентов. Также на этом этапе собираются референсы – примеры качественных интерфейсов, созданных для аналогичных продуктов со схожей целевой аудиторией. С их помощью специалист понимает вектор, в котором предстоит работать;
- создание чернового прототипа – это своего рода компиляция всей собранной ранее информации. Так дизайнер проверяет, как приблизительно будет выглядеть итоговый интерфейс. Прототип согласовывается с заказчиком, который может внести правки. Здесь нет проработанных деталей, все выполняется схематично. Самое главное – показать главную идею и стилистику, которая будет взята за основу;
- итоговый макет – представляет собой конечный вариант дизайна пользовательского интерфейса. В нем уже проработано все, включая даже самые незначительные детали. Его также отправляют на согласование заказчику;
- разработка и тестирование – на этих этапах к работе подключаются разработчики и тестировщики. Работа дизайнера на этом фактически закончена, но он продолжает сопровождать проект вплоть до его релиза, поскольку у программистов могут возникнуть вопросы касаемо работы элементов.
Дизайнер может работать как в качестве подрядчика, выполняя один конкретный заказ, так и в роли штатного сотрудника дизайн-студии. От этого зависят задачи, которые он будет выполнять. Этапы разработки также могут быть немного скорректированы.
Если речь идет про масштабный проект, над ним могут трудиться сразу несколько дизайнеров. Один отвечает за главную страницу, другой – за поиск и каталог товаров и т.д. Такой подход экономит время и сокращает продолжительность разработки. Иногда, после релиза проекта, выясняется, что у пользователей возникают проблемы с интерфейсом. В таком случае процесс разработки запускается по новой.
Инструменты для создания дизайна интерфейсов
Для создания качественного дизайна необходимо владеть графическими редакторами и сервисами для презентации результатов и идей коллегам и клиентам. Ниже представлен базовый перечень инструментов, которыми пользуются UX/ UI-дизайнеры.
Figma
На сегодняшний день это один из самых популярных графических редакторов. Он обладает массой полезных функций, включая интерактивную доску для обсуждения идей с коллегами. Figma позволяет разрабатывать макеты приложений и веб-сайтов, тестировать работу элементов, а также работать совместно с командой.
Данный сервис позволяет создавать визуальный стиль для любых каналов коммуникации и хранить контент, которым можно обмениваться с коллегами. Интерактивные доски дают возможность гибко взаимодействовать с эскизами, используя различные референсы.
Sketch
Еще один графический редактор, позволяющий создавать макеты. Однако он не поддерживает многопользовательскую работу. Этот инструмент удобен специалистам, разрабатывающим дизайны самостоятельно. В этом случае команда и заказчик видят уже готовый результат. В Sketch есть широкий выбор инструментов для работы с простой графикой и коллажами.
Adobe XD
Программа создана специально для разработки интерфейсов. В ней есть большое количество готовых шаблонов для различных тематических сайтов и приложений. Преимуществом является возможность интеграции с другими продуктами от компании Adobe, что позволяет работать с иллюстрациями, фотографиями, графикой и анимацией в рамках одного проекта. Веб-разработчики могут верстать макеты прямо внутри программы. Это позволяет быстро создать готовый прототип.
В отличии от предыдущего графического редактора, в Adobe XD можно создавать сложную графику, совмещать ее с анимацией, и при желании дорабатывать отдельные элементы в других сервисах Adobe.
Miro и FigJam
Данные сервисы представляют собой онлайн-доски, для создания блок-схем. Они помогают визуализировать структуру всего проекта, управлять работой по его реализации, проводить онлайн-встречи с командой, а также хранить макеты и делиться ими с другими пользователями.
Функционал Miro позволяет создавать масштабные интерактивные доски, взаимодействовать с которыми могут все участники, работающие над проектом. Благодаря этому можно оперативно вносить правки, обмениваться идеями, добавлять новый контент и т.д.
На сегодняшний день, российские пользователи не могут приобрести подписку на сервис. Но можно воспользоваться бесплатной версией, которая позволяет создать максимум три онлайн-доски. Достойной альтернативой является сервис FigJam. Чтобы пользоваться им могла вся команда, достаточно оформить подписку на персональный аккаунт, однако право на внесение изменений также будет лишь у одного участника.
Как создать качественный пользовательский интерфейс
Прежде всего дизайнер должен руководствоваться принципом единообразия. Пользовательский интерфейс – это своего рода единый организм, который состоит из множества отдельных элементов (кнопок, форм, иконок). Из них в свою очередь создаются блоки, из который впоследствии формируются шаблоны и макеты. По сути это единая структура, которая распространяется на страницы сайта или приложения.
Если все страницы ресурса имеют единый шаблон, у пользователя гораздо меньше шансов потеряться и запутаться. В верхней части всегда расположено меню с главными разделами, немного ниже есть подразделы. Поэтому можно без труда понять, куда необходимо перейти для совершения желаемого действия.
Кроме этого дизайнер должен четко понимать потребности потенциальных пользователей и отталкиваться от них при разработке интерфейса. К примеру, если посетители заходят на сайт для того, чтобы найти нужного специалиста, ключевым элементов всего интерфейса должна стать форма поиска со всеми необходимыми фильтрами.
Интерфейс должен быть дружелюбным по отношению к пользователям, чтобы, заходя на сайт, посетитель без труда мог найти нужный раздел, форму или кнопку. Если для совершения целевого действия, ему приходится долго изучать страницу, переходить из раздела в раздел, то такой интерфейс явно нуждается в переработке. Хороший дизайн должен быть простым, лаконичным и понятным. Яркий пример – дизайн интерфейса продуктов от компании Apple. Ее первые смартфоны продавались без руководства пользователя, но несмотря на это, потребители быстро разобрались и без него.
