Улучшите свой UX с помощью четкой визуальной иерархии

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

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

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

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

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

Определите цели UX и бренда

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

Формирование определения целей UX путем соответствия критериям методологии SMART ( конкретный, измеримый , действенный, релевантный , отслеживаемый ) — один из популярных способов сделать это. Здесь есть хорошая статья об этом.

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

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

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

Затем поделитесь экраном (или подключитесь к монитору) и начните комментировать!

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

Ранжируйте действия и контент для четкой визуальной иерархии

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

Прежде всего, необходима таксономия. Лучше всего использовать шкалу от 1 до 3, где 1 — самое важное, 3 — наименее важное.

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

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

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

Несмотря на его важность для общего клиентского опыта, фактическому логотипу (и навигации) была присвоена 2, поскольку он не играет такой большой роли в достижении целей UX и бренда.

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

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

Встройте визуальную иерархию в дизайн-систему

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

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

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

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

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

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

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

Заворачивать

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

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

Дальнейшее чтение в блоге Toptal Design:

• Принципы проектирования: введение в иерархию
• Лучшие практики дизайна пользовательского интерфейса и распространенные ошибки
• Изучение гештальт-принципов дизайна
• Всеобъемлющее руководство по информационной архитектуре
• Улучшите свой UX с помощью этих успешных принципов дизайна взаимодействия