Основа интернета — это текст. Миллиарды сайтов ценны именно своим текстовым контентом. Однако визуальное оформление имеет не меньше значения, чем информационное наполнение. Если пользователям приятны на вид страницы и одновременно понятна навигация по ресурсу, то половина успеха обеспечена. А мы приведем несколько правил, соблюдение которых поможет вам на старте в качестве веб-мастера.
«Всё гениальное – просто»
Начинающие специалисты по созданию веб-сайтов часто грешат излишней любовью к дизайну. Они перегружают страницы оформительскими элементами и анимацией. Придумывают сложный декор заголовкам, спискам, пунктам меню, сопровождают наведение мыши на ссылки и кнопки различными визуальными эффектами. В общем, превращают сайт в образец возможностей средств разработки.
Не надо так. Во-первых, пользователь быстро утомляется визуальными эффектами, во-вторых, сильно падает скорость загрузки страниц. А поисковые системы требуют, чтобы загрузка происходила максимально быстро.
Если вы не хотите падения позиций в поисковых системах, то избегайте перегруженности дизайном. Выбирайте для оформления страниц картинки полегче, попроще стройте дизайн элементов. Помните главный принцип веб-дизайна: каждый визуальный элемент должен нести практический смысл. Например, особое анимационное оформление кнопки нужно тогда, когда надо максимально привлечь к ней внимание. А если её и так хорошо видно, то лишняя анимация и визуальные эффекты ни к чему.
Интуитивно понятная навигация
Навигацию по сайту нужно хорошо продумать. Предварительно, конечно же, следует разработать структуру веб-ресурса. А далее разместить в привычных местах меню. В частности, пользователи уже на автомате ищут меню вверху и слева сбоку. А если вы его переместите вбок справа, то озадачите посетителей.
Сайт имеет стандартные элементы: хидер — шапка сайта, футер — подвал. Эти части сайта содержат привычные элементы: в хидере располагается название ресурса и контактные данные, если это магазин, то там находится вход в корзину. В футере помещают дубли меню или ссылки на различные второстепенные страницы. Например, на карту сайта, на информацию о доставке, оплате, правилах возврата. Ни к чему сбивать с толку пользователей излишним креативом.
Сайт с привычной пользователям навигационной системой принесет вам плюсы от поисковых систем. С непонятного ресурса пользователь может быстро уйти, а если у вас привычная навигация, то посетителям не нужно на ней сосредотачиваться. Они сразу перейдут к изучению контента и останутся на страницах надолго. Тем самым вы получите хорошие поведенческие факторы.
А хорошие поведенческие факторы принесут вам рост в поисковых системах. Поисковики очень ценят, когда пользователи на сайте просматривают по несколько страниц и остаются хотя бы на 5-10 минут.
И вообще, думайте о позициях в поисковых системах еще на стадии разработки структуры. Даже уровень вложенности страниц имеет значение. Не говоря уже о человекопонятных урлах и наличии в них ключевых фраз.
Цвета сайта
Радуга — это забавно, если дело касается мороженного или детской игрушки. Что касается дизайна веб-ресурса, то остановитесь на центральном цвете и парочке второстепенных. Они могут контрастировать или, наоборот, максимально гармонировать. Они могут психологически способствовать цели сайта — мужчины совершают покупки на сайтах одних цветов, а женщины охотнее покупают на сайтах других цветов. Или же цвета могут подчеркивать тематику, соответствовать ей. Исходите из практических соображений при выборе гаммы.
Элементы одного типа должны быть оформлены единообразно. То есть заголовки первого уровня — для них вы ставите один размер и стиль, заголовки второго уровня — другой размер и стиль. Кнопки должны быть оформлены одинаково, ссылки — тоже. Это делается для того, чтобы не путать посетителей. Чтобы они на автомате кликали по кнопкам и ссылкам, переходили по пунктам меню.
Разнообразие шрифтов
Шрифт важен не только с точки зрения оформления, но и психологии. Обратите внимание на разницу шрифтов с засечками и без них, на то, как они влияют на внимание посетителей. Используйте для основного текста шрифт с засечками, потому что он удерживает внимание. А для заголовков, элементов управления — шрифты без засечек. Лишняя перегрузка шрифтом элементам управления на пользу не идет.
Веб-ресурс лучше не перегружать шрифтовым разнообразием, как и цветовым. Из тех же соображений, что с цветами. Определите шрифт с засечками для основного текста и шрифт для элементов управления. Допустимо добавить еще один шрифт для заголовков. Но не более того.
Если вы предпочтете для основного текста шрифт без засечек, ничего страшного не произойдет. Нередко страницы могут выглядеть лучше, когда выбран шрифт без засечек. Это зависит от дизайна и, опять же, целей сайта.
Цвет фона страниц
Читать темный текст на светлом фоне гораздо легче. Особенно в сумерках. Старайтесь выбирать это сочетание. Да, никто не запрещает пойти по другому пути: взять для фона темный цвет, а для шрифта — светлый. В этом случае пользователи будут отмечать быстрое утомление глаз.
Если вам очень нравится второй вариант, но вы опасаетесь за поведенческие факторы, можно сделать выбор цветовой гаммы. Пользователь сможет сам выбрать сочетание по душе. Разместите кнопку или ссылку выбора в хидере, сделайте её заметной.
Поисковая строка и фильтры
Понятная навигация, наличие ссылок на все материалы — это замечательно. Это огромный плюс в плане юзабилити — науки об удобстве интерфейсов. Однако пользователю всегда надо еще быстрей, еще проще. Поэтому не забудьте про поиск на сайте.
Более того, сегодня можно для каждого варианта поиска, для его результирующей страницы задать собственный Url и поисковые мета-теги H1, title, description, keywords. Такая страница сохраняется в sitemap и становится доступной для поиска. Обычно для сохранения результатов поиска к разным CMS продаются дополнения. В крайнем случае его можно заказать программисту.
Точно так же можно сохранять в качестве полноценных страниц и результаты фильтров интернет-магазина. Такие страницы будут проиндексированы поисковыми системами и будут участвовать в ранжировании по поисковым запросам.
Flash и поисковые системы
Сайты, сделанные по технологии Flash, красивы. Однако такой метод построения веб-ресурса хорош для промо-сайта. Поисковики плохо ранжируют флеш-сайты. Если хотите высоких позиций, используйте HTML для видимой части страниц, CSS и PHP, JavaScript.