2

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 '16 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 '16 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 '16 at 10:31
  • @Franchesca Carousel is a nice one! I'll look into it :) – M Zeinstra May 3 '16 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? – Jasmin Javia May 3 '16 at 12:11
4

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 '16 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 '16 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. – Jasmin Javia May 4 '16 at 4:37
  • Anyways, I made this out of your answer: jsfiddle.net/xv9b418d/23 Thanks! :D – M Zeinstra May 4 '16 at 10:37
1

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, privacy policy and cookie policy

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