When and How to Use CSS Animation

Introduction

CSS animation is quickly growing to become an essential tool for web developers. While working on a project, I got a requirement from the client to create complex eye-catching animation. It was for a splash screen consisting of four informative cards, animating from left to right on page load. To put it another way, it had to reveal the elements one by one playfully and creatively, making things much more interesting.

animation CSS animations

To get this animation right, we had two options, either use Javascript or CSS.

Both can do impressive animations. However, we had to choose the one that suits the purpose. Thereupon we started to think of some key differences that we can consider as parameters to find the winner of Javascript vs. CSS animations:

Resilience

CSS rules are easy to write and maintain compared to Javascript. One broken CSS rule will not break the whole layout, whereas a single syntax error in Javascript may crash the complete web application or force the user to reload the page.

Functionality

In terms of functionality, CSS and Javascript are reasonably similar.

Although Javascript animations provide significant control over animations – pause, stop, revert, run asynchronously one after another, place on a timeline and schedule.

Performance

Performance is another important consideration when you have plans to develop your program on mobile platforms. All in all, CSS has relatively good performance as it offloads animation logic onto the browser itself due to which it lets the browser optimize DOM interaction and memory consumption and, most importantly, uses the GPU to improve performance. On the other hand, Javascript performance can range from reasonably faster to much slower than CSS. Javascript performance depends on the library used and puts the burden on the developer to optimize.

Optimization

CSS animations are better from an optimization perspective. In fact, they run on the GPU, so the frame rate is much higher than that of Javascript animations. On the positive side, CSS animations do not causing reflows and redraws, unlike modifying elements via Javascript.

These factors were my primary concerns. CSS animation was more suitable for my project because it provides complete control over the animation using just one keyframe.

Moreover, to work with keyframes, we needed support from the following CSS properties:

Transform

CSS Transform allows CSS elements to be transformed in two-dimensional or three-dimensional space – from moving the element to re-sizing it, from rotating the element to tilting it, without changing the document flow. When an element changes states, it triggers Transform, such as on mouse-hover or mouse-click.

There are four significant aspects of transforms:

translate: The translate() function allows us to move an element across the plane (on the x and y-axis).

scale: The scale() function allows us to resize an element. We can either expand or shrink it.

rotate: The rotate() function allows us to make an element revolve around a fixed point. By default, it revolves around the element’s center.

Skew: The skew() function allows us to distort an element, by dragging its sides along a line.

Transition

As the name suggests, transition lets you control the transformation of elements. It helps in making the process smooth and gradual. On the flip side, if you don’t have it, the element being transformed would change abruptly from one form to another. What’s more, it is widely used for simple animations and can be applied to most of the CSS properties.

A complete list of CSS properties that can be animated using transition can be found here.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Animation Properties

Transitions animate the transformation of a CSS element from one state to another. But for more complex animations which require animating multiple elements with state dependency, we can use animation properties.

Creating CSS animations using animation properties is a two-step process, and requires keyframes and animation properties.

The @keyframes At-Rule

Keyframes are used to specify the values for animating properties at various stages of the animation. Keyframes are specified using a specialized CSS-at-rule — @keyframes.

/* Standard syntax */

@keyframes animate {

from   {top: 0px; background: green; width: 100px;}

to {top: 200px; background: black; width: 300px;}

}

To ensure optimal browser support for your CSS keyframes, you should define both 0% and 100% selectors:

/* Standard syntax */ @keyframes animate {    0%   {top: 0px;}    25%  {top: 200px;}    75%  {top: 50px;}    100% {top: 100px;}

}

We can create complex animation properties by using the @keyframe. A simple animation has two keyframes, while a complex animation has several keyframes.

The complete list of sub-animation properties can be found at:

https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Let’s start working on our requirements. To start with, let’s create a basic card-based layout.

Step 1

We will create a simple 2 cards layout and we will add the animation in step 2 using keyframes. Since we can easily apply transition on CSS ‘position’ property, we can use it to place the elements as required.

https://codepen.io/pen/NWbBrRb

Step 2

Now that we have the card-based layout ready, let’s add some animation to it.
First, we need to hide the cards using opacity: 0 so that the cards are not visible before the animation.

Now, let’s add keyframes for the animation name.

@keyframes card-animation {

from {

opacity: 0;

left: 0;

}

to {

opacity: 1;

}

}

Since we have already defined the left property in class .card before, we can skip that in keyframe card-animation.

Step 3

Now our keyframe is ready, let’s add it to the .card class along with the animation-fill-mode.

animation: card-animation 1s;

animation-fill-mode: forwards;

We will have to add delay to animate the cards one by one.

.card-1 {

animation-delay: 2s;

}

.card-2 {

animation-delay: 3s;

}

That’s it! With the above simple code, we have with us the working card animation.

https://codepen.io/pen/ExNpyBz

Step 4

To update it as per our requirement, let’s add 2 more cards to it and apply the same animation-delay as we have used in the previous step.

.card-3 {

animation-delay: 4s;

}

.card-4 {

animation-delay: 5s;

}

Let’s see how it works.

https://codepen.io/pen/zYoLOYo

