Элементы интерфейса сайта: названия, виды и описание ui-компонентов пользовательского интерфейса веб-сайтов

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

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

Элементы сайта

У каждого компонента интерфейса — своя задача. При проектировании страниц нужно учитывать пользовательские привычки. Новаторство в этих вопросах может привести к сложностям с навигацией и пониманием функций некоторых элементов.

Шапка сайта

Это верхняя часть страницы, иногда ее называют хедер. Главная задача — навигационная: здесь располагается логотип компании, меню, контакты, важные с точки зрения конверсии кнопки.

Хедер Альфа Банка

Футер (подвал)

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

Футер Альфа Банка

Блоки с контентом

Содержательные элементы на сайте могут быть в виде:

• Текстов.
• Изображений.
• Схем с короткими описаниями.
• Видео.
• Анимации.

Контентный блок на странице издательства МИФ

Медиаплеер

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

Медиаплеер Кинопоиска

Слайдер

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

Слайдер с офферами на главной странице интернет-магазина Золотое Яблоко

Кнопки

Нажимая на кнопки, пользователь взаимодействует с интерфейсом. Их главная функция — управление. Клик на регистрацию открывает окно с формой, плюс в карточке товара — отправляет его в корзину и т.д.

Кнопки в карточке товара на Ozon

Другие кликабельные блоки

Помимо кнопок на сайте могут быть другие зоны, на которые можно нажимать. Примеры:

• по клику на вопрос в разделе FAQ разворачивается окно с ответом;
• нажатие на блок с названием услуги переводит на ее страницу с детальным описанием;
• баннер стимулирует переходы на раздел с рекламным предложением.

FAQ на Reg.ru

Поля форм

Поля позволяют посетителям отправить информацию в базу данных. Они используются в разных видах форм:

1. Регистрации/авторизации — создать логин и пароль.

2. Заявки — добавить имя, адрес, контакты.

3. Обратной связи — отправить отзыв или вопрос и т.д.

Пароль обычно скрывается точками или звёздочками. Поля могут быть с функцией автозаполнения.

Вход в личный кабинет Альфа Банка

Чек-боксы

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

Чек-боксы в фильтрах на Ozon

Радиокнопки в фильтрах на Ozon

Выпадающие списки

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

Меню в виде выпадающего списка на Кинопоиске

Аккордеон

Ещё один способ оформления многоуровневых списков. По клику на заголовок открываются скрытые подзаголовки.

Меню в формате аккордеона в интернет-магазине Золотое Яблоко

Всплывающие окна

Обычно на сайте используют три типа всплывающих окон:

• небольшой блок с целевым действием — например, подпиской на рассылку или регистрацией;
• модальное: закрывает большую часть экрана, мешая взаимодействие с основным контентом;
• подсказка, появляющаяся при нажатии или наведении на элемент.

Подсказка и всплывающее окно на Ozon

Поиск

Поисковая строка помогает найти нужный контент — либо с помощью внутренних инструментов сайта, либо благодаря готовым решениям от Яндекса или Google.

Поисковая строка Ozon

Навигационные компоненты

Правильная организация этих элементов влияет на пользовательский опыт. Чтобы аудитории было легко ориентироваться, используют:

1. Хлебные крошки, которые позволяют проследить путь от главной страницы до внутреннего подраздела.

2. Стрелка для быстрой прокрутки страницы наверх.

3. Пагинация — разделение контента, чтобы избежать бесконечной загрузки.

4. Кнопки «вперёд» и «назад».

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

Пагинация Coursera

Теги

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

Теги в карточках курсов Нетологии

Элементы состояний

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

Кликабельные и некликабельные кнопки в каталоге Кинопоиска

Чек-лист экспресс-проверки интерфейса

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

Экспресс-аудит включает в себя 5 пунктов:

1. Визуальная оценка: контрастность, цвета, видимость каждого компонента.

2. Расположение: все элементы можно быстро найти.

3. Простота восприятия: посетитель с первых секунд понимает, как он может выполнить нужные ему действия.

4. Кнопки и формы: корректность работы функций.

5. Адаптивность: сайт одинаково хорошо должен работать в разных веб-браузерах — на десктопе и на смартфонах.

Если нет времени на полноценное юзабилити тестирование, покажите user interface знакомым и попросите их выполнить какие-то задачи. Это поможет определить, как быстро человек, который впервые сталкивается с вашим UI, может разобраться в его функциях.

