The visual order of list control and content, which should be shown above?

Question

In many software, there is a list and a view panel. A user can select different items in a list to see different content in the view. For example, when you open Gmail, on the left you see a list of emails, and by selecting one of them, you see the details of that email. When these two views are organized horizontally, usually there is no confusion in how to design them. We put the list on the left and the content on the right. But the problem comes when we design it vertically, which should be shown on top?

1. Content on top and list at the bottom.

There are several examples where you can see the content shown on top.

(1) Mac OS Finder

.

Here you can view different pictures on top by selecting different items at the bottom.

(2) Visual Studio

Here you can view different errors in code by selecting different errors in the error list when debugging your code.

2. List on top and content at the bottom. There are also examples when you display the list on top whereas the content at the bottom.

In the above example, you see the details by selecting different items on a top list. Similar examples also exits in some mail applications, where the details of an email is shown at the bottom.

So here comes my question. Are there any rules/theories behind this? At the beginning I thought reading habits matter, because most people read from left to right, and from top to bottom. It seems that the "list on top approach" is always logical. But how do you explain the counter examples? When should we design the "content" on top, and the manipulation control at the bottom? When should we do it in the opposite way?

Answer 1

To start the ball rolling, in my opinion

if it is a "preview", it goes below

whereas

if it is the "actual content or work" it goes above

To restate, if you're actually "looking at a list", if a "list is the thing", and it's just a preview of whichever item you have highlighted as you scroll up and down that list - it goes at the bottom. Whereas if it is the "actual content or work", if the "point is to display it (|work on it, etc)" it goes up the top.

For me that (a) describes most cases I can think of and (b) is how I feel about how it should be in an ideal world.

• you're actually working on something (VisualStudio or AffinityDeisgner or Unity) - the main panel is the main panel up top; the other things you change to are below

• you're looking at a list of stuff (MailApp inbox), as you scroll-highlight through the list you see a preview down below

• note on the OSX "gallery" folder display. I appreciate that of course it's a "folder", you're looking through a list of images to pick one. However that mode of showing a folder, which Apple introduced, is, more of a "photo displayer". It's kind of a tricky idea they had: "hey, instead of needing a whole photo viewing gallery app such as Preview, we've ingeniously put that right in, as one of the modes of folder display - just hit command-4". So I interpret that folder-mode as in fact a "photo viewing app". Note that similarly on any as-such stand-alone photo-viewing-app or movie playing app -- indeed anything with a working area and a "scrubber" of some sort at the bottom -- of course the "image you're looking at" is the main and indeed top area: example, in iOS-Photos there's the tiny scrolling icons scrubber down the bottom to select which one. So again I'm interpreting that as a "whole photo viewing app" rather than a "list viewing Thing". Note indeed that if you click command-3, it converts to a conventional "list is the main display" and then a minor "item preview" (although on the right, in that case).

An interesting further thought: now that we are all finger devices all day. We seem to be moving to "B" mode as a default: it's "always" content, put it up top, just have a scrubber down the bottom to flick through. You very rarely see "A" mode these days, I think. Gone are the days of leisurely looking at a list.

(Indeed, as a very old person, when using osx MailApp ("on desktop - I still have a laptop!!") I fight the preferences and make it display the inbox an ordinary old list (with NO preview below, thanks very much!). So, this is what happens when you're old and lame. Kids today would probably just see their email exactly like iOS-Photos .. just flicky gallery/panels like your evidence A above, with a "scrubber" at the bottom.)

Answer 2

To give the ball another kick: The rules for above or below should be the same as for left or right.
There different kinds of "content". In your examples:

• In the Mac OS Finder (image view), the "content" is actually also a (horizontal) list of exactly the same items as in the list in the lower section.
• In Visual Studio, the "content" is the whole code; all the items in the list are 'children' of the "content".
• In the Cards example, the "content" contains (a lot of) details on only 1 of the items in the list.

So my thoughts would be to stick to general principles:

• If the content contains details of a single item in the list, it would make sense to put the list first = left or top
• If the list is a descendent of the content, then it could go to the right or below

So:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

As with a lot of things in UX, the answer to such a broad question is "it depends".

Previews and other forms of content view are always contextual. The relationship between the content view and the list depends on the workflow for the system. To give just a couple of examples, users may be primarily concerned with finding something within the list and then viewing it or they may be focussed on finding something that looks right and then discovering it's place within the list - each scenario gives different context to the relationship between the list and the content view.

If you're designing a system and have a particular use case in mind then it's probably worth finding some of your users and testing them with a few wireframes in different permutations. (Usability Hub is also good for that).