Conclusion

To sum up, use CSS animations for simpler “one-shot” transitions, like toggling UI element states. Besides, it is easier to use than JavaScript as it allows you to make some impressive animations from the users’ point of view. Use JavaScript animations when you want to have advanced effects like bouncing, stop, pause, rewind, or slow down. It gives you more control than CSS.

The W3C is working on a new spec called Web Animations that aims to solve a lot of the deficiencies in CSS Animations and CSS Transitions, providing better runtime controls and extra features. That is to say, we’ll have to wait and see how things come together.

3 Simple UX Hacks for Developers

User experience is a combination of ease of use and the delight of use. In an application, a good balance between the two is required to say that it has a good user experience. With all the buzz in the industry with terms likes User Research, Persona, Information Architecture, Usability Testing, etc. being thrown around, it almost seems like rocket science.

So what can you do as a developer to improve the UX for your application?

Most of those books and tutorials available explain the concepts of human psychology which underpin the field along with some theories and tools around the steps of the UX process. These nudge your mindset to become user-centric. Understanding them and synthesizing the theories into designs take time and patience.

But don’t developers love hacks, cheat sheets, and shortcuts? Wouldn’t it be fun if someone translated concepts like reducing cognitive load into implementable steps?

So here are the top 3 simple hacks that can help you get started towards improving the user experience of any application.

  1. Differentiate between Primary and Secondary Actions

Let’s start with understanding what are Primary and Secondary Actions.

On one hand, primary actions are often positive actions that the business wants the user to take to complete a task. In some cases, these can be negative actions like confirming the deletion of a file. Ideally, there should only be one or a maximum of two primary actions associated with a group of information or elements.

On the other hand, secondary actions allow users to do optional things or cancel primary actions. These could also be things the businesses don’t want their user to do, like delete an account. There could be any number of secondary actions.

Good UI: Profile Screen from Flipkart

Bad UI: Payee list for fund transfer on Axis Bank

How?

Primary Actions:

  • Limit the number of actions to one or at max two.
  • Make them available upfront. Keep their location consistent across screens.
  • Make this prominent – big, bold, saturated colors

Secondary Actions:

  • Could be upfront or hidden under a pulldown menu.
  • Less prominent than primary action – smaller, regular, light or neutral color

Why?

  • To direct users towards task completion.
  • To reduce both distraction and the probability of clicking the wrong button by mistake.
  1. Sorting all lists

What do I mean when I say list?  Product listings and data tables are lists.  So are any drop-down lists, list boxes, options of checkboxes and radio buttons. They are also a collection of items.

How?

  • Natural Sorting – Natural sorting refers to ordering the list by a parameter that does not require a context to understand. For example – Alphabetic order, ascending or, descending order.
  • Contextual Sorting and Grouping – This method, on the other hand, takes into account the context in which the list is being present. For example – while selecting a bank for making an online payment, the most widely used banks are listed first.

List of brands on Amazon sorted Alphabetically

List of banks for making payment showing most popular banks first

Unsorted list of brands – Flipkart

Why?

  • Reduce the time taken to make a selection.
  1. Useful error messages.

An error message is displayed to let users know that something went wrong. How do we know if an error message is useful or not?

Here is the checklist:

  • Simple: It uses easy to understand language.
  • Detailed: It tells what went wrong.
  • Instructive: It helps the user understand how to recover from the error.

Let’s understand this checklist with an example which most of us are familiar with – Login Page.

Good error message – Login page: Evernote

“Unable to authenticate user”

Simple  •. Detailed  •  Instructive

“Something went wrong”

Simple  •. Detailed  •  Instructive

“Could not verify username and password”

Simple  •. Detailed  •  Instructive

“Incorrect username or password”

Simple  •. Detailed  •  Instructive

Summary

You can start on the path of better user experiences by implementing the following:

  • Distinguish between Primary and Secondary actions to reduce distractions and assist users to complete the task without confusion.
  • Sort and group items logically to reduce the time for making a selection from a list.
  • Use simple and direct messages which describe the problem and direct them towards the solution to help users recover from errors.

Things to Do to Get Better at User Testing

User testing is an exercise wherein the design and usability of a product are tested with users. In this process, participants are asked to complete a task in the best ways possible using the product. The whole session is observed in detail to understand if users are facing any difficulty while using the product. Things that are adding to their satisfaction and the ones that are ruining experiences are taken note of. The insights from these sessions are then used as a fuel for effective design iterations and improvements.

A couple of months back we got the opportunity of improving the user experience of one of the critical screens of a product. The bounce rate of this particular screen was quite high, and it was a big concern for the business as this particular screen was the chief entry point of the platform.

Before we could make any design changes, we needed to learn why so many users were leaving this screen and not staying for long. This called for conducting comprehensive user testing.

Given below are the top three things we learned in the process of preparing and running these user tests.

1. Discrete Inclusion of Target Features in Test Scenarios

When planning to run user tests, it is essential to pinpoint the exact features on the screen which require testing. This is to prevent the sessions from getting side-tracked from the target. For these features to be tested, the participants should be using them.

