Webinar prototipado y usabilidad

[1]

[1]

Twittea este evento con la hashtag #eventosiebs

[2]

[2]


Prototipado y metodologías para el diseño centrado en el usuario

[3]

[3]


Objetivos

1. Entender para quién realizamos el producto: el usuario.

2. Comprender la importancia del contenido como materia prima de esa definición.

3. Conocer las principales técnicas de estrategia de contenido aplicadas al desarrollo de productos.

4. Uso de prototipo como documento central del proyecto.

5. Testing continuo del prototipo con usuarios.

[4]

[4]


¿Qué vamos hacer?

1. Definir un producto para el móvil

1. Orientado al usuario

2. Basado en el contenido

2. Construir un prototipo

3. Probar el prototipo con usuarios

[5]

[5]


¿Cómo lo vamos hacer?

1. Personas

2. Mapas de contenido

3. Modelización de contenido

4. Prototipado interactivo

5. Testing de usuario

[6]

[6]



1. Personas

2. Mapas de contenido

3. Modelización de contenido

4. Prototipado interactivo

5. Testing de usuario

[7]

[7]



TestPrototipoContenidoContenidoTareaTareaEstado

Escenario

Estado

EscenarioObjetivoObjetivoPersonaPersona

[8]

[8]


“Personas”

• Técnica del mundo del marketing offline.

• Personas imaginarias, pero representativas del mercado objetivo.

• Identificar sus objetivos, escenarios y tareas.

• Disenar el producto pensando especificamente en las personas creadas.

[9]

[9]


“Personas”

Disenar para una sola persona. Eliminar al peligroso usuario elástico.

Ventajas

[10]

[10]


“Personas”

[11]

[11]


“Personas”Objetivos, tareas y escenarios

• Las personas se mueven por objetivos.

• Hay objetivos personales («no sentirme estupido») y objetivos prácticos (vivir mejor, vivir más, descansar, impactar, llegar rápido, sentirme seguro...).

• Los objetivos prácticos varian dependiendo del estado del usuario y el escenario de uso.

• Para cumplir sus objetivos, las personas necesitan ejecutar tareas.

• Debemos identificar los tipos de contenidos que mejor asisten al usuario en la ejecución de esas tareas en cada estado/escenario.

Debemos definir una interfaz que intente cumplir los objetivos prácticos sin violar los objetivos personales

Debemos definir una interfaz que intente cumplir los objetivos prácticos sin violar los objetivos personales

[12]

[12]


“Personas”Objetivos, tareas y escenarios


Escenario

Estado


Mireia, 27

anos,

madrilena,

soltera,

moderna,

divertida,

enganchada

al móvil

Quiere impactar

con su aspecto en

la fiesta de esta

noche

Frente al espejo,

en la peluqueria,

esperando que la

atiendan

Buscar tipos de

peinados en el

móvil

[13]

[13]


ContenidoDe las personas al contenido


Escenario

Estado


Mireia, 27

anos,

madrilena,

soltera,

moderna,

divertida,

enganchada

al móvil

Quiere impactar

con su aspecto en

la fiesta de esta

noche

Frente al espejo,

en la peluqueria,

esperando que la

atiendan

Buscar tipos de

peinados en el

móvil

Debemos identificar los tipos de contenidos que mejor asisten al usuario en la ejecución de esas tareas en cada estado/escenario

Debemos identificar los tipos de contenidos que mejor asisten al usuario en la ejecución de esas tareas en cada estado/escenario

[14]

[14]


ContenidoTipos de contenido

[15]

[15]



Formato Tipo

El formato es la materia prima;El tipo es la aplicación de la materia prima con una intención especifica


[16]

[16]



Formato: Texto Tipo: Discurso



[17]

[17]



Formato: Foto Tipo

Un mismo formato puede originar muchos tipos de contenido Un mismo formato puede originar muchos tipos de contenido

[18]

[18]



En ocasiones, un tipo puede resultar de la combinación de varios formatos. En ocasiones, un tipo puede resultar de la combinación de varios formatos.

Texto

Foto

Video

[19]

[19]


ContenidoMapas de contenido


Escenario

Estado


Mireia, 27 anos,

madrilena,

soltera,

moderna,

divertida,

enganchada al

móvil

Quiere comprar

un vestido de

fiesta y que sea barato

Una misma persona puede atravesar diversos estados/escenarios, y cada uno puede ser servido por un tipo de contenido especifico

Exploración

Interés

Evaluación

Decisión

Disfrute

Buscar

Leer

Comparar

Comprar

Usar

Galeria de fotos / videos

Galeria de fotos / videos

Comentarios / Opiniones

Comentarios / Opiniones

Ficha de producto

Ficha de producto

Proceso de compra (Datos)

Proceso de compra (Datos)

WhislistWhislist

[20]

[20]


ContenidoModelado del contenido

¿Vocabulario

controlado?FrecuenciaFrecuenciaExtensiónExtensiónFormatosFormatosAtributosAtributosTipoTipo

Ficha pelicula Titulo

Ano

Duración

Género

Clasificación

Cartel

Trailer

Director

Reparto

Sinopsis

Texto

Numero

