Что такое интерфейс: виды, классификация, элементы и этапы разработки интерфейсов

Интерфейс – набор инструментов, дружелюбная среда, через которую пользователь взаимодействует с сайтами, мобильными приложениями, программами, операционными системами. В сфере e-commerce качество и удобство интерфейса оказывают прямое влияние на поведенческие факторы: если расположение элементов непривычное, а навигация неудобная – посетитель без долгих раздумий покинет сайт. Рассказываем, что такое интерфейс, почему он так важен и как проектируется, а также представляем ТОП-5 классных примеров для вдохновения.

Интерфейс – что это простыми словами

Интерфейс – средство взаимодействия в цепочке пользователь-веб-продукт, в качестве последнего могут выступать сайты, мобильные приложения, различный софт и многое другое. Речь идет о виртуальной оболочке, объединяющей элементы, которые использует потенциальный клиент: она кликает на кнопки, заполняет формы, устанавливает фильтры для поиска товаров и просматривает меню. Если человек сразу понимает, куда нужно нажать для выполнения целевого действия – процесс от знакомства до сделки будет проходить существенно быстрее. Конечно, одного интерфейса недостаточно, интерес аудитории разжигается выгодами, контентом, рекомендациями. Однако схема взаимодействия – базис, она привычная и многие обращают на нее внимание только в том случае, если испытывают неудобство, нет адаптации под мобильные устройства или что-то идет не так.

Как выглядит макет интерфейса

Под термин «interface» (в переводе с английского – «место соприкосновения») попадают многие современные технологии. Автомобильные навигаторы, смарт-часы, приставки с голосовым управлением, очки виртуальной реальности, сенсорные панели на бытовых приборах, кассовое оборудование – все связывающее контакт человека и техники. Интерфейсы постоянно совершенствуются, что влечет за собой разработку более инновационных решений, охватывающих интересы и особенности каждого. Голосовое управление существенно облегчает взаимодействие для слабослышащих и слабовидящих людей, существуют телефоны со шрифтом Брайля, джойстики для управления автомобилями.

Какие задачи решает интерфейс и почему он важен

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

• вводить команды с привлечением доступных способов: текст, клики мышкой, клавиатура, жесты, голос, загруженный контент (поиск по фото или же по музыке);
• отправлять запросы и получать практически моментальный результат в виде ссылок, текста, изображений, запуска фильма и прочих форматов;
• легко взаимодействовать с программно-аппаратными комплексами и устройствами без погружения в сложные технические детали;
• получать уведомления о возможных ошибках, допущенных в ходе использования или возникших проблем.

Вводим запрос – видим результат + исправление опечатки

Получение информации, оформление интернет-заказов, онлайн-игры, AR-примерка в приложениях, прослушивание музыки в браузере, «Окей, Google» или игры с Алисой – невозможны без интерфейсов, наделенных интуитивной простотой и абсолютной клиентоориентированностью. Они важны из-за ряда причин:

• являются визуальной обложкой продукта – от сайтов до бытовой техники с сенсорным/голосовым управлением;
• обеспечивают повышение лояльности: если неудобно – люди не будут использовать предложение, каким бы современным и выгодным оно ни было;
• стимулируют рост ключевых показателей эффективности (KPI) – это могут быть посещаемость, глубина просмотра, время на странице и средний чек в e-commerce, объем первых и повторных покупок для брендов, численность скачиваний и удалений приложений;
• способствуют формированию логической информационной инфраструктуры;
• применимы для создания интерактивного дизайна, в который вплетены элементы геймификации – это стимулирует вовлеченность;
• делают жизнь комфортной. Яркий пример – голосовые команды: свыше 50% россиян используют специальных помощников, чтобы выстраивать маршруты и диктовать сообщения, показатель ежегодно динамично возрастает. Отдельный вопрос – пользователи с ограниченными возможностями, которые теперь без проблем включают любимые фильмы, узнают погоду и управляют бытовой техникой с помощью голоса.

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

Какие виды интерфейсов существуют

