How to Use CSS3 Transitions & Animations to Highlight UI Changes

Although CSS3 offers great ways to build sophisticated animations, it’s usually harder to create them than transitions, that’s why there are many great animation libraries out there, which can facilitate our work.

In the example below you can see a cool animated dropdown menu. The animation starts when we click on the button. This is achieved by adding extra classes to the list elements with jQuery when the click event occurs.

Bridget Riley Fall, 1963

Fall (1963) by Bridget Riley, Tate Modern, picture courtesy of Flickr.com

Transitions and animations are both used to visualize changes in the state of an HTML element by modifying one or more of its CSS properties.

Transitions

We could use the shorthand animation property as well, or could define the keyframes with the more simple from {} to {} rule in the following way:

We can alter more than one CSS property in one transition, in this case the code above would be modified like this: transition-property: background, border;. We can also use the transition-property: all;, if we don’t want to specify each property separately.

We can choose the shorthand transition property as well. If we do so, we always need to pay attention to the proper order of the inner properties (see the syntax in the docs).

The most important thing with both transitions and animations is that we always need to specify the CSS properties that will be modified during the state change. With transitions it looks like this:

If we want to visualize state changes with more complicated movements, or if we don’t have an explicit trigger, e.g. if we want to start the effect when the page loads, animations are the way to go.

  1. They always have a beginning and an end state.
  2. The states between the start and end points are implicitly defined by the browser, we can’t change that with CSS.
  3. They require explicit triggering, such as adding a new pseudoclass by CSS, or a new class by jQuery.
 .element { background: orange; transition: background 3s ease-in; } .element:hover { background: red; }

If we want to create an animation, we are required to specify the related keyframes. The CSS properties need to be modified in separately defined @keyframes at-rules. Here is an example of how we can do this:

CSS3 animations and transitions worked with vendor prefixes for a long time, which we don’t have to use any more, however the Mozilla Developer Network still recommends to add the -webkit prefix for a while, as the support for Webkit-based browsers only recently achieved stability.

Animations

The two main techniques CSS3 offers are transitions and animations. In this post we will take a look at what they are, what is the difference between them, and how you can make use of them.

 a { color: orange; } a:hover { color: red; } a:focus { color: blue; } a:visited { color: green; }

Transitions are used when an HTML element changes from one predefined state to another. CSS3 introduced new properties that allow more sophisticated visualizations than before, such as timing functions or duration control.

Changing CSS properties of a link on hover (or focus, or click) is the oldest and simplest form of transitions, and it existed well before the CSS3 era.

 .element { background: orange; transition-property: background; transition-duration: 3s; transition-timing-function: ease-in; } .element:hover { background: red; }

We specified the background property, because this is what will be changed during the transition.

  1. they don’t require explicit triggering, they can start on page load or when another DOM event takes place in the browser
  2. they can be used in cases when transitions are used, for example when a new class or pseudoclass is added or removed (although it’s a less frequent use case)
  3. they require us to define some keyframes (intermediate states)
  4. we can specify the number, the frequency, and the style of these keyframes

Since then newer and newer approaches have popped up, such as the recently popular kinetic art that extends the viewer’s perspective by using multidimensional movement. Motion also appeared in computer science with the invention of the first blinking cursor in 1967.

The simplest form of state change visualization is altering the colour of a button or a link when it’s hovered on. When it happens, the element gets a slightly different style, which is usually noticed by the viewer as if something have moved on the screen.

The most important things you need to know about CSS3 animations include:

CSS Properties and The @keyframes At-Rule

 .element { position: relative; animation: slide 3s ease-in; } @keyframes slide { from { left: 0; } to { left: 400px; } }

The creation of more complex animations is its own form of art, if you are interested, you can read two of our animation tutorials on how to create an advanced marquee, and how to create a bounce effect.

 .element { position: relative; animation-name: slide; animation-duration: 3s; animation-timing-function: ease-in; } @keyframes slide { 0% { left: 0; } 50% { left: 200px; } 100% { left: 400px; } }