Numero

Texto

Numero

Foto, texto

Video, texto

Texto

Texto, foto,

video

Texto

No

4 (ano)

4 (h-m)

200

2 (+/-)

No

No

200

No

1000

No

No

No

No

No

No

No

No

No

No

No

Si

Si

Si

Si

No

No

No

No

No

[21]

[21]


ContenidoModelado del contenido

Una vez que he modelado todos los atributos de cada tipo de contenido en mi proyecto…

• ¿Qué atributos son imprescindibles?

• ¿Qué atributos son prioritarios?

• ¿Cómo voy a producirlos/obtenerlos?

• ¿Cómo voy a actualizarlos?

[22]

[22]


ContenidoOrganizar mi contenido

Si modelizo el contenido antes de disenar, tengo claro…

• lo que voy a disenar o pedir al disenador

• lo que voy a desarrollar o pedir al desarrollador

• lo que voy a pedir a mi proveedor de contenido

• cómo organizar mis recursos

• qué herramientas necesito

[23]

[23]


Prototipado¿Qué es un prototipo?

[24]

[24]



[25]

[25]



[26]

[26]



El prototipo es una herramienta que le permite a los disenadores explorar, comunicar y evaluar sus ideas.

• El prototipado es un proceso iterativo que externaliza las ideas del disenador y le permite explorar y reflexionar sobre ellas.

• El prototipo es un medio para que el disenador comunique sus ideas.

• El prototipo es la representación de una idea que puede ser evaluada en un contexto.

[27]

[27]


PrototipadoVentajas

• Documento central de definición

• Ahorra tiempo, esfuerzo y dinero

• Reduce errores de interpretación

• Identifica de forma temprana errores importantes de la interfaz

• Adaptable, rápido de actualizar

• Testeable

[28]

[28]


PrototipadoTipos de prototipo

• En papel

• Wireframe (baja y alta fidelidad)

• Diseno visual

• Pilotos

• Simulaciones

[29]

[29]


Prototipado¿Cuándo prototipar?


Escenario

Estado


Mireia, 27

anos,

madrilena,

soltera,

moderna,

divertida,

enganchada

al móvil

Quiere impactar

con su aspecto en

la fiesta de esta

noche

Frente al espejo,

en la peluqueria,

esperando que la

atiendan

Buscar tipos de

peinados en el

móvil

Galeria de

fotos/videosRepresentación interactiva del proceso segun:•La persona•Su escenario•Tareas•Y con el contenido definido

Representación interactiva del proceso segun:•La persona•Su escenario•Tareas•Y con el contenido definido

[30]

[30]


PrototipadoTipos de prototipo

• En papel

• Wireframe (baja y alta fidelidad)

• Diseno visual

• Pilotos

• Simulaciones

[31]

[31]


PrototipadoTipos de prototipo: Papel

[32]

[32]


PrototipadoTipos de prototipo: Low fidelity

[33]

[33]


PrototipadoTipos de prototipo: Hight fidelity

[34]

[34]


PrototipadoTipos de prototipo: Interactivo

[35]

[35]


PrototipadoTipos de prototipo: Diseño visual

[36]

[36]


PrototipadoConsejos para el prototipado

• Empezar con papel

• Usar texto como interfaz

• Que la apariencia no se te vaya de la mano

• Usar componentes (botones, formularios) y plantillas (header, footer)

• Iterar, Iterar, Iterar

[37]

[37]


PrototipadoHerramientas

Axure

http://www.axure.com/tutorials

[38]

[38]


PrototipadoConceptos: Usabilidad

“La usabilidad es un atributo de calidad que mide lo fácil que son de usar las interfaces de usuario. La palabra "usabilidad" también se refiere a métodos para mejorar la facilidad de uso durante el proceso de diseno.”

Jakob Nielsen’s Alertbox: January 4, 2012

[39]

[39]


PrototipadoConceptos: Usabilidad, 5 patrones de calidad

1. Facilidad de aprendizaje.

2. Eficiencia.

3. Memoria.

4. Errores.

5. Satisfacción.

[40]

[40]


PrototipadoConceptos: Diseño centrado en el usuario (Persona)

Porque es quien usará la aplicación.

Hay que situar a la persona en el centro del diseno. Es decir, hay que hacer diseno centrado en nuestra persona.

La usabilidad es un atributo de la calidad del diseno final, mientras que la DCU es el camino para alcanzar y mejorar la usabilidad del producto. La

usabilidad es el “qué”, mientras que la DCU es el “cómo”.

Nuestro usuario es nuestra “Persona”Nuestro usuario es nuestra “Persona”

[41]

[41]


PrototipadoConceptos: Diseño centrado en el usuario (Persona)

Porque es quien usará la aplicación.

Hay que situar a la persona en el centro del diseno. Es decir, hay que hacer diseno centrado en nuestra persona.

La usabilidad es un atributo de la calidad del diseno final, mientras que la DCU es el camino para alcanzar y mejorar la usabilidad del producto. La

usabilidad es el “qué”, mientras que la DCU es el “cómo”.

Nuestro usuario es nuestra “Persona”Nuestro usuario es nuestra “Persona”

[42]

