What makes a good User Experience?

☆ Make it Actionable

In each application, the user interface (UI) must have a very clear goal or action. The UI on a screen should lead the user through each action quickly and easily.

As you walk through your user’s journey and understand their needs every step of the way, you can appropriately select which features or actions you can place at which stage. For instance, Medium allows users to add comments to each paragraph as they are reading the piece, whereas the traditional style of reading content and reacting to it usually consisted of adding comments at the very end of a piece, thus making it hard for a reader to react spontaneously to a specific phrase or sentence they have come across.

Medium.com: In-line highlighting and commenting feature.

It is important to enable users to take actions, but these actions would not happen if users are not informed or aware of the possibility of taking such action, through affordances. Author, speaker, and design strategy expert, Don Norman explains affordances:

…the term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used.

In simpler words, it is about making it clear and drawing the user’s attention to enable them to take action.

Evernote (left) nudges the user to try its premium features. Shazam (right) allocates almost half of the screen to highlight the key user action “Touch to Shazam”.

I have found that the following pre-conditions are useful to keep in mind as a guideline for enabling actions:

• Cue: What is the best way to trigger the user to take the action?
• Reaction: How will the user react to the trigger? Is it interrupting the user?
• Evaluation: What will enable the user to decide to take the action?
• Ability: How easy is it for the user to take this action?
• Timing: Is it the right time have the user take the action?

☆ Keep it Simple

The best interfaces feel effortless to users. They avoid unnecessary elements and are clear in the language they use. Some best practices to consider are:

Gradual Engagement

Actions should be lightweight at the beginning, but as the user gets the hang of it, you can gradually present more advanced controls. The same applies for progressive disclosure where the information presented to the user is introduced gradually, revealing only what is essential at first, and adding later on in order to minimize the feeling of being overwhelmed for the user. In a similar vein, keep in mind that a returning user doesn’t need the same experience as a first time user.

Function before form

Design something beautiful and appealing, and simplify the underlying actions of your application. Author, designer, and computer scientist, John Maeda writes in his book, The Laws of Simplicity:

On the one hand, you want a product or service to be easy to use; on the other hand you want it to do everything that a person might want it to do. The simplest way to achieve simplicity is through thoughtful reduction. When in doubt, just remove. But be careful of what you remove.

Google: The homepage is just a search box that has clearly been designed around its primary function.

The same goes for user interfaces. Once you understand the complexity of the application and actions the user takes, you can work on simplifying things, by focusing on the core process or function at hand, rather than the underlying UI elements.

 

☆ Connect with Emotions

Having empathy for your users helps you connect with their emotions, and avoid making them uncomfortable or offending them. In addition, understanding your users also gives you the knowledge to provide them with elements and patterns that they recognize and relate to.

This is where the Principle of Least Astonishment (POLA) comes into play, where a design and patterns match the user’s experience, expectations, and mental models. Positive emotional stimuli give users a sense of trust and can truly create lasting impressions on an individual’s mind.

Mailchimp: Freddie, the cartoon mascot of MailChimp, is a great emotional carrier for humor.

Too Young to Wed: Good fullscreen use of the right photos and a catchy title lets users quickly build empathy.

Emotional design can be brought up at different levels. Don Norman describes three levels of ‘Emotional Design’; visceral, behavioral, and reflective.

• Visceral design is the initial impact of the appearance, touch and feel.
• Behavioral design is about how things work and how users experience it.
• Reflective design is about how the product makes users feel.

☆ Engaging Design

Engaging your users is a very important consideration in retaining them. With the right cues, interactions, and patterns, you can give your users a very immersive experience. A few ways to do that are:

• Gamify the experience and enable users to go on a quest to learn something new or achieve a goal. Reward them when they do something correctly but make sure it is non-intrusive and compliments their journey.
• Provide the right navigation cues to tell your users where they are in the application. Apps with a deep information architecture benefit from elements like breadcrumbs and pagination to enable quicker navigation and add context to what the user is looking at. If you are dealing with a complex process, break up large tasks into smaller steps.

• Use feedback to tell the user what is happening, for example, when they submit a form or hit the search button. Feedback could be in various forms including visual, audible and haptic (touch/vibration).

☆ Bring Delight

Your UI should bring users delight rather than frustration. Having a playful interface can have a powerful effect on how users see and experience your application. Bringing delight to your application should be done both at the surface and deep levels:

Surface Delight

includes visible and obvious things on the interface:

• Visual Aesthetics: visuals set the tone and the user’s first impression, and must be appealing, modern, and trendy.
• Animation, Transitions and Interactions: these elements make the user experience more immersive and playful. Examples of animations include using hover states, sliding interactions, scroll events, transitions, and gestures.

Deep Delight

is emotional and invisible to the user. It includes:

• Making the user feel happy, engaged, and successful.
• Minimizing pain points, frustration, and anxiety for the user.

Ultimately, we all strive for making our users happy and delighted by providing them with the best user experience we possibly can. I have always kept these tips in mind during my work at the Design & Co-Innovation Center at SAP Labs and I hope you can find them useful as well.