The Citrus Menu

(Read the intro before reading this.)

The menus in Citrus aren’t quite what menus are today. I’ll explain with a mockup:

You’ll notice a few different things. There are sliders and buttons and text boxes in the menu now, to replace dialog windows. In this menu, there’s also a second pane that houses styles. You can now edit styles right within the menu. This same pane appears in all the other menus that use styles, like “Pages”, “Paragraph” or “Tables”.

Essentially, what used to be done through a variety of different interfaces (sidebars, toolbars, menus, dialogs) has now been consolidated into one central menu bar.

You’ll also notice that arrows now point down instead of to the side. That’s because categories now expand downwards, on click by default (as opposed to the classic on the side on hover). And if the menu (including the Styles pane) gets too big, a scrollbar will appear.

So why the change? Well, the new menu is much more like a dialog. That means that when people open a submenu, they will most likely be doing something that takes more than one click (in the mock-up above, a user might want to customize both the style and the color of an underline). Classic menus close on a single click. Also, opening submenus below decreases mouse distance and makes it much easier to hit the target. Opening menus on hover makes it hard to hit the target, because if you accidentally move your mouse, your whole submenu goes away and you have to navigate back with your mouse.

And that’s the menu. Feedback wanted and greatly appreciated.

I think I’ll tackle the search box next.

(P.S. For all the people out there who prefer the classic UI, assume that this UI will be as customizable as OOo is now and hopefully more. Ideally, anyone should be able to reproduce the Classic OOo UI in this.)

(Continue on to Citrus: Possible solution to pane)


2 thoughts on “The Citrus Menu

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s