Узнайте, как увеличить конверсию на 41%!

Всего 3 шага и 5 минут вашего времени на пути к росту.

Выберите
ваш сайт

Укажите сайт и получите 7 точек роста.

Рассчитайте
стоимость

Контролируйте стоимость и состав услуги. Авторизуйтесь и выбирайте только то, что нужно вам.

Получите результат
и сопровождение

После оплаты и выполнения задания продолжайте получать регулярные советы и рост конверсий.

Понравилась статья? Жмите лайк или подписывайтесь на рассылку.

А также, поделитесь статьей с друзьями в соцсети.

Подписаться 4

Команда AskUsers

что это такое простыми словами, примеры

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

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

Присоединяйтесь к нашему Telegram-каналу!

• Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
• Для этого вам необходимо подписаться на наш канал.

Что такое интерфейс сайта

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

Интерфейс — это средство взаимодействия пользователя и веб-продукта (сайт, сервис, приложение) через браузер, монитор, смартфон, простыми словами это картинка, которую мы видим на экране монитора. 

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

Интерфейс интернет-магазина

При разработке сейчас стоит смотреть в первую очередь на мобильную версию сайта. Даже в сегменте B2B объем мобильного трафика превышает 50 %, а в некоторых нишах (детские товары, красота) может достигать 95–100 %.

Поэтому многие сейчас начинают разработку с мобильной версии ресурса.

Читайте также:

Мобильные версии сайтов 2023: интересные тенденции и неожиданные выводы

Основные элементы интерфейса

К интерфейсу относятся все элементы на мониторе пользователя. Давайте разберем подробнее те,  с которыми будут напрямую взаимодействовать пользователи.  

Кнопка

Позволяет выполнить определенное действие при нажатии. На примере, при нажатии кнопки «Купить» пользователь попадет в форму оформления заказа:

Кнопка на сайте

Чек-бокс

Позволяет выбрать сразу несколько элементов. Используется в фильтрах сайтов для настройки вывода информации.

Элемент «чек-бокс»

Выпадающий список (select)

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

Выпадающий список в свернутом положении

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

Выпадающий список на сайте

Аккордеон

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

Так выглядит аккордеон в меню

В развернутом виде аккордеон показывает скрытые пункты меню. Пользователь может открыть одно скрытое подменю или сразу все.

Развернутый аккордеон на сайте

Слайдер

Несколько изображений, сменяющих друг друга. Они обязательно имеют кнопки-стрелки для смены картинки. Часто применяется для показа разных объявлений на сайте. Картинки могут сменяться самостоятельно или после клика по слайдеру.

Слайдер на маркетплейсе

Контент

Блок с текстом или визуальной информацией на сайте. Мы видим изображение из текста статьи и фрагмент самого текста:

Блок с контентом на сайте

Читайте также:

Что такое контент: виды, форматы, критерии качества

Popup

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

Пример popup, предлагающего похожую статью

Модальное окно

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

Модальное окно на сайте оконной компании

Экран (блок)

Фрагмент контента, рассказывающий об одной вещи. Чаще всего делается с расчетом на один экран.

Блок контента на сайте

Страница

Структурная единица контента на сайте. Обладает отдельным адресом, обычно посвящена одной теме или товару/услуге.

Пример страницы на сайте

Хедер (Header)

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

Пример шапки сайта

Подвал (футер/footer)

Элемент располагается в самом низу страницы. Здесь можно разместить адрес компании, дополнительное меню, услуги и ссылки на важные страницы.  

Footer на сайте Kokoc.com: у нас он достаточно информативный

Превью

Уменьшенное изображение при нажатии на которое открывается полная картинка, блок контента или страница сайта.

Превью статей на сайте

Тултип (tooltip)

Всплывающая подсказка. В зависимости от настроек может появляться при наведении или нажатии на элемент.

Пример tooltip с объяснением технического параметра

Навигационные элементы

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

Пример навигационного меню

К навигационным элементам относятся и кнопки для возврата вверх страницы. Иногда эти кнопки привязываются не к верхней границе страницы, а например, к форме заказа.

Кнопка для быстрого возвращения пользователя вверх страницы

Еще один вариант навигационного элемента — дополнительное меню в сайдбаре. Позволяет пользователю видеть все доступные для перехода страницы.

Дополнительное меню в сайдбаре

Пагинация

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

Пример постраничной пагинации

