Code 5: UX Design and Paper Prototyping

Code 5

UX Design and Paper Prototyping

Learning Objectives:

In this unit, you will…

  • Learn about user experience (UX) design and minimum viable product (MVP)
  • Clarify goals for your app
  • Gather information about your users’ needs
  • Create a paper prototype and get feedback on it

You have learned more about App Inventor, and your team has an idea for a problem you want to solve together, along with some ideas for a solution. But you may be wondering how you can take these ideas and transform them into a mobile app that works reliably and does what the users want it to do. Creating a usable app is about more than programming. In fact, the actual programming part may only comprise about 20% of the project!

Imagine your friend asks you to make an app to help her get to school on time every morning. You create an app that uses GPS to track her route to school and let her know if she’s going to be late. When you show it to her, it turns out that she takes the bus to school. She really needed an app that could provide her with a bus schedule in real time. You spent several hours working on the app in vain because you didn’t understand her needs and now you have to spend more time on the redesign!

What would you do differently next time to ensure something like that this doesn’t happen again?

What is UX  Design and Usability?

UX Design (short for user experience) helps people create technology that is easy and intuitive to use. It has to do with the quality of the experience that someone has when using a system or a piece of technology. You can think of it as improving the ‘user’s experience’ which means that a user will have an easy time using the technology and will keep using it because they are satisfied.

While you are designing your app that helps to solve a problem, you want to create something that is easy to use, helps get the job done, and provides an experience that is fun for the user. You will want to make it usable. But what makes an app usable?

Usability is the extent to which a system, product, or service can be used by specific users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use.

It’s not just a matter of what you think might look good, or what you think you would like because you consider yourself a user of the app you will be creating. It’s about context. Think about who else will be using the app and what their needs are. Will people use it once a year, once a week, or once a day?

Where will people be using it? We used to think of applications as something that people use while sitting at their desk. What are some of your favorite apps, and what do they do? Where and how do you use them? Do they do many things, or do they do a few things really well? In order to save your team wasted hours of engineering time, you will be focusing on creating an app with minimal features. This is called Minimum Viable Product, or MVP.

Minimum Viable Product (MVP)

In the world of product development, the MVP is a product with just enough features to get the job done and test with users so that improvements can later be made. The goal is to create the most desirable end product. In general, products with more features involve increased costs and risk of failure. This can happen because of incorrect assumptions about users.

It’s especially important to think about where the app will be used and what would work well on a small screen, portable device such as a smartphone. You wouldn’t want someone to stop using your app because it is too hard understand and use.? How do you learn more about your users to prevent this?

User Centered Design

In User Centered Design, you keep the user in the loop while you are researching, designing, developing, and testing. This is an iterative process, meaning that there will be a sequence of operations that will repeat until you get closer to your final, most desirable product. The steps involved are:

research
Analysis and Research

design
Design

test
Test

These steps repeat until the product is ready to build!

circular-flow700x270

The most valuable thing you can do before you start is to be clear about the goal of your app. This part of the project is called analysis because you need to know what your app needs to be able to do, and getting the details right can be a little tricky.

Activity 1: Review Your Problem Statement and Create a Goal

Remember the problem statement your team worked on in the Ideation Unit? You will want to revisit this now and you will probably want to come back to it again so that your team remains focused on the problem and your original goals. This is an important part of the process because it will help you to analyze the needs of the people using your app, and to understand the technical requirements for your app.  

To summarize, the problem statement is a brief piece of writing that explains the problem that your team is addressing. It should outline the basic facts of the problem, explain why the problem matters, who it affects and how, and present a direct solution.

What you will need:

  • Your initial problem statement. Here is a template for creating your problem statement if the team has not yet done this in the Ideation Pre-Unit.

What you will do:

  1. Review your problem statement, or work on it if you have not yet done so. It should answer four questions:
    • What is the problem? In design terms, this also translates to: what is the need
    • Who does the problem affect and how? This is important because the people who are affected by the problem will be the users of your app. They will be your stakeholders
    • Why is it important to solve? Why is this problem compelling and do you have any evidence of the problem to back up your argument?
    • What is the solution? You may have an initial idea for a solution. You will be experimenting more with the solution in this unit as you get to know your user and through paper prototyping!
  1. Now, can you condense your problem statement into one sentence that says what problem you app is trying to address and how it will address it? This will be used as your goal moving forward.
Research

Once you clarify your goal, you need to define your stakeholders, which are the people who would use your app or would be impacted by your app. These are the people that you need to talk to learn more about what they need the app to do. You and your team might think you are typical users but you should still  talk to other people, interview them, get their feedback, and observe them in the environment that they would be using your app when possible.

Imagine that you are making an app that allows students to pre-order food from the school cafeteria. They can use the app to request the food in the morning and then go and pick it up at lunch time. The idea is that this will help reduce the waiting line in the cafeteria. Who do you think your audience  in this situation will be?

The potential stakeholders for this would be:

  • Students (who will be using the phone app)
  • Cafeteria staff (who will be receiving requests through the app)
  • Parents (who would need to buy their kids a smartphone so they can use the app)
  • School administrators (who might not think phones should be used during school hours)
  • School IT support (who would need to help students who can’t figure out how to work the app or connect to the network)

Activity 2: Make a Map of Your Stakeholders

What you will need:

  • Post-its
  • Markers

What you will do:

  1. Brainstorm and write down all the possible stakeholders for your project - one per post-it
  2. Cluster the stakeholders into similar groups, such as “adults”, “kids”, “school staff”
  3. Decide which stakeholders you will focus on for your app
  4. Write down questions you want to ask them
  5. Plan interviews with stakeholders - individuals on your team can interview people separately to save time, or you can go together if that is more comfortable for you.

Once you have clarified your goal and have identified the stakeholders you would like to interview, you will be ready to learn more about how they think.

