Webinar prototipado y usabilidad
description
Transcript of Webinar prototipado y usabilidad
[1]
[1]
Twittea este evento con la hashtag #eventosiebs
[2]
[2]
Twittea este evento con la hashtag #eventosiebs
Prototipado y metodologías para el diseño centrado en el usuario
[3]
[3]
Twittea este evento con la hashtag #eventosiebs
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]
Twittea este evento con la hashtag #eventosiebs
¿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]
Twittea este evento con la hashtag #eventosiebs
¿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]
Twittea este evento con la hashtag #eventosiebs
¿Cómo lo vamos hacer?
1. Personas
2. Mapas de contenido
3. Modelización de contenido
4. Prototipado interactivo
5. Testing de usuario
[7]
[7]
Twittea este evento con la hashtag #eventosiebs
¿Cómo lo vamos hacer?
TestPrototipoContenidoContenidoTareaTareaEstado
Escenario
Estado
EscenarioObjetivoObjetivoPersonaPersona
[8]
[8]
Twittea este evento con la hashtag #eventosiebs
“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]
Twittea este evento con la hashtag #eventosiebs
“Personas”
Disenar para una sola persona. Eliminar al peligroso usuario elástico.
Ventajas
[10]
[10]
Twittea este evento con la hashtag #eventosiebs
“Personas”
[11]
[11]
Twittea este evento con la hashtag #eventosiebs
“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]
Twittea este evento con la hashtag #eventosiebs
“Personas”Objetivos, tareas y escenarios
TestPrototipoContenidoContenidoTareaTareaEstado
Escenario
Estado
EscenarioObjetivoObjetivoPersonaPersona
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]
Twittea este evento con la hashtag #eventosiebs
ContenidoDe las personas al contenido
TestPrototipoContenidoContenidoTareaTareaEstado
Escenario
Estado
EscenarioObjetivoObjetivoPersonaPersona
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]
Twittea este evento con la hashtag #eventosiebs
ContenidoTipos de contenido
[15]
[15]
Twittea este evento con la hashtag #eventosiebs
ContenidoTipos de contenido
Formato Tipo
El formato es la materia prima;El tipo es la aplicación de la materia prima con una intención especifica
El formato es la materia prima;El tipo es la aplicación de la materia prima con una intención especifica
[16]
[16]
Twittea este evento con la hashtag #eventosiebs
ContenidoTipos de contenido
Formato: Texto Tipo: Discurso
El formato es la materia prima;El tipo es la aplicación de la materia prima con una intención especifica
El formato es la materia prima;El tipo es la aplicación de la materia prima con una intención especifica
[17]
[17]
Twittea este evento con la hashtag #eventosiebs
ContenidoTipos de contenido
Formato: Foto Tipo
Un mismo formato puede originar muchos tipos de contenido Un mismo formato puede originar muchos tipos de contenido
[18]
[18]
Twittea este evento con la hashtag #eventosiebs
ContenidoTipos de contenido
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]
Twittea este evento con la hashtag #eventosiebs
ContenidoMapas de contenido
TestPrototipoContenidoContenidoTareaTareaEstado
Escenario
Estado
EscenarioObjetivoObjetivoPersonaPersona
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]
Twittea este evento con la hashtag #eventosiebs
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]
Twittea este evento con la hashtag #eventosiebs
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]
Twittea este evento con la hashtag #eventosiebs
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]
Twittea este evento con la hashtag #eventosiebs
Prototipado¿Qué es un prototipo?
[24]
[24]
Twittea este evento con la hashtag #eventosiebs
Prototipado¿Qué es un prototipo?
[25]
[25]
Twittea este evento con la hashtag #eventosiebs
Prototipado¿Qué es un prototipo?
[26]
[26]
Twittea este evento con la hashtag #eventosiebs
Prototipado¿Qué es un prototipo?
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]
Twittea este evento con la hashtag #eventosiebs
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]
Twittea este evento con la hashtag #eventosiebs
PrototipadoTipos de prototipo
• En papel
• Wireframe (baja y alta fidelidad)
• Diseno visual
• Pilotos
• Simulaciones
[29]
[29]
Twittea este evento con la hashtag #eventosiebs
Prototipado¿Cuándo prototipar?
TestPrototipoContenidoContenidoTareaTareaEstado
Escenario
Estado
EscenarioObjetivoObjetivoPersonaPersona
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]
Twittea este evento con la hashtag #eventosiebs
PrototipadoTipos de prototipo
• En papel
• Wireframe (baja y alta fidelidad)
• Diseno visual
• Pilotos
• Simulaciones
[31]
[31]
Twittea este evento con la hashtag #eventosiebs
PrototipadoTipos de prototipo: Papel
[32]
[32]
Twittea este evento con la hashtag #eventosiebs
PrototipadoTipos de prototipo: Low fidelity
[33]
[33]
Twittea este evento con la hashtag #eventosiebs
PrototipadoTipos de prototipo: Hight fidelity
[34]
[34]
Twittea este evento con la hashtag #eventosiebs
PrototipadoTipos de prototipo: Interactivo
[35]
[35]
Twittea este evento con la hashtag #eventosiebs
PrototipadoTipos de prototipo: Diseño visual
[36]
[36]
Twittea este evento con la hashtag #eventosiebs
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]
Twittea este evento con la hashtag #eventosiebs
PrototipadoHerramientas
Axure
http://www.axure.com/tutorials
[38]
[38]
Twittea este evento con la hashtag #eventosiebs
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]
Twittea este evento con la hashtag #eventosiebs
PrototipadoConceptos: Usabilidad, 5 patrones de calidad
1. Facilidad de aprendizaje.
2. Eficiencia.
3. Memoria.
4. Errores.
5. Satisfacción.
[40]
[40]
Twittea este evento con la hashtag #eventosiebs
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]
Twittea este evento con la hashtag #eventosiebs
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
EscenarioObjetivoObjetivoPersonaPersona
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]
Twittea este evento con la hashtag #eventosiebs43
Web/iPad broadcast con GoToMeeting.com
Test de usuariosLow cost iterativo
[44]
[44]
Twittea este evento con la hashtag #eventosiebs44
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]
Twittea este evento con la hashtag #eventosiebs45
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]
Twittea este evento con la hashtag #eventosiebs46
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]
Twittea este evento con la hashtag #eventosiebs47
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]
Twittea este evento con la hashtag #eventosiebs48
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]
Twittea este evento con la hashtag #eventosiebs49
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]
Twittea este evento con la hashtag #eventosiebs
¡Gracias!