Quick and dirty tips for mobile prototyping that will improve your Android and iOS UI design process, from atomic design to user testing
Mobile UI design has never been more important to our online experiences. Over 87% of the world’s population now owns a mobile device. In 2017, revenue from app purchases is expected to top $70 billion. And Apple’s app store looks likely to grow by more than 50% in the coming 4 years, containing 5 million apps by the year 2020.
All of which means that, while the market for apps is vast, competition is fierce. Whether they’re focused on Android or iOS UI design, app creators have to produce something brilliant, and produce it rapidly, if they want their product to have a chance of success.
So we get it, the mobile UI design field is pretty daunting. But your chances of success are increased by having a front-to-back knowledge of the features available in your chosen operating system, and mastering them to build standout mobile user interfaces.
Why mobile prototyping boosts the app design process
Be it a pen and paper wireframe or a whistles-and-bells high fidelity prototype, prototyping is an essential part of app design. It creates space to solve design problems before getting too serious with the UI, and stakeholders have a chance to provide feedback before development starts. Mobile app prototypes facilitate communication, which means fewer misunderstandings, fewer reworks, fewer headaches and, hopefully, less money spent. Plus you’ll be more likely to end up with products that create better user experiences than those that skip the app prototyping stage.
Using a mobile app prototyping tool that can create Android and iOS UI designs with pre-made OS-specific UI elements will help you prototype faster and better. So we put together 6 quick and dirty tips for mobile prototyping that will improve your Android and iOS UI design process.
Mobile prototyping tips for Android and iOS
Enough preaching to the choir, time to roll out our 6 Android and iOS prototyping tips. From navigation patterns and UI kits to on-device simulation and testing, read on for some insider tips on mobile prototyping, straight from the team at Justinmind.
Use pre-made UI elements and kits
You could reinvent the wheel and build all your own Android and iOS UI elements from scratch… But that would be kind of crazy considering many prototyping tools provide them fully baked. Justinmind has extensive libraries of mobile UI elements and icons for various Operating Systems, allowing you to build lifelike Android and iOS UIs without starting from zero yourself. We build each component with atomic design principles, making elements fully customizable – for example, our new iOS widget kit contains icons and screens made with “atomic” elements, allowing you to break them down and personalize them. We built the library with SVG vectors so UI designers can change the color and size of each icon to match their needs, or in line with specific industry standards.
You can share these pre-made, customized elements with the rest of the design team, and even group them into ‘custom libraries’ so that they’re easily accessible and even reusable from project to project.
Find out how to use Justinmind’s UI elements and libraries in your mobile app prototypes here.
Define and map user flows early on
User flows can be tough to get right: mapping out user interaction so that it works for everyone is complex and definitely profits from trial-and-error iteration. Scenarios are a solid way to speed up the process of improving user interaction: define and map navigation flows by creating and testing scenarios in the Scenarios tab of your Justinmind interface. You can link different components together with specified actions and get a birds-eye view of the user flow; these static wireframe flows become functional flows once you shift up to a high fidelity prototype.
Scenarios are especially useful in speeding up the app design process when they’re used with stakeholders. Present clients with some ‘what-if’ scenarios and walk them through the flows – hidden requirements will undoubtedly surface during this process, saving time in the long run.
Find out more about how to use scenarios in UI design on Justinmind’s YouTube channel
Don’t reject established mobile navigation patterns
When Google combined forces with AnswerLab on a research project in 2016, they found out that mobile users are more goal-orientated than desktop navigators. This means that their tolerance for winding navigation paths and frivolous flows is low, and mobile users appreciate an app UI that, to paraphrase Steve Krug, doesn’t make them think. That’s why using well-worn mobile navigation patterns is a good idea.
For instance, when it comes to menu navigation, established patterns such as the List or the Grid are incredibly potent thanks to their familiarity and simplicity. Grids bring logic and generalized visibility to an information hierarchy, whereas Lists allow you in display more in-depth information and organization. These two well-established patterns will cover the needs of 90+% of new apps being built right now, so don’t be tempted to invent yourself a snazzy (and possibly confusing) new navigation pattern just because you can. Experiment with Justinmind’s dropdown or toggle menus for both Android and iOS UIs and test the ideas on users (more on user testing below).
Good navigation should feel like an invisible hand that guides the user. Nick Babich, Smashing Magazine
The navigation patterns you use will also be heavily dictated by your chosen OS: Android apps have more often relied on hidden navigation patterns such as the hamburger, whereas OS apps favor bottom bar navigation. While these differences will likely get smaller as our understanding of user experience improves, for now you can select the pattern most relevant for the specific OS in your prototyping tool.
Organize UI elements and save time
Everyone hates repeating themselves unnecessarily. That’s why we came up with Justinmind’s templates and masters, to help you stay consistent and organized even when working on multiple projects. Templates allow you to reuse both content and mobile UI elements, and masters mean you can apply changes globally across a prototype’s screens.
Start off playing with Templates, defining default styles (colors, border types, fonts, etc.) in relation to UI elements and events in a prototyped screen. You can even import pre-built designs into new prototypes, and then set them as style guides for the whole project, with content, behavior and UI elements replicated across screens.
Then, organize customized UI elements into Masters, so you can use them anywhere is a prototype. Once you apply a change to a Master, that change will show up in all the Master’s instances in the prototype. Thus you save time, stay consistent and reduce rework. And you can use Templates too.
Find out more about Templates and Masters here
Maximize feedback to minimize rework time
Efficient app design depends on getting actionable feedback and (unsuprisingly) acting on it; an app’s usability can only be judged with users interact with it. You can view and test your prototypes on either Android or iOS devices – do this with both the internal design-development team and a handful of target users from early on in the design phase. In-team collaborative prototyping boosts production and stamps out potential rework; gathering user feedback allows you to start validating the mobile UI with the people who will make or break your app – real-life users.
If you’re using Justinmind prototyping tool, team members can review the prototype and make changes to it directly using the Teamwork and Collaboration features. For usability testing, we’re integrated with a ton of user testing tools, facilitating both remote and in-person testing at any stage of the prototyping and design process for both Android and iOS apps.
Test now, and then test (again) later
Speaking of usability testing, that’s our final quick tip for Android and iOS app prototyping: test on real users right from the get-go, and keep testing all the way to launch. User testing mobile app prototypes obviously has its unique difficulties: creating a good test environment, working across Operating Systems, multiple device testing and so on are challenges that don’t come up in web or browser-based usability testing. But they’re challenges that can’t be dodged: as Radica Budiu points out in NN Group, “usability requirements increase as the platform shrinks. Smaller screens equal bigger needs to test your design with real users, because there are more ways for users to fail.”
Luckily, following a well-defined approach for user testing mobile apps will smooth the process and ensure you collect meaningful data; this Essential Checklist for User Testing a Mobile App Prototype will give you the necessary structure to carry out successful usability tests on different devices and diverse user demographics. Plus thanks to the Justinmind app, available for free both for iOS and Android, you can simulate and test on both Android and iOS prototypes. Neat, huh?
Tips for Android and iOS prototyping – the take-away
Hopefully, these 6 tips help to demystifying how to effectively prototype apps for Android and iOS. Using the pre-designed OS-specific features of your prototyping tool, building on established mobile design patterns and testing features on Android and iOS devices will streamline the mobile UI design process and, hopefully, result in apps that stand out from the crowd for the right reasons. After all, like most things in life, mobile app prototyping is easier when paired with the right tools and a little bit of savvy.