Activity 3: Conduct Stakeholder Interviews, Gather Personas and User Stories

To find out what stakeholders want the app to do, you will need to interview them. You can ask them questions to help you find some functional requirements of your app. Functional requirements are things the app needs to do. Using the example above, the app needs to allow students to choose the food they want to order. It should then send the order to the cafeteria, along with the student’s name so that they can be easily identified when picking up the food.

Interview a set of people who are potential stakeholders of your app to learn more about the problem and get their thoughts about the solution. If you know of apps that already exist to help solve the problem your team is focusing on, you can ask users about the app and what they like about it or what doesn’t work so well for them. This will set the groundwork for what you'll do later in Market 3.

What you will need:

  • A print out of the questions you wrote down in the stakeholder map activity
  • Printouts of the Persona Template
  • Printouts of the User Story Template
  • Paper
  • Something to write with
  • Voice recorder or app if you want to record the interview

What you will do:

  1. Introduce yourself and give the person you are interviewing a short overview of what your project is about. Why are you interested in receiving her or his feedback?
  2. Ask the questions your team prepared.
  3. Use the Persona Template from the Goldman Sachs Web UI Toolkit to gather more information. A persona is a description of a person (real or fictitious) who will be using the app. A persona lets you design with a specific user in mind, rather than designing for ‘everybody’. Create as many personas as you need to capture the main categories of people who will be using the app. Be sure to ask them what their goals would be for your app, what their particular needs are, and what their pain points are. Pain points are problems, real or perceived, that people struggle with. Your app will essentially try to help provide solutions to those pain points.
  4. Use the User Story Template from the Goldman Sachs Web UI Toolkit to go a little deeper into what functions your user would like the app to have and why.
  5. Come back together as a team and share your experiences from the interview process, along with your personas and user story templates.
  6. If there are any more stakeholders you feel you need to interview in order to get the information, do this now before moving on to the next step, which is design! You will soon create a paper prototype, which is a fun and creative process.

What is a Paper Prototype?

Prototyping is a way to model ideas or concepts so they can be communicated to people as soon as possible and tested out.  

There are different kinds of prototypes, but we will be focusing on paper prototyping in this unit. A paper prototype is a hand-drawn representation of the user interface which typically looks like screenshots. It can help serve as a walkthrough of how users would navigate the app.

What are the benefits of paper prototyping?

  • You can quickly and communicate your ideas in a visual way. For example, you can show what happens when you click on buttons in your app
  • It’s collaborative! When you work on paper, it’s more casual and conversations spring out of experimentation
  • It’s inexpensive! You don’t have to spend a lot of money to create a paper prototype. You can use materials like paper, magazine cut outs, post-its, markers, stickers, tape, glue
  • You don’t have to be a technical expert for this part of the process
  • You can observe human interaction with the interface and will learn fast about what might and what might not work in your design
  • Prototypes can help to confirm design decisions before you spend more time developing the technology

Keep in mind that design of your app may change to accommodate user need after it has been tested and you have received feedback. This is fine, because you will want to know these things sooner rather than later! Some of you might be afraid to test out your ideas because you think you might receive feedback that isn’t positive and you would see this as failure.

The Importance of Failure

Remember—failure is part of the process and there is a lot you can learn from it. Find out what Richard DeVaul has to say about it in this short video. He is the Rapid Evaluation Team Lead for Google’s top secret lab called the Design Kitchen. You can also learn more about how failure and the rejection of ideas is part of the innovation process there in this article.




Are you inspired? We hope so! You are now ready to move on to the design stage!

Coding Challenge: Paper Prototype Your App

Every product has to start somewhere! Sketching is a fundamental part of the design process and can help you make key decisions about what to design. It can be as simple as drawing on a piece of paper and is helpful when you are working with your initial ideas. You can show your basic app structure and experiment with how people will interact with your app. You can also test color and where buttons will go. Spending time now to test your ideas on paper will help save you time later when you transfer your ideas to your digital prototype.

Before you start, you can learn more about paper prototyping, user flow, and color theory in this short video with Melissa Powel who is on the Google Developer Relations team, and Mariam Shaikh who is a Senior User Experience Designer at Google.

Ready? Find instructions for the challenge here:

“My best successes came on the heels of failures.”

 

–Barbara Corcoran, businesswoman, investor, and author

Reflection

You have come really far and you definitely deserve some congratulations! You are almost done with this unit.

While the feedback is still fresh, now is the time for iteration! Analyze the feedback with your team, make the necessary changes to your paper prototype, and repeat the process as needed!

Your team may be tempted to simply move on and transfer the paper prototype design to a digital prototype. But have you checked to make sure that you have a plan for your minimal viable product before moving on? Do you know which of the app's features are truly essential, versus which would be nice to have?

It wouldn’t hurt to do one more iteration or your paper prototype and share with your mentor and peers!

Additional Resources

Programación 5: Diseño de UX y Prototipo de Papel

Nota: todo los recursos con un * son en inglés

Objetivos de Aprendizaje:

En esta unidad, aprenderás…

  • Obtenga información sobre el diseño de la experiencia del usuario (UX) y el producto viable mínimo (MVP)
  • Clarifique los objetivos de tu aplicación
  • Recopila información sobre las necesidades de tus usuarios
  • Crea un prototipo de papel y obtén retroalimentación al respecto

Has aprendido más sobre App Inventor, y tu equipo tiene una idea para un problema que deseas resolver juntos, junto con algunas ideas para una solución. Pero tal vez se pregunte cómo puede tomar estas ideas y transformarlas en una aplicación móvil que funcione de manera confiable y que haga lo que los usuarios quieren que haga. Crear una aplicación utilizable es más que programar. ¡De hecho, la parte de programación real solo puede comprender alrededor del 20% del proyecto!

