To get the latest and most quality design resources!
Thank you for your support!
So, you tested your desktop prototype and it was well received. that’s great, but what about your mobile prototype? Now that mobile internet usage surpasses desktop, designers can no longer skate by with just a single version of their prototype. Unless you only want to account for half your audience, you’re going to need both.
Today, we’re going to explain the differences between prototyping for mobile devices and for desktops, plus give some expert tips to get you started on your mobile prototype. Whether you’re new to prototyping in general or just trying to sharpen your design edge, keep reading to learn what the experts say about mobile prototyping.
The differences between mobile and desktop usage are vast — much more than just gesture controls and screen size. To get the most accurate response from a mobile prototype, a smart designer must consider all these factors.
Let’s break down the most significant differences point by point:
We don’t want to get too in-depth about the differences between designing mobile and desktop experiences here — that’s a topic worth discussing on its own. To learn more about the best practices for mobile design, read our article Mobile UX Design: What Not to Do.
When you factor in all the above differences, you can see how mobile prototypes have different needs than their desktop counterparts, as well as different approaches to designing them. So what are the best practices for mobile prototyping? Let’s go through them one by one.
Below, we collected seven best practices recommended by design experts for mobile prototyping. Keep in mind these are best practices for mobile prototyping only; best practices that apply to prototyping for both versions (i.e., avoid placeholder content like lorem ipsun) aren’t listed here, but should still be applied.
Probably the most important piece of advice for mobile prototyping is to conduct the tests on mobile devices, preferably the ones your testers already own. It’s perfectly fine to build a mobile prototype on desktop, but it’s a rookie mistake to have a user or stakeholder test a mobile prototype on desktop. Using desktop ignores all the mobile aspects listed above, so your test results or demonstrations become inaccurate.
If you want the best possible response to your mobile prototype, let the testers use their own devices. Each user has their own preferences and habits — sometimes even custom controls — and so testing on a device that’s unfamiliar to them obscures the results. If you let them use their personal device, though, you can examine how your target users interact with your design naturally… and you may even learn something new.
For this reason, our prototyping app Mockplus features a scannable QR code so that you can preview your prototypes on any mobile device. No USB cords, no incompatibility issues. This allows users, stakeholders, or other team-members to interact with mobile prototypes on whichever device they want, making the experience as close to the real thing as possible.
If testing on the user’s own device is not an option, the next best thing is to provide a mobile device for them. This isn’t as good as letting them use the device they’re most comfortable with, but it’s still more accurate than testing a mobile device on desktop.
Mobile-first design isn’t just a best practice for prototyping, but the design process in general. When you’re plotting out your screen layouts and establishing your user’s workflow, start with the mobile version and then move on to the desktop version after. If you’re creating layouts for each individual device (smartphones, tablets, laptops, desktops), start with the smallest and work up.
Why? Designing the smallest screen first forces the designer to isolate the most important elements right at the beginning. Small screens only have room for the essentials, so a mobile-first design establishes the design’s top priorities from the start.
This makes subsequent designs easier as well; all you have to do is add the secondary elements as the screen sizes get bigger. The alternative would be to design a full-scale desktop version and then remove elements as the screens get smaller, which causes obvious problems and most likely results in backtracking. To put it plainly, in design it’s easier to add elements as you advance than to remove them.
If you’re conducting a usability test, you can simulate a more natural environment to attempt more “lifelike” results. Above we mentioned that mobile usage tends to be more casual, and prone to distractions in an “on-the-go” scenario. You can chose to recreate these conditions for a test, especially if you’re testing an app or site intended to be used on the go.
Some options to consider during the test:
These are necessary for every test, but depending on what you’re testing could provide valuable insights.
More of a best practice for mobile design in general, chose the best mobile UI kit for your purposes. UI kits with different styles, visuals, and themes can give you the mobile design — and prototype — closest to the vision in your head.
There’s plenty of mobile UI kits to suit almost any style or taste. Beyond customizing your mobile prototype’s look and feel, mobile UI kits also make building the prototype easier. All UI kit elements are premade, so all you have to do is find a style you like and load it into your prototyping software.
For inspiration, check out these 8 exemplary mobile UI kits.
While you’re focussing on how your design performs during a usability test, you don’t want to be distracted by the methods for collecting data, such as recording the user’s screen. Even after the tests, organizing the data into graphs or charts can be daunting and time-consuming.
That’s why many designers turn to mobile testing tools for extra assistance. These tools cover a variety of test concerns so you don’t have to — some even find test-takers and organize sessions for you. While there’s dozens of secondary tools for many different purposes, if you don’t know where to begin, try these 6 tools to start out.
One quick — but important — piece of advice for on-site mobile prototype testing: don’t forget a charger. Nothing kills a test quicker than a dead battery. If you know the device you’re testing, bring a spare charger just in case. If you don’t… bring as many different kinds as you can find.
First and foremost, your mobile prototype should test usability and functionality. Can your user find their way? Are clickable areas big enough for tapping? Is the design functional for all intents and purposes? These questions must be answered first, and they can be done with a low fidelity prototype.
That’s not to say you shouldn’t test a pixel-perfect version. What we suggest is testing a low-fidelity version first before considering aspects like color or animations. It makes sense to wait until the later stages to test visuals; if there’s a problem with your core functionality, you’ll have to scrap the prototype’s visuals and start from scratch anyway. It’s better to solidify the basics first so you don’t waste time designing visuals that you have to ultimately throw away.
In- house content editor, specialize in SEO content writing. She is a fruit lover and visionary person.