kazminaviktoriya1
Перейти в профиль
Выйти из профиля
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42"><rect fill-opacity="0"/></svg>)
Добавить аккаунт
Элементы интерфейса
Вы уже знаете, что карта сайта помогает организовать информацию на разных экранах интерфейса. Чтобы пользователь смог взаимодействовать с сайтом, нужно наполнить каждую страницу смыслом. Для этого понадобятся элементы интерфейса.
В этом уроке: вы узнаете, что такое элементы интерфейса, какие из них наиболее распространены и в каких ситуациях их лучше использовать.
Обратите внимание: в этом уроке используется формулировка «элементы интерфейса», но в некоторых компаниях можно услышать словосочетание «объекты интерфейса». В этом уроке такие понятия равнозначны.
Механизмы интерфейса
Как вы помните, пользовательский интерфейс для взаимодействия с ПО предоставляет пользователю механизмы ввода, вывода и навигации.
- С помощью механизма ввода ПО получает информацию от пользователя.
- С помощью механизма вывода пользователь получает информацию от ПО.
- С помощью механизма навигации пользователь даёт ПО указания.
Механизмы пользовательского интерфейса реализуются с помощью следующих графических элементов:
Графические элементы или объекты — это составные части графического пользовательского интерфейса, которые имеют общепринятый вид и выполняют определённую функцию.
Рассмотрим подробнее на примере оформления заказа на сайте интернет-магазина.
Механизмы ввода информации
Курсор
Ещё 50 лет назад, чтобы запустить программу на компьютере, адрес конечного пункта приходилось вводить вручную (иногда нужное приложение находилось в папке, которая находилась в папке, которая находилась в папке и так далее). Но с 1968 года благодаря Дугласу Энгельбарту (Douglas Englebart) давать указания ПО стало проще и быстрее. Он впервые продемонстрировал миру указывающее устройство — компьютерную мышь, а также соответствующий этому устройству элемент графического пользовательского интерфейса — курсор.
Дуглас Энгельбарт также впервые продемонстрировал миру сам графический пользовательский интерфейс, видеоконференции и гиперссылки.
Курсор указывающего устройства, или курсор (Cursor), — элемент, указывающий место на экране компьютера, где должна выполняться та или иная компьютерная операция.
Сейчас достаточно навести курсор на нужный файл и кликнуть на него для запуска, вместо того чтобы вводить путь до файла вручную через клавиатуру.
Представьте, что вы запустили браузер и ввели адрес интернет-магазина. Как правило, когда новый пользователь попадает на главную страницу сайта, приложение предложит ему зарегистрироваться, указав в определённых полях информацию о себе. Для этого используется ещё один элемент интерфейса — поле ввода.
Поле ввода
Поля ввода (Edit Box или Input Field) позволяют пользователям предоставлять системе информацию любого объёма в виде комбинации букв и/или цифр.
Часто такие поля нужны для ввода уникальной информации — той, что принадлежит одному человеку или очень небольшой группе людей, например, Ф.И.О., паспортные данные, номер банковской карты и так далее.
Описывая логику работы поля ввода, системный аналитик должен не забыть обозначить дополнительные проверки со стороны системы в отношении вводимых значений (валидации или маски).
Валидация — это односложная проверка вводимого пользователем значения.
Есть несколько типов проверки:
- Валидация формата вводимого значения: для ввода Ф.И.О. должны использоваться только буквы (сыну Илона Маска, которого зовут X Æ A-12, будет тяжеловато зарегистрироваться), а для ввода номера телефона — только цифры и знак «+».
- Валидация количества символов в поле: например, не более 280 символов для поста в Twitter.
- Валидация совпадения вводимого значения с уже существующим: например, чтобы текущий пароль, который пользователь вводит для входа в личный кабинет, совпадал с последним указанным для этого имени паролем.
Маска ввода не только задаёт нужный формат для ввода информации в поле, но и корректирует данные, которые вводит пользователь, на унифицированное значение, принятое в рамках системы.
Например, артикул товара содержит три буквы и пять цифр. Маска для этого поля выглядит так: YY-99999. В качестве первых трёх знаков система позволяет пользователю ввести только буквы от A до Y (максимальное значение каждого символа — Y). Затем система автоматически проставляет тире (-) для единообразия всех получаемых значений и только после этого — пять цифр от 0 до 9 (максимальное значение каждого символа — 9).
Имя и фамилия, как правило, — уникальная информация, которую пользователю следует вводить вручную. Если информация не уникальна, можно облегчить пользователю задачу и подготовить варианты для выбора. В этом случае используется раскрывающийся список.
Раскрывающийся список
Раскрывающийся, или выпадающий, список (Drop-down) — отображает перечень имеющихся значений для выбора одного или нескольких значений из предложенного списка без возможности ввести что-то другое.
Системному аналитику стоит указывать требования к отображению значений в выпадающем списке. Например, нужно расположить значения по алфавиту, от наиболее популярного к наименее популярному или по другому логичному принципу.
Пользователю не всегда удобно только вводить значение или только выбирать из списка. Если в списке семь значений и более, лучше использовать другой элемент интерфейса — поле ввода с раскрывающимся списком.
Поле ввода с раскрывающимся списком
Поле ввода с раскрывающимся списком (Сombo box, комбинированный список) — сочетание выпадающего списка и однострочного поля ввода, которое позволяет пользователю ввести значение вручную или выбрать вариант из перечня.
Этот элемент интерфейса удобен тем, что пользователь начинает вводить значение, а система подбирает вариант из списка по вводимым символам.
Например: если пользователю нужно ввести название города, ему необязательно вбивать его целиком. Достаточно набрать первые буквы, после чего пользователю раскроется выпадающий список, из которого он сможет выбрать подходящий вариант. Это не только экономит время, но и снижает риск опечатки.
Чтобы предложить пользователю несколько опций, например дополнительные услуги доставки товара, можно обозначить их в виде флажков.
Флажок
Флажок (Checkbox) — позволяет выбрать сразу несколько значений из предложенного перечня.
Наиболее распространённый вариант для отображения флажка — небольшой квадрат, в котором можно проставить галочку, реже — крестик.
Если на сайт или в приложение нужно добавить функциональность, у которой есть только два состояния (включить и выключить), используется элемент «переключатель».
Переключатель
Переключатель (Switch, Toggle) — позволяет выбрать одно из двух состояний значения, чаще всего — вкл / выкл.
Если нужно получить только один вариант ответа из перечня предлагаемых значений, можно использовать радиокнопку.
Радиокнопка
Радиокнопка (Radio Button) — позволяет выбрать только одно значение из предложенного списка опций.
Важно учесть, что используемые для радиокнопки варианты должны быть взаимоисключающими.
В некоторых случаях пользователю нужно отфильтровать товары по стоимости, указав минимальную и максимальную цену для категории товаров в каталоге. Вместо того, чтобы просить пользователя вводить оба значения вручную, можно использовать ползунок.
Ползунок
Ползунок (Slider)— помогает выбрать необходимое значение из обозначенного отрезка минимального и максимального значений.
Часто ползунок используется вместе с полем ввода. То есть пользователю оставляют возможность ввести значения самостоятельно с помощью клавиатуры.
После того как пользователь прошёл регистрацию в интернет-магазине и выбрал необходимую категорию товаров, на экране отобразится перечень продукции. Аккуратно и ёмко отобразить его помогут элементы интерфейса, которые отвечают за вывод информации.
Механизмы вывода информации
Элементы интерфейса для вывода информации отображают определённый объём контента в удобном для восприятия виде.
Контейнер
Для визуального обозначения границ рабочего пространства используются специальные формы — контейнеры.
Контейнер (Container) — объединяет разные элементы интерфейса в блоки, отвечающие за достижение результата в рамках одной или нескольких функциональностей ПО.
Например, запустив браузер или приложение, система открывает пользователю форму, через которую будет настроена связь между пользователем и ПО.
Примеры контейнеров: карточки, карусель и окно.
Карточки (Card) — это небольшие прямоугольные или квадратные модули, которые содержат информацию в виде кнопок, текста, мультимедиа и прочее.
Они позволяют пользователю, например, узнать о доступных размерах, цветах, посмотреть рейтинг и добавить товар в корзину.
Карусель (Carousel) — позволяет отображать большое количество информации в виде набора (или картотеки). Пользователь может прокручивать картотеку, оставаясь в одной области экрана.
С помощью карусели можно отображать пользователю историю товаров, которые он просматривал ранее. Так ему будет проще вернуться к позициям, которые его заинтересовали.
Окно (Window) — основное пространство работы ПО, через которое осуществляется взаимодействие с пользователем.
В основном пространстве могут возникать всплывающие окна, которые содержат сообщение или специальное предложение для пользователя.
Примеры всплывающих окон — модальное окно (Modal Window) и поп-ап окно (Pop-up). Разница между ними в том, что поп-ап окно не является блокирующим — пользователь может не совершать действие во всплывающем окне и продолжать свою работу, а вот модальное окно проигнорировать не получится, потому что оно блокирует действия в основном окне, пока не будет реакции от пользователя.
Уведомления
Уведомления (Notification) — временные всплывающие сообщения, чаще всего информирующие пользователя о начале или завершении какого-либо процесса.
В отличие от модального и поп-ап окна уведомление отображается пользователю некоторое время и не требует от него действий. У уведомления лишь информационный характер.
Обратите внимание, что модальное окно авторизации появилось в самом центре формы и блокирует какие-либо действия пользователя на экране, пока он не введёт логин и пароль или не зарегистрируется. Поп-ап окно для связи с консультантом на сайте расположен сбоку и не закрывает собой пользовательский экран — пользователь может согласиться на помощь консультанта, а может закрыть поп-ап окно и продолжить выбор товаров самостоятельно. Уведомление о том, что пользовательский заказ оформлен, отображено в верхнем правом углу и через некоторое время исчезнет с экрана — пользователю даже не нужно с ним взаимодействовать.
Среди элементов интерфейса также используется аккордеон, который отображает большие объёмы информации на пользовательском экране.
Аккордеон
Аккордеон, или меню-гармошка (Accordion), — элемент интерфейса, состоящий из заголовка, скрываемого и открываемого контента (текст, изображение и так далее) в рамках этого заголовка.
Чаще всего аккордеон визуально представляют как треугольник, который в свёрнутом состоянии отображается вершиной вверх, а в развёрнутом — вершиной вниз. Заголовок аккордеона должен отражать основную суть информации внутри него. Например, кликнув на аккордеон «Описание», пользователь может подробнее ознакомиться с тем, для чего используется товар, из чего он состоит и так далее.
Помимо информации о товарах, важно сообщать пользователю об обработке действия, которое он совершил, особенно если процесс занимает какое-то время. В этом помогут индикаторы выполнения задачи.
Индикатор выполнения
Индикатор выполнения (Progress Bar) — помогает визуализировать (часто в процентах от 0 до 100) этап, на котором находится выполнение указания пользователя.
Другой вид индикатора выполнения задачи — прелоадер.
Прелоадер (Preloader) — анимированный элемент, который сообщает об обработке пользовательского запроса без каких либо деталей.
Выберите объект интерфейса, который подходит для реализации каждого из требований.
Пользователь может оставить развёрнутый отзыв о своём посещении
Поле ввода
Для рукописных текстов подойдёт объект интерфейса «Поле ввода».
Пользователю необходимо выбрать страну доставки из длинного списка стран
Комбинированный список
Большой перечень возможных ответов и исключение опечаток — для этого лучше использовать комбинированный список.
Пользователю необходимо указать свой пол в анкете на сайте знакомств
Радиокнопка
Когда вариантов для выбора немного и они взаимоисключающие, проще использовать радиокнопку.
Пользователь должен видеть постеры фильмов определённого жанра из картотеки, не прокручивая страницу вниз
Карусель
Для просмотра сразу нескольких постеров без прокрутки экрана вниз-вверх подойдёт карусель.
Необходимо сообщить пользователю, что при подтверждении действия все его данные будут удалены
Модальное окно
В данном случае важно, чтобы пользователь осознал последствия своего решения. Для этого необходимо сфокусировать его внимание на действии с помощью модального окна.
Пользователю необходимо сообщить о положительном или отрицательном результате изменения данных в личном кабинете
Уведомление
Уведомление позволит сообщить пользователю о результате изменения и исчезнет через некоторое время, чтобы не отвлекать его от дел.
Механизмы навигации
Если товаров на странице много, она превращается в бесконечно прокручиваемое полотно (можно сравнить это с многоэтажным торговым центром). Тогда нужно упростить пользователю передвижение. Сделать это можно с помощью элементов навигационной группы.
Дерево
Дерево (Tree) — иерархический список отображения структуры ПО, где есть главная вкладка (ствол) и дочерние вкладки (ветви).
При нажатии на главную вкладку в раскрывающемся списке пользователю отображаются дочерние вкладки. Часто дерево используется в хранилищах с большим объёмом данных. Это позволяет удобно перемещаться между папками и видеть всю структуру без обязательного перехода в разделы этой структуры.
Задачу объединения функциональностей ПО в логическую группу решает меню.
Меню
Меню (Menu) — группирует возможности ПО в логические блоки.
Добавление меню в интерфейс позволяет пользователю по названию группы примерно понять, какие функции в ней спрятаны.
Строка навигации
Строка навигации, или навигационная цепочка (Breadcrumb — дословно «хлебные крошки»), — элемент навигации по сайту, который показывает путь от главной до текущей страницы.
Обычно навигационная цепочка отображается в виде полосы в верхней части страницы сайта. Она удобна тем, что позволяет видеть начальную (главную) страницу, текущую (конечную) страницу и промежуточные этапы между ними, куда пользователь может вернуться, кликнув мышью.
Помимо навигационной цепочки, которая помогает увидеть, как пользователь оказался на текущей странице с товарами, у него должна быть возможность посмотреть все товары на этой странице. В этом поможет полоса прокрутки.
Полоса прокрутки
Полоса прокрутки (Scrollbar) — элемент передвижения по большому объёму информации в рамках одной формы.
Чаще всего полоса прокрутки располагается сбоку от блока с контентом.
Для компактного расположения всех товаров можно отображать весь ассортимент по страницам, где у каждой страницы свой порядковый номер. Для быстрого перемещения по страницам существует элемент интерфейса под названием «Пагинация».
Разбивка на страницы
Разбивка на страницы, или пагинация (Pagination), — отображение страниц сайта в виде ряда порядковых чисел.
Чаще всего страницы на сайте отображаются в виде порядковых чисел. Отображение начинается с той страницы, на которой сейчас находится пользователь, и заканчивается последней страницей — так пользователь легко может определить, сколько всего страниц на сайте, и переместиться на любую из них за пару кликов.
Соотнесите описание ключевой функции элемента навигации с его названием.
Вертикальное отображение главной и дочерних вкладок без обязательного перехода на них
Дерево
Для отображения общей структуры сайта или приложения удобно использовать элемент «Дерево».
Фильтрация контента в обозначенных пользователем границах
Ползунок
Чтобы задать минимальное желаемое значение и максимальное желаемое значение, используется ползунок.
Отображение пользовательского пути в виде строки, начиная от главной и заканчивая текущей страницей
Навигационная цепочка
Навигационная строка или цепочка показывает путь от главной страницы до текущей.
Отображение количества страниц с возможностью быстрого перехода на них
Пагинация
Для нумерации и отображения страниц используется пагинация.
Некоторые элементы интерфейса, кроме перемещения пользователя, обеспечивают запуск определённой логики.
Кнопки
Кнопка (Button) — позволяет пользователю взаимодействовать с формами на сайте. При нажатии происходит запуск логики, закреплённой за данной кнопкой.
У кнопки есть несколько атрибутов: форма, цвет и название.
Наиболее популярными форматами кнопок принято считать:
- классические кнопки,
- иконки,
- ссылки.
Классические кнопки имеют стандартную форму, интуитивно понятную логику цвета (зачастую схожую с логикой цветов светофора) и краткое название, описывающее действие при нажатии.
Ссылка (Link) — перенаправляет пользователя на другую форму, обозначенную в рамках заложенного маршрута.
У этого типа кнопок те же атрибуты: форма (текст), цвет (для рабочих ссылок общепринятый цвет — синий) и название, которое сообщает, на какую тему пользователь попадёт при нажатии.
Иконка (Icon) — графическое изображение, визуально упрощающее функциональность ПО.
Если есть возможность не читать, чтобы понять смысл, пользователь этим воспользуется. Поэтому заменив название кнопки на изображение, можно добиться большей лояльности пользователя к интерфейсу. Важный момент: изображение на иконке должно быть простым и однозначно отображающим суть кнопки. Чаще всего для иконок используются общепринятые интуитивно понятные изображения.
Выберите подходящую для каждой функции иконку.
Сохранить данные
Верно
У каждого элемента интерфейса есть своя функция, которая решает определённую задачу пользователя, а также помогает снизить количество неожиданных сценариев взаимодействия между пользователем и системой. На этапе анализа нужно следить за тем, чтобы пользователям было интуитивно понятно, на что нажать, чтобы достичь поставленной цели.
Подведём итоги
Элементы интерфейса — это составные части графического интерфейса пользователя, имеющие общепринятый вид и выполняющие определённую функцию.
По своему назначению элементы интерфейса делятся на три группы:
- Ввод данных — для указания какой-либо информации.
- Вывод данных — для отображения контента в удобном для пользователя виде.
- Навигация — для удобного перемещения по интерфейсу.
Если грамотно выбрать элемент интерфейса при проектировании, можно легко «подружить» пользователя с ПО и даже управлять его поведением на экране.
Запомнить элементы интерфейса, которые относятся к механизмам ввода, вывода и навигации вам поможет специальная памятка.