Imagine que tu amigo le pide que haga una aplicación para ayudarla a llegar a la escuela a tiempo todas las mañanas. Usted crea una aplicación que usa GPS para rastrear su ruta a la escuela y hacerle saber si llegará tarde. Cuando se lo muestras, resulta que ella toma el autobús a la escuela. Realmente necesitaba una aplicación que pudiera proporcionarle un horario de autobuses en tiempo real. ¡Pasaste varias horas trabajando en la aplicación en vano porque no entendías sus necesidades y ahora tienes que dedicar más tiempo al rediseño!

¿Qué harías de manera diferente la próxima vez para garantizar algo así que esto no vuelva a ocurrir?

¿Qué es Diseño UX y Usabilidad?

El Diseño UX (abreviatura de la experiencia del usuario o user experience en inglés) ayuda a las personas a crear tecnología que es fácil de usar e intuitiva. Tiene que ver con la calidad de la experiencia que alguien tiene cuando usa un sistema o una pieza de tecnología. Puede pensar que mejora la ‘experiencia del usuario’, lo que significa que a un usuario le resultará fácil usar la tecnología y seguirá utilizándola porque está satisfecho.

Mientras diseñas tu aplicación que ayuda a resolver un problema, deberías de querer crear algo que sea fácil de usar, que la aplicación cumple con el objetivo deseado  y brinde una experiencia que sea divertida para el usuario. Querrás hacerla utilizable. Pero, ¿qué hace que una aplicación sea utilizable?

La usabilidad es la medida en que un sistema, producto o servicio puede ser utilizado por usuarios específicos para alcanzar objetivos específicos con efectividad, eficiencia y satisfacción en un contexto de uso específico.

No se trata solo de lo que piensas que podría verse bien o de lo que crees que te gustaría porque te consideras un usuario de la aplicación que vas a crear. Se trata de contexto. Piensa en quién más usará la aplicación y cuáles son sus necesidades. ¿Las personas lo usarán una vez al año, una vez a la semana o una vez al día?

¿Dónde estarán usandola? Solíamos pensar en las aplicaciones como algo que la gente usa mientras está sentada en su escritorio. ¿Cuáles son algunas de tus aplicaciones favoritas y qué hacen? ¿Dónde y cómo los usas? ¿Hacen muchas cosas o hacen algunas cosas realmente bien? Para ahorrarle a tu equipo horas desperdiciadas de tiempo de ingeniería, se centrarán en crear una aplicación con características mínimas. Esto se llama producto mínimo viable o MVP.

Producto Mínimo Viable (MVP)

En el mundo del desarrollo de productos, el MVP es un producto con las características suficientes para hacer el trabajo y probarlo con los usuarios para que luego se puedan realizar mejoras. El objetivo es crear el producto final más deseado. En general, los productos con más funciones implican un aumento de los costos y el riesgo de fallas. Esto puede suceder debido a suposiciones incorrectas sobre los usuarios.

Es especialmente importante pensar dónde se usará la aplicación y qué funcionaría bien en una pantalla pequeña, dispositivo portátil como un teléfono inteligente. No querrás que alguien dejara de usar tu aplicación porque es muy difícil de entender y usar. ¿Cómo se aprende más sobre tus usuarios para evitar esto?

Diseño Centrado en el Usuario

En el diseño centrado en el usuario (User Centered Design en inglés) tu mantienes al usuario al tanto mientras investigas, diseñas, desarrollas y pruebas. Este es un proceso iterativo, lo que significa que habrá una secuencia de operaciones que se repetirán hasta que se acerque a tu producto final más deseado. Los pasos involucrados son:

research
Análisis y Investigación

design
Diseño

test
Prueba

¡Estos pasos se repiten hasta el producto esta listo para ser construido!

circular-flow700x270

Lo más valioso que puedes hacer antes de comenzar es tener claro el objetivo de tu aplicación. Esta parte del proyecto se llama análisis porque necesitas saber qué debe hacer tu aplicación, y obtener los detalles correctos puede ser un poco complicado.

Actividad 1: Repasa Tu Planteamiento del Problema y Crear una Meta 

¿Recuerdas el planteamiento del problema en el que trabajaste con tu  equipo en la Unidad de Ideación? Deberás volver a consultarlo ahora y probablemente querrás volver a consultarlo después para que tu equipo siga centrado en el problema y en tus objetivos originales. Esta es una parte importante del proceso porque te ayudará a analizar las necesidades de las personas que usan tu aplicación y a comprender los requisitos técnicos de tu aplicación.

Para resumir, el planteamiento del problema es una breve redacción que explica el problema al que se está enfrentando tu equipo. Debe delinear los hechos básicos del problema, explicar por qué el problema importa, a quién afecta y cómo, y presentar una solución directa.

Que necesitarás:

  • Tu declaración de problema inicial. Aquí hay una plantilla* para crear tu declaración de problema si el equipo aún no lo ha hecho en la Pre-Unidad de Ideación.

Qué harás:

  1. Revisa el enunciado del problema o trabaja si aún no lo has hecho. Deberías responder cuatro preguntas:
    • ¿Cuál es el problema? En términos de diseño, esto también se traduce en: ¿cuál es la necesidad?
    • ¿A quién afecta el problema y cómo? Esto es importante porque las personas que se verán afectadas por el problema serán los usuarios de tu aplicación. Ellos serán tus partes interesadas (stakeholders)
    • ¿Por qué es importante resolverlo? ¿Por qué este problema es convincente y tiene alguna evidencia del problema para respaldar tu argumento?
    • ¿Cuál es la solución? Puedes tener una idea inicial para una solución. ¡Experimentará más con la solución en esta unidad a medida que conozcas a tu usuario y mediante prototipos de papel!
  1. Ahora, ¿puedes condensar el enunciado de tu problema en una oración que diga qué problema está tratando de resolver la aplicación y cómo lo abordarás? Esto se usará como tu objetivo para seguir adelante.

