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?

How to Test User Experience

This article was originally published on TechWell.

User experience (UX) involves the range of emotions a user feels while using a product or service. The product or service may have amazing features and capabilities, but if it fails to delight the user, the person will hardly use it. United Airlines is setting an aspirational target for its customers' UX. It's striving to create an in-flight experience that is “legroom friendly," "online friendly," and "shut-eye friendly.”

Understanding how users feel involves becoming aware of man-machine interactions. This knowledge then can be used to improve the overall user experience. Sadly, many of those who talk about UX as though it’s a set of tools and approaches often forget about the human side of products. A range of tests can be performed while a user is engaging with a piece of software to ensure that the user is never forgotten at any point of the development process.

Emotional Response Test
Users don’t have scripts to follow in one hand while using a product or service in the other hand. By probing users and recording their emotions, ranging from amusement to annoyance, UX teams and testers can gather invaluable information about what makes a product great—and what makes it a nuisance.

User experience professional Robert Hoekman Jr. has a list of tenets on the value of user experience strategy. One of the tenets is "A user’s experience belongs to the user. An experience cannot be designed. It can, however, be influenced. A designer’s job is to be the influencer."

First Impressions Test
What can you tell about people or websites in a short time? A lot. Tests like the Five Second test show that student evaluations given after the students are shown only a few seconds of video are indistinguishable from evaluations from students who actually had the professor for an entire semester. Additionally, visual appeal, navigation, and click tests give inputs about users’ early impressions of products and websites, which can be used to understand what makes a delightful user experience.

User Pain Points
What truly delights users is implicit most times. Bill Gates was absolutely correct when he remarked that unhappy customers are a great source of information for learning about UX. You can gather user pain points from complaints and warnings by talking to users more often and by observing them using websites and software, and then recording their emotions. These days, it’s easy to get customer feedback at the drop of a hat through social media.

As Steve Jobs said, design is "not just what it looks like and feels like. Design is how it works.” Testers can use a variety of heuristics to tell the UX team what does and doesn’t work for users so that the entire project team knows exactly what gives their customers the greatest experience possible.

How do you test User Experience?

Testing for Errors

This article was originally published on passbrains blog HERE.

Great designs transform the way we live and we all act as designers in our own simple ways. When we rearrange objects on our desks, the furniture in our living rooms, and the things we keep in our cars, we are designing. Through our designs, we transform houses into homes, spaces into places and things into belongings. While we may not have any control over the design of the many objects we purchase, we do control what we choose to purchase.

Faulty Designs

A year ago, at least 40 people were killed in a tragic accident involving a private Volvo bus on the Bangalore-Hyderabad National Highway. The incident happened when the bus was reportedly trying to overtake a vehicle at high speed and hit a culvert and caught fire. Before the passengers could realize what had happened, they were charred to death. Investigations revealed that this accident was a result of poor design and absence of safety measures in the bus.

Faulty Designs

The point here is that design can play a key role in making or breaking products. Volvo bus was never designed to hit the culverts nor was it tested for that. However, the driver ended up hitting the culvert. If faulty designs are not tested in multiple contexts like these, it can wreak havoc. Faulty designs are a result of inaccurate mental models perceived by designers and users contrary to system images of products that exist in real. Let’s take a brief look at what mental models are and how they can help us in creating better designs that handle error situations effectively. 

Mental Models

A mental model is an explanation of someone's thought process about how something works in the real world. It is a representation of the surrounding world, the relationships between its various parts and a person's intuitive perception about his or her own acts and their consequences. Mental models can help shape behaviour and set an approach to solving problems (akin to a personal algorithm) and doing tasks (from Wikipedia).

Mental Models

According to Don Norman, there are three aspects to mental models:

• Designer’s model: The model present in a designer’s mind
• User’s model: The model a user develops when he sees/attempts to operate the system
• System image: The way a system operates, the way it responds, manuals, instructions etc.

Every designer builds a model of the system or product while the user will have a mental model of his own. Any inconsistencies in these models lead to errors. But errors should be easy to detect, they should have minimal consequences, and if possible, their effects should be reversible.

Testing for Errors

While speaking, we can correct ourselves if we stumble or mess up. Products and systems often do not correct themselves because they are only as intelligent as the people who built them. This leads to “slip” which is the most common error – when we intend to do one thing and accidentally do another.

Well-designed products allow us to detect slips through feedbacks. For example, in a delete operation, it is good to ask for a confirmation to verify if the user wants to proceed. If that operation is irrevocable, it is better to warn him of the consequence and take his consent. A general heuristic is to never take away control from the user.

Recoverability of errors is a key aspect in designing products. When errors do occur, the following should happen:

• Give visibility to the user of what was done
• Do/Show/Tell the user what went wrong
• Indicate how the user can reverse unwanted outcome
• If reversibility is not possible, indicate this to the user

  

