Accesibilidad, usabilidad y colores

lucasan · #1 (**permalink**) 19/01/2009, 13:36

Hola tengo una consulta, no sabía si ponerla en Diseño, en Sugerencias para tu web, pero como mi duda es por accesibilidad y usabilidad mas que por estética la pongo acá.

Estoy haciendo mi sitio (aun está crudo, no tiene ni un 10% del total) pero quiero decidirme por los colores a usar.

Por un lado he hecho una muestra en negro, ha sido la que mas le agrada a quienes se las he mostrado, y otra mas clara, esta no ha recibido un solo voto

Mi consulta es acerca de los colores, si bien es cierto que a muchos les agradó la negra, a mi se me hace que es dificil leer en un sitio oscuro, por eso cree la clara.

Les dejo las muestras y espero sus opiniones, cual de las dos les parece mas Usable y accesible en cuanto a colores?

Oscura http://lucasan.com/lucas/index2.php

Clara http://lucasan.com/lucas/

Gracias a todos.

PD: Quiero poner un enlace para cambiar de hoja de estilo, asi se pueda pasar de la clara a la oscura sin problema, pero debo decidir cual dejar como principal.

Aresillo · #2 (**permalink**) 19/01/2009, 15:58

no creo que sea de accesibilidad... aunque seguro que se puede decir algo de los colores para las lecturas...

Bajo mi parecer... me gusta más la clara con fondo de body #000 o #333 o uno entre medias.

Ares
PS: me gusta el favicon!

lucasan · #3 (**permalink**) 19/01/2009, 21:07

Si, mi pregunta iba por la facilidad o no para leer.

Cita:

Iniciado por Aresillo

PS: me gusta el favicon!

Gracias

Saludos Aresillo

Mikmoro · #4 (**permalink**) 20/01/2009, 02:14

Hce un tiempo leí un estudio que se hizo en no sé qué universidad con un montón de alumnos justamente sobre colores, tamaños y fuentes. Además de muchos datos interesantes sobre velocidad y comprensión de la lectura, la conclusión principal fue que el texto oscuro sobre fondo claro, la fuente Verdana y el tamaño de 14-16px eran los que mejores resultados ofrecían en todos los terrenos.
Lástima que hará un par de años y no te puedo dar más referencia.

lucasan · #5 (**permalink**) 20/01/2009, 07:46

Gracias Mikel, si, es lo que pienso, se facilita mas la lectura en el claro.

Hasta ahora a quienes he puesto a escoger (personas sin experiencia en el medio) se han decantado por el oscuro, pero es mas por un impacto que produce, mas no por que sea fácil su lectura; creo que tendré que crear una especie de híbrido entre los dos. El impacto del uno y la facilidad de lectura del otro.

Gracias

Mikmoro · #6 (**permalink**) 20/01/2009, 07:54

Como decía, en el ensayo se daba mucha importancia a la posterior evaluación de la comprensión de lo leído, dando resultados sorprendentes. Fondo claro con texto oscuro, sin duda, orientado al contenido; orientado a la estética, es otro asunto.

lucasan · #7 (**permalink**) 20/01/2009, 08:09

Cita:

Iniciado por Mikmoro

sin duda, orientado al contenido; orientado a la estética, es otro asunto.

100% deacuerdo, y esa es mi intención, es mas los proyectos que hago no se caracterizan por ser "obras de arte contemporáneo", mis diseños suelen ser simples y amigables.

Soy de los que piensa que un sitio web es un medio de comunicación y no un mural artístico (a menos que se requiera, como en el sitio web de un artista o similar).

Gracias por tu aporte Mikel.

facundocorradini · #8 (**permalink**) 20/01/2009, 12:36

Hola Lucasan,

Mi recomendación es que te alejes de los esquemas como el primero que muestras.

Está comprobado que los sitios con esquemas claro-sobre-oscuro sólo traen problemas, ya que disminuyen la velocidad de lectura en un 28% y causan fatiga visual al 60% de las personas.

