Как сделать, чтобы сайт не рябил в глазах
Даже сейчас встречаются сайты, от посещения которых рябит в глазах, происходит это от переизбытка ярких цветов. У особо чувствительных людей может начать болеть голова или даже появится головокружение, соответственно такие сайты стараются избегать и сразу закрывают, потому что при их просмотре приходится сильно напрягаться.
Один из вопиющих примеров(производитель изделий из металла) ниже:
После посещения такого сайта, сразу хочется его закрыть.
Чтобы сайт не рябил в глазах нужно
1. Поделить все элементы на высокоприоритетные(кнопки заказа, цены, акции), нейтральные(изображения, иконки, основной текст и т. п.) и низкоприоритетные(доп. возможности, навигационные ссылки меню, фон сайта и т. д.)
2. Использовать яркие цвета только для самых важных элементов на сайте, а для остальных более бледные.
3. Правило 30%. По возможности все приоритетные яркие элементы располагать в одной области экрана(слева, справа, снизу или сверху) так, чтобы они все уместились области не более 30% от высоты и ширины общего экрана, т. е., чтобы не было 2 ярких кнопок в противоположных частях экрана, например, сверху и снизу или слева и справа. Иначе одни яркие цвета будут притягивать взгляд, уводя от других, не давая сконцентрироваться на одной области. Вследствие, взгляд будет постоянно бегать между яркими элементами, пока посетитель не решит закрыть сайт от напряга.
Примеры хороших сайтов
В каталоге интернет магазина, кнопки «Подробнее» сделали бледными, чтобы они выделялись меньше, чем фото товара и не отвлекали от выбора. Если кнопки сделать ярко-желтыми, то будет нарушено правило 30% и взгляд начнет бегать между ними, мешая сконцентрироваться.
В данном интеренет магазине есть только один яркий красный элемент — информация о быстрой доставке и он занимает не более 30% от длины и ширины экрана.
Важно: Если яркие элементы не умещаются в одной области не более 30% от длины и ширины экрана, то их цвет нужно делать более бледным до тех пор, пока их яркость не сравняется с другими элементами, иначе сайт будет напрягать.
Как проверить степень яркости: Отвернитесь от экрана, а потом поверните голову и посмотрите, куда ваш взгляд уходит в первую секунду, это и будет наиболее яркий элемент.
Примеры плохих сайтов
Посмотрите на примеры ниже и вы убедитесь, что просматривая пестрый сайт, взгляд постоянно бегает по самым ярким элементам и тяжело сконцентрироваться на основном содержании, вследствие появляется желание его закрыть, т. к. он напрягает глаза и нужно тратить больше усилий, чтобы найти нужную информацию.
В обоих вариантах, показанных выше, не соблюдается «правило 30%» и взгляд бегает по ярким элементам, вследствие тяжелее пользоваться сайтом и находить нужную модель в каталоге. Нужно либо уменьшить количество ярких элементов согласно «правилу 30%», либо все яркие элементы сделать более бледными до той степени, чтобы их яркость не превосходила яркость остального, т. е. если отвернуться и посмотреть на экран, то в течение первой секунды взгляд должен концентрироваться не на текущих ярких элементах, а на основном содержании.
Использование не более 4-5 цветов в видимой области экрана на сайте
Чем больше цветов находится в видимой области на сайте, тем тяжелее им пользоваться, потому что взгляд начинает по ним бегать, вследствие сложнее сконцентрироваться и появляется желание закрыть раздражающий сайт. Выход — использовать не более 4-5 цветов в видимой области экрана. Например: черный(текст), белый(текст, фон), синий(фон, ссылки), зеленый(кнопки online заявок).
В принципе вы можете использовать любое количество цветов на сайте, но важно, чтобы в видимой области было не более 4-5. Никто не мешает, вам сделать синий фон сверху, в середине зеленый, а внизу темный, главное, чтобы они располагались на расстоянии друг от друга, чтобы в видимой области экрана не было более 4-5 цветов.
