Yu Centrik

Prototyping is an essential part of design. At some point during the process of creating and releasing a great product, building a prototype is inevitable. Prototyping allows you to validate your design choices with developers, project stakeholders and, most importantly, target users. A good prototype is simply the best way to share, communicate and get quick feedback on your design ideas.

In the world of mobile devices, the evaluation of native applications, mobile websites and web apps is crucial. While desktop PCs have been around for about 40 years and the World Wide Web is celebrating its 20 year anniversary, mobile devices are relatively new. The history of web has seen a number of design standards emerge. Despite the constant evolution of the platform, best practices can help anticipate user behaviour on any desktop web application. Since the same can’t be said about touch phones and tablets, validating design choices as soon as possible becomes crucial. For mobile, fewer best practices exist and user behaviour is hard to predict.

PROTOTYPE SOONER THAN LATER
So what’s the right moment to prototype when designing for mobile devices? It’s not that different than other areas of design: you need start as soon as possible and you can’t stop until you are confident about the solution you are proposing. Throughout the creative process, the purpose of your prototype will evolve, and so should its actual manifestation.  At the brainstorming stage, you may simply be trying to communicate and get feedback about specific ideas from your peers with a couple of hand-drawn sketches.  However, later in the process, you may be hoping to perform a more serious evaluation of high-fidelity prototypes with real users.

One persistent issue with mobile prototyping is its small screen.  While you may be able to get away with larger brainstorm sketches, we advise running all prototypes on a real mobile device to simulate the size of your user interface (UI), the feel of your website/application, and the way people interact with it.

Another crucial aspect surrounds the fact that prototypes are meant to be shared. The whole point is to share them with the people from whom you need feedback, so the ability to serve as a communication tool for your interaction design is a basic attribute of every prototype. You have to easily be able to get it out there to see what people think, how they use it and what they understand (or don’t understand), in a way which reflects the actual proposed application.

But before you start building a prototype, you need to clearly define what you want to communicate, what kind of interaction you want to validate and what type of feedback you need. List the features you want to show, the questions you want to ask and based on that, write the usage scenarios that will help take people through your product.

Depending on your scenarios the prototype you will develop will fall in one of the three different categories:

LOW-FIDELITY PROTOTYPES
Prototypes can be as simple as a slide show of drawings made of pictures taken with your phone camera. Showing these pictures in your phone allow people to provide initial feedback regarding labels, positioning of objects, visibility and other elements that don’t require interactivity.

If you want to go one step further, you need to provide a way for people to interact with the pictures in order to simulate realistic scenarios. A number of different applications available in the market today make adding interactivity to your screens and running your prototype on a mobile phone quite easy. These tools help you link your screens together so people can navigate through them as if they were using a real mobile website or app. On the iPhone, tools like Realizer and Mockability help you build a prototype in a couple of minutes and easily share them. Invision is a recently launched web-based prototyping tool that works with all platforms.

If learning how to use another piece of software in not on your plans, some of the best tools for basic prototyping are likely already on your system: Apple’s Keynote and Microsoft Powerpoint. They both have the necessary functionality to link slides very easily and then export the “presentation” to a PDF file that can be “read” on all mobile platforms. A major advantage of these software packages is the number of available UI libraries for iPhone, Android, Blackberry and others.

One the best libraries in the market today is Keynotopia. Available for Keynote, Powerpoint and even OpenOffice, it provides UI libraries for the iPhone, iPad, Android, Blackberry and Windows Phone 7. It also offers an iPhone/iPaq app optimized to display your PDF prototypes. Or you can use your PDF reader of choice, like Goodreader on the iPhone or ezPDF on Android.

These tools are extremely useful when you need to create rapid prototypes to validate basic aspects of your design like labels, size and location of objects and the basic understanding of the navigation and flow.

MEDIUM-FIDELITY PROTOTYPES
Basic prototypes can only take you so far. You will frequently face the challenge of trying to communicate or test your design when users can’t see or do certain things you need them to do. Simple things like page scrolling can’t be achieved with linked screenshots like those in the basic prototyping category. You will often find yourself hitting a wall with the limitations imposed by basic prototypes. You will want to overcome some of these limitations to be able to explore your ideas in more detail.

The tools previously presented are good for the early stages of a project but as you move forward, more advanced tools are needed to allow you to reproduce the behaviour of your product. Fortunately we are not short of them. The market is full of powerful and simple to use tools that will take your prototypes to another level. Tools like Axure, Justinmind, Flairbuilder, Protoshare and Fireworks let you create more complex interactions and allow you to quickly share and get feedback on your prototypes. You can simulate data entry, add conditional behaviour, and even animations; all this without writing a single line of code. These tools have a slightly higher learning curve, but nothing that is out of the reach of designers accustomed to typical drawing tools.

These tools give more control over the whole experience and help you simulate behaviours that are closer to the way your application or website will actually work.

HIGH-FIDELITY PROTOTYPES
If you need a prototype that behaves as close as possible to how the final product is supposed to behave, you’ll need to dedicate more time it, maybe even getting your hands dirty and writing some code. It doesn’t mean you need to start from scratch, but you’ll need be ready to play with HTML/CSS/JavaScript or some other programming languages. Combining rudimentary coding skills with tools like PhoneGap, jQuery Mobile and Sencha Touch will allow you to create extremely rich prototypes that can be tweaked to run well in different platforms. Limitations lie only in your coding skills and time.

The advantages of this approach are extended control of the final result and the ability to reuse generated code if done well.

CONCLUSION
There’s no excuse today to skip the prototyping phase of designing mobile applications/websites. The number of tools available, whether you need a rapid prototype or a more advanced one, is growing everyday.  These tools can do a pretty good job of simulating interactivity for validation purposes at very reasonable prices (often for free). The market for mobile applications and websites is growing more and more competitive. Transparent review systems where people openly criticize and spread the word about bad applications make prototyping an essential part of your design process: you simply can’t afford to correct mistakes after building your application.

Year after year, students graduating from the Université de Montréal’s Industrial Design program showcase their work to an interested public. Though neglected for a long time, industrial design is now taking its place in the ergonomics and user experience industries.

This year, Chrystel and I were invited as jurors for the RAEDIUM prize. Each year, this prize is awarded to the student whose final year project excels in terms of understanding user-centered design and context of use. Our congratulations go to the winner, Hugo Messier, for his project R-Mano.

In this article, we present this project, as well as 2 other projects which deserve honourable mention.

R-Mano: Prehension Aid
by Hugo Messier

This sport glove allows the disabled to hold an object in their hand without using any force. It is designed for people with limited grip strength and dexterity while still having strength in their arms.

While still only a prototype, R-Mano has been tested and approved by people with handicapped hands.

Sysmo: Modular Support Bar System
by Chloé Tétreault

Sysmo enhances the experience of elderly people in the bathroom. Their attractive design, a definite improvement compared to existing systems, allows them to be fixed to the shower wall or bathtub. They allow for maximum grip and the rotating base gives the bars enhanced flexibility in terms of usage.

The support systems integrates seamlessly in the aging people’s environment, evolving with their needs and allowing them to keep their autonomy for as long as possible.

ICI : Public Transportation Targeted Information System
by Émilie Bonnier

The ability to select a route and find our bearings in transit may influence our choice of transportation mode. ICI provides users with targeted information at bus stops and inside the bus.
The goal is to improve users’ orientation by using their own personal reference points throughout the city.

For more details about these projects and to view the work of all the students, visit design.umontreal.ca.

Here’s a quick summary of some more presentations from the EuroITV conference:

* The use of TV as a reminder system for seniors’ medication (Brazil). Not that crazy of an idea.
* A panel on the impact of Internet on the traditional TV remote.  The panel moved a bit strangely.  Each presenter advocated an idea, one after another on the future of TV (the TV guide is dying, the future is in placeshifting, quality content is king, etc.).
* User expectations in terms of self-identification on interactive TV (for a personalized experience). A study was presented on the acceptability of different interaction modes on televisions in Austria. Strangely, fingerprint identification proved to be the users’ favorite …?
* A comparative study between a traditional remote control and a remote touchpad: the two remotes are more or less equal in terms of error rate, but the touchpad requires a lot more user movement.  The author concludes by stating his opinion that these remotes are destined to become popular in 5 years time, when touch interfaces become the majority.

