Что значит термин интерфейс и 18 видов его реализации

Что такое интерфейс

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

Определение UI (английский - user interface) переводится как «пользовательский интерфейс». UI охватывает не только графический интерфейс, а еще и тактильный, голосовой или звуковой. В качестве инструментов взаимодействия с системами UI могут выступать:

• текстовые поля;
• кнопки и галочки;
• выпадающие списки;
• всплывающие подсказки;
• переключатели;
• элементы меню программы или сайта;
• и многое другое.

Хороший пользовательский интерфейс учитывает человеческие слабости, перекладывает работу на машину, минимизирует ошибки и раздражение пользователя.

Какие задачи решают интерфейсы

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

Интерфейсы предназначены для решения следующих задач:

1. Ввода команд (с помощью мышки, клавиатуры, жеста и даже голоса).
2. Отправки запроса и получения ответа. Ответ может иметь форму звука, текста, изображения.
3. Обмена информацией между программами и устройствами.
4. Взаимодействия человека и устройств, ОС.
5. Управления программами и аппаратными устройствами.
6. Получения данных о возникших на устройстве ошибках, допущенных операционными системами или программой.

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

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

Типы и виды интерфейсов

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

1. Командная строка (CLI). Такой интерфейс активно использовался на заре развития компьютерных технологий. Командная строка – единственно возможный способ взаимодействия между пользователем и операционной системой MS-DOS.
2. Графический интерфейс (GUI, graphical user interface). Иногда графический называют WIMP - потому что он применяет Windows, Icons, Menus and Pointers. Позволяет взаимодействовать с операционной системой и программами с помощью визуальных элементов – иконок, окон, указателей мыши, списков, полей ввода и других объектов. Примером графического интерфейса является любой веб-сайт. Все, что мы видим на странице – это фронтенд. Благодаря ему пользователи взаимодействуют с бэкэндом, программной составляющей.
3. Текстовый интерфейс (TUI, Text user interface). Способ взаимодействия человека и компьютера с помощью набора букв и цифр. Ярким примером реализации текстового интерфейса является старая операционная система MS-DOS.
4. Жестовый интерфейс (GBI, Gesture-Based Interface или GDI — Gesture Driven). Это технология взаимодействия, с помощью которой можно управлять устройствами, которые «понимают» жесты (движения тела).  Используется в ноутбуках, смартфонах и планшетах. Бывают двух типов: контактный (тактильный) и бесконтактный.
5. Голосовой интерфейс (VUI, Voice user interface). Пользователь вводит голосовую команду на своем родном языке, смартфон распознает ее и выполняет. Практическая реализация голосовых интерфейсов – сложная задача, программисты должны учитывать множество параметров. Пример: программы Алиса у Яндекс, OK Google.
6. Тактильный интерфейс. Это подвид жестового, предполагает непосредственный контакт с поверхностью (сенсорный экран, тачпад).
7. Нейронный интерфейс. предназначен для передачи сигнала из мозга в компьютер или другое устройство. Для этого в мозг вживляют электроды. С помощью системы нейронного интерфейса парализованный человек может общаться с окружающим миром. Системы программ, которые это обеспечивают, имеют большое медицинское и гуманитарное значение.
8. API. Application programming interface, Программный интерфейс – то универсальный способ взаимодействия между собой приложений, написанных на разных языках программирования и разными разработчиками. Как пример, виджет погоды яркий пример программного интерфейса,
9. Программно-аппаратный (аппаратно-программный) интерфейс. Способ взаимодействия приложений и оборудования. Самая главная задача ОС (операционной системы) – обеспечить взаимодействие программ и программ с «железом».
10. Аппаратный интерфейс (Хардварный). Hardware-интерфейс обеспечивает взаимодействие различного оборудования и физических девайсов, например, компьютера и принтера, компьютера и беспроводной мыши, компьютера и телевизора (внешнего монитора). Такой интерфейс может быть контактным, бесконтактным и смешанным.
11. Пользовательский интерфейс (технология ЧМИ - человеко-машинный интерфейс) - это все инструменты, с помощью которых человек взаимодействует и может пользоваться программой, игрой, системой «умный дом», отправляет команды и получает данные. Пользовательский интерфейс связывает воедино самого пользователя, операционную систему и программы.
12. Веб-интерфейс. Это все способы взаимодействия программ в интернете. Например, пользователь заходит в интернет-магазин, выбирает там товар и нажимает на кнопку «Купить» а затем – «Оплатить картой». Сайт отправляет запрос банку на списание средств со счета клиента и на зачисление на счет магазина. Понятно, что веб-интерфейсом в этом случае будет клиентский браузер – все взаимодействие происходит через него.
13. Игровой интерфейс. Сюда входит все взаимодействие пользователя с игровым приложением - от графического до системы управления. Создавая игру, программист должен ответить на такие вопросы: какие команды может давать игрок, как будет представлена различная информация в игре, как игра отреагирует на те или иные действия пользователя, какие данные игра предоставит.
14. Материальный интерфейс. Это любое взаимодействие с компьютерной мышкой, джойстиком, сенсорным экраном и даже с водопроводным краном. То есть со вполне осязаемыми, материальными объектами.
15. Интерфейс в телефонах. В современных телефонах используются различные виды интерфейсов: графический, голосовой, жестовый, тактильный. Технология работает так: пользователь прикасается к кнопкам на экране, дает команды голосом, а программное обеспечение распознает и обрабатывает эти команды.
16. MDI — управляемое меню, Menu Driven.
17. FBI — на основе форм, Form Based.
18. NLI — естественный язык, Natural Language.

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

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

