Minimize Errors in Mobile App Forms Using Interaction Design Patterns

Majority of errors on mobile apps occur on input forms. Users can input information with utmost ease and flexibility, if only input forms were designed better. In an old post ‘Contextual Keypad – Engaging Users via Mobile Inputs’, I highlighted the need for displaying context-sensitive keypad based on the input field type – alphabetic, numeric, email, password and so forth. A little after that, I found Luke Wroblewski’s work on design patterns that helps reduce form errors significantly. In this post, I will highlight Luke's three interaction design patterns that help reduce errors form fields:

Inline Validation

Inline Validation provides real time feedback as users enter values into corresponding fields. Let’s consider an example. On Dashlane iPhone app, if a first time user creates an account, the password field has a placeholder text, ‘Enter a strong password’. As user types the input, the app provides real time instructions on what rules the password field should comply with. This helps users to enter password without forgetting to enter a specific value or making a mistake.

Password Hints on Dashlane mobile app

Luke Wroblewski’s team ran a study by comparing forms with inline validation with those which do not have any inline validation. The forms with inline validation had 42% completion rate and a 22% decrease in errors. This shows how a small step towards good user experience helps apps succeed in the real world.

Input Types

Specifying input types helps reduce errors by many folds. One of my old posts ‘Contextual Keypad – Engaging Users via Mobile Inputs’ addresses exactly this topic. Consider ‘Reset Password’ feature on Ctrip mobile app.

Reset Password behavior on Ctrip mobile app

If user taps on ‘Email’ input field, three things can happen:

1. The keypad displayed is not email-friendly keypad. For user to search and locate ‘@’ symbol, he has to change the keypad where ‘@’ symbol is present (note that the keypad complexity increases further if many non-English languages are involved)
2. User might end up typing his first name or user name or the email id before ‘@’ symbol (i.e., if the email id is Parimala@gmail.com, user might enter just ‘Parimala’)
3. Since there is no real-time validation, user assumes that the given value is correct and taps on ‘Reset password’ button. Boom! An error, ‘Invalid Email: Please provide correct email address’ is displayed.

As you see, changing the input field type to display ‘email’ keypad could avoid user to perform 1st step mentioned above. It might be good to place place holder text 'user@example.com' inside the email field, so user becomes aware of the format. One might ask, ‘what kind of a user would enter invalid values despite knowing it’s an email field.’ It is a valid question. Yet, time and again, it has been proven that many users would do that. As Don Norman says, ‘An error that can be made will be made.’ Hence, we need to validate checkpoints in right fashion, to reduce such errors, if it’s in our control.

Input Masks

Consider a phone number field. Depending on your country, country code, changes. In such a case, phone number field would have 2 components: Country Code>Phone Number>. In below screenshot, can you guess if user needs to enter phone number with country code or not? It’s hard to tell. This could lead to errors.

If formats for input fields are such a big deal, why aren’t we taking them seriously? In ideal scenarios, it is advisable to insist users to enter input values in specific formats by implementing input masks.

Input mask is a mechanism by which one specifies the format in which the input will be accepted. For e.g. Phone number can have 2 input fields: Country code and phone number, as displayed below:

Whatsapp has clear demarcation of Country Code and Phone number

Similarly, date fields, credit card fields, social security number, bank account number and others can use input masks. 

Input masks not only help reduce errors, but also guide the user to enter input in the right format.

Input masks can be taken a step further by revealing the input pattern at the beginning itself. Consider the screenshot below. User would enter a 16 digit card number and keep checking constantly at your credit card and the field just to ensure you have not missed any numbers (Note that the credit card will have space in between every 4 digits). Instead if the below card number field could show 'XXXX-XXXX-XXXX-XXXX', it would be helpful to the user.

To summarize, reduce errors by:

1. Using Inline Validation
2. Specifying Input Types and
3. Using Input Masks for formatting and accuracy

