Когда нужно найти магазин в большом ТЦ, на помощь приходят указатели и интерактивные стенды. Так же работает интерфейс пользователя сайта: помогает найти нужное как можно быстрее.
Что такое пользовательский интерфейс
Когда посетитель заходит на сайт, у него есть конкретная цель: например, купить 10 упаковок гречки по акции или выбрать фильм на вечер. В этом помогает интерфейс пользователя: взаимодействовать с сайтом или приложением, находить и нажимать разделы меню, кнопки, заполнять онлайн-формы, читать подсказки.
Управление пользовательским интерфейсом помогает бизнесу привлекать новых клиентов и побуждать их совершать покупки, оставлять заявки или оформлять подписку. От того, насколько привлекательным и удобным будет интерфейс, зависит, останется ли посетитель на сайте и сделает ли то, зачем пришёл.
Создание пользовательского интерфейса — это проектирование пользовательского опыта: начиная от знакомства с продуктом до целевого действия. Он объединяет две задачи, которые выполняют один или два разных специалиста:
● UI-дизайнер (от англ. User Interface, «пользовательский интерфейс») отвечает за визуальное оформление: подбирает цвета и шрифты, определяет стиль и композицию.
● UX-дизайнер (от англ. User Experience, «пользовательский опыт») выстраивает структуру сайта или приложения так, чтобы пользователю было удобнее двигаться к цели: находить нужные кнопки и разделы, заполнять формы, прокручивать страницы.
Интерфейсы могут быть представлены по-разному — в зависимости от задачи и устройства, на котором их используют.
Материал по теме:
Кто такой дизайнер интерфейсов и как им стать, чтобы менять мир
Типы пользовательского интерфейса
В зависимости от того, как представлен интерфейс и как человек с ним взаимодействует, выделяют такие типы:
● Текстовые
Для управления и взаимодействия с системой используют текст или программный код, а система отвечает таким же текстом или кодом.
Разновидность текстового интерфейса — интерфейс командной строки. Его используют, к примеру, в ОС Windows, чтобы устранить технические неполадки или пробиться к системе, если она не реагирует на другие действия, например, из-за вируса или повреждения диска
● Тактильные
Для управления используют пальцы рук, двигая ими по экрану.
Тактильные интерфейсы используют в системах навигации в больших ТЦ, аэропортах или музеях. Посетители ищут нужную информацию с помощью сенсорной панели
● Голосовые
Пользователь взаимодействует с системой или устройством с помощью голоса. Сюда относят все виды голосовых помощников, умные колонки, элементы умного дома, голосовые системы управления автомобилем.
● Жестовые
Управляются с помощью жестов рук, а иногда ещё и движений тела и головы.
Жестовое управление используется, к примеру, в онлайн-играх — VR- или обычных. Игроки двигают джойстиками или специальными перчатками, чтобы управлять своими движениями
● Нейронные
Самые продвинутые интерфейсы, где управлять системой можно с помощью нейронов мозга или, проще говоря, силой мысли. Пока что их совсем немного: например, специальные протезы для людей с травмами позвоночника и ДЦП или концепт нейрочипов от Neuralink Илона Маска.
● Графические
В виде окна с различными элементами меню, которыми можно управлять с помощью мыши, стилуса или пальцев рук. То есть графический интерфейс может быть одновременно и тактильным, и жестовым, и нейронным.
С этим типом интерфейсов дизайнеру приходится иметь дело чаще всего, поэтому разберём его подробнее.
Графический интерфейс пользователя
Графический интерфейс — тот, в оформлении которого задействуют все графические средства: цвета, стили и формы. Им обладает большинство сайтов и приложений и пользуются на смартфоне, планшете или компьютере. В зависимости от того, где и для чего используется графический интерфейс, различают:
Мобильные интерфейсы
Это интерфейсы мобильных приложений, с которыми пользователи взаимодействуют с экрана смартфона или планшета. Отсюда и особенности:
● Крупные элементы интерфейса — блоки меню, кнопки или иконки — которые заполняют экран полностью: так, чтобы их было хорошо видно даже при маленьком разрешении.
● Расположение элементов обосновано анатомически: так, чтобы ими было удобно управлять с помощью одной руки, а пальцы не промахивались мимо кнопки.
Веб-интерфейсы
Это интерфейсы сайтов и онлайн-сервисов, которые работают в десктопных браузерах. От мобильных их отличает то, что масштаб и композиция элементов здесь могут быть любыми, а управляют ими с помощью мыши или тачпада. В таких графических интерфейсах чаще встречаются большие текстовые блоки, видео и анимация.
Игровые интерфейсы
Созданы так, чтобы игрок сразу понимал, куда нужно двигаться и какие возможности у него есть. Главное место здесь отводится персонажам игры и вспомогательным средствам: машины, роботы или оружие. Текстовые блоки минимальные и используются только в качестве подсказок. Элементы меню часто стилизованы под сюжет игры: например, в виде магических шаров или системы навигации космического корабля.
Интерфейс видеоигры Syberia стилизован под ретро, как и все остальные графические элементы
В каждом случае настройки интерфейса пользователя могут быть индивидуальными: например, тёмная или светлая тема, определённая цветовая гамма, размер шрифта, стили кнопок. Но базовые компоненты остаются неизменными.
На курсе «Дизайнер интерфейсов» практикующие дизайнеры и арт-директоры научат создавать интерфейсы, опираясь на проблемы и запросы пользователей. Студенты отрабатывают на практике все этапы UX- и UI-дизайна для сайтов и мобильных приложений, учатся тестировать свои гипотезы на реальных кейсах.
Элементы пользовательского интерфейса
● Кнопка — базовый элемент, который нужен, чтобы пользователь мог выполнить какое-то действие. Например, перейти в раздел, положить товар в корзину, отправить форму или вернуться назад.
Обычно кнопка выглядит как прямоугольник с закруглёнными углами. Она должна быть хорошо заметна и удобна для пользователя, поэтому кнопки делают крупными и контрастными относительно фона и текста на странице
● Список — строки с перечислением пунктов, разделов или содержимого. Иногда пункты списка можно удалять и добавлять: например, если это список товаров или услуг для заказа.
Список разделов и подразделов каталога на сайте интернет-магазина. Разделы выделены жирным шрифтом, чтобы их было проще отличить от подразделов. Сам список разбит на колонки, чтобы уместить его в одном-двух экранах
● Меню — список кликабельных разделов сайта или приложения, внутри каждого из которых может быть своё меню. Вместе с поиском это — главный инструмент для навигации пользователя: чтобы ему было проще находить нужное.
Главное меню сайта размещают, как правило, в самом верху, рядом с логотипом и строкой поиска. Так пользователь всегда видит, какие разделы есть на сайте и как переходить из одного в другой
● Поле для ввода — строка или окно, где можно ввести текст и подтвердить действие, нажав на кнопку, например, чтобы найти нужный товар или оставить комментарий к заказу.
Обычно в поле для поиска пользователь набирает нужные слова и нажимает на кнопку справа, чтобы увидеть результаты
● Чек-бокс — квадратное поле, где пользователь ставит крестик или галочку, чтобы подтвердить что-то или, наоборот, отказаться.
В списке фильтров можно проставить галочки во флажках, чтобы из всего списка товаров отобразить только те, что обладают нужными характеристиками
● Полоса прокрутки или скролл — элемент в виде ползунка, который можно перемещать мышкой или пальцем, чтобы прокрутить страницу вниз, вверх, налево или направо.
Полоса прокрутки удобна для длинных списков и меню, чтобы не занимать ими весь экран ноутбука или смартфона
Задача дизайнера — объединить компоненты графического пользовательского интерфейса в единую систему так, чтобы они были связаны стилем, композицией и задачей. Тогда пользователю сразу будет ясно, куда двигаться и в какой последовательности переходить от одного элемента к другому.
Как стать дизайнером интерфейсов
С чего начать свой путь в профессии и как развивать насмотренность: пошаговый алгоритм в бесплатном гайде от Практикума.
Этапы создания пользовательского интерфейса
Разработка пользовательского интерфейса — это работа целой команды, где важен каждый этап:
1. Сбор вводных.
Дизайнер или проект-менеджер встречается с клиентом или владельцем продукта и обсуждает ТЗ, сроки, целевую аудиторию, особенности продукта, цели и KPI. Если у компании или бренда есть своя контент-стратегия и брендбук, то их тоже используют в работе.
2. Исследование.
Дизайнер или аналитик изучает рынок, конкурентов и предпочтения целевой аудитории, собирает референсы — то есть примеры удачных интерфейсов продуктов из той же сферы или для той же ЦА. Это поможет понять, от чего отталкиваться и в каком направлении двигаться.
3. Черновой макет.
В нём дизайнер использует всё то, что нашёл в ходе исследования, и проверяет, как это работает на практике. После этого отправляет заказчику и дорабатывает интерфейс по его комментариям.
Черновой макет может быть минималистичным, почти абстрактным. Главное — донести идею и стилевое решение
4. Готовый макет или прототип.
Это финальная версия дизайна интерфейса, которую утвердил клиент.
В готовом макете или прототипе важно проработать все детали: шрифты, оформление кнопок и иконок для всех страниц
5. Разработка, тестирование и запуск.
На этих этапах дизайнер уже не участвует в проекте: продуктом занимаются веб-разработчики, тестировщики и авторы контента. Дизайнер подключается, если нужно подробно объяснить, как должен работать тот или иной элемент.
Работа дизайнера интерфейсов в качестве подрядчика в рамках одного продукта (вверху) и в штате дизайн-студии (внизу) строится немного по-разному: в первую очередь из-за разного состава команды. Поэтому и этапы, и задачи тоже могут немного различаться
Когда проект большой, за дизайн могут отвечать сразу несколько специалистов: например, кто-то работает над мессенджером, кто-то — над главной страницей, а кто-то — над каталогом товаров и корзиной.
Если после запуска выяснится, что дизайн интерфейса пользователям неудобен и его нужно переделать, тогда вся цепочка запускается снова.
На курсе «Дизайнер интерфейсов» эксперты из индустрии учат основам дизайна интерфейсов с нуля. Теория опирается на практику, а студенты работают по реальным ТЗ, изучают основные инструменты, неочевидные лайфхаки и новейшие технологии пользовательского интерфейса, которые пригодятся в работе, помогут собрать портфолио и найти первых заказчиков.
Инструменты для дизайна интерфейсов
Чтобы создавать UI- и UX-дизайн, нужно уметь пользоваться графическими редакторами и другими сервисами для презентации идей коллегам и заказчику. Вот базовый набор инструментов, который пригодится дизайнеру интерфейсов:
● Figma
Самый популярный инструмент — графический редактор, интерактивная доска для мозгового штурма и сообщество дизайнеров. Позволяет создавать дизайн-макеты и прототипы сайтов и приложений, где можно протестировать, как работают кнопки и другие элементы, а также работать вместе со всей командой проекта. С помощью Figma удобно разрабатывать визуальный стиль для всех каналов коммуникации бренда, хранить контент и обмениваться им, создавать интерактивные доски с референсами и эскизами. Сейчас инструментом можно пользоваться только с личных аккаунтов: обслуживание корпоративных подписок приостановлено.
● Sketch
Подходит для дизайн-макетов и создания мудбордов (досок настроения), но не позволяет работать с проектом нескольким людям одновременно. В нём удобно работать тем, кто делает дизайн интерфейса самостоятельно, показывая команде и заказчику только результат работы.
В Sketch удобнее всего работать с коллажами и несложной графикой
● Adobe XD
Графический редактор с готовыми шаблонами и наборами интерфейсов для ОС Apple и разных тематических сайтов. При этом он интегрируется с другими сервисами Adobe, позволяя работать с фото, иллюстрациями и анимацией в рамках одного проекта. Разработчики могут приступить к вёрстке готовых макетов здесь же, чтобы создать прототип сайта или приложения.
Главное преимущество Adobe XD — большой набор инструментов и интеграция с другими сервисами Adobe. Поэтому здесь удобно работать со сложной графикой, фото и анимацией
● Miro, FigJam и другие онлайн-доски: позволяют создавать отдельные блок-схемы, чтобы наглядно представить структуру будущего сайта или приложения. В них можно управлять проектом, проводить мозговой штурм с командой, обмениваться идеями, хранить промежуточные версии макетов, передавать их разработчикам и UX-копирайтерам.
В Miro можно создавать интерактивные доски для всей команды проекта, чтобы выкладывать дизайн-макеты, обмениваться идеями и правками, добавлять текстовый контент
Сейчас Miro работает для российских аккаунтов только в рамках тех подписок, которые были оформлены до марта 2022 года. Доступна бесплатная версия, в которой можно создавать до трёх онлайн-досок. Сервисом FigJam можно пользоваться в рамках команды, если подписка оформлена на персональный аккаунт. Право на редактирование есть только у одного участника.
Требования к разработке интерфейса
● Стремиться к единообразию.
Система пользовательского интерфейса — это единый организм, который состоит из атомов — отдельных элементов: кнопок или иконок. Из них можно строить «органы» — блоки меню: например, поле для ввода и кнопка «Отправить». Наконец, из блоков создают «системы органов» или шаблоны: это единая структура для всех страниц в приложении или на сайте.
Единый шаблон для главной и внутренних страниц на Хабре помогает пользователю не потеряться: вверху всегда видны основные разделы, а чуть ниже внутренние подразделы. Поэтому легко понять, где находишься, как перейти в соседний раздел и как вернуться обратно
● Отталкиваться от проблемы пользователя.
Например, люди приходят на сайт, чтобы выбрать бригаду для ремонта квартиры. Тогда центральное место в интерфейсе пользователя должна занимать форма поиска с главными фильтрами: по цене, видам работ и рейтингу. В результатах поиска пользователь видит список бригад с ценами, фото работ и отзывами от заказчиков, а также кнопку для отправки запроса.
На главной странице сервиса для поиска подрядчиков и услуг строка поиска находится в центре, а в качестве подсказок — кнопки с названиями специалистов, которых ищут чаще всего
● Не усложнять и не перегружать.
Проектирование пользовательского интерфейса должно быть таким, чтобы в нём разобрался даже ребёнок. Хороший интерфейс — тот, который понятен и удобен пользователю, чтобы он сразу нашёл нужную кнопку и не блуждал в поисках по всей странице. Это — главная задача в рамках UX-дизайна, основоположником которого был Дональд Норман, автор книги «Дизайн привычных вещей» и бывший вице-президент Apple.
iOS от Apple — пример хорошего дизайна интерфейса: ничего лишнего, все пункты меню хорошо читаются, а иконки яркие, лаконичные и понятные. Первые iPhone продавали без инструкции: идея создателей была в том, что с таким простым интерфейсом можно разобраться и без неё
Совет эксперта
Анна Грязева
Самая большая ошибка, которую может совершить дизайнер продукта, — ориентироваться не на потребности пользователей, а на примеры, которые где-то подсмотрел. Даже если кажется, что такой дизайн будет смотреться хорошо, всегда нужно опираться на исследования рынка и аудитории. То, что хорошо для одного продукта, может погубить другой.
Дайджест блога: ежемесячная подборка лучших статей от редакции
Читать также:
