How to choose specific item from a list of items with long names, without taking up lots of space?

Question

So, I have a survey analytics app (SaaS) that provides a dashboard view with (among other things) charts of results from answers to individual questions. Currently we provide a sidebar that shows a list of questions for which you can pick to show its graphs. Since most questions have fairly long text, it is nearly always truncated

We currently scroll the question text when you hover over it, which doesn't provide a great experience (especially for mobile users), but does show the full question text, which is sometimes necessary to discern which question we are looking at (note questions 3-5 and their similarity in the graphic above).

I would like to redesign this area and provided a better means of navigating between questions. This list usually has 5-25 questions. What would be a good means of providing access for users to select a specific question, without tying up a large amount of real estate, while still remaining easy to navigate?

A drop-down list comes to mind to me immediately, but requires at least two clicks to operate (one to open, another to select an item) and obscures the view on mobile devices when open. I worry that this will become tedious. I can add prev/next arrows to the sides to scroll between questions, but this won't help a user pick a specific question that they want to see. Similarly, "page" indicator bubbles, like at the bottom of a slider provide an easy way to jump to a specific item, but one may not know what that item actually is.

Answer 1

5-25 questions. How often do you expect users to "seek" to a specific question?

Tablets & Phones:

• Use a "slide out menu" with question titles. Each row/menu item acting as a button to close the slide out and update the main area.
• Add buttons to the main UI for: first, previous, next, last question
• Allow for swiping left/right to transition to the next/previous question

Desktop:

You have many more options here. However, it may be worth tracking how often users "seek" to a specific question before picking a specific implementation. Also, why are they seeking? Should questions be "pinnable" or allow to be "favorited"?

I hazard against a dropdown. As you've suggested, they tend to not be very user friendly. You could...

• Employ a menu similar to what I mentioned above for Tablets & Phones
• If you've ever used PowerPoint, a menu similar to that when the selection could include a template of more info instead of just titles
• For really large question sets, include a slide out pane or entirely separate screen that allows for seeking and filtering
• Or.. Use a dropdown, but one packed with some extra out-of-the-box functionality that improves the UX
  • I like Select2.js as it has support for autocomplete, custom row templates, multi-select, and a bunch of other features that improve upon the vanilla dropdown

Just some ideas. Hopefully something is helpful (: