Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 36
Как-то был мой пост об этом. Рекомендовали, тащемта, ПО, но добрый человек сделал простенький скрипт, меняющий у загруженного IFrame цветовую гамму при помощи CSS (hue shift). С графиками — да, беда большая, но их по тональности можно отличать.
Для нормально видящего же человека: просто не пишите белым текстом на жёлтом фоне, это главное. Ну, а если есть необходимость поддерживать дальтоников, то можно включить тот же hue shift или сделать отдельные стили.
Для нормально видящего же человека: просто не пишите белым текстом на жёлтом фоне, это главное. Ну, а если есть необходимость поддерживать дальтоников, то можно включить тот же hue shift или сделать отдельные стили.
«Мой сайт, как его видел бы человек с „электронными чернилами“».
Человеческий глаз различает цыет гораздо быстрее, чем текст, и даже быстрее чем форму.
И все-таки большинство людей способно различать цвета.
Стоит ли ради ~10% юзеров прям-таки выбрасывать цвет в принципе?
Есть способ лучше.
Просто для глюдей с нарушениями зрения надо дублировать эту информацию — подписью, толшиной линии, иконкой или еще чем по ситуации.
Пример. Зеленая кнопка ОК и красная Decline — всем будет все понятно. Только при этом 90+% юзеров (у которых нормальное зрение) воспример информацию быстрее и привычнее, просто бросив быстрый взнляд на обе кнопки, расположенные рядом.
Оставшиеся прочтут подписи к ним и тоже все поймут.
И все-таки большинство людей способно различать цвета.
Стоит ли ради ~10% юзеров прям-таки выбрасывать цвет в принципе?
Есть способ лучше.
Просто для глюдей с нарушениями зрения надо дублировать эту информацию — подписью, толшиной линии, иконкой или еще чем по ситуации.
Пример. Зеленая кнопка ОК и красная Decline — всем будет все понятно. Только при этом 90+% юзеров (у которых нормальное зрение) воспример информацию быстрее и привычнее, просто бросив быстрый взнляд на обе кнопки, расположенные рядом.
Оставшиеся прочтут подписи к ним и тоже все поймут.
Учтите, что у некоторых зрение хорошее, а монитор цвета искажает. Или монитор вообще не в состоянии столько цветов передать.
Отличить красный от зеленого тем не менее довольно просто :) Это ж не живопись и 50 оттенков серого.
Если светло-серым по белому элемент отобразить, то могут быть проблемы. Или другие неконтрастные сочетания.
У меня была какая-то старая видеокарта Интел, которая в линуксе плохо поддерживалась, ничего ужасного, но гамма съезжала. Настройка не помогала: или все очень темные цвета казались черными, или все очень светлые — белыми.
У меня была какая-то старая видеокарта Интел, которая в линуксе плохо поддерживалась, ничего ужасного, но гамма съезжала. Настройка не помогала: или все очень темные цвета казались черными, или все очень светлые — белыми.
Рекомендация в статье имеет право на жизнь.
Только, из крайности в крайность не нужно бросаться.
Для интернет-магазина одежды, например, совет довольно странный.
Представил себе магазин ч/б одежды :)
Только, из крайности в крайность не нужно бросаться.
Для интернет-магазина одежды, например, совет довольно странный.
Представил себе магазин ч/б одежды :)
Давайте по полочкам. Человек от природы наделен хорошим цветовосприятием. И вы предлагаете просто вот так забить на эту способность и все делать чернобелым ради совсем маленькой ниши людей (2.5%, если наберется — 5% мужчин болеют дальтонизмом в той или иной степени, мужчин примерно половина от всех особей)? Хорошо, что великие художники так не считали и не стеснялись играть с цветом как им позволит воображение.
Если брать так откровенно, то задача совсем не дизайнеров делать так, чтобы люди с дефектом зрения воспринимали информацию так же. Особенно, когда это требует усложнение восприятия информации для основной массы людей.
В типографике все нацелено на простоту восприятия (за исключением случаев акцента, когда как раз наоборот нужно заставить человека читать медленнее и вдумчивее, а не проскользить глазами по тексту). Я считаю, что это правило должно быть полностью перенесено и в интерфейсы.
Тем более что цветопередача, в общем то, не самая большая проблема — куда важнее дать доступ к информации людям с ослабленным зрением.
Но все это задача для специального софта, уже по-умолчанию встроенного в большинство ОС. Крупный шрифт, высокий контраст и прочее.
Если у человека уже нарушено зрение, ваш сайт не будет первым, который он видет в таких тонах, думаю, он уже выработал подход к быстрому пониманию интерфейсов или настроил соотвествующим образом цветовую палитру монитора.
Вот гораздо более интересная задача — чернобелая печать. Но по этому поводу было много статей, и все сводится к наличию отедельного набора стилей, специально подобранных для печати. В общем то там все просто — текст должен быть строго черным, фон строго белым, кегль не меньше 10 pt (это даже в ГОСТ есть), это чисто гигиенические требования к тексту (есть понятие «выворотка», когда печатают белым на черном, но это специфичный случай).
А вот печать графиков еще интереснее. 5 малопересекающихся линий можно вообще напечатать просто черным цветом и подписать каждую линию выносного элемента. Если же у вас линий много, да и они постоянно пересекаются, то, в общем случае, вы просто неверно разбили их на графики, нужно их разнести, но когда это делать никак нельзя, все равно без цвета будет получаться каша, как бы вы не старались. Тогда в графике стоит делать пометку, что его печатать только в цвете. Ну правда нужно признаться, что если желтая линия на мониторе кажется достаточно контрастной, на бумаге же её обычно достаточно проблематично рассматреть.
А по поводу цветных баннеров — ну это их задачей и является — привличение вашего внимания. В общем то, AdBlock в помощь. Правда, нередко встречаются интерфейсы, в которых и само меню пестрит всеми цветами радуги и кучу отвлекающих элеметов. Тут хорошо справляется Clearly (Evernote) или ему аналогичные программы.
Резюме: цвет — очень важная часть восприятия человека. Не стоит им пренебригать ради совсем небольшого числа людей, которые его плохо воспринимают. Они и без вас нашли решение своей проблемы. В умелых руках цвет способен поднять удобство восприятия цвета в сотни раз. В неумелых руках (когда кнопка «нет» почему-то зеленая, а «да» — вообще фиолетовая) цвет способен травмировать. Ну как минимум вызвать непреодолимое желание закрыть страницу.
Если брать так откровенно, то задача совсем не дизайнеров делать так, чтобы люди с дефектом зрения воспринимали информацию так же. Особенно, когда это требует усложнение восприятия информации для основной массы людей.
В типографике все нацелено на простоту восприятия (за исключением случаев акцента, когда как раз наоборот нужно заставить человека читать медленнее и вдумчивее, а не проскользить глазами по тексту). Я считаю, что это правило должно быть полностью перенесено и в интерфейсы.
Тем более что цветопередача, в общем то, не самая большая проблема — куда важнее дать доступ к информации людям с ослабленным зрением.
Но все это задача для специального софта, уже по-умолчанию встроенного в большинство ОС. Крупный шрифт, высокий контраст и прочее.
Если у человека уже нарушено зрение, ваш сайт не будет первым, который он видет в таких тонах, думаю, он уже выработал подход к быстрому пониманию интерфейсов или настроил соотвествующим образом цветовую палитру монитора.
Вот гораздо более интересная задача — чернобелая печать. Но по этому поводу было много статей, и все сводится к наличию отедельного набора стилей, специально подобранных для печати. В общем то там все просто — текст должен быть строго черным, фон строго белым, кегль не меньше 10 pt (это даже в ГОСТ есть), это чисто гигиенические требования к тексту (есть понятие «выворотка», когда печатают белым на черном, но это специфичный случай).
А вот печать графиков еще интереснее. 5 малопересекающихся линий можно вообще напечатать просто черным цветом и подписать каждую линию выносного элемента. Если же у вас линий много, да и они постоянно пересекаются, то, в общем случае, вы просто неверно разбили их на графики, нужно их разнести, но когда это делать никак нельзя, все равно без цвета будет получаться каша, как бы вы не старались. Тогда в графике стоит делать пометку, что его печатать только в цвете. Ну правда нужно признаться, что если желтая линия на мониторе кажется достаточно контрастной, на бумаге же её обычно достаточно проблематично рассматреть.
А по поводу цветных баннеров — ну это их задачей и является — привличение вашего внимания. В общем то, AdBlock в помощь. Правда, нередко встречаются интерфейсы, в которых и само меню пестрит всеми цветами радуги и кучу отвлекающих элеметов. Тут хорошо справляется Clearly (Evernote) или ему аналогичные программы.
Резюме: цвет — очень важная часть восприятия человека. Не стоит им пренебригать ради совсем небольшого числа людей, которые его плохо воспринимают. Они и без вас нашли решение своей проблемы. В умелых руках цвет способен поднять удобство восприятия цвета в сотни раз. В неумелых руках (когда кнопка «нет» почему-то зеленая, а «да» — вообще фиолетовая) цвет способен травмировать. Ну как минимум вызвать непреодолимое желание закрыть страницу.
Подозреваю, что автор имел в виду более простую вещь — не делайте цвет основным средством передачи смысла. Вот и все.
Если кнопка «Да» отличается от кнопки «Нет» только окраской — это неправильно. Проблемы будут и у человека с нестандартным зрением, и у человека с плохим монитором, и у человека с телефоном, вышедшим на солнечный свет, и у человека, распечатавшего страницу на ч/б принтере.
Если на кнопках явно написано «Да» и «Нет», то цвет играет вспомогательную роль. Один помогает, другим не мешает.
P.S. Вообще-то человеческое зрение устроено так, что в первую очередь различается не цвет, а форма (оттенки серого). Вы можете убедиться в этом, оказавшись в сумеречном освещении. Различить оттенки будет сложно, но опознать предмет или пройти, не споткнувшись, сможете легко.
Если кнопка «Да» отличается от кнопки «Нет» только окраской — это неправильно. Проблемы будут и у человека с нестандартным зрением, и у человека с плохим монитором, и у человека с телефоном, вышедшим на солнечный свет, и у человека, распечатавшего страницу на ч/б принтере.
Если на кнопках явно написано «Да» и «Нет», то цвет играет вспомогательную роль. Один помогает, другим не мешает.
P.S. Вообще-то человеческое зрение устроено так, что в первую очередь различается не цвет, а форма (оттенки серого). Вы можете убедиться в этом, оказавшись в сумеречном освещении. Различить оттенки будет сложно, но опознать предмет или пройти, не споткнувшись, сможете легко.
Вообще-то человеческое зрение устроено так, что в первую очередь различается не цвет, а форма
Вернее, «человеческое зрение в сумерках», когда колбочки фоторецепторов не работают. А при хорошем освещении всё наоборот, представьте мелькнувший предмет, форму может не уловите, но что он был красный так это точно. Для получения информации о цвете достаточно сотни фотонов, форму так не передать.
Если мы говорим о работе глаза — полностью с вами согласен, но если о процессе зрительного восприятия (прием изображения глазом, обработка мозгом, осознание), то форма распознается быстрее и лучше. Если я не прав, с удовольствием и интересом выслушаю комментарии.
Ну подумайте логически, сколько нужно байтов, чтобы передать длину волны одиночного фотона? Четыре для TrueColor, плюс, так сказать, protocol overhead (в нейронах сигналы аналоговые, но суть та же). А для передачи и распознания формы должны сработать достаточно нетривиальные алгоритмы распознавания образов.
Представьте себе капчу, которая бы просила бы ввести цвет образца. Ясно, что такой не бывает, потому что эта задача тривиальна для бота, в отличии от задачи различения форм.
Представьте себе капчу, которая бы просила бы ввести цвет образца. Ясно, что такой не бывает, потому что эта задача тривиальна для бота, в отличии от задачи различения форм.
Пойдем эволюционно.
Вот стоит древний человек в лесу. Все вокруг зеленое. И только в одном месте оно вдруг отличается от типичного окраса фона цветом. Да пусть там хоть полностью четко различимый контур, при быстром взгляде вы обратите внимание именно на яркий, привлекший вас цвет. И это естественно, потому что в те времена достаточно важным было заметить взгляд хищника на себе или какой-то намек на угрозу.
Так же контрасные цвета быстрее замечаются, потому что у нас в глазу тоже колбочки соответствуют разным длинам волн (а не гладко на всем диапазоне у вас одинаковая чувствительность). Ну и в конце концов, мы очень хорошо видем контраст в цвете, определяя по этому контур (на яркокрасной стене вы же отчетливо различите яркозеленый рисунок при одинаковой интенсивности отражения обеих поверхностей), но первичный признак все равно цвет.
Вот еще тривиальный пример — возьмите две фотографии примерно однородного леса. Но на одном нарисуейте похожим, но контрастным по яркости объект, на другом — по цвету, но с размытыми контурами. Потом быстро проведите их перед глазами (чтобы оба были видны короткое время, например, листайте альбом). На каком, по-вашему, вы быстрее обнаружите объект?
Итак, логически мы все таки пришли (я надеюсь) к тому, что цвет мы различаем быстрее, чем контур.
Теперь о самом восприятии цвета. Тут мы тоже очень сильно завязаны. Даже если на кнопках ничего не будет написано, вы будете догадываться, что красная — это отмена, выход, стоп. Зеленая — старт, запуск, принять и прочее. Этому нас учат даже светофоры.
Только вот не все дизайнеры, почему то, считают, что классический расклад цветов — правильный.
*если опять хотите эволюции, то вот пример из нее — вы станете касаться объект, если он вдруг будет ярко-оранжевого цвета, или тем более кислотно-зеленого, кислотно-[любой] цвет? У вас все еще есть сомнения, что цвет играет чуть ли не большее значние в нашей жизни, чем контур (не брать современное время, тут все немного уже поломано) важен?
Вот стоит древний человек в лесу. Все вокруг зеленое. И только в одном месте оно вдруг отличается от типичного окраса фона цветом. Да пусть там хоть полностью четко различимый контур, при быстром взгляде вы обратите внимание именно на яркий, привлекший вас цвет. И это естественно, потому что в те времена достаточно важным было заметить взгляд хищника на себе или какой-то намек на угрозу.
Так же контрасные цвета быстрее замечаются, потому что у нас в глазу тоже колбочки соответствуют разным длинам волн (а не гладко на всем диапазоне у вас одинаковая чувствительность). Ну и в конце концов, мы очень хорошо видем контраст в цвете, определяя по этому контур (на яркокрасной стене вы же отчетливо различите яркозеленый рисунок при одинаковой интенсивности отражения обеих поверхностей), но первичный признак все равно цвет.
Вот еще тривиальный пример — возьмите две фотографии примерно однородного леса. Но на одном нарисуейте похожим, но контрастным по яркости объект, на другом — по цвету, но с размытыми контурами. Потом быстро проведите их перед глазами (чтобы оба были видны короткое время, например, листайте альбом). На каком, по-вашему, вы быстрее обнаружите объект?
Итак, логически мы все таки пришли (я надеюсь) к тому, что цвет мы различаем быстрее, чем контур.
Теперь о самом восприятии цвета. Тут мы тоже очень сильно завязаны. Даже если на кнопках ничего не будет написано, вы будете догадываться, что красная — это отмена, выход, стоп. Зеленая — старт, запуск, принять и прочее. Этому нас учат даже светофоры.
Только вот не все дизайнеры, почему то, считают, что классический расклад цветов — правильный.
*если опять хотите эволюции, то вот пример из нее — вы станете касаться объект, если он вдруг будет ярко-оранжевого цвета, или тем более кислотно-зеленого, кислотно-[любой] цвет? У вас все еще есть сомнения, что цвет играет чуть ли не большее значние в нашей жизни, чем контур (не брать современное время, тут все немного уже поломано) важен?
Вы можете убедиться в этом, оказавшись в сумеречном освещении.
Сумеречное зрение — не основной, а ограниченный вариант зрения. Вместо связки колбочки+палочки начинают работать просто палочки.
Да, распознавание образов у нас и без цвета работает. Но работает оно хуже, чем с цветом.
И существует масса решений, исторически плотно повязанных на цвет. Так увидев две кнопки, красного и зелёного цвета, ты первым делом считаешь, что зелёная будет подтверждением, а красная — отказом. То, какой они формы будет совсем не важно, а то, что на них написано воспринимается вторичным. Сделай красную кнопку с надписью «Да» и зелёную с надписью «Нет» и большинство людей будет ошибаться при выборе, либо (если вторая сигнальная развита) «зависать» на таком противоречии.
Подозреваю, что автор имел в виду более простую вещь — не делайте цвет основным средством передачи смысла. Вот и все.Именно. Если на странице важно что-то выделить, то цвет не должен быть единственным отличающимся параметром. Особенно в тех случаях, если, например, речь идёт о возможности выбрать определённые элементы — прежде всего при выборе одного варианта из двух, либо если есть несколько вариантов, и можно выбирать более одного. В подобных случаях, если выбранный вариант отличается только цветом, даже обычный человек, нормально различающий цвета, может очень легко запутаться в том, что же всё-таки выбрано, а что нет.
В вашем примере вообще достаточно чекбоксов. На то они и стандартные элементы. Чем больше у вас стандартных — тем лучше (как раз то, о чем я говорил, когда упоминал о скорости восприятия. Стандартный шрифт, стандартные контроллы, стандартное расположение элементов). И с дальтонизмом это никак не связано. Простите, но пихать чекбокс внутрь кнопки — мягко говоря, сомнительное решение. Что должно произойти при нажатии на кнопку, а не на сам чекбокс? Это поведение зависит от того, выбран ли чекбокс или нет? При выборе чекбокса нажмется кнопка? Сколько вопросов слету, и не ткнув, не узнаешь.
«Мой сайт в своем нормальном состоянии.» — если это сайт для дальтоников, тогда все в порядке. Если нет, тогда есть подозрение, что дизайнер в принципе не умеет нормально работать с цветом и поэтому придумывает всякие хитрые отмазки.
P.S. Если правильно нашел, то проблемы не только с цветом: thesocialtester.co.uk/
P.S. Если правильно нашел, то проблемы не только с цветом: thesocialtester.co.uk/
В Photoshop есть встроенные режимы просмотра, которые эммулируют дальтонизм
View -> Proof Setup
Быстрое переключение в этот режим — Ctrl+Y
Чтобы посмотреть в оттенка серого, создаем в самом верху слоев регулирующий слой «оттенок и насыщенность» с насыщенностью 0.
View -> Proof Setup
Быстрое переключение в этот режим — Ctrl+Y
Чтобы посмотреть в оттенка серого, создаем в самом верху слоев регулирующий слой «оттенок и насыщенность» с насыщенностью 0.
А давайте еще на слепых ориентироваться и вообще никаких сайтов не делать. Зачем лишать себя удивительной возможности человеческого организма — цветовосприятия. Цвет — главное орудие дизайнера и проектировщика. Его очень редко используют для выражения смысла, для удобства, и надо не убирать цвет, а максимально увеличивать его активность. Если обычный сайт будет немного отличатся для нескольких процентов потенциальных клиентов — то это не повод портить остальным всё восприятие. Если вы делаете систему рассчитанаю на людей с отсутствием некоторых возможностей, то просто учитывайте это. Но ни в коем случае нельзя ориентировать общеупотребительную систему, от которой не зависит жизнь, на очень узкую прослойку пользоваталей или наказывать других из-за чьих-то проблем.
Вы правы ровно на половину комментария и ровно на половину неправы.
Если вы делаете систему, ориентированную на массового пользователя, конечно, надо делать ее удобной и приятной большинству — тут вы правы.
Однако, даже 5% пользователей могут составлять существенную массу (сколько таких пользователей у Яндекса, например?). А масса пользователей — это деньги для владельца бизнеса. Поэтому есть прямая коммерческая выгода эти 5% пользователей при проектировании учесть и о них позаботиться.
Если вы делаете систему, ориентированную на массового пользователя, конечно, надо делать ее удобной и приятной большинству — тут вы правы.
Однако, даже 5% пользователей могут составлять существенную массу (сколько таких пользователей у Яндекса, например?). А масса пользователей — это деньги для владельца бизнеса. Поэтому есть прямая коммерческая выгода эти 5% пользователей при проектировании учесть и о них позаботиться.
Для чего выгодно? Для продавца открыток? Для цветочного магазина? Для спортивной одежды? Какая разница, если пользователь не увидит часть цветов? Вы же не забыли написать на кнопке «Купить»?
Простите, не понял, что вы хотели сказать. Может быть, изложите поподробнее?
И, если уж вспомнили кнопку Купить, то 1) не забыл написать, 2) написал так, чтобы надпись легко читалась на плохом мониторе, после вывода на печать, при неудобном освещении, при проблемах со зрением.
Потому что у человека с плохим монитором или нестандартным зрением есть деньги, которые он готов потратить. Незачем ему в этом мешать, выпендриваясь с оформлением кнопок :)
Потому что у человека с плохим монитором или нестандартным зрением есть деньги, которые он готов потратить. Незачем ему в этом мешать, выпендриваясь с оформлением кнопок :)
А чем первая картинка от второй отличается?:) А то гляжу-гляжу и не вижу разницы:)
Пользоваться сайтом одинаково нелегко как дальтоникам, так и нет. На скриншотах и на thesocialtester.co.uk/ даже обычному человеку очень сложно понять, где ссылка, а где обычные текст.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Не полагайтесь на цвет при проектировании интерфейсов