Arrange data entry controls vertically or horizontally?

Question

I have a page where the user is going to have to enter more data than will fit on one screen and I'm wondering what is the correct way to lay out the controls. There will be about 15 - 20 items the user will have to enter (still defining requirements). A couple will be text but most will be drop downs or list controls.

Should the controls be arranged vertically so the user scrolls up or down the page to complete the entry? Or should the controls be arranged in groups horizontally so the user scrolls left or right to complete the entry?

I tried to find examples but I haven't found too many that have a lot of data entry. 

Thanks for any suggestions,

Terry

Answer 1

Horizontal scrolling is generally preferred by the design language, but there aren't any absolutes here.

Depending on the data and the app it may be appropriate to do some of each: the overall flow might be horizontal, but with a vertical segment for a group in the middle.

I would try prototyping a couple of different layouts to make sure that the data is grouped logically and that the actual flow of their use is smooth.

--Rob

Answer 2

FWIW, the relevant design guideline is here. It actually suggests vertical layout, but in truth I find it a bit vague. Which I suppose is fair enough, since so much depends on the semantics of your problem space.

In older UI frameworks, if we had more data entry widgets than would fit on a single screen, we'd typically either use a tab control or a wizard. Would one of those patterns work for you? There's no tab control in Win8, but it's easy enough to duplicate the "push a button, change the display" pattern, or a FlipView maybe?

Of course, both of those require chunking your data. Can you do that, semantically?

---

Rebecca M. Riordan

Answer 3

Imo from usability point of view, scrolling needs to be avoided (very long form filling is dull activity) so I would have tried to build a wizard with next-previous button. but keep in mind that building a interactive wizard is a time taking task.

if I have to choose between vertical or horizontal scrolling for data entry form then horizontal is good, as traditionally it is like that.

Answer 4

Thank you for the link, that helps. I was looking through the guidelines but didn't run across that yet.

As I look at other apps I'm seeing vertical layout more than anything else, at least in terms of data entry scenerios. I haven't seen an example of a tab layout with a Win8 program. I'll have to look at that.

Thanks

Terry

Answer 5

You won't find a tab per se. But think about the way the search filters work...I think that could be adapted. Or you could roll your own tab easily enough

---

Rebecca M. Riordan