UI for Favorites


Wanting to remember things is very human. We want to know what we saw and where we saw it. This goes back way before computers or mobile and we solved it many different ways before. Starting with writing on walls to carving in wood to putting it down on a napkin or on a post-it note. They all serve the same job and helping us remember.

Besides writing things down, we also collect. Remember how you were collecting stamps, bugs or stickers and putting them in your special box. Remember the photo boxes, that got taken out on family occasions. These collections are very personal and dear to us.


There are no new jobs, it just changes how we do them

By this I mean we still need ways to recall previously seen information and we still want to collect items. It might not be the same way we did it before, but we act with the same goal in mind.


One part of the story is how do I remember things to come back to. In a mobile world this is very common, just because of how and when we consume on our phones. When we have a little time, during commute, staying in the queue or waiting for someone, we pop the phone out and check Twitter or Facebook, we basically consume content. A lot of times when we like what we see we can’t or don’t have the time to read it right then and there, but we do want to save it for later.


This is where the bookmarking mechanism comes in, making it easy for users to remember things for later consumption. This is especially important if you are in a more restricted environment. The web had this baked into it from the beginning. Every content published has a unique address – URL – which is basically a reference and it is all you need to know in order to get access to it at any time.

Modern operating systems and widely adopted sharing mechanisms help us remember. Plus there are services like Pocket, Pinterest which basically solve this issue for the user, however sometimes it makes sense to keep them a bit closer to your vest.

Go figure out if that is common between what users want to do and provide them with means for doing it.

Curating content

Another aspect of this is collecting. People like to collect things. This gets back to why we loved to collect when we were kids and why as adults we are still doing it. This is a different job than remembering the “what and where” but is related.

You will have to learn about the motivation of the user, why are they collecting content, what is the goal. If you find out, you will know what language to use, you will learn what the job is and know what to improve, add and take away.

Credit: PCWorld

Credit: PCWorld

A couple of things to remember

  • Be consistent in your language. Don’t call it favorite in one place and bookmarks in another place. It sounds pretty straight forward, but you won’t believe how many product builders don’t pay attention to this.
  • Star and heart icons work pretty well. Don’t mix and match, stay consistent. Make sure the state of the action button communicates if the content was added to favorites or not.
  • Provide feedback to the user. In some cases popping a small non-intrusive message like ‘Added to favorites’ does the job well.

Use language that make sense

Sometimes using the term favorite or bookmark might not make the most sense. For instance in an e-commerce experience you might want to collect things in a Wishlist. It might be that the pink running shoes are not your favorite shoes but you need them, thus you add it to the Wishlist. Remember context… maybe it should be named shopping list?!?

See an interactive demo of Adding to Wishlist

See an interactive demo of Adding to Wishlist

Make it visible

If the favoriting action is something that users are usually interested in doing, make it prominent and visible. If it provides a lot of value to the user, make it easily discoverable.

See an interactive demo of Favorites

See an interactive demo of Favorites

Use blank states to your advantage

Blank states are a rare opportunity for on-boarding. Learning is at its best when you don’t think of it as learning. Your goal is to build interfaces that users can easily figure out by just doing.

If favorites play such a huge role in the user experience, you will probably have them easily accessible. When starting out you could populate it with some content, but that is not a good idea all the times, you want to have the user do it. It makes a lot of sense to introduce the concept at this time while the user is in context. Use copy and images and be succinct in explaining how the bookmarking mechanism works.

See an interactive demo of Blank State

See an interactive demo of Blank State

There is so much content out there for consumption, help your users remember and make it easy for them to create and manage personal collections.

If you are looking for quick, no-hassle solutions that can be literally implemented in minutes, check out the products we provide at Mobiscroll.

Start building better products
Sign up and get posts like this in your inbox. We respect your time and will send you only the good stuff!