Post on 21-Apr-2017
El modelo de Kano en el diseño de productos digitales
@laulagrafico @frank_erlich
ego
+ ego
La experiencia
Solo haz que no sea un desastre
Aaron Walter designing for emotion
Funcional
Fiable
Utilizable
Agradable
SatisfacciónLa satisfacción o la insatisfacción es la diferencia
entre las expectativas del usuario y su percepción al usar un producto
Hoffman y Batenson 2010
Satisfacción y placer
Modelo KanoNoriaki Kano
Modelo Kano
Frustración
Placer
Satis
facc
ión
del u
suar
io
MuchaInversión
Poca
Modelo Kano
Frustración
Placer
Satis
facc
ión
del u
suar
io
MuchaInversión
Poca
Rentabilidad del esfuerzo
Modelo Kano
Release 1.0
Release 1.5
Release 2.0
Experience rot Jared spool
Modelo Kano
Jared spool
Release 6.0
Release 1.0
Release 1.5
Release 2.0
Modelo Kano
Jared spool
Release 6.0
Release 1.0
Release 1.5
Release 2.0
Modelo Kano
Jared spool
Release 6.0
Release 1.0
Release 1.5
Release 2.0
Release 7.0Competitor
Modelo Kano
Jared spool
Amount of features Complexity o the development
User Experience
Modelo Kano
Frustración
Placer
Satis
facc
ión
del u
suar
io
MuchaInversión
Poca
Rentabilidad del esfuerzo
Expectativa básica
Modelo Kano
Frustración
Placer
Satis
facc
ión
del u
suar
io
MuchaInversión
Poca
Rentabilidad del esfuerzo
Expectativa básica
Generadores de placer
Modelo Kano
Frustración
Placer
Satis
facc
ión
del u
suar
io
MuchaInversión
Poca
Rentabilidad del esfuerzo
Expectativa básica
Generadores de placer
Modelo Kano
Frustración
Placer
Satis
facc
ión
del u
suar
io
MuchaInversión
Poca
Rentabilidad del esfuerzo
Expectativa básica
Generadores de placer
Cómo aplicar el modelo Kanoa la creación de un producto
1.¿Cuáles son las funcionalidades o atributos de mi producto?
2. Construir un cuestionario
Atributos del producto Funcional Disfuncional
Funcionalidad X Si el producto tiene o te
permite hacer x, ¿qué te parece?
Si el producto NO tiene
o NO te permite hacer x, ¿qué te parece?
Atributos del producto Funcional Disfuncional
Me gusta Debería tenerlo Me da igual Puedo soportarlo No me gusta
Funcionalidad X Si el producto tiene o te
permite hacer x, ¿qué te parece?
Si el producto NO tiene
o NO te permite hacer x, ¿qué te parece?
2. Construir un cuestionario
Reversas IndiferenteAtractivasLinealesRequerida
Las 5 categorías
Las cualidades que el usuario espera de un producto
Calidad requerida
Las cualidades que el usuario espera de un producto
Calidad requerida
Si se logran, no afectan a la satisfacción. Si no se logran, afectan negativamente a la satisfacción.
Calidad de una dimensión Afectan de forma lineal a la satisfacción
Bien logradas afectan de forma positiva a la satisfacción Mal logradas afectan de forma negativa a la satisfacción
Calidad atractiva Son cualidades que el usuario no espera y resultan atractivas
Bien logradas afectan de forma positiva a la satisfacción Mal logradas afectan de forma negativa a la satisfacción
Calidad reversa En cualquier caso tienen un impacto negativo en la satisfacción
Indiferentes No afectan a la satisfacción
Modelo Kano
Frustración
Placer
Satis
facc
ión
del u
suar
io
MuchaInversión
Poca
Rentabilidad del esfuerzo
Expectativa básica
Generadores de placer
Modelo Kano
ImplementadoNo implementado
Lineales
Reversas
Atractivas
Indiferentes
Requeridas
Rentabilidad del esfuerzo
Expectativa básica
Generadores de placer
Modelo Kano
Me gusta
Debería tenerlo
Me da igual
Puedo soportarlo
No me gusta
Reversas IndiferenteAtractivasLinealesRequerida
Respuestas a preguntas Disfuncional
Res
pues
tas
a pr
egun
tas
Func
iona
l
Me gusta Debería tenerlo Me da igual Puedo soportarlo No me gusta
Reversas IndiferenteAtractivasLinealesRequerida
Faros automáticos
Que tenga ruedas
13%
80%
14%
12%
73%
4%
0%
2%
0%
2%
Reversas IndiferenteAtractivasLinealesRequerida
Faros automáticos
Que tenga ruedas
13%
80%
14%
12%
73%
4%
0%
2%
0%
2%
Resumen1.Identificamos los atributos o funcionalidades
2.Construimos un cuestionario
3.Analizamos los resultados
4.Cada atributo tiene una categoría
Conclusiones
Diseño
¿En qué parte del proceso de creación entra el diseño?
Análisis o Investigación previa
Análisis de la competencia Análisis del lenguaje Análisis de tendenciasAnálisis cromático
Análisis de la competencia
Análisis de la competencia
Qué competidores1 · Elegimos de 1 a 10 competidores
2 · Competencia directa
3 · Líderes y “malillos”
Análisis de la competencia
1 · Cómo construyen sus interfaces
2 · Qué lenguaje emplean
3 · Recursos estéticos recurrentes y obsoletos
¿Y ahora?
Análisis de la competencia
George Kvasnikov
Análisis de la competencia
Helvetica Neue
1 ·Navegación acompañada de iconografía
2 ·Tipografía Open Sans
3 ·Uso del color predominante
4 · Formas
5 · Posición de elementos
Análisis de la competencia
Conclusiones
Análisis cromático
El uso del color es clave porque va influir directamente en la percepción
de los elementos y muy probablemente emocionalmente al
usuario
Cuando queremos transmitir limpieza o pureza solemos escoger colores blancos, neutros o grises
Análisis cromático
1 · Cuál será el entorno de nuestro producto
(RGB) (CMYK)…
2 · Color de la marca o histórico de color
3 · Color de la competencia
Cómo analizamos
Análisis cromático
1 · Un mal uso = vibraciones y sombras
2 · Utilizar colores diferentes para conceptos diferentes
3 · Evita colores que puedan parecer diferentes debido al
color de fondo para no perder su significado
!
Análisis cromático
! Jugar con tonos blancos y grises
Análisis cromático
! Usar colores saturados cuidadosamente
Análisis cromático
! Buscar la armonía y el equilibrio del color
Análisis cromático
! Busca el impacto visual que te permita guiar al espectador
Análisis cromático
! Espacios es blanco donde descansar
! Combinaciones interfaz
Análisis cromático
Análisis cromático
Histórico de color
Análisis cromático
products
Interfaz
Gramofon
Setup
Console admin
Register fonera Register Fonera
User
Captive portal
Captive portal
Website
WiFi for Business Fonera A Portales Cautivos App connection manager
App partner
App partner
App Fonera setup
App Fonera setup App Gramofon setup
App Gramofon setup App Aliens app
App Aliens app Website fon.com
2011 Black
2012 White / Orange
2012/ 2013 White
2015 Gradients / white
2015 Gramofon / black / Green
Análisis cromático
http://paletton.com
http://color.adobe.com
http://bruguer.es/paletasdecolores
http://palettab.com/
https://coolors.co/
http://color.hailpixel.com/
http://www.dasplankton.de/ContrastA/
http://colrd.com/
Herramientas
Análisis del lenguaje
Análisis del lenguaje
Lenguaje de la marca
Lenguaje general o tendencias
Buscar qué queremos o qué necesitamos
Análisis del lenguaje
http://findguidelin.es/http://saijogeorge.com/brand-style-guide-examples/
Análisis del lenguaje
Análisis del lenguaje
Análisis de tendencias
Análisis de tendencias
ADN Creativo
Definimos estrategia y concepto
Rejillas base
Nos permite partir de una estructura base y conseguir un mayor equilibrio del diseño
Layout o estructuras
La posición en el espacio (puede ser fija o fluida)
Los pequeños detalles son importantes
Tipografía · Imágenes · Ilustraciones · Iconografía · Animaciones · Estilo de elementos
!
a diseñar!