In the example above we created a very simple sliding effect. We defined the animation-name, then bound 3 keyframes to it which we specified in the @keyframes slide { ... } at-rules. The percentages refer to the duration of the animation, so 50% happens at 1.5s in the example.

In front-end development DOM elements were usually animated by JavaScript before CSS3 was released, and it’s a method that still works, but the new properties introduced by CSS3 allows us to enhance our designs with different effects and motion in a more intuitive way.

These new classes are animated with specified @keyframes rules in the CSS file. The extra classes are removed by jQuery when the user clicks on the button the next time, and the menu becomes hidden again.

You can see a beautiful example of smartly utilized CSS3 transitions below, in which the author reveals hidden information in a way that’s non-intrusive but still steers users’ focus on the new content.

For transitions we can use either the transition shorthand property, or 4 single transition-related properties: transition-property, transition-duration, transition-timing-function, and transition-delay. The shorthand property contains all the single properties in an abbreviated form.

When building transitions and animations, you need to know that not all CSS properties can be animated, so it’s always a good idea to check the property you want to change in the CSS Animatable.

Designers and artists have a long history of experimenting with motion, effects, and different kinds of illusions with the aim of adding an extra layer to their work. The op art movement began to use optical illusions in the 1960s to give the impression of motion.

Animations make it possible to define a more complex path by setting and configuring our own keyframes. Keyframes are intermediate points in the course of the animation, that allows us to change the style of the animated element as many times as we want.

We will take a look at the new CSS properties in the next section, after understanding how animations differ. For now, let’s see the most important things you need to know about transitions.

For animations there’s the animation shorthand property at our hands which stands for none less than 8 single animation properties, namely animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.


Utility Navigation: How it Influences User Experience Design

As you can see below, Reuters has positioned most of its utility tools into these two typical areas, the top right corner of the site, and the lower part of the footer below the content-based navigation. The unique solution here is the fixed extra footer with 2 utility items that designers thought to be the most important: “Login or register” and “Latest from My Wire”.

Two great examples of effective visual design can be found on Walmart‘s and Etsy‘s website. Designers placed utility navigation on the topmost of both sites, and highlighted it with colours that vary from the rest of the navigation, Walmart with a blue background, and Etsy with blue fonts.

How Utility Navigation Impacts UX

To design an effective and user-friendly navigation, we don’t only need to think about how to group our content into well-structured menus to enable users to easily find what they want, but also about how to design the tools they will need to interact with the site

If you take a look at the screenshot below, you can see that The New York Times informs users about the availability of 3 different editions: American, International, and Chinese, and also enables them to quickly switch between the three. This great example of smart utility navigation shows users less-obvious options they probably wouldn’t find on their own, in a non-obstrusive and elegant way.

They didn’t only place utility navigation on the top-right corner where users expect to find it, but they also divided it into 3 main groups: (1) a search bar, (2) user-related information (below the search bar), and (3) actions that users can perform on the site.

Washington Post for example displays utility navigation on its single post pages differently from on the homepage. This way users only meet utility tools that are relevant, and are not pestered with options that they wouldn’t want to use anyway.

AirBnB Utility Navigation

Thirdly, users need to quickly understand what they can do on our site. Visitors don’t necessarily know what they want, so we always need to provide them with information about the options they have.

It’s smart because, thanks to the visual cues such as the shopping cart or the search icon, customers can decide in the twinkling of an eye which group they want to use, and from then on they can ignore the other two. There’s only one group (“Your Account”, “Try Prime”, “Basket”, and “Wish List”) that has submenus that are also logically structured, and the different submenu groups are divided by discreet but visible separators to help users quickly find what they want.

Navigation that is not strictly related to the content, and helps users perform different actions is called utility navigation, and it’s a less widely discussed but hugely important aspect of user experience design. Search bars, login and signup forms, subscribe, sharing and print buttons, shopping carts, contextual menus, and tools that allow users to switch languages or font size are typical examples of utility navigation.

There are 3 utility navigation items that visitors may want to use site-wide. These are smartly included in the fixed top bar (search tool, “Sign In”, and “Subscribe”), but users don’t have to think about options related to single posts such as “Reading List” when they are browsing the home page or one of the category pages.

