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

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

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

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

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

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

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

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

Выделяйте элементы в зависимости от их важности

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

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

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

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

Макро и микроакцентирование

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

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

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

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

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

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

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

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

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

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

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

1313
7 комментариев

акцент в таблице должен быть на названиях категории, мой дорогой джун;) на своих беханских сайтах иди так делай, мои клиенты должны быстро находить то что им нужно

1
Ответить

иди вздрочни, расслабься, а то перевозбудился чето

Ответить

Комментарий недоступен

Ответить

Интерфейс все еще слишком сложный визуально. Почему:
1. Badges со временем до окончания аукциона и ставкой сложно читать быстро, тк пользователь считывает иконку, regular text, bold text. Иконка образует смещенный акцент, и тут можно было бы убрать текст вовсе, тк пользователи уже в контексте и по иконке поймут о чем речь: "icon value".
2. #40 bids, comments из-за наличия icons слева образуют смещенный акцент и довольно близко расположены к бейджам, не хочется их нажать.
3. Инфо об аукционе тоже с иконкой (смещенный акцент как вирус идет от элемента к элементу) ок я увидел уже 5 иконок, еще не дойдя до summary.
Это когнитивной перегружает. Я не хочу любоваться иконками каждый 20 раз за сессию, когда смотрю авто.
4. Заголовкам над value я бы не давал такой высокие Contrast Ratio, т.к. это повторяемая из раза в раз информация для пользователя и она третьестепенная и по сути очевидная уже из Value. (юзер в контексте) Либо снизил бы коэффициент контрастности.

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

Ответить

EMOTIONAL DAMAGE

Ответить

Я как раз на днях открываю агентство, можем пообщаться, обсудить условия

Ответить