Хлебные крошки

Разновидность пагинации. Фактически — это подборка статей по выбранному параметру. Размещаются чаще всего внизу страницы, для увеличения кликабельности рекомендуется делать с использованием превью.

Хлебные крошки на сайте

Читайте также:

Что такое CTR (кликабельность) и как ее улучшить

Поисковая строка

Позволяет производить поиск на сайте. Некоторые ресурсы используют поисковую выдачу «Яндекса» или Google.

Поисковая строка на сайте

Медиаплеер

Элемент, позволяющий просматривать видео непосредственно на сайте.

Медиаплеер, связанный с YouTube

Поле для ввода личных данных

Поле для ввода имени при регистрации или оставлении заявки:

Поле для заполнения личных данных

Маска для номера телефона

Если пользователю предлагается ввести номер телефона, используется «маска»: 

Пример маски для номера телефона на сайте

Форма для ввода пароля

Обычно символы пароля сразу скрываются точками с целью безопасности данных.

Ввод пароля на сайте

Форма для входа на сайте обычно включает в себя логин или электронную почту и поле для ввода пароля. Современные сайты предлагают возможность входа через социальные сети или аккаунты Google и «Яндекса».

Форма для входа на сайте

Элемент, показывающий процесс загрузки

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

Загрузка на сайте

Теги

Позволяют определить, к какой категории или рубрике относится страница. Могут использоваться для настройки пагинации. Размещаются или перед основным контентом или после.

Теги на сайте

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

Как сделать качественный интерфейс

Фактически интерфейс — это часть комплекса UX/UI.  

UX — пользовательский опыт, который получает пользователь при взаимодействии с сайтом или приложением. Сейчас есть тренд делать ресурсы таким образом, чтобы они формировали положительный пользовательский опыт.

UI — пользовательский интерфейс. Подразумевает создание интерфейсов с учетом UX. Технически сюда относятся все элементы, с которыми взаимодействует пользователь: кнопки, контент, плееры и т. д. 

Говоря о качественном интерфейсе, мы подразумеваем ресурс, имеющий элементы управления, созданные с учетом пользовательского опыта. К сожалению, не всегда получается сделать интерфейс, идеально подходящий для пользователей. Зачастую попытка заканчивается так, как на картинке ниже:

Так работает интерфейс, созданный без учета пользовательского опыта

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

В некоторых случаях самый простой элемент может значительно снизить конверсию. На скриншоте ниже показана шапка одного лендинга:

Пример ошибки в размещении элементов интерфейса

Изначально он почему-то не давал регистраций в клуб. Причина была найдена после просмотра «Вебвизора». Обратите внимание на кнопку «Вход здесь»: люди видели ее при попадании на сайт и кликали по ней. Их сразу перебрасывало на форму оплаты, и они не понимали, что к чему и уходили с сайта.

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

Читайте также:

Как работать с «Вебвизором» Яндекс.Метрики: инструкция для новичков

Бывают и более простые ошибки. К примеру, может не работать кнопка заказа или она ведет на тестовую форму, и заявки не уходят. 

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

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

1. Проверка тестировщиком. Отдаем интерфейс человеку, который профессионально проверяет работу всех элементов интерфейса. Устраняем все выявленные недочеты.
2. Beta-тест. Запускаем ограниченный трафик на сайт или приложение и смотрим, как реальные пользователи взаимодействуют с элементами ресурса.

Читайте также:

A/B тестирование: что это такое, этапы и инструменты

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

Примеры крутых интерфейсов

Чтобы понимать, как отличить хороший интерфейс, давайте посмотрим на несколько вариантов.

Приложение «ВКонтакте»

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

Приложение в «ВКонтакте»

Читайте также:

Настройка таргетированной рекламы ВКонтакте в 2023 году

Сайт магазина «Связной»

На главной странице разработчики умудрились разместить большое число информации и навигационных элементов. Сделано все максимально удобно.

Главная магазина «Связной»

Если перейти в каталог «Связного», можно увидеть шикарно структурированное меню. Прямо из меню можно найти почти все необходимое.

Меню каталога «Связной»

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

Онлайн-кинотеатр «Кинопоиск»

Здесь очень хорошо подобраны шрифты и цвета. Пользователям приятно находиться на странице, а это улучшает UX.

Пример удачного визуального решения: «Кинопоиск»

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

Технический аудит сайта

