App wireframe design for awesome products
Mobile applications are a part of our lives, and need to be done right. Check out this full guide to app wireframe design!
Mobile apps. They’ve become such a constant presence in our lives in the 21st century that it can be hard to think on all the different factors that contribute to a good or a bad app design. So many things could go wrong — from the wrong choice of icons to dubious navigation. What’s the easiest and cheapest way to make sure you don’t fall prey to all these pitfalls?
Start wireframing mobile apps that stick with users
Do it easily with Justinmind. Download free.
Turns out that app wireframes might just save you. By making sure you get your ideas down into an app wireframe, you give yourself a chance to spot problematic areas and make improvements.
Let’s take a closer look at why they are important and how you can make an app wireframe that blends in perfectly with its operating system — be that an Android or iOS platform.
What are app wireframes — and why should I have one?
App wireframes work towards the same purpose as good old web wireframes. The need to have wireframes at all derives from the need to have a good footing before taking the next step. Much like you want to first learn how to drive properly before investing in a good car, you want to get your wireframe down before investing in the details.
The thing about app wireframes is that they are even more important. In web products, there is a wide range of tactics and approaches one can implement without hurting the usability of the design. In smartphones, however, the limited screen space can limit the ways one can use the product.
The most obvious example of these limitations is navigation. In apps, you want the navigation to feel natural but many components aren’t appropriate for the small screen and touch control — that is the case with dropdown menus.
Creating a good mobile app can be a complex task. Providing a good experience takes a lot of planning. A lot of different factors need to align if you want usability standards to be respected. And in part, all of that will hang on the basic structure of your app.
When dealing with such limited real estate, every single component is crucial. Heck, even the white spaces between components are crucial. Even if the visual aspect of icons, for example, will impact the UX — the placement of those icons will make or break your app.
That’s why you need to think and plan the position of each element before you even start worrying about what each element will look like.
The blueprint of the app before you start building
Building a good mobile app is quite similar to building a house. It’s nearly unthinkable to simply pick up a few tools and get building without a blueprint. Knowing where the walls ought to go is crucial, along with where the stairs will be, bathroom and kitchen positioning and so on. That blueprint is your app wireframe.
Your wireframe should include nothing but the basics — the bare building blocks that will become the app in the future. These building blocks are: information architecture (IA), navigation design and interface components placement.
It’s important that you don’t get caught up in the small stuff. Deciding on colors and images can be fun, but you mustn’t allow that to distract you from the task at hand. First, you want to have a skeleton of the app that clearly shows where everything goes and how users would get from once screen to the other.
A big part of why you don’t want to mind the details at the start is uncertainty. When you see what the rough outlines of the product are, it’s highly likely you’ll need to make changes and adjust things. Such a process is natural — in fact, it tends to be beneficial as with each new change you improve on the original design.
Reiteration is a virtue in app wireframing
Here is they key about app wireframes: changing the elements in a wireframe is quick and cheap. Changing anything once the product has been developed further will definitely be more expensive, and much more difficult. The further down the product development road, the bigger the headache to modify the design.
Can you imagine building a house, only to find the whole thing may collapse in the absence of proper support? All that time, effort and money — wasted, because there was one wall missing.
That’s why many design models, like the Design Thinking Model, encourage designers to create many initial wireframes. As they are easy to put together and don’t represent a big cost, it’s preferable to get all your top ideas and turn them all into low-fidelity wireframes. Once the wireframes are done, it will be much easier to choose which one works best.
Should you wireframe your app for Android or iOS?
Right. Wireframing your app is a key step in the process of creating a good product. But should your product be made for Android or iOS? The legendary war between the two dominating operating systems is one for the history books. It’s true that each system has its own style and rules — but which one is best for your app?
Turns out, it depends. When it comes to sheer number of smartphones out there, there is a clear winner: Android. Due to the fact that Android is an open-source system, many brands use Android — while iOS is restricted to Apple. Over time, the result was that Android enjoys an incredible market share of over 80% of smartphones, according to Statista.
This can seem like an incredible piece of data. After all, There are about 5 billion people who own mobile phones. Managing to reach a market share of over 80% seems like enough to cancel this operating system battle, doesn’t it? Except that while Android users outnumber iOS users by a long shot — they find themselves being outspent.
Wolfgang Digital found that while iPhone users spend an average of $32.94, Android users spend $11.54 per transaction. That means iOS users spend about 3x as much money per transaction in app stores in their phones! How’s that for a game-changer?
There’s been some debate as to what causes this massive disparity of revenue. Generally, it’s accepted that iOS users enjoy a larger disposable income than many Android users. The connection lies in the fact that a new iPhone comes with a high price tag, while an Android phone can cost far less.
It is true that Samsung offers some devices that share the price range of iPhones — these are only a fraction of Android users worldwide. In the Android realm, budget-friendly devices are the majority.
But there is another piece to this puzzle: geography. Turns out that even though Android enjoys dominance over the total market — the same can’t be said for individual markets.
In the United States, for example, the market is split much more evenly: 52.1% of U.S. smartphone users have an Android device. iOS came in a close second, with about 47% of smartphones. Similar situations can be found in the Australian market or the United Kingdom.
As you can see, there are many factors that may influence your decision to go for an Android or for an iOS app wireframe. It will, most likely, hang on your target users. Where do they live? What phone do they have — and not just the system they use, but the actual device? In order to make this decision, carrying out quite a bit of market research is advisable.
Specifics of wireframing Android apps
Wireframing an Android app can be tricky. The trickiest part is the very fact that Android is used in a wide range of devices — which makes creating a single app for them all very challenging. That is what is known as “fragmentation”, in the sense that Android is fragmented and spread around all sorts of screen sizes.
Fragmentation in Android app wireframes
The fact that a wide range of smartphones make use of Android is both why it’s so dominant in the world sector, and why it can be difficult to design Android apps. As if that wasn’t hard enough, you also need to account for the fact that there are users with different versions of Android.
This marks another big difference between Android and iOS: Apple has the power to get users to update their system, while Android experiences much more difficulty in getting users to the latest version. In fact, only about 10.4% of Android phones have Pie (version 9).
So how can you reflect this fragmentation in your app wireframing process? Well, the first and foremost thing to do is to carry out some research. You’ll need to have a very clear picture in your mind as to who it is you’re designing for: what device do they use? Is there a way to find out if they are more or less likely to update their phones?
Aside from the research, you’ll want to have several devices at hand for testing. If you don’t enjoy a full lab with plenty of devices, do invite friends and family over — the more variety of phones, the better.
Make your app wireframe clickable and responsive
Since your wireframe deals in such crucial matters of your product, such as the navigation, you want to make sure you test it as early as possible. You want it to live up to certain usability standards, paying special attention to user’s ability to look around and find information in your app.
In general: No matter what kind of product you’re creating, you want to make sure you can test it.
Luckily, truly good wireframing tools allow you make clickable wireframes that you can actually test with people. Our advice is that you do test the app wireframe — and not just once. With each test, you’ll come to identify areas for improvement in the design.
It’s important that you keep looking for those areas, that you keep improving each time. And, of course, that you keep testing.
On the other hand, you want to make sure your wireframe is responsive. This can seem a bit odd, considering the app is for mobile devices only. But by making your app wireframe fully responsive, you can mitigate the issue of fragmentation.
The general idea is to avoid hard coded layout sizes. Instead of making perimeters unmovable, try to wrap content to match the parent view — with focus on “wrap_content” and “match_parent”.
Even better, the folks at Google have a whole list of things you can do to make sure your app wireframe adapts according to screen size. Check out the whole thing in the Android Developers page.
Get studying Material Design
Material Design is Google’s design language for both designers and developers. In part, it was made precisely because Android can be so fragmented. It’s worked as a design system, and slowly trying to get all Android apps to present the same style and feel.
Google offers a few design pointers so designers can have a sense of what their app should be like — all of which are sound pieces of usability advice. Google wanted a way to make life easier for both designers and developers, a way to unify the Android experience.
Specifics of wireframing iOS apps
iOS design has a few key traits and characteristics that should guide your hand throughout the entire product. Much like Google, Apple wants all iOS apps to deliver a good experience in a way that matches the platform style — pushing usability to be a primary concern from the start.
The difference between what Google wants and what Apple wants from apps is that iOS aims for a more minimalist interface, in agreement with the light and spacious feel we have of Apple’s design style.
The iOS principles for app wireframes
These are key principles that Apple upholds throughout all the experiences that it offers users. It is true that these can be seen as the building blocks of usability standards — no matter the platform of the product.
However, these mark crucial aspects that both Apple and users have become used to — and so, we recommend that special attention and effort is invested in reflecting these guidelines on your product.
Consistency and aesthetic integrity
Consistency is a value in all UX — it helps users understand how the product works, especially during the initial learning curve. The goal should be to offer a consistent design so that users can come to predict what certain buttons do, for example, even if they’ve never pressed that button.
The consistency Apple means with this guideline is the use of UI components that all iPhone users are already familiar with — and should be applied to everything from the icons to the font. Always keep in mind that you can break away from these guidelines at your own peril, if you feel like adopting this style might take away from the personality of the product.
Lastly, aesthetic integrity. It sounds like a technical term that surely leads to complex tasks or represents a complicated concept — but fortunately, it’s pretty straightforward. In short, Apple asks designers to deliver the appropriate experience depending on what function your product serves.
For example, serious apps that deal in finance require brief and sober interactions as opposed to big and bright animations.
Direct manipulation and feedback
Direct manipulation consists of the direct movement users make with the phone — such as shaking of the device in order to achieve something. Apple is a major fore encouraging apps to make use of actual movements, as it tends to be a way to get users more involved as well as more engaged.
As for feedback: this is something designers will be familiar with. It represents the idea that people should always be aware of what is happening behind the screen — Nielsen included this in his Usability Heuristics, as “Visibility of system status”.
Ignoring this principle can lead to confused and frustrated users, who aren’t sure if the app has understood their command. This feeling of being unsure and frustrated, of course, takes away from the great experience we all work so hard to deliver.
User controls and the use of metaphors
Giving users total control of the product. But in giving users full control, its up to designers to also minimize the probability users will do something they will come to regret. Let’s not forget that it’s perfectly possible for people to mistakenly press the wrong button — and we don’t want them to experience the loss of important data or some unexpected unpleasantry.
Apple encourages designers to include metaphors in their product design, as that leads to users being more familiar with the interface — regardless of rather the metaphor refers to real life or the digital world. The most subtle metaphors can have a positive impact on the app wireframe, such as a toggle button that works in a similar way to a tangible switch.
Navigation in iOS
Your navigation is a crucial building block of the app wireframe. Ideally, the navigation around the app should be so smooth that people don’t even realize they are navigating — which is true of all app wireframes. But when it comes to iOS, there is a slight difference when compared to Android.
Provide a clear path with a good Information Architecture (IA)
People need to be able to find anything they look for within the app, without breaking a sweat. This will largely depend on how you go about your IA, and the structure you implement to the app wireframe. You want to convey levels of importance, making the most important pages easy to access within a few taps.
Remember that unlike Android, iOS doesn’t have an integrated navigation bar at the bottom of the screen. This means that you must account for basic navigation controls such as a “back” button in the interface.
When it comes to the types of navigation design, Apple welcomes the 3 classics:
- Hierarchical navigation: users make a choice per screen as they navigate the app, having to turn back and make new choices. Highly vertical hierarchy.
- Flat navigation: Switch between different content categories in a system that lacks hierarchy.
- Experience-driven navigation: gives user freedom to go from screen to screen without following any hierarchy
Bear in mind that with iOS, you can also make use of direct manipulation for navigation too: just like in the settings of any iOS device, users can simply swipe left in order to go back to the previous screen. This can be a handy tool for the navigation in your app wireframe!
What about having custom components for iOS app wireframes?
This would be a bold move. Part of why iOS is so great is the fact that there is an agreement in the style, and that users are already very familiar with the interface components. By moving away from the classic Apple components, you would start over — which can be a blessing and an expensive curse.
It is true that you can create something truly unique, that stands out from the vast sea of iOS apps. It could give you the extra visual to add to the product personality, and build on the brand identity. On the other hand, it would add on to those critical first moments of use when many users will abandon your app.
Learning to use something users are not familiar with requires effort, and represents a learning curve. The more difficult is it to learn how to use the app, the more users will never get past that curve. By using Apple’s components, we can eliminate part of that learning curve so that users don’t need to try so hard.
You can use our own iOS UI kit as an alternative, and rest assured that your components won’t cost a dime while still respecting all of Apple’s guidelines.
Then there is the matter of cost. Apple’s UI components are available for free so there is no additional cost for your app wireframe — but creating your own can come with a rather large bill. The main reason why creating your own components would be expensive isn’t necessarily the design but the developing needed for those components to come into existence.
The wrap up
App wireframes are such a stepping stone in product design. They have the power to make your ideas tangible, and lay it all down in a straightforward way that will keep you focused on what matters at this stage.
App wireframes will show you exactly what the structure you created looks like, how your navigation holds up against usability tests and where you have room to improve.
Regardless of if you have a large team of people or if you’re a stand alone wireframing warrior, wireframing apps is the surest way to eliminate usability catastrophes. In taking a little extra time and investing some real care, you can reach the finish line with a sound mobile app that will grab users’ attention and deliver an experience they can enjoy — no matter what device they use.
Originally published at https://www.justinmind.com on July 11, 2019.
