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. 

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.


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?

20 October, 2015

Customer Touchpoints

This article was originally published on TechWell.
When testing a product, testers often are focused on which flow the user executes or how the user interface looks. It can be easy to neglect how support processes such as call verifications, email communication, online chat, and service request processes function. Does a user receive a welcome email upon joining the site? Does he get a verification call from the company? How is a complaint from a user handled?
These are all examples of customer touchpoints: the interface of a product or service with users before, during, and after a transaction. Touchpoints go a long way toward defining customer experience and an organization in general.
Key touchpoints include:
  • The organization’s website
  • Its brick-and-mortar store
  • Calls and text messages
  • Email
  • Chat channels
  • Service requests
  • Feedback
  • The field service team
How user feedback is handled also builds credibility to the organization’s care for the users. If an email complaint from a user is never acknowledged or responded to, she likely wouldn’t try contacting the organization again. Instead, she would complain online in a forum or over social media, sharing her poor experience with millions of people and possibly discouraging others from buying the same product or service.

Measuring Customer Touchpoints

Products have to be tested for different touchpoints to measure users’ experiences. Consider an example where the user needs to call a call center in order to activate a new cell phone number. Testers could use a questionnaire with queries such as:
  • How long did it take to get to the call center analyst?
  • Was the analyst courteous while communicating?
  • Did the analyst take corrective action appropriate for the situation?
  • How did you feel about the entire interaction?
These questions might seem unrelated to testing, but it’s just that instead of testing the product, they’re testing the process. And if we don’t test the processes that serve our users, the products themselves will fade away.
Another technique to measure customer touchpoints is recording calls and emails from customers. The traditional approach is to measure response times in seconds or minutes, but this leads to analysts responding to customer calls or emails in the quickest possible time rather than focusing on actually solving problems. Many call recording procedures now are monitored for studying the patterns of calls and improving the effectiveness of resolving customer issues.
The goal is always to provide users with a delightful experience, but this can be especially important when it’s in response to an initial customer complaint. Bigbasket.com is one of the leading online grocers in India. Bigbasket has a no-questions-asked return policy and compensates a customer every time it is not able to deliver as promised, resulting in high customer loyalty and repeat business.
It is becoming increasingly important to create good customer touchpoints because users are no longer looking just for products that serve their needs—they also want engaging experiences while using the product.
I presented the tutorial User Experience Testing: Adapted from the World of Design and the session How to Design a Custom Mobile App Test Strategy at STARWEST 2015, between September 27–October 2 in Anaheim, California.

01 September, 2015

Wireframes Testing - Part II [How did I do it]

The first entry in this two part article talked about the fundamentals of wireframes testing and its advantages/disadvantages. In this entry, I will touch upon my journey with expert review method of testing wireframes.
Expert Review
Expert Review involves a subject matter expert, reviewing the wireframes and providing feedback, from the gamut of his/her past experience.
High Fidelity Wireframe
A wireframe which is quite close to the final product, with high level of detail and a good indication of the final proposed product with good aesthetics and functionality is high fidelity type.
Consider a high fidelity wireframe in the picture above. This wireframe includes placeholders for tabs, hyperlinks, images, search box, breadcrumbs and others. In short, this wireframe contains the layout, navigation and hints on how the product might work or behave.
Low Fidelity Wireframe
A quick and easy translation of high-level design concepts into tangible wireframes constitutes a low fidelity wireframe. In the above picture, placeholders are defined at a very high level, providing information on layout and structure of how the product might appear on low fidelity wireframes.
Problem Context
An year ago, I happened to test high-fidelity wireframes for a web-based product used by call center folks to sort incoming service requests and process them into appropriate queues. The product sounds simple, until the time you hear that the analyst has to pick each service request, convert it into a format that another automated system can understand and push it into different queues depending on the type of service request. Each analyst has to process at least 100 per day and the current system was too un-friendly to let analysts work productively, without making mistakes. Hence, the need for re-design!
In their quest to help analysts use the product better, the development team wanted feedback on the wireframes they had developed, which they hoped would fix some of the challenges the analysts were facing, if not all.
Wireframes Testing using Expert Review Method
High Fidelity wireframes have information architecture and content strategy, fairly sorted out, although wireframes are early work products. This means that in addition to layout and navigation, placement of information and presentation of content are described to good degree that is good enough to make a call on whether the product conveys what it is built for.
 A low fidelity wireframe above has few placeholders within the layout. Once can provide feedback only on the structure of the layout, positioning of placeholder elements and possibly the titles used. Beyond that, this is a pure skeleton of how the product looks like and has little scope for review.
