[Mailman-Developers] Mailman user interface: draft of a mega drop-down navigation
Patrick Ben Koetter
p at state-of-mind.de
Thu Jun 24 20:38:18 CEST 2010
* Geoff Shang <geoff at QuiteLikely.com>:
> On Thu, 24 Jun 2010, Claudia Fleiner wrote:
> >Here I will present you our idea of a mega drop-down navigation
> >panel for the new Mailman user interface:
> Can anyone explain this a bit for those of us who can't see this
> image? Or better still, point us at a coded example?
The overall style is light. Lot's of whitespace creates room to distinguish
object from each other.
The compositional focus is on the content area. Logo and navigation stand back
to let users concentrate on the task they need to accomplish.
The page is white. The navigation color scheme used is dark blue for typo and
light blue as background color. There's a broad border around the navigation
pane. It is semi-transparent.
When opened, i.e. when level 2 and 3 are visible, the navigation layers over
the content drawing users attention to the navigation only.
The navigation is horizontal to make way for applications that take place
beneath; applications usually require more place than text/images pages.
You can see navigation level 1.
The navigation differs from traditional navigations in a few ways:
- When you hover the mouse or focus a menu entry using keyboard navigation you
get to see both, level 2 and 3, at once. A large rectangle (wider than
higher) creates the canvas for for both levels.
- A topic specific icon prepends evey level 2 item.
- Level 2 items are aligned to the left and in bold text.
- Level 3 items, if there are any, follow right hand to their correspondent
level 2 entry on the same line. They are displayed in regular font weight.
- If there were so many level 3 items that they needed to wrap to the next
line, they would indent starting at the same left margin where the first
level 3 item started.
state of mind
Franziskanerstraße 15 Telefon +49 89 3090 4664
81669 München Telefax +49 89 3090 4666
Amtsgericht München Partnerschaftsregister PR 563
More information about the Mailman-Developers