Washington Post Utility Navigation

There are typical placements for utility navigation where users intuitively look for these tools, as that’s what they’ve got used to on the majority of websites. Breaking web design conventions is considered bad user experience practice, and it’s especially true for utility navigation that, in most cases, is more about usability than creativity.

It’s interesting to note that the extra utility navigation area is still placed into a kind of footer where users would normally look for similar tools, so Reuters’ designers were creative in a way but still followed web design conventions to maintain usability.

New York Times Utility Navigation

Find The Best Place

Both sites emphasize the most important user actions with different visual design elements, Walmart uses yellow for the Search and the Sign In buttons, while Etsy gives a discreet blue border to the Sign In button, and includes a gray shopping cart icon above the Cart menu.

This is the only place where Etsy uses an icon in its utility menu, while Walmart displays an icon next to each item, but still doesn’t forget to include the necessary text labels right next to the icons.

Grouping utility tools into a logical structure is crucial if we want to build a site with a high conversion rate. This can be a challenge even if we don’t want to provide users with many options, but Amazon takes the complexity of utility navigation to the next level. Amazon has an incredibly complicated utility navigation with many options, but if we use Amazon regularly enough, it doesn’t appear so. This is the magic of smart design.

When we design utility navigation we need to decide how we want our users to interact with our site. We need to provide them with an interaction structure that fits our business goals, leads users through the customer journey, gives them easy-to-understand options, and provides them with a pleasant user experience.

Reuters Utility Navigation 1
Reuters Utility Navigation 2

Build A Logical Structure

The visual design of effective utility navigation needs to follow the famous KISS principle (Keep It Simple, Stupid). It’s recommended to provide icons with text labels, make controls look like controls, and visually emphasize the most important actions. It can also be a good idea to distinguish utility and content-based navigation by using a slightly different design.

Designing them is not as easy as it seems at first sight, it requires consideration to find out what elements we need, where to place and how to display them to make sure that our visitors can quickly find them and understand how they work.

Secondly, users don’t need superfluous utilities, as too much clutter distracts attention and reduces focus. What tools are necessary in our utility navigation and what are not depend on the nature of our site. For example it can be useful to include a Print view on a blog or a news site, but the same feature can be an unnecessary distraction on a forum board or a social media website.

Amazon Utility Navigation

Create An Effective Visual Design

First of all, they need to be able to quickly perform the actions they want. If we enable them to do so, customer satisfaction will grow, and pleased users tend to spend more time and more money on websites.

The 4 top menu items target the 4 main personas who usually visit AirBnB’s site: people who are interested in becoming a host (“Become a Host”), people who want to solve a problem that took place while they used the service (“Help”), new and returning users (“Sign Up” and “Log In”). AirBnB’s utility-focused home page also contains a quick search bar that is a crucial tool on an accommodation renting website.

The home page of AirBnB follows this UX principle, and its top menu only contains utility tools. It’s not a usual solution, but if we take a look at AirBnB’s incredible growth rate, it’s the perfect choice for them.

As utility navigation is secondary to content-based navigation in most websites, it’s frequently placed in less prominent but still visible areas. This usually means the (1) top-right corner of websites, and the (2) lower part of the footer. It’s a good idea to follow these conventions, as these are the places where most users look for utility tools first.

Walmart Utility Navigation
Etsy Utility Navigation


Four UX Design Techniques to Encourage User Engagement

There is no single answer on how to design (or fix) websites to enhance usability. Yes there are some things you can try but each site is a little different and the study of UX design is very complicated.

The best place to start is by researching UX design and the process of how users interact with an interface. From there you’ll be able to draw conclusions relevant to your own projects and ideally simplify your interfaces to their greatest potential.

When you’re forced to consider screen size, it places critical features in a whole new light. As a designer you need to choose which features are most important and how they should appear on smaller screens. This responsive design strategy takes time to learn but the best way is to study other websites and pick up techniques that you like.

reddit homepage design

It’s fair to say a good portion of Internet users browse from their mobile phones. Links that get shared to social sites like Facebook and Twitter are often visited right on smartphones and tablet devices.

