Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color...
Transcript of Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color...
![Page 1: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/1.jpg)
Psicología y teoría del color en el desarrollo de aplicaciones
web Ing. Milagros Quispe
![Page 2: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/2.jpg)
¿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.
![Page 3: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/3.jpg)
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.
![Page 4: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/4.jpg)
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
![Page 5: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/5.jpg)
Fuente: http://blog.lateralmind.com.ar/2015/05/psicologia-del-color-significado-y-usos.html
![Page 6: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/6.jpg)
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
![Page 7: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/7.jpg)
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
![Page 8: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/8.jpg)
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
![Page 9: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/9.jpg)
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.
![Page 10: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/10.jpg)
¿Por qué es importante tomar en cuenta la “Experiencia del Usuario” al desarrollar
aplicaciones, interfaces y sistemas?
![Page 11: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/11.jpg)
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.
![Page 12: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/12.jpg)
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
![Page 13: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/13.jpg)
¿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?
![Page 14: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/14.jpg)
Retos de Usabilidad
• Escalabilidad.
•Diseño Visual. • Comprensión.
• Interactividad.
• Manejo de cambios.
![Page 15: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/15.jpg)
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.
![Page 16: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/16.jpg)
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.
![Page 17: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/17.jpg)
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.
![Page 18: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/18.jpg)
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.
![Page 19: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/19.jpg)
¿Cómo las personas que tienen alguna discapacidad visual utilizan una aplicación
Web?
![Page 20: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/20.jpg)
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.
![Page 21: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/21.jpg)
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
![Page 22: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/22.jpg)
DALTONISMO
![Page 23: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/23.jpg)
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
![Page 24: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/24.jpg)
• 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
![Page 25: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/25.jpg)
El Sr. Lee prefiere sitios web: Contraste de color.
Nombres
Señales
![Page 26: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/26.jpg)
COLORES A VISTA NORMAL
![Page 27: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/27.jpg)
COLORES VISTOS POR UN DALTÓNICO
![Page 28: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/28.jpg)
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.
![Page 29: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/29.jpg)
¿Cómo lo solucionó?
Ajustes
•Texto
•Enlaces
•Fondo
Configuración •Contrastes
Pero…
No funciona para todos los
sitios web
![Page 30: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/30.jpg)
Encontró:
Información fiable sobre colores de productos
Posibilidad de anular
colores
Información textual de los
precios y descuentos
![Page 31: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/31.jpg)
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
![Page 32: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/32.jpg)
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.
![Page 33: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/33.jpg)
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.
![Page 34: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/34.jpg)
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.
![Page 35: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/35.jpg)
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.
![Page 36: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/36.jpg)
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.)
![Page 37: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/37.jpg)
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.
![Page 38: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/38.jpg)
Imgr.co • Aplicación web para conocer los colores exactos de una imagen
![Page 39: Psicología y teoría del color en el desarrollo de aplicaciones · ¿Qué es el color? •El color puede ayudar al diseñador a captar la atención del espectador y a comunicar información](https://reader030.fdocuments.es/reader030/viewer/2022040710/5e1017ef610f201caf37460d/html5/thumbnails/39.jpg)
Gracias