Частые ошибки в веб-дизайне: создаем сайт по всем правилам

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

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

Навигация по сайту

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

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

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

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

Цветовая гамма сайта

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

Читабельность текста на 99% зависит от выбора цвета фона и символов. Текст должен быть контрастным относительно основного тона страницы. Кроме того, не всегда ярко выраженная контрастность комфортна. «Ядовитые» оттенки вызывают дискомфорт и даже боль в глазах. Применять такие цвета в оформлении сайта к тексту можно в редких и ограниченных случаях. Кроме того, цвет влияет на психику человека.
Пример, как не стоит оформлять свой сайт:
Пример как не нужно оформлять сайт

Кроме того, что оформление данного сайта усложняет восприятие информации он еще и может травмировать психику неподготовленного пользователя 🙂

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

Скорость загрузки сайта

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

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

Совместимость платформы и браузера

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

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