Have you thought about reducing errors on your mobile app forms lately?

Can Error Messages have a Personality?

Murphy's Law states that "Anything that can go wrong will go wrong". While things go wrong, adding a little bit of humor to error messages can lighten up the environment, at least for that moment. Given this context, organizations have started to build error pages with enchanting personalities.

The World of 404s

Consider a common case of 404 Error. Huwshimi has figured an interesting way to display 404 error pages. One of them is this:  “A ninja stole this page. You must return when the moon has friends and the fox is borrowed.”

http://huwshimi.com/ 

Frye/Wiles Creative Agency, displays the same error using the metaphor of a missing bird.

Frye/Wiles Creative Agency

Mobile App Hipmunk uses their mascot to deliver error messages in a soothing way. When hipmunk app stops responding due to possible internet issues, this is the error message: "Whoops! We can't reach Hipmunk. Please make sure you're connected to the internet, or try again later."

When the app needs additional information, the app asks for it. In below screenshot, the app needs potential travel dates before displaying results. This is asked in a nice way, by mentioning that its difficult to show results based on existing criteria and hence, would need travel dates to show appropriate results.

One anonymous marketer at Everyday IX once, quoted,

“Imagine if all products treated digital communication as a conversation with a real human being that possesses thoughts, goals, and emotions, not just the recipient of a conglomeration of technology restraints? It wouldn’t cure all design ailments, but it would certainly soothe frustration along the way.”

As quoted above, An error message is a sensitive conversation the product initiates with a human being, at a time when something has gone wrong, sometimes, terribly wrong. At such a point in time, error message need to be emphathetic, information and helpful. Of course, error messages are life-less and non-human. Yet, they can be made human in the way they work. In short, error messages need to have a strong personality - of being a torch bearer to the user. 

Do your error messages have  a lively personality?

Facilitating Better Interactions using Skeleton Screens

Several years ago, I was performing a funds transfer operation online, for the first time. Until that day, I was a cheque-writing person at heart. Immediately after the transfer on a prominent bank website, the web page blanked out. I was nervous if the transaction had completed or not. The page remained blank for 2 full minutes. I panicked. I clicked on 'Refresh' icon, as if luck was desperate to be on my side. I was slapped with a message, "Don't be impatient. Please wait...". It was a painful moment.  Why was I scolded for feeling nervous about something very important while the bank website hadn't taken any pain to tell me what happened with regard to my transfer. 

A few months later, I noticed a message pop-up that read, 'We are processing your payment. Please wait. Do not click on the "Refresh" button or close the window.' This message compensated for my hurt, in the past. I thought, this time, luck probably was on my side.

Perennial Spinners

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

1. It will take a while
2. They need to be patient as they wait

Thus, the progress indicators and spinners were born. If you are a frequent user of mobile apps, you have seen the perennial spinners, loading for eternity at some point in your life. You may have seen them innumerable times. Sometimes, you are cursing the app; sometimes you are cursing the network and at other times, you are cursing your own self and taking the blame for things that don't work as per your expectations (False-Blame).

As this trend of Progress indicators/spinners, 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.

Skeleton Screens

Recently, I noticed this screen while accessing Facebook app on my phone. This screen indicated that the app is loading the screen real slow, BUT bit by bit. While the app worked this way, it made sure that each UI element's 'skeleton' was loaded beforehand and then content was loaded one after the other in a lazy loading manner. I didn't know what to call it at the time, but a little later, I found out this is called a Skeleton Screen. 

"A skeleton screen is essentially a blank version of a page into which information is gradually loaded."

~ 

Luke Wroblewski

A skeleton screen gives a visual cue that content is loading one after the other into each UI element area. It has been found that skeleton screens play a major role in the perception of users who appear to think that these are not as slow as spinners or progress bars. In fact, many users seem to love them for its look and feel. More power to Skeleton Screens.

Have you used skeleton screens in your products? Share your story!

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.