Error Messages Coverage

Error messages coverage can be achieved at multiple levels:

Errors-based Scenarios Testing

Testers could get a list of all error messages programmed into the product and design scenarios for each and every error message

Negative Testing 

Negative testing is not the same as error messages testing. In error messages testing you start with known error handling and test it. This is essentially "positive" testing for error handling code. In negative testing, however, you think differently. Negative testing means to "negate" required conditions. In other words, you consider all the things that the programmer/designer requires for his code, then systematically block those conditions. Example: the program needs memory, so reduce memory

Recoverability Testing Matrix

Every error message needs to be tested for Recoverability. 

• Visibility to the user of what was done
• Do/Show/Tell them what went wrong
• How the user can reverse unwanted outcome
• If reversibility is not possible, indicate to the user what needs to be done next

Some Examples

Failure Usability Heuristic by Ben Simo

Error Elimination Testing by David Greenlees

Feedback Parser by Santhosh Tuppad

** This article is inspired by Don Norman’s book “The Design of Everyday Things”

** Negative testing input was provided by James Bach

Regards,

Pari

Supportability Experience & Customer Touchpoints Testing

This article was originally published on passbrains blog HERE.

eCommerce industry sector is burgeoning in India with new players starting shop every now and then. But what is it that sets Flipkart, India’s largest online retailer, apart? Flipkart identified 2 key problems in the eCommerce world – delayed delivery and poor customer service. They fixed these problems and made online shopping a delightful and memorable experience for their customers. There is no surprise why Flipkart is being touted as a competitor of Amazon.

Applying this analogy to the testing world, while testing a product, more often than not, testers are focused on which flow the user executes or how the user interface looks. What goes missing is the level of attention and detail to support processes like call verifications, email communication, online chat, service request processes and other services. Does a user receive a welcome email upon joining? Does he get a verification call from the company? Do they call the user if his need is not addressed beyond a certain time? How is a complaint from a user handled? This describes the supportability experience of the product.

Customer Touchpoints

A customer touchpoint describes the interface of a product/service with customers/users before, during and after a transaction (adapted from Wikipedia). Several times, a user is not just unhappy with the product/service, but customer touchpoints too. As a user, think of yourself. How many times did you stop yourself from visiting that supermarket whose attendant didn’t pay attention to your questions? How did you feel when you were the first to enter a pharmacy, yet the pharmacist served customers who came after you? Supportability factors go a long way in defining customer touchpoints and how they feel about the product and the organization in general.

Supportability Factors

What are the factors creating product loyalty? Are they in the product itself? Price? Color? Quality? Quantity? Others? Great user experience is a sum total of all the above listed aspects including supportability factors listed below:
• Calls / SMSes
• Email
• Chat
• Service Requests
• Feedback
• Field Visits

If a user calls customer care and is put on hold for 30 minutes, he would not like it. If he gets 20 messages a day on his phone after buying a product, he would be annoyed. If an email complaint from the user is never acknowledged or responded to, he would never complain again to the organization. He would complain in public over the internet by writing his story of poor experience, with a wider reach and visibility and hence, discouraging other users to buy the same product/service.

If an organization provides a chat channel but a support personnel is not available to support customers, this damages the reputation of the organization. From time to time, users might raise service requests (or tickets) to solve problems on the products they are using. If the tier1 and tier2 analysts don’t know anything about the service requests they handle, it becomes a showdown of sorts. How are user feedbacks handled also lends credibility to the organizations’ care model for the users. When a field service technician from the organization visits the user’s site to fix the product or replace it, user’s experience with the technician goes a long way in defining whether the user will remain loyal or not.

How to measure Customer Touchpoints?

Supportability factors are the key to determine whether customer touchpoints are good or bad, if the products are making a good impact or not or if the customers/users are sticking around or saying goodbye. Products have to be tested for supportability factors to measure users’ experience at several touchpoints. How do testers test for it? There is a way.
Testers can come up with a survey questionnaire that asks questions about different support factors. Let’s take an example of the activation process for a new network connection on a cell phone. User needs to call the call center, provide details to them and get the network activated which usually takes up to 24 hours in India. We could come up with a list of questions like:

Supportability Rating Matrix

These questions might seem unrelated to testing but they are testing related in reality, because if we don’t test the processes in the organization that serve products and product users, excellent products might fade away in a short time period. Apple became the Apple it is today because of the time and money they spent on every little detail associated with the product – be it the product itself or the packaging, the color of the product, support experience and so on. It is becoming increasingly important to create good customer touchpoints because users are no longer looking just for products that serve their needs, but also for engaging experiences while using the product.

What customer touchpoints have you had trouble with? Share your experiences.
Regards,

Pari