Use contrast to draw attention towards certain page elements that engage visitors into a particular task. If your goal is to build more newsletter signups then your subscription box might have a bright animated signup button or a unique vector icon.

1. Use Contrast to Draw Attention

Different types of animations can imply certain behaviors. For example, when hovering over a button it might bounce up to show that it’s clickable. Error messages often shake to draw attention from the user.

The truth is responsive design works and it’s becoming more accepted by the design community with each passing year.

The secret lies in user experience and the consideration of how a website functions. Interactions stem from page elements and action flows that move from one page to the next.

smashing magazine newsletter signup

Every site is built with a handful of elements made for user interaction. Hyperlinks, buttons, input fields, sidebar widgets, the list goes on and on. But not all elements should be created equal. Some are naturally more important to visitor engagement and should be designed with higher contrast to stand out from other elements on the page.

The subject of user experience is vast and requires patience to fully understand. But the more you practice the more you’ll understand

2. Tasteful UI/UX Animation

If someone lands on your webapp and doesn’t understand how to signup right away, that’s a huge problem. It should be blatantly obvious to the user what your site does and how they can be apart of it.

Remember that UX animation should be visible yet subtle. Wild over-the-top animations are more for TV and movies rather than interfaces.

button animation states

This idea stems from high color contrast and the way humans process visual data in patterns. When something stands out from its surroundings whether by color, size, shape, or whitespace, it can appear more important based on context.

If you have the time it might be worth running a few A/B case studies to see which colors/elements play best together. Statistics are difficult to pinpoint but you’ll be surprised how much can be learned from a simple split test.

3. Responsive Design as a Requirement

But in truth it doesn’t matter how you plan out the experience. Just be sure that you’re planning the quickest and simplest experience possible. When it comes to encouraging activity you’ll want the important stuff to be implied by the design.

The best thing you can do is play around on websites you like and figure out what you like about them. From your experiences you can extrapolate consistent ideas and figure out what keeps you (and perhaps others) engaged on a website.

The goal is to capture attention by building an interface that lures visitors into performing some desired action(s).

animated responsive layout

Users are also expecting websites to be fully responsive so they’ll cater to any device screen. When a site doesn’t fit nicely into a mobile web browser it can be off-putting to the user experience.

But that doesn’t mean your interfaces should remain flat. In fact most users would rather have some type of animation because it gives the illusion of a smoother experience. Digital design is partially about creating an illusory interface, but the more realistic it appears, the more your users will want to interact.

4. Simplify the Interaction Process

I like to build UX flowcharts for each interactive page element whenever I’m sketching wireframes. These help to visually conceive how the site should look and function.

Smashing Magazine recently published one of the best posts I’ve read in support of simplification for interface design. It states that nobody wants to jump through hoops to use your website or application. People are only interested in the end result, and the quickest means to get there.

Encouraging users to stay on and use a website doesn’t always involve slimmer code or prettier graphics. Some of the simplest layouts like Reddit still keep users engrossed with the content, and thrilled to interact with the site.

For related reading on the topic of user activity, check out these posts:

In this post I’ll take a look at some UX design techniques that can be applied to improve user experience & increase user engagement. Note that these are not always applicable to every website and it’s more important to understand why these techniques work so you can use your own judgement.

This means every website should be optimized for mobile in some manner – preferably with a completely responsive design.

  • Breaking Web Design Conventions = Breaking the User Experience
  • Usability & User Experience Archives on Smashing Magazine
  • Web Design Concepts to Entice User Interaction

Wrap-Up

I recently stumbled onto a post entitled What Does Disney Know About Interface Animation. It covers the vital points of animation and how these play to the psyche of users interacting with a flat 2D screen.

I hope this article can get you started thinking about some common techniques for building highly usable interfaces. The best thing you can do is place yourself in the shoes of a typical user and try to determine the major flaws of an interface. And once you recognize a problem you’re already halfway to the solution!


Anticipatory Design: When Choice is Removed From Decision Making

The human brain has limited capacities though, therefore we are unable to take everything into consideration.

