Yu Centrik

As I was opening a CAMINO chocolate bar, I saw this drawing on the packaging. This got me thinking about how large of a role sketching plays in explaining concepts in our day-to-day lives.

In the case of Camino, a sketch is being used to explain the company’s philosophy based on an equation: “Following the rules of fair trade when producing organic chocolate promotes sustainable development.”

The approach was described in six words and three drawings on the packaging. I described it in 13 words. Seven less words to be translated in various languages, we already see an advantage of associating text with illustrations.

As for the 3 sketches, there is nothing to translate. If they were well-tested, the images could be explicit enough to be spread internationally and be understood by a large audience, regardless of their country and language spoken.
Just in case they are not explicit enough, the text provides missing keywords.

I could also cite relevant examples of airplane security and IKEA furniture assembly instructions

In the past, image was used to support text, bringing further clarity to a message.
Today, text completes image.
Still, a question remains: why does the sketch have so much impact on us and why are designers using it more and more in product design, services, telecommunications, advertisement, documentation, training, etc?

Let’s try to answer this using a small exercise.

Let’s compare sketches and photos.
To what extent does this dimension change the message conveyed by the designer and received by the observer?

In this situation, we can see that sketching is a more effective way to communicate an idea, concept, or philosophy to a large audience because:
- visuals are processed first;
- presented situations are linked to people’s experiences without giving too much detail (which tends to slow down processing of the message);
-the sketch amplifies the meaning of the message by presenting a tiny story which can be understood and easily remembered by all (and can often make people smile, too).

The sketch can be very seductive but, as illustrated by Camino, it is inseparable from keywords which specify its message and “lock its meaning” (Scott McCloud, Faire de la bande dessinée).
So go forth and sketch!… but remember to associate some text.

References

. Bill Buxton, 2007, Sketching the user Experiences – getting the design right and the right design, Elsevier Inc.
. Scott McCloud, 1993, Understanding Comics: The Invisible Art
. Scott McCloud, 2007, Faire de la bande dessinée, Paris, Delcourt, 2007

Read more blogs on the subject

Why (do) we sketch?
http://www.uie.com/articles/why_sketching/
http://keepthenoisedown.typepad.com/keep_the_noise_down_blog/user-centred-design/
http://www.simplestroke.com/wp/?p=64

Source images

Photo - CAMINO
http://2.bp.blogspot.com/-UptJac8-y1k/TYanXhBP8rI/AAAAAAAAA5U/L6BqiYAd72E/s1600/camino.jpg

Photo - Biologique
http://www.zimbio.com/pictures/DbdrtTesv53/Migrant+Workers+Employed+Colorado+Largest/rBePyZssvD_

Photo – Commerce équitable
http://maineroot.com/?page_id=95

Communautés développement durable
http://www.thejetnewspaper.com/wp-content/uploads/2011/09/KINDERGARTEN-VISIT-webcopy-254×134.jpg

Icons
http://www.seoguruji.com/images/icon_organic.gif
http://www.green-living.com/designimages/icon-fair-trade.gif
http://www.shu.ac.uk/business/sites/all/themes/zen/shu/assets/sustainability/communities.png

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.

Our readers often tell us they want to know how to improve their skills in technological design. Hopefully you’re interested in this as well. Maybe you stay honed by reading technology blogs and Twitter, and perhaps you occasionally get swept up by the hype of marketing gurus who claim we’re part of a new revolution. The problem is, the real information revolution was over a century ago!  Of course it’s important to keep up-to-date, but let me tell you why it’s equally important to clean the dust off some old books and start learning design from history.

We can’t afford to believe the hype.
If you spend a lot of time on the web, you probably believe that we are on the cusp of some kind of “information revolution”.  If this is something that motivates you to push further, don’t let me steal that from you - certainly the latest in sleek, smooth and functional technology which participate in a global network is remarkable and unprecedented.  However, if you’re a critical thinker, you have the potential to see beyond the hype!  When you engage in major projects, you have a responsibility to make the right judgements by learning from the history of media.

Designers who dip into the interdisciplinary depths of human knowledge are an endangered species, mostly due to hype: do you really think computer technology is a fundamental game-changer in the context of human progress?  I’m often surprised at how many simply assume this to be the case without thinking about it themselves.  It is in response to this fallacy that I wanted to remind our readers that the notion of an “information revolution” is simply not ours to claim.  Nowhere is this more important to consider than in our fields of research and design.  Believing our generation’s selfish hype causes narrow vision, a serious obstacle to drawing upon the diverse sources necessary for good interaction design.

When was the REAL “information revolution”?
In a quick read called “The Victorian Internet“, Tom Standage draws extensive comparison between today’s Internet and the 19th century telegraph.  Many attributes of today’s so-called “information revolution” actually surfaced in the mid-19th century.  While the Internet gets the credit, the telegraph was the true breeding ground for instant messaging, e-mail, piracy, use of abbreviated language, and more.  However, all of these developments pale in comparison to the telegraph’s biggest contribution: the increased scope of news media.

In the mid-19th century, the average person’s daily reading transitioned from local, month-old news in a small community to global events from the previous day.  In a world where reporters traditionally took their time piecing together stories from past months, the telegraph built a competitive news industry by communicating daily news and events around the world in minutes.  This development was arguably the seed for our globalized media environment.  The people of this time period saw a much more profound change than us: a true information revolution.

Designers: embrace the history of new media.
The telegraph exemplifies why people working in technology would be smart to avoid focusing only on the work of our generation.  While today’s technological design concepts certainly have merit, one should not ignore the historical progression of media.  Important lessons and inspiration lie in traditional approaches to literature, painting, music, architecture and more.

