5 mobile prototyping mistakes to avoid
We reveal the top five mobile prototyping blunders to avoid in your UI design process. Learn more here!
Mobile technology is rapidly evolving and with it, mobile app design. We’re seeing new mobile web and app trends left, right and center, from wearables and smartwatches to the all-new Pokémon GO craze. With 87% of the world’s population owning a mobile device, it’s important to be aware of market developments to stay ahead in the world of mobile design. But arguably more important is the way you design. Consider the below as a check list of things to avoid when prototyping the User Interface of your next mobile app.
5 mobile prototyping mistakes to avoid at all costs
#1 Don’t copy your desktop design
It just doesn’t always work like that. If you already have a desktop site, most of the core content in your mobile app is going to be quite similar. But even so, there’s more to designing for smaller screens than simply compressing a web design: you’re optimizing for mobile, so make sure that your content and interactions are appropriate. Certain web design techniques can help you to avoid web-mobile disharmony, such as Responsive and Adaptive web design. You could also think about designing mobile first so that you’re not tempted to squash your website into smaller screens.
How to avoid this mobile prototyping mistake: a great way to avoid this design blunder is to stay up to date with the features available for the platform you’re designing for. Try tuning in to a podcast, such as Accidental Tech Podcast, or reading up about new releases and news within the tech community on sites like Gizmodo or TechCrunch.
Then it’s time to build your ideas out. Try using a prototyping tool, like Justinmind, which will help you create animated wireframes for iOS, Android and Windows OS with pre-built contemporary mobile platforms’ UI elements and attributes.
Prevent mobile prototyping mistakes that are killing your apps with Justinmind
#2 Don’t ignore familiar mobile patterns
Mobile apps provide great opportunities to create personal experiences, but don’t underestimate the power of behavior patterns and mobile web usage. We say stick to familiar mobile patterns and adhere to UI guidelines as much as possible.
Why is that? Because users need to understand immediately how to progress through your app or they’re just going to leave. Let’s take a look at the mobile app login form for instance.
How to avoid this mobile prototyping mistake: keep it simple. The login form is a type of input form where we typically find a username, password and an input button. An extended version might include email address, address and phone number input requests, with or without required fields*. The important thing to note with the login form is that the number of input requests should be minimal. If you’re racking up questions for the user, chances are they’re going to get frustrated that it’s taking so long to access the content and abandon ship. Keep it simple and visual for a great user experience and successful user navigation.
Additionally, focus on mobile navigation. Users need to be able to easily navigate around your app as if experiencing a journey, therefore nothing in your app should lead them to a dead-end. Try creating personas to represent user groups to better understand potential user flows. With an interactive prototyping tool, you can map user flows by designing and simulating scenarios. This will help you to understand potential user behavior in relation to your app. Smart defaults can also help to make the user’s form completion quicker and less painful.
*A word of warning about those required fields. As with stacked questions, excessive validation will frustrate users if they can’t easily complete the form. Keep those required fields to a minimum, and only where absolutely necessary and comprehensible.
#3 Don’t jump straight into high-fidelity prototyping
Remember when you were at school and your IT teacher insisted that you get your core content in before adding fancy fonts and bright colors? Well, this was actually sound advice and we say stick to it in the mobile prototyping life cycle. Get your basics right before you get fancy.
“Simplicity is now something we expect from design. Everything should be clear, obvious, intuitive — in other words, we should not have to think very hard.” Sam Brinson
Consider that you should be looking to make wireframes and prototypes just “good enough” — remember, this is not your final product. Focus on the core features of your app and the content: whatever you are trying to communicate to the user.
How to avoid this mobile prototyping mistake: create basic wireframes that clearly demonstrate your intention and then, only then, build up to high-fidelity prototypes that display the visual attributes of your mobile design. But don’t get precious with the pixels and don’t waste important resources for no reason. Keeping things simple will not only make the developer’s job easier, but it’s what the user needs.
#4 Don’t do unnecessary rework
It’s important to define all areas of your mobile UI before you develop. But this doesn’t mean working on intricate designs and wireframes till the cows come home! A lot of mobile wireframing can be handled with a set of templates where you need to reuse content and UI elements and masters to apply global changes to your screens.
Why repeat actions unnecessarily? Sure it’s not big deal when it’s just copying and pasting once or twice, but when those 5-minute design tweaks are needed across all screens, it can get a bit tiresome!
How to avoid this mobile prototyping mistake: with all of the iterations you’ll do, things are inevitably going to change, or at the very least require teeny tiny design tweaks. By reusing, repurposing and recycling content, you can tweak, change and scrap what you need and then copy these changes over to the rest of the instances with templates or use masters to apply these changes in the rest of the screens in your wireframe or prototype.
#5 Don’t assume you know what your users want
Test, test, test! Testing is an essential part of mobile UI design, web design in general. You simply can’t avoid it. Why? Because users change all the time. Yep, we’re the worst, it’s what we do. And to make things even more complicated, the world of mobile consists of so many platforms and devices to cross-test!
It can be pretty daunting but we strongly suggest testing on a cross-section of platforms and devices to get the most reliable and accurate feedback. You can also use analytics to better understand what you’re working towards, what’s already been done, what works and, of course, what to avoid.
How to avoid this mobile prototyping mistake: perform regular user testing throughout your prototyping design process — with all iterations — to get to know your target audience and what they use. Do your testing on device so that you can get the most realistic (and instant!) results. On device testing with real users has tons of benefits, from helping you to see if you’re missing information and finding inconsistencies between design features down to letting you know if you need to rethink your mobile gestures.
Justinmind is integrated with plenty of usability tools, so users can effortlessly reach approved software, web and app user testers as well as perform tests with their own team.
Do: create, collaborate, preview and share
We recommend sharing and testing your wireframes and prototypes within your team as well as with potential user groups to get feedback from as many relevant parties as possible. Is your designer able to use the app they’ve created? Do they enjoy the experience, hmm? Collaboration between teams in the mobile app prototyping process is just as important as the design itself. Not only does collaborative prototyping boost production, but without it, misunderstandings will occur and slow down the entire process. By working on shared prototypes, teams will be able to work together in real-time, visualizing the feedback of others to ultimately build a really strong mobile UI.
So what are you waiting for? Download Justinmind now and build better mobile UI prototypes!