* Recommendations: Because there’s so much content, specialists are calling for the television timetable to be replaced by intelligent recommender systems. A researcher presented an interesting overview of problems with recommender systems. One challenge is the notion of time; it is difficult to make good recommendations at first, as there would be no initial user data (implicit profiling).  He continued to present a method to optimize this element, a bit complex ..  On the same topic, another author has summarized his study on the use of recommendation software for Youtube videos as a Facebook application.  Their system uses a method combining both subjective measures and explicit judgements (user ratings of movies) and objective measurement (automated analysis of listening habits - eg playing time of a video, kind of the most popular videos, etc..). The system indicates that explicit and implicit data seem to converge, and that this combined approach is promising.  However, the majority of participants indicated they would not continue with the experiment afterward, as they judged it too demanding…

I recently returned from a month-long foray through India.  As the country from which both of my parents immigrated to Canada, the trip was enlightening in many ways.  Among the countless revelations lay a few economic and technological insights which I thought might interest our readers.  Are you a global traveler?  These thoughts are obviously anecdotal and I welcome your comments from your own experiences in other parts of the world.

While the major cities of India have become increasingly “westernized” and the country’s reputation as a hotbed for technology grows, the proliferation of technology has reached beyond the cities into rural villages and remote farmland.  Let me paint you a picture: imagine a young indian farmhand, shirtless, his legs draped in a cloth dress.  He’s riding one of his family’s bulls, slowly bringing it to the other side of the village.  He’s got a stick in one hand, which he’s using to whack the bull for navigation, and a cellphone in the other.  Despite my limited understanding of the language, he’s clearly discussing farm work.  This was a bold image I witnessed first-hand on a rural farm village in northeastern India.  This is a sugar plantation with no consistent residential electricity, no water pipes or hot water, and two small mobile phone towers.

The third world is collectively skipping 100 years of technological development.  While we painstakingly iterated from basic gas-guzzling cars, rotary phones and vaccuum tube computers to the current technological world, the fruits of our advance have globalized.  This child went from having no phone or communication lines whatsoever, directly to a mobile phone.  In the near future, I can imagine these third-world children engaging with technologies that access e-mail and web browsing (perhaps the iPad is a step in this direction as a simplified internet interface?).  Many talk of the “digital divide” as an emerging problem in our already-imbalanced world.  I would argue that this gap is destined to be filled through the globalization of our most modern, efficient and cheap technologies.

What does internet access mean to rural villages and third-world citizens?  Despite attempts to create structured and organized education systems (I visited several rural Indian schools), there is a clear lack of dedicated teachers with international-level skill and knowledge.  However, stories of intelligent people emigrating out of the third world have spawned a generation of young rural kids with intelligence and a passion for education which is simply unparalleled in the developed world.

The fire I saw deep in the eyes of an 8-year-old village girl who studies english and biology textbooks twelve hours a day of her own volition is a testament.  Her clear and firm intention to “become a doctor and move abroad” is in stark contrast to what interests the 8-year-olds I’ve met in the developed world.  Her smooth conversation with me in a self-taught english represents a calculated move from her remote village to the world stage.

As mobile technology develops and these young rural children get access to the wealth of information on the internet, it seems possible that this feverish appetite for education will be satisfied through self-directed learning.  The untapped potential of the intelligent-yet-uneducated workers I met at the nearby sugar mill could cease to be a reality with the advent of information technology.   Especially in the midst of this past decade’s collapse, the economic implications of a techno-savvy, self-educated and passionate third world are astounding.

How can we prepare for this onslaught of new talent?  First of all, the selfish question: how can we stay competitive by highlighting what makes our skills and experiences unique?  More importantly, how can we alter our economic systems and requirements to evaluate and embrace these talented people, knowing that they might be able to help solve major global problems despite not having an official degree or diploma?