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