[42]

Twittea este evento con la hashtag #eventosiebs42

TestTestPrototipoContenidoContenidoTareaTareaEstado

Escenario

Estado


Mireia, 27

anos,

madrilena,

soltera,

moderna,

divertida,

enganchada

al móvil

Quiere impactar

con su aspecto en

la fiesta de esta

noche

Frente al espejo,

en la peluqueria,

esperando que la

atiendan

Buscar tipos de

peinados en el

móvil

Galeria de

fotos/videos

Probar con usuarios

Probar con usuarios

Representació

n interactiva

del proceso

ITERARITERAR

Test de usuariosCuando testear

[43]

[43]


Web/iPad broadcast con GoToMeeting.com

Test de usuariosLow cost iterativo

[44]

[44]


Fuente Jakob Nielsen Testing con 5 usuarios: http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

Test de usuariosCuánta gente necesito

[45]

[45]


Una vez testado, se hacen ajustes rápidos antes de entregarlo al equipo de desarrollo.

Una vez testado, se hacen ajustes rápidos antes de entregarlo al equipo de desarrollo.

El prototipo es el documento central de definición para TODOS los involucrados.

ClientesClientes

UsuariosUsuarios

TécnicosTécnicos

Test de usuariosEl test

[46]

[46]


Ejemplo de tarea:

Tarea 1:

(Ponemos a la usuaria en pantalla la nueva sección de

Trucos).

Acabas de salir de trabajar, estás en el autobus de camino

a casa y quieres averiguar como aplicarte el eyeliner para

que te dure todo el dia.

Respuestas posibles:

• Opción a: En el buscador introduce el término

“eyeliner”. En el resultado de busqueda hacer clic en

uno de los resultados sobre eyeliner

• Opción b: En las categorias, ir a cosmética. En el

resultado de cosmética hacer clic en el truco de

Eyeliner. – Cómo aplicarse el eyeliner para que dure

todo el dia.

Test de usuariosEl guión del test

[47]

[47]


Sala de testing:

• Entrevistador

• Testers: Usuarios

Instrucciones:

1.Bienvenida al usuario.

2.El test es para detectar errores

de interfaz, el usuario nunca

comete errores, los detecta.

3.Se leerán una serie de tareas

que el usuario deberá llevar a

cabo.

4.El usuario deberá describir en

voz alta aquello que está

haciendo, es importante que lo

haga de forma honesta.

5.En el caso de no resolver una

tarea, no hay que ayudar al

usuario, se deberá pasar a la

siguiente tarea.

6.El entrevistador solo podrá

contestar a las dudas de la

interfaz que tenga el usuario con

respuestas neutrales: AHA!

Instrucciones:

1.Bienvenida al usuario.

2.El test es para detectar errores

de interfaz, el usuario nunca

comete errores, los detecta.

3.Se leerán una serie de tareas

que el usuario deberá llevar a

cabo.

4.El usuario deberá describir en

voz alta aquello que está

haciendo, es importante que lo

haga de forma honesta.

5.En el caso de no resolver una

tarea, no hay que ayudar al

usuario, se deberá pasar a la

siguiente tarea.

6.El entrevistador solo podrá

contestar a las dudas de la

interfaz que tenga el usuario con

respuestas neutrales: AHA!

Test de usuariosLa entrevista

[48]

[48]


Comience explicándole al usuario lo siguiente:

• Explicarle por qué está aqui, aunque ya tenga una idea, le comentaremos que necesitamos

su ayuda para ver si funciona la interfaz segun lo esperado.

•El objetivo de la prueba es evaluar la calidad de uso de la interfaz, nunca la evaluación del

participante.

• Si el participante comete algun fallo durante la prueba, no será culpa suya, sino del diseno.

• Conforme vaya usando la interfaz, solicitarle que intente pensar en voz alta, que diga que

es lo que está mirando, tratando de hacer y que está pensando. Esto es de gran ayuda.

• Que no se preocupe de herir nuestros sentimientos, solo queremos mejorar la interfaz, por

ello es impotante manifestar las cosas de forma honesta.

El navegador web debe estar abierto a Google o alguna página “neutral”El navegador web debe estar abierto a Google o alguna página “neutral”

Test de usuariosBienvenida al usuario

[49]

[49]


Instrucciones:

1.Bienvenida.

2.Observar, aprender y tomar

notas

3.Al final de cada sesión, escribir

los tres problemas más

importantens de usbailidad.

4.Sugerir preguntas al

entrevistador para que pregunte

al participante

5.Disfrutar de los aperitivos

6.Debatir sobre lo ocurrido al

termino de las sesiones

Instrucciones:

1.Bienvenida.

2.Observar, aprender y tomar

notas

3.Al final de cada sesión, escribir

los tres problemas más

importantens de usbailidad.

4.Sugerir preguntas al

entrevistador para que pregunte

al participante

5.Disfrutar de los aperitivos

6.Debatir sobre lo ocurrido al

termino de las sesiones

Sala de observación:

• Moderaror / Coordinador

• Invitados

Test de usuariosLa observación

[50]

[50]


¡Gracias!

Design

Webinar prototipado y usabilidad