descarga la plantilla

Investigación

Una vez que aclare tu objetivo, debe definir sus partes interesadas (stakeholders), que son las personas que utilizarían tu aplicación o que tu aplicación podría afectar. Estas son las personas con las que necesita hablar para obtener más información sobre lo que necesitan que haga la aplicación. Tú y tu equipo podrían pensar que son usuarios típicos, pero igual deberían hablar con otras personas, entrevistarlas, obtener sus comentarios y observar en el entorno que utilizarían tu aplicación cuando sea posible.

Imagínete que estás haciendo una aplicación que les permita a los estudiantes pre-ordenar comida en la cafetería de la escuela. Pueden usar la aplicación para pedir la comida por la mañana y luego ir a buscarla a la hora del almuerzo. La idea es que esto ayudará a reducir la línea de espera en la cafetería. ¿Quién crees que será tu público en esta situación?

Los interesados ​​potenciales (stakeholders) para esto serían:

  • Estudiantes (que usarán la aplicación del teléfono)
  • Personal de la cafetería (que recibirá solicitudes a través de la aplicación)
  • Padres (que necesitarían comprar a sus hijos un teléfono inteligente para que puedan usar la aplicación)
  • Los administradores escolares (que pueden pensar que los teléfonos no deben usarse durante el horario escolar)
  • Soporte de TI de la escuela (que necesitaría ayudar a los estudiantes que no pueden encontrar la manera de trabajar con la aplicación o conectarse a la red)

Actividad 2: Haz un Mapa de Tus Grupos de Interés

Que necesitarás:

  • Post-its
  • Marcadores

Qué harás:

  1. Haz una lluvia de ideas y anota todas las partes interesadas posibles para tu proyecto, una por publicación.
  2. Agrupe a las partes interesadas en grupos similares, como “adultos”, “niños”, “personal de la escuela”
  3. Decida en qué partes interesadas te enfocarás para tu aplicación
  4. Escriba las preguntas que quieres hacerles
  5. Planifique las entrevistas con las partes interesadas: las personas de tu equipo pueden entrevistar a las personas por separado para ahorrar tiempo, o pueden ir juntas si le resulta más cómodo.

Una vez que hayas aclarado tu objetivo y hayas identificado a las partes interesadas a las que te gustarías entrevistar, estarás lista para aprender más sobre cómo piensan.

Actividad 3: realizar entrevistas con partes interesadas, recopilar personajes e historias de usuarios

Para saber qué quieren los stakeholders que la aplicación haga, tendrás que entrevistarlos. Puedes hacerles preguntas para ayudarte a encontrar algunos requisitos esenciales y funcionales de tu aplicación. Los requisitos funcionales son cosas que la aplicación debe hacer. Con el ejemplo anterior, la aplicación debe permitir que los estudiantes elijan los alimentos que desean pedir. A continuación, debe enviar la orden a la cafetería, junto con el nombre del alumno para que puedan identificarse fácilmente al recoger la comida.

Entrevista a un grupo de personas que son potenciales stakeholders ​​de tu aplicación para aprender más sobre el problema y conocer sus opiniones sobre la solución. Si conoces aplicaciones que ya existen para ayudar a resolver el problema en el que tu equipo se está enfocando, puedes preguntarles a los usuarios acerca de la aplicación y qué les gusta o qué no funciona tan bien para ellos. Esto sentará las bases para lo que harás más tarde en Marketing 3.

Que necesitarás:

  • Una impresión de las preguntas que anotó en la actividad del mapa de stakeholder
  • Impresiones de la plantilla de Persona*
  • Impresiones de la plantilla de historia de usuario (user story)*
  • Papel
  • Algo para escribir
  • Grabadora de voz o aplicación si desea grabar la entrevista

Qué harás:

  1. Preséntete y brinda a la persona a la que estás entrevistando una breve descripción de tu proyecto. ¿Por qué estás interesado en recibir sus comentarios?
  2. Haz las preguntas que tu equipo preparó.
  3. Usa la Plantilla de Persona del Toolkit de interfaz de usuario web de Goldman Sachs para obtener más información. Una persona es una descripción de una persona (real o ficticia) que usará la aplicación. Una persona te permite diseñar pensando en un usuario específico, en lugar de diseñar para ‘todos’. Cree tantas personas como necesite para capturar las principales categorías de personas que usarán la aplicación. Asegúrete de hacer preguntas sobre cuáles serán sus objetivos para una aplicación, cuáles son sus necesidades particulares y cuáles son sus puntos débiles. Los puntos de dolor son problemas, reales o percibidos, con los que las personas luchan. Tu aplicación esencialmente tratará de ayudar a proporcionar soluciones a esos puntos de dolor.
  4. Usa la Plantilla de Historia de Usuario del Toolkit de interfaz de usuario web de Goldman Sachs para profundizar en las funciones que tu usuario desea que tenga la aplicación y por qué.
  5. Vuelva a reunirte como un equipo y comparta sus experiencias del proceso de entrevistas, junto con sus personajes y las plantillas de historias de usuario.
  6. Si hay más interesados ​​que crees que necesitas entrevistar para obtener la información, hazlo ahora antes de pasar al próximo paso, ¡que es el diseño! Pronto crearás un prototipo en papel, que es un proceso divertido y creativo.

¿Qué es un prototipo de papel?

La creación de prototipos es una forma de modelar ideas o conceptos para que puedan ser comunicados a las personas lo más pronto posible y probadas.