• Consider the Rosetta Stone, an artifact which contained an identical message in Greek and Ancient Egyptian.  This stone served as a key, allowing us to use our knowledge of Greek to interpret and decipher the Ancient Egyptian language.  Similarly, mapping complex technical terminology to recognizable words and metaphors helps facilitate the learnability of complex interfaces.
• As another example, recent work by Steve Dipaola studying the art of Rembrandt has shown that this master painter was using techniques which manipulated the audience’s experience of the work.  Whether intentional or not, Rembrandt was painting for the user experience in the 17th century.
• Finally, consider the advent of functionalism in early 20th century architecture.  This movement, captured famously by Louis Sullivan’s “form ever follows function”, directly connects to today’s doctrine in user interface design.

In a few examples, you can see that we are not in some completely new field.  Instead, our work fits neatly with historical precedents, suggesting that we would be foolish not to draw upon the work of our ancestors for inspiration.  This is why I firmly believe that people who work in technology should embrace older ideas and techniques.  By all means, keep following blogs and Twitter, but don’t forget to pick up some inspiration from your media ancestors.

Working in web?  Learn about the printing press.  Designing graphics and visuals?  Learn about painting and portraiture.  Working in physical ergonomics?  Take classes in sculpture.  Specializing in information architecture?  Learn about the history of language.  You will be surprised how useful a foundational approach can be in providing progressive and impressive research methods and design solutions for your clients.

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.

In industrial design projects, including everything from improving the user experience of an interactive television system to performing open-ended user research for an upcoming product, designers are presented with the challenge of synthesizing best practices and contextual analysis into an effective human-computer interface.  I’ve encountered a significant amount of confusion with respect to the priority of quantitative and qualitative information.  The fact is, commercial design is a discipline which will forever walk the line between the subjective and objective.  This raises a major question:

How do we know when to rely on statistics and when to trust our creative instincts?

STATISTICS VS. CREATIVITY

The scientific approach to solving a problem suggests hypothesizing a solution based on previous work, testing it experimentally, and reporting results.  Through such theory and experimentation, we can draw conclusions which move us closer to understanding and solving real problems.  And so goes the science of user experience design.  Based on previous experience, best practices, experimental evidence, I can suggest a design solution which will likely optimize the interface between a certain technology and its users.  Performing usability tests allows me to validate my suggested interface and tweak the system, creating a predictably usable interface.  Simple, right?

Wrong.

What’s missing from this description is the artistic.  The fact of the matter is that human-computer interaction design can benefit substantially from a creative approach.  When our clients want systems which engage, attract and achieve a sense of flow, we need to move beyond the objective, incremental scientific process.  The artistic approach represents an increase in risk but also potential reward (especially in a growing, competitive industry).  By constantly evolving our art-form through our experience with innovative products on various projects in various contexts, we improve our ability to build designs which communicate with users; the deeper our insight into the human experience, the more depth we can provide in artful, “big picture,” interactive solutions.

So what’s the correct answer?  When should we trust the numbers, and when should we take creative risks?  While each project needs its own tailored approach, every designer must be aware that both methods are interrelated.  Their relationship is not simple, but I can certainly provide some insight directly from my experience researching, designing and testing human-computer interfaces.

SIX RULES TO BALANCE THE SCIENCE WITH THE ART

1.  A completely objective and numeric approach is a safe bet when time and budget are constrained.  In a quick project which doesn’t have time for abstract design methods and adequate user testing, a more objective approach is typically a good way to minimize risk and get a quick job done with minimal internal controversy.

2.  With a client who is willing to take risks for reward, a completely objective and numeric approach is a missed opportunity.  While interface usability can be improved with an objective scientific approach, the other elements of the user experience tend to be neglected.  Where possible, attempting to inject creative and innovative approaches where possible can help increase overall flow, mental modeling, engagement, hedonic factors (fun), and user satisfaction.  In a thriving industry, innovative solutions can be a major competitive edge.

3.  A completely improvised creative approach is never a good idea.  It may work occasionally for graphic and visual design, but principles and existing work in human psychology and industrial design allow us to avoid blindly hoping that our users will react well.  There is always a place for science, even in the most creative approaches.

4.  Facts not only predict user behaviour, but they also inspire creative design solutions.  Facts about how users interact with a system tend to logically suggest a solution.  For instance, the fact that “90% of users didn’t notice the button” would suggest that this button needs to be bigger and more prominent.  However, when taking all problems into account, it becomes clear that not everything on the screen can be prominent; we can’t simply enlarge every button.  A few behavioural facts may lead designers’ instincts to a deeper level.  It is here where the experienced designer’s creative approach can solve many problems at once with a more elegant design solution.

5.  The more testing you’ve planned, the more creative risk you can afford to take.  If your project has several iterative tests planned, you should inform your design team that innovation is expected.  Lateral and less-directed design methods like parallel prototyping and group workshops can lead to innovative and groundbreaking solutions which not only optimize the usability of the interface, but generate an engaging and attractive user experience which gets people talking.  Sure, there will be failed tests and wrong steps, but without experimenting, how can you possibly expect to innovate?

6.  Fix edge-cases when they don’t affect more common use cases.  When testing a design with many users, if a very small minority of users has trouble with a certain element, it may seem statistically irrelevant.  However, if such problems seem repairable without affecting other users, they’re still worth fixing.  Think about it, if only 1 out of 10 test participants have trouble with an element, the problem could either be negligible or it may translate to 10% of all your users, or maybe even more!  If you’ve identified a problem that’s easy to fix and doesn’t harm the experience of other users, why take the risk?

–

Hope this helps you walk the line!