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.
 Influencia

Psicología del color en los

sentimien
tos

Un cliente Diferentes
compra un reacciones
producto y
servicio emociones
Psicología
del color

Comunic Compren
a der la
significad informaci
o ón
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 claros: mezclados con blanco
Colores oscuros: mezclados con negro

Colores claros Colores oscuros

Colores suaves Colores vivos

 Significado de la psicología del color
Impresión Expresión Construcción

• Se percibe • Cada color • La

en un expresa un publicidad
anuncio. significado adquiere el
valor de
comunicar
una idea
Significado de la Afectan
psicología del color psicológicamente

Al ver un
determinado color
Producen ciertas
o anuncio ya sabes
sensaciones
de quien y qué
está hablando

Color
 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

¿Qué es lo que
intenciones
los diseños de
cuando se esta
un aplicativo
diseñando
Web dicen?
algo?
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

W3C (World Wide Web

Consortium 3) tiene
Tienen una gran cantidad estándares para el
Las páginas Web son por de gráficos que no son desarrollo de sitios Web
lo general bastante etiquetados y también para hacer los sitios
visuales botones que no son compatibles para que
etiquetados 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.

Las células
sensoriales El Nervio óptico
(fotorreceptores) de envía la
La luz ingresa al la retina reaccionan información
ojo. en respuesta a la luz. procesada del
Son de dos tipos:
color al cerebro
conos y bastones.
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.

Señales

Nombres
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
Contraste en colores.
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.
¿Cómo lo solucionó?
• Texto
Ajustes • Enlaces
• Fondo
Pero…
No funciona
Configuración • Contrastes para todos los
sitios web
 Encontró:
Información Posibilidad
fiable sobre
colores de
de anular
productos colores

Información
textual de los
precios y
descuentos
Validadores y herramientas para consultorías de accesibilidad y
usabilidad
No solo
se base
en color

Teniendo
Colores de
fondo y Contraste de en cuenta
las
primer
plano
color combinaci
ones

Diferentes
pantallas
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.
 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.

Una página tal y como la verían

distintos tipos de daltónicos:
deuteranope (es ciego al verde, Se puede
ve mal el rojo y bien el azul), un
tritanope (no ve el azul y sí el
Vischeck descargar un
rojo y el verde) o un protanope
(es ciego al rojo, ve mal el verde plugin para
y conserva bien la visión del
azul.)
Photoshop
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