1

How do you make a usable selection list when each item in the list varies wildly in size and takes a long time to load?

We have a list where the user can select a piece of code to display on a web page. The code can be anything, it is user supplied, so some pieces are small, others big. As the page loads, the different pieces display, causing each other to jump around, making clicking any particular one a crap-shoot until all items are loaded; defeating the purpose of loading them incrementally in the first place.

Is there a way to make such a list usable, id est make it possible to click an item reliably before all the items have loaded?

Improve this question
0

2 Answers 2

Reset to default
3

Is it crucial to see all the code of 1 item right from the start? Of not, a solution could be: for all items only show a part of the code (e.g. 2-3 lines) and add "show more" at the end if an item contains more code. The user has to click the item to see its complete content.

Improve this answer
3
  • This is the solution I went with; show only a small fixed size preview and then expand it after the user hovers it for a while.
    – Odalrick
    Commented Aug 8, 2013 at 14:01
  • @Odalrick: Oh boy, why do you assume I want to expand something just because my mouse happens to be over it for x amount of time? It's something I vehemently dislike, just like the Win7's start menu "feature" to open the all programs if you pause on the menu long enough. I may be alone in this though, so test it, but generally things expanding/collapsing/dropping down/sliding out/etc by themselves just because of a "hover" are intrusive, especially if the delay isn't long enough and the action can be triggered because the mouse just passed over it on its way to somewhere else.
    – Marjan Venema
    Commented Aug 8, 2013 at 18:05
  • @MarjanVenema Definitely something to consider. One of the users of the list did complain about the instant expansion you get when using the :hover state so I changed it to a delay. In this case... choosing a component is the only reason to open the dialog and while the "buttons" are large, there is still plenty of space to rest the mouse. Hovering over a selection to expand it to a preview seems reasonable.
    – Odalrick
    Commented Aug 9, 2013 at 8:57
2

By adding a [+] in front of each one of those pieces which can be used to expand the specific piece if user desires (you can try keeping two lines as minimum what is visible) AND giving the user option to enable or disable the [Auto Refresh? or Auto Update?] of the screen if he wants to check out some code-piece before going on with the other pieces which are being populated in realtime.

Improve this answer
1
  • Perhaps an overlayed detail view might be better than expansion in this case?
    – Gusdor
    Commented Aug 8, 2013 at 12:19

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.