29 January, 2016

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?

06 January, 2016

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.
Related Posts

01 January, 2016

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
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?"

Addendum on 1st Jan 2016
Added 'Book My Show' app's approach to colors.