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

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

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

В IT выделяют три основных типа. Пользовательский интерфейс связывает человека с системой через экран, кнопки, меню или голосовые команды. Программный объединяет программы между собой через API, библиотеки и протоколы. Аппаратный описывает физическое и логическое подключение устройств: USB, HDMI, Bluetooth. Эту классификацию даёт тот же материал, и она хорошо подходит как основа для остального разговора.

Наглядный пример приводит редакция The Code: банкомат. Экран с понятными иконками, кнопки выбора операций и подсказки помогают снять деньги, не задумываясь о программном коде внутри. Интерфейс здесь посредник между человеком и сложными внутренними процессами. По тому же разбору, ключевая идея сводится к понятности и удобству: если посетителю приходится гадать, куда нажать, интерфейс спроектирован плохо.

Для владельца сайта вывод прямой. У каждой страницы есть интерфейс: меню, форма заявки, корзина, кнопка «Позвонить». Он либо ведёт человека к цели, либо заставляет уйти к конкуренту. Подробнее о том, как удобство измеряют и улучшают, читайте в материалах про юзабилити и UX/UI-дизайн.

Принцип работы интерфейса

Принцип одинаков у кнопки в браузере и у приложения на смартфоне. Графический интерфейс работает по событийной модели: система ждёт действия пользователя и реагирует на него. В том же материале цепочка выглядит так.

1. Пользователь совершает действие: клик, свайп, нажатие клавиши.
2. Операционная система фиксирует событие.
3. Событие передаётся приложению.
4. Программа выполняет нужное действие.
5. Интерфейс обновляет экран.

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

История показывает, как быстро выросла роль внешнего вида. По рассказу Яндекс Образования, компания Xerox представила компьютер с графическим интерфейсом и своим вариантом мышки, и после этой демонстрации производители поняли: компьютеры без красивого интерфейса не продать. Основой стала концепция WIMP, то есть окна, иконки, меню и указатели.

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

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

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

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

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

Голосовой интерфейс устроен сложнее, чем кажется. В том же материале The Code описано, как работает голос: микрофон слышит голос, система переводит аудио в текст алгоритмами распознавания речи, затем сопоставляет текст с заранее заданными командами и выполняет действие. За одной фразой «Алиса, поставь будильник» стоит цепочка из нескольких технических интерфейсов.

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

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

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

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

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

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

Создают интерфейсы по понятному порядку. По описанию ELMA365, работа обычно проходит в три этапа: проектирование, дизайн и тестирование. На первом определяют структуру системы, сценарии использования и логику взаимодействия, на втором оформляют экраны, на третьем проверяют решения на людях. Если пропустить первый этап, дизайнеру придётся рисовать экраны наугад, а потом переделывать.

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

Правила хорошего интерфейса

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

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

• Показывайте реакцию на действие: индикатор загрузки, сообщение «Заявка отправлена».
• Блокируйте ошибку заранее: кнопка «Создать» неактивна, пока не заполнены обязательные поля или не придуман надёжный пароль.
• Давайте отмену: возможность откатить действие повышает доверие, потому что человек понимает, что ошибка не приведёт к необратимым последствиям.
• Думайте о доступности: атрибут aria-label позволяет экранному диктору озвучить кнопки навигации.

Отдельное правило касается читаемости. Руководство W3C по доступности в версии WCAG 2.1 требует для обычного текста контраст с фоном не менее 4,5 к 1, а для крупного не менее 3 к 1. Серый текст на белом фоне или светлая надпись на кнопке часто не проходят эту проверку. Пользы от проверки много, а времени она занимает минуты: достаточно открыть любой онлайн-калькулятор контраста.

Менеджер продукта Кирилл Фёдоров рассказал, как команда Forecast NOW перерабатывала интерфейс системы прогнозирования спроса. Сначала команда расспросила клиентов, затем перестроила главную панель по привычным табличным программам на основе дизайн-системы Fluent Design, и число обращений в поддержку по теме интерфейса снизилось на 36%. Поводом стала путаница: логика перехода между вкладками была не всегда понятна пользователям, и вопросы шли в техподдержку.

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

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

1. Выпишите целевое действие каждой важной страницы: заявка, звонок, покупка.
2. Пройдите этот путь сами сначала на компьютере, затем на телефоне и посчитайте шаги и поля.
3. Включите запись сессий. Вебвизор Яндекс Метрики записывает действия посетителей, включая заполнение форм, а содержимое конфиденциальных полей автоматически заменяет звёздочками.
4. Найдите места, где люди возвращаются назад, бросают форму или многократно нажимают на одну кнопку.
5. Дайте знакомому задачу вроде «закажите звонок» и молча понаблюдайте.

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

Цену одной кнопки хорошо показывает кейс консультанта Джареда Спула. Крупный ритейлер показывал покупателям форму входа с кнопкой регистрации, и многие уходили, не купив. Дизайнеры убрали кнопку Register и поставили Continue с пояснением, что аккаунт для покупки не нужен. Число покупающих клиентов выросло на 45%, а за первый месяц магазин получил дополнительные 15 млн долларов. Позже выяснилось, что у 45% покупателей в базе было по нескольку регистраций, а восстановление пароля запрашивали около 160 тысяч раз в день.

Мы всего лишь поменяли кнопку.

Джаред Спул, консультант по юзабилити, из того же кейса

Формы заказа проверяют так же. По данным Baymard Institute, оформление заказа в среднем состоит из 5,1 шага и содержит 11,3 поля, и 17% пользователей отказывались от заказа из-за его сложности. В тесте 42% участников хотя бы раз вписали полное имя в поле «Имя». Вывод простой: одно поле «Полное имя» работает лучше двух отдельных, а каждое лишнее поле нужно оправдывать.

Как интерфейс влияет на конверсию и поисковое продвижение?

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

Пример из российской практики приводит портал RUWARD. Агентство «Далее» сообщает о редизайне сайта оператора СберМобайл. Команда добавила конструктор тарифа и автоматическую подстановку данных в корзину по номеру телефона: человек вводит номер, и нужные для заказа сведения подтягиваются сами. По сообщению агентства, после запуска общая конверсия выросла вдвое, время визита увеличилось на 43%, а оформление eSIM сократилось до 5 минут.

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

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

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

Частые вопросы