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

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

Илья Бирман, арт-директор «Дизайн-бюро Артёма Горбунова», в «Советах», а затем и своей книге «Пользовательский интерфейс» очень доходчиво сформулировал принципы, которым стоит следовать при написании текста для любого интерфейса. Поскольку я постоянно сталкиваюсь с ужасно написанными формами, нелогичными кнопками и другими интерфейсными ошибками, я решил сделать выжимку из этих принципов, о том, какие должны быть элементы пользовательского интерфейса.

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

Кнопка

Функция	Часть речи	Отвечает на вопрос
Передача команды	Глагол совершенного вида в начальной форме	Что сделать?

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

Да

Нет

Функция	Часть речи	Отвечает на вопрос
Смена статуса	Существительное Прилагательное Причастие Наречие Глагол в личной форме	Это что? какое? как?

Примеры хороших кнопок для смены статуса

Функция	Часть речи	Отвечает на вопрос
Навигация	Обычно существительное в именительном падеже	Что?

Примеры хороших кнопок навигации

Кнопки, связанные с направлением, — «Назад — Вперёд», «Ранее — Позднее» — лучше заменить стрелками ← →. А лучше — написать, куда именно «вперёд» или «назад».

Не используйте «Дополнительно» или «Ещё» в качестве названий для кнопок. Они не несут информации о том, что произойдёт после нажатия.

Ссылка

Функция	Часть речи	Отвечает на вопрос
Навигация	Любая, но должна отвечать на вопрос	Что?

Если текст ссылки не отвечает на вопрос «Что?», то есть не показывает, что будет открыто при клике, у пользователя могут сформироваться неправильные ожидания.

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

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

Да

Нет

Лучше, если в ссылке будет два-три слова. Если ссылкой хочется сделать больше слов, нужно отредактировать текст так, чтобы слова были рядом.

Иконка

Функция	Часть речи	Отвечает на вопрос
Навигация	Существительное в именительном падеже	Что?

Подпись иконки должна отвечать на вопрос «Что?» — то, что будет открыто, показано, запущено.

Да

Нет

Иконке не нужен глагол, если только он не часть названия программы

Вкладка

Функция	Часть речи	Отвечает на вопрос
Навигация	Существительное в именительном падеже	Что?

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

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

Чек-бокс

Действие	Часть речи	Отвечает на вопросы
Выбор объекта	Существительное Местоимение Причастие	Использовать что? Сделать с чем? кому?

Действие	Часть речи	Отвечает на вопросы
Выбор свойства	Существительное Местоимение Прилагательное Наречие Числительное Глагол в начальной форме	Какой, чей, который? Кто или что именно?

Действие	Часть речи	Отвечает на вопросы
Уточнение действия	Наречие Деепричастие Существительное в творительном падеже Существительное в косвенном падеже с предлогом	Сделать как? где? когда? Использовать что? Сделать с чем? кому?

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

Радиокнопка, переключатель, выпадающий список

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

Действие	Часть речи	Отвечает на вопросы
Выбор объекта	Существительное Местоимение Причастие	Использовать что? Сделать с чем? кому? Кто именно?

Действие	Часть речи	Отвечает на вопросы
Выбор свойства	Существительное Местоимение Прилагательное Наречие Числительное Глагол в начальной форме	Какой? чей? который? Кто или что именно?

В отличие от чек-боксов, радиокнопки всегда образуют группы — выбор из единственного варианта не имеет смысла.

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

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

Действие	Часть речи	Отвечает на вопросы
Уточнение действия	Наречие Деепричастие Существительное в творительном падеже Существительное в косвенном падеже с предлогом	Сделать как? где? когда? Использовать что? Сделать с чем? кому?

Ползунок

Действие	Часть речи	Отвечает на вопросы
Выбор свойства	Существительное Прилагательное Наречие Числительное Глагол в начальной форме	Какой? чей? который? Кто или что именно?

Действие	Часть речи	Отвечает на вопросы
Уточнение действия	Наречие	Сделать как? где? когда?

Поле ввода

Действие	Часть речи	Отвечает на вопросы
Выбор Уточнение Ввод данных	Любая

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопка

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

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

Чек-бокс

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

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