Аппаратные

Аппаратный интерфейс (Hardware Interface) – элементы, обеспечивающие подключение устройства или необходимые для его использования. Зарядные устройства, мыши и клавиатуры, флешки, кабеля HDMI, связь всех частей микропроцессорной системы – от них зависит качество и скорость. Естественно, эти компоненты должны быть надежными и удобными, они постепенно эволюционируют, что необходимо для повышения мощности и сокращения размеров.

Пример аппаратного интерфейса

Изначально электронно-вычислительные машины были представлены в глобальных размерах: первый ЭВМ ENIAC (1946 год) с объемом памяти 20 число-слов состоял из 42 блоков и имел вес в диапазоне 174 тонн, для его размещения потребовались 170 квадратных метров, для функционирования – 174 киловатт. Сегодня мы можем использовать смартфоны, помещающиеся в ладонь, которые обрабатывают массивы информации и оснащены маленькими аккумуляторами, дающими не менее 10 часов автономной работы.

Программные

При упоминании программного интерфейса (Software Interface) стоит рассказать про API, который обеспечивает интеграцию систем (обмен информацией). Если простыми словами, API выполняет функцию виртуального посредника, он отвечает за передачу данных из одного интерфейса в другой. Обмен сведениями о рейсах между туристическими сайтами и авиакомпаниями, Яндекс Карты внутри мобильных приложений, сервисов такси или на ресурсах по оказанию услуг, веб-аналитика на сайте или платежные системы в интернет-магазине – все это является яркими примерами применения API.

Что объединяет API

Пользовательские

Пользовательский интерфейс (User Interface) обеспечивает передачу информации между человеком и программно-аппаратными компонентами системы. Доминирующая часть – графического типа с управлением посредством визуальных элементов: иконки, окна, списки, поля ввода и другие. Все то, что посетитель видит – это frontend (презентационно-визуальная часть), взаимодействующая с программной стороной backend.

Здесь всегда применяются стандарты UI/UX дизайна:

• UI – интерфейс пользователя, он отвечает за внешний вид и включает цветовые решения, шрифтовые пары, анимацию и другие визуальные элементы;
• UX – пользовательский опыт, обеспечивающий работоспособность. Сюда относится техническая часть: функциональность, структура, юзабилити.

UI/UX должны перекликаться друг с другом, формируя дружелюбную и комфортную для посетителей среду.

Голосовые

«Окей, Google», «Привет, Siri», разговоры с умной колонкой Алисой – это про голосовые интерфейсы. Они воспринимают естественную речь человека, умеют адаптировать ее в текстовые запросы/сообщения, звуковые дорожки и другие форматы. В их основе лежит искусственный интеллект, благодаря которому система становится более совершенной после каждого диалога: происходит постоянное обучение. Уже существуют решения, выполняющие синхронный перевод во время беседы, на базе голосовых запросов рисующие картинки и даже пишущие музыку.

Голосовой поиск ускоряет команды и поиск минимум на 25%

Графические и текстовые

Классический вариант, с которым мы взаимодействуем ежедневно, сюда входят поля для ввода, иконки, схемы, кнопки на сайтах и другие графические элементы с текстовыми дополнениями. Получил название GUI, реализован повсеместно и является привычным для аудитории.

Тактильные, жестовые, бесконтактные

Управляются при помощи жестов и физического контакта: нажатие клавиш, клики мышкой, сенсорные экраны, джойстики, VR очки. Реализованы не только в мобильных устройствах и компьютерах: системы освещения, подачи воды и видеонаблюдения, реагирующие на движения, являются бесконтактными.

Игровые

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

Пример игрового интерфейса

Из каких элементов состоит интерфейс

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

• атомы. Самые мелкие компоненты – винтики в большом механизме. Они остаются незаметными, но играют важную роль при взаимодействии – это чекбоксы, радиокнопки, поля ввода, маски, тултипы;
• молекулы (группы). Получаются в ходе соединения атомов. Имеем поле ввода, но без кнопки для поиска по сайту оно не будет работать корректно;
• организмы. Формируются в результате группировки молекул, являются крупными частями интерфейса. В качестве примера: чек-бокс, выпадающий список, поле ввода и кнопка – получаем фильтры и навигацию;
• шаблоны. Включают организмы и объединяют компоненты для решения базовых задач.