• Наличие дублей страниц, безопасность, корректность всех технических параметров: переадресаций, robots.txt, sitemap.xml скорость загрузки и др.
• Техническая оптимизация — один из основных этапов в продвижении.

Примеры неудачных интерфейсов

Помимо хороших и удобных сайтов существуют и не самые удачные примеры. Рассмотрим несколько таких примеров.

Маркетплейс «Озон»

Разработчики заявляли, что проводили большое число тестов, добиваясь максимальной конверсии.

Возможно это действительно так, но если перейти в «Расширенные фильтры», можно увидеть только информацию, которая стандартна для этой группы товаров. В то же время многих важных параметров просто нет — пользователя это может запутать.

Неудачный пример фильтров в маркетплейсе

Шахматный сайт Chess24

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

Пример с неудачной навигацией

Но бывает, что сайт имеет неудачный по всем статьям инструментарий взаимодействия с пользователями.

Оптовая компания «Форс»

Здесь не очень удачный дизайн, но это еще не все. Меню запутанное, что делает использование ресурса неудобным.

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

Пример коммерческого сайта с неудачным интерфейсом

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

Читайте также:

Что такое поведенческие факторы сайта в Яндексе и почему они важны

Заключение. Чек-лист хорошего интерфейса

1. Оценка основных элементов. Оцениваем, где находятся все элементы, с которыми пользователь будет взаимодействовать. Они должны располагаться удобно, а также не случайно нажиматься.
2. Понимание того, что надо сделать. Если нужно кликнуть на кнопку, посетитель должен это понимать. Если требуется скроллить страницу, нужны соответствующие подсказки.
3. Проверка работы форм и кнопок. Пользователя должно перебрасывать в нужное место, и там тоже все должно работать.
4. Просмотр ресурса в разных разрешениях. Сначала на мобильном устройстве, потом на планшете и на десктопе: везде все должно работать. 
5. Оценка визуального отображения страниц. Не должно быть «вырвиглазных» цветов и шрифтов.
6. Демонстрация сайта или приложения знакомым. Попросите их что-то сделать на странице: это позволит понять, действительно ли интерфейс удобен для пользователей.

Все перечисленное позволит вам сделать удобный инструментарий взаимодействия системы с пользователями. Это даст дополнительные преимущества при продвижении вашего бизнеса.

Проектирование и продвижение сайтов с продуманными интерфейсами

Сайт

Телефон

элементов пользовательского интерфейса | Usability.gov

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

Элементы интерфейса включают, но не ограничиваются:

• Элементы управления вводом : флажки, переключатели, раскрывающиеся списки, списки, кнопки, переключатели, текстовые поля, поле даты
• Навигационные компоненты : навигационная цепочка, ползунок, поле поиска, нумерация страниц, ползунок, теги, значки
• Информационные компоненты : всплывающие подсказки, значки, индикатор выполнения, уведомления, окна сообщений, модальные окна
• Контейнеры : аккордеон

Элементы управления вводом

Элемент	Описание	Примеры
Флажки	Флажки позволяют пользователю выбрать один или несколько вариантов из набора. Обычно лучше представить флажки в виде вертикального списка. Более одного столбца также допустимо, если список достаточно длинный, чтобы его можно было прокручивать, или если может потребоваться сравнение терминов.
Радиокнопки	Радиокнопки используются, чтобы позволить пользователям выбирать один элемент за раз.
Выпадающие списки	Выпадающие списки позволяют пользователям выбирать по одному элементу за раз, аналогично радиокнопкам, но они более компактны и позволяют сэкономить место. Рассмотрите возможность добавления текста в поле, например «Выберите один», чтобы помочь пользователю распознать необходимое действие.
Списки	Списки, как и флажки, позволяют пользователям выбирать несколько элементов одновременно, но они более компактны и при необходимости могут поддерживать более длинный список параметров.
Кнопки	Кнопка указывает действие при касании и обычно помечается текстом, значком или и тем, и другим.
Кнопка раскрывающегося списка	Кнопка раскрывающегося списка состоит из кнопки, при нажатии которой отображается раскрывающийся список взаимоисключающих элементов.
Тумблеры	Кнопка-переключатель позволяет пользователю изменять настройку между двумя состояниями. Они наиболее эффективны, когда состояния включения/выключения визуально различимы.
Текстовые поля	Текстовые поля позволяют пользователям вводить текст. Он может разрешать либо одну строку, либо несколько строк текста.
Средства выбора даты и времени	Средство выбора даты позволяет пользователям выбирать дату и/или время. С помощью средства выбора информация последовательно форматируется и вводится в систему.