Если хотите знать об интерфейсах веб-сайта, то он должен быть:

• Адаптивным к ПК, мобильным устройствам разных версий, производителей и моделей;
• Содержать оптимальное число графических элементов управления и надстроенных программ. Графических элементов не должно быть много, главное - все задачи пользователя должны решаться;
• Быть интуитивно понятным. Когда юзер тратит время на поиски, например, оформления заказа в корзине, это вызывает раздражение и нежелание завершать покупку. Поэтому важно, чтобы у пользователя на основе его предыдущего опыта не возникало проблем с взаимодействием. Все составляющие должны быть понятными, исправно работающими и «говорящими», не требующими что-то установить;
• Стоит обратить внимание на наличие кнопок с популярными социальными сетями, контактами, системой поиска, удобной формой регистрации, цветовых акцентов. Не должно быть неприятных, тяжелых для глаз цветовых сочетаний и шрифтов;
• Лаконичным. Объяснить назначение всех кнопок управления — хорошо, но отнимет много времени у посетителя. Универсальность и лаконичность позволяют не раздувать интерфейс, не делают его перегруженным информацией;
• Последовательным. Должна соблюдаться структура сайта, логичность. Не может кнопка «обратная связь» или «задать вопрос» находиться внутри только одной категории «одежда и обувь»;
• Эффективным. На этот пункт обращают особое внимание практически все интернет-магазины. Чем короче путь клиента к целевому действию, тем лучше для компании. Кнопка «оформить в 1 клик» в интернет-магазине намного прибыльней, чем оформление заказа в 3-5 этапов. Если говорить прагматично - когда пользователь тратит много времени на решение своей задачи, выше риск, что он откажется от идеи покупки именно на этом сайте;
• Учитывать возможные ошибки. Клиенты могут нажать «не туда», удалить данные, сделать заказ ненужного товара. В этом случае интерфейс должен предложить возможность отмены операции или восстановления данных;
• Проводить тестирование интерфейса на предмет работоспособности и удобства для простого пользователя. Попросите коллег, знакомых: это позволит понять, действительно ли интерфейс хороший и удобен для пользователей.

Основные элементы интерфейса

К интерфейсу относятся все элементы на мониторе пользователя. Давайте разберем подробнее те, с которыми будут напрямую взаимодействовать пользователи:

• Кнопка. Позволяет выполнить определенное действие при нажатии. Например, при нажатии кнопки «Купить» пользователь попадет в форму оформления заказа.
• Чек-бокс. Позволяет выбрать сразу несколько элементов. Используется в фильтрах сайтов для настройки вывода информации.
• Выпадающий список (select). Позволяет выбрать одну из опций, скрытых до момента наведения мышки или клика.
• Аккордеон. Список со скрытыми системами элементов. При клике на нем показываются дополнительные опции. Обычно он используется для сокращения меню. В развернутом виде аккордеон показывает скрытые пункты меню. Пользователь может открыть одно скрытое подменю или сразу все.
• Слайдер. Несколько изображений, сменяющих друг друга. Они обязательно имеют кнопки-стрелки для смены картинки. Часто применяется для показа разных объявлений. Картинки могут сменяться самостоятельно или после клика по слайдеру.
• Контент. Блок с текстом или визуальной информацией.
• Всплывающее окошко на сайте. Обычно используется для приглашения подписаться на рассылку, заказать услугу или прочитать похожую статью.
• Модальное окно. Разновидность popup, но в отличие от первого закрывает большую часть экрана. Чтобы продолжить работу с сайтом, пользователю нужно или закрыть это окно, или выполнить требуемые действия.
• Экран (блок). Фрагмент контента, рассказывающий об одной вещи. Чаще всего делается с расчетом на один экран.
• Страница. Структурная единица контента на веб-ресурсе. Обладает отдельным адресом, обычно посвящена одной теме или товару/услуге.
• Хедер (Header). Шапка сайта. Располагается в верхней части. Здесь обычно размещают контактную информацию и навигационные элементы: меню, поисковые строки.
• Подвал (футер/footer). Располагается в самом низу. Здесь можно разместить адрес компании, дополнительное меню, услуги и ссылки на важные страницы.
• Превью. Уменьшенное изображение при нажатии на которое открывается полная картинка, блок контента и т.д..
• Тултип (tooltip). Всплывающая подсказка. В зависимости от настроек может появляться при наведении или нажатии.
• Навигационные элементы. Все что помогает пользователю ориентироваться: меню, сайдбары с подсказками, кнопки для быстрого перехода на нужный фрагмент страницы. К навигационным элементам относятся и кнопки для возврата вверх страницы.
• Пагинация. Разновидность навигации, позволяющая переходить на страницы идущие или по порядку, или по определенным правилам. Например, пагинация может предлагать похожие статьи.
• Хлебные крошки. Разновидность пагинации. Фактически — это подборка статей по выбранному параметру. Размещаются чаще всего внизу, для увеличения кликабельности рекомендуется делать с использованием превью.
• Поисковая строка. Позволяет производить внутренний поиск. Некоторые ресурсы используют поисковую выдачу «Яндекса» или Google.
• Медиаплеер. Элемент, позволяющий просматривать видео непосредственно на сайте.
• Поле для ввода личных данных. Поле для ввода имени при регистрации или оставлении заявки.
• Маска для номера телефона. Если пользователю предлагается ввести номер телефона, используется «маска» с полями для заполнения.
• Форма для ввода пароля. Обычно символы пароля сразу скрываются точками с целью безопасности данных. Форма для входа обычно включает в себя логин или электронную почту и поле для ввода пароля. Современные сайты предлагают возможность входа через социальные сети или аккаунты Google и «Яндекса».
• Элемент, показывающий процесс загрузки. Позволяет пользователю понять, что сайт или приложение работают и нужно просто немного подождать.
• Теги. Позволяют определить, к какой категории или рубрике относится страница. Могут использоваться для настройки пагинации. Размещаются или перед основным контентом, или после.

Элементы интерфейса в GUI реализованы на основе метафор и абстракции.

Так, система делится на:

• Атомы. Мельчайшие частицы, из которых состоит интерфейс: кнопки, поля ввода, чекбоксы, радиокнопки, стили для типографики.
• Молекулы (группы атомов). Если взять два атома и соединить друг с другом — получится молекула. Например, кнопка и поле ввода.
• Организмы. Если объединить несколько молекул, получится организм — крупная часть интерфейса. Например, сквозная навигация в шапке или боковой панели.
• Шаблоны. Если объединить организмы друг с другом и создать шаблон — получится интерфейс, предназначенный для решения типовых задач.

При проработке элементов помните о пользователях. Сведите к минимуму нагрузку на их память, сделав объекты, действия и параметры заметными.

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

В международной практике подход к дизайну интерфейсов уже стал стандартом. Обучающие курсы зачастую опираются на одни данные. Процесс по дизайну интерфейсов включает следующие ключевые этапы (в этом блоке будем опираться на материалы UX Mastery — партнера Interaction Design Foundation, крупнейшего в мире сообщества обучения UX-дизайну):

1. Стратегия (Бренд-стратегия и UX-стратегия) — определяет полезное действие, ценности бренда и видение будущего. Стратегия естественным образом влияет на цели и методы проекта по дизайну интерфейсов, критерии достижения целей и результатов и приоритет проекта в общем ландшафте высот организации.
2. Исследование (UX-исследование) — фаза открытий. Комплексные проекты включают в себя масштабную работу по пользовательским исследованиям (UX-исследованиям) и анализу конкурентов (бенчмаркинг). Небольшие организации или стартапы могут подойти к исследовательской работе в упрощенном формате и обосновать идею, построенную по принципам минимальной жизнеспособности (Minimum Viable) через интервью, опросы и юзабилити тестирования технологии.
3. Анализ (UX-аналитика) — цель анализа в том, чтобы сделать выводы из данных и дать уверенный старт созданию дизайн-концепций. Выводы призваны помочь понять суть происходящего и приступить к проектированию интерфейса.
4. Проектирование и прототипирование интерфейсов — на этапе происходит создание прототипов интерфейсов, их тестирование пользователями и корректировка на основе обратной связи. На этой фазе чаще применяются прототипы с низкой детализацией (Low-fi prototyping), так в них пользователи фокусируются только на функциях и не отвлекаются на бренд-дизайн (уникальную графическую идентичность) и другие визуальные детали.
5. Дизайн интерфейсов и Разработка — на этом этапе создается проработанный дизайн, пишется детальный контент, алгоритмы, создается вся уникальная графика и начинается совместная работа с программистами.

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

Базовые принципы разработки интерфейсов

Базовые принципы можно проследить сквозь 24 года исследований в сфере интерфейсов: с 1987 до 2009 года. Эти принципы работают и сейчас.

Читайте главные рекомендации по проектированию интерфейсов. Шнайдерман (1987 год) и Плезент (2009 год):

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

Примеры крутых интерфейсов

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

Рассмотрим интересные примеры интерфейсов, которые набрали популярность:

1. Приложение соцсети «ВКонтакте». Хорошая структура с полезными программами, все кнопки расположены в удобных местах на виду, реклама ненавязчива. За счет удобного графического интерфейса можно без проблем можно найти все необходимое и перейти в нужный раздел в пару кликов.
2. Маркетплейс «Вайлдберриз». Интерфейс и фирменный стиль интернет-магазина постоянно обновляется, становясь визуально легче, проще и удобнее.
3. Онлайн-кинотеатр «Кинопоиск». Здесь очень хорошо подобраны шрифты и цвета, все сделано в стиле кино. Пользователям приятно находиться на странице, а это улучшает UX.
4. Приложение для шахматистов «Chess.com». Сдержанный дизайн, гармонично подобраны цвета и простой в освоении хороший интерфейс.
5. Приложение сток-фотографий «Pinterest». Простой и понятный каждому интерфейс. Функционал довольно небольшой приложения, однако все сделано по канонам правильного создания пользовательского интерфейса.

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

Часто задаваемые вопросы

Заключение

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