Por lo tanto, usar un esquema así, si bien es más "lindo" para los diseñadores, provoca mayores tasas de rebote, menor fidelización de usuarios, y a la larga también te hace desaprovechar posibilidades de posicionamiento.

Mi recomendación en cuanto a los colores es usar siempre texto gris bien oscuro sobre fondo blanco, o alguna otra "oscuro sobre claro" que sea agradable a la vista.

Por otra parte, los colores pueden influir fuertemente en tus conversiones. Usar los "call to action" en el color complementario al color base del sitio hace que este quede destacado, y mejor aún si utilizas el color cálido sobre su frío complementario. Por ejemplo, un botón naranja sobre un fondo degradado en azul.

Volviendo a tu sitio, creo que lo mejor es la segunda opción, cambiando el background-color del div "contenedor" a #FFFFFF.

saludos!

Mikmoro · #9 (**permalink**) 20/01/2009, 12:49

Yo sin embargo prefiero dar un punto muy suave de crudo o gris, porque el fondo completamente blanco acaba siendo molesto, saturando la retina.

daPhyre · #10 (**permalink**) 20/01/2009, 13:04

Una sugerencia: ¿La cabecera negra y el contenido gris claro, no dará el impacto y la facilidad de lectura deseada?

Definitivamebnte no te recomiendo el fondo negro, por muy atractivo que parezca. A mi también me encanta el primer impacto, pero no me agrada detenerme a leerlo. Suerte

Aresillo · #11 (**permalink**) 20/01/2009, 13:06

De hecho somos muchos los que tenemos configurado el gris por defecto para fondos de webs y aplicaciones...

Ares

lucasan · #12 (**permalink**) 20/01/2009, 14:15

Gracias a todos por sus comentarios y aportes, me son de gran ayuda.

facundocorradini gracias por ese aporte mas detallado, aunque no me agrada el blanco de fondo, concuerdo con Mikmoro en que cansa la retina demasiado brillo.

daPhyre probaré tu sugerencia, aunque me gustaría poder mantener una sola tonalidad, me parece mas sobrio y elegante.

Aresillo, es cierto, blanco total no me gusta, me cansa.

gracias a todos.

tataNZ · #13 (**permalink**) 20/01/2009, 14:45

Creo que si en la segunda opcion cambias el color del contenedor principal a negro u otro color bien oscuro, vas a combinar ambas opciones. El impacto del negro, y la facilidad de leer el texto en color oscuro sobre claro.

facundocorradini · #14 (**permalink**) 20/01/2009, 15:52

Es una cuestión de contrastes. Si usas fondo blanco con un gris oscuro, por ejemplo #222 o #333; es lo ideal desde la lectura. Blanco absoluto con negro absoluto (#FFF y #000) tienen un contraste demasiado elevado entre sí y por eso causan el rechazo del que ustedes hablan. Pero si se usa inteligentemente, la base blanca es la mejor: mira sino los grandes sitios, desde Google, Facebook, MySpace, Yahoo, Hi5, Wordpress, etc etc. todos ellos usan fondo blanco

Mi comentario venía por el lado de que tu segundo ejemplo tiene muy poco contraste entre figura y fondo. Tal vez buscar un fondo que sea acerque más al blanco (sin ser tampoco blanco absoluto), estaría más que bien.

facundocorradini · #15 (**permalink**) 20/01/2009, 15:54

Venga, bajenle un poquito el brillo al monitor! :P

Mikmoro · #16 (**permalink**) 20/01/2009, 16:56

Que esos grandes sitios usen el fondo blanco no significa necesariamente que sea lo mejor, entre otras cosas porque algunos de ellos no tienen mucho interés en que lean sus contenidos o no están dedicados a lectura y comprensión, o simplemente a mucho tiempo seguido leyendo, como el asunto del que yo hablaba.
También word usa un fondo completamente blanco, y al cabo de un tiempo es agotador. Tiene además perjuicos para personas con determinadas afecciones visuales.

