Good Digital User Experience: Part 1

Even though user experience is probably one of the most overused terms in the digital world (yours truly being one of the guilty), I often notice that it’s often used as a cooler or trendier substitute for “design”. While great design is certainly critical in the digital world, there is so much more that happens before and after a user decides to take her first swipe at an application. It’s these befores, afters, and in-betweens that make the (user) experience – an experience that requires the following 5 essential ingredients:

1) Clarity

2) Emotional Connection

3) Engagement

4) Usability and Value

5) Indispensability

In this post, the first in a series that will continue in the upcoming weeks, I’ll be looking at the role that the first of the 5 ingredients, clarity, plays in user experience.

Clarity

When a user comes across a new product, one of the first things she’ll do is seek to understand it. Questions new users typically want to know are:

What is this/what is it for?

Who is it for (is it for me, my child, my spouse, etc.)?

How does it work?

How much will it cost me?

What makes this product credible?

To answer these questions, a website or application needs to communicate this information in a clear, concise, and easily accessible manner. The less concise the information, or the more the information is hidden, the greater the chances that the user may abandon the site or application.

Websites

The Betterment homepage is a good example of basic clarity applied to a website. The tagline, “we manage your investments so you don’t have to”, identifies the product’s purpose (liberate you from the burden of managing your investments) and who it’s for (anyone who is currently managing their own investments). The use of tablet and smartphone images communicates how it works (on mobile devices), while the “Try It Now” button gives the user the ability to dig a little deeper and test the product.

Betterment Homepage

While the pricing information is not readily available on the homepage, the “Pricing” link in the top navigation area tells the client that it is a paid service.

It’s important to note that in this scenario the user has been able to get all this information without having to scroll down the page. It is important that the user’s first view of a website provide as many answers as possible without the need to scroll or sit through a slideshow (less critical information should be placed further down the homepage).

The only item not yet answered is: what makes this product credible? This information is found further down the page, in the press section:

Betterment Press

Of course press reviews aren’t sufficient for establishing credibility (they don’t always carry much weight in the minds of all users). But the goal here is to present a quick overview and not overwhelm users. So for the purpose at hand, the press reviews do the job.

Other items like case studies and customer testimonials (especially videos) also work well in establishing credibility. But these can sometimes be quite lengthy and detailed, and are better suited for other sections on the website.

A word of caution though: clarity isn’t just about what is displayed. How it’s displayed is also essential. Take for example, the PiktoChart homepage below.

PiktoChart homepage

The images used convey the fact that the product has something to do with graphics. The pricing button is readily available to inform the user that it’s a paid service. The “Create For Free” efficiently communicates to the user that they can try out the product before making a financial commitment. Overall, the site communicates a good number of the critical pieces of information.

However, the information about what the product does and who it is for is lost as a result of the fact that it is located underneath the phone number, which is placed in big, bold font. And it’s a shame that the description is hidden because it’s quite clear and succinct:

Piktochart helps you to create infographics, share and get results in 3 easy steps. No design experience required

This is wonderful information that could have been highlighted properly, instead of focusing on the contact number. While the choice to focus on the contact number may have been made to show that they are client-focused and available to provide phone support (all very important for overall client satisfaction), for a first time visitor this detail will be less important than understanding what the product does.

Applications

When a user interacts with an application for the first time that means they already know the pricing information (they’ve either downloaded the free version or paid for the full version). They probably have an idea about who it is for (either from information on the product website or an app store). However, they still need to know how the application works and what it can do for them.

A popular and efficient way to do this is through the use of a slideshow that appears before (or after) the user logs in, as shown below with the Evernote Food Android app:

IF     IF     IF

Another option is to provide a walkthrough that highlights only the key functionalities, as seen in Shazam’s iPad app:

IF

Walkthroughs have the advantage of allowing the product design/development team to choose one of two options: a passive walkthrough (such as in the case above) where items are highlighted for the user, or an interactive walkthrough, where the user is required to use the application and perform some of the basic actions of the app. That’s the case with the Android version of Umano, where the user is asked to choose news categories that are of interest to them. The user can always select categories at any time, but by doing it as part of the walkthrough they not only understand how the app is organized, but they are up and running with content that they can start using:

Umano step 1     Umano 2     Umano Step 3

Of course in-product clarity doesn’t end here. The overall design and interactivity must be fluid and logical, and in some cases, it’s necessary to drop hints progressively, as the user interacts with the application. But these are all part of the 4th ingredient (Usability and Value) which I’ll cover in another post.

Leave a Reply

  • Best read while sipping
    a cup of tea...
  • My Visual Brief
    Our web-based tool to help clients communicate more effectively with the designers about their aesthetic preferences and likes.
    Check it out
  • twitter rss