I have this list of items in a radio button list. This list can get pretty long in it's height. This won't be the best user experience, because the user, probably, has to scroll to the item he wants.

Does anyone has an idea to improve the user experience here? Note that I need to display the image and the description, and that I do not necessarily need the radio buttons.

Please keep in mind that I'm not asking for (free) code, but for some examples that could improve the user experience.

JSFiddle example of what I have, right now.

  • How is the list created where it can get pretty long? Is the user searching for something? Is the user's goal to create a list things or is their goal to select the one thing they want?
    – SteveD
    May 3, 2016 at 10:27
  • Just to be clear, you are not looking for code examples? This site is about what to implement rather than how, e.g. someone might suggest to use a carousel to make navigation of images easier.
    – Franchesca
    May 3, 2016 at 10:27
  • @Splatz Their goal is to select one thing, but it's pretty annoying to find your item and have to press on this small circular button, in my opinion.. So I'm trying to find an alternate way to display all of the item an an alternate way to select the item.
    – M Zeinstra
    May 3, 2016 at 10:31
  • @Franchesca Carousel is a nice one! I'll look into it :)
    – M Zeinstra
    May 3, 2016 at 10:32
  • Do you want to fix your screen's portion so it will be not scrollable.? And do you really need radio button in the list or not? May 3, 2016 at 12:11

2 Answers 2


What about this idea which I attached below? In this you can display the image title below the image as shown here and on mouse hover event you can show the description on light background on the image.

One more thing just add paging below the list and fix your screen so only listing portion will get update.

enter image description here

  • 1
    Being able to drag this left and right makes it work nicely for desktop and touch.
    – scorpdaddy
    May 3, 2016 at 16:10
  • @scorpdaddy I disagree I rarely find dragging to be user firendly on desktop(non-touch), it is typically not intuitive for the user to try to do this and even then it often leads to unwanted clicks on things.
    – DasBeasto
    May 3, 2016 at 16:55
  • @scorpdaddy If we put dragging than at desktop level it will be not feasible for the user so we can give sliding effect by next previous functionality so it will feel like page is dragging instead of scrolling. May 4, 2016 at 4:37
  • Anyways, I made this out of your answer: jsfiddle.net/xv9b418d/23 Thanks! :D
    – M Zeinstra
    May 4, 2016 at 10:37

I would recommend a single selection grid. This link has an example (choose "row selection").

If your list is very long, you may also add a search box.

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.