Как разгрузить информационно-насыщенный дизайн

Сила правильной расстановки акцентов

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

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

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

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

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

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

Самые важные данные на автомобильных аукционах — заголовок объявления, «Самая высокая ставка» («Highest Bid») и «Оставшееся время» («Time Left»). Поэтому в дизайне их выделяют с помощью размера, цвета и контрастной формы. Поскольку данные об «Оставшемся времени» («Time Left») обозначают наличие срочности, за счёт тёмной цветовой палитры на них делают самых сильный акцент.

Однако недостаточно просто выделить элемент. Менее приоритетные элементы нужно сделать менее заметными. Для данных с низким приоритетом и раздела «Обзор автомобиля» («Vehicle Summary») используют более мягкие оттенки, чтобы ослабить к ним внимание.

Вы можете расставлять макро- или микроакценты. С позиции гештальт-подхода макроакцентирование ориентировано на элементы в целом. Например, элементы «Самая высокая ставка» («Highest Bid») и «Оставшееся время» («Time Left») делают контрастными, но как насчёт текста и иконок, которые находятся внутри них?

Микроакцентирование представляет собой выбор способов выделения мелких элементов в рамках более крупного. Например, иконка часов в элементе «Оставшееся время» («Time Left») окрашена в красный, чтобы передать ощущение срочности и показать, что аукцион скоро завершится. Иконке стрелки в элементе «Самая высокая ставка» («Highest Bid») не нужен такой яркий контраст, поэтому она окрашена в синий цвет, который сочетается с фоном.

Еще одна область расстановки микроакцентов — раздел «Обзор автомобиля» («Vehicle Summary»). Если вы сравните обе таблицы, то увидите, что в перегруженном дизайне акцент сделан на названиях категорий, а не на значениях данных. Это неправильное решение, поскольку значения обладают более высоким приоритетом и должны привлекать больше внимания.

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

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

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

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

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

Больше полезных статей в моём телеграмм канале