The popularity of business logic software and expert systems in the corporate world already shows that many businesses trust machines better than humans. If anticipatory design is used the right way, it can improve the decision-making process and reduce human mistakes by gathering, aggregating, and making use of way more data than is manually possible.

In short, different kinds of data controllers will hold tons of data about all of us. How will they handle it, and how much control are users willing to give up? In what forms will they be able to control who and how can access their data?

The term of anticipatory design was coined less than a year ago by Aaron Shapiro in a brilliant post on FastCoDesign. The article claimed that designers tend to give too many choices to users, which distracts them, and makes user experience stressful.

Anticipatory Design, Opportunities and Risks

We are living in the age of information, which means tons of personal and public data is at our disposal. We not only can reach loads of media publications, statistics, databases, and analyses, but also gain access to data logged by our wearables, smart devices, and other high tech gadgets that record our preferences, actions, and behaviours.

Anticipatory design claims that is better to have fewer choices than it is to have more (to understand this perhaps you should take a look at this video on the Paradox of Choice) and thus it aims to eliminate redundant choices.

What is Anticipatory Design?

If, as designers, we really care about the needs of our users, we need to take privacy more into consideration than ever before, and build it into the design workflow.

Google’s learning thermostat, Nest doesn’t eliminate all decisions yet, but it allows you to optimize energy usage in your home without putting too much thought.

If we outsource decision-making to algorithms, we can easily lose an important life skill as well. The most interesting question probably is whether users will recognize at all that they have less options than before. Will they be happy with a more hassle-free life, or mourn their reduced freedom?

Having fewer choices or no choices at all naturally results in simplified user interfaces. The recent popularity of flat design already shows the trend of users wanting less distractions and more intuitive online experiences.

  • data previously collected on the respective user’s behaviour
  • interconnected apps
  • intention detection
  • big data technology
  • business logic algorithms
  • other advanced technologies.
Anticipatory Design in the Future

A Theoretical Example

Fully fledged anticipatory design will be an intuitive technology that probably will know us better than we know ourselves. Having fewer or no choice at all may leave us feeling manipulated, and constantly being assessed based on our past behaviour can hinder self-improvement and even set back our creativity.

Previous preferences can also be restrictive when someone wants to try out new things, or pick up new habits.

Sounds more like a dream than real life, doesn’t it?

The new approach is called anticipatory design, or sometimes context design, and takes experience design to the next level. It anticipates what customers need before the specific need even pops up in their mind, and customizes the content accordingly.

Real-Life Examples

Amazon’s recommendation engine uses machine learning algorithms and big data technology to predict what you need, based on your past searches, ratings, comments, and other online actions.

When I heard about the new concept for the first time, I was fascinated, and eager to learn more about it, as it seemed to be an awesome idea. As I’ve read and thought more and more about it, I’ve begun to understand the concerns as well, and my initial enthusiasm has started to turn into skepticism.

Smartly utilized anticipatory design can save a lot of time for users, and allow them to focus on things that are more important for them, instead of performing mundane, repetitive tasks again and again.

This smart decision making process will be possible by making use of:

Amazon Dash Button

Google Now anticipates your wants and needs by analyzing your former search history as well.

Advantages of Anticipatory Design

1. It Reduces The Cost of Choice

The most important ethical questions anticipatory design brings up are data security and privacy. Anticipatory design needs data about our preferences and previous actions; moreover content providers can have access to our user profiles, social networks, mobile and web applications.

Decision Fatigue

Have you ever thought about how the web would look like if we could anticipate user needs? The idea to personalize user experience and serve different content to different people based on their interests has lately appeared in the discussions about web design.

You leave from work, and drive home as usual. By the time you arrive, the ingredients of the dish you talked about with your spouse earlier that day are already delivered to your front door.

Giving too many options to users can make the decision-making process overwhelming and stressful. When this happens, people tend to leave early, and those who stay are usually less satisfied with the overall user experience.

2. It Simplifies User Interfaces

