Getting the Users Attention using HTML5 based Advanced Animations - Page animation package blog

Contents

Engaging Your Users With Well Thought User Interfaces

The Problem of Cluttered User Interfaces

Leading Your Users

Engage the Users in the Important Actions

Using Advanced Animations to Engage the Users

Future Work

Engaging Your Users With Well Thought User Interfaces

Web sites exist with some purpose defined by their creators. Usually the purpose is to lead the users to perform certain important actions, like for instance, reading articles, posting comments, buy products for sale, etc..

The main role of the user interfaces is to lead users to engage and perform those actions. That is easier said than done because users do not always get the user interfaces in the same way the site creators conceived them.

If the users do not engage in the actions the site creators hoped, either the users got the point but did not feel compelled to engage on those actions, or they did not get what actions they were supposed to perform.

In either case it is a tough problem because often the users leave the sites without giving you a clue about why they left. This problem requires more research to figure well thought user interfaces should be created to lead the users where they are supposed to go.

The Problem of Cluttered User Interfaces

For now lets focus on possible reasons why the users leave when they do not get the point of the user interface.

Sometimes the problem is that there is too much information to show to the users. Different users may have different interests and intentions, so you are tempted to present all the information they may want to see along with all the links, forms and buttons they may need to use to do whatever they want.

In this case, if the users do not get the user interface it is not because the information is not there. They just failed to see what they wanted. It may seem that it is the user fault, but in the end it is a loss not only for the user but also for the site that failed to engage the users.

Cluttered user interfaces may seem to be terrible but they are very common throughout the Web. It is hard to figure how much information is too much information for each type of user that comes to a site.

Sites that bet on cluttered users interfaces are too ambitious because they present too many alternatives of action to the user in the same page.

A more personalized user experience would be better to give what the users need. However it is not easy to always figure what the users want in every situation. That is why this is a tough problem to solve.

Leading Your Users

One way to simplify matters is to divide the content of a page in two groups:

1. What do you want the users to know?

2. Where do you want the users to go?

These are all the possible actions that users can perform on each page.

Once you figure what you want the users to know where do you want them to go, you need to layout the information and the calls to action in such a way that it leads the users where do you hope them to go.

Engage the Users in the Important Actions

As mentioned above the problem of cluttered user interfaces is that they are too ambitious, as they attempt to present too many paths of action to the users.

This results in the fact that often the users do not pay attention to most information that is in the pages. They end up paying more attention to what has more emphasis.

Since you may not be able to get the user attention to everything, lets give priority to what is more important. You can follow two approaches:

1. Cut off information that is less important

Reduce as much as possible the information that is not really necessary, or at least present it in a more succinct way.

2. Give special emphasis to important messages

Both approaches described above where implemented recently in the system of missions and levels implemented recently in the JS Classes and PHP Classes sites.

This is a system that was implemented with the goal of guiding the contributors of the sites through a series of tasks that will allow them to get more visibility and recognition for the work they share in the sites.

This system exposes two main types of pages: the status pages and the briefing pages. The status pages tell the contributors where they are in the levels they have gone through so far, as well what missions they can accomplish next to complete the current level. The briefing pages tell in more detail what they need to do to complete each level mission.

These pages may also present them additional information, like how many users completed the current level they are or the mission they need to accomplish, the badges they earned so far, the levels and missions they completed before, etc..

The goal of these pages is to encourage the contributors to continue to the next mission or the next level. Some information details presented in the pages are more important than others. So, we need to give more emphasis first to what is more important.

Increasing the text font or using bold tags to make the text messages more noticeable may work to some degree. However, the important messages were not looking outstanding enough.

The solution that was implemented to give greater evidence to the important messages was to resort to special animations around those messages.

This Page Animation package was enhanced to include new types of animation effects to really get the attention of the users to the messages. Some effects were inspired in the way people take notes and highlight important pieces of information annotated on paper.

Lets take a closer look at the types of animations that were used in each case.

Double Underlining Achievement Messages

The page animation package implements an effect called Emphasize. This effect uses HTML5 canvas objects to draw some graphics around a given page element.

