What is the best way to indicate that an object (of varying shape and size) is currently selected in a touch interface such as the one below?

enter image description here


What happens when you select an item?

If you are to just show the selected item, you can have a contrasting color in the background. enter image description here

Assuming it is a shopping site, you would want to provide action icons like "Mark as favorite", "Add to cart", etcetera. In this case, no additional styling for the selected item would be required. enter image description here


Add a selection outline with the height of the slider like this:

enter image description here

Since the item will never exceed the height of the slider, it should work.


Can have a variant too with the available JS frameworks and libraries, loading the content is taking negligible ms which helps us change the data in just a wink.

With the above speed, we can also go for another variation where more data can be shown to the user without much navigation between the pages and also by using the minimal space available between the slider height and width a mock up

The left and right nav buttons can be used to check the next and previous item. The User can also change to the default view by jus closing this view.

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.