The Traveler from Stone Soup - The Secret to Design Thinking by Jared M. Spool

This article was originally published by Jared M. Spool as Shh! Don’t Tell Them There’s No Magic In Design Thinking. I am reposting a part of the article - an inspiring story titled, 'The Traveler from Stone Soup' here.

[As written by Jared M. Spool]

The magical powers that people assign to Design Thinking reminds me of an old Eastern European folk tale. The story takes place at a time when walking was the only way to travel from one village to the next (before horses were invented). In that time, it was traditional to offer visitors to your village scraps of food to replenish their hunger after such a long walk.

Source: www.expectmiraculous.com

One traveler, upon arriving at a new town, knocked on the door of the first house he saw. However, despite the tradition, the homeowner didn’t offer any food. She explained that they were experiencing a drought and barely had enough food to feed their own family. They couldn’t spare a scrap.

Every house the traveler visited had the same story. It was a drought and there was no extra food.

When the traveler reached the center of town, he decided he needed to make something for himself. He took out his pots, started a little fire, and set up to cook himself some dinner.

He reached into his bag and pulled out a round stone. He set the stone in the bottom of the pot and started stirring. A crowd of villagers started to form.

“What are you doing?” a curious villager asked.

“I’m making Stone Soup,” the traveler responded.

“You can make a soup out of stone?” asked the villager.

“Yes, but a little water makes it better.”

“I have a little water in my well,” said another villager. He then ran off and fetched the water. The water was added to the pot and the traveler resumed his stirring.

“What will it taste like?” a villager new to the scene asked.

“Well, it would taste better with some carrots.” Upon hearing this another villager ran to his house to grab a few carrots from his garden.

Then another villager offered up some other vegetables he’d salvaged from his garden. And a woman mentioned she had some meat scraps on her pantry.

“All of it would make the soup even better,” said the traveler. Off they all went to grab what they had.

Soon the pot was filled with a lovely large stew. The traveler graciously shared his dinner with the villagers. Everybody had a grand time eating the Stone Soup.

After the festive evening, as the traveler was packing up to head on his way, he thanked everyone for helping.

“As a repayment for your kindness and generosity,” the traveler announced, “I’d like to give your village the gift of this stone. So, you can keep making soup even when you have a drought upon you.” The villagers all cheered with delight.

They thanked the traveler profusely as he made his way out of town. He continued on his way.

When the traveler was a few miles out of the town, he looked down at the road and spotted a lovely round stone. He picked it up and admired it for second. Then he dropped it into his bag and continued on his way with a smile on his face.

What Does the Traveler Think?

Design Thinking is our stone. When we apply Design Thinking, we bring the entire organization together to collaboratively solve big problems.

Yet, to me, that’s not the important lesson from the story. The lesson I take away is that, at no time during the story, do we believe that the traveler thinks the stone makes soup.

Instead, the traveler sees that the villagers need their thinking reframed. They have enough food to eat, if only they worked together. The stone isn’t magical. It’s a device.

Maybe the villagers believe the stone makes soup? Maybe a smart villager or two see what the traveler did? But at no time did the traveler himself ever believe the stone made soup. He’d starve if he did.

As design professionals, we shouldn’t let ourselves think there’s any magic in Design Thinking. Our teams, stakeholders, and executives can believe in it, but we shouldn’t. To do so would be to depend on Design Thinking having magic and such magic doesn’t really exist.

That’s the design professional’s secret. Shh! Don’t tell them!

Microinteractions: Designing the Little Details

Last week, I was in Auckland and Wellington, speaking on User Experience (UX) and teaching UX Design courses at two WeTest Conferences in Auckland and Wellington. I also had a rare opportunity to teach/speak at large corporates like Bank of New Zealand and Assurity Consulting. I am blown away by the lovely interactions I had and the new bridge I created with many in New Zealand. 

Token of Thanks