Existen diferentes tipos de prototipos*, pero nos centraremos en la creación de prototipos de papel en esta unidad. Un prototipo de papel es una representación dibujada a mano de la interfaz de usuario que generalmente se parece a capturas de pantalla. Puede ayudar a servir de guía sobre cómo los usuarios navegarían por la aplicación.

¿Cuáles son los beneficios de la creación de prototipos de papel?

  • Puedes comunicar tus ideas rápidamente y de forma visual. Por ejemplo, puedes mostrar lo que sucede cuando haces clic en los botones de tu aplicación
  • ¡Es colaborativo! Cuando trabajas en papel, es más informal y las conversaciones surgen de la experimentación
  • ¡Es barato! No tienes que gastar mucho dinero para crear un prototipo en papel. Puedes usar materiales como papel, recortes de revistas, calcomanias, marcadores, pegatinas, cinta adhesiva, pegamento
  • No es necesario ser un experto técnico para esta parte del proceso
  • Puedes observar la interacción humana con la interfaz y aprenderás rápidamente sobre lo que podría y no podría funcionar en tu diseño
  • Los prototipos pueden ayudar a confirmar las decisiones de diseño antes de dedicar más tiempo al desarrollo de la tecnología

Ten en cuenta que el diseño de tu aplicación puede cambiar para adaptarse a las necesidades del usuario una vez que se haya probado y haya recibido comentarios. ¡Esto está bien, porque querrás saber estas cosas más temprano que tarde! Algunos de ustedes pueden tener miedo de poner a prueba sus ideas porque piensan que podrían recibir comentarios que no son positivos y verían esto como un fracaso.

La Importancia de la Falla

Recuerda: el fracaso es parte del proceso y hay mucho que puedes aprender de él. Descubra lo que Richard DeVaul tiene que decir al respecto en este breve video. Él es el líder del equipo de evaluación rápida para el laboratorio secreto superior de Google llamado Design Kitchen. También puede obtener más información sobre cómo el fracaso y el rechazo de ideas es parte del proceso de innovación que se encuentra en este artículo.


¿Estas inspirada? Esperamos que si. ¡Estás lista ahora para el etapa de diseño!

Desafío de Programación: Haz un Prototipo de Papel para tu App

¡Cada producto tiene que comenzar en alguna parte! El boceto es una parte fundamental del proceso de diseño y puede ayudarte a tomar decisiones clave sobre qué diseñar. Puede ser tan simple como dibujar en un pedazo de papel y es útil cuando se trabaja con tus ideas iniciales. Puedes mostrar la estructura básica de tu aplicación y experimentar cómo las personas interactuarán con tu aplicación. También puedes probar el color y dónde irán los botones. Dedicar tiempo ahora para probar tus ideas en papel te ayudará a ahorrar tiempo más tarde cuando transfiera tus ideas a tu prototipo digital.

Antes de comenzar, puedes obtener más información sobre creación de prototipos de papel, flujo de usuarios y teoría del color en este breve video con Melissa Powel, que forma parte del equipo de Google Developer Relations, y Mariam Shaikh, que es diseñadora de experiencia de usuario senior en Google.

 

¿Lista? Encontrarás la instrucciones para el desafío aquí

Ver las Instrucciones

 

“Mis mejores éxitos vinieron tras los fracasos”.

 

–Barbara Corcoran, empresaria, inversionista, y autora

Reflexión

¡Has llegado muy lejos y definitivamente mereces algunas felicitaciones! Ya casi terminaste con esta unidad.

Ahora que los comentarios aún son recientes, ¡ahora es el momento de la iteración! Analiza los comentarios con tu equipo, realiza los cambios necesarios en tu prototipo de papel y repita el proceso según sea necesario.

Tu equipo puede sentirse tentadas de seguir adelante y transferir el diseño del prototipo de papel a un prototipo digital. ¿Pero han revisado para asegurarse de tener un plan para su producto viable mínimo antes de continuar? ¿Sabes cuáles de las características de la aplicación son realmente esenciales, frente a las serian buenas más no esenciales tener?

¡No estaría de más hacer una iteración más con tu prototipo en papel y compartirlo con tu mentor y tus compañeros!

Recursos adicionales

Code 5: UX Design and Papier Prototypenentwicklung

Lernziele:

In dieser Einheit wirst du…

  • etwas über die Nutzererfahrung, auch user experience (UX) design genannt, und das minimal anwendungsfähige Produkt (minimum viable product oder MVP) lernen
  • die Ziele deiner App festlegen
  • Informationen über die Bedürfnisse deiner Nutzer sammeln
  • Einen Papier Prototypen kreieren und Feedback dafür erhalten

Du hast schon viel über App Inventor gelernt und inzwischen hat dein Team auch bereits eine Idee welches Problem ihr gemeinsam lösen wollt und erste Lösungsvorschläge. Vielleicht fragst du dich, wie du diese Ideen in einer verlässlich arbeitenden App, die auch macht was der Nutzer will, verwirklichen kannst. Um eine nutzbare App zu entwickeln benötigst du mehr als nur Programmierkenntnisse. Tatsächlich wird die eigentliche Programmierarbeit nur circa 20% deiner Zeit in Anspruch nehmen!

Stell dir vor eine Freundin bittet dich eine App zu entwickeln, die ihr hilft jeden Morgen rechtzeitig zur Schule zu kommen. Du entwickelst eine App die GPS Daten nutzt um ihren Weg zur Schule nachzuvollziehen und sie zu warnen, wenn sie zu spät kommen wird. Sobald du ihr jedoch die App zum ersten Mal zeigst stellt sich heraus, dass sie immer den Bus nimmt um zur Schule zu kommen. Was sie wirklich benötigt ist eine App, die ihr die Abfahrtszeiten der Busse in Echtzeit anzeigt. Du hast mehrere Stunden deiner Zeit umsonst an einer App gearbeitet, weil du ihre Bedürfnisse nicht richtig verstanden hattest und musst nun mehr Zeit in die Überarbeitungen investieren!