Several emphasizing methods are supported. In the status page it was used the double-underline method to make the message appear as if somebody is using a pencil to underline the achievement message twice.

The idea is to tell the user that it is really important that he achieved a certain level, mission or badge.

Circle around Call to Next Action Messages

Another method supported by the Emphasize animation effect is called circle. An incomplete circle or ellipsis is drawn around a given message.

This method was used to tell the user what he needs to do next. Usually it appears around call to action messages that basically tell the user to move on to the next mission or level.

Slide in to Expand Message Details

Some information requires more details to be better understood by the users. Showing the whole information at once would clutter the user interface. The user would probably not pay proper attention to the important messages.

A way to make it more convenient is to collapse part of the details and show an arrow pointing down to hint the user to click on it to expand the message details.

The SlideIn animation effect was implemented with this goal. It can make a given page elementto slide in from the top as if it is being expanded.

This effect was used to show more details about the next missions that a contributor can accomplish to complete the current level.

Easy to Understand Progress Meters

Users are very eager to get feedback from the actions they perform, especially when some kind of reward is at stake.

One way to show progress is to present a progress bar. It provides easy to understand visual information of how much was done and how much remains to be done until completion.

The status page can show a progress bar to give an idea of the percentage of missions that were done in the current level.

The progress bar is animated by a separate component that shows the bar level increasing smoothly until it reaches the current percentage.

The smooth progress bar was integrated with the page animation package by the means of a separate plug-in, so it could be used as a part of a more complex animation sequence.

Another way to give feedback about the user progress is to show important numbers with greater evidence, like for instance animating the numbers as computer game score on which it starts from 0 and increases smoothly until it reaches the current value. This kind of animation is implemented by the ProgressNumber effect.

This effect was used to get the user attention to the message that shows how many users completed the current level or mission the user is in progress of completing.

The important detail of showing the number of users that completed a mission is that it gives social proof to the user that other users are engaging and he may do so as well. Social proof is a very important persuasion tool.

Automatic Scrolling to Make Information fully Visible

Sometimes you need to let the users see information that is not fully visible because it did not fit in the browser window, so the user would need to scroll the page to see it.

Sometimes that is the case of information that appeared on the page after the user clicked on the link to expand an information section that previously had the some details collapsed.

The users may scroll the page by themselves if they realize there is more information out of the visible portion of the page. But if they are not aware that the information is important, they will not scroll the page by themselves.

The MakeVisible animation effect can do that automatically. Just specify a given page element and it will scroll the page enough to make that element fully visible.

Smoothness to provide Visual Comfort and Inspire the Trust of the Users

As you may notice, many of the implemented animation effects work in a very smooth fashion. This was implemented on purpose for two reasons.

First, if you show information on the page that appears all of the sudden, the user may not notice. Making it appear smoothly will give the user time to notice new content appearing on the page.

The second reason is related to the user perception of the quality of the site. The fact is that many sites do not go through a great level of polish. So when users see a site being presented with smoothness, it gives the user a perception of quality of the work of the company.

When the perception of the user on the Web site is of good quality, the user tends to trust more the site and engage more on the proposed actions.

Apple has been a company that has invested a lot in making their products look smooth. In some cases they preferred to slow down background processes to make the foreground applications look smoother.

This fact certainly motivates many users to buy Apple products instead of others of competitors that haver products that are not very smooth.

Future Work

The page animation component already implements many types of interesting effects that you may see in the demonstration page.

It will continue to evolve by adding more types of animation effects. That will help Web applications give better feedback to guide the users and to engage in important activities.

You can also develop plug-ins that implement new animation effects for your own Web applications without needing to change the code of this page animation component.

For now only some of the currently supported animation effects take advantage of HTML5 elements like for instance the canvas objects.

The quality of the results encourages to continue the development and implement more effects that take advantage of HTML5 and CSS3 animation possibilities.

If you would like to suggest new effects for future versions of this animation package, or if you have a question, or you would like to say something about these topics, feel free to post a comment about this article here.