Leaderboards

We humans are competitive creatures, and creators of successful online games and sports applications use this knowledge to egg us on with leader boards. However, as a designer, you can apply leader boards in so many other situations to encourage users to engage more, or produce better output. Trust that no-one wants to finish last, however fun or ‘non-competitive’ your subject matter may seem, and implement this simple design pattern to boost user interaction with your designs. Do it well, and you’ll find yourself driving increased user traffic and your product becoming the centerpiece of an entire network of communities.

The Design Problem

You have a highly competitive community where current standings would give users the incentive to try harder and use your product or service more frequently. Nearly everyone’s unknown to each other – so the achievements each user makes are known only at home. Without a frame of reference and especially for those who aren’t used to competing with themselves, how can they drive themselves to do better, let alone outstandingly?

Author/Copyright holder: Twitter Counter. Copyright terms and license: Fair Use.

The Twitter Counter webpage shows a leader board of all Twitter users, according to the number of followers. This is part of the free tools they provide, besides the paid tools to increase the social reach of individuals and companies. Although Justin Bieber might not be preoccupied with taking over first place from Katy Perry, leader boards generally have the ability to encourage increased use of a product or service.

The Design Solution

A leader board, containing a list of rankings representing performance in a particular category or overall standings, helps to show users exactly how they are performing in relation to others. Having a visible score has the added benefit of allowing them to track their own progress, so even if they have dropped a level, they might have the consolation that at least they’ve improved on their own scores by a fair degree since the last check-in. The inclusion of a leader board can increase competitiveness between the users and drive up the frequency of use of your product/service. Examples from leader boards in user interface design include online gaming communities, online courses (such as the leader board in the IxDF courses’ “Meet Your Peers” section), Amazon's list of top reviewers, and Twitter Counter’s list of top tweeters, as seen in the image above.

Why Choose a Leader Board Design Pattern?

“If you’re a competitive person, you don’t stop. That stays with you. You always look over your shoulder.”
—Magic Johnson, American Basketball superstar

There’s a saying that goes, “I’m only in competition with myself.” That’s all well and good, and let’s be clear that we have no issue with that—striving for a personal best is indeed an essential driving force within people, one that can involve anything from mountain climbing to lowering blood pressure. Here, we’re focusing on competitive communities, hence relative rather than absolute performance – in those, leader boards can encourage users to continue using your product or service as they strive to improve their standing. Making clear to users how they are performing compared to other competitors is vital here. Imagine playing a game where you never see the other person's score: you would never know when to push yourself harder, or whether you are playing better than the other users. Therefore, leader boards provide a visible and concise way of displaying relative performance levels, which can motivate users to try harder and persevere with your product or service.

Author/Copyright holder: Interaction Design Foundation. Copyright terms and license: Fair Use.

We use leader boards in the Interaction Design Foundation’s online courses, to encourage course participants to compare themselves to their national and global group of peers.

Best Practice: How to Implement Leader Boards

1. You will only need to show users the top performers (e.g., the top 10, 20, 50, or 100), rather than a complete list. To show users how they are performing in relation to others, place the user name and current position of each user who has made the ‘cut’ on the leader board. For example, if you are displaying the top ten players in an online football game, you could put the user’s name and the number of his or her current position at the bottom of these, but make sure the user's position is highlighted and distinguished from the other players, so that user can immediately identify the personally relevant information. Alternatively, if the user is number five in a ‘top 20’, you could just list him/her fifth from the top, complete with score below.

2. 
   

   

   Author/Copyright holder: Darren Foreman. Copyright terms and license: CC BY 2.0.

   Traditionally, leader boards are used in games. In the Angry Birds leader board shown here, users can select whether they want to view the global, national, or local leader boards. Also, any of the users can choose to view the leader board specific to his or her friend group.

3. Where appropriate, you might also wish to show users further leader boards, such as a 'Hall of Fame' (representing the best performers ever), or a day-by-day, week-by-week, or month-by-month breakdown.

4. Filters can also improve the user experience, allowing users to view select groups of competitors, such as friends, family, or a customized list of rivals. This way, the user can view the desired competitors without having to search for them in a much larger list.

To help you get started implementing leader boards, you can download and print our “Leader Boards” template:

Advance Your Career With This Free Template for “Leader Boards”

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 Leader Boards

For sure, leader boards can be a useful addition in competitive online communities, but users might find ways around investing time and effort to reach the top, using sneaky measures and devaluing the meaningfulness of the leader board. For example, cheats to online games are described in blogposts, and users leave reviews on e-commerce sites to jump up the leader board without necessarily using the products they are reviewing. Distortion is another sticky area. Some fitness trackers, for example, can be fooled due to jerky hand movements that get counted as steps. So, regardless of the point that it still takes energy to wiggle his hand a few hundred times, a user may fool the system into believing he’s walked a fair fraction of a marathon when, in reality, he’s been wiping down every surface in the house, throwing a tennis ball from hand to hand, or any number of other activities that cause a step count to rise without actually stepping. Leader boards can also lead to disappointed users when they merely represent a scale of the amount of time users have invested playing a game or using a service, rather than a true measure of the different users' performance levels.

Leader boards can be inappropriate to use in certain cases when encouraging a competitive atmosphere can harm a small group of users. For example, you should reconsider using a leader board that ranks people based on their number of Facebook friends. Such numbers can all too easily become hollow boasts, as they don’t reflect the true substance of what they appear to be (e.g., gaining 128,000 true ‘friends’ at the dictionary-definition level of ‘friend’ tends to be a little unlikely in, say, fewer than a hundred or so lifetimes). At the same time, having a leader board is acceptable when doing the same based on Twitter followers. There is a fine line between ranking people based on what they do and who they are. In the first example, people at the bottom of the list ‘lose’ due to something they can’t be expected to control in full. In fact, the more earnest users will certainly get bumped down the list by those who have no regard for the division between ‘friend’, ‘acquaintance’, ‘hanger-on’, and ‘reciprocator’ (a person who mutually ‘friends’ someone in order to raise the numbers of both’s ‘friends’). Other areas to consider include numbers of likes on social media. While perhaps not as divisive as ‘friends’, they can still carry a potential ethical dimension vis-à-vis including a leader board for them – people can hire shills, meaning they can buy likes from others, and distort the actual worth of what is being liked. You have a responsibility as a designer to consider all perspectives of a design decision and not make your users feel like losers.

The Take Away

With the leader boards design pattern, you have the ability to motivate users to step it up. Most people possess at least a little competitiveness, which you can exploit by displaying how they are doing compared to others. You don’t need to show a full list of all participants to get this result, but your users may be interested in different types of leader boards. Trusting that your users will not cheat, and staying mindful of realms of human life where competition is counterproductive, unethical, or both, it’s a wonderfully effective design pattern to persuade them to be active and contribute on your platform, potentially creating a win-win situation for all concerned.

References & Where to Learn More

Hero Image: Author/Copyright holder: Andrew Malone. Copyright terms and license: CC BY 2.0.

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

Martijn van Welie, Pattern Library, 2008