Since then my views on anticipatory design have been back and forth between optimism and pessimism. In this post I will demonstrate the opportunities and risks the new approach can bring into the field of design, so you can take your own stance on this yet controversial subject as well.

During the process there was no need for you to make any decisions. Based on the current traffic data and the distance between your office and your house, an app calculates the time you need to get home; another app downloads the recipe of said dish, orders the ingredients from your local supermarket, and informs them about the time of your arrival.

Google Nest

3. It Improves the Quality of Decision-Making

For example if someone schedules a meeting, do they need a taxi for sure? If the weather is nice, they might want to go on foot, or they might cancel the meeting last minute due to an emergency or if they felt under the weather.

Okay, maybe anticipatory design is not this advanced yet, but its early implementations are already in the market.

In anticipatory design the designer’s job is to create an environment that eliminates as many step-by-step interaction as possible, and to simplify processes. This means people won’t have to run through tons of options in each app they use. Instead, smart algorithms will make most, if possible, all decisions for them.

Decision-making

Potential Risks

1. There Are Privacy Concerns

How would fully fledged anticipatory design look like? Let’s imagine the following scenario.

This way it can better control information overload and the resulting decision fatigue, which leads to lower bounce rates, fewer complaints, and purchases that are better suited to the individual customer.

It’s not a coincidence that experts say that the best way to maximize usability is to minimize the cognitive load.

Data Storage

Image: Freepik

2. It Can Be Too Restrictive

In many cases, second-guessing just doesn’t work. Motives behind human actions can be different in each individual.

In turn, this leads to poor quality decisions and less satisfied users. The recommended solution for this problem is a new approach called anticipatory design.

Amazon’s new hardware, the Dash Button is also a great example of already existing anticipatory design. It’s a tiny plastic button that was invented for automatic product ordering (read more about how it works here).

Companies using anticipatory design certainly need to make a lot of research, and assess responsibly what they can automate, and what they cannot, how they can keep users well-informed and avoid oversimplification.

Oversimplification

3. There Are Psychological Costs

Manipulation

While reading, please keep in mind, that anticipatory design still takes its baby steps, its rules are not final yet, and still can change in the future a little or a lot.


30 Free Web & Mobile UI Kits For Your Collection

Epic by Epic Coders [Download]

Phoenix by Adrian Chiran [Download]

e-Commerce PSD by Thomas Budiman [Download]

DO by Aaron Stump [Download]

Nerdial by uiSurf [Download]

Stark by Baianat [Download]

Blog by Thomas Budiman [Download]

Food & Drink by Sergiu Firez [Download]

Free PSD by David Minty [Download]

Free Material Design by Sergiu Firez [Download]

Dashboard by Craftwork [Download]

These UI kits are available in Photoshop and Sketch formats. Please go to the source to download the pack.

Developing a new web design project from scratch is challenging, which is why designers like you and me love free UI kits. These resources can significantly help us in our work to save time, and to get a job done much faster. UI kits are also a great way to explore ideas, gain insight into the minds of other designers, as well as to spot new trends.

e-Commerce Mobile by Ritesh Malviya [Download]

Nakropol by Orkan Çep [Download]

Free UI Kit in PSD by Muhammad Afzal [Download]

Bree Products Blocs by Orthonormai [Download]

55+ free elements by Tomasz Mazurczak [Download]

Mobile Menu by Emiliano Cicero [Download]

We gave you free and fresh UI Kits in 2015, so this is a continuation of that tradition. Here are 30 beautiful UI kits for web and/or mobile and more that you can use to kickstart your 2016.

EventPro by Stanislav Hristov & Dtail Studio [Download]

Shapes by Gavin M [Download]

Cardzz by Volodymyr Kurbatov [Download]

“V” by Aleksandr Petrov [Download]

iPhone 6 UI by Adrian Chiran [Download]

A1 by Vahan Hovhannesian [Download]

iPhone PSD by Sumaira [Download]

Sketch 3 by Kristaps Elsins [Download]

Recipe by Thomas Budiman [Download]

Flat PSD by Designrazzi [Download]

Android Lollipop by Adam Zielonko [Download]

Orange Chat by Valentine [Download]