On the other hand, a high fidelity wireframe provides better scope to review not just the layout, but a major part of the product itself.
User Interface Elements
Validating the need for UI elements is extremely useful while reviewing wireframes. This is when, one can make choices of selecting sliders or pickers over dropdowns or accordion views, based on the context of usage or make other appropriate choices. UI elements include:
  • Landing Screen (Look & Feel)
  • Header / Footer information
  • Title (Browser Title and Page/Screen Title)
  • Labels and other Tech Jargon
  • Logo / Buttons / Icons
  • Images
  • Text Fields
  • Settings (Login / Sign In / Logout)
  • Date / Copyright Format
  • Placement of Scrollbars, Dropdown menus
  • Accordion Views
  • Others
  • Buttons / Links as visual cues
  • Workflows
  • Presentation
  • Alignment
  • Size and Style
  • Existing functionality – features that depict existing functionality
  • Missing functionality – features that may be missing, although, highly relevant to the context of the product.
Above information may or may not be available to full degree in the wireframes. Depending on the type of wireframes provided, it would be good to review them and provide appropriate feedback. Feedback can be provided at two levels:
For each item (element based feedback. For e.g. a particular dropdown may be positioned wrongly on the landing screen)
At a product level (Navigation could be streamlined better w.r.t ‘Translation’ feature)
Challenges I faced
One of the biggest challenges with reviewing wireframes was the fact that transitions, interactions and other subtleties, are not visible and need a further level of probing/questioning to get clarity. Although, at wireframing stage, we might not worry much at this stage, it always helps to outline interactions and behavior of the product early on. At each screen level, I would put a list of all interactions a feature might have with other features and design how interactions can happen. This way, many flows can get sorted out upfront.
Wireframing, either on paper or using software is much cheaper, faster and offer better benefits like portability and accessibility compared to a working prototype. Today, ‘Go-to-market’ cycles are shrinking with lesser time to design products. This means that spending several man years on programming an interactive prototype is a costly affair. A key deciding factor to create an ecosystem that believes in wireframes begins with creating great wireframes that communicate well and iterate on them based on inputs from different kinds of users.  
Wireframes have personally helped me gain design insight and find usability problems early; which means we save *some* time, *some* effort and *some* money that might have been spent on building *big-failure* products.
How have wireframes helped you?

10 August, 2015

Wireframes Testing - Part I

A wireframe is a rough skeletal guide for the layout of a website or an app, done with pen/paper or using wireframing software.  Sometimes, wireframe is also known as a screen blueprint.
Wireframes are usually created to understand the layout, interface, navigation and functionality within the product and how they are stitched together. They are low-fidelity work products; this means they lack graphics, color, and other elements of visual design, for most part. 

Why Should You Test Wireframes?

Frank Lloyd Wright, once quoted, “You can use an eraser on the drafting table or a sledgehammer on the construction site.” Wireframing is one of the most valuable tools for usability testing, early in the cycle. A lot of problems can be fished out, early on, even if users can play around with skeletal wireframes. Early information in turn helps teams fix gaps early on, allowing them to build better products.

How To Test Wireframes?

Testing wireframes is an age-old concept, employed by very few organizations. Before the explosion of startups, people often chucked everything in SDLC to create a working product that can bring money quickly. However, with concepts like Kanban, Lean and other methodologies, having a minimal viable product with good UX design became an obvious ask. This is where some teams, started getting their wireframes tested. There are three ways of testing wireframes:
1. User Testing
In this method, uses are invited to test interactive/non-interactive wireframes and their feedback is captured either by asking them a series of questions about the wireframes or designing a few tasks they can execute and provide feedback.
2. Remote User Testing
This method is similar to user testing method, except that this is not done face to face with users, but using video conferencing and other online collaboration tools.
3. Expert Review
This method employs a subject matter expert to review/test wireframes and provide detailed analysis.

Wireframing Tools

Wireframes can be hand drawn sketches on paper/whiteboard or they can be produced by using wireframing software – some of which are free.
Axure is a desktop app that runs on Windows and Mac. It has powerful features not just to create low-fidelity wireframes, but also highly interactive mockups.
Balsamiq is a traditional wireframing tool with a focus on “rough sketches” that are close to hand drawn drawings.
The Pencil Project
Pencil is free and easy to learn with creating simple sketches
There are many other tools in the market. One has to pick a tool that suits their context. In recent times, Axure has become a go to tool for creating ‘walking wireframes’ that are dynamic by design and mock real functionality, interactions and navigation, all in a single place. Axure goes a step ahead in creating high-fidelity wireframes / mockups depending on the target platform – be it web, or mobile.

Advantages / Disadvantages of Wireframing

  • Communicate innovative design ideas quickly
  • Facilitate early feedback mechanism to clients
  • Provides an opportunity to fix critical bugs/problems in wireframes early in SDLC
  • Easy to make changes to wireframes, as compared to making them on a live product
  • Wireframes is limited to the power of the tool used
  • Interactions within wireframes may not be self-explanatory at all times
  • Poor collaboration during wireframing stage with corresponding scrum teams can destroy the benefits of creating wireframes in the first place