Was würdest du das nächste Mal anders machen, damit so etwas nicht noch mal passiert?

Was sind UX Design und Benutzerfreundlichkeit?

UX Design (Abkürzung für user experience oder Benutzererfahrung) hilft Leuten dabei Technologien zu entwickeln die einfach und intuitiv zu bedienen sind. Es hat etwas mit der gefühlten Qualität eines Erlebnisses zu tun, die ein Nutzer hat, wenn er ein System oder eine Technologie verwendet. Du kannst es dir so vorstellen, dass eine Verbesserung der ‘user experience’ bedeutet, dass der Nutzer keine Probleme bei der Nutzung der Technologie hat und diese auch weiterhin verwenden wird, weil sie alle seine Wünsche erfüllt.

Während du daran arbeitest eine App zu designen die bei der Lösung eines Problems helfen soll, möchtest du natürlich etwas entwickeln das einfach zu bedienen ist, die Aufgabe erfüllt und den Nutzer glücklich macht. Du willst deine App nutzbar machen. Aber wie genau macht man eine App nutzbar?

Nutzbarkeit ist das Maß indem ein System, ein Produkt oder ein Service bestimmte Ziele effektiv, effizient und zufriedenstellend in einem gewissen Nutzungskontext erfüllt.

Wenn du eine App entwickelst geht es nicht nur darum was deiner Meinung nach gut aussehen oder was dir gefallen würde, denn du die App nutzt. Es geht um den Kontext. Denke auch an die Leute, die später deine App benutzen werden und ihre Bedürfnisse. Werden Leute sie einmal im Jahr, jede Woche oder sogar täglich nutzen?

Wo werden Leute deine App nutzen? Wir sind daran gewöhnt uns vorzustellen, dass Leute Anwendungen nutzen, wenn sie an ihrem Tisch sitzen. Welche sind deine liebsten Apps und was kannst du mit ihnen machen? Wo und wie verwendest du sie? Können sie viele Sachen oder ein paar besonders gut? Um deinem Team einige Stunden an unnötiger Arbeit zu sparen, solltest du dich für eine App mit minimalen Anwendungsmöglichkeiten entscheiden. Diese werden auch Minimum Viable Product (MVP) oder minimal anwendungsfähiges Produkt genannt.

Minimal anwendungsfähiges Produkt
Minimum Viable Product (MVP)

In der Welt der Produktentwicklung ist ein MVP ein Produkt, dass gerade genug Funktionen hat um seine Aufgabe zu erfüllen und von Nutzern getestet werden kann, so dass später Verbesserungen eingebaut werden können. Das Ziel ist es, dass bestmöglichste Endprodukt zu entwickeln. Generell gilt, dass Produkte mit mehr Funktionen mehr Kosten und ein höheres Risiko zum Scheitern beinhalten. Dies kann geschehen, weil falsche Annahmen über die Nutzer gemacht wurden.

Es ist besonders wichtig darüber nachzudenken wo die App verwendet wird und was gut auf einem kleinen Bildschirm, wie dem eines Handys, darstellbar und bedienbar ist. Du würdest nicht wollen, dass jemand aufhört deine App zu verwenden, weil sie zu schwer zu verstehen ist. Wie kannst du also mehr über deine Nutzer lernen um dies zu verhindern?

Benutzerorientiertes Design (User Centered Design)

Bei einem Benutzerorientiertem Design behältst du den Nutzer stets im Hinterkopf während du recherchierst, designst, entwickelst und testest. Dies ist ein iterativer Prozess, dass bedeutet du wirst eine Reihe von Handlungen solange wiederholen bis du nah an deinem Ziel bist. Diese Schritte sind in dem Prozess enthalten:

research
Analyse und Recherche

design
Design

test
Test

Diese Schritte wiederholen sich bis dein Produkt bereit ist zur Entwicklung!

circular-flow700x270

Das wichtigste, dass du zu Beginn machen solltest, ist das Ziel deiner App festzulegen. Dieser Teil deines Projektes wird auch als Analyse bezeichnet, weil du wissen musst was deine App können muss und es kann manchmal etwas schwierig sein die Details festzulegen.

Aufgabe 1: Überprüfe deine Problemstellung und lege Ziele fest

Erinnerst du dich an die Problemstellung an der dein Team in der Ideen Einheit

gearbeitet hat? Es ist gut diese noch einmal zu besuchen und wahrscheinlich wirst du auch später noch einmal darauf zurückkommen wollen, so dass dein Team seine ursprünglichen Ziele nicht aus den Augen verliert. Dies ist ein wichtiger Teil des Prozesses, da es dir dabei helfen wird die Bedürfnisse der Nutzer deiner App zu analysieren und die technischen Voraussetzungen für deine App festzulegen.

Kurzgefasst, die Problemstellung ist eine kurze schriftliche Beschreibung des Problems an dem dein Team arbeiten will. Es sollte die Grundlagen des Problems, eine Erklärung warum das Problem wichtig ist, wen es wie betrifft und einen Lösungsvorschlag enthalten.

Das benötigst du:

  • Deine anfängliche Problemstellung. Hier ist eine Vorlage um deine Problemstellung schriftlich festzuhalten, wenn dein Team dies noch nicht in der Ideen Vorbereitungseinheit getan hat