I extend my heartfelt gratitude to Katrina Clokie for inviting me to WeTest Conference. I never ever imagined that a chance meeting with Katrina at CAST 2013, which was my first self-funded trip to a US conference would bring us together again. I would also like to thank the Conference Organizers Katrina Clokie, Aaron Hodder, Shirley Tricker and Daniel Domnavand for conducting a world-class conference, for taking care of the little details for international speakers and introducing me to a super awesome community in New Zealand which is so passionate, warm, curious, learning-focussed and yet humble. This conference and my interactions will truly remain close to my heart for getting the ‘Conference based Microinteractions’ right! 

Teaching UX

It was a fabulous experience to teach UX Courses at the other end of the planet. At the end of these talks/workshops, many people walked up to me and shared many *pain points* in their daily line of work. For example, one of the workshop organisers, Merridy said, “Pari, I am going to put up a board indicating ‘Toilets’ on the door and avoid frustrating our visitors.” One of the conference organisers Shirley mentioned, “The motion detector lamb in our service apartment doesn’t light up instantly and expects a tribal dance which needs to be fixed.” I was thrilled to see people pick up this concept so quickly and apply it at work. 

Ctrl+Alt+Delete

Have you ever wondered why you need ‘Ctrl+Alt+Delete’ to lock/unlock windows? Did you ever wonder why we couldn’t have a single key to do the same task? In my early days of school, I was told to believe that 3 keys were given as a security measure (God knows how this could prevent hackers though!). However, Bill Gates confessed that having three keys was a mistake. “It was a mistake,” Gates admits to an audience left laughing at his honesty. “We could have had a single button, but the guy who did the IBM keyboard design didn’t wanna give us our single button.” David Bradley, an engineer who worked on the original IBM PC, invented the combination which was originally designed to reboot a PC. This brings us to microinteractions. 

Microinteractions

Microinteractions is a concept introduced by Dan Saffer in his acclaimed book, ‘Microinteractions’. By definition,

A microinteraction is a contained product moment that does one task well.

Every time you change a setting, update a device or post a tweet, you are engaging with a microinteraction. They are everywhere and they just need some *noticing*. Microinteractions are so simple that we don’t notice them until something goes wrong. Yet, they are incredibly important in creating delightful experiences for users. 

Structure of a Microinteraction

A beautifully crafted microinteraction contains four main parts: Trigger, Rules, Feedback and Loops & Modes. 

Trigger

A trigger initiates a microinteraction. For example, turning ON a lamp needs someone to press the switch. 

Rules

The rules determine what can happen, what cannot happen and the sequence of events that might happen. 

For example, what should happen when a user presses the switch in a particular direction (Up/Down), is determined by rules defined for this lamp. 

Feedback

Feedback lets people know what’s happening. In his book, ‘The Design of Everyday Things’, Don Norman writes,

“Sending back to the user, information about what action has actually been done, what result has been accomplished is a well-known concept in the science of control and information theory. Imagine trying to talk to someone when you cannot even hear your own voice, or trying to draw a picture with a pencil that leaves no mark: there would be no feedback.”

Feedback gives each action an immediate and obvious effect to avoid pain to the user. 

Loops and Modes

Loop is a cycle and mode is a state. Consider ‘Memories’ feature on Facebook. Facebook app constantly loops into your account to check if you have posted something on this day, 1 year, 2 years, 3 years….. X years ago. If the condition turns out to be true, a message pops up to remind you of your memory and your willingness to share your memory. 

If you share the memory, the state of your timeline changes, by showing you a memory in addition to other posts on your timeline. To summarize, loops & modes form the meta-rules of a microinteraction. 

Sketchnote

While there are different components that form a good microinteraction, one should remember that each one must be applied based on the context. Putting a hard rule saying, ‘Every microinteraction has to follow the set guidelines may turn out to be painpoints rather than delightful experiences.’ TEST Yvonne Tse, who works at Assurity Consulting in New Zealand attended my talk on ‘Microinteractions’ at WeTest Conference, Wellington. She created a lovely sketch note that is very close to what I covered in my talk. Take a look. 

