Правила хорошего сайта: ожидаемая навигация и цветовое оформление
Правила хорошего тона при оформлении сайта, подразумевают «ожидаемую» для пользователя навигацию и грамотный подбор цвета его UI элементов. Есть различные мнения о том, каким должен быть SEO Friendly и дружественный к пользователю дизайн. Часто на первое место ставится простота оформления, позволяющая с легкостью сканировать сайт как посетителям с их избирательным вниманием, так и поисковым роботам. Это дает уверенность в доступности контента (для тех и других), повышает скорость его индексации.
Но как много веб дизайнеров используют жаргоны: spider, робот, индексация? Некоторые специалисты Арт и Графического дизайна обладают значительными техническим навыками, бывает и наоборот. Над вопросом удачного подбора цвета для пользовательского интерфейса задумываются как технические, так и арт-специалисты:
- Как на выбор цвета для сайта могут отреагировать поисковые системы?
- Как посетители оценят удобство взаимодействия с UI?
- Не будет ли цвет оказывать негативный эффект на конверсию даже при топ 1 ранжировании поисковиками?
Правила оформления ссылок и цветовая индикация на сайте
Существуют простые правила оформления ссылок на веб-странице. Не стоит во имя чего-либо нарушать стандарты:
- Кликабельность элементов должны быть очевидной. Используйте подчеркивания, микроитерации, легкую анимацию, индикацию цветом
- Все некликабельное на странице не должно вводить в заблуждение
- Цвет ссылки не должен сбивать с толку читателя. Для большинства сайтов рекомендуемые цвета: синий, черный или темно-серый
- Пунктиром обозначают ссылку не для перехода, а действия на странице – раскрытия подсказки / скрытого текста (повторное нажатие: возврат в исходное состояние)
- Не ставьте лишний раз ссылку если не уверены в ее полезности
Подчеркивание и синий цвет стал для ссылок «стандартом де-факто». В творческих и креативных дизайнах (реализуют узко специфические цели) их оформляют самым необычным образом: разноцветные подсвечивания, подпрыгивания, увеличения, переливания цветами при наведении, заливка фона под ссылкой, рамки вокруг.
При хорошем дизайне и юзабилити сайта:
Посетителю не приходится убеждаться в кликабельности элементов, подводя курсор или делая ненамеренный переход
Применительно к изображениям-ссылкам и кнопкам, ожидаемая навигация реализуется ховер-эффектом появления иконки лупы, вплывающей подсказкой (тултип) или цвето-тоновой коррекцией / заливкой цветом, плоской тенью со сдвигом, flip-переворотом, легкая анимацией.
Key Art Designs показывает кликабельность изображений по максимуму и с пользой:
Hover опции: можно поставить лайк, увеличить, посмотреть детали и купить постер
Используя цветовую индикацию ссылок для увеличения их кликабельности, нужно не забывать делать это единообразно на всех страницах сайта.
Контраст цвета и читабельность
Веб-страница должна быть легко читаемой. Это подразумевает:
- Удобство для беглого просмотра «сканирования» страницы (создание визуальной иерархии)
- Отчётливость
- Понятность
Наивысший контраст дают черный и белый цвета. Некоторые дизайнеры любят использовать белый текст на черном фоне. Выглядит стильно, но читать затруднительно. Нужно учитывать, что при больших объемах контента это может вести к снижению конверсии. Доводилось ли вам просматривать страницы с низким контрастом текста? Слишком мелкий или неразборчивый светло-серый текст на белом фоне, легко принять за форму спама.
Цвета на сайте должны четко восприниматься и корректно передаваться. Но не факт, что посетители на различных дисплеях увидят одни и те же цвета.
Когда браузеры не могут передать определенный цвет они пытаются подобрать более близкий
Избежать неправильной передачи оттенков, позволит использование «безопасных» цветов.
Вместо итога
- Создание необходимых контрастов повысит читабельность сайта
- Корректная цветопередача даст уверенности в качестве эстетического восприятия
- Грамотное оформление индикации кликабельности UI-элементов и ссылок в текстах, будет оценено посетителями
Все вместе это улучшает опыт пользования сайтом (UX) и поведенческие сры, столь значимые сейчас для поисковых систем.
