Users interact with organization through many channels, including the web, email, mobile and tablet applications, kiosks, online chat, and by visiting physical locations and speaking with a person. Users expect companies to provide a usable experience, regardless of the channel. For this reason, it's important to understand and design for each channel's strengths while creating the cross-channel user experience (often referred to as omnichannel design).
Our user research on Cross-Channel User Experience identified 4 key elements of a usable cross-channel experience:
The following article discusses why context-specific design is important in the cross-channel experience.
The Importance of Context in the Cross-Channel Experience
Users expect to be able to complete a desired task in the channel of their choice, and they want the experience to incorporate helpful and usable context-specific elements.
To create exceptional experiences that are optimized for the channel and context, it’s important for organizations to understand:
- users’ top tasks
- users’ typical setting or environment when they complete typical tasks
- the common channels used to complete each top task
- the strengths of those channels
Being aware of these details will help teams design experiences that include practical and easy-to-use context-specific elements that meet users’ needs and expectations. Offering a great user experience across all channels helps build trust and loyalty, and encourages users to engage with that same organization in the future.
For this reason, it’s important that companies and organizations understand context of use and optimize design for the setting, channel, and screen size.
Prioritizing Internal Efforts
Creating context-specific experiences requires time and resources. It’s nearly impossible to optimize every channel for every possible task, so understanding the activities typically completed on each channel will help teams focus design resources. This information is often contained in a user journey or experience map, which is based on qualitative (field research, usability testing, focus groups) and quantitative user research (web analytics, conversion rates, etc.).
It’s important to understand the users’ journey when completing typical tasks, as this helps teams visualize the steps within a common task, the channels used, and the best opportunities to make the experience context specific.
Understand Channel Strengths
In addition to knowing the typical tasks users perform within each touch point, it’s also imperative to understand and design for each channel’s distinct and unique strengths. Each channel has distinct and unique strengths.
The following are some examples of experiences that include context-specific elements.
Location-Specific Details on Mobile Websites and Apps
Mobile applications and websites should integrate location-specific details—such as the current weather, nearby coupons or discounts, or the distance to stores or physical locations, based on the user’s current location. Mobile users expect details to be location specific (and these details can also be made also available on desktop sites), which is why store finders and other locators should be especially prominent in mobile designs.
For example, allrecipes.com provides users with options to find nearby cost-friendly ingredients that are included in the recipe being viewed. The RetailMeNot app presents coupons and offers within a 5 mile radius of the user’s location. Users can show the coupon on their phones to the cashier so he can punch in the coupon code or discount. This experience is a seamless transition from the digital to the physical world.
Location-specific details on the mobile site of allrecipes.com and in the Retail Me Not app for iPhone greatly improve mobile experiences.
Mobile-Friendly URLs Included in Text Messages
It sounds obvious, but any URL included in a text message should send users to a mobile-friendly page. However, some organizations make the mistake of routing people to a page that is not designed for a small screen.
As shown in the AT&T example, below, a text message sent to a user prompts her to check out the website for information about upgrades, new devices, and to manage her account. Clicking the link brings the user to a mobile-friendly page.
A text message from AT&T links the user to a mobile-friendly page.
Compare this experience to one provided by Red Cross. The text prompts the recipient to take a 5-question quiz to see if he is prepared for an emergency. The link takes the user to a page that is not designed for a small screen. The text is tiny, touch targets are too small, and the design doesn’t use the full screen.
A text message from Red Cross links the user to page that’s not optimized for a small screen.
Transitional Aids when Moving from the Physical World to the Digital World
When requiring users to move from the physical world to the digital world, it’s important to consider how the physical item can help users transition from one channel type to another.
For example, MetLife provides a way to find additional benefit details by visiting the company’s website or calling the toll-free number listed on the back of the member’s insurance card.
MetLife’s insurance card includes transitional aids to help users move from the physical world to the digital world.
If users prefer to review plan details on the company’s website, the card lists a short, memorable URL. Users have a good chance of remembering the URL without referencing the card, because it’s not too long or obscure. Short URLs are important, because they minimize interaction cost: users don’t want to spend much time or effort typing them into a browser’s URL bar on a desktop computer, tablet, or mobile phone.
If users prefer to call the company for plan details, the card lists a memorable toll-free number. The toll-free number includes alpha characters, so the card also displays the relevant numeric characters to make dialing easier and quicker. If the phone menu is elaborate or a majority of users are ages 65 or older, it’s best to include instructions on how to get to the right department, as shown in the MetLife example, above.
(After distributing physical items with instructions for using a call tree, please don’t change the IVR menu.)
Immersive Tablet Design
When designing for a tablet, consider a more immersive experience that takes advantage of the large touch screen. Research has shown that people tend to use their tablet in the evenings at home, which is a time and place where they may be more receptive to an engaging experience.
For example, compare the NPR iPad application to the website. The NPR iPad app features news stories displayed in tablet-friendly, scrollable boxes. Also, the featured topics include arts & life and music, which are two categories that people may browse as they are relaxing on the couch or in bed at the end of a busy day.
The NPR iPad app is designed for those who are likely to leisurely view stories while relaxing or killing time.
The NPR website homepage is dominated by news items, mainly in a list format, which is appropriate for that channel. People sitting in front of a desktop or laptop likely want to quickly scan news items and get on with their day.
The NPR homepage is designed for the web reader who scans news headlines for interesting content.
However, designing an immersive experience should not trump the pure utility and ease of use of the website or application. For example, the CVS iPad app includes a virtual shop where users can browse for products. Unfortunately, most users prefer browsing and shopping experiences to follow best practices used on most ecommerce websites and apps, such as a standard navigation bar and a search box to locate products.
The CVS iPad app presents products in a virtual store. The design is cumbersome and frustrating for users.
Location and Inventory-Aware Kiosks
In-store kiosks can provide users with location and inventory information to help goal-oriented shoppers get in and out of the store as quickly as possible.
For example, a shopper at Babies“R”Us interested in quickly picking up a registry item could locate the registry, find out what items hadn’t been purchased yet, and see the aisle where the item was located. A printed copy of the registry was provided so the shopper could refer to it while looking for the item.
The item the shopper wanted to purchase was located in aisle F1, as shown on the printed registry.
Each aisle was clearly marked with a letter and number (left image). The shopper found the item she was looking for (right image) in F1, which was the aisle indicated on the printed registry.
As customers get used to having this information available to them, they will expect details, such as location within the store, to be available on all channels. Unfortunately, this information wasn’t available when viewing this same registry on the Babies“R”Us website.
Inventory details would be a nice addition to the in-store location, especially for those who don’t want to traipse through a large store just to find out that the item they wanted to purchase is out of stock. Some stores, such as Home Depot, offer this functionality of their website. However, they are one of the very few sites that do.
Context Specific: 1 of 4 Recommended Cross-Channel Characteristics
Incorporating helpful and usable context-specific elements creates an exceptional user experience in a world of competing channels, devices, and screen sizes. In order to focus design efforts, teams must understand the common tasks completed by users within each channel. This will help identify the best opportunities for creating channel-optimized experiences that will build user loyalty and differentiate the organization from competitors.
In addition to being optimized for the channel, omnichannel experiences must be consistent, seamless and available. Our full day course on Scaling User Interfaces covers such issues further.