Back to Insights

UX Patterns: The Elegance and Power of the Rank Order List

The Rank Order List interface pattern is an elegant solution to many of these complex use cases. When done poorly, it can be the death of a product but when properly implemented, it can become the standard for how a task is accomplished across an industry. What Is a Rank...


By Mike Storey

read

The Rank Order List interface pattern is an elegant solution to many of these complex use cases. When done poorly, it can be the death of a product but when properly implemented, it can become the standard for how a task is accomplished across an industry.

What Is a Rank Order List Interface?

Rank Order List (ROL) interfaces are simply user interfaces that present a list of objects that are ranked according to some criteria. Remember Google Inbox’s much-loved automatic category sorting feature? That’s a Rank Order List. So are search results from Google, or any of the social news feed applications like Facebook, Twitter, or Instagram. It’s a flexible approach to sorting and displaying different types of related data. Your interface may be best presented as one dynamic ROL of category cards (for instance, ranking a mixture of workers, machines or parts), or it may include a smaller ROL alongside static display items to surface important highlights in one category.

What Makes This Pattern So Powerful?

The flexibility of the Rank Order List pattern with regard to design objective requires careful consideration. ROL interfaces can be optimized to minimize interaction (Like Google, get in and out as quickly as you can with as few clicks as possible) or to maximize engagement (Like Facebook, keep you scrolling down the list for as long as possible). This pattern also provides a very open space for innovation in ranking and summarization.

Because ranking is a core machine learning use case, this interface is well positioned to benefit from ML. Search actions are naturally Rank Order Lists, so the interface is consistent across both “browse” and “search” use cases. Since the objective of the ranking algorithm is to put the data you are looking for at the top of the pile, this interface provides users a very effective way to interact with large amounts of data. Enhancements or improvements in the ranking algorithm can be implemented seamlessly and are typically invisible to the end user. Because the type or category of elements in a ROL can be fully flexible, it’s well suited to serving up a mix of information, and proper design of a polymorphic list member or “card” is the key design challenge that must be solved by most use cases.

What Makes For a Good Rank Order List Design?

The key is to know your intent. Ranking to optimize engagement is very different from ranking to optimize interaction. So your intent will guide your decision for where and how to implement a ROL.

For ranking, start with a group of related objects and sort on something simple like a last modified date. Then find ways to make incremental improvements. 

When optimizing for interaction, designing list member cards is key. Standardizing on key, essential pieces of information by item type is as critical to design success as a good ranking algorithm. Proper list card design and data normalization will allow a user to get everything they need for a significant number of use cases without even clicking on a card. Important, simple, one-step actions like approvals or rejections should be completable from a well designed member item card—saving your employees time and mental effort, which over time can yield large benefits.

When optimizing for engagement, a search feature is optional; however, when optimizing for interaction, having a functional search (typically with a simple search bar near the top of the list) is key. You may design to have all the right information at the top of the list by default, but in instances where you can’t anticipate all use cases (every application ever) a search function is key, and it blends seamlessly into the interface design pattern. As with any search pattern, effective use of content tagging will make search more effective, but with a ROL it can also leverage machine learning to improve personal interest ranking optimizations.

Sample ROL Use Cases
So how might a rank order list be employed to intelligently serve up content to different users?

Steve the Shop Manager

Steve is responsible for running the business, from talking to customers and giving them quotes, all the way through closing the sale, assigning work, and collecting payments. His rank order list is likely to prioritize new incoming requests, past due work items, and pending invoices. This helps Steve get in and out of the application and get on with his day, without having to do complex searches and reducing the risk of missing important items. 

Freddie the Floor Worker

Freddie is responsible for doing the work assigned to him by Steve. This usually involves getting items out of inventory, completing tasks, and reporting progress. His list may be comprised of past due or upcoming tasks, pieces of inventory that need to be restocked, or a specification card giving him details related to the current task he’s working on.

Cathy the Consumer

Cathy is a customer of Steve’s, and has subscribed to a weekly email newsletter to learn more about Steve’s industry. She wants information most relevant to her interests, so in her case a rank order list algorithm may be responsible for selecting and ranking of content tailored to her preferences and historical click-through data.

How Do You Measure Effectiveness?

Again, know your design intent. If your design objective is to optimize engagement, measuring the time interacting with the list is the obvious measure of success. One note on this: emerging research on social media patterns shows this to be a rather insidious design pattern which may lead to applications that take advantage of habit-forming behaviors to addict users to content. For consumer-focused applications, this means your design intent should go beyond raw engagement if you are truly seeking to serve your users. 

If, on the other hand, you are designing to optimize interaction, then short visits are better. For a system dashboard that highlights important errors to be addressed, optimally your user can visit, see, and make core actions right away, without scrolling. For consumption, a scroll without a click is a victory for card design, and a click without a scroll is a victory for interaction rankings. Using these measures you can always guide enhancements to improvements in either card design or ranking algorithms. 

In general, you know you have room to review and improve either your overall interface design or the ROL itself when your interface becomes either too cluttered or your users request too many additional controls like complex filters. Are your users confused by the data mixture of your ROL? Perhaps you need to break out a subcategory and form a secondary ROL, or display less important information in a static form. Is your UI cluttered and confusing? You likely need to consolidate some object displays with an intelligent ROL.

If content is not searchable (unlikely) then filtering or folders can easily be added to the interface. While these types of features can fit nicely within the design pattern, they can be an indication that there are underlying design problems, or they could indicate how deeply entrenched user habits are in your use case. This isn’t insurmountable; after all, how long did it take Gmail to convince you that a good search function meant that you don’t need folders to organize your emails? 

Conclusion

Rank Order List User Interface Patterns have the power to help users find the information they’re looking for more quickly--or without even looking at all, so that they can get in and out of the technology quickly and effectively. So if your organization is looking to engage internal or external users through user-centered software design, the ROL design pattern may be one of the components that supercharges your solution.

Mike Storey
Mike serves as Chief Technology Officer at Worthwhile. He leads in oversight of Worthwhile’s technical guilds and in the development of modern, cloud-native architectures, as well as being an advocate for Worthwhile’s Design Thinking practice. With over 30 years in software engineering and IT operations, Mike has the experience and passion to help our customers innovate.
FIND Mike ON

Request a Free Consultation

Get Started Today