So geht’s:

  1. Überprüft eure Problemstellung oder entwickelt eine, wenn ihr dies noch nicht getan habt. Dies Problemstellung sollte die folgenden vier Fragen beantworten:
    • Was ist die Lösung? Du hast vielleicht schon eine erste Lösungsidee. Während du in dieser Einheit deine Nutzer kennen lernst und einen Papier Prototypen entwickelst kannst du mit deiner Lösungsidee noch weitere experimentieren!
    • Was ist das Problem? Für das Design bedeutet dies auch: Was wird benötigt
    • Wen betrifft das Problem und wie betrifft es sie? Dies ist wichtig, weil die Leute die deine App verwenden werden, von dem Problem betroffen sind. Sie sind deine Stakeholder (Interessenten)
    • Warum ist es wichtig das Problem zu lösen? Warum ist es zwingend nötig dieses Problem zu lösen und hast du irgendwelche Beweise für deine Argumente?
  1. Bist du in der Lage dein Problem in einem einzigen Satz ausdrücken, der beinhaltet welches Problem du auf welcher Weise mit deiner App lösen willst? Dies kann dir dabei helfen, näher an dein Ziel zu kommen.

Downloade die Vorlage

Recherche

Nachdem du dein Ziel definiert hast ist es an der Zeit deine Stakeholder, also Menschen die deine App verwenden oder von ihr beeinflusst würden, zu finden. Du musst mit genau diesen Leuten reden und mehr darüber herausfinden, was sie von deiner App erwarten. Ihr denkt vielleicht du und dein Team seid typische Nutzer eurer App, dennoch solltet ihr zusätzlich mit anderen Leuten sprechen. Interviewt sie, lasst euch Feedback geben und beobachtet sie bei der Benutzung eurer App in ihrem Alltag, wenn möglich.

Stellt euch einmal vor, dass ihr eine App entwickelt die es Schülern erlaubt Essen aus der Schulcafeteria vorzubestellen. Sie können die App nutzen um morgens bereits Essen zu bestellen und dieses zur Mittagszeit abzuholen. Die Idee dahinter ist, dass die Wartezeiten in der Cafeteria verkürzt werden sollen. Was glaubst du, wer wird deine App in dieser Situation nutzen?

Die potentiellen Stakeholder wären in dieser Situation:

  • Schüler (die die App auf ihrem Handy nutzen)
  • Cafeteria Personal (die die Bestellungen über die App erhalten)
  • Eltern (die ihren Kindern ein Smartphone kaufen müssten, so dass sie die App verwenden können)
  • Schul-Administratoren (die vielleicht der Ansicht sind, dass Handys nichts in der Schule zu suchen haben)
  • Schul IT (die den Schülern helfen müssten, die die App nicht bedienen können oder die sich nicht mit dem Netzwerk verbinden können)

Aufgabe 2: Finde deine Stakeholder

Was du brauchst:

  • Post-Its
  • Stifts

So geht’s:

  1. Überlegt euch alle möglichen Stakeholder für euer Projekt – einen pro Post-It
  2. Sortiert die Stakeholder in Gruppen, z. B. “Eltern”, “Schüler”, “Schulpersonal”
  3. Entscheide auf welche Stakeholder ihr euch fokussieren wollt bei eurer App
  4. Sammelt Fragen die ihr ihnen stellen wollt
  5. Plant Interviews mit den Stakeholdern – ihr könnt Zeit sparen indem jeder aus eurem Team eine andere Person zur gleichen Zeit interviewt, ihr könnt die Interviews natürlich auch gemeinsam machen, wenn ihr euch dabei wohler fühlt.

Sobald ihr euer Ziel festgelegt und die Stakeholder, die ihr interviewen wollt, gefunden habt seid ihr bereit mehr darüber zu lernen, was sie denken.

Aufgabe 3: Interviewe deine Stakeholder und sammle Charaktere und Nutzerstories

Um herauszufinden, was Stakeholders von deiner App erwarten, musst du sie interviewen. Du kannst ihnen unterschiedliche Fragen stellen um die Funktionen, die deine App benötigt, herauszufinden. Funktionsanforderungen sind Dinge, die deine App können muss. Wenn du an unser letztes Beispiel denkst, muss die App den Schülern erlauben Essen auszuwählen. Anschließend muss die Bestellung und der Name des Schülers an die Cafeteria geschickt werden, so dass die Bestellung mittags schnell gefunden werden kann.

Interviewe eine Reihe von Leuten, die an deiner App interessiert sind und somit potentielle Stakeholder sind, um mehr über das Problem und ihre Lösungsvorschläge zu erfahren. Wenn es bereits Apps gibt die dabei helfen könnten das Problem an dem dein Team arbeitet zu lösen, kannst du deren Nutzer auch fragen, was ihnen an der App gefällt und was nicht. Dies ist eine gute Vorbereitung auf das, was du später in Market 3 tun wirst.

Du brauchst:

  • Eine Liste der Fragen, die du für die Stakeholder entwickelt hast
  • Ausdrucke der   Persona Vorlage
  • Ausdrucke der Benutzer Story Vorlage
  • Papier
  • Etwas zum Schreiben
  • Diktiergerät oder App mit der du das Interview aufnehmen kannst

So geht’s:

  1. Stelle dich selber vor und erläutere deinem Interviewpartner kurz, worum dein Projekt sich dreht. Warum bist du an seinem Feedback interessiert?
  2. Stelle alle Fragen, die dein Team vorbereitet hat.
  3. Nutze die Persona Vorlage von dem Goldman Sachs Web UI Toolkit um mehr Informationen zu sammeln. Die Persona ist eine Beschreibung der Person (real oder fiktiv) die die App nutzen wird. Eine Persona hilft dir dabei an einen bestimmten Nutzertyp zu denken, wenn du deine App designst, anstatt an alle möglichen Nutzer. Erstelle so viele Personas wie du brauchst um alle Arten von Leuten, die deine App verwenden werden, abzudecken. Denk daran sie zu fragen was ihre Ziele für deine App wären, was ihre persönlichen Bedürfnisse sind und was ihre Problempunkte sind.  Problempunkte sind Probleme, real oder eingebildet, mit denen Menschen kämpfen. Deine App sollte unbedingt versuchen Lösungen für diese Probleme zu liefern.
  4. Nutza die Benutzer Story Vorlage von dem Goldman Sachs Web UI Toolkit um besser herausfinden zu können, welche Funktionen die Nutzer von deiner App erwarten und warum.
  5. Haltet ein Teamtreffen ab und teilt eure neuen Eindrücke aus den Interviews, die erstellten Personas und Geschichten.
  6. Wenn ihr das Gefühl habt, dass es noch weitere Stakeholder gibt die ihr interviewen solltet um weitere Informationen zu sammeln, tut dies bevor ihr mit dem nächsten Schritt, dem Design, weitermacht! Als nächstes werdet ihr einen Papier Prototypen designen, dies mach sehr viel Spaß und ist eine besonders kreative Arbeit.

