meetup ux academy "el modelo de kano en el diseño de productos digitales"

82
El modelo de Kano en el diseño de productos digitales @laulagrafico @frank_erlich

Upload: laura-peco

Post on 21-Apr-2017

791 views

Category:

Design


0 download

TRANSCRIPT

Page 1: 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

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

ego

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

+ ego

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

La experiencia

Page 5: Meetup UX Academy "El modelo de Kano en el diseño de productos digitales"
Page 6: Meetup UX Academy "El modelo de Kano en el diseño de productos digitales"
Page 7: Meetup UX Academy "El modelo de Kano en el diseño de productos digitales"
Page 8: Meetup UX Academy "El modelo de Kano en el diseño de productos digitales"

Solo haz que no sea un desastre

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

Aaron Walter designing for emotion

Funcional

Fiable

Utilizable

Agradable

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

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

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

Satisfacción y placer

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

Modelo KanoNoriaki Kano

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

Modelo Kano

Frustración

Placer

Satis

facc

ión

del u

suar

io

MuchaInversión

Poca

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

Modelo Kano

Frustración

Placer

Satis

facc

ión

del u

suar

io

MuchaInversión

Poca

Rentabilidad del esfuerzo

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

Modelo Kano

Release 1.0

Release 1.5

Release 2.0

Experience rot Jared spool

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

Modelo Kano

Jared spool

Release 6.0

Release 1.0

Release 1.5

Release 2.0

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

Modelo Kano

Jared spool

Release 6.0

Release 1.0

Release 1.5

Release 2.0

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

Modelo Kano

Jared spool

Release 6.0

Release 1.0

Release 1.5

Release 2.0

Release 7.0Competitor

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

Modelo Kano

Jared spool

Amount of features Complexity o the development

User Experience

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

Modelo Kano

Frustración

Placer

Satis

facc

ión

del u

suar

io

MuchaInversión

Poca

Rentabilidad del esfuerzo

Expectativa básica

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

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

Page 22: Meetup UX Academy "El modelo de Kano en el diseño de productos digitales"
Page 23: Meetup UX Academy "El modelo de Kano en el diseño de productos digitales"
Page 24: Meetup UX Academy "El modelo de Kano en el diseño de productos digitales"

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

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

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

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

Cómo aplicar el modelo Kanoa la creación de un producto

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

1.¿Cuáles son las funcionalidades o atributos de mi producto?

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

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?

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

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

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

Reversas IndiferenteAtractivasLinealesRequerida

Las 5 categorías

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

Las cualidades que el usuario espera de un producto

Calidad requerida

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

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.

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

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

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

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

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

Calidad reversa En cualquier caso tienen un impacto negativo en la satisfacción

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

Indiferentes No afectan a la satisfacción

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

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

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

Modelo Kano

ImplementadoNo implementado

Lineales

Reversas

Atractivas

Indiferentes

Requeridas

Rentabilidad del esfuerzo

Expectativa básica

Generadores de placer

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

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

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

Reversas IndiferenteAtractivasLinealesRequerida

Faros automáticos

Que tenga ruedas

13%

80%

14%

12%

73%

4%

0%

2%

0%

2%

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

Reversas IndiferenteAtractivasLinealesRequerida

Faros automáticos

Que tenga ruedas

13%

80%

14%

12%

73%

4%

0%

2%

0%

2%

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

Resumen1.Identificamos los atributos o funcionalidades

2.Construimos un cuestionario

3.Analizamos los resultados

4.Cada atributo tiene una categoría

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

Conclusiones

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

Diseño

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

¿En qué parte del proceso de creación entra el diseño?

Análisis o Investigación previa

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

Análisis de la competencia Análisis del lenguaje Análisis de tendenciasAnálisis cromático

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

Análisis de la competencia

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

Análisis de la competencia

Qué competidores1 · Elegimos de 1 a 10 competidores

2 · Competencia directa

3 · Líderes y “malillos”

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

Análisis de la competencia

1 · Cómo construyen sus interfaces

2 · Qué lenguaje emplean

3 · Recursos estéticos recurrentes y obsoletos

¿Y ahora?

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

Análisis de la competencia

George Kvasnikov

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

Análisis de la competencia

Helvetica Neue

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

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

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

Análisis cromático

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

El uso del color es clave porque va influir directamente en la percepción

de los elementos y muy probablemente emocionalmente al

usuario

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

Cuando queremos transmitir limpieza o pureza solemos escoger colores blancos, neutros o grises

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

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

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

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

!

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

Análisis cromático

! Jugar con tonos blancos y grises

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

Análisis cromático

! Usar colores saturados cuidadosamente

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

Análisis cromático

! Buscar la armonía y el equilibrio del color

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

Análisis cromático

! Busca el impacto visual que te permita guiar al espectador

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

Análisis cromático

! Espacios es blanco donde descansar

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

! Combinaciones interfaz

Análisis cromático

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

Análisis cromático

Histórico de color

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

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

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

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

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

Análisis del lenguaje

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

Análisis del lenguaje

Lenguaje de la marca

Lenguaje general o tendencias

Buscar qué queremos o qué necesitamos

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

Análisis del lenguaje

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

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

Análisis del lenguaje

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

Análisis del lenguaje

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

Análisis de tendencias

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

Análisis de tendencias

Page 74: Meetup UX Academy "El modelo de Kano en el diseño de productos digitales"
Page 75: Meetup UX Academy "El modelo de Kano en el diseño de productos digitales"

ADN Creativo

Definimos estrategia y concepto

Page 76: Meetup UX Academy "El modelo de Kano en el diseño de productos digitales"
Page 77: Meetup UX Academy "El modelo de Kano en el diseño de productos digitales"

Rejillas base

Nos permite partir de una estructura base y conseguir un mayor equilibrio del diseño

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

Layout o estructuras

La posición en el espacio (puede ser fija o fluida)

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

Los pequeños detalles son importantes

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

Tipografía · Imágenes · Ilustraciones · Iconografía · Animaciones · Estilo de elementos

!

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

a diseñar!

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