Только начинаете свой путь в дизайне или вы — заказчик, который хочет быть компетентным в теме UI/UX? Хотите знать, как сделать простой и интуитивно понятный сайт, который будет хорошо выполнять свою функцию? Эта статья для вас! В ней мы рассмотрим базовые подходы к интуитивно понятному интерфейсу, которые придерживаются многие дизайнеры, на наглядных примерах UI-элементов.
![](https://static.tildacdn.com/tild6662-6363-4330-a264-376135663237/image.png)
Для начала разберемся, что такое интуитивно понятный интерфейс — это интерфейс, который работает именно так, как ожидает от него пользователь. Если сайт выполнен правильно, пользователь не будет прерываться и задумываться, прежде чем нажать кнопку, и будет идти по заранее продуманному для него пути к конечной цели сайта: подписке, покупке, регистрации и т.д.
Например, когда пользователь видит текст, выделенный синим цветом — он понимает, что перед ним ссылка. Таким образом, мы не заставляем пользователя думать: он уже, скорее всего, встречал такой элемент на других сайтах и знает, как взаимодействовать с ним.
Иногда ссылки выделяют другим цветом, подчеркивают или вообще заставляют работать по другому принципу. Такие эксперименты могут позволить себе лишь крупные корпорации, которые имеют возможности и средства проводить тесты. Но большинство использует базовые оптимальные практики, позволяющие приблизится к интуитивно понятному интерфейсу без вложения больших усилий.
Рассмотрим некоторые базовые UI-элементы на примерах.
Кликабельные части текста (ссылки на другие страницы) должны быть визуально отмечены. Обычно ссылки должны быть подчеркнуты и иметь свой цвет на сайте. Как мы уже упоминали, чаще всего для ссылок используют синий цвет. Так же часто используют базовый цвет (цвет бренда), который сочетается с главными кнопками и другими важными элементами. Не следует подчеркивать текст, если он не является ссылкой — это может запутать пользователя, вызывая желание кликнуть на текст.
Например, когда пользователь видит текст, выделенный синим цветом — он понимает, что перед ним ссылка. Таким образом, мы не заставляем пользователя думать: он уже, скорее всего, встречал такой элемент на других сайтах и знает, как взаимодействовать с ним.
Иногда ссылки выделяют другим цветом, подчеркивают или вообще заставляют работать по другому принципу. Такие эксперименты могут позволить себе лишь крупные корпорации, которые имеют возможности и средства проводить тесты. Но большинство использует базовые оптимальные практики, позволяющие приблизится к интуитивно понятному интерфейсу без вложения больших усилий.
Рассмотрим некоторые базовые UI-элементы на примерах.
Кликабельные части текста (ссылки на другие страницы) должны быть визуально отмечены. Обычно ссылки должны быть подчеркнуты и иметь свой цвет на сайте. Как мы уже упоминали, чаще всего для ссылок используют синий цвет. Так же часто используют базовый цвет (цвет бренда), который сочетается с главными кнопками и другими важными элементами. Не следует подчеркивать текст, если он не является ссылкой — это может запутать пользователя, вызывая желание кликнуть на текст.
![](https://static.tildacdn.com/tild3038-3636-4339-b665-663234623136/photo.png)
Если ссылки открывают модальные или диалоговые окна, показывают подсказки, которые открываются и закрываются по клику — рекомендуется использовать пунктирное подчеркивание. Пунктирная линия дает знать, что пользователь останется на странице, но произойдет всплытие какого-то либо вспомогательного окна.
![](https://static.tildacdn.com/tild3637-3731-4333-b634-666435363838/photo.png)
Важно понимать разницу между элементами radio и checkbox. Radio и checkbox — это элементы выбора. Набор элементов radio позволяет пользователю выбрать одно значение из предоставленного списка, в то время как checkbox позволяет пользователю выбирать несколько значений из списка. Если перепутать элементы, пользователь будет пытаться выбрать несколько значений, где это невозможно, или наоборот.
![](https://static.tildacdn.com/tild3634-3561-4136-b066-653535313062/photo.png)
Часто бывают случаи, когда интерфейсу нужен элемент управления, например, чтобы что-то включить/выключить в настройках. Для вариантов состояния, когда есть только два положения "вкл" или "выкл", рекомендуется использовать переключатель (switch). Так пользователю будет понятно, каково текущее и следующее состояние. Конечно, в разного рода видео/аудио-плеерах можно увидеть иконку звука, которая переключается на другую. Но если для вашей кнопки включения/выключения сложно найти соответствующую иконку — стоит использовать switch.
![](https://static.tildacdn.com/tild6665-6163-4332-b638-616161353963/photo.png)
При всей интуитивности кнопок нельзя забывать и про подсказки. В дизайне существует негласный закон обратной связи: если она есть — пользователь чувствует себя увереннее, а значит интерфейс должен "общаться" с пользователем. Когда вы добавляете иконку в дизайн, то, в первую очередь, вы определяете ее ассоциацию для себя. Но эта ассоциация может не совпадать с мнением пользователя — поэтому необходимо добавлять подсказки, появляющиеся при наведении мыши. Они помогут пользователю понять назначение иконки, описывая действие, которое произойдет при клике на такой элемент.
![](https://static.tildacdn.com/tild3139-3539-4132-b761-323064303765/photo.png)
Кнопки — один из самых повторяемых элементов в дизайне. Их используют для выполнения определенных действий и задач: как переход на другую страницу, совершение действия или подтверждение операций. Кнопки должны быть просты и понятны, чтобы пользователи могли без промедления выполнять конкретные действия.
Чтобы считывать обратную связь от дизайна, существуют состояния. Каждое состояние кнопки должно быть легко отличимо от остальных и давать представление о дальнейшем поведении элемента. Но при этом не стоит менять кнопку слишком радикально: это создает ненужный визуальный шум.
Чтобы считывать обратную связь от дизайна, существуют состояния. Каждое состояние кнопки должно быть легко отличимо от остальных и давать представление о дальнейшем поведении элемента. Но при этом не стоит менять кнопку слишком радикально: это создает ненужный визуальный шум.
![](https://static.tildacdn.com/tild3563-6532-4531-b564-343336626332/photo.png)
Когда процесс выполнения действия пользователем требует времени, рекомендуется отображать индикатор загрузки. Увидев такой индикатор, пользователь поймет, что процесс запущен, но нужно подождать. В ином случае, пользователь может повторно кликнуть на кнопку, решив, что "промазал" или что-то случилось. Чтобы избежать нежелательных побочных эффектов от повторного нажатия, следует не только отображать индикатор загрузки, но и блокировать кнопку.
![](https://static.tildacdn.com/tild6530-6262-4134-b939-333730306432/photo.png)
Добавляйте иконку в кнопку слева. Конечно, всё зависит от контекста, и расположение может быть разным. Однако чаще всего мы читаем слева-направо, и, располагая иконку слева, мы помогаем пользователям считывать контекст быстрее. Визуально ориентируясь на иконку, пользователь может сразу предположить суть этой кнопки, еще не дочитав текст.
![](https://static.tildacdn.com/tild3264-3331-4733-a233-633436343037/photo.png)
Не стоит добавлять в кнопки несколько иконок. Это усилит визуальный шум и усложнит считывание смысла этой кнопки.
![](https://static.tildacdn.com/tild6337-3932-4463-a434-663233303130/photo.png)
Пользовательский опыт почти всегда ухудшается из-за любых нелогичных различий в визуальных элементах между экранами. Поддерживайте согласованность и стандартизируйте элементы, чтобы пользователям не приходилось изучать новые наборы инструментов для каждой задачи.
![](https://static.tildacdn.com/tild6331-3136-4030-a335-623864623734/photo.png)
Наличие кнопок с четким описанием помогает пользователям принимать решения без ошибок. Не менее важно и их цветовое кодирование. Например, красный цвет для деструктивных действий предупреждает пользователей и действует как знак "внимание", а главный цвет приложения — как приоритетный выбор.
![](https://static.tildacdn.com/tild3262-6461-4138-b033-643663663065/photo.png)
Необходимо использовать иерархию кнопок, чтобы помочь пользователю сделать правильный выбор. Кнопки без иерархии вредят визуальному представлению и затрудняют принятие решений пользователем.
![](https://static.tildacdn.com/tild3266-6565-4535-b735-303936613838/photo.png)
Следуя этим правилам, вы сможете избежать неоптимальных трудозатрат на последующий редизайн. Но что важнее — грамотный интерфейс принесет вам довольных пользователей и новых клиентов. Пользователь, не разобравшись с сайтом, скорее уйдет к конкурентам, чем тот, которому было легко и просто совершить покупку, следуя подсказкам.
Дизайн интерфейса — очень деликатная и ответственная задача. Перечисленные правила помогут справиться с ней лучше и не переучивать клиентов пользоваться вашими продуктами. Если все же есть желание поэкспериментировать — проведите тесты, чтобы определить, как изменения привычного дизайна повлияют на конечный результат.
Дизайн интерфейса — очень деликатная и ответственная задача. Перечисленные правила помогут справиться с ней лучше и не переучивать клиентов пользоваться вашими продуктами. Если все же есть желание поэкспериментировать — проведите тесты, чтобы определить, как изменения привычного дизайна повлияют на конечный результат.