Что делать нужно и что не нужно в веб-дизайне

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

 

Давайте начнем!

 

"Делать"

 

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

 

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

 

2. Простая и четкая навигация
Навигация — это краеугольный камень юзабилити. Не имеет значения, насколько хорош и красив ваш сайт, если пользователи не могут найти на нём то, что нужно. Вот почему навигация на сайте должна быть:
а) простой (сайт должен иметь простейшую структуру);
б) очевидной (способы навигации должны быть предельно ясны для посетителей);
в) согласованной (навигация должна быть одинаковой на всех страницах).

 

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

 

3. Изменение цвета посещенных ссылок
Ссылки являются ключевым элементом в навигации. Когда посещенные ссылки не меняют цвет, пользователи могут непреднамеренно повторно просматривать одни и те же страницы. А ведь знание прошлого и настоящего местоположения облегчает выбор будущего пути!

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

 

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

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

 

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

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

 

"Не делать"

 

1. Не заставляйте посетителей ожидать загрузки содержимого страниц
Внимание и терпение пользователей Интернета очень ограничены. Согласно исследованиям NNGroup:

 

10 секунд — это максимумальное время, чтобы сосредоточить внимание пользователя на задаче.

 

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

 

2. Не открывайте ссылку на новой вкладке.
Такое поведение делает невозможным использование кнопки «Назад», которая является типичным способом возвращения пользователей на предыдущие страницы.

 

3. Не дайте рекламе снизить понятность сайта
Рекламные объявления, баннеры могут затмить контент на странице, сделать его более сложным для восприятия. Однако нельзя сказать, что все, что похоже на рекламу, игнорируется пользователями (явление известно как баннерная слепота).

4. Не используйте перехват скролинга
Перехват скролинга (hijack scrolling) — это когда разработчики манипулируют полосой прокрутки, чтобы изменить поведение страницы. Для этого прибегают к анимированным эффектам, созданию фиксированных точек прокрутки и даже редизайну самой полосы прокрутки. Перехват скролинга — одна из самых неприятных вещей для многих пользователей, так как она отбирает у них управление страницей. Когда вы создаете веб-сайт или пользовательский интерфейс, убедитесь, что пользователь может контролировать просмотр и перемещение через сайт или приложение.

 

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

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

 

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