Improve Your Mobile Prototypes With These 7 Expert Tips
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.
What’s the Difference Between Prototyping for Mobile and for Desktop?
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:
- Casual Usage. Because mobile devices are so convenient, they’re favored for quick or casual internet needs. In fact, most mobile apps are designed specifically for such quick and casual needs. This means mobile designs — and prototypes — should be geared towards simpler interactions. In other words, mobile designs should require less concentration. The next steps in a task flow should be more readily apparent, common functions should be more prominent, etc. A simpler, more user-friendly interface also better fits the smaller screen, which brings us to our next point...
- Less Screen Spaces. The importance of screen is never so apparent as when you try to cram a desktop design into a smartphone screen. This led to the minimalist design movement in which only the essential elements are visible, and secondary elements are often tucked away inside hamburger menus or dropdowns.
- Gesture Controls. The most obvious difference is that mobile designs rely on gesture controls instead of cursor-based pointing and clicking. This brings with it a host of additional functionality issues (finger-sized buttons, no hover text), but also some special advantages (voice commands, swapping controls, shaking gestures, easier scrolling) that can add extra charm to your UX.
- Personal Data. With the extra user data available, mobile devices can personalize the UX in ways a desktop device can not. GPS location, push notifications, contact list integration, etc. can all be used to customize usage to the individual who owns the device.
- External Distractions. Because mobile usage is more casual and can be done anywhere, indoors or out, it’s more susceptible to environmental distractions. This undercuts the nuances in the interface, limits the effects of atmospheric and immersive experiences, and negates such features as audio. Note that not all mobile interactions are in a distracting environment, and not all desktop interactions are free from distraction.
- Internet Speed. Mobile usage is still slower, despite being more popular. That means there’s more restrictions on HD visuals, videos, and site complexity in general.
- Testing. Conducting tests on mobile and desktop have their own special considerations, such as how to record the data and where to host the tests.
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.
Mobile Prototyping Best Practices: 7 Tips
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.
1. Allow testers to use their own mobile device
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.
2. Design your mobile prototype before your desktop (Mobile-first Design)
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.
3. Simulate a natural environment
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:
- Have the user walk on a treadmill
- Play noise or music in the background
- Implement time limits to see if users can accomplish goals in short timeframes
These are necessary for every test, but depending on what you’re testing could provide valuable insights.
4. Choose the right mobile UI kit
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.
5. Use a mobile testing tool
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.
6. Don’t forget chargers
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.
7. Start with low fidelity and work up
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.
ConclusionPrototyping has never been so easy and convenient as right now, so testing both desktop and mobile prototypes is not only feasible, it’s practically necessary. Prototyping software like Mockplus allows you create functional, interactive prototypes in just minutes with an intuitive drag-and-drop interface. Learn more about how Mockplus helps you make more realistic prototypes, and in less time: read our features page here, or download your free trial here.