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.

Since the iPhone app frenzy started back in 2008, we’ve had a number of people ask our advice for user interface designers designing their first iPhone app. The arrival of the iPad earlier this year pushed even more people to start thinking about designing for mobile devices.

As expected in any design process for new platforms, a number of interesting challenges appear everyday. Below we share with you a list of the most remarkable ones so you can anticipate and be well prepared when the time comes for your first iPhone or iPad app design.

A New Vocabulary
At Yu Centrik we have done a lot of design for the web, interactive TV and vocal interfaces. For each one of them we developed a vocabulary of terms we’ve gotten used to applying to our conversations with project stakeholders, project managers, designers, and developers. A common set of words that makes technical communication easier is important. Words like “layers”, “pop-up windows”, “drop-down menus” and others quickly become a shared dialect. If you are a long time user experience designer, you have likely used similar vocabularies in your projects without even knowing it.

When designing for the iPhone, you will quickly notice that none of these existing vocabularies is adequate. You will find yourselves looking for words to describe familliar-yet-unnamed interface elements. You will get e-mails from developers asking about behaviour and elements that you will barely understand, forcing you to spend time researching terminology before being able to respond.

In a short period of time, we were able to familliarize ourselves with terms like “Tab Bar”, “Segmented Control” and “Date Picker”, terms that are iPhone and iPad specific and are not used in other platforms. If you want an effective design process, I would highly recommend getting used to such terms as well.

Gestures
Obviously, the biggest change in the iPhone and iPad interaction model is the fact that input comes from the user’s fingers. We can not only tap, but also use multiple-finger gestures (what Apple calls multitouch). You will not only have to learn which gestures are possible, but also test which ones are the most appropriate for your application, its usage context and its users. The next step will be to determine new ways to communicate the expected gestures (images, for example) effectively to developers.

Different User Interface Standards
Sometimes we may take it for granted that basic interface elements move from platform to platform as they evolve. We don’t typically expect them to change or disappear completely when new interaction models are created. One example is the checkbox. Checkboxes have been present in desktop software, web sites and interactive TV for a long time now. Even if you have used the iPhone for two or more years, you might not realize that checkboxes are not standard elements on iPhone interfaces: switches are used instead. Knowing simple things like this can save some precious design and development time.

What’s Included and What’s Not
Some hot discussions might take place when developers ask you for multiple images of button states when you specify that you want beautiful, embossed buttons like those we see in most iPhone apps. What you might not know is that the only button format available in the iPhone SDK is the simple flat ugly rounded rectangle button. If you want those beautiful glossy green buttons to confirm an action you have to provide images to the developer. This situation is parallel to that of the tab bar icons. There are only 12 of them, and not all the icons you see in Apple’s own applications are available by default; you have to produce them yourself.

Development Time
So, how long does it take to add a background to your home screen? How many hours will the programmers need to create a customized window that scrolls up from the bottom of the screen? We are not talking HTML, CSS or JavaScript. We are not talking Flash or Silverlight. It is hard to anticipate what kind of impact your design ideas will have on development time and, by consequence, project schedule.

Prototyping
Prototyping is crucial for any project. Without prototyping, it’s really hard to test different design solutions and see which one best solves your design challenges. But prototyping and testing for a mobile phone is not the same as prototyping for the web, where your prototyping platform is the same as the testing platform. We went through several prototyping stages, from paper to Keynote to Axure until we finally found an iPhone mock-up application called “Interface”, available at the App Store, where we can quickly check how our products will work in the real world.

Delivery
The final challenge is to learn how to deploy the real application in test phones in order to both have people check for bugs and to show a realistic final product to your client. You will have to learn Apple’s processes for becoming a registered developer, for creating security certificates, for registering development devices and for installing the app. And let me tell you from experience: they are not as simple as you might think.

Some Tips
The more you learn before your first project starts the better. Learn your platform vocabulary: read the UI Guidelines more then once and write down the terms that are new for you, effectively creating a personal dictionary that you can refer to as needed. Get used to the gestures available in your device and use it in multiple contexts (standing under the sun, on the bus, in the office) until you are comfortable with the way you interact with it. Learn its strengths and weaknesses. Become a registered developer (US$ 99 / year) and use XCode (if you have a Mac) to learn what interface elements are available. Also, try different prototyping tools to see which one better matches your needs. I also highly recommend talking to an experienced iPhone developer to understand the development process, with a focus on which tasks are the most time consuming.. Don’t forget to ask for a quick overview of Apple’s processes so you can better understand them when it’s your turn to go through the steps of submitting your finished application.

Conclusion
Designing for a new platform is extremely exciting. While it requires a lot of research to understand the new interaction models and usage contexts, it also opens up a whole new world of possibilities to apply your user research, interface design and testing skills. With the right preparation, you can make a clear and problem-free step forward.

