Animation Principles for Enhancing UX

With new tools like CSS Animation, JavaScript Libraries and modern browsers, we can easily add animation to our websites. Animation helps you to provide context, give feedback, convey status and delight your users. You can affect color, location, scale, shape, focus and opacity of objects. By learning the principles of animation, you can create deliberate animation that improves the user experience.

Photo by Aline Ponce from Pixabay

12 Principles of Animation

Disney animators, Ollie Johnston and Frank Thomas, first introduced the 12 Principles of Animation in their book, The Illusion of Life: Disney Animation. They examine the process of animation from Disney’s leading animations and provide you with 12 basic animation principles.

What do the 12 principles provide?

  • Realism
  • Context
  • Causality
  • Focus
  • Delight

They also help to create hierarchy and relationships between objects. These principles help you to provide feedback to the user, indicate status and give instructions. One of the first uses of animation on computer screens was the flashing cursor. It tells you that you can start typing and that the computer is working and not frozen. This simple animation conveys information faster than words can.

How to Use Animation Responsibly

When you are deciding to add animation to your user interface, consider the following:

  • Does it add value?
  • Are your behaviors consistent?
  • Is the user interface still functional without it?
  • Is the animation optimized?
  • Do you need it?

Using Animation to Enhance User Experience

At WordCamp Atlanta 2019, Michelle Schulp gave a talk Squash and Stretch and Good UX- Using Animation To Enhance User Experience. She gave a quick overview of the 12 Principles of Animation. Michelle explains the uses of animation and how to use animation responsibly.

More resources on animation

Using SVGs in Your Web Projects

Are you using SVGs in your web projects? Scalable vector graphics can be used as background patterns, icons, logos and illustrations. They look nice and sharp at all screen resolutions. SVGs can have a small file size which helps you to keep your website size smaller and work better.

Using Svgs in your web projects
Image by Gerd Altmann from Pixabay

How do I get started?

It depends. Are you planning on creating your own or using pre-made SVGs? If you want to create your own, check out SVG on the Web. It is a practical guide for creating and manipulating scalable vector graphics. CSS-Tricks walks you through creating a simple SVG and manipulating it using CSS in Using SVG.

Where can I get SVGs to use?

  • SVG For Backgrounds lets you customize and apply a selection of backgrounds.
  • HeroPatterns has a collection of svg background patterns that you can customize for your web projects.
  • HeroIcons creates scalable vector graphic icons that you can customize with CSS.

Add Animation to Your Scalable Vector Graphics

People react and respond to movement. You can animate svgs to draw attention to a specific area. Animate your graphics with CSS or JavaScript.

You can start with the basics and learn how to use CSS to animate your graphics.

Or you can use SVGator, an online tool, that helps you animate scalable vector graphics.

If you prefer JavaScript, you can use Snap.svg, a JavaScript library, for animating your vector graphics.

How do you choose the right font?

Fonts come in all kinds of styles. With so many to choose from, it can be hard for a developer to know where to start. Your brand and voice are identifiable by your colors, photos, other design elements as well as the fonts that you choose.

How do you choose the right font?
Photo by Florian Pircher from Pixabay

Use these following tips to help select that fonts that enhance your design.

1. What type of personality matches your brand’s tone?

Are you Traditional, Reliable or Respectable? If so, you want to choose traditional fonts like Butler, Georgia or Times New Roman.

How about Contemporary, Modern or Progressive? Try modern fonts like Simplifica, Raleway or Prime.

Or are you Strong, Bold or Stable? Strong fonts like Glamour, Code or Nexa might work for you.

Maybe you want to convey Elegance, Vintage or Romance. Try handwritten script fonts like Allura, Sofia or Pinyon Script.

If those don’t fit you, you may need a more custom or unique font. Stylish fonts like Butch or Moon may work for you.

2. Is the font easy to read?

Do you have to concentrate to read the words? If you are getting exhausted trying to reading the font, then your customers will too. You want them to be able to read without any effort.

3. Does it look good in different situations?

You want to choose a font that looks no matter what you do to it. When you bold or italicized it. It should be easy to read when large and small. Some fonts look better on top of photos. Your brand colors can affect how readable the font is.

4. Do the fonts look good together?

After you have chosen the type of fonts that convey your personality, you want to pair fonts that compliment each other. You’ll need to decide how your headlines, content and calls to action will look like. Pairing fonts can be challenging. You can learn the basics for choosing fonts that fit your personality.

You can use these additional resources for pairing fonts:

Where can I get fonts?

3 Dashboard Design Inspirations on CodePen

An easy to read dashboard has from 5-9 pieces of information on it. By combining color, fonts and icons, you can make a dashboard simple and easy to use. I found these three examples on CodePen that you can use to inspire your own designs.

3 Dashboard Designs CodePen
Photo by Lukas from Pexels

Bootstrap 4 Dashboard Stats Example

It shows 6 different statistics using Bootstrap 4. Each statistics is in a separate box that was built using the card layout. @elmorabityounes uses the default classes from Bootstrap to color the background, border and text. The text formatting is kept simple by using header tags to display the copy. Each box has its own icon from Font Awesome. The result is a simple design with no additional CSS or JavaScript.

Bootstrap Dashboard Indicators

When you design a dashboard, you’ll need to use different type of indictors to display information. Herman Starikov shows you how to use Bootstrap to create different indicators. He combines Font Awesome, Flexbox and CSS Animation. Herman also uses icons as decorative background elements. With CSS and Animation, your dashboard doesn’t have to be plain or boring.

Full Dashboard Design

CodePen Admin Dashboard

This complete Dashboard has a statistics, charts, a map and a chat box. Haidarali Nadi Shah demonstrates how to use Flat design, Font Awesome and JavaScript for functionality and additional theming. It includes a side menu bar that shrinks and expands when you click on it.

With the above examples, you can include different pieces of information in your design. You can choose to HTML and CSS, a CSS Framework like Bootstrap or include JavaScript to create more complex functionality. No matter what methods you choose, you can create a dashboard that provides your customers with the information that they need. Before you design your next dashboard, remember to review these 3 Dashboard Design Tips.

Learning JSON

JSON stands for JavaScript Object Notation, which is a format for sharing data. As the name suggests, JSON is derived from JavaScript. Other languages like PHP, Python, Java, C# and Ruby can use it.

Learning JSON
Photo By: Image by xresch on Pixabay

Why use it?

JSON is readable and light weight. It requires less formatting than XML. JSON’s structure is a key-value pair format that is rendered in curly braces. You can choose to use it in a file (*.json), a string or as an object.

How do I create a JSON object?

  • Use curly braces to define the beginning and ending of the object
  • Put data in key/value pairs
  • Use a colon to separate the key from the value
  • Keys are strings
  • Values can numbers, strings, objects, arrays, booleans or null
  • Use a comma to separate each key/value pair

{
	"name" :  "Isaac",
	"age" : 50,
	"job" : "writer",
	"car" : null
}

Build a simple website with JSON

The key/value pair makes it easy to share data in web applications. You’ll need a language like JavaScript to display the data. The Mozilla Developer Network walks you through a simple example in their tutorial using JSON on a website. You build a one page website that lists 3 superheroes.

Modifying the website

The superhero website is a bit plain without images. I downloaded three images from Pixabay and updated the superhero.json file. I added a key/value pair for each image like “imageUrl”: “images/molecule-man.png”. Then, I modified the JavaScript to display the image.

I tweaked the CSS to put a border on each superhero member to make it look a little more card-like.

Screenshot of JSON Superhero Website

Where can I learn more?