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