This article originally appeared on Inspired Magazine.
There are some simple tips and tricks that can transform apps from just middle-of-the-market designs to winning, intuitive experiences which are successful on the iOS store. These tips lie with the first stage of designing your app, sitting down and putting pencil to paper.
The first step to creating any app is to actually begin designing and drawing the app. You have to sit down at your desk with a piece of paper, and draw pictures of the app for people to see. You can’t explain how the app works to developers, you can’t explain how it works to people you’re marketing to, you can’t explain the app to a client, you can’t explain the app to anyone fully without your wireframes finished and ready to present.
Luckily, making wireframes is as easy as sitting down and putting pencil to paper. It doesn’t require highly technical knowledge or special skills, just diligence and a willingness to go over your drafts again and again.
Why can’t you jump straight to photoshop or Xcode?
Beginning design on a computer itself is going to lead you to subconsciously create something that would work well on a computer, because of the interface you are working with.
Wireframes that are hacked together on a computer will reflect the mouse-control metaphor that birthed them, whereas a drawn design will most closely reflect manipulating things with your hands directly.
When you draw paper and pencil, you are working with an interface that is closest to the touchscreen usage of the iPhone itself, and your design will reflect that.
It is not entirely necessary to start with pencil, because many good apps exist for wireframing that allow you to do it on an iPad or iPhone, the native environment for an app. The advantage of these apps is that they allow you to test your app prototype directly on the device, the best place of all to test.
Here are some great tools for wireframing apps easily and quickly:
- iOS Sketch Paper: This is free sketch paper for designing iOS apps, so you can pencil in your designs on a to-scale paper iOS device before beginning to test them out or build them. Drawing on paper to-scale is recommended because hand and pencil is as close as you get to the touchscreen interface without building a full prototype.
- Prototyping on Paper: Once you’ve drawn all your screens, you can use prototyping on paper to build a full, working prototype of your app on your device out of those sketches. If you’re going to put pencil to paper, this is the tool to use to put it all together.
- App Cooker: An iPad app designed to help you design apps as an indie designer or a team. In other words, an app to make an app! In addition to prototyping, it has a pricing tool, mock iTunes store, icon creator, interactive wireframing tools, and a million other things. It even has a companion app, called App Taster, that is used to test the prototypes built on App Cooker. App Taster is free, so you can share these prototypes with anyone you’d like.
- UIStencils is a metal stencil you can buy for iPhone and iPad (and other devices) so you can put pencil to paper for your designs and have them look great before you even hit the computer. However, they are not to scale.
Once you’ve drawn your designs, get feedback. The feedback from people on this initial prototype is crucial feedback, and you cannot do without it. However, chances are that your prototype testers are not user experience designers, and so do not have technical feedback to give you.
Therefore, you need to ‘translate’ their feedback to get to the root of the problem. Here are some possible translations for common feedback:
“Its tough to use.” Design is poor. Screens don’t flow right and where the user’s hand goes is not where the buttons are. The fix is to adjust button location.
Reporting a feature missing that isn’t: you need to make this feature more prominent, but be wary that if that isn’t possible, you might need to cut features in the first place.
One way to make a feature or content more visible is to move it where the user’s eyes are most likely to be for that content. For instance, sources would be at the bottom of the screens, but titles at the top.
You’re developing an app for Apple’s platform, and Apple is a company full of user experience designers. They have well-documented design patterns in their Human Interface Guidelines, available to anyone in the iOS design portal, and use recurring themes throughout their apps.
Any app that adheres to the Human Interface Guidelines not only has a much higher chance of being approved, but also has a much higher chance of winning the lottery of being a featured app.
Apple’s guidelines on how they judge featured apps reads like this: ‘We do not feature apps for their purpose, but for excellent design. Purpose does not matter so much as speedy, flawless design that exemplify intuitive planning.’
This means you should adhere to design standards. Some of their design principles are so popular they are in almost every app you use. Below are a few standards discussed:
Navigation Bar:
- Apple has designed all their devices so that the top left button will always bring you back to the previous screen; this is why it has a default arrow shape.
- What’s more, this back button should have the title of the previous screen on it, or it should at least say ‘Back’ on it. This is something you see on every app everywhere, and if you don’t have a back button there you should have a good reason why.
- The top right button will always be an action. These are the two buttons that lie on the navigation bar, left and right.
Pulling Down:
- When you see a list, you expect to be able to pull down and see a search bar. If you’re going to have a search feature you might as well use a search bar to save your user the pain of reading the word search. Sarcastic though that may sound, this is 100% serious.
- If this is a search bar for the web, the text in the bar could say the name of the search engine being used as well. If refreshing is something this app can do, people expect to refresh by pulling down on a list or page as well. This gesture has been around since the inception of iOS, and occupies an exclusive spot on the standard gesture list for a user.
Status Bar:
- Whether or not to hide the status bar is not immediately obvious, but there is a pretty simple rule: if your app is an immersive experience, e.g. augmented reality or content-consumption, you should hide it. In all other circumstances, display it. You don’t need people quitting your app just to look at the time unless you know they won’t want to take a look at the time anyways.
A lot of Apple’s device guidelines may seem silly with respect to button size and placement, but there’s a reason. We have left the culture of minimizing mouse-clicks and displaying every option possible, and we interface with computers a different way now. Screens are smaller, but the pointer is bigger — fingers. Fingers are different sizes on anyone, and they are big and clumsy.
Unlike mouses, hands learn patterns and form habits. People glibly hold an iPhone in their hand, looking at it with only one eye as they walk. You need to be wary of the size of a human hand and the limitations of one.
Apple’s user experience design is homogenous on iOS devices because hands are muscles, and muscles form memories and habits. If you have always moved your thumb this way to press back, the moment you think that you want to go back, your thumb will make the movement on it’s own without you even looking at the screen.
What’s more, fingers are not very precise. Create big buttons to account for this. Apple has each button stand at 44px high, and there’s a reason for that: Apple literally measured the fingertip in pixels and found it to be 44. Apple’s naive apps actually extend their touchable area beyond the button and make it the entire corner of the header to account for impercision in use.
However, other sources found other sizes. Smashing Magazine says that a study at MIT found the average fingertip to be a maximum of 57px, and so reccomend making buttons and UI Elements that size, so that it is easy to use for people with any finger sizes.
They do this for a lot of UI elements, and so should you. Nobody should think this means use the default UI elements in Xcode — everyone can agree if we all did that we would quickly get sick of iOS white and gray and move to Android in a heartbeat.
Unique graphic design is highly encouraged, and more is said on app personality later on. Let your beautiful pixels & graphic design shine through the mold that is the Human Interface Guideline standardization.
This keeps app use second nature to everyone, and makes it so your app is second nature before it’s ever been used. Apple has done a lot of the work for you by setting up these standards and training people to use them, so that you can pick right up where they left off.
Advertisements or In-App Purchases:
Consider the pricing structure you want to use for your app. If you are going to choose in-app purchases or in-app advertisements, they need to be worked into the wireframes of the app from the get-go.
Advertisements need to be integrated into the app gracefully or you run the admittedly high risk of alienating users from ugly ads. If you choose in-app purchases, you need to work the purchase button into the app in a way where it is extraordinarily easy for the user to give you their money.
When you are taking pencil to paper, there are a couple of important things to remember. One of the immediately obvious are the screen dimensions. We’ll provide them in pixels and in inches, so that you can use a ruler and draw your own mockups if you don’t want to use the free iOS Sketch Paper.
- iPhone 5: 1136 x 640, 90.25mm x 51.60mm
- iPhone 4: 960 x 640, 76.65mm x 51.60mm
- iPad: 2048 x 1536, 185.7mm x 241.2mm
Here is a link to all of the standard UI elements and their respective sizes.
Another important thing to remember is that wireframes are not meant to demonstrate how beautiful your app will be; wireframes by skilled, experienced designers will be beautiful in their own way, but your wireframes will and should look like a sketch would.
This should look like an outline for a school paper or a project at work; it will be messy, drawn over, redone and redone again. Don’t worry about perfectly straight lines or something that’s beautiful to look at; worry about it communicating your app’s screens clearly and effectively.
After you draw your wireframes on paper, you can make computer-generated models and make a map of the screens and where they go. These final wireframes can be used to communicate with developers, other designers, and anyone that needs to see the full layout of the app.
Did you find this article informative? If so, share it with friends and colleagues using twitter below.