This lesson can help you earn points in the entire Technical section of the judging rubric. This lesson will be especially helpful with "User Experience and Design".
In this lesson, you will...
- Learn about common UI conventions
- Create a paper prototype of your app
What are the benefits of paper prototyping, or creating a paper prototype?
- You can quickly 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 and time to create a paper prototype. You can use materials like paper, magazine cut outs, post-its, markers, stickers, tape, and glue.
- 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 paper prototype to quickly learn what may or may not work in your design.
- Prototypes can help to confirm design decisions before you spend more time developing and coding your app.
Before you start, here are some basic UI conventions that you can use in your app. A convention is something that is common or is used a lot. Here are a couple of common user interface conventions. You don’t need to use all of these conventions, they are just suggestions for certain things you might want to include in your app.
Buttons are used everywhere in mobile user interfaces. They are used to prompt the user to take an important action such as “sign up” or “submit”. Be careful not to over use buttons, too many buttons can look cluttered and confusing, and the user won’t know which one to use.
Many apps will use the full screen to display their logo when you first open it. This is called a splash screen. Sometimes they will put a navigation menu or buttons on this screen.
Logo and Header
Most apps have a place at the top for a logo on the main navigation menu.
A navigation bar helps users find what they are looking for in an app. Many apps put a navigation bar at the bottom of the screen containing icons. You should limit your navigation bar to five items or less so it doesn’t get cluttered.
Full Screen Menus
You can show your user a full screen menu to help them navigate your app. This can look like a list, or you can get creative and use blocks of color or images.
A hamburger menu looks like this:
It is used when a full navigation bar or menu can’t fit on the screen. When you click on it, it will bring a hidden menu out.
More options menu
A more options menu looks like this:
Similar to a hamburger menu, this menu will also bring out information that can’t fit on the screen.
Having a search bar is an extremely common way to help users navigate your app.
Adding a magnifying glass next to the search bar helps your users know it is a search bar.
Most users are used to scrolling down to see more information. A feed can be used to show more information than will fit on one screen.
Look through some of the apps that you have on your phone. What parts of the user interface do you see being used over and over again? What parts do you think look nice or make the app easy to use?
Although you might want your app to look really different to stand out from your competitors, using conventions can actually help your users understand how to use your app more quickly. For instance, most users are familiar with a hamburger menu, so including one in your app could help a user quickly understand what to do when they open your app. You could also design a new type of menu, but it might be confusing to users and they might not be able to figure out how to use your app. Of course, you should get creative with your app if you want to! In the additional resources section there are tips for how to test out different parts of your UI with your users. Later on in Entrepreneurship 5: Create a Logo, you will design a logo and choose a color scheme for your app.
- Download a new app from the app store right now. Does it have any of the conventions mentioned above? Try using the app for around 5 minutes. How long did it take you to figure out how to use it?
- Need some suggestions?
- Try All Trails (iOS and Android) or Spotify (iOS and Android).
Before you start, you can learn more about paper prototyping, user flow, and color theory in this short video with Melissa Powell who is on the Google Developer Relations team, and Mariam Shaikh who is a Senior User Experience Designer at Google.
Ready to start? It’s time to create your own paper prototype. Sketching is a fundamental part of the design process and can help you make key decisions about what to design. Your paper prototype 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 colors 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.
Activity: Paper Prototyping
What you will need:
- Plain paper
- Printouts of the worksheet
What you will do:
- As a team, sketch each screen of your app. Put your ideas down as they come and try not to judge them yet. You can question them later! Remember to focus on creating features that are a part of your MVP from the last ideation lesson. Start designing the features that are included in your MVP first. As you do this, you may want to consider:
- Will it have a logo?
- Does your app need a menu for navigation? What will that menu look like? What will be on that menu?
- Will a user log in to your app? What could the login screen look like? What about a profile page?
- What happens if you click on a button to get to the next screen?
- What will each screen look like?
2. Check out the example of a paper prototype above. Notice the way the stickers are used to show where users can click on buttons. Also, in some cases there are sketches underneath, which would possibly be the next screen a user gets taken to once a button is clicked.
3. Once you have a working prototype, create a run through of how the user would navigate the app. You can take pictures as shown in the video above and create a .gif or video.
You just created your paper prototype! We recommend that you save your paper prototype because you may need to refer back to it as you work through building your app. Make sure to leave it in a safe space so you don’t lose it, or ask one of your team members to be responsible for it.
- If your app’s design should be the “minimal viable product”, what features must be included and what features are you removing from your design?
- Did you choose to follow any conventions, if so, which ones?
Additional Resources: Using digital tools to prototype
If you are on a remote team, you might also wish to create a digital prototype of your app. You could try a tool like InvisionApp or even something simpler like Google Slides. Here’s an example of a digital paper prototype using Google Slides: