View All Posts

How to build a great user experience

November 8, 2018

, In



Amichai Oron

share on facebook button share by Email
How to build a great user experience

The rules of animated film apply to creating great websites!

You’re not supposed to animate drawings. You’re supposed to animate feelings.

Ollie Johnston

Over the years i have developed thought models that help me process complex ideas and make sense of them. I often like thinking about a website in as a movie where the audience is experiencing an interactive film, surprisingly enough, They follow the same principles of animated films as described by the original artists of Walt Disney's movies Frank Thomas and Ollie Johnston. Walt Disney’s artists new that what separates a good movie from a bad one is how you felt at the end and not what you learned. so here are some key principles that help build a great website.

Conveying Ideas - If you are selling a great feature you want the audience not only to be informed about it but also to feel it their bones. they need to feel what you feel about it. It’s ok to exaggerate the feeling you want to convey and act out on it.

If there are multiple ideas that need to be processed, allow the user to pause before moving on by breaking the data into blocks that can be processed.

Telling a story with UX is about generating the correct feeling towards the service

Staging - Staging is the presentation of any idea so that it is completely and unmistakably clear. Take full control of where the audience is looking by Controlling the Setting - Look at this -  Now look at this! - All of the elements of the screen work together to move the viewer eyes to what is happening on the screen.

Like in movies when there are two many lead actors that are fighting over your attention - you lose site of the goal of the scene. The main features need to take the center of the screen and can't be in competition with other things that are going on.

Appeal - Every feature and screen you build needs to be somewhat pleasing to look at, they should have some kind of charismatic aspect to them. It doesn’t have to be beautiful it can simply be interesting. This can be done by introducing dynamics to the design. Use a variety of shapes, Play with proportions, keep it simple. defined in a way that you can say what it is you like about it.

Every feature and screen you build needs to be somewhat pleasing to look at, they should have some kind of charismatic aspect to them.

Follow Natural Laws - Virtual objects and experiences must follow natural laws - Both physical and Emotional. The experience must transpire as if it was happening in physical space. In example for shopping , I see the store window , i like the style, I walk into the store and start searching in the mens department, I find a coat that i like, i examine the price and then pay for it in the counter. This description fits a physical store and in the natural process but it should also be applied to the experience in an online store.

Anticipation -anticipation helps communicate actions to the audience by preparing them for the next action. build anticipation by reducing competing actions.  In example a main call to action sets up the next scene in your process.

a good example of a call to action doesn't compete for attention

An example of a bad call to action - can you find where to donate ? it's bellow the fold!

Narrating a Story - In movies there here are two ways to develop a story -  pose to pose or straight ahead - In the Pose to Pose strategy you first describe the main blocks of begging and end then place keys in between. This method is similar to building experience flows that are predictable and keeping you eyes on the goals.

A good mental model for UX is to begin with the users Goals/Pain/Intent and mark the Solution. Then add in the Steps in between  -
How do i discover the service/ feature?
How do i get informed about it?
How do i use the service to reach my goal/Solution?

Alternatively when working on complex flows it's some times easier to work with a ‘Straight Ahead’ approach by playing it out and figuring the questions as you go. In example imagine yourself taking a trip to Thailand and planning what are you are going to do every day.

switching between the two strategies provides a powerful tool that keeps you focused on your goals and at the same time resolving complicated use cases.

Composition - Volume Weight and Balance - Every thing needs to look like it can abide to 3d space. Use shadows to create layers. For instance buttons & menu's will look like they are in front if they cast shadows. Pressing buttons should reduce their shadow as they are pushed towards the ground zero plain.objects that are above a horizontal line will look hovering in space, Objects bellow the line will make them look falling , placing them between lines will make them look boxed.

Using shadows to build layers within the design.

Follow Through - When building UX flows & pages there should be an overlap to the previous actions this creates better clarity. An example of follow through is when after pressing to send an email -  a small message (toast) will appear saying that the action has happened, a spinner will start turning while the page is loading, The page header will match the button that led to it.

Google provides feedback of the previous action after sending with a small notification

Exaggeration - Every action can be taken to the next level to increase the amount of impact on the audience. Making features more realistic doesn't mean their physics and proportions are more consistent with reality - but rather that they convey the idea or essence of the action in a more apparent and real way, in example when building a performance graph making the lines steeper will help understand the impact of the change and draw a more powerful response.

Creating Steeper graphs generates more impact on the mind.

About the author

Amichai Oron

Amichai Oron is Founder of Spark and leads a multidisciplinary team uniting people, culture, and technology to build joyful experiences for the world’s top brands and disruptors alike. Selected clients include Teva, Mysupermarket, Cedato , Mind Kick, Algosec , and many more.