Canonical way to layout collections that have the same behaviour

Question

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

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:

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?

Answer 1

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

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)

Answer 2

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.