Achievements in UX/UI Design

You are doing so great; you’re top of the class! Don’t you just love to hear a compliment like this? We’re all human, and this is the way we are wired. We thrive on accomplishment. Whether you want to be better than everyone else or simply be better than your former self, knowing your achievements is essential for keeping on doing whatever you are doing. As a designer of digital user interfaces, you don’t need big pots of prize money to get users to push themselves. Displaying achievements will help you—and them—do just that.

The Design Problem

People often like to see how they are performing in a particular domain. This can greatly improve the user experience and encourage users to continue using your website, invest more time carrying out tasks, or get involved in an online community. Indeed, being told how they’re doing can spur them on to involve themselves at a deeper level—the problem is finding the right way to reach them as a target audience.

The Design Solution

Providing users with information relating to their performance levels, such as the number of positive reviews you have gained from your peers or other users, can give them the incentive to persevere with a task or a range of tasks, depending on the nature of the experience. In addition, you could offer users the opportunity to gain collectible achievements, such as 'medals' or an elevated status within an online community, as is the case on the e-commerce site Amazon, where a user can become a 'Vine Voice' member or a 'Top 1000 Reviewer', or even enter the 'Hall of Fame Reviewers'.

Author/Copyright holder: Amazon. Copyright terms and license: Fair Use.

The Amazon website allows users to earn badges for the reviews they provide. Reviews are important to the user experience of Amazon customers, so leaving a review is a behavior that they want to encourage. Here, the achievements in the form of badges are combined with the leader-board design pattern so as to encourage a feeling of competition.

Why Choose an Achievement Design Pattern?

When you are trying to get users to make purchases or use a product more frequently, collectible achievements can provide the impetus to do just these things. For example, if you are running an online gaming community where users buy accessories for their characters, providing them with a collectible achievement on the tenth purchase gives them a small enticement to make the extra purchases necessary for reaching this point.

Displaying and offering achievements is also a good way of leading users to explore different aspects of your product or website. If the users can see their statuses gradually changing as they discover, use, or buy different things that you are offering, they feel a sense of involvement in the whole process—and they feel rewarded for their engagement. Each little reward takes them a step nearer another goal, such as the next status achievement or a virtual trophy or medal, encouraging them to keep going and to do whatever is necessary. Therefore, you are able to lead them through the challenges, products, or aspects of your website or online community in a way that best suits you—introducing them to elements or items on offer that they might not have necessarily come across if they had not been provided with the incentive to take a certain path through the contents.

Collectible achievements can play an important part in the online community user experience, helping users differentiate themselves from others or enter a select group of individuals. By displaying the rewards and achievements they have collected over their time as active members, other users can see how trustworthy they are, how involved they are, and how highly they are regarded within the community, among other things. They also serve to boost the users’ egos, giving them a sense of status and attaching value to their involvement.

In a more general sense, achievements also serve to show these users’ histories within a community or website—providing them with a clear and apparent list of activities they have successfully completed and showing other users a little about each person's engagement. Giving users the facility to trace their activities has the benefit of both showing them what they have done so far and what they need to do so as to progress to the next status or collectible achievement. Within this dashboard of achievements, you as the designer might include a gauge to represent how close to the next achievement the user is—again enticing that person to persevere with the website, community, product, or service.

Author/Copyright holder: Strava. Copyright terms and license: Fair Use.

You can use achievements to encourage users’ engagement within a community, such as the Strava community of cyclists and runners. In this community, users can receive kudos from followers for each exercise activity they log. The amount of kudos someone receives is perceived as the achievement, beside the actual achievement of the physical exercise.

Best Practice: How to Implement Achievements

Achievements and collectibles are used to represent many different actions, challenges, and other abstract things, so the implementation will vary according to each particular use. They speak to the process of gamification, where we as designers weave game-like features into practical applications so as to encourage user engagement. However, they are employed primarily to encourage users to perform tasks repeatedly, whether this involves engaging with others in an online community, leaving reviews on an e-commerce website, completing online gaming challenges, or any other act that helps enhance your website, product, or service as a direct result.

“The reward for work well done is the opportunity to do more.”
—Dr. Jonas Salk, American medical researcher and virologist

Therefore, the underlying psychology of using visible and collectible achievements remains the same across all these instances, and, for this reason, there are a number of general characteristics that apply to all particular uses, which are as follows:

1. Establish the different challenges and tasks you wish the user to carry out. Identify the order in which users are meant to progress through these different tasks or challenges.

2. Once you have determined the different stages involved in the experience of your online service, you must assign logical and meaningful collectibles or statuses to each achievement. There is very little incentive for users if the collectibles and statuses seem to be randomly linked to the achievements; so, you must make the act of acquiring achievements meaningful in some way.

