0

Given a simple (non-tabular) long list of small items, have studies shown a strong reason to prefer vertical vs. horizontal flow/wrapping of those items when displayed in a single 'field'?

I'm working on a project where we plan to have a progress meter on a dashboard screen which corresponds to a set of numbered tasks. (These tasks are performed on books, by chapter. The chapters don't have titles, so we just show the numbers.) Most of the time, the tasks will be done in order, but sometimes teams will split the work up and do it non-sequentially, so this popup provides a way to break things down specifically. (It's inspired by Gmail's label-applying feature. The field is modeled after a typical Print dialog's page-specifying field.)

I'd usually expect to see a list of objects wrap vertically, like this:

1  6  11
2  7  12
3  8  13
4  9  14
5  10 15

But here they are wrapping horizontally in order to roughly match the direction of the progress meter that they control. (Most books, but not all, have more than five chapters.) Is there a good rule of thumb to use here?

The initial state:

enter image description here

Later on:

enter image description here

Side question: Most of the time, the popup is not needed, as the "+" button should suffice for checking off the next not-yet-complete chapter, or the checkbox can check off the entire book. Any thoughts as to whether those "+ -" buttons should be disabled when gaps between ticks make it hard to guess what they would do? (See second image above.)

There would probably be an Undo button at the top of the main screen, e.g. to use if you clicked the main check box and blew away a complex mix of ticks.

Improve this question

1 Answer 1

Reset to default
2

I don't have any citations, but as a general rule of thumb, most english language readers parse text most easily from left-to-right rather than top-to-bottom simple due to how the english language letters and words are laid out.

Somewhat unsolicited advice in terms of the UI you presented: Simplify, simplify, simplify. Nearly every aspect of it can be stripped out. Here's a model that reduces the number of distinct interface components from 8 down to 2:

enter image description here

Improve this answer
6
  • Thanks! That is brief but helpful. In the case of this dashboard, I'm pretty sure users want to see a simple progress meter with pct done, and then on rare occasions they want to tick things off out of order. But maybe something like what you've shown would be nicer for the flyout. (We're trying to use consistent idioms for multi-select, so it could impact other areas in the UI. It's a desktop app.)
    – Jon Coombs
    Jan 26, 2016 at 17:07
  • Makes sense. One additional note about the mock I did above: The tracked progress does serve as a progress meter. It has one additional layer of meaning on top of a simple left-to-right progress bar: It shows positionally which bits are complete.
    – Patrick Berkeley
    Jan 26, 2016 at 17:28
  • Yes, I had noticed that and it's very nice. Putting a light border around the whole thing could also give more of a meter effect. And all but the highest number could be hidden until you mouseover (except in the rare cases of gaps.) But it doesn't scale very nicely unless you can set the width of each number to be the right percentage of the whole, which breaks down if a book has 120 chapters.
    – Jon Coombs
    Jan 26, 2016 at 18:51
  • Anyway, thanks especially for the reminder that we don't need checkboxes here. That idea had bled over from elsewhere in the UI, but we'll probably not implement it now. (We've moving away from ye olde icky Ctrl+click-for-multi-select, and using checkboxes instead can help with in some cases--especially in rows of records--right?)
    – Jon Coombs
    Jan 26, 2016 at 18:54
  • Ah interesting. Makes sense on moving away from a ton of checkboxes. I hadn't considered the scale of 120 chapters. I was thinking more on the lines of 1-32. Not that it changes anything, but fwiw some of my inspiration was coming from a chart like this: bl.ocks.org/KathyZ/c2d4694c953419e0509b
    – Patrick Berkeley
    Jan 26, 2016 at 20:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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