I need to create a visual list of items from which user can select the items they want to add to favourite items.

Selecting items must work on both mobile and desktop. Therefore app is implemented as website. So some of the means to select items on mobile apps may not be applicable.

Selecting items is used by teachers to plan what they are teaching in a semester, so it is not used often. Selecting should be easy to grasp just because it is used rarely. In addition to selecting, teachers also must be able to access additional info on items presented on the list. This access to additional info is used more often.

I've tried to look for examples of this kind of selection but selecting and accessing additional info are almost always combined as a card. But our client is adamant on everything on the app being very visual and everything should be visible immediately. So cards are out of the question.

I could either make the selection persistent and add a way to make selection on every item. This adds visual clutter to the view.

enter image description here

Or I could make the view have two states: select and read. It adds less visual clutter but feels cumbersome.

enter image description here

enter image description here

  • 1
    does the user need to both drilldown into a detail for each item, or just select at the surface level? Also, your mock essentially is a card view at the moment, but just circles instead of rectangles. Do you expect a lot of items to choose from?
    – Mike M
    Commented Oct 22, 2020 at 14:13
  • Yes, there are details on every item. And I do realize the similarities with cards. :D There are 13 items at the moment. Number of items may increase but wouldn't be over 20. Commented Oct 22, 2020 at 14:20
  • 1
    I think data is missing from your question. How extensive is the info? Is there a maximum number of elements in the information? The information is only text or there are images, buttons with access to other items, yes, no or cancel buttons, etc.
    – Danielillo
    Commented Oct 22, 2020 at 14:30
  • 1
    Also, is adding to favorites really what's happening, or are they submitting the course to add to a 'teaching load' of some sort? what happens once they 'favorite'? You're referring to both select and favoriting, but i'm wondering if the interaction is select > adding to their course load... or, just viewing details of a course if they are not modifying a course load at that time.
    – Mike M
    Commented Oct 22, 2020 at 14:50
  • @Danielillo as this is a tool for teachers to plan what to teach, and how, there are pages and pages of additional information for every item. Commented Oct 23, 2020 at 6:16

2 Answers 2


I'm not sure if I understand the use case fully, but it seems like there's an interaction if a teacher selects. I'll update my answer if I misunderstood.

Either way, there's a list of objects (courses) that need to be viewed. I've added a sort on the top right. This way the user has a say in what's ordered.

What's less clear is the path of interaction you're trying to guide them through.

selection, then saving (enabling actions)

In that case, you could use a table, or a set of cards (conceptually they are the same, but different graphic devices), using an open checkbox.

Selection implies an interaction is to follow (CRUD actions, adding to a set). Checkboxes are ubiquitous as a multiselect control.

Once the teacher selects, they have the ability to add this to their teaching curriculum. Clicking anywhere else on the card can take them to a detail view.

Once they've selected, you surface the potential interaction (in this case, adding to their teaching plan). They can cancel out of the interaction at any time.

enter image description here

marking as favorite (distinguishing preferred items)

Favoriting is often used as a way of quickly differentiating items important to a user, as a way of quickly getting to a collection that the user has curated. Favorites can be searched and sorted on in many applications.

enter image description here In this case, you could just use a fairly familiar icon (like a heart) in which the purpose of favorite does not imply a further interaction, but you could sort a list of the courses

drilldown into details

Either solution uses a common device on mobile, which is > which informs the user there is a drilldown for the item displayed. This way a detail view has a unique URL (shareable and bookmarked if need be) and exists as a page with as much detail is needed about the course.

  • Implicating the drill down action on items is a great point. As is linkable url. For the selection to teaching curriculum, I had that kind of "shopping cart" functionality in mind but this one is more straight forward. Commented Oct 23, 2020 at 6:31

I think a good solution widely used in e-commerce is flip cards. In desktop webs they are activated by hovering and in mobile apps with number of clicks: one click to select, another click to see the info and a third click to deselect the card.

enter image description here

Example source: https://codepen.io/roppazvan/pen/EZVLEy

  • This might be useful if I use this to show actions (read / select) on the flipside. It also keeps the initial item list view visually clean. But there should be some indication to user they can flip the card. Commented Oct 23, 2020 at 6:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.