Design First, Then Prototype Approach

In the olden days, wireframes or other prototypes were conceptualized first. Then design ideas would come into play on what design elements needed to be added to the product. Some tools would have existing limitations hence limiting the implementation of unique design ideas. Today, better designs are more engaging, playing a key role, in areas like, preventing user abandonment and so forth. Having said that, it is important to backtrack and Design First and later figure out how to create wireframes or prototypes as per the design.
The next entry in this two part article will touch upon expert review method of testing wireframes and how it benefits teams.

23 July, 2015

heuristic evaluation - What's That?

A heuristic is a fallible means of solving a problem. A heuristic evaluation is a method where a usability evaluator helps to identify usability or user experience problems in a product, against an existing list of widely accepted usability heuristics. heuristic evaluation is also called as expert review in some organizations.
Many have developed heuristics in other spheres like testing and development. The earliest usability heuristics were defined by Jakob Nielsen and Rolf Molich in 1990, in their paper 'Improving a human-computer dialogue', which at the time, was mostly targeted towards web and desktop products. Over time, product ideas have evolved, technologies have become better and complex hence changing the way usability is done. heuristic evaluation followed suit. 

How is heuristic evaluation done?

A simple heuristic evaluation process includes below steps:
  1. Identify the usability expert (in-house or external) who will review the product against a defined set of usability heuristics
  2. Define the scope for evaluation? Is it for specific features or just, for newer features or for entire product
  3. Define the environment in which evaluation needs to be performed? (live product location / test environment / sandbox)
  4. Direct usability expert to perform evaluation and fill an evaluation form highlighting each and every usability problem encountered at a task level.
Once the evaluation is complete, the results must be analyzed with corresponding stakeholders who might want to make appropriate decisions with respect to the product based on usability problems identified.

Usability Report

A typical evaluation report contains usability findings and detailed explanation of the problems encountered. In my experience, when such reports are floated across technical teams to fix these problems, they are left wondering about what they should do. For example, a usability problem like "I was unable to navigate to 'Home' from 'Settings' screen" doesn't really tell anything to the developer on how to handle this problem or provide a fix (not until he delves deeper into it). Hence, it is good to insist on the usability expert to provide feature recommendations, in addition to usability problems. This means, that for each usability problem identified, sufficient screenshots, investigation notes and subsequent recommendations (of what exactly needs to be done to fix the usability problem) are also recorded. In some cases, usability experts even include best practices of competitor apps to advocate their findings better. 

One evaluator is NOT a user

Arnie Lund, once said, "Know thy user, and you are not thy user". For the same reason, usability findings found through heuristic evaluation often get discounted as 'some user's opinion that doesn't matter.' There is an additional risk of the evaluator being someone with 'not so normal' thoughts, and perhaps a wrong representative of the average user. This leads many to frown upon heuristic evaluation.
In fact, Jakob Nielsen, in his research, found that one evaluator is no good. According to him, it is good to have at least 3 to 5 evaluators who might end up finding most of the usability problems in the product. This approach also helps in fine-tuning the findings, to actually differentiate between low hanging fruits and really bad usability problems. The results are then aggregated and evaluated by an evaluation manager, who is different from the main evaluators. The impact of such a heuristic evaluation is much better than the one, done by single evaluator.

A Complimentary Approach

On few e-commerce projects, I applied a complimentary approach. While one/two evaluators provided feedback on the product, a separate team performed user testing with 15-25 users. At the end of user testing, findings from users were collated to make a 'Usability Report.' Results of both the reports would be compared by an evaluation manager who would then identify feature recommendations based on inputs provided in both reports. This approach worked really well for startups.

Expert Reviews

The success of heuristic evaluation / other complimentary approaches is defined not just by the process, but by the strength of the heuristics involved, type of information captured and the way in which it is presented to stakeholders. This is why, heuristic evaluation isn't something that can be done, 'on the fly' by anyone. It needs to be performed by experienced practitioners who are aware of their biases and present unbiased findings. Such evaluations performed by usability experts are called Expert Reviews. 
In short, heuristic evaluation is done by evaluators who refer to specific heuristics and evaluate the product against them. Every usability problem found using this method is mapped against an existing heuristic based on which the evaluation was done. Expert reviews, on the other hand, are performed by subject matter experts in an informal atmosphere using a list of heuristics that may not be well-defined at all.
Update (4th Aug 2014)
My teacher, James Bach was kind enough to point out how Heuristic Evaluation is different from heuristic evaluation and throw pointers around few gaps in my understanding of heuristic evaluation. I have updated this post based on my improved understanding of the same.