Имитация режима чтения на веб-странице

Последнее обновление :

После нескольких дней поиска без единого окончательного (даже близкого) варианта или исследования по теме я решил создать свой собственный опрос, чтобы сузить его. Этот опрос предназначен только для пользователей GD.

Я создал целую веб-страницу для этого и очень надеюсь, что все получится. Варианты, которые я перечислил в этом обзоре, взяты из разных (небольших) исследований и мнений.

ПОЖАЛУЙСТА, найдите время, чтобы завершить это, у него есть только 2 поля ввода и выбор 1 из 10 вариантов.

Как только у меня будет достаточно голосов для создания статистики, они будут размещены на странице и объявлены здесь.

Страница опроса

Оригинальный пост:

При разработке собственного веб-сайта, а точнее раздела статей, я подумал о создании функции, имитирующей режим чтения на устройствах Android/Samsung.

Я хочу, чтобы это было как можно проще, поэтому моей функцией будет функция пользовательского интерфейса jQuery , которая анимирует цвет фона, чтобы сделать его более теплым, и цвет шрифта при взаимодействии с пользователем.

[ из update_2 ниже ] Я также могу настроить свою функцию, чтобы режим чтения адаптировался к дате и времени, учитывая разницу в освещении между сезонами и, скажем, 3 этапами дня.

Есть ли исследование/теория относительно лучшего цвета фона (желтоватого) и цвета шрифта для чтения?

Обновление_1

Zach Saucier: Я не согласен с тем, что сочетание цвета и шрифта зависит от культуры. Напряжение глаз связано с синим светом, излучаемым цифровыми дисплеями. С тех пор было разработано множество приложений для применения «фильтра», уменьшающего интенсивность синего света.

У Glarmyny.com есть исследования по этому поводу, и они также говорят:

В зависимости от вашего выбора цвета фона/текста и модели цифрового экрана он может «фильтровать» до 75-95% синего света по сравнению с черным текстом на белом фоне (оценка на основе данных LEDMuseum и люксометра ) .

Исходя из вышеизложенного, я не могу управлять цифровой моделью экрана пользователя, но я могу что-то сделать с цветом фона/текста.

введите описание изображения здесь

Райан. Как вы сказали, я пытаюсь предоставить пользователям наилучшие возможности, поскольку продолжительное чтение вызывает напряжение глаз. Во время поиска в Интернете прошлой ночью некоторые исследования говорят, что « наилучший выбор цвета имеет низкое содержание синего света: красный, оранжевый или желтый для текста и черный для фона ». [Также от Glarmyny.com].

Но я не собираюсь менять цвет фона на черный, так как это выглядит слишком экстремально. Я также видел желтоватый фон с оттенками серого из зеленого цвета текста.

PS: Word 2013, по-видимому, имеет функцию режима чтения, которая превращает «бумагу» в сепию [среди прочего]:

введите описание изображения здесь

Обновление_2

У меня есть с f.luxometer на сайте f.lux . Это программное обеспечение, чтобы сделать вашу жизнь лучше , как они говорят. «Это заставляет цвет дисплея вашего компьютера адаптироваться к времени дня, теплым ночью и солнечному свету днем».

Кроме того, их веб-сайт довольно экстремальный с фоновым цветом, но его намного легче читать. Просто попробуйте, прочитайте текст с их домашней страницы , а затем переключитесь на другую вкладку с черным текстом на белом фоне. Ваши глаза (по крайней мере, мои) почувствуют разницу.

Я также могу настроить свою функцию, чтобы режим чтения адаптировался к дате и времени, учитывая разницу в освещении между сезонами и, скажем, 3 этапами дня.

Обновление_3

После многого поиска и прочтения я пришел к выводу, что большинство приложений просто добавляют своего рода фильтр сепии со свойством клика по документу, который вы читаете, поэтому я сделал следующее:

  • Я сделал скриншот своего сайта и поместил его в PS
  • Добавлен фильтр Sepia Photo с плотностью около 20% поверх него.
  • Используйте инструмент «Пипетка», чтобы получить новые цвета фона тела и фона контейнера, чтобы:
    • #fffповернулся к#f1ece8
    • #ebebebповернулся к#ded9d6

И это выглядит примерно так: введите описание изображения здесь

Пока все в порядке, пока я не найду лучший подход к этому.

Дополнительное примечание (вроде)

Во время своего исследования я обнаружил исследование, проведенное кафедрой дизайна и архитектуры Университета Тиба на 146 студентах бакалавриата, посвященное влиянию цветов фона на опыт пользователя при чтении веб-сайта .

В одном из тестов он показывал вам веб-сайт с фоновым цветом (каждый студент получал только один из пяти: белый, красный, зеленый, синий и желтый) и давал несколько заданий на странице.

После всех тестов их спросили в форме, сколько времени, по их мнению, им потребовалось для их выполнения.

Вот диаграмма временной ошибки для каждого цвета (временная ошибка желтого цвета была значительно меньше, чем для всех остальных) и всей статьи.

введите описание изображения здесь

