The rules of animated film apply to creating great websites!
You’re not supposed to animate drawings. You’re supposed to animate feelings.
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.
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.
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.
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.
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.
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.
The Triangle Of Success
Mobile intelligence company Quetta recently came up with a sobering statistic: The average Android app loses about 80% of its daily active users within the first three days...