Компоненты навигации

Элемент	Описание	Примеры
Поле поиска	Окно поиска позволяет пользователям вводить ключевое слово или фразу (запрос) и отправлять их для поиска в индексе с целью получения наиболее релевантных результатов. Обычно поля поиска представляют собой однострочные текстовые поля и часто сопровождаются кнопкой поиска.
Панировочные сухари	Хлебные крошки позволяют пользователям определять свое текущее местоположение в системе, предоставляя интерактивную цепочку страниц, по которым можно перемещаться.
Пагинация	Разбивка на страницы разделяет контент между страницами и позволяет пользователям пропускать страницы или просматривать контент по порядку.
Теги	Теги позволяют пользователям находить контент в той же категории. Некоторые системы тегов также позволяют пользователям применять свои собственные теги к контенту, вводя их в систему.
Слайдеры	Ползунок, также известный как трекбар, позволяет пользователям устанавливать или корректировать значение. Когда пользователь изменяет значение, это не меняет формат интерфейса или другую информацию на экране.
Иконки	Значок представляет собой упрощенное изображение, служащее интуитивно понятным символом, помогающим пользователям ориентироваться в системе. Как правило, значки имеют гиперссылки.
Карусель изображений	Карусели изображений позволяют пользователям просматривать набор элементов и выбирать один из них, если они того пожелают. Как правило, изображения имеют гиперссылки.

Информационные компоненты

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

Контейнеры

 

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

Дополнительная информация

• Джесси Джеймс Гарретт, Элементы взаимодействия с пользователем: ориентированный на пользователя дизайн для Интернета и не только (2-е издание)
• Информация о пользовательском интерфейсе для разработчиков Android 

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

Элементы пользовательского интерфейса (UI) — это части, которые мы используем для создания приложений или веб-сайтов. Они добавляют интерактивности в пользовательский интерфейс, предоставляя пользователю точки соприкосновения, когда он перемещается по нему; подумайте о кнопках, полосах прокрутки, пунктах меню и флажках.

Как дизайнер пользовательского интерфейса (UI), вы будете использовать элементы пользовательского интерфейса для создания визуального языка и обеспечения единообразия вашего продукта, делая его удобным для пользователя и простым в навигации, не слишком задумываясь со стороны пользователя.

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

1. Введение в элементы пользовательского интерфейса
2. Полный глоссарий элементов пользовательского интерфейса (с примерами)
3. Часто задаваемые вопросы

Готовы? Пойдем.

Элементы пользовательского интерфейса: введение

Элементы пользовательского интерфейса обычно попадают в одну из следующих четырех категорий:

1. Управления ввода
2. навигационные компоненты
3. Информационные компоненты
4. Контейнеры

Входные элементы управления

Входные элементы управления

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

Компоненты навигации помогают пользователям перемещаться по продукту или веб-сайту. Общие навигационные компоненты включают панели вкладок на устройстве iOS и меню-гамбургер на Android.

Информационные компоненты обмениваются информацией с пользователями.

Контейнеры содержат связанное содержимое вместе.

Знай свои элементы пользовательского интерфейса: полный глоссарий

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

Знание своих элементов пользовательского интерфейса позволит вам распознать возможности их использования в ваших проектах, помогая вам создавать понятные и простые интерфейсы.

Давайте рассмотрим наиболее распространенные элементы пользовательского интерфейса, с которыми вы столкнетесь.

1. Аккордеон

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

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

Изображение Алекса Локвуда

3. Хлебные крошки

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

Изображение от Sharon Olorunniwo

4. Кнопка

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

Изображение от Gal Shir

5. Карточка

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

Image by Crank

6. Карусель

Карусели позволяют пользователям просматривать наборы контента, например изображения или карточки, часто гиперссылки на другой контент или источники. Самым большим преимуществом использования каруселей в дизайне пользовательского интерфейса является то, что они позволяют нескольким элементам контента занимать одну и ту же область пространства на странице или экране. Если вы решите использовать карусели, обязательно следуйте этим рекомендациям, изложенным Nielsen Norman Group.

7. Флажок

