2

My client is a large enterprise that designs its web pages on the basis of their Design library. Trying to create a Catalog for all their internal apps. After several discussions we came down to this design and it was accepted.

enter image description here

I was wondering what interaction would be correct one when the user clicks on the favorite icon. I decided creating a new section when the firt App was favorited. enter image description here

What would be the right way to go?

If we step back a bit, the client wants a clean catalog of its internal apps listed based on the user profile who logs in using ( SSO ). How can I help user see their recently viewed and favorites together.

Any Suggestions

2

Don't move it automatically. If I'm halfway down the list and think "Oh, I like this one!" and click the star, I would be very frustrated if it disappeared from sight. I would instead just provide feedback that it was added to the user's favorites list by filling in your "favorites" icon.

Additionally, provide a way to filter by favorites. If the thing I want to see is in my favorites and I know it, don't move it somewhere else for me, but allow me to filter out the ones I don't care to see (i.e. non-favorites).

  • I agree to your points. However, stakeholders claim to have "Favorites" section to be part that matters to Power users. They did not agree to have the favorites part hidden by default. So for normal users we need to show "My system apps". While for power users "Favorites" should be the primary feature. Now having the favorites toggle selected by default for Power users seems to incorrect to me. How can I cater to 2 different set of audience? – Nodnin Jun 9 '16 at 12:37
2

This is a pretty common interaction on a lot of shopping websites and the norm is pretty much always:

  • If user clicks/taps on open icon (default), turn open icon to filled icon and add to favorites.
  • If user clicks/taps on filled icon, turn filled icon to default and remove from favorites.

Moving the products to a separate section during the interaction would be a very jarring experience and make correcting mistakes hard to do (e.g. user accidentally favorited an item she didn't mean to, now she has to find it in a new location to remove it).

You could potentially also add an intermediate state that shows a clear indicator that shows that something has happened. For example, a message that appears and fades away in 2 seconds or something like that.

favorites states

And as @maxathousand said, provide a way to toggle the view to show only the favorites, recently used, or all applications. This should probably go on the same hierarchy as your search field as it accomplishes a similar goal.

  • I agree to your points. However, stakeholders claim to have "Favorites" section to be part that matters to Power users. They did not agree to have the favorites part hidden or distributed among the other apps. How can I show the favorites and if possible recent apps used, without making the page look like rows of cards? So for normal users we need to show "My system apps". While for power users "Favorites" should be the primary feature. Now having the favorites toggle selected by default for Power users seems to incorrect to me. How can I cater to 2 different set of audience? – Nodnin Jun 9 '16 at 12:42
1

I would add a ♡ when the item is not selected, then give it an action color like this ♥ when its favorited.

Use a bright success color like green or yellow or anything else that works with your theme or template, when the user clicks add some transitions or animations so that the color eases into the outlined heart and the user registers the event while it happens.

heart icon = standard favorite icon for most websites/apps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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