Что делать с перегруженным дизайном

Что делать с перегруженным дизайном?

Дизайн влияет не только на визуальное восприятие сайта, но и на скорость его загрузки. Узнали, как найти золотую середину и не перегрузить сайты.

Нико Гибрадзе

Hawking Bros

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

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

Перегруженный дизайн интернет-магазина отвлекает от сути и “мешает” приобрести товар или услугу – это становится невозможно.

Сильно перегруженный дизайн влияет на работу сайта и скорость его загрузки.

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

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

Начните анализировать сайт с шапки. Если там указано по три телефона и e-mail разных филиалов и отделов, несколько адресов с указанием близости к станции метро и временем работы каждого, а также есть несколько меню (основное и каталог), логотип, девиз, кнопка заказать звонок – этот сайт однозначно перегружен.

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

Основное правило – использовать сетку. От нее зависит расположение контента, отступы. Кстати, и отступами пренебрегать не стоит: между блоками, внутри блоков, в тексте, в кнопках и элементах должен быть воздух. Это поможет сделать акцент на важном, расположить контент по приоритету.

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

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

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

Есть сервис Яндекс Взгляд –  это сервис по аналитике UX интерфейса, его УТП «Принимайте дизайн-решения, основанные на данных. Тестируйте варианты интерфейсов на этапе прототипа, чтобы выбрать самый понятный для пользователей».

Полезная литература:

1. Стив Круг. «Веб-дизайн: книга Стива Круга, или Не заставляйте меня думать!»
2. Дональд Норман. «Дизайн привычных вещей»
3. Алан Купер. «Психбольница в руках пациентов»
4. Влад Головач. «Дизайн пользовательского интерфейса 2. Искусство мыть слона»
5. Джейми Леви. «UX-стратегия. Чего хотят пользователи и как им это дать»
6. Расс Унгер и Кэролайн Чендлер. «UX-дизайн. Практическое руководство по проектированию опыта взаимодействия»

Али Велиев

Дизайнер

Для начала стоит сказать, дизайн делится на два направления: UI и UX. Первый – это интерфейс, второй это опыт пользователя. Мы сейчас будем говорить в общем, но акцент в каждом из ответов буду упоминать. Начнём с того, что понятие “перегруженный дизайн” довольно относительное. Ведь тут надо понимать, о чём собственно веб-страница, её цель.

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

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

По скорости загрузки, тут уже мы затронем скорее всего техническую часть. Потому что один и тот же дизайн можно сверстать так, что он будет оптимизирован буквально до 1 мегабайта и всё будет загружаться на отлично. Если сайт имеет километровую длину, то её тоже можно заставить быстро грузиться (есть такие технологии). Поэтому перегруженность дизайна скорее влияет на пользователя, на его время потраченное на сайте. Если он за 30 секунд не нашел для себя полезного, то он скорее всего выйдет из сайта.

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

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

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

Скорректировать дизайн могут специалисты. Литература конечно же есть, но не стоит забивать ею голову. Главное опыт, потому что каждый случай индивидуален. Можно локализовать каждый блок дизайна под уже известный проект, это сильно поможет. Про то как найти баланс я уже сказал. Надо проводить тестирование и реакцию пользователей.