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

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

02 December, 2015

User Experience Design & other Overlapping Disciplines



This article was originally published on Test Insane website.
The term user experience was coined by Donald Norman in the 1990s. A review of his earlier work suggests that the term "user experience" was used to signal a shift to include affective factors, along with behavioral concerns, which had been traditionally considered in the field. Every product/service solves an unmet need or a glaring problem. Solving an unmet need or a critical problem is one thing. Creating a delightful experience while getting work done is another thing. While any user might start using the product to accomplish some tasks, one of the aspects that might retain users or improve loyalty is user experience. 
User experience is not a single discipline, but a gamut of disciplines put together. While some people think of Usability and UX as same things, many don't know about several other disciplines that intertwine with UX itself. Dan Saffer, appeared to take that first step towards summarizing that in a pictorial format. Below mindmap is a brief  summary of Dan's idea:

UX is Collective Genius

In a typical project, some of us blindly assume that UX is designer or creative head's responsibility. In reality, UX is not about solo genius. UX is about collective genius. One needs to think of users and their experiences while doing feasibility study, developers have to empathize with users while developing technical design, designers have to study if users would use this product and be happy about it, testers have to consider testing for specific pain points in the product that might drive users away and implementation / maintenance teams have to hold the customer to high standards while customizing the product for them. In short, each and every team member contributes to UX in his/her own way, based on the understanding they have, of the product and the users.
In that sense, UX is everyone's responsibility

05 November, 2015

Contextual Keypad - Engaging Users via Mobile Inputs



Engaging Users
In September 2015, I was at Los Angeles, California for STARWEST 2015 conference. I was staying at a hotel, stone's throw away from Disneyland. I took some time to attend Color Show at Disneyland. The first thing I spotted was the Mickey Mouse Wheel. I was mesmerized by the colors on the wheel. Walt Disney and his imagineers must have put lot of heart and soul into Disneyland. Otherwise, how would they think about engaging tourists by letting them control the lights on the wheel. This Mickey Mouse wheel displays a visual pattern to people gathered in front of it using different colored lights. Users can access 'Mickey Mouse Wheel' website and repeat the pattern on the screen. (Note that website URL was simple to be shared verbally over a microphone and free wi-fi was provided to everyone in that play zone.) Whosoever got the pattern right could control the lights on the Wheel for one whole minute. And this went on for  15 minutes before actual Color Show began. What I witnessed was thousands of tourists - both adults and kids playing this game on their mobile devices. Walt Disney must have accomplished his dream - of involving adults and kids alike in having fun, together.

App Usage Statistics
There are different ways of engaging users, yet very few organizations like Disneyland think about it and take the effort to put it to use. More engaging an app is, more users use the app often. 
The Nielsen Company reported that mobile users use up-to 37 apps per month as per last year's reports. Studies by Google in 2014 revealed that users use up to 8 apps in a day. This data only increases the pressure on App based companies to make their apps better.
Contextual Keypad for Touchscreen devices
Reading content on mobile devices is one thing. Accepting inputs from users and providing context-specific output is another thing. Whether users provide suitable values or not depends on how input fields are designed to capture inputs. In this article, we look at how to optimize mobile input experience by providing contextual keypads.
Consider a form with different input fields  like text, email, post code, phone number, IP address, Web URLs and so forth. By default, input type is set to 'text' for most part. When users enter data into these fields, an alphabetical keypad is displayed. If user has to enter an email address, he must go looking for '@' and '.' by tapping on respective soft key. 

Lets take an example of how mobile app 'Polar' handles contextual keypad on their registration form title 'Join'. 

Text Field
When a user taps on Username\Full Name field, an alphabetical keypad is displayed. Note that a button 'Next' is placed on the keypad, letting users know that they can move to next field on the screen, without moving away from the keypad. When user now taps on Full Name, the 'Shift' key is automatically activated (not captured in the picture.) This way, user doesn't have to explicitly tap on it to write 'Full name' in title case. 


Email
Suppose user taps on Email field to enter an email address, suddenly, there is a need for '@' and '.' fields, but they are not available on alphabetical keypad on many apps. Polar app displays an email field optimized keypad. Note in the picture how space bar key compressed itself to make way for '@' and '.'. 
Interestingly, when user taps on 'Password' field, alphabetical keypad returns without 'Next' button as 'Password' is the last field on the form. This is a good example of how keypads are displayed based on context.
 

Web URL

Placing focus on a web address field displays slightly different keys including '.', '/' and '.co.uk'. 

Numbers - Phone numbers, Post codes, Others
Numeric keypad is displayed for phone numbers. For post codes, a little different keypad is used.



How to test contextual keypads?
  • Make a list of all screens which accept input fields
  • Categories input fields into Text, Email, Password, Phone number and so forth
  • For each input field, review if correct keypad is displayed

A general rule of thumb is to use minimal forms on mobile apps. Better, if we avoid text inputs from users, as much as possible. Even better if contextual keypads are used whenever users are forced to provide inputs. If you want to improve the experience of your mobile apps, then code the app to display contextual keypads for corresponding input fields.

What's your experience with contextual keypads?