В дизайне пользовательского интерфейса флажок отображается точно так, как следует из названия: маленький квадрат на экране, который пользователь может установить или снять. Флажок позволяет пользователям выбирать один из нескольких вариантов из списка, при этом каждый флажок работает отдельно. Установка флажка помечает его маленькой галочкой! Некоторые распространенные варианты использования этого элемента включают формы и базы данных.

Изображение от Shakuro

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

Дёнер-меню — это разновидность более известного гамбургер-меню. В то время как меню гамбургера состоит из трех строк одинаковой длины, расположенных одна над другой, меню донера состоит из вертикальной стопки из трех строк разной длины: длинной строки, более короткой строки под ней и еще более короткой строки под ней. что! Этот элемент пользовательского интерфейса представляет собой группу фильтров.

10. Выпадающий список

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

Изображение от Shakuro

11. Feed

Вот неизбежный! Ленты отображают действия пользователей в хронологическом порядке. Содержание варьируется и может варьироваться от простого текста до изображений и видео. Подумайте о Твиттере!

12.

Форма

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

Изображение от girithaara

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

14. Иконка

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

Изображение Эдди Лобановского

15. Поле ввода

Поля ввода — это просто место, где пользователи могут вводить содержимое в систему. Они не ограничиваются только формами — панели поиска также являются полями ввода.

Мы рассмотрели меню гамбургеров и меню дёнера: теперь перейдем к другому (несъедобному!) элементу пользовательского интерфейса: меню кебаба. Меню кебаба, состоящее из трех вертикальных точек, представляет собой набор сгруппированных опций.

17. Погрузчик

Загрузчики могут принимать самые разные формы — дизайнерам нравится творчески с ними работать. Загрузчики предназначены для того, чтобы пользователи знали, что система завершает действие в фоновом режиме и должна ждать.

Изображение от Kickass

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

19. Модальное окно

Модальное окно — это небольшое окно, содержащее содержимое или сообщение, которое требует взаимодействия с ним, прежде чем вы сможете закрыть его и вернуться к своему потоку.

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

Изображение Джошуа Крона

20. Уведомление

Сегодня вы найдете эти маленькие красные точки повсюду на интерфейсах. Они сообщают нам, что есть что-то новое, например, сообщение, чтобы мы могли проверить.

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

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

22. Средство выбора

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

Изображение Эдоардо Меркати

23. Индикатор выполнения

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

24. Радиокнопки

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

Изображение Олега Фролова

25. Поле поиска

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

Боковая панель отображает группу навигационных действий или содержимого буквально сбоку страницы. Он может быть виден или спрятан.

27. Ползунки

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

28. Степпер

Степперы — это двухсегментные элементы управления, которые также позволяют пользователям изменять значение. Однако, в отличие от ползунков, они позволяют пользователям изменять значение только с предопределенным приращением.

29. Тег

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

30. Панель вкладок

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

Изображение Hoang Nguyen

31. Подсказка

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

32. Тумблер

Думайте о тумблере как о переключателях включения и выключения. Они позволяют нам делать именно это: включать или выключать что-то.

Видите недостающий элемент? Не стесняйтесь комментировать ниже!

Если вы хотите узнать больше о дизайне пользовательского интерфейса, посмотрите это видео:

Если вам понравилась эта статья, вам также могут быть интересны следующие статьи:

• Что такое гештальт Принципы? Руководство для дизайнеров пользовательского интерфейса и пользовательского интерфейса
• Как разработать удобный поиск
• 8 Веб-сайты с действительно потрясающим дизайном пользовательского интерфейса
• 5 Общие вопросы, которые мне задают как дизайнеру пользовательского интерфейса

1. Что такое элементы пользовательского интерфейса?

Элементы пользовательского интерфейса (UI) — это части, которые мы используем для создания приложений или веб-сайтов. Они добавляют интерактивности в пользовательский интерфейс, предоставляя пользователю точки соприкосновения, когда он перемещается по нему; подумайте о кнопках, полосах прокрутки, пунктах меню и флажках.

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

2. Какие есть примеры элементов пользовательского интерфейса?

Общие элементы пользовательского интерфейса включают:

хлебные крошки
флажки
раскрывающиеся списки
формы
значки
поля ввода
уведомления

и многое другое.

3. Каковы ключевые элементы дизайна пользовательского интерфейса?

Элементы пользовательского интерфейса обычно относятся к одной из следующих четырех категорий:

Элементы управления вводом позволяют пользователям вводить информацию в систему.