Рассмотрим, что это означает и как работает.

Кнопки

Кнопки используются как для выполнения целевых действий, так и для усиления маркетингового эффекта. На лендингах доступны CTA-элементы с громкими призывами: «Хочу на курс!», «Заказать со скидкой» и аналогичные. В интернет-магазинах – «Купить», «Заказать», «Добавить в корзину» и прочие, указывающие пользователю на то, что он получит после клика. Кнопки являются основным элементом продаж в графических интерфейсах, их оформлению дизайнеры уделяют особое внимание, соблюдая правила психологии цвета и общепринятые стандарты. В ходе реализации проекта устанавливается иерархия действий: одна кнопка – наиболее заметная (главная), остальные – вторичные и третичные с менее яркими акцентами.

Кнопки на сайте

Чекбоксы

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

Выпадающие списки (select)

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

Так выглядит выпадающий список

Аккордеоны

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

Слайдеры

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

Слайдеры в оформлении

Контент

Отдельный блок, объединяющий визуальную информацию и текст. Может быть кратким или развернутым с кнопкой для перехода – все зависит от оформления. Позволяет предварительно познакомиться с материалом и стимулирует интерес.

Попапы

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

Модальные окна

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

Модальное окно на сайте отеля

Экраны-блоки

Включают в себя фрагмент контента, который освещает что-то одно: преимущества компании или характеристики товара. Рассчитаны на один экран и захват внимания посетителя.

Страницы

Структурные единицы, на которых объединены ранее перечисленные элементы. Имеют индивидуальный URL-адрес, при их формировании выстраивается иерархическая структура (от главной к менее важным). Страницы связываются внутренними ссылками для осуществления перелинковки, рекомендуется добавлять на каждую линк на главную.

Пример страницы

Хедер

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

Оформление хедера

Подвал

Сюда выносится все, что не поместилось в хедер – адрес компании, список разделов со ссылками, расширенная контактная информация, иконки социальных сетей. Подвал имеет нейтральное оформление, лишен CTA и других значимых кнопок.

Дизайн футера

Превью

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

Тултип (tooltip)

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

Подсказки в товарных карточках

Навигация

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

Пагинация

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

Объединение вариантов пагинации

Поисковая строка

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

Умная поисковая строка, указывающая на ошибки и дающая релевантный результат

Что еще входит в интерфейс

1. Медиаплеер. Позволяет встраивать и, соответственно, просматривать видео прямо на сайте. При желании пользователь может кликнуть на ссылку, чтобы перейти в видеохостинг.
2. Поля для данных. Посетитель использует поле для указания личных данных, например, имени и фамилии, промокода для получения дисконта или применения подарочного сертификата.
3. Маски. Так называются формы, куда можно ввести телефонный номер. Существуют маски с ориентированием на географическую специфику: указаны коды стран и есть флажки-пометки для упрощенного поиска, а также автоматическая подстройка с учетом введенных цифр.
4. Формы для паролей. Легко указать пароль, есть возможность скрыть его (маскируется звездочками) или оставить доступным, чтобы убедиться в корректности при вводе. Формы чаще всего объединены с логином, доступны варианты для осуществления авторизации через аккаунты в поисковых системах, социальных сетях.
5. Теги. Работают по аналогии с хештегами – это компактные рубрикаторы. Пользователь определяет, к какой теме/категории относится страница, нередко применяются для пагинации, их размещают над или под контентом.

Кто и как разрабатывает интерфейсы

К разработке интерфейса может привлекаться как один веб-дизайнер (в небольших проектах), так и группа – продуктовый и UX/UI, специалисты по маркетингу. Процесс создания ведется по следующей схеме:

• коммуникация с заказчиком. На первом этапе определяется, что нужно реализовать и какой результат получится на финише. Клиент заполняет бриф или дает ответы на вопросы при личном общении, приводит понравившиеся примеры и делится сведениями о своем бизнесе/проекте;
• составление технического задания (ТЗ). На базе полученных данных формируется ТЗ – дорожная карта для разработчика и страховка от форс-мажоров для каждой из сторон (затягивание сроков, некорректная реализация, необоснованные требования клиента, иное). Тщательно прописываются условия, этапы разработки, элементы и другие значимые параметры;
• проведение исследований. Комплексный мониторинг: учитываются целевая аудитория и конкуренты, успешные примеры, тренды, UX/UX и другие моменты;
• проектирование и последующее прототипирование. Дизайнер выполняет проектирование будущего интерфейса и создает прототипы, выполняет тестирование и корректировку по результатам обратной связи от заказчика. После чернового варианта создается макет – финальный вариант;
• дизайн и разработка. Прорабатывается визуал, проводится подготовка графики, контента и других элементов, после чего к делу присоединяются программисты, переносящие макет в цифровое пространство;
• тестирование. Устраняются недочеты и баги, осуществляется тестирование с привлечением разных сценариев;
• передача заказчику. Готовый к запуску вариант принимает клиент. 

Процесс разработки интерфейсов

При разработке можно прибегнуть к услугам программиста, альтернатива – использование платформ No-code, что особо актуально для сайтов. Например, конструктор Craftum предлагает более 150 готовых шаблонов и 170 блоков, из которых легко собрать лендинг, интернет-магазин и другие проекты, а также осуществить перенос готового макета. Доступны интуитивный графический редактор, функционал блога и доступ к API, лимитов по трафику или количеству страниц нет, SSL-сертификат и хостинг предоставляются.

Какие программы используются

1. Фигма (Figma). Маст-хэв веб-дизайнеров и других специалистов, занимающихся проектированием как интерфейсов, так и сайтов, мобильных приложений, графического контента. Доступен инструментарий для решения любых задач, разнообразие плагинов, возможности для совместной работы, фреймы и компоненты, облачное хранение файлов и многое другое.
2. Sketch. Подходит для мудбордов и дизайн-макетов, векторных иллюстраций. Совместного доступа нет, но продукт имеет низкий порог входа и легкий для восприятия новичками. Здесь меньше инструментов и возможностей по сравнению с Фигмой.
3. Adobe XD. Профессиональная программа для разработки интерфейсов, совместимая с другими продуктами компании. Реализована поддержка веб-верстки и векторной графики, предусмотрено большое количество инструментов для мобильных приложений, сайтов, компьютерных программ.

Каким должен быть интерфейс

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

Единообразие. Элементы должны быть привычными: посетитель легко узнает их внешний вид и знает расположение даже в том случае, если посещает сайт впервые. Реализовать единообразие поможет предварительный анализ конкурентов: не стоит размещать корзину слева, если у всех она справа, или же внедрять круглые кнопки, когда у большинства – квадратные. Эти факторы человеческий мозг считывает автоматически: не найдя знакомые визуальные образы, пользователь уйдет, не желая тратить время на разбор чрезмерной креативности.

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

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

Попап, подтверждающий заявку

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

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

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

5 примеров дружелюбного интерфейса

Маркетплейс Озон

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

Дизайн Озон

Телеграм

Мессенджер Телеграм занимает лидирующие позиции в нише именно из-за интуитивно понятного интерфейса. Легко управлять ключевыми параметрами, переписываться, отправлять голосовые сообщения и файлы. Прорывом стало появление реакций: можно не отвечать на сообщение, а просто поставить эмодзи, например, лайк/дизлайк или что-то другое. Внутренние переходы выполняются в 1-2 нажатия, кнопки – на своих местах.

Онлайн-кинотеатр Иви

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

Главная онлайн-кинотеатра Иви

Geltek

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

Интересное оформление меню на сайте производителя косметики

МТС

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

Главная страница сайта МТС

В заключение

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