Meetup UX Academy "El modelo de Kano en el diseño de productos digitales"

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


Expectativa básica

Modelo Kano

Frustración

Placer

Satis

facc

ión

del u

suar

io

MuchaInversión

Poca


Expectativa básica

Generadores de placer

Modelo Kano

Frustración

Placer

Satis

facc

ión

del u

suar

io

MuchaInversión

Poca


Expectativa básica


Modelo Kano

Frustración

Placer

Satis

facc

ión

del u

suar

io

MuchaInversión

Poca


Expectativa básica


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


Expectativa básica


Modelo Kano

ImplementadoNo implementado

Lineales

Reversas

Atractivas

Indiferentes

Requeridas


Expectativa básica


Modelo Kano

Me gusta

Debería tenerlo

Me da igual

Puedo soportarlo

No me gusta


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


Faros automáticos

Que tenga ruedas

13%

80%

14%

12%

73%

4%

0%

2%

0%

2%


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


Qué competidores1 · Elegimos de 1 a 10 competidores

2 · Competencia directa

3 · Líderes y “malillos”


1 · Cómo construyen sus interfaces

2 · Qué lenguaje emplean

3 · Recursos estéticos recurrentes y obsoletos

¿Y ahora?


George Kvasnikov


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


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


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


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

!


! Jugar con tonos blancos y grises


! Usar colores saturados cuidadosamente


! Buscar la armonía y el equilibrio del color


! Busca el impacto visual que te permita guiar al espectador


! Espacios es blanco donde descansar

! Combinaciones interfaz



Histórico de color


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


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

https://coolors.co/

Análisis del lenguaje


Lenguaje de la marca

Lenguaje general o tendencias

Buscar qué queremos o qué necesitamos


http://findguidelin.es/http://saijogeorge.com/brand-style-guide-examples/



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!

Design

Meetup UX Academy "El modelo de Kano en el diseño de productos digitales"