Lecture 3.1: Paper Prototypes and Mockups (12:47)

Hola, bienvenido de nuevo!

Desde principio del curso, he esbozado un proceso de diseño que favorece a la rápida exploración.

Ahora vamos a aprender cómo llevarlo a cabo.

En este video, vamos a bucear en tres técnicas para crear rápidamente prototipos.

A lo largo del curso de su proyecto, la fidelidad de los prototipos que cree aumentará,

y querras escoger instrumentos que reflejen donde quieres llegar en tu proceso de diseño,

no utilizar material demasiado duradero y consume demasiado tiempo desde el principio.

Así, por ejemplo, podría empezar por hacer un guión, que es la primera técnica que vamos a aprender hoy.

Eso le dará una idea de las tareas y los escenarios en los que le gustaría apoyarse.

Entonces puedes continuar con los prototipos de papel, y luego con maquetas digitales.

Entonces, si usted está en el dominio web, algo de HTML estático.

Y sólo entonces, obtener dinámico - añadir en la base de datos y otras piezas de fantasía.

Elegir la herramienta adecuada para el trabajo ayuda a centrarse en las preguntas que tengas

en esa etapa particular del proceso de diseño.

Así, en el video, vamos a hablar de guiones,

crear y probar prototipos de papel,

y pasar a maquetas digitales.

Uno de los errores más fáciles de hacer en el diseño de la interfaz

es centrarse en la interfaz de usuario antes centrado en las tareas que la interfaz va a apoyar.

Y, si usted haga un guión,

la pieza a entender es que el guión es todo sobre las tareas.

He aquí un ejemplo de que el equipo "Lifealyfics" proyecto de mi clase Stanford HCI en el otoño de 2011.

Ellos estaban interesados en las interfaces de usuario para el seguimiento de la conducta,

y aquí hay un par de los bocetos iniciales que hicieron.

Lo bueno de un guión es

que en tan sólo unos pocos paneles se puede transmitir lo que la interfaz de usuario ayudará a una persona lograr.

Y un buen guión, casi siempre va a tener una persona real detrás.

Otra cosa que se puede ver en estos guiones es que tienen una comunicación fluida:

Al igual que una tira cómica, es que muestra lo que está sucediendo en los puntos clave en el tiempo.

Una de las mayores preocupaciones acerca de la creación de guiones gráficos es que me digas "¡Uf, yo no puedo dibujar!"

Pero no se trata de hacer guiones gráficos con hermosos dibujos, se trata de la comunicación de ideas,

y creo que todo el mundo puede aprender a comunicar visualmente ideas.

De alguna manera, el dibujo malo es en realidad una ventaja, porque entonces lo único que puedes hacer es centrarse en el contenido.

Confirmo que los buenos guiones, casi siempre incluyen a una persona que en realidad utiliza la interfaz,

y por eso, para empezar, me gustaría enseñeles mi truco favorito de los guiones gráficos.

Esto lo aprendí de Bill Verplank. Bill y yo enseñamos en Stanford juntos durante varios años.

Y Bill, [inaudible] por muchas generaciones, ha enseñado a la gente a dibujar "personas famosas", y dice así:

[Profesor Klemmer empieza a dibujar una "personas famosas"]

Nosotros lo llamamos una "persona de estrellas", porque el cuerpo de la persona es algo así como una estrella,

y puede hacerles todo tipo de cosas, así que alguien puede estar sosteniendo algo,

o pueden llegar a tocar tal vez algo en una pantalla grande.

Usted puede agregar cualquier dinámica que desee.

Si es necesario, usted puede demostrar que la gente está buscando.

Si lo desea, puede distinguir diferentes personas en las escenas -

así que usted puede colorear un poco, o puede agregar una insignia de sheriff.

Y, cuando se pone todo junto, usted puede obtener algo como esto.

Estas son algunas imágenes del guión guía que hemos enlazadas desde sus ejercicios.

Una de las primeras cosas que debe hacer un guión gráfico es ilustrar un gol.

Al igual que en el guión gráfico, es "Vamos a ver lugares en SF!"

Usted puede mostrar cómo se desarrolla una tarea, y aquí puedes ver algunas "personas de las estrellas",

y están explicando lo que están haciendo, así que aquí está diciendo "Aquí estamos en San Francisco."

Y para el final del guión gráfico que te quiero mostrar cómo se logró su objetivo,

o, de alguna otra manera, tienen un resultado satisfactorio al final del guión gráfico.

Y como muestra un centro comercial,

incluso con un lenguaje visual muy simple, no hay mucho que puedas hacer para obtener el punto de vista.

Por lo tanto, en los guines deben lograr tres cosas:

En primer lugar, se debe concretar: ¿Quiénes son las personas involucradas?

¿Qué es el medio ambiente? y qué tareas están tratando de hacer?

A continuación, debe mostrar la secuencia: ¿Cuáles son los pasos que hacer para cumplir con la tarea? -

No necesariamente lo que la interfaz de usuario es, ni exactamente donde los botones y widgets van,

pero ¿qué papel juega la interfaz de usuario para ayudarles a conseguir la meta a alcanzar.

Y uno de los primeros pasos va a ser: ¿Qué lleva a alguien a usar la aplicación?

En el ejemplo del centro comercial, que se inició con alguien diciendo "Vamos a ver lugares en San Francisco!"

Ese es el trampolín que claramente motiva a la gente a ir a la aplicación.

Y luego, su aplicación puede fácilmente y muestran claramente cuál es la tarea de la idea que tenemos que soportar

Y, por último, al final, tienes la satisfacción

¿que los motivó a utilizar la aplicación, por primera vez?,

¿que los conecta de nuevo para que al final vuelvan?

Las preguntas que le pueden ayudar en su guión son:

"¿Qué es lo que permite a las personas llevarlo a cabo, y qué necesidad tiene su aplicación?"

Me gusta mucho los guiones con enfoque holístico;

que le permite reflexionar sobre cómo puede apoyar una tarea

sin comprometerse con una interfaz de usuario en particular -

esa es la magia, y esto es especialmente importante cuando se está diseñando como un equipo,

porque la idea está en su cabeza puede o no ser la misma idea que hay en la cabeza de otro.

O, usted puede tener esta gran idea, pero la gente no sabe de lo que está hablando todavía.

Una vez que lo tienes en papel y concreto, hace que sea mucho más fácil para la gente tener puntos en común,

y ponerse de acuerdo sobre la forma de avanzar.

Cuando estás haciendo un guion, sugiero imponer límites de tiempo extremadamente duras en ti mismo,

como 10 min por guión

Puede ser fácil para tratar de obtener todo lo bello, incluso si estás dibujando con lápiz y papel,

pero eso no es el objetivo

Una vez que tenga una idea aproximada de lo que su aplicación va a realizar,

usted puede comenzar a pensar en cómo va a implementarlo,

y por poner en práctica me refiero a "¿como va a lucirlo y sentirse el usuario?

¿como va a ser la interfaz de usuario actual? "

Y para deducir de la interfaz de usuario en una etapa temprana,

la técnica mejor que conozco es el uso de prototipos de papel.

Prototipos de papel es exactamente lo que parece:

Vas a hacer una maqueta de la interfaz de usuario, y, en lugar de hacerlo en la computadora,

que puede tomar mucho tiempo y le animamos a intentar conseguir lo bello y exacto,

usted va a utilizar papel, que es posterior a las notas y marcadores para dibujar las cosas muy rápido.

He aquí un ejemplo, es, de nuevo de el "Lifealyfics" equipo.

Estos son los prototipos de papel que hicieron;

