13 терминов пользовательского интерфейса — шпаргалка для дизайнеров продуктов

Вхождение в мир UI/UX может быть захватывающим опытом для новичков в данной области. Однако есть определенные сложности: например, необходимость освоения специфического языка, который изначально может быть непонятен. 

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

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

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

13 терминов пользовательского интерфейса, которые вам необходимо знать

Для облегчения восприятия мы структурировали терминологию дизайна пользовательского интерфейса на две главные группы: действия (глаголы) и объекты (существительные).

Термины пользовательского интерфейса — глаголы (термины действий)

Щелчок/касание (Click / Tap) — действие, связанное с нажатием, щелчком, касанием, нажатием и отпусканием кнопки мыши или экрана. В контексте устройств с сенсорными экранами обычно применяется термин «прикосновение». Иногда можно встретить слово «тап». В контексте работы с мышью или физическими кнопками чаще всего используют слова «щелчок» или «нажатие». Также существует термин «продолжительное нажатие», который хоть и не так широко распространён, может быть полезен в технической документации, предназначенной для разработчиков интерфейсов.

Нажатие (Press) — процесс взаимодействия с физической кнопкой, такой как клавиша «Tab» или «Power» на клавиатуре. Несмотря на кажущуюся простоту, этот процесс включает в себя несколько этапов. Сначала пользователь должен осознать наличие кнопки и необходимость её использования. После нажатия система должна сгенерировать соответствующий отклик, который пользователь ассоциирует с действием кнопки. К тому же, системы с единственной кнопкой встречаются крайне редко, что подразумевает наличие различных «уровней» функций, доступных через разные кнопки.

Ввод (Type) — действие по нажатию клавиши с целью ввода текста в пользовательский интерфейс. «Ввод» относится к внешнему виду текста (т. е. стилю, размеру, цвету и т. д.), а также к процессу разработки/создания текста, который является подходящим, разборчивым и привлекательным для улучшения пользовательского опыта. Дизайнеры несут ответственность за выбор шрифтов, характеристики выравнивания и интервалов, а также упорядочивание текста в иерархии для эффективной передачи содержания текста.

Свайп (Swipe) — действие, выполняемое смахиванием, которое обычно включает в себя перемещение пальца по сенсорному экрану.

Удержание (Hold) — нажатие, постукивание или нажатие кнопки без ее отпускания. Другими словами, оно предполагает нажатие и удерживание кнопки и может использоваться для описания действия по отношению к механическим кнопкам или кнопкам сенсорного экрана.

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

Термины пользовательского интерфейса — существительные (термины-идентификаторы)

Поле (Field) — область веб-интерфейса пользователя (WUI) или графического интерфейса пользователя (GUI), где пользователь может вводить информацию. Эти поля, также известные как «поля ввода», облегчают процесс внесения индивидуальных данных, например, контактных данных, имен или ответов на вопросы. Их применение способствует более эффективному общению между системой и человеком.

Диалог (Dialogue) — всплывающее окно, которое создает «разговор» между пользователем и интерфейсом. Оно может появиться до или после определённого действия и обычно требует от пользователя какой-то реакции, будь то введение данных или выполнение команды. Всплывающие диалоги могут быть использованы в различных ситуациях, например, для демонстрации рекламы без перехода на другую страницу, для привлечения внимания к важной информации, для сбора данных от пользователя или для предоставления дополнительных сведений, не связанных непосредственно со страницей.

Существует три основных вида диалоговых окон:

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

Панель (Panel) — некоторая форма, обычно в виде панели управления или панели инструментов. Например, панель пользовательского интерфейса содержит виджеты, которые можно выбирать и применять. Панели могут также служить местом, где собраны все доступные виджеты для их дальнейшей организации и применения.

Панель (Pane) — часть окна в WUI или графическом интерфейсе, которая содержит и предоставляет пользователю доступ к дополнительным функциям и/или дополнительной информации. Хорошо известными примерами панелей являются панель «Предварительный просмотр» и панель «Проводник». Как показано на рисунке ниже, на панели «Проводник» слева отображаются дополнительные папки и диски, такие как «Документы», к которым можно получить доступ с помощью левой панели, отображающей конкретное содержимое выбранного диска — «Основного диска».  

Кнопка (Button) — веб- или графический элемент, который выполняет действие при нажатии на него. Кнопки — это простой способ позволить пользователям выполнять действия по своему выбору, просто нажимая на нужную кнопку/действие. Кнопки являются обычным явлением на веб-страницах и предназначены для упрощения работы. Таким образом, очень важно четко идентифицировать каждую кнопку и действие, которое она выполнит при нажатии. Они также должны соответствовать стилю каждого интерфейса и поэтому могут иметь разные формы и размеры. Хотя на первый взгляд они могут показаться простыми, требуется значительное количество времени, чтобы создать, расположить и определить, что будет делать кнопка и как она будет вписываться в дизайн сайта. При этом она должна быть заметна, когда это необходимо.

Иконка (Icon) — изображение, обозначающее определенную функцию, идею или направление. Иконки предназначены для замены слов, но при этом передают то же значение в более простой и прямой форме. Примером иконки может служить изображение замка, который должен обозначать, что определенная функция заблокирована и не может быть доступна пользователю. Другой пример — вездесущая лупа для поиска. Иконки часто используются на кнопках, чтобы кратко передать их назначение. Часто иконки делятся на категории в зависимости от взаимодействия, темы, стиля и т. д. и обычно представляют собой реальные объекты.

Вкладка (Tab) — инструмент навигации и разделения, аналогичный вкладкам в картотеке или скоросшивателе. Вкладки часто разделяют разные части страницы или целые страницы. Пользователи могут взаимодействовать с вкладками, организовывать их и кликать по ним для перехода в нужный раздел. Вкладки обычно не используются для небольших страниц, но могут быть отличным инструментом для разделения и организации больших страниц. Чаще всего вкладки используются на более глобальном уровне, например, при открытии нескольких страниц веб-сайта в браузере — каждая страница веб-сайта представлена на вкладке в верхней части веб-браузера.

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

1. Выбор товара и добавление его в корзину.
2. Ввод информации для доставки.
3. Ввод платежных данных.
4. Предпросмотр заказа и его подтверждение.

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

Зачем вам нужно знать терминологию дизайна пользовательского интерфейса? 

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

Понимание терминологии пользовательского интерфейса принесет множество преимуществ:

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

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