Get Started Prototyping Mobile Websites!

The need and demand to create mobile websites is growing at an exponential rate. But I’m sure you already know that. What you may not be familiar with is the ease at which you can create a prototype (or living wireframe) and transfer it to a mobile device for user testing. Our tool of choice: Axure RP.

For an interactive usability consultancy such as ours, testing is the end all be all that informs the changes we need to make to the website or app. In a relatively new and constantly evolving medium, prototyping and testing should be a part of everyone’s workflow. Make note: this is mucho important.

Why Bother Prototyping for Mobile?
Yes, prototyping adds an extra step to your workflow. Yes, it can be hard to convince clients to shoulder that cost. But it’s a vital step, and one that’s been created to fill a very distinct and rather new need.

Presenting on your target device.
Prototypes should be presented and tested on the same device the final site is designed to target. When you present a desktop browser-based prototype to your client, you present it on a desktop or laptop. That’s as it should be, considering that a completed full site will be navigated using a mouse.

The mobile medium is another animal entirely – it’s all about getting touchy-feely with your site content. Gone is the mousey plastic intermediary; gone is the externalized input device. Even if the mobile device isn’t touch-screen enabled, consider that the user still navigates using their grubby fingers via mobile keyboard. They tap, not click. They use swipes, not scrolls. They use gestures, not zoom buttons.

All that being the case, presenting a mobile prototype on desktop is not only inaccurate, it’s misleading. What feels like an easy click using a mouse may feel awkward using your thumb or index finger. Interactions that seem clear on the desktop may be over-engineered for a 320px-wide screen.

Putting your prototype on a mobile device gives your clients and your in-house team a realistic and hands-on feel for the product they’re building.

Related questions your mobile prototype should seek to answer:

Are buttons and link areas large enough to comfortably tap with the finger?

Are links too close together?

Can the user hold the device with one hand and navigate with the thumb?

Are you making smart use of the mobile interactions available to you as a developer?

The mobile fold and screen lengths across devices.
Fact is, with such an overwhelming plethora of mobile device screen sizes out there, there’s no real way to definitively determine which content will be available above the screen cut-off point. But what you certainly can do is be sure that crucial information is front-and-center, and that on shorter screens, the user need not scroll far to access vital information.

Related questions your mobile prototype should seek to answer:

Is important information and navigation near enough to the top the screen that users immediately see something relevant, whether they’re using an iPhone or a Blackberry?

How many search results are appropriate per mobile page?

Is it better to paginate a long list, or load the whole thing in one go?

Do you really, really, really need all that content?
We’ve always been big proponents of keeping text and content copy highly focused, and weeding out unhelpful jargon-y chaff. But this concept goes triple for mobile sites. It’s often hard to imagine how quickly extraneous content can clutter up a mobile interface. Placing your content in a mobile prototype before you move to design will give you a quick-and-dirty look at what is and what isn’t crucial. You may find that the intro paragraph you thought you needed only gets in the way.

Related questions your mobile prototype should seek to answer:

Is your mobile site content distilled to offer up only uber-important content?

Have you mercilessly slashed your word count to the bare minimum while still maintaining clarity?

Does your site content allow users to access the full site if they want to?

Does your mobile site give users a way to contact the site owner in case of issues?

Truematter is an interactive usability consultancy dedicated to creating, reviewing and testing websites, apps and mobile experiences. This post was written by Kendra Schaefer and edited by Meghan E. Billings. Kendra Schaefer is an Experience Designer/Front-End Developer and Meghan E. Billings is a Project Manager with truematter.