Show That You Care!

Users today, have scores of options to choose from. All they want in return for their loyalty is that you care. In the words of Dan Saffer,

What microinteractions have made you happy today?

Labels on Mobile Forms

Labels describe the purpose of form controls, including text fields, check boxes, radio buttons, drop-down menus amongst others. On mobile apps, screen real estate is limited. This forces app developers to save space by placing labels in varying positions on tiny screens. Labels can be placed in many different ways. I cover five varied approaches in this article.

Positioning Labels – The Right Way

1. Inline Labels

Labels placed inside the form field are called Inline Labels. These continue to be a fad for many programmers after Apple introduced them in most of their apps.

Image Source: Dash Lane app

Pros

• Simplistic look
• Space efficiency and better use of mobile real estate

Cons

• Loss of Context – When user begins typing or even upon entering the field, label is lost thereby taking away the memorability aspect of the field

On Dash lane app, text fields have an inline label. Tapping on the text field keeps the inline label intact, until user starts typing into it. If user deletes existing data, inline label re-appears, to remind the user about the context of the field, just in case, user forgot what the field means.

Inline labels suit best on forms with fewer fields. E.g., on login forms, , it’s hard to forget which field is for what kind of input(username, password), for most part as there are just fewer fields with a straightforward goal.

Inline label could be a great feature if it is used in the right way. A good approach is to use it as supporting text or short descriptions that provide cues to users.

Luke Wroblewski, writes simple guidelines for input labels in his book, Mobile First.

A label within an input field:

• Should never become part of someone’s answer. This seems simple enough but still happens quite frequently when things haven’t been loaded or aren’t coded correctly. Ever try searching only to find the word “search” has become part of your query?
• Should not be confused with an actual answer in an input field. If labels and inputs look too similar, people might (rightly) assume an answer has already been provided for them. I’ve seen this happen too often in usability testing.
• Is usually absent when someone starts answering a question and when they finish answering a set of questions. This can make it harder to know which question is being answered or to go back and check answers after the labels are gone.

2. Floating Labels

Image Source: Google Material Design

Material Design guideline, introduced us to floating labels, i.e. the label appears as an Inline Label on the screen (Description field). As soon as user starts typing into the field, the label slowly floats upwards and places itself at the top of the field (Title field).

A downside to this approach is that, unless the features are coded for accessibility, visually impaired users might find it difficult to understand this behavior.

3. Top Aligned Labels

Labels are aligned above input fields, hence the name Top Aligned. I forgot the mobile app from where I picked this screenshot. That leads us to another problem. Shouldn't each screen have app logo on it, just in case, amnesia patients like me could recollect which app we are on? Well, I can only say, the world is tough out there.

Pros

• Faster completion time from users as per Matteo Penzo’s findings
• Works well for long labels
• Labels that require localization might have good flexibility

Cons

• They take up a lot of vertical real estate, leading to perennial vertical scrolling / swiping for long-ish mobile forms

4. Right Aligned Labels

Image Source: www.css-tricks.com

Labels are right-aligned while input fields follow them in left-alignment.

Pros

• Slightly slower completion times compared to top aligned labels
• Less vertical space

Cons

• When labels change, this alignment leads to flexibility issues in the layout

5. Left Aligned Labels

Image Source: www.css-tricks.com

Labels are left-aligned while input fields follow them in left-alignment.

Pros

• Best suited for forms where users need to slow down and scan the fields. For e.g., bank forms

Cons

• Slowest completion time compared to top aligned and right aligned labels
• Difficult to parse fields on long forms

Luke Wroblewski, has talked about top, right and left aligned labels in an elegant way, here that is almost impossible for me to beat. 

Image Source: Polar mobile app

