Upload
others
View
9
Download
0
Embed Size (px)
Citation preview
Psicología y teoría del color en el desarrollo de aplicaciones
web Ing. Milagros Quispe
¿Qué es el color? • El color puede ayudar al diseñador a captar la
atención del espectador y a comunicar información en un entorno visual saturado.
• El color también puede ayudar al espectador a realizar rápidamente una asociación correcta o atener la reacción adecuada ante la marca de un producto o servicio.
Características del color Tono: La propia cualidad que tiene el color. Saturación: También se conoce como intensidad el color. Fuerza o la pureza de un color sin añadirle ni blanco ni negro. Brillo: Se entiende como la capacidad de un color para reflejar la luz blanca que incide en él. Alude a la claridad u oscuridad de un tono. Luminosidad: Es el grado de claridad u obscuridad de un color. Cuando un color lo mezclamos con blanco da como resultado ese mismo color, pero más claro.
Psicología del color
Psicología del color
Influencia en los
sentimientos
Diferentes reacciones
y emociones
Comprender la
información
Comunica
significado
Un cliente compra un producto servicio
Fuente: http://blog.lateralmind.com.ar/2015/05/psicologia-del-color-significado-y-usos.html
La psicología del color y el género
Colores oscuros Colores claros
Colores vivos Colores suaves
Colores oscuros: mezclados con negro
Colores claros: mezclados con blanco
Significado de la psicología del color
Impresión
• Se percibe en un anuncio.
Expresión
• Cada color expresa un significado
Construcción
• La publicidad adquiere el valor de comunicar una idea
Significado de la psicología del color
Color
Producen ciertas sensaciones
Afectan psicológicamente
Al ver un determinado color o anuncio ya sabes
de quien y qué está hablando
Experiencia del usuario • Conjunto de factores y elementos relativos a la interacción del
usuario, con un entorno o dispositivo concretos, cuyo resultado es la generación de una percepción positiva.
¿Por qué es importante tomar en cuenta la “Experiencia del Usuario” al desarrollar
aplicaciones, interfaces y sistemas?
Beneficios de considerar la experiencia del usuario
• Ayuda a desarrollar aplicativos Web que el usuario quiere y necesita.
• Ventaja estratégica para mejorar el aplicativo Web.
• Reduce los tiempos de desarrollo al definir los requerimientos pensando en los objetivos del negocio y necesidades del usuario.
Cosas que odian los usuarios al utilizar una aplicación Web • Aprender a utilizar nuevas funciones. • Las acciones repetidas. • Tener que esperar. • Tener que buscar. • Tener que leer.
• Diseño monótono o muy recargado (“look & feel”) • Restricciones a otras plataformas / browsers • Funcionalidad rígida • Errores • Brechas en la seguridad
¿Cuáles son los efectos de lo que se esta haciendo?
¿Cuáles son las intenciones
cuando se esta diseñando
algo?
¿Qué es lo que los diseños de un aplicativo Web dicen?
Retos de Usabilidad
• Escalabilidad.
•Diseño Visual. • Comprensión.
• Interactividad.
• Manejo de cambios.
Diseño Visual • Los monitores y los dispositivos móviles pueden
mostrar los colores de manera diferente.
• El mayor control del usuario influye en el modo en que realmente ve los colores. Por ejemplo, si reduce el brillo en el monitor de un ordenador, todo aparecerá apagado.
• Por lo general, se debe diseñador para el espectador medio, aún sabiendo que otras personas pueden tener experiencias distintas.
Diseño Visual – usuarios con discapacidad • Aún hay barreras para personas con discapacidad.
• Muchas páginas se pueden leer utilizando JAWS y otras tecnologías.
• JAWS (Job Access With Speech) es un software lector de pantalla para ciegos o personas con visión reducida.
Diseño Visual – usuarios con discapacidad
Las páginas Web son por lo general bastante
visuales
Tienen una gran cantidad de gráficos que no son etiquetados y también
botones que no son etiquetados
W3C (World Wide Web Consortium 3) tiene estándares para el
desarrollo de sitios Web para hacer los sitios
compatibles para que personas con problemas de visión puedan tener
acceso.
Añadir un color llamativo que resalte y convierta
El naranja llama la atención y
apremia a hacer click en el botón.
También se complementa con el
color principal, el azul.
¿Cómo las personas que tienen alguna discapacidad visual utilizan una aplicación
Web?
DALTONISMO • Es un trastorno de la visión en el que hay dificultad para
diferenciar los colores.
• La primera referencia sobre esta condición se debe al químico británico John Dalton.
DALTONISMO • Defecto en la retina u otras partes nerviosas del ojo.
La luz ingresa al ojo.
Las células sensoriales
(fotorreceptores) de la retina reaccionan
en respuesta a la luz. Son de dos tipos: conos y bastones.
El Nervio óptico envía la
información procesada del
color al cerebro
DALTONISMO
Historias de Usuarios Web: Como personas con discapacidad utilizan la Web
Sr. Lee, comprador Web con Daltonismo
• Desea comprar ropa, equipos y música. Como siempre lo hace, esta comprando el línea. No puede distinguir entre los colores verde y rojo.
Fuente: https://www.w3.org/WAI/intro/people-use-web/stories#shopper
• Tiene dificultad leyendo textos en muchas páginas Web.
• Cuando utilizo por primera vez la Web, le pareció que los textos e imágenes en muchas páginas Web utilizaban pobres colores de contraste, para el todos utilizaban similares contrastes de marrones.
• En algunos casos los precios con ofertas aparecían en rojo, pero todos los textos lucían de color marrón para el.
Fuente: https://www.w3.org/WAI/intro/people-use-web/stories#shopper
El Sr. Lee prefiere sitios web: Contraste de color.
Nombres
Señales
COLORES A VISTA NORMAL
COLORES VISTOS POR UN DALTÓNICO
DISEÑO DE PÁGINAS WEB PARA DALTÓNICOS Interfaz gráfica:
La interface es fundamental para hacer un sitio usable, seguro satisfactorio, funcional y a la larga más placentero para el usuario. La psicología del color es un aspecto que no
debe dejarse pasar porque cada color tiene su significado e influyen en los visitantes.
Contraste en colores.
¿Cómo lo solucionó?
Ajustes
•Texto
•Enlaces
•Fondo
Configuración •Contrastes
Pero…
No funciona para todos los
sitios web
Encontró:
Información fiable sobre colores de productos
Posibilidad de anular
colores
Información textual de los
precios y descuentos
Validadores y herramientas para consultorías de accesibilidad y usabilidad
Contraste de color
No solo se base en color
Teniendo en cuenta
las combinaci
ones
Diferentes pantallas
Colores de fondo y primer plano
W3C • El Consorcio WWW, en inglés: World Wide Web Consortium (W3C), es
un consorcio internacional que genera recomendaciones y estándares que aseguran el crecimiento de la World Wide Web a largo plazo.
WCAG
• Web Content Accessibility Guidelines Las Pautas de Accesibilidad para el Contenido Web (WCAG) en la Web del World Wide Web Consortium (W3C).
• Es fundamental para la accesibilidad es el uso de estándares web abiertos para garantizar el acceso universal a los sitios Web: usuarios con discapacidad visual.
Evaluar el contraste de color
• Accesibilility Color Wheel Permite seleccionar un color de fondo y un color de texto para analizar si el contraste es el recomendado por las WCAG, pudiendo elegir el algoritmo de las WCAG 1.0 o el de las WCAG 2.0.
Evaluar el contraste de color
• AccessColor - Online Tool for Colour Contrast
Genera un informe sobre el contraste de los colores de fondo y texto de la página indicada.
Vischeck
Nos permite comprobar que la información no está
basada en el color y que una persona con problemas de
visión podrá interactuar correctamente con la
página.
Se puede descargar un plugin para Photoshop
Una página tal y como la verían distintos tipos de daltónicos:
deuteranope (es ciego al verde, ve mal el rojo y bien el azul), un
tritanope (no ve el azul y sí el rojo y el verde) o un protanope (es ciego al rojo, ve mal el verde
y conserva bien la visión del azul.)
Cómo combinar colores para tus aplicaciones, sistemas ó páginas web
• Paletton.com
Esta herramienta permite realizar combinaciones de colores monocromáticas, entre 2 colores paralelos, de tres y hasta de cuatro.
Imgr.co • Aplicación web para conocer los colores exactos de una imagen
Gracias