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