«Лучшая» комбинация цвета и шрифта зависит от культуры, освещения, устройства и т. д., и поэтому я голосую за то, чтобы закрыть этот вопрос как основанный на мнении.
Зачем эмулировать встроенную функцию браузера? Пусть браузер делает то, что делает браузер. Что касается удобочитаемости, это гораздо больше, чем определенный цвет фона.
@ZachSaucier Я не согласен с тем, что лучшего варианта нет. Культура имеет мало общего с тем, как воспринимается свет. Свет и устройство являются более важными факторами, но мне кажется очень глупым не рассматривать наилучшее сочетание из-за того, что потребитель, вероятно, все равно не увидит его на калиброванном устройстве.
Возможный дубликат: graphicdesign.stackexchange.com/questions/33819/…
Также связано с другими биржами: StackOverflow Dupe и UX StackExchange Dupe.
@Ryan Языки, на которых они говорят, и визуальные предпочтения влияют....
Также я не согласен с этим дубликатом на GD
Я сомневаюсь, что «режим чтения» отличается из-за языка. Кажется, это больше связано с биологией (комфортом), чем с цветовыми/культурными предпочтениями. Но в любом случае, Алин может отредактировать вопрос, чтобы добавить и эти детали! На самом деле вопрос заключается в том, что считается «удобным» цветом и общим цветом / контрастом шрифта для чтения, и в некоторых источниках об этом (насколько я понимаю). На самом деле это интересный вопрос, я проголосовал за него.
@ZachSaucier Я обновил вопрос, добавив больше деталей, чтобы показать, что он не основан на мнении. Надеюсь, вы согласны. :)
@Ryan Я обновил вопрос, чтобы добавить подробности, а также я не уверен, что ссылка на GD, которую вы разместили, является дубликатом. Это проливает некоторый свет на тему, но не совсем отвечает на мой вопрос.
@go-junta Я обновил свой вопрос, чтобы добавить больше деталей. Сегодня я буду искать намного больше и буду обновлять результаты поиска. Надеюсь получить хорошие ответы и здесь. Спасибо
@Ryan на самом деле есть большая разница в том, как выглядят цвета, когда вы сравниваете экваториальные земли и северную Европу, Аляску и т. Д. Белая бумага должна быть разного цвета в разных странах. Я думаю, что у меня есть ссылка на это где-то.
@joojaa Эй, спасибо, что присоединились :)) было бы здорово, если бы у вас была ссылка. В зависимости от того, если бы я мог улучшить свой вопрос на его основе. Поэтому увеличиваю свои шансы получить то, что мне нужно :D/
Нет «лучшего». Обычно существует «недостаточный» и «слишком большой» контраст между передним и фоновым цветами. Что представляют собой эти конкретные линии в шкале контраста, будет различаться в зависимости от контекста и того, кого вы спросите.
@ DA01 Хотя может и не быть «лучшего» способа сделать это, безусловно, есть лучший способ . Я лишь отбросил в сторону то, что я этого не знаю, и начал искать. И поскольку наши глаза биологически одинаковы, и все они так или иначе реагируют на излучение синего света... вы поняли мою мысль.
@ Алин, ну, биологически то же самое, но функционально очень, очень разные. :)
Поскольку вы пытаетесь проверить удобочитаемость в своем опросе, я настоятельно рекомендую изменить текст на вашем образце изображения на английский вместо использования Lorem Ipsum.
@ЛеслиП. Вы, наверное, правы. Мне нужно найти статью или какой-то фиктивный текст для замены. Кстати, спасибо, что нашли время заполнить анкету!
@ЛеслиП. Только что нашел фиктивный текст на английском и добавил его, еще раз спасибо!
В этой исследовательской работе есть проблемы ... а именно, что, хотя изменение цвета было изменяющейся переменной, не определено, действительно ли это был цвет, который был основной проблемой. это могло быть (и, вероятно, было) больше связано с контрастом.
Что касается вашего опроса, у него будет та же проблема... контраст сильно различается между каждой цветовой комбинацией... так что это фактические цвета, которые выбирают люди, или определенный уровень контраста?
Контраст = яркость в данном случае, хорошая доза контраста И правильные цвета облегчают или расслабляют чтение текста на дисплее. Здесь есть некоторая полезная информация об этом (из ссылки, опубликованной Алин) justgetflux.com/research.html , и там упоминается, что синий (особенно) и зеленый - «наименее расслабляющие» цвета. Так что имеет смысл придерживаться теплых тонов и сепии, а яркость понизить до приемлемого уровня. Результаты показывают, что большинство людей выбрали одно и то же сочетание цвета и контраста. Зеленый образец имеет аналогичный контраст с «победителем», но все же не пришел ex aequo.

Ответы (2)

Алин,

Раскрытие информации: я наткнулся на ваш вопрос, потому что я связан с Glarmyny , о котором вы упомянули в своем вопросе. (Я ничего не знаю о веб-дизайне, поэтому надеюсь, что это не совсем бесполезно).

Я считаю удобочитаемость и выбор цвета текста/фона важной темой, которой в большинстве случаев пренебрегают!