In our case, the screen that was being tested was a listing page. One of the features we wanted to test was the ‘filter’ function. The filter function allows us to narrow down the list of products on the screen based on specific parameters.

For example: On a website that delivers flowers, filter parameters could be the price range, type of flower, delivery location, and so on.

So, instead of asking the participants to find a product of their preference, we listed certain characteristics of the product they should look for. This nudged the participants for using the filter functionality. While doing this, we were careful of the terms used in writing the scenario to make it not sound like direct instructions for using the functionality.

For Example: In the flower delivery website the scenario could be something like:

“Your sister’s birthday is next week. You want to send a bouquet of Orchids to Nagpur where she has recently moved.

2. Construct User Scenarios Using the Actual Data Available on the Product

This is specifically applicable when testing live products. While constructing the scenario, check the product listing to verify that the combination of filter parameters returns some results.

For example: In the scenario – “You want to send a bouquet of Orchids to Nagpur where she has recently moved”, see that there are at least a handful of orchid bouquets listed which can be delivered to Nagpur available on the platform.

We learned this one the hard way. For writing our scenario, we looked through the filter function and selected a few of the parameters and inserted them into our scenario.

Our first participant read the scenario and started looking at the filter parameters and selecting them. On applying the filter, to our surprise, there were no results returned. There were no products listed on the platform which matched the combination of characteristics we had listed in our user scenario. This meant that we couldn’t proceed any further in the session. We had to make changes to our user scenario on the fly which completely disturbed the participant’s flow and negatively impacted the outcome of the session.

3. Use a Template to Record Observations

The user testing sessions are very dynamic, the observer must be very alert and note down quite a lot of things that the participant is doing. To make things easier and faster, it helps to keep an observation template ready. It should list down in detail all the features which are being interacted. In our instance, we listed down all the filter parameters so that the observer could just put a tick mark and write their observation against each of them. It is best to use the observation template in addition to screen recording or session recording.

These observation sheets can also be easily incorporated into the report which will be presented to the product owners and development team.

As a Final Note

The above-mentioned points are helpful in optimally using the time available for conducting sessions. Having specific test scenarios increases the chances of getting significant insights around the targeted features. Reducing the amount of writing required for noting down an observation, frees up time to observe the user. They aim at improving the user experience of participating in and conducting user testing thus making the whole activity more fruitful.

What is UX Writing?

UX writing is a speciality within content strategy which emphasizes on the use of language in a way which helps and guides users to achieve their goal. This might sound like some fancy definition pulled off the internet, but what does it actually mean?

Before UX writing, let us begin with the type of writing we do for digital products.

  • Information
  • Feedback – error, success messages
  • Help and instruction.
  • Call to action

And there could be more.

These are everyday things we come across while designing or developing any software application. What’s the ‘UX Writing’ in these?

Let’s see an example of Information – empty state message.

There does not seem to be any problem with the way this message is written. There were indeed no records found in the database to show on this screen.

So, what’s missing here?

Let’s refer back to what UX writing is. It says –

“Use of language in a way which helps and guides users to achieve their goal”

When we extract the keyword HELP and GUIDE we can deduce that the message should be simple and easy for the user to quickly understand and it should tell them what to do next.

This brings us to the guideline for UX Writing: Clear, Concise, Useful.

1. Clear: Jargon freestyle which includes context

We often describe the problem in actual technical terms which can sometimes be incomprehensible or even intimidating for users. We need to demystify the problems and put them in a way which is relatable for them.

No records found. ——->No job applications have been created yet.

Here the record is a very generic term. It gives no context about what this screen is about. Using job application adds a context and it is a term that users can understand.

2. Concise: Efficient and easy to scan

By now we know that on the web, users scan the text instead of reading it word by word. So, making text shorter and scannable is better. Each work used should serve a purpose.

No job applications have been created yet.  ——-> No job applications created.

The words have, been, and yet can be removed without changing the meaning.

3. Useful: Help user to take next action

The messages should not only convey precise information but also guide the user to take the next step to achieve their goal.

No job applications created. ——-> No job applications created. Click on Find Job to start.

Now we are guiding the user to take the next step.

Bringing it all together with Brand Voice

To take product messaging to the next level, the product voice of your product needs to be defined. It can range anywhere from serious and professional to casual, even whimsical. The tone and language need to be in sync with the brand image.

The brand voice will help in deciding the balance between:

Clear – Concise – Language – Tone.

Why Angular 2

Early this year, I began on a self-righteous (but approved, of course 😉 ) journey to make things right for my project — to break all shackles and limitations that the team faces in working with older technologies, methodologies and guidelines. When I started off, my aim was to make as minimal-but-essential changes to the system as possible, keeping in mind that my project is a live one, having at least 100 MegaBytes of code, with around 16 developers contributed to this application — in batches, of course — in the past 8 years, each having their own signature style of coding. Needless to say, there were more than a few tasks for research in this journey of mine.

One such, important analysis was to decide what UI methodology should the team adopt going forward. This blog post will focus on the analyses and decision-making process that made it happen and finally helped me decide on Angular 2.

Continue reading Why Angular 2