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

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

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

1. Стремитесь к последовательности и структуре

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

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

Вот несколько вещей, которые вы можете сделать, чтобы обеспечить согласованность:

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

2. Определите, как люди используют ваш интерфейс

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

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

Примеры прямого взаимодействия

  • Перетащите элемент кончиком пальца
  • Проведение карты
  • Нажатие кнопки

Примеры косвенных взаимодействий

  • Использование сочетаний клавиш/клавишных команд
  • Наведение и щелчок мышью
  • Рисование на планшете Wacom
  • Ввод в поле формы

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

3. Обеспечьте удобство использования и ясность

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

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

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

4. Навигация

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

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

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

4.1. Содержание

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

  • Меню
    — по умолчанию выбирают пользователи, когда дело доходит до поиска содержимого сайта.
  • Хлебные крошки
    — ориентация жизненно важна, так как многие пользователи не попадают прямо на главную страницу. Хлебные крошки служат для предоставления этой точки отсчета.
  • Ссылки
    — ссылки полезны для понимания сложных связей между связанным контентом.
  • Фильтры
    — помогают управлять ресурсоемкими веб-сайтами.

4.2. Размещение

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

Например, пользователи, привыкшие к языкам с чтением слева направо, будут автоматически фокусироваться на левой стороне страницы, и, наоборот, для пользователей, говорящих на языках с написанием справа налево. Согласно исследованию Якоба Нильсена, люди склонны сканировать веб-страницы в форме буквы «F», сначала просматривая верхнюю часть, прежде чем просмотреть всю страницу по вертикали. Такие модели поведения влекут за собой то, что наиболее заметными местами для размещения вашего меню являются горизонтальные и вертикальные.

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

5. Строгая визуальная иерархия

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

Вот некоторые факторы, влияющие на иерархию, включают:

  • Размер: по сравнению с более мелкими элементами более крупные привлекают больше внимания и привлекают внимание пользователей. Обратите внимание, как доминируют заголовки газет, побуждающие вас узнать, о чем статья.
  • Цвет: по сравнению с тусклыми и тусклыми оттенками яркие и веселые оттенки привлекают внимание, за ними следуют более темные и насыщенные. Более светлые оттенки следуют в спектре, поскольку они кажутся далекими и размытыми, сопровождаемыми приглушенными или приглушенными/оттенками серого.
  • Контрастность: Если вы хотите привлечь внимание пользователя к элементу на своем веб-сайте, лучше использовать резко контрастирующие цвета, чем слегка контрастирующие оттенки. Контраст помогает выделить наиболее важные части вашего сайта. Все остальное относительно.
  • Выравнивание: Выравнивание помогает создать видимость порядка в элементах дизайна. Например, размещение столбца боковой панели рядом с контентом создает приоритет для пользователя.
  • Повторение: Повторение стиля создает ощущение, что части контента связаны между собой. Например, поскольку большая часть содержимого на этой странице представлена ​​в одном стиле, части, отличные от текста в рамке, мгновенно привлекают внимание.
  • Близость: согласно гештальту, чем ближе элементы дизайна расположены друг к другу, тем более связанными они кажутся пользователям.
  • Пустое пространство: пространство вокруг вашего контента можно использовать для привлечения внимания к определенным частям контента. Например, пробелы разбивают контент на легко усваиваемые части и позволяют глазу сфокусироваться на разных частях страницы.
  • Стиль и текстура:
    Использование стилей и текстур может помочь расставить приоритеты для пользователей. Их можно использовать для задания тона дизайна, как и шрифты.
Предыдущая статьяИстория возникновения контекстной рекламы: Билл Гросс. Зарождение контекстной рекламы в деталях
Следующая статья7 типичных опечаток в веб-дизайне