Was ist ein Papier Prototyp?

Die Prototypenentwicklung ist eine Art Ideen und Konzepte darzustellen, so dass man diese anderen Leuten so früh wie möglich vorstellen kann.

Es gibt verschiedene Arten von Prototypen, wir werden uns in dieser Einheit jedoch auf Papier Prototypen fokussieren. Ein Papier Prototyp ist eine selbst gemalte Darstellung der Benutzeroberfläche die normalerweise wie ein Bildschirmfoto aussieht. Sie kann helfen jeden Schritt, den der Nutzer beim Verwenden der App macht, darzustellen.

Was sind die Vorteile eines Papier Prototyps?

  • Du kannst deine Ideen schnell visuell darstellen und jemandem zeigen. Du kannst zum Beispiel zeigen was passiert, wenn man auf Knöpfe in deiner App drückt
  • Es ist eine Teamarbeit! Wenn du mit Papier arbeitest kannst du viel experimentieren und so neue Ideen entwickeln
  • Es ist günstig! Du musst nicht viel Geld ausgeben um einen Prototypen aus Papier herzustellen. Du kannst ganz einfach Papier, alte Magazine, Post-Its, Stifte, Aufkleber, Klebeband und Kleber nutzen
  • Du musst kein Technikexperte sein um diesen Teil des Entwicklungsprozesses zu bearbeiten
  • Du kannst beobachten wie Menschen auf deine App-Oberfläche reagieren und wirst schnell lernen, welches Design funktioniert und welches nicht
  • Prototypen können dir dabei helfen Designentscheidungen zu bestätigen oder zu verwerfen bevor du zu viel Zeit mit ihrer technischen Verwirklichung verbringst

Denk immer daran, dass das Design deiner App womöglich später noch an die Bedürfnisse der Nutzer angepasst werden muss, nachdem du es einem Testlauf unterzogen und erstes Feedback erhalten hast. Das ist in Ordnung, du willst früher oder später eh wissen ob das Design den Wünschen der Nutzer entspricht. Einige von euch haben vielleicht Angst eure Ideen zu testen, weil sie negatives Feedback erhalten könnten und das als Misserfolg ansehen.

Die Bedeutung von Misserfolgen

Denk dran – Misserfolge sind Teil des Prozesses und du kannst viel aus ihnen lernen. Finde heraus was Richard DeVaul über Misserfolge zu berichten hat in diesem kurzen Video. Er ist der Leiter des Rapid Evaluation Teams für Google’s super geheimes Labor ‘Design Kitchen’. Du kannst in diesem Artikel noch mehr darüber lernen warum Misserfolge und die Ablehnung von Ideen ein Teil des Fortschrittes sind.



Bist du schon inspiriert? Das hoffen wir doch! Nun bist du bereit mit dem nächsten Schritt des Designs weiter zu machen!

Code Herausforderung: Papier Prototyp deiner App

Mit jedem Produkt muss man irgendwo beginnen! Das Skizzieren ist ein grundlegender Teil des Designprozesses und kann dir dabei helfen wichtige Entscheidungen über das Design zu treffen. Schon das Zeichnen mit einem Stift auf Papier kann dir dabei helfen an deinen Ideen zu arbeiten. Du kannst die grundlegende Struktur deiner App darstellen und dir anschauen, wie Leute mit deiner App umgehen. Du kannst ebenfalls verschiedene Farben und Positionen für Knöpfe ausprobieren. Wenn du jetzt deine Ideen auf Papier ausprobierst kannst du später, bei der Übertragung deiner Ideen auf den digitalen Prototypen, viel Zeit sparen.

Bevor du beginnst kannst du in diesem Video mit Melissa Powel und Mariam Shaikh von Google noch mehr über Papier Prototypen, Nutzererlebnissen und Farbtheorie lernen.

Bereit? Hier findest du die Anleitung für die Herausforderung:

Schau dir die Anleitung an

“My best successes came on the heels of failures.”

–Barbara Corcoran, Unternehmerin, Investorin und Autorin

Reflexion

Du bist bereits sehr weit gekommen und verdienst definitiv Glückwünsche! Du hast diese Einheit bereits fast geschafft.

Während du das Feedback deiner Nutzer noch im Kopf hast ist es Zeit für die erste Iteration! Analysiere das Feedback mit deinem Team und passe, wenn nötig, deinen Prototypen an und wiederhole den Prozess!

Es ist für dein Team natürlich verlockend direkt weiter zu machen und aus deinem Papier Prototypen einen digitalen Prototyp zu entwickeln. Aber fragt euch selber noch einmal, bevor ihr mit dem nächsten Schritt weitermacht, ob ihr wirklich ein minimal anwendungsfähiges Produkt designt habt? Auf welche der App-Funktionen könnt ihr auf keinen Fall verzichten und welche wären nur nett zu haben?

Eine weitere Iteration des Papier Prototyps mit eurem Mentor und Freunden schadet nie!

Weitere Quellen