Я постараюсь кратко изложить то, что я знаю и думаю, может помочь вам принять решение (если вам интересен более подробный обзор со ссылками на научные работы, смотрите этот пост .

Кажется, что выбирая цвета с низким содержанием синего света, вы на правильном пути, но будет сложно найти универсальное решение, потому что наши глаза различаются.

Наши пороги дискомфортных бликов (что рано или поздно приводит к компьютерному напряжению глаз) и, по сути, то, что вы пытаетесь уменьшить / избежать, различаются из-за того, что у нас разные уровни оптической плотности макулярного пигмента (MPOD ) . См. «Оценка MPOD» на изображении ниже, чтобы получить представление о его распределении (население США).

Макулярный пигмент (MP, также известный как желтое пятно) представляет собой фильтр в глазу, который отфильтровывает синий свет, чтобы защитить фоторецепторы от повреждения.

Люди с высоким MPOD (MP поглощает/фильтрует/блокирует больше синего света) предпочтут белый/более светлый фон, в то время как люди с низким MPOD предпочтут фон с меньшим содержанием синего света.

Вот почему эксперимент, который вы проводите, не будет окончательным (как это было в случае с исследованием того, улучшают ли желтые тонированные очки зрение или нет — теперь ясно, что это зависит от ОПМП каждого человека). Возможно, поэтому некоторые люди терпеть не могут f.lux, а другим он нравится.

Что я пытаюсь понять, так это то, что ваша идея предоставить пользователям выбор — хорошая идея. Он будет обслуживать людей с высоким MPOD (черный на белом) и низким MPOD (черный на желтом). Если вы хотите улучшить это, вы можете дать своим пользователям возможность увеличить или уменьшить содержание синего света на вашем фоне и позволить им определить, что им наиболее удобно. (Но это, вероятно, сложно реализовать?)

Я надеюсь, что это полезно.

Привет, я долго ждал этого ответа! Спасибо, что нашли время написать, мне очень приятно!!! Хотя реализовать слайдер, который немного уменьшает синий свет на моем фоне, может быть сложнее, теперь, когда у меня есть больше информации по этому вопросу, я более чем готов придерживаться этого сегодня и создать сценарий для него. Я хочу дать своим читателям лучший опыт, который они могут получить от своих устройств. Я не хочу, чтобы мои решения основывались на том, насколько это тяжело для меня, но на том, насколько легко это будет для моих посетителей.
Кроме того, если я не прошу слишком многого, я хотел бы написать об этом целую статью, и я думаю, что было бы неплохо, если бы я мог сделать небольшое интервью о Глармини, поэтому, если вы готовы ответить на некоторые вопросы, пожалуйста, напишите мне, чтобы я мог дать вам свой адрес электронной почты, и мы могли войти в контакт. Еще раз, спасибо !!!
Алина, буду рада ответить на ваши вопросы. Простите за поздний ответ. Вы можете связаться со мной через glarminy.com/contact glarminy.com/contact .

После всех исследований (часть которых я добавил в свой вопрос) и решения о проведении моего собственного опроса результаты на данный момент, после 150 голосов (и все еще подсчитываются):

#1

введите описание изображения здесь введите описание изображения здесь

Некоторые люди также отметили, что в то время как днем ​​они предпочитают вариант № 1 Writer2001.com (тот, который набрал 28 голосов), ночью они меняют цвет шрифта на светлый на темном фоне.

Некоторые утверждали, что зеленый ( мятный ) освежает и приятен для глаз, привлекает внимание, но не раздражает. Но согласились не многие (всего 9 человек). Мне захотелось упомянуть об этом, потому что люди, проголосовавшие за этот цвет, тоже прокомментировали и были веселы, а также стремились помочь с опросом и получить помощь от своих друзей, хотя мы этого не сделали. не знаем друг друга. Возможно, это связано с влиянием цвета.

введите описание изображения здесь

Я продолжу опрос, моя цель - более 1000 участников, а также буду обновлять этот ответ. Если вы хотите помочь, это займет всего одну минуту и ​​не требует никакой личной информации, только удостоверение личности или инициалы, хотя и не требуется, страна также будет признательна и выберете один из десяти вариантов.

Ссылка, переименованная в Survey.imagins.ro

PS: Пока рано делать какие-либо выводы относительно культурного фактора, я оставлю это до тех пор, пока не наберу достаточно голосов.

Кроме того, ЗДЕСЬ мой пост 9gag с просьбой о помощи, там более 60 комментариев, так что вы можете увидеть реакции и обсуждения по теме.

Хотя причина для понижения голоса была бы хорошей.
Я не собираюсь минусовать, потому что здесь есть усилия, но, в конце концов, это просто генератор мнений. И мнения, конечно, хороши, но их не следует путать с фактическими данными, которые можно было бы применить в другом контексте. Обратите внимание, что многие приложения «режима чтения» просто позволяют пользователям выбирать из множества вариантов... а именно потому, что здесь задействовано много мнений.
Имитация режима чтения на веб-странице
СпросиСетьПолитика конфиденциальности1y, 0v