As you notice in Polar mobile app above, inline labels can be used as placeholder texts inside input fields to complement labels with additional information. Notice that Polar has ensured that branding is intact on login screens with their 'Join Polar' title. There is little possibility that a user forgets which app this is. By the way, Polar app was designed by Luke Wroblewski, which was acquired by Google a while ago.

Labels appear to be the least important elements on mobile screens, yet play a major role in how these screens appear to users. We need to pay attention to not just their behavior, but also their placement.

How do you handle labels in your apps?

Mobile Calendar Essentials for Flight Booking Apps

Choosing travel dates is one of the frustrating experiences for travelers while booking flights, hotels or taxis using mobile apps. Few super-slick calendars and date pickers are abundantly available, yet the nightmarish experience of date selection remains.

General Guidelines for Calendar Behavior

I have used calendar feature in different contexts - booking appointments, hotels, buses and amongst others. I faced many problems, I have got confused and frustrated, sometimes, literally stalling my task and walking away. This post is a result of those experiences and questions I asked myself about the workings of a calendar while using flight booking apps.

There are several guidelines to consider while designing calendars for a seamless experience. Some of them are:

• Date selection screen could be a single screen where user can select Departure and Return dates at one go (tabs or segmented controls or other ways)
• Calendar highlights current date, departure and return dates. Current date has a text ‘Today’ below the date for memorability purposes in addition to a color background (Note that colored background alone could be hard on color blind people)

• Months are scrollable using swipe gestures. Icons like <, <<, >, >> are not a good fit for mobile
• Travel dates need to be highlighted once selected with a range. I.e., if 29th June and 2nd July are selected, the days in between these dates need to be highlighted to represent the range or the number of days.
• Drag and Drop of dates is supported. However, do not force the user to drag and drop for dates that are far apart, because it might be hard on the user to drag and drop instead of selecting in such a case

• Clean interaction / animation is defined and executed for each transition / behavior change / state change on date picker [This is a broad and vague goal that needs a separate blog in itself]
• Ability to modify departure or return date independently. Tapping on departure date field should show date picker screen with focus on Departure Date tab and similarly for return date.
• For round trips, user has to be prompted to select a return date using suitable animation that provides a strong visual cue
• Provide Cancel and Done button on calendar screen to give freedom and control to user. This is debatable because is some user tests, it was found that users expected the screen to auto-close once date selections were made. In few other tests, users were wondering why the screen closed without any action from their side. Such tradeoffs are very common while solving UX problems.
• Keep buttons, tabs and other critical information on top of the screen for better visibility. This is valuable from an accessibility point of view as differently-abled users are also used to finding critical information at the top.
• Local timezone (place of booking) is considered for date selections. Note that flight dates will be local time zones of respective countries where the user is visiting.

The above list is a set of guidelines, not hard written rules. Hence, they may not be applicable in all contexts. You need to pick the ones that suit most to your context.  

What's Your Experience With Calendars?

P.S: Special Thanks to Suresh Chelliah, Binoy Vijayan and Mohanraj for their review comments on this article.

Creating Positive Experiences on Mobile Apps While Users Wait

No one likes to endure the frustration of waiting. Hence, we often like to find ways to beat the ticking hand of time. We go out of our way to find the quickest option or any other means to reduce our wait. One of my previous posts talked about the pain caused by long waits and how skeleton screens solved the wait problem to some extent. In this post, I take a step back to figure out what other methods could be employed to make long waits, worth enduring.

Purpose of Loading Indicator and its problem

Traditional folklore suggests that if we keep users waiting, we must let them know:

• It will take a while
• They need to be patient as they wait

Loading indicators were, hence, born. As this trend caught up, developers and designers put their blood and sweat into developing the 'Next Best Progress Bar/ Spinner Of The Year' elements. And then, we had a bunch of innovative items. Google 'Best Loading Icon' and see it for yourself. While design and functionality of these icons was good, they failed to fulfill the fundamental need of 'waiting'. Looking at these icons only made users feel that time is moving even slower than before. The purpose of ‘progress’ was lost!

