Вы находитесь на странице: 1из 50

Twittea este evento con la hashtag #eventosiebs

[#]

[#]

Prototipado y metodologas para el diseo centrado en el usuario

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Objetivos
1. Entender para quin realizamos el producto: el usuario. 2. Comprender la importancia del contenido como materia prima de esa definicin. 3. Conocer las principales tcnicas 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.
Twittea este evento con la hashtag #eventosiebs
[#]

[#]

Qu vamos hacer?
1. Definir un producto para el mvil

1. Orientado al usuario
2. Basado en el contenido

2. Construir un prototipo
3. Probar el prototipo con usuarios

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Cmo lo vamos hacer?


1. Personas

2. Mapas de contenido
3. Modelizacion de contenido

4. Prototipado interactivo
5. Testing de usuario

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Cmo lo vamos hacer?


1. Personas

2. Mapas de contenido
3. Modelizacion de contenido

4. Prototipado interactivo
5. Testing de usuario

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Cmo lo vamos hacer?

Persona

Objetivo

Estado Escenario

Tarea

Contenido

Prototipo

Test

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Personas
Tecnica 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.

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Personas
Ventajas
Disear para una sola persona. Eliminar al peligroso usuario elstico.

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Personas

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 practicos (vivir mejor, vivir mas, descansar, impactar, llegar rapido, sentirme seguro...). Los objetivos practicos 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 ejecucion de esas tareas en cada estado/escenario.
Debemos definir una interfaz que intente cumplir los objetivos prcticos sin violar los objetivos personales

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Personas
Objetivos, tareas y escenarios

Persona

Objetivo

Estado Escenario

Tarea

Contenido

Prototipo

Test

Mireia, 27 aos, madrilea, soltera, moderna, divertida, enganchad a al mvil

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 movil

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Contenido
De las personas al contenido
Estado Escenario

Persona

Objetivo

Tarea

Contenido

Prototipo

Test

Mireia, 27 aos, madrilea, soltera, moderna, divertida, enganchad a al mvil

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 movil

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

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Contenido
Tipos de contenido

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Contenido
Tipos de contenido
Formato Tipo

El formato es la materia prima; El tipo es la aplicacion de la materia prima con una intencion especifica

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Contenido
Tipos de contenido
Formato: Texto Tipo: Discurso

El formato es la materia prima; El tipo es la aplicacion de la materia prima con una intencion especifica

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Contenido
Tipos de contenido
Formato: Foto Tipo

Un mismo formato puede originar muchos tipos de contenido

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Contenido
Tipos de contenido
Foto

Texto

Vdeo

En ocasiones, un tipo puede resultar de la combinacion de varios formatos.

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Contenido
Mapas de contenido
Persona
Mireia, 27 aos, madrilea, soltera, moderna, divertida, enganchada al mvil

Objetivo
Quiere comprar un vestido de fiesta y que sea barato

Estado Escenario

Tarea

Contenido

Prototipo

Test

Exploracin Buscar

Galera de fotos / vdeos


Comentarios / Opiniones Ficha de producto Proceso de compra (Datos)

Inters

Leer

Evaluacin Comparar

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

Decisin

Comprar

Disfrute

Usar

Whislist

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Contenido
Modelado del contenido
Tipo
Ficha pelcula

Atributos
Ttulo Ao Duracin Gnero

Formatos
Texto Nmero Nmero Texto

Extensin
No 4 (ao) 4 (h-m) 200 2 (+/-) No No 200 No

Frecuencia
No No No No No No No No No

Vocabulario controlado?
No Si Si Si Si No No No No

Clasificacin Nmero Cartel Trailer Director Reparto Sinopsis Foto, texto Vdeo, texto Texto Texto, foto, vdeo

Texto

1000

No

No

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Contenido
Modelado del contenido Una vez que he modelado todos los atributos de cada tipo de contenido en mi proyecto
Que atributos son imprescindibles?

Que atributos son prioritarios?


Como voy a producirlos/obtenerlos? Como voy a actualizarlos?

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Contenido
Organizar mi contenido Si modelizo el contenido antes de disenar, tengo claro
lo que voy a disear o pedir al disenador lo que voy a desarrollar o pedir al desarrollador lo que voy a pedir a mi proveedor de contenido como organizar mis recursos

que herramientas necesito


Twittea este evento con la hashtag #eventosiebs
[#]

[#]

Prototipado
Qu es un prototipo?

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Prototipado
Qu es un prototipo?

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Prototipado
Qu es un prototipo?

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 representacion de una idea que puede ser evaluada en un contexto.

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Prototipado
Ventajas Documento central de definicin
Ahorra tiempo, esfuerzo y dinero Reduce errores de interpretacin

Identifica de forma temprana errores importantes de la interfaz


Adaptable, rpido de actualizar

Testeable
Twittea este evento con la hashtag #eventosiebs
[#]

[#]

Prototipado
Tipos de prototipo

En papel Wireframe (baja y alta fidelidad)

Diseno visual
Pilotos Simulaciones

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Prototipado
Cundo prototipar?

Persona

Objetivo

Estado Escenario

Tarea

Contenido

Prototipo

Test

Mireia, 27 aos, madrilea, soltera, moderna, divertida, enganchad a al mvil

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 movil

Galera de fotos/vdeos

Representacin interactiva del proceso segn: La persona Su escenario Tareas Y con el contenido definido

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Prototipado
Tipos de prototipo
En papel Wireframe (baja y alta fidelidad) Diseno visual Pilotos Simulaciones

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Prototipado
Tipos de prototipo: Papel

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Prototipado
Tipos de prototipo: Low fidelity

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Prototipado
Tipos de prototipo: Hight fidelity

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Prototipado
Tipos de prototipo: Interactivo

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Prototipado
Tipos de prototipo: Diseo visual

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Prototipado
Consejos 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

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Prototipado
Herramientas

Axure http://www.axure.com/tutorials

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Prototipado
Conceptos: Usabilidad

La usabilidad es un atributo de calidad que mide lo fcil que son de usar las interfaces de usuario. La palabra "usabilidad" tambin se refiere a mtodos para mejorar la facilidad de uso durante el proceso de diseno.
Jakob Nielsens Alertbox: January 4, 2012

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Prototipado
Conceptos: Usabilidad, 5 patrones de calidad
1. Facilidad de aprendizaje. 2. Eficiencia.

3. Memoria.
4. Errores. 5. Satisfaccin.

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Prototipado
Conceptos: Diseo centrado en el usuario (Persona)
Porque es quien usar la aplicacin.
Hay que situar a la persona en el centro del diseo. Es decir, hay que hacer diseo centrado en nuestra persona.

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

Nuestro usuario es nuestra Persona

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Prototipado
Conceptos: Diseo centrado en el usuario (Persona)
Porque es quien usar la aplicacin.
Hay que situar a la persona en el centro del diseo. Es decir, hay que hacer diseo centrado en nuestra persona.

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

Nuestro usuario es nuestra Persona

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Test de usuarios
Cuando testear

Persona

Objetivo

Estado Escenario

Tarea

Contenido

Prototipo

Test

Mireia, 27 aos, madrilea, soltera, moderna, divertida, enganchad a al mvil

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 movil

Galera de fotos/vdeos

Representaci n interactiva del proceso

Probar con usuarios

ITERAR
Twittea este evento con la hashtag #eventosiebs
42
[#]

[#]

Test de usuarios
Low cost iterativo

Web/iPad broadcast con GoToMeeting.com

Twittea este evento con la hashtag #eventosiebs


43
[#]

[#]

Test de usuarios
Cunta gente necesito

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

Twittea este evento con la hashtag #eventosiebs


44
[#]

[#]

Test de usuarios
El test
El prototipo es el documento central de definicin para TODOS los involucrados.

Clientes Usuarios

Tcnicos

Una vez testado, se hacen ajustes rpidos antes de entregarlo al equipo de desarrollo.

Twittea este evento con la hashtag #eventosiebs


45
[#]

[#]

Test de usuarios
El guin del test
Ejemplo de tarea: Tarea 1: (Ponemos a la usuaria en pantalla la nueva seccin de Trucos). Acabas de salir de trabajar, ests en el autobs de camino a casa y quieres averiguar como aplicarte el eyeliner para que te dure todo el da. Respuestas posibles: Opcin a: En el buscador introduce el trmino eyeliner. En el resultado de busqueda hacer clic en uno de los resultados sobre eyeliner Opcin b: En las categoras, ir a cosmtica. En el resultado de cosmtica hacer clic en el truco de Eyeliner. Cmo aplicarse el eyeliner para que dure todo el da.

Twittea este evento con la hashtag #eventosiebs


46
[#]

[#]

Test de usuarios
La entrevista

Instrucciones: 1.Bienvenida al usuario. 2.El test es para detectar errores de interfaz, el usuario nunca comete errores, los detecta. 3.Se leern 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

Sala de testing: Entrevistador Testers: Usuarios

contestar a las dudas de la interfaz que tenga el usuario con respuestas neutrales: AHA!

Twittea este evento con la hashtag #eventosiebs


47
[#]

[#]

Test de usuarios
Bienvenida al usuario
El navegador web debe estar abierto a Google o alguna pagina neutral

Comience explicndole al usuario lo siguiente: Explicarle por qu est aqu, aunque ya tenga una idea, le comentaremos que necesitamos su ayuda para ver si funciona la interfaz segn lo esperado. El objetivo de la prueba es evaluar la calidad de uso de la interfaz, nunca la evaluacin del

participante.
Si el participante comete algn fallo durante la prueba, no ser culpa suya, sino del diseo. 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.

Twittea este evento con la hashtag #eventosiebs


48
[#]

[#]

Test de usuarios
La observacin
Sala de observacin: Moderaror / Coordinador Invitados

Instrucciones: 1.Bienvenida. 2.Observar, aprender y tomar notas 3.Al final de cada sesin, escribir los tres problemas ms 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

Twittea este evento con la hashtag #eventosiebs


49
[#]

[#]

Gracias!

Twittea este evento con la hashtag #eventosiebs


[#]

[#]

Вам также может понравиться