Here is a short account of our experiences with the iPhone after three weeks of use.

Joëlle - iPhone: 20 days

For: The all-in-one concept is unbelievably efficient. The integration of the range of tools and features (hands-free phone, e-mail, Web access, ipod, itunes, photos, camera, GPS, contact, calendar and the ability to quickly download widgets) is a pure pleasure to use! Navigation is simple, the “menu” button is a must, the sound and graphics are very high quality, altogether the system works great! Interactions in general are amazing.

Against: Simplicity has its compromises! Personally, I think there are too many essential features hidden in the second level; I don’t have the time to figure them all out. I’m guessing this might be typical behaviour for a woman focused on tasks rather than using my iPhone as a toy.  And yes, it’s true… men and women do not behave the same in the face of technology. Maybe I’m just not the target audience.  Fortunately, there is a Marcio (a playful man) in the next office, who certainly will explore and discover the potential of this small device so I can regularly ask: “Marcio, do you know how to do this…? “.

Here are some of the essential features that caused me minor frustrations because they weren’t present in the first level of the interface:

• The quick contact search placed at the top of the contact list is hidden when you descend down the list.  I couldn’t find it after searching for a while.  Once I realized that it was located at the top, I also realized I could jump quickly to the beginning of the list by pressing my finger on the right-side scroll bar.

• Adding a new name to the contact list: it takes three manipulations to add a contact, too many in my opinion.

• When reading mail, two icons do not seem explicit enough: a folder with an arrow at the bottom which leads to the main email menu and an arrow to the left to respond to a message (this iconography is to usually used to go back).

• The location of accented characters (when typing in French). Again, I had to look around for a long time before finding them. In order to do it, you’re supposed to maintain pressure for 1 or 2 seconds on the letter, and then select accented characters from a bubble which appears.

• It was not clear how to move around the large tool blocks on the home screen at first.  You have to maintain pressure on one of the tools and as soon as the square starts trembling, then you can move them from one page to another.

• Another point of concern, the degree of dexterity and precision necessary to use the keyboard caused many errors which discouraged me several times to respond to an e-mail from the iPhone, attention to those with big fingers!

• In the same vein, too much precision is required to “catch” a key like the one used to quick-erase a message from the inbox. It’s always a bit random and the probability of hitting it twice in a row is low, I always end up in the wrong place; the email opens, requiring a round trip to return to the list.

• Also, the screen gets dirty quickly, and it must be cleaned often.

To conclude, I love my new gadget.  Once you discover the functionalities, they seem so transparent and obvious “of course!”.

———-

Marcio: iphone: 21 days

For: The integration of so many functions into one device is very well done. The multi-touch interface is efficient in its use of natural movements (drag, open fingers, close, etc.) and its ability to recreate the sensation of touching a button (for example, by expanding characters typed on the keyboard).

The fluidity of interaction is incredible, mainly due to the fact that interface transitions obey the same physical laws of the real world which our brains naturally predict. The acceleration and feedback of interface components are very natural actions corresponding directly to mental models we have all formed from observing the behaviour of objects in the real world. The “machine” aspect of the device is masked by a very sophisticated interaction design.

Against: The keyboard requires a little patience, but it is not impossible to use; it just takes a few days of practice. Keeping your iPhone in its anti-shock rubber sleeve makes it more difficult to use the keys located at the far left and right of the screen (this is a problem especially since the sleeve really is necessary).

The automatic correction of text is a major irritant. I write mainly in French and Portuguese and, regardless of the language chosen for the interface, the corrector still proceeds in English and there doesn’t seem to be any way to disable it!  Writing a message is very long and frustrating. (In fact, I just found out how to change the automatic correction to a language other than English, but still no way to turn it off…). Someone help?

Another thing that doesn’t pertain directly to the interface, but still has an impact on the overall user experience, is the battery life. Even with very little use, the device requires a recharge at least once a day. Is this the price we pay for so many features?

In the last article, we saw a few websites simulated on the new iPhone. From these examples, it became clear that sites in general will need adjustment to enable easy navigation on browsers like the iPhone’s Safari. Such adjustment should be geared mainly toward improving the display and optimizing it for use with small screens.

These are only the minimum necessary adaptations to make a site usable. However, there will be some situations which call for taking an additional step beyond just a beautiful display. The real revolution of the iPhone, especially the new 3G, goes beyond simple Web surfing; such technology can harbor much more intelligent applications.

When one wonders what sites could benefit from new technologies like GPS, for example, the web presence of real estate agents comes to mind as a salient example. Imagine your phone delivering immediate information about a house for sale while you pass directly in front of it. No more time spent getting lost in the navigation while searching among hundreds of ads, as is the current practice. Scenarios like this can be easily realized with the 3G iPhone, coming out this week (or already out if you read this after July 11th).