Simular el modo de lectura en la página web

Última actualización :

Después de días de búsqueda sin una sola opción o estudio concluyente (ni siquiera cercano) sobre el tema, decidí crear mi propia encuesta para acotarlo. Esta encuesta es solo para usuarios de GD.

Creé una página web completa para él y realmente espero que salga bien. Las opciones que he enumerado en esta encuesta provienen de diferentes estudios y opiniones (más pequeños).

POR FAVOR, tómese el tiempo para completar esto, tiene solo 2 campos de entrada y una selección de 1 de 10 opciones.

Tan pronto como tenga suficientes votos para crear estadísticas, se publicarán en la página y se anunciarán aquí.

la pagina de la encuesta

Publicación original:

Mientras diseñaba mi propio sitio web, la sección de artículos para ser exactos, pensé en crear una función que simule el modo de lectura en dispositivos Android/Samsung.

Quiero mantenerlo lo más simple posible, por lo tanto, mi función será una función jQuery UI que anime el color de fondo para calentarlo y el color de la fuente con la interacción del usuario.

[ de la actualización_2 a continuación ] También puedo ajustar mi función para que el modo de lectura se adapte a la fecha y la hora, teniendo en cuenta la diferencia de iluminación entre las estaciones y, digamos, 3 etapas del día.

¿Existe un estudio/teoría sobre el mejor color de fondo (amarillento) y color de fuente para leer?

Actualización_1

Zach Saucier No estoy de acuerdo en que la combinación de colores y fuentes dependa de la cultura. La fatiga ocular se ha asociado con la luz azul emitida por los dispositivos de visualización digital. Desde entonces, se han desarrollado muchas aplicaciones para aplicar un "filtro" que reduce la intensidad de la luz azul.

Glarminy.com tiene estudios sobre esto y también dicen:

Dependiendo de su elección de color de fondo/texto y modelo de pantalla digital, puede “filtrar” hasta el 75-95% de la luz azul en comparación con el texto negro sobre fondo blanco (estimación basada en datos de LEDMuseum y f.luxometer ) .

De lo anterior, no puedo controlar el modelo de pantalla digital del usuario, pero puedo hacer algo con el color de fondo/texto.

ingrese la descripción de la imagen aquí

Ryan Como dijiste, estoy tratando de brindarles a los usuarios la mejor experiencia posible, ya que la lectura extensa provocará fatiga visual. Mientras buscaba en Internet anoche, algunos estudios dicen que " las mejores opciones de color tienen un bajo contenido de luz azul: rojos, naranjas o amarillos para el texto y negro para el fondo ". [También de Glarminy.com].

Pero no voy a cambiar el color de fondo a negro ya que parece demasiado extremo. También he visto fondos amarillentos con grises de colores de texto verdes.

PD: Word 2013 aparentemente tiene una función de modo de lectura que convierte el "papel" en sepia [entre otras cosas]:

ingrese la descripción de la imagen aquí

Actualización_2

Tengo de f.luxometer al sitio web de f.lux . Es un software para mejorar tu vida , como dicen ellos. "Hace que el color de la pantalla de su computadora se adapte a la hora del día, cálido por la noche y como la luz del sol durante el día".

Además, su sitio web es un poco extremo con el color de fondo, pero es mucho más fácil de leer. Pruébelo, lea el texto de su página de inicio y luego cambie a otra pestaña con texto en blanco y negro. Tus ojos (al menos los míos) notarán la diferencia.

También puedo ajustar mi función para que el modo de lectura se adapte a la fecha y la hora, considerando la diferencia de iluminación entre estaciones y, digamos, 3 etapas del día.

Actualización_3

Después de buscar y leer mucho al respecto, llegué a la conclusión de que la mayoría de las aplicaciones simplemente agregan una especie de filtro sepia con propiedad de clic sobre el documento que está leyendo, por lo tanto, lo que hice fue:

  • Tomé una captura de pantalla de mi sitio web y la llevé dentro de PS
  • Se agregó un filtro de foto sepia de aproximadamente un 20% de densidad sobre él.
  • Usó la herramienta Cuentagotas para obtener los nuevos colores del fondo del cuerpo y del contenedor para que:
    • #fffse volvió hacia#f1ece8
    • #ebebebse volvió hacia#ded9d6

Y se ve algo como esto: ingrese la descripción de la imagen aquí

Está "bien" por ahora, hasta que encuentre un mejor enfoque para esto...

Nota al margen (un poco)

Mientras investigaba, encontré un estudio del Departamento de Diseño y Arquitectura de la Universidad de Chiba realizado en 146 estudiantes universitarios sobre los efectos de los colores de fondo en la experiencia del usuario al leer el sitio web .

En una de las pruebas, te mostraba un sitio web con un color de fondo (cada estudiante obtuvo solo uno de los cinco: blanco, rojo, verde, azul y amarillo) y se les dieron algunas tareas para hacer en la página.

Después de todas las pruebas, se les preguntó en un formulario cuánto tiempo creen que les tomó completarlas.

Aquí hay una tabla de error de tiempo para cada color (el error de tiempo en amarillo fue significativamente menor que todos los demás) y el papel completo

ingrese la descripción de la imagen aquí

La "mejor" combinación de color y fuente depende de la cultura, la luz, el dispositivo, etc. y, por lo tanto, votaré para cerrar esta pregunta según mi opinión.
¿Por qué emular la función integrada de un navegador? Deje que el navegador haga lo que hace el navegador. En cuanto a la legibilidad, hay mucho más que un color de fondo en particular.
@ZachSaucier No estoy de acuerdo con que no haya una mejor opción. La cultura tiene poco que ver con cómo se percibe la luz. La luz y el dispositivo son más un factor, pero me parece una tontería no considerar la mejor combinación debido a que el consumidor probablemente no lo mire en un dispositivo calibrado de todos modos.
También relacionado con otros intercambios: StackOverflow Dupe y UX StackExchange Dupe
@Ryan Los idiomas que hablan y las preferencias visuales tienen efectos....
También no estoy de acuerdo con ese duplicado en GD.
Dudo que el "modo de lectura" sea diferente debido al idioma. Parece tener más que ver con la biología (comodidad) que con las preferencias culturales o de color. ¡Pero de todos modos, Alin puede editar la pregunta para agregar estos detalles también! La pregunta es en realidad qué se considera un color "cómodo" y un color/contraste de fuente general para leer, y algunas fuentes sobre esto (por lo que entiendo). Es una pregunta interesante en realidad, la voté.
@ZachSaucier He actualizado la pregunta agregando más detalles para mostrar que no se basa en opiniones. Espero que estés de acuerdo. :)
@Ryan He actualizado la pregunta para agregar detalles, además, no estoy seguro de que el enlace GD que publicaste sea un duplicado. Arroja algo de luz sobre el tema, pero no responde del todo a mi pregunta.
@ go-junta He actualizado mu pregunta para agregar más detalles. Buscaré mucho más hoy y seguiré actualizando mis resultados de búsqueda. Espero obtener algunas buenas respuestas aquí también. Gracias
@Ryan, en realidad, hay una gran diferencia en el aspecto de los colores cuando comparas las tierras ecuatoriales y el norte de Europa, Alaska, etc. El papel blanco debe tener un color diferente en diferentes países. Creo que tengo una referencia a esto en alguna parte.
@joojaa Oye, gracias por unirte :)) Sería genial si tienes una referencia en alguna parte. Dependiendo de si, podría mejorar mi pregunta en base a eso. Por lo tanto, aumenta mis posibilidades de obtener lo que necesito: D/
No hay 'mejor'. Hay, en general, contraste 'insuficiente' y 'demasiado' entre los colores de primer plano y de fondo. Lo que son esas líneas específicas en la escala de contraste diferirá según el contexto y a quién le pregunte.
@ DA01 Si bien puede que no haya una "mejor" manera de hacer esto, ciertamente hay una mejor manera . Solo dejé de lado el hecho de que no lo sé y comencé a buscarlo. Y dado que nuestros ojos son biológicamente iguales y todos reaccionan de una forma u otra a las emisiones de luz azul... entiendes mi punto.
@Alin bueno, biológicamente lo mismo, pero funcionalmente , muy, muy diferente. :)
Dado que está tratando de probar la legibilidad en su encuesta, le sugiero que cambie el texto de su imagen de muestra a inglés en lugar de usar Lorem Ipsum.
@LeslieP. Probablemente tengas razón. Necesito encontrar un artículo o algún tipo de texto ficticio para reemplazarlo. Por cierto, ¡gracias por tomarse el tiempo para completar la encuesta!
@LeslieP. Acabo de encontrar un texto ficticio en inglés y lo agregué, ¡gracias una vez más!
Hay problemas con ese trabajo de investigación... a saber, que si bien el cambio de colores fue la variable cambiante, no se determina si realmente fue el color el problema principal. podría haber tenido (y probablemente tuvo) más que ver con el contraste.
En cuanto a su encuesta, va a tener el mismo problema... el contraste varía enormemente entre cada combinación de colores... entonces, ¿son los colores reales los que las personas eligen o un nivel particular de contraste?
Contraste = brillo en este caso, y una buena dosis de contraste Y los colores correctos hacen que sea más fácil o más relajante leer el texto en una pantalla. Hay buena información sobre esto aquí (del enlace que Alin publicó) justgetflux.com/research.html y se menciona que los azules (especialmente) y los verdes son los colores "menos relajantes". Así que tiene sentido ceñirse a los colores cálidos y sepias, y bajar el brillo a un nivel aceptable. Los resultados parecen mostrar que la mayoría de las personas eligieron la misma combinación de color/contraste. La muestra verde tiene un contraste similar al "ganador" pero aún no vino ex aequo

Respuestas (2)

alin,

Divulgación: me encontré con su pregunta porque estoy asociado con Glarminy al que se refirió en su pregunta. (Sin embargo, no sé nada sobre diseño web, así que espero que esto no sea completamente inútil).

¡Creo que la legibilidad y la elección del color del texto/fondo son un tema importante y la mayoría de las veces descuidado!

Trataré de decir brevemente lo que sé y creo que podría ayudarlo a tomar sus decisiones (si está interesado en una revisión más exhaustiva con referencias a trabajos de investigación, consulte esta publicación ).

Parece que al elegir colores con bajo contenido de luz azul está en el camino correcto, pero será difícil encontrar una solución "única para todos" porque nuestros ojos difieren.

Nuestros umbrales para el deslumbramiento incómodo (lo que tarde o temprano conduce a la fatiga visual de la computadora), y es esencialmente lo que está tratando de reducir/evitar, varían debido al hecho de que tenemos diferentes niveles de Densidad óptica del pigmento macular (MPOD ) . Consulte "Puntuación MPOD" en la imagen a continuación para tener una idea de su distribución (población de EE. UU.).

El pigmento macular (MP, también conocido como mancha amarilla) es un filtro en el ojo que filtra la luz azul para proteger a los fotorreceptores del daño.

Las personas con una MPOD alta (la MP absorbe/filtra/bloquea más luz azul) preferirán un fondo blanco/más claro, mientras que aquellas con una MPOD baja preferirán un fondo con un contenido de luz azul más bajo.

Es por eso que el experimento que está haciendo no será concluyente (como sucedió durante décadas con la investigación sobre si los anteojos de color amarillo mejoran o no la visión; ahora está claro que depende del MPOD de cada individuo). Probablemente esa sea también la razón por la que algunas personas no soportan f.lux, mientras que a otras les encanta.

A lo que intento llegar es a que su idea de dar a sus usuarios una opción es buena. Atenderá a aquellos con alto MPOD (negro sobre blanco) y bajo MPOD (negro sobre amarillo). Si quisiera mejorar eso, podría dar a sus usuarios la opción de aumentar o reducir el contenido de luz azul de su fondo y dejar que ellos determinen qué se siente más cómodo. (¿Pero eso es probablemente difícil de implementar?)

Espero que esto sea útil.

¡Hola, he estado esperando bastante tiempo por esta respuesta! Gracias por tomarte el tiempo de escribir, lo aprecio mucho!!! Si bien implementar un control deslizante que reduce ligeramente la luz azul de mi fondo puede ser más difícil de implementar, ahora que tengo más información sobre el tema, estoy más que dispuesto a apegarme a esto hoy y crear un script para ello. Quiero brindarles a mis lectores la mejor experiencia que puedan obtener de sus dispositivos. No quiero que mis decisiones se basen en lo difícil que es para mí, sino en lo fácil que será para mis visitantes.
Además, si no estoy pidiendo demasiado, me gustaría escribir un artículo completo sobre esto y creo que también sería una gran idea si pudiera hacer una pequeña entrevista sobre Glarminy, así que, si estaría dispuesto a responder algunas preguntas, por favor escríbeme para que pueda darte mi dirección de correo electrónico y podamos ponernos en contacto. Gracias otra vez !!!
Alin, me complacerá responder a sus preguntas. Lo siento por la respuesta tardía. Puede ponerse en contacto conmigo a través de glarminy.com/contact glarminy.com/contact .

Después de toda la investigación (parte de la cual agregué en mi pregunta) y la decisión de realizar mi propia Encuesta, los resultados hasta ahora, después de 150 votos (y aún contando) son:

#1

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

Algunas personas también han comentado que mientras durante el día prefieren la opción #1 dewriter2001.com (la que tiene 28 votos), durante la noche cambiarán a un color de fuente claro sobre fondo oscuro.

Algunos argumentaron que el verde ( menta ) es refrescante y agradable a la vista, llama la atención pero no molesta. Pero no muchos estuvieron de acuerdo (solo 9 personas). Sentí ganas de mencionarlo porque las personas que votaron por este color también comentaron y estaban alegres y también ansiosas por ayudar con la encuesta y obtener ayuda de sus amigos, aunque nosotros no. No se conocen. Tal vez esto pueda estar relacionado con la influencia del color.

ingrese la descripción de la imagen aquí

Continuaré con la encuesta, mi objetivo es más de 1000 participantes y también seguiré actualizando esta respuesta. Si desea ayudar, solo toma un minuto y no requiere ninguna información personal, solo una identificación o iniciales, aunque no se requiere, también se agradecería el país y elegir una de las diez opciones.

El enlace renaing encuesta.imagins.ro

PD: Es demasiado pronto para sacar conclusiones respecto al factor cultural, eso lo dejaré para cuando tenga suficientes votos.

Además, AQUÍ está mi publicación de 9gag pidiendo ayuda, hay más de 60 comentarios para que pueda ver reacciones y discusiones sobre el tema.

Sin embargo, sería bueno tener una razón para votar negativamente.
No voy a votar en contra, porque hay esfuerzo aquí, pero al final del día, esto es realmente solo un generador de opinión. Y las opiniones ciertamente están bien, pero esto no debe confundirse con datos reales que serían aplicables en otro contexto. Tenga en cuenta que muchas aplicaciones de 'modo de lectura' simplemente permiten a los usuarios elegir entre una variedad de opciones... es decir, porque hay muchas opiniones involucradas.
Simular el modo de lectura en la página web
RespuestasAquíPolítica de privacidad1y, 0v