В этой статье я хочу провести небольшое исследование с соблюдением научного метода и продемонстрировать (в упрощённой форме), как такие исследования проводятся в реальной жизни, и как просто их можно проводить даже в быту. Эта статья будет полезна всем, кто хочет немного больше узнать о научном методе. Итак, начнём
Предмет исследования
Первым делом проводя какое либо исследование надо чётко определить что именно будет исследоваться. Нельзя начать изучать всё подряд, что попадётся под руку, как и нельзя изучать то, у чего нет чёткого понятия (определения). В данном исследовании будет изучаться субъективная оценка красоты и читаемости текста людьми при использовании разных цветов для текста и фона.
Метод исследования
После того, как определились с тем, что будем изучать, надо определиться как будем изучать. Увы формы яндекса не позволяют сразу демонстрировать результат опроса, да и статьи мои не так популярны. Потому я сформулирую гипотезу на достаточно большом числе данных, а потом проведу проверку выискивая нарушения заявленных принципов на топовых сайтах соц.сетей, магазинов, и т.д.
Формирование гипотезы
Для формирования гипотезы, я написал скрипт на html+javascript, который сгенерировал для меня 300 разных сочетаний цветов текста и фона, и построил 3 графика (по каждой компоненте цвета в системе HSL). Возле каждого варианта я вывел переключатель, позволяющий выбрать нравится ли мне такое сочетание цветов или нет, а на графиках при выборе "нравится" закрасил точку в зелёный цвет, а "не нравится" - в красный (также несколько точек, с которыми я не смог определиться, я закрасил в чёрный цвет). Соответственно получилось 3 таких графика:
На этом графике видно, что мне, хоть и незначительно, но всё же чаще нравились сочетания, в которых отсутствовала красная компонента, так как в центральной части зелёных точек немного больше, чем по краям
С графиком насыщенности тоже всё не так однозначно, но всё же можно заметить тенденцию, что внизу графика зелёных точек немного больше, чем вверху, и в центральной полосе по горизонтали их тоже немного больше, чем по краям, а значит мне чаще нравились сочетания, в которых фон был ненасыщенным, а текст имел среднее насыщение.
Вот на этом графике тенденция уже заметна при первом же взгляде: если у фона и текста цвета имеют похожую яркость (диагональ графика), то они просто становятся нечитабельными.
Гипотеза: сочетания цветов, в которых меньше красного, в которых задний фон менее насыщен, а текст средне насыщен, и в которых яркость фона и текста сильно отличаются, являются более приятными человеческому глазу.
Проверка
Для проверки я попробую найти количество нарушений указанных принципов (насыщенный задний фон, одинаковая яркость фона и шрифта, красные тона фона или текста) на следующих сайтах:
vk.com, youtube.com, facebook.com, yandex.ru, google.ru и несколько интернет магазинов из топа гугла по запросу "интернет магазин": onlinetrade.ru, ozon.ru, mvideo.ru (тут я перескочил одну строку поиска, так как захотелось узнать что будет на сайте компании с красным логотипом)
Приступим:
- vk.com - чёрный и синий тексты на светло-сером или белом фоне за исключением имени в шапке сайта (0 противоречий)
- youtube.com (тёмная тема) - белый или светло-серый текст на тёмно-сером фоне (0 противоречий)
- facebook.com (тёмная тема) - белый и синий текст на тёмно-сером фоне (тёмное на тёмном, 1 противоречие)
- yandex.ru - чёрное, синее, серое, оранжевое на белом, бело на сером или чёрном, чёрное на бледновато-жёлтом, чёрное на ярко-жёлтом) чёрное на светло-сером (просмотрена страница поиска яндекса, главная страница и сервисы диска, дзена, маркета) (ярко-жёлтый фон, 1 противоречие)
- google.ru - чёрное и синее на белом, бледно-синее на светло-сером в doodle в шапке (1 противоречие)
- onlinetrade.ru - тёмно-синее, чёрное на светло-сером, тёмно-синее, чёрное, тёмно-серое на белом, белые надписи на жёлтых кнопках, белые надписи на ярко-красных и синих плашках на товарах (2 противоречия)
- ozon.ru - красное, чёрное, синее, оранжевое, серое на белом, белые надписи на красных плашках скидок и синих кнопках (ярко-красный и синий фон, красный текст, 3 противоречия)
- mvideo.ru - тёмно красный текст на белых кнопках, белый текст на красных кнопках, чёрный текст на белом и светло-сером фоне, белый текст на тёмно-сером фоне (2 противоречия)
Как видно отклонение от указанных выше принципов встречается крайне редко, и зачастую происходит на кнопках и небольших плашечках, основные же, большие, тексты всегда соответствуют определённым выше критериям. Значит критерии определены верно.
Вывод
Идеальный дизайн содержит минимум фона красного оттенка под текстом, зачастую содержит неяркие ненасыщенные фоны, почти не содержит красных текстов и любые тексты на нём по яркости сильно отличаются от фона.
Если Вам понравилась статья ставьте лайки, подписывайте, комментируйте, критикуйте - всё это приветствуется.