Выпадающий список (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 тестирование: что это такое, этапы и инструменты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое поведенческие факторы и почему они важны для SEO в 2022

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

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

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

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

Сайт

Телефон

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

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

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

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

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

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

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

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

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

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

Контейнеры

 

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

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

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

Что нужно знать?

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

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

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

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

Выйдите на новый уровень прототипирования

Создавайте интерактивные компоненты из системы дизайна вашей команды.

Содержание

• Что такое элементы пользовательского интерфейса?
• Почему они важны?
• 3 типа элементов пользовательского интерфейса
• Примеры элементов ввода
• Примеры элементов вывода
• Общие вспомогательные элементы пользовательского интерфейса
• Прототип с интерактивными элементами пользовательского интерфейса в UXPin

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

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

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

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

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

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

• Список: Позволяет выбрать несколько стран.
• Раскрывающийся список: Обычно позволяет выбрать один элемент.
• Флажок: Альтернативный способ выбора ни одной, одной или нескольких стран.
• Радио: Позволяет выбрать один элемент.

Итак, что бы вы выбрали?

Есть ли что-нибудь еще более ценное? Можете ли вы использовать свои собственные радиокнопки?

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

Заинтересованы? Давайте начнем!

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

В идеале мы можем сгруппировать элементы пользовательского интерфейса в 3 основные категории.

1. Элементы ввода
2. Элементы вывода
3. Вспомогательные элементы

Тип 1:

Элементы ввода 9 Иногда они также являются частью процесса проверки ввода. Некоторые из наиболее часто используемых элементов ввода включают:

• Раскрывающиеся списки
• Поле со списком
• Кнопки
• Переключатели
• Поля текста/пароля
• Выбор даты
• Флажки
• Радиокнопки
• Диалоги подтверждения

Источник: Dribbble.com

Тип 2:

Элементы вывода

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

Источник: Google Doc

Тип 3:

Вспомогательные элементы

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

• Уведомления
• Уведомления
• .

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

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

  Источник: UXPin

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

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

  Источник: Toptal

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

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

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

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

  1.

  Флажки

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

  Источник: Github.com

  2.

  Раскрывающиеся списки

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

  Источник: Stackoverflow

  3.

  Поля со списком

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

  Источник: mdbootstrap

  4.

  Кнопки

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

  Источник: Evergreen UI

  5. Переключатели

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

  Источник: Youtube

  6. Текстовые поля и поля для пароля

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

  Источник: Shopify.com

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

  Средство выбора даты позволяет пользователям выбирать дату и/или время. С помощью встроенного средства выбора даты на платформе в систему отправляется согласованное значение даты.

  Источник: Material Design

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

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

  Источник: UXPin

  9. Диалоги подтверждения

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

  4 Общие элементы вывода

  1.

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

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

  Источник: material-ui.com

  2. Элемент пользовательского интерфейса Toast

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

  Разница между «Предупреждением» и «Тостом» заключается в том, что первое не отключается, а второе — через определенное время.

  Источник: Evergreen UI

  3. Значок

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

  4. Диаграммы

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

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

  Различные типы диаграмм. Источник: material.io

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

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

  1. Меню навигации

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

  Источник: UXPin

  2. Список ссылок

  Как следует из названия, список ссылок состоит из ссылок. Боковая панель со списком категорий — хороший пример этого. Ссылки могут быть как внутренними, так и внешними.

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

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

  4. Поля поиска

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

  Источник: Браузер Google Chrome

  5. Разбиение на страницы

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

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

  1. Подсказки

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

  2. Значки

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

  Источник: Dribbble

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

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

  Источник: Tenor

  4. Уведомления

  Это индикатор обновления, который объявляет что-то новое для проверки пользователем. Обычно показывает завершение задачи, новые элементы для проверки и т. д.

  5. Окна сообщений

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

  Источник: Evergreen UI

  6. Модальные окна

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

  Источник: Evergreen UI
  Группа и контейнеры

  1. Виджеты

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

  Источник: Dribbble.com

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

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

  Источник: Material.io

  3. Боковые панели

  Боковые панели также содержат другие группы элементов и компонентов. Но это можно переключать между коллапсом и видимым состоянием.