- Learn about standard user interface practices
- Create a paper prototype of your app
- Get user feedback using your prototype
These are the activities for this lesson:
PROTOTYPING
Now that you have an idea for your minimum viable product, it’s time to think about what your project will look like and sketch out some ideas.
A prototype is an early model of something.
App developers generally make a paper prototype of their app before they start coding.
A paper prototype is a hand-drawn representation of what the user interface of your app will look like. It typically includes drawings of each screen in your app, depicting different states.
WHY PROTOTYPE?
- You can quickly communicate your ideas visually.
- 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 time and money
- You don’t need access to a computer or the Internet.
- You don’t have to be a technical expert for this part of the process.
- You can see how your users react to your prototype to quickly learn what may or may not work in your design.
- Design decisions can be confirmed before you spend time developing and coding your app.
Learn how other Technovation Girls teams created paper and digital prototypes in this video!
Mentor Tip
Best practices: When introducing students to paper and cardboard prototypes, emphasize the importance of starting with simple, low-cost models to test ideas. For instance, “Paper and cardboard prototypes are like rough drafts for your design. They help you see how your idea looks and works before you make a final version. These simple models let you quickly make changes and figure out what works best.”
The paper prototype can be used to get feedback from potential users (ie. family members, other Mentors, friends, community members, etc.). This feedback can part of the feedback included in the final submission materials.
The following videos will show an example of prototyping project with accompanying hardware (on the left) and the process of testing with a paper prototype (on the right).
Guiding Questions to ask students:
Why is it useful to create a simple prototype with paper or cardboard before making a final product?
How can making a paper or cardboard model help you improve your design?
What are some things you might learn from testing a paper prototype that you wouldn’t know otherwise?
Mentor tips are provided by support from AmeriCorps.
PROTOTYPE ELEMENTS
Keep these things in mind as you start your paper prototype. Hover over each card to learn more.
Users
Users
Device Types
Device Types
Phone vs tablet?
Accessibility
Accessibility
Consistency
Consistency
USER INTERFACE
Making your prototype is all about how the user interacts with your app. The term for this is the User Interface or UI. It includes all the elements like buttons, textboxes, and sliders that allow the user to use your app.
Another term for designing digital products is User Experience or UX. Each one is explained below.
User Interface
How users interact with your app. It includes all the elements like buttons, text boxes, and sliders that allow the user to use your app.
UI design focuses on making your app visually appealing, intuitive, and easy to use.
User Experience
How users experience your app. It includes UI, but is more about the emotions, attitudes and behavior of users.
UX design is all about the user's needs and goals, and enhancing their overall experience.
USER INTERFACE FEATURES
Below are some of the key parts of a user interface for a mobile app
NAVIGATION
Navigation is how users find what they are looking for in an app. Here are a few examples of navigation options.
CONTAINER
These components allow you to group content together. It helps when laying out parts of the screen, and hiding and showing parts.
INPUT
Input components allow the user to input information into the app. Below are a few examples.
INFORMATION
These components allow the app to share information with users.
USE STANDARD ELEMENTS
You might want your app to look different to stand out from your competitors. However, using the standard elements can actually help your users understand how to use your app more quickly.
For instance, most users are familiar with a dropdown menu. You could design a new type of menu, but it might be confusing to users. Stick with familiar components to make it easy for your users.
Check out this short video with Melissa Powel and Mariam Shaikh from Google on sketching and paper prototyping
ACTIVITY 1: PAPER PROTOTYPE
Sketch out the screens for your app
- How will users navigate from screen to screen?
- How will they input information needed for the app?
- How will information be displayed?
- How will it be laid out in an aesthetically pleasing way?
- Think about color scheme, font, logo
GET FEEDBACK
Now that you have something physical to represent your solution, it’s time to get some user feedback!
Potential users need to try it out and give you some honest feedback.
What do you want to learn from testing with users?
One method:
- Give the users a set of tasks to do with your app and see if they can do it without your intervention.
- One team member can act as the “computer”
- changes screens or parts of screens based on the user interactions
- Another team member is the note taker
- writes down what the user does and their comments and reactions.
- With permission, you could also record the testing session.
Remember, your testers are there to help you! Do not judge or intervene in their interactions (other than the “computer” responding/updating the prototype based on actions).
Just receive their feedback with appreciation.
Here is a great example of user testing for a bike repair shop app.
ACTIVITY 2: GET FEEDBACK
Test your paper prototype with 2-3 users
- Show the prototype to the users.
- Ask the users to perform a task with the prototype.
- Let them try to do the task without help.
- A team member can act as the "computer" and react to their actions.
- Another team member (or two) takes notes of what the users do, their comments and reactions.
REFLECTION
We recommend that you save your paper prototype. You will need to refer back to it as you work through building your project. You should also take pictures of your prototype.
REVIEW OF KEY TERMS
- Prototype – an early model of a product
- Paper Prototype – a hand-drawn representation of what your app will look like
- User Interface (UI) – how the user physically interacts with a mobile app
- User Experience (UX) – how the user feels about a mobile app, before, during, and after they use it
ADDITIONAL RESOURCES
While paper is the preferred method for prototyping, especially as a first step, you can also use digital tools to prototype your app.
Many tools exist at a price, but there usually is a free version you can use with limited features or projects. Here are a few possibilities.
- Google slides (easy and free!)
- InvisionApp
- Figma
- POP by Marvel