Techniques to shorten long waits

1. Transitions

Consider hamburger menu on any mobile app. Tap on the menu only to see a loading icon, hinting that the next screen is loading .................... slowly. You end up waiting.

Consider  using an interactive 3D transition that slowly collapses existing screen and makes way for the new screen. Ctrip app does it really well. As soon as user taps on hamburger menu, the home screen slides animatedly to the right making way for the menu items on the left side of the screen, eventually taking up 3/4th of the mobile screen.

Hamburger Menu Transition on Ctrip app

Transition not just helps in making apps feel better, but also reduces perceived wait time.

2. Skeleton Screens

Another way to avoid loading screens and focus on progress is to use Skeleton Screens. I have covered this in good depth HERE and will not include it here, in the interest of digital real estate.

3. Offers / Ancillary Services / Advertising New Features

Long wait times can be monetized. You heard that right! You can utilize wait times by showcasing content. Relevant personalized content! This content could be: a)Lucrative deals and offers, b)Ancillary services or c)Advertisements. Airline booking apps use this extremely well by offering additional paid services, known as ancillary services, to users while users wait.

Hipmunk app uses the wait time to:

A. Educate Users

Hipmunk posts useful #Tips on specific topics. E.g., How to complete a particular task or activity, or even a random quote related to travel.

Useful Tips displayed while Hipmunk app looks for suitable flights

B. Introduce New Features

While relevant flight results are loaded, Hipmunk introduces an existing feature, ‘Fare Alerts’ wherein user is asked to subscribe to free fare alerts. An assuring statement, ‘This will not interfere with your search.’ is displayed, just in case user fears that his search operation will be abandoned. If user taps on ‘Subscribe to this alert’ button, the button is replaced by ‘Adding fare alert…', followed by ‘Fare alert added!’ message. Throughout this activity, Hipmunk’s maskot dances on the screen, hinting that flight search results are on their way. This is a classic usage of channeling frustrating wait times to positive experiences.

Hipmunk app using wait times by displaying 'Fare Alerts' to users 

Summary

The focus of loading indicators should be more on the progress rather than making wait times longer and intolerable.

To summarize, we can create better wait experience by using:

1. Transition screens
2. Skeleton screens
3. Offers / Ancillary Services / Advertising screens

When speeding-up a process is not an option, giving extra care to a customer makes the experience of waiting more tolerable. I appreciate the free cookies and other samples in line at the Whole Foods store during the Thanksgiving season as the checkout queue snakes across the entire store. Saving time is thus the trade-off between the quantitatively fast versus the qualitatively fast.

John Maeda

Waiting is what people do in this world, most of the time. As they wait, telling them how much time they have left and how they can utilize it better, is only humane!

Do you make the wait time more tolerable and engaging? How?

The One Thing That Makes Users Smart - Smart Defaults

Recently, I performed a small experiment. I lined up a bunch of users (of course, some gracious friends and neighbours) to enter phone number into a text field, on a mobile app. I received some inputs summarized below:

• Adding a phone number is displaying an error message below the field, 'Invalid' [Field Validation and confusing functionality of Phone number field]
• Default telephone number, if entered directly, could be pre-populated with '+91' based on the region (Location Intelligence)
• User should be provided with hints on phone number and country code formats (Prediction and Precision of formats)

Consider a phone number field on a registration form. It’s usually a simple text field. By just seeing a text field, user might not know, in which format the data needs to be entered in. User might simply enter country code, area code, followed by phone number or stick to a format that the error message might convey (if you are lucky). In short, users might go wrong many times, due to incorrect format or unknown validations coded into the product by programmers. In few cases, text field might allow alphabetic characters into phone field, paving way for more errors from users, for which users get into 'False Game'.

