Использование иерархии в макетах. Советы

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

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

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

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

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

Зная свои основные и второстепенные цели, вы сможете организовать иерархию своего дизайна. Посмотрите на эти два дизайна Google Opinion Rewards на мобильном телефоне:

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

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

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

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

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

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

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

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

Чтобы узнать больше о важности добавления иерархии в ваши проекты, посетите эти дополнительные ресурсы.

• Начните свой путь к созданию эффективных визуальных иерархий со статьей Mockplus [Золотые советы и примеры по созданию визуальной иерархии в дизайне веб-сайтов.] (https://www.mockplus.com/blog/post/ui-visual-hierarchy).
• Если вы хотите увидеть визуальное представление о том, как может работать иерархия, прочитайте эту статью от Interaction Design Foundation, которая поможет вам понять фундаментальный вопрос: Что такое визуальная иерархия?
• Иерархия имеет решающее значение для создания дизайна продукта, доступного всем вашим пользователям. Чтобы узнать больше о инклюзивном дизайне, прочтите статью от UX Collective: [A означает доступность — 12 главных советов по проектированию инклюзивного пользовательского опыта.] (https://uxdesign.cc/the-a-to-z-of-ux-a-is-for-accessibility-12-top-tips-for-designing-an-inclusive-user-experience-667eedaf5bca).