pao01 · #17 (**permalink**) 20/01/2009, 17:30

Me gusta mucho más la propuesta en claro.
Te quedó muy bonito el logo

facundocorradini · #18 (**permalink**) 20/01/2009, 17:50

Cita:

Iniciado por Mikmoro

Que esos grandes sitios usen el fondo blanco no significa necesariamente que sea lo mejor, entre otras cosas porque algunos de ellos no tienen mucho interés en que lean sus contenidos o no están dedicados a lectura y comprensión, o simplemente a mucho tiempo seguido leyendo, como el asunto del que yo hablaba.

Ok, entonces que tal CNN.com, BBC.co.uk, lanacion.com, clarin.com .... Si de lectura se trata, la base blanca (o algo extremadamente cercano al blanco) es lo mejor.

Hay estudios universitarios que respaldan lo que digo, y en la experiencia lo he comprobado.

lucasan · #19 (**permalink**) 20/01/2009, 17:59

Cita:

Iniciado por pao01

Me gusta mucho más la propuesta en claro.
Te quedó muy bonito el logo

Gracias, el crédito de ese logo se lo llevan los amigos de "sugerencias para tu diseño" en especial T4ke0veR que me lo rediseñó casi por completo

Por otro lado, hoy revisé los colores con una herramienta que provee la W3C para medir el contraste y el brillo y dice que es óptimo.

En definitiva, me quedé con la clara

Mil gracias.

Mikmoro · #20 (**permalink**) 20/01/2009, 18:06

Cita:

Iniciado por facundocorradini

Ok, entonces que tal CNN.com, BBC.co.uk, lanacion.com, clarin.com .... Si de lectura se trata, la base blanca (o algo extremadamente cercano al blanco) es lo mejor.

Bueno, tu habías dicho blanco, yo había dicho:

Cita:

Yo sin embargo prefiero dar un punto muy suave de crudo o gris, porque el fondo completamente blanco acaba siendo molesto,

pero ahora con "o algo extremadamente cercano al blanco" cubres todos los flancos. No sé entonces de qué discutimos si dices: "o blanco o como tú dices, casi blanco con un tono muy suave de X".

Por otro lado no creo que CNN ni BBC hayan esperado nunca que una persona pase muchas horas seguidas leyendo sus páginas, por lo que no creo que se hayan apoyado en estudios oftlamológicos para elegir el color de fondo. Yo sin embargo paso muchas horas al día trabajando con word y acrobat, por lo que sé de qué hablo con el fondo blanco. Efectivamente puedo haberme excedido con mi recomendación a lucasan sobre el fondo blanco, ya que no se espera que nadie pase leyendo los textos de su web las horas que yo paso frente a pantallas de fondo blanco, pero realmente se basaba en la experiencia a largo plazo sobre la comodidad en la lectura.

Creo que un puntito de color apenas perceptible si no lo comparas con el blanco total puede resultar suficiente para eliminar el "resplandor" del blanco #FFF.

Es mi opinión.

Aresillo · #21 (**permalink**) 20/01/2009, 18:07

Cita:

Iniciado por lucasan

Por otro lado, hoy revisé los colores con una herramienta que provee la W3C para medir el contraste y el brillo y dice que es óptimo.

Nos das la url... y si no procede ponerla por aquí, me las pasas por MP??

Gracias!

Ares

lucasan · #22 (**permalink**) 20/01/2009, 18:14

http://www.visionaustralia.org.au/info.aspx?page=628

Esa es la url Aresillo, voy a revisar si nadie lo ha posteado en el foro y si es asi lo posteo.

Saludos.

Aresillo · #23 (**permalink**) 20/01/2009, 18:24

Muchas gracias!
Lo aplicaré a la competencia de CSS

Ares

Phil01Asthenia · #24 (**permalink**) 26/01/2009, 08:40

Me gusta más la opción Clara http://lucasan.com/lucas/ Los colores más usables y el texto mejor percibirse