User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have what is essentially a dictionary of 24 things. My initial instinct is to arrange them in a grid:

mock up of the grid idea

The user I get to interact with has said that they want to use the scroll wheel to change the values, and to be able to select the magnitude of the change the scroll wheel makes. They also suggested this layout:

mock up of combo box layout

The screen is to be used for making adjustments to a scientific instrument. It might be that changing the value of one thing also affects the value of a different thing, although this isn't the case at the moment. The user will only want to change one thing at a time.

Is there a preferred way to layout collections like this? What is easier for users?

share|improve this question
It probably depends on what this screen is used for. For example your first layout allows the user to see all the items and all the values at once, whereas the second example only shows one 'Thing' and value at a time. – JonW Jul 18 '12 at 9:25
Good point, I've updated the question. – Matt Ellen Jul 18 '12 at 9:30
up vote 2 down vote accepted

It "smells" like your user's mind model is looking like this: user's thinking

In language of requirements it would summarize as:

  • to know the choices - "things" to change
  • to know the actual values
  • to change the actual value (with varying precision)
  • to know what else was changed (as a consequence of above)

Also, there is another "smell": an idea of changing the value by a scroll wheel suggests that user would like to mimic the real world behaviour. Some of the related user experiences include:

  • turning faster makes greater increments (smaller precision)
  • turning slower makes lesser increments (higher precision)
  • ability of fast change in precision (as in selecting a proper precision ring in tech equipment)

So if it is an important feature I would suggest digging deeper and finding if above guesses are correct and eventually designing the adequate UI control.

If it is not much important then I can suggest some quick shot:


download bmml source – Wireframes created with Balsamiq Mockups

You can also consider:

  • if there is any preference in selecting the precision, because the most common option should be the most accessible
  • if there is anything that can help user making the selection (recently used "things", the most popular, etc.)
  • if there is a need to indicate which values changed simultaneously (e.g. by colouring)
share|improve this answer

If changing one thing potentially affects the value of a different thing then they should probably all be visible all the time, as in your first example. This way users can easily see any consequences of their change to a single thing (and depending on the importance of dependencies they can be highlighted when they occur).

Also, the "magnitude of change" selection is a global control, so should just exist as a single control somewhere adjacent to the layout of all the thing controls.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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