В общем смысле интерфейс (от англ. interface — взаимодействие) — это устройство или система для взаимодействия между не связанными друг с другом объектами. Например:
-
USB — это интерфейс, через который компьютер взаимодействует с периферийными устройствами;
-
API ВКонтакте — это интерфейс, через который другой сайт или приложение может получить информацию из базы данных «ВКонтакте»;
-
приборная панель самолёта — интерфейс для взаимодействия между системами самолёта и пилотом;
-
кнопки на электрическом чайнике — интерфейс для взаимодействия между любителем почаёвничать и нагревательным элементом чайника.
В области информационных технологий под интерфейсом чаще всего понимают набор инструментов, через которые пользователь общается с программой или системой. В рамках этой статьи мы будем говорить именно о цифровых интерфейсах.
Виды пользовательских интерфейсов
Командная строка
Командная строка, или CLI (Command Line Interface) — это текстовый интерфейс. Пользователь вводит команды текстом, система обрабатывает их и выводит данные о результатах тоже в виде текста.
Может показаться, что такой вид интерфейса устарел, но это не так. Командной строкой активно пользуются разработчики: во-первых, для экономии времени, т. к. вводить короткие команды с клавиатуры получается быстрее, чем водить мышкой по экрану; во-вторых, CLI зачастую предоставляет больше возможностей, чем графический интерфейс той же ОС или программы.
Графический интерфейс
Графический интерфейс, или GUI (Graphic User Interface) — это то, что чаще всего подразумевают, говоря об интерфейсах.
Кнопка «Пуск», окна программ, значки папок и приложений — элементы графического интерфейса операционной системы Windows. Иконка-гамбургер, строка поиска, кнопка «В корзину» — элементы графического интерфейса интернет-магазина.
Голосовой интерфейс
Голосовой интерфейс, или VUI (Voice User Interface) — это невидимый интерфейс, в котором данные вводятся и выводятся с помощью голоса. Когда пользователь айфона говорит «Привет, Сири, поставь таймер на 10 минут», он взаимодействует с приложением «Часы» через голосовой интерфейс. VUI незаменим для пользователей, которые плохо видят или не видят совсем, а для остальных полезен в ситуациях, когда смотреть на экран неудобно — например, за рулём автомобиля.
Принципы хорошего пользовательского интерфейса
Один из самых популярных списков правил, применимых к интерфейсам, составил американский профессор информатики Бен Шнейдерман. Он называется «8 золотых правил дизайна интерфейса». Давайте рассмотрим принципы Шнейдермана на примере сайта пиццерии.
1. Последовательность
Хороший интерфейс должен быть последовательным. Так, если значок корзины на нашем сайте всегда находится в правом верхнем углу, нельзя взять и перенести его в нижний левый в одном из разделов. Если мы называем список покупок «Корзиной», то именно этот термин должен фигурировать везде, где мы говорим о корзине.
2. Доступность для разных пользователей
Клиенты нашей пиццерии — неоднородная группа людей. Кто-то хорошо видит, а кому-то приходится пользоваться экранной читалкой. У одного смартфон появился, когда ему было 10 лет, а другой познакомился с новыми технологиями только в 80.
Хороший интерфейс учитывает нужды тех и других: например, аппетитная фотография пиццы в интернет-магазине должна сопровождаться описанием для экранной читалки — тогда слабовидящие и слепые пользователи смогут понять, что в составе.
3. Информативная обратная связь
Когда пользователь что-то сделал в вашем приложении, ему важно видеть, что его действие удалось (или не удалось).
Скажем, наш пользователь дошёл до этапа оплаты, ввёл данные карты, нажал «Заказать» и... ничего не произошло. Такой интерфейс хорошим не назовёшь, ведь пользователь сразу начнёт волноваться: дошёл ли заказ до ресторана? Списались ли деньги с карты? Поэтому важно сообщить, что оплата удалась, и поблагодарить за покупку — а если произошла ошибка и заказ не создан, то указать причины (например, недостаточно денег на карте).
4. Сложные сценарии поделены на этапы
Если с помощью вашей программы пользователи выполняют комплексные задачи, лучше разделить их на этапы. Заказ в пиццерии — вполне себе комплексная задача, которая состоит минимум из трёх частей: выбрать пиццу, которая понравится всем на вечеринке, правильно указать адрес доставки и оплатить покупку. Поэтому для каждого из этих этапов на сайте будет свой раздел, при этом можно показать визуально, сколько шагов осталось до успешной отправки заказа.
5. Предотвращение ошибок
Хороший интерфейс должен давать пользователю как можно меньше возможностей ошибиться. Так, нашему пользователю обязательно нужно оставить телефон, чтобы с ним могли связаться оператор и курьер пиццерии. Если в поле для ввода телефона можно вводить и цифры, и буквы, то кто-то обязательно ошибётся и введёт не то. Лучше сразу настроить поле так, чтобы пользователи не могли вводить в него буквы, — это предотвратит ошибки.
6. Лёгкая отмена действий
Всё, что пользователь делает в программе, должно легко отменяться. Например, наш клиент ошибся и случайно заказал пиццу к себе на работу, а нужно было на домашний адрес. Хороший интерфейс сразу после оформления заказа даст пользователю возможность самостоятельно его отредактировать или даже отменить, не дожидаясь звонка оператора.
7. Ощущение контроля над ситуацией
Пользователь должен чувствовать, что это он управляет программой или системой, а не наоборот. Скажем, если наш сайт после добавления пиццы в корзину будет автоматически отправлять пользователя на экран оплаты, это вряд ли понравится клиентам — ведь они могут захотеть купить больше одного блюда. Пусть клиенты решат сами, когда они готовы оформлять заказ.
8. Небольшая нагрузка на память пользователя
Объём кратковременной памяти человека ограничен, нам сложно удерживать в голове много данных одновременно. Когда наш пользователь дошёл до оплаты заказа, он мог подзабыть, сколько и каких блюд он заказал. Удобно, если рядом с итоговой суммой будет выводиться список покупок — тогда пользователь сможет проверить свой заказ перед оплатой.
Получи больше пользы от Skysmart:
-
Научись программировать на курсах разработки.
-
Выбирай из 130+ наставников по программированию.
Записывайся на бесплатные курсы для детей.
Кто придумывает пользовательские интерфейсы
Теперь мы с вами знаем, что такое интерфейс системы, программы в компьютере, мобильного приложения или игры и каким он должен быть. А специалист, который разрабатывает пользовательские интерфейсы, называется UX/UI-дизайнером. Аббревиатура UI — это уже знакомый нам User Interface, а UX — User Experience (пользовательский опыт).
В небольших проектах отдельного человека, отвечающего за интерфейс, может не быть, тогда эти задачи ложатся на других специалистов — например, разработчика, верстальщика, маркетолога. Поэтому всем, кто планирует связать своё будущее с созданием программ, игр или сайтов, важно понимать основы UX/UI-дизайна.
На курсах программирования в Skysmart Pro дети и подростки учатся не только писать код, но и создавать пользовательские интерфейсы. В рамках курса можно разработать свою игру, приложение или веб-сайт, а можно просто подтянуть цифровую грамотность и научиться безопасно использовать интернет. Вводный урок — бесплатно!