Quizás quisiste decir: (Lifeletics / Discover What Makes You Happy / (Begin)
(Lifealyfics / Descubre qué te hace feliz / (Begin)

He aquí cómo funciona / 1. Te enviaremos textos al azar durante todo el día, con la frecuencia que usted seleccione. / 2. Los datos de tu [ilegible] y actividad / (Entonces ¿qué?)

3. Al final de la semana, le enviaremos los resultados, y te darás cuenta de lo que te hace feliz y satisfecho! / (Inicio)

Paso 1 de 3 / Introducir el número de teléfono [campo de texto] / (Siguiente)

Los textos más que responder, más preciso será su gráfico personal! / ¿Cuántos textos por día es lo que quieres recibir? [desplegable]

Paso 2 de 3 / ¿Cuántas veces al día te desea conseguir un texto?

Paso 2 de 3 / ¿Cuántas veces al día te desea conseguir un texto? siguiente

Paso 3 de 3 Primeras texto /: [lista desplegable] Texto / Latest: [lista desplegable] / (Siguiente))

He aquí algunos consejos para hacer efectivos los prototipos de papel:

En primer lugar, guarde todos los materiales en un solo lugar.

Usted va a querer conseguir un cubo de marcadores, tal vez algunas notas Post-It o fichas.

Si tienes un dispositivo móvil que se está simulando, incluso se podría hacer una maqueta de algo así,

y se puede deslizar dentro y fuera widgets de interfaz diferentes.

Al igual que los guines, es importante trabajar con rapidez.

Y si tuvieras un widget que te vas a usar mucho -

como botones o deslizadores o algo así -

a veces puede ser más rápido para fotocopiarlos en una fotocopiadora,

para que pueda hacer una versión y luego fotocopiarlo para tener un montón.

A veces, los buenos prototipos de papel son un poco como jugar a la fantasía como un niño.

Así que, si tienes algo que es complicado o muy interactivo,

sólo puedo imaginar como sería ,

y para que pueda desempeñar ese rol con la persona que está tratando de salir de la aplicación.

Puede ser útil contar con un marco para poner tus widgets de interfaz

Aquí tenemos un bastidor móvil.

También se pueden pegar cosas en el propio dispositivo,

Por lo tanto, si usted desea hacer una captura de pantalla móvil aquí, ...

Interfaz de usuario móvil!

O, si usted tiene una interfaz de usuario de escritorio, usted puede tomar, como, una hoja de 11-por-14 de cartulina

y poner todos los elementos en eso.

un Buen prototipos de papel es también como un collage - usted puede mezclar y combinar las fidelidades.

Así que usted puede utilizar impresos de capturas de pantalla reales, dibujar y anotar en la parte superior de eso -

cualquier cosa que desee que haga conseguir su objetivo rápidamente.

Y para ayudar a la persona que está probando el prototipo

dar el salto conceptual entre el boceto en papel y un sistema interactivo,

usted puede agregar en un widget pequeño y cromo de la interfaz de usuario

dar a entender que es parte de un sistema operativo más amplio.

Paper prototyping is not only fast and efficient;

también es muy divertido, y usted puede conseguir realmente creativo en descubrir diferentes maneras de transmitir interacciones.

Si usted tiene capas en la interfaz de usuario, puede utilizar las transparencias como una manera de mostrarlos.

Si tiene menús emergentes, puede hacer que la parte posterior pegajosa,

por lo que puede permanecer en el lugar correcto en la parte superior de la interfaz principal.

You [puede] usar cualquier tipo de marcador o un bolígrafo que quieras;

usted puede tener las cosas sean de color, [o] sólo negro y blanco - Cualquier cosa que se pueda imaginar.

Puede utilizar cartulina (como éste), o de cartón, fichas, cartón pluma -

todo lo que quieras como un material de soporte.

Cosas como la cinta son muy útiles para tener alrededor.

Si a usted le gustaría ser capaz de tener la entrada del usuario repetible, puede utilizar marcadores para pizarras blancas o plumas transparencia,

y tienen una pizarra o una hoja o transparencia que la entrada de usuario se va de,

y entonces usted se lo puede quitar cuando haya terminado.

Para ser capaz de agregar estructura a su interfaz de usuario, puede tener una anchura de línea de diferentes grosores.

Por lo tanto, usted puede tener una línea más gruesa que la de los elementos más importantes, y una línea más delgada para los elementos de menor importancia.

Y usted puede tener una pila o sea que es posterior a las notas o tarjetas de índice para mostrar los paneles de la pestaña de la interfaz de usuario.

Así, las diferentes capas pueden ser en hojas debajo.

Aquí se puede ver un widget maravilloso de la "Lifealyfics" del equipo,

donde se ha creado una ventana deslizante dentro de una maqueta móvil

como una forma de transmitir cómo algo podría cambiar con el tiempo y en respuesta a la entrada del usuario.

La otra cosa que voy a mostrar aquí, y voy a tocar varias veces en este curso,

es la importancia de probar varios prototipos diferentes alternativas

como una manera de obtener retroalimentación más valiosa desde el usuario.

Por lo tanto, aquí hay diferentes maneras en que podrían presentar los datos que un sistema de registro en vivo está reuniendo.

Otra razón por la que me gusta es que la creación de prototipos de papel todo el mundo pueda participar.

Por lo tanto, si usted probar diseños con los usuarios, darles un lápiz y pídales que modificar la interfaz!

O si han quedó atascado o que algo es extraño,

tomar una hoja de papel y hacer las modificaciones que usted necesita.

Usted puede traer herramientas de creación de prototipos de papel en la sala de juntas, usted puede traer a los clientes -

cualquiera de las partes interesadas que están involucrados en el diseño de interfaz de usuario,

puede hacer que se involucren en prototipos de papel.,

Eso les ayuda a conseguir sus ideas en el sistema

y los capacita para desempeñar un papel más activo en el proceso de diseño.

Una vez que esté listo para seguir adelante a partir de prototipos de papel, el siguiente paso puede ser útil para hacer una maqueta digital.

He aquí un ejemplo de algunas maquetas

que mi equipo de investigación formado por una colaboración con anestesiólogos en la facultad de medicina de Stanford.

Lo primero que me gustaría señalar sobre este

es que usted puede ver paso mucho más tiempo en esta maqueta digital

que en los prototipos de papel que hemos estado hablando hasta ahora.

Y esa es una de las razones por las que creo prototipos de papel es tan importante.

Pero llega un momento en que usted desea ser más específico acerca de píxeles,

y fue entonces cuando maquetas digitales pueden jugar un papel importante.

A medida que sus prototipos aumentar la fidelidad - de storyboards, los prototipos de papel, para maquetas digitales -

los tipos de evaluación y retroalimentación que usted va a obtener de la gente va a evolucionar también.

Por lo tanto, desde el principio, usted podría estar hablando de escenarios con la gente.

Y entonces, con el prototipo de papel,

es posible que la ejecución de estos informales "Pruebe estos, aquí hay tres alternativas" pruebas.

Estos prototipos pueden ser útiles para las críticas dentro de su equipo de diseño.

Y a medida que más y más altos para maquetas fidelidad,

usted puede tener la oportunidad de familiarizarse con las técnicas de experimentación más formales.

Técnicas de prototipado rápido son probablemente el arma más valiosa que tendrá

en un proceso de diseño centrado en el hombre.

Y si usted está interesado en saber más, aquí hay algunos recursos que recomiendo.

Nos vemos la próxima vez.