Navigation/Browsing/Layout patterns and its names?

Hi guys!

I’m new to this forum. Found it because of Smashing Magazine.
A few words to introduce myself:
I am working as an UI Designer for one year. Focused on web(or bowser) based applications. Let’s say… things like Taskmanagement Apps or CRMs.
Unfortunatly not always the fun part but it’s still very interesting. I spend most of the time to find intuitive usability solutions… finding the right metaphors… the right navigation/brwosing patterns… well, stuff like that. So … there are a lot UX parts that I have to handle.
At university I’ve never studied User Experience… just had some basic HCI lectures and right now I wish i had more.

Back to the topic…
There are a lot of design patterns and principles out there. They have names and pros and cons. And I’m looking especially for one definition that I just can’t find. Examples would be great as well.

Maybe some of you stumbled over “producteev”. It’s a nice taskmanagement web-app.
Let’s forget about the header of this app.
The webapp has on the left side a kind of preset filter (All tasks, upcoming tasks, my task…). On the right side of this “menu” there’s the tasklist. It’s the maincontent: A list of all tasks. If you click on one list element another Pane slides from the right showing the details. I would say: It behaves like a drilldown menu… or like apples “Finder”… going from the left deeper to right.

Another example is the outlook (web)app.
Left: Menu/premade filters(whatever you call it). Next to it on the right you can see the mails in a list. And next to it there’s the Detail section (the content of the mail).

It actually behaves the same way as the first example.

Does somebody know how this pattern is called and where I can find more details about its usage.
I would really appreciate it.
Or examples of good apps using this pattern?
Also examples where there are more then three areas/panes coming from the right.

Thanks in advance.
barb.

The only name I can think of for mail-client/similar type setups is “dashboard” which has a pretty broad meaning anyway.

Since it sounds likely you’ll have a tree-like structure on the side, read this: http://www.accessibleculture.org/articles/2013/02/not-so-simple-aria-tree-views-and-screen-readers/

It’s not so much usability but you may be interested in having these work in screen readers too. Cognatively, these things are difficult to make simple.