3. Make sure that the nature of the achievements is appropriate for how you are going to use them. For example, it would not make much sense to use statuses such as ‘Prince’, ‘King’, and ‘Queen’ for a website review system that rewards users for the number of reviews they leave for furniture. Likewise, it would not be fitting to offer collectible achievements, such as progressively more deadly weapons, if users are involved in an online community for My Little Pony. Therefore, it is important that the achievements and collectibles are not only meaningful in the established hierarchy (e.g., bronze, silver, and gold) but also in terms of the way they are being used on your website or product.

4. The achievements and collectibles should reward users for their continued activity, right from their first use. For this reason, you must design the achievements in a way that makes the collectibles, statuses, or any other benefit of repeat use ordered so they are linearly more rewarding. You will soon lose a user's interest if he or she achieves the highest possible status within a few reviews, posts, challenges, etc. Therefore, it is important to use a 'drip-drip' approach, only giving users the rewards as and when they have hit certain targets and gradually giving them achievements, rather than inundating them with virtual rewards for the smallest of things. You can use statuses that have progressively more prestige attached (e.g., ‘Soldier’, ‘General’, ‘Commander’) or collectibles that have a clear increasing value (e.g., precious metals, perhaps from tin up to platinum).

5. Establish and make apparent how exactly users achieve a certain status or acquire a status or collectible. If the users are unaware of how to attain the different statuses or collectibles gradually, the whole process may seem arbitrary and carry less interest for them. Therefore, from the outset, you must make it clear to the users which challenges or tasks they must satisfy in order to progress through the achievement hierarchy.

   

   Author/Copyright holder: Fitbit. Copyright terms and license: Fair Use.

   The Fitbit dashboard shows what a user must do to achieve the next badge. Although the names of the badges are connected to the category of achievements (snow boots in the case of daily steps), the names do not reveal where in the achievement hierarchy each belongs. This may make the process of earning badges seem somewhat arbitrary. However, Fitbit hits the nail on the head with its other badges, such as awarding users who make 990 lifetime miles with a ‘New Zealand’ badge, 1869 miles for ‘Japan’, and so on.

6. Display the user’s achievements so they are immediately apparent upon attaining each collectible or improvement in status; if these things are hidden from the user or tucked away in a separately accessed region of the user interface, then their value is greatly decreased. In addition, when there is some benefit from seeing the status and achievements of others, ensure they are clearly visible in the user's profile or at a point when they become useful to others, such as the person's reviewer status.

7. If the user is able to attain many different achievements, you may want to show a scaled-down list on the user's public profile and provide a separate dashboard showing all of the different awards, collectibles, and achievements the user has gained over time.

8. Test how the users behave with the achievements and collectibles on offer; if they do not seem to be encouraged by the ones currently on offer, you will need to determine whether they are visible enough or you might need to include some new achievements to entice them.

To help you get started implementing achievements, you can download and print our “Achievements” template:

Advance Your Career With This Free Template for “Achievements”

Your name *

Optional

Please provide your name.

Email *

Optional

We respect your privacy

Please provide a valid email address.

Get 1 powerful email each week: Learn Design and AI From the Best. Get 1 powerful email each week: Learn Design and AI From the Best.

Download Free Template

Potential Problems with Achievements

Collectible achievements can be a persuasive addition to your design, but their effectiveness is greatly dependent on the quality of the incentives minus the level of effort required to achieve them. If the achievement rewards are arbitrary, inappropriate for the application or setting, difficult to access (i.e., they do not appear immediately in the user's dashboard or next to/in their profile), or simply lack visibility, in all likelihood the user will feel no more engaged than if there were no achievements available. Therefore, although the achievements might require the user to carry out a task a certain number of times, there should be minimal effort involved when accessing, determining, or displaying these achievements.

The Take Away

Achievements are an excellent way to persuade users to engage with your design. People always like to see how they are doing and always like to feel like they are growing or moving forward. Achievements can appear as badges, kudos, or any other type of collectible suitable for the audience. When implementing achievements, you must take great care in creating a system that gives a user a true incentive to keep striving for improvement. As always, testing is the best way to find out if your design gives the best user experience. Overall, arriving at the most suitable design to salute your users’ efforts without patronizing them, confusing them, or otherwise taxing their patience will be a large part of keeping them engaged as you add a realm of gamification to your designs.

References & Where to Learn More

Jenifer Tidwell, Designing Interfaces: Patterns for Effective Interaction Design, 2010

Martijn van Welie, Pattern Library, 2008

Hero Image: Author/Copyright holder: Klout. Copyright terms and license: Fair Use.