Whatsapp is one app which makes entering phone numbers easy. If you access the app from India, the country code is pre-filled based on location services by default. In case user wants to change it, he can deleted current value and enter a new one. Additionally, country code field is separated from phone number providing visual cue to user on the format of the phone number expected. This is much simpler as ‘+91’ makes user’s job, not just easy, but lessens the number of steps as well. Whatsapp smartly defaults the right value into the country code field, whilst allowing users to modify it if they like to, specially, let’s say, if they are travelling to a new country.

Smart Defaults

In Luke Wroblewski’s words,

“Smart defaults are selections put in place to provide answers to questions for you. This enables people to complete forms faster. Every question we ask people requires them to parse it, formulate a response, and then input their answer into the affordance provided on the form.”

How To Make Smart Defaults

FreshMenu is a food ordering, mobile app. When user installs the app and launches it, it asks users for a location. Since, the app serves food only in select locations in Bangalore, this setting helps. It would have been even better if the app picked current location based on location services (while allowing users to change it if they need to). Hipmunk, goes a step ahead and considers current location as the departure location. Then, the app sets that location as default for all future flight bookings. However, if user needs to change departure location to some place else, the app lets users to do so. Apps like FreshMenu, Hipmunk and others have unleashed the power for Smart Defaults and Location Services to work in their favor and delight the users.

"Best defaults are those that suit users most of the time."

What suits users can be determined by using user research data, interviewing users, evaluating analytics information for apps and so forth. Following points highlight how we can imbibe smart defaults in apps.

1. Let the desirable choice be the default
2. Keep universal functionality, ‘Universal’ as much as possible. E.g., Enter key, Return key
3. Pre-fill/auto-populate relevant information e.g., Email address and Phone number while booking flights
4. Allow users to ‘Favorite’ some features e.g., HDFC Fast Cash Withdrawal
5. Auto-suggest values as appropriate
6. Keep track of ‘most used features’ and make them easily accessible to users
7. Tooltips as effective clues
8. Hinting users on what’s coming next

Note that Smart Defaults is applicable, not just for input fields on forms, but for features/flows as well, depending on the context and the domain in which apps operates. While smart defaults surely delight users, as long as it serves them well, it might drive many others away if used in the wrong way (dark patterns). For e.g., auto-subscribing users to promotional offers and emails by default while filling a registration form by keeping associated checkboxes pre-selected. Added to this, some products make it almost impossible to unsubscribe to these offers. Dark patterns are a reason why many users unsubscribe to apps as such gimmicks misuse user’s trust.

Again, Smart Defaults need to be used with caution. One can’t possibly default Gender Selection to ‘Male’ or ‘Female’ to start with, as the app is not smart enough to detect whether the user is male or female (unless there are camera-related apps that can do that well).

Good Practices for Smart Defaults

Luke W, in his book, "Web Form Design: Filling in the Blanks" has laid out some good practices around using smart and personalized defaults. They are listed below:

1. Carefully examine all the questions being asked in your form for opportunities to eliminate unnecessary inputs
2. Look for patterns in how people answer questions that allow you to infer answers accurately
3. Be mindful not to complicate questions or the sake of removing inputs
4. Smart defaults can help people answer questions by putting default selections in place that serve the interests of most people
5. Because people are likely to leave default selections in place, ensure they align with most people’s goals
6. Whenever possible, include a default selection in a set of radio buttons. If no clear default exists, chances are that people will still understand they need to make a choice. But if they don’t, they’ll get an error
7. Personally relevant default selections enable return customers to complete forms faster because their answers are “sticky”
8. Think through where personalized defaults make sense. It won’t be every input on every form

Personalized Defaults

A step ahead of Smart Defaults is to create Personalized Defaults. Since several apps collect heaps of data from users, it might as well be a good idea to personalize apps for users.

Several years ago, I had signed up on Tesco website. Those days, very few websites sent emails by addressing users by first name. I was obviously thrilled. A few weeks later, Tesco actually sent promotional offers to my inbox saying ‘You might like to buy these products for your baby”. I didn’t have a child at the time, so it surely annoyed me. One needs to know the limits of personalization, as in Tesco’s case, who clearly didn’t know if I had a child or not, especially when they didn’t have that information in their database.

Smart Defaults  and Personalized Defaults can be powerful, if used appropriately. If using them adds complexity, it might drive users away. Exercise caution. 

"Most companies are looking to “wow” with their products, when in reality what they should be looking for is an “Of Course” reaction."

Christian Lindholm

Are you using Smart Defaults to your advantage?

The Journey to Beyond UX Tipping Point by Jared Spool

This article was originally published on Test Insane website.

This mindmap is inspired by Jared Spool’s brilliant article on UX Tipping Point.

The UX Tipping Point is the moment when an organization no longer compromises on well-designed user experiences. Before they hit the tipping point, they might talk about great design, but they’ll still ship a mediocre experience. However, once they’ve passed it, design has become an embedded part of their culture and DNA

Jared M. Spool

Mr. Spool also points out how giving rewards for shipping features over delivering great experiences is spoiling organizations from reaching the UX Tipping Point.

Read in detail at https://medium.com/uie-brain-sparks/beyond-the-ux-tipping-point-ac5ee6c4a7e2#.tj912ecls 

Related Posts

User Experience Design and Other Overlapping Disciplines

Color, Color, What Color Do You Choose?

Color, Color, What Color Do You Choose?

In November this year, Twitter changed its star icon indicating favorites to a lovely heart. While folks at Twitter called them likes, many twitter users started calling them hearts.  Akarshan, the product manager who led this effort at Twitter, “We want to make Twitter easier and more rewarding to use, and we know that at times the star could be confusing, especially to newcomers. You might like a lot of things, but not everything can be your favorite. The heart, in contrast, is a universal symbol that resonates across languages, cultures, and time zones. The heart is more expressive, enabling you to convey a range of emotions and easily connect with people. And in our tests, we found that people loved it.” Check out this video to see how the new like/heart feature works:

Around same time, Google and HP changed their logos, and key players like Myntra, Flipkart and others changed their color schemes. Colors like  ‘Red’, ‘Blue’ and ‘Yellow’ became prominent for several mobile apps. It left me wondering about  why we obsess with colors?

What's in a Color?

Color is an engaging and powerful form of communication. Color piques emotional interest in products. Many times, even the best design gets trumped if appropriate colors are not used. For designers, color is about expressing their emotions and bringing in certain emotions in users. For users, color is a key to creating perception about brands. For e.g. the color red might remind us of McDonalds, Pizza Hut or Virgin Atlantic.

Color Wheel

A color wheel, also known as color circle is an abstract representation of different colors around a circle that shows relationships between primary colors, secondary colors, tertiary colors etc. 

Newton's asymmetric color wheel, that correlates colors with musical notes and planetary symbols.

In 1666, Sir Isaac Newton’s work with white light led him to the discovery of the visible spectrum of light. So, the first color wheel dates back to Newton’s period (displayed in picture above). Newton’s experiments led to the theory that red, yellow and blue were the primary colors from which other colors are derived. Since then, several variations of this concept have evolved with time. A short history of the color wheel is represented in the picture below:

Image Credits : www.colormatters.com

The Color Theory

Image Credits : www.colormatters.com

According to color theory, there are three primary colors: red, blue and yellow. These cannot be mixed or formed by any combination of other colors. Mixing two primary colors together creates the secondary colors: green, orange and purple. Tertiary colors are formed by mixing a primary and a secondary color. E.g., blue-green, yellow-green, red-orange, red-purple and so forth. These days, color experts have come up with unique names for secondary and tertiary colors.

Color Harmony

In visual experiences, harmony is something that is pleasing to the eye. It engages the viewer and it creates an inner sense of order, a balance in the visual experience. When something is not harmonious, it's either boring or chaotic. Color harmony delivers visual interest and a sense of order.

www.colormatters.com has this to say about harmony between colors: There are many theories for harmony. The following illustrations and descriptions present some basic formulas:

1. A color scheme based on analogous colors

Analogous colors are any three colors which are side by side on a 12 part color wheel, such as yellow-green, yellow, and yellow-orange. Usually one of the three colors predominates. Analogous colors are excellent for creating color schemestry using three or four of them together, such as red, orange, and yellow, or blue, green, and yellow. 

2. A color scheme based on complementary colors

Complementary colors are any two colors which are directly opposite each other, such as red and green and red-purple and yellow-green. In the illustration above, there are several variations of yellow-green in the leaves and several variations of red-purple in the orchid. These opposing colors create maximum contrast and maximum stability. Although they have been used by artists for centuries, care should be taken when using complementary colors together. Although they will make each other vivid, used together they can also be difficult to focus on. 

3. A color scheme based on nature

Nature provides a perfect departure point for color harmony. In the illustration above, red yellow and green create a harmonious design, regardless of whether this combination fits into a technical formula for color harmony.

The Role of Color in Visual Interface Design

Color plays many roles in Visual Interface design. These are the prominent ones:

Visual Cues

Colors, in their simplest role, provide visual cues to evaluate a situation or perform an action. Consider an example of a traffic signal – Red means ‘Stop’, Green means ‘Go’ and so forth. This rule is applied on mobile devices as well for Incoming Calls, where tapping on Red icon disconnects the call while tapping on Green, connects the receiver to the caller.

Relationships between Heterogenous Objects

Color can be used to establish relationships between similar and dissimilar objects. For example, buttons on a website or app could all be one color. Tab bar items or navigation links could be in another color and so forth.

Priority / Importance

Important / Critical items can be colored in strong, highly saturated shades to grab attention from users. For example, a highly saturated red button on an otherwise white background with light colored UI elements will attract users easily.

Book My Show app's approach to Colors

Book My Show's overall branding had Red as prominent color, mostly in header section on landing screen and other generic screens.

One striking thing is the method Book My Show has used to created memorability on the app. Movies are represented in sky blue, Events in orange, Plays in green and Sports events in Purple. If a user enters 'Sports' section, purple becomes a prominent color mostly for 'Action' buttons. For a user who has used the app a couple of times, it becomes easier to relate to specific events by associating them with colors. Note that this association works well if there are fewer items - in this case, there are 6 prominent colors. If there are more categories, adding too many colors to differentiate them might become an overhead. 

Closing Thoughts

Dan Saffer, in his book ‘Designing for Interactions’ states, “Knowing basic principles of the Color Wheel will help designers avoid clashing colors. The painter Josef Albers noted that a color doesn't exist until it meets another color. Designers should look at the edges of colors and see how they work together. White backgrounds tend to darken, and can even deaden, colors. Black backgrounds tend to lighten colors. Try backgrounds that aren't pure white or black, such as light gray. Very pale yellow backgrounds with black type are good for older eyes. Care should be taken to avoid an effect called chromostereopsis, which occurs when two colors side by side seem to cause both colors to vibrate. Red and blue together for instance, blue text on a red background will often create this effect, irritating viewers' eyes. In general, colored text on a colored background is difficult to execute well.”

The Button Color A/B test goes on, to prove how critical role, colors play in deciding the likeability of products. Concepts from color wheel helps designers create interesting palettes by applying underlying principles of color theory. Designers should become familiar with the color wheel which is helpful not only for choosing a color scheme, but also for avoiding color-related problems. 

So, the question to you, like the color game we used to play as kids is: "Color, Color, What Color Do You Choose?"

References

• http://www.colormatters.com/color-and-design/basic-color-theory
• Book : Designing for Interactions by Dan Saffer

Addendum on 1st Jan 2016

Added 'Book My Show' app's approach to colors.