Design discussion

Registered by Thiago Teixeira

Right now, Cardapio's design in many ways mimics the Gnome Software Center and Compiz Config Settings Manager. The rationale for many of my design choices in Cardapio was to make it follow the guidelines set by those apps, and improve on them wherever possible.

However, I am open to suggestions.

So let's use this blueprint to discuss Cardapio's design, keeping in mind that we will follow the usual Gnome practice of valuing usability over configurability.

For ultra-configurable menus, there are other great programs out there, like GnoMenu.

Blueprint information

Status:
Not started
Approver:
None
Priority:
Undefined
Drafter:
None
Direction:
Needs approval
Assignee:
None
Definition:
Discussion
Series goal:
None
Implementation:
Unknown
Milestone target:
None

Whiteboard

Other blueprints that affect Cardapio's design:

* https://blueprints.launchpad.net/cardapio/+spec/make-filter-dynamic

* https://blueprints.launchpad.net/cardapio/+spec/integrate-app-usage-frequency

* https://blueprints.launchpad.net/cardapio/+spec/software-center-plugin

--------------------------------------
[anubeon 2010-06-12]

Given that cardapio is (trying to be) a somewhat search-centric application menu it would seem that the search input field is owed greater prominence. The search input field should span the entire menu width, with the 'search' label position to the left of the input field and not above it as it is now. Furthermore, it would make much more sense for the search input field to be positioned at the bottom.

--------------------------------------
[jancborchardt 2010-06-12]

Greater prominence is not achieved by making it bigger. The search field gets the focus by default, making it one click – search. Spanning the entire menu width seems weird because filtering is on the left and results are on the right.

Also, please elaborate on why »it would make much more sense for the search input field to be positioned at the bottom«. Currently, the search field is placed so that it is crossed by user’s eyes first looking at the menu label and then going over to the displayed applications when the menu has opened.

But wait: Am I right in the assumption that you use Cardapio on a bottom panel? In that case, an option to position the search field on the bottom would indeed make sense. (Or even checking if the panel is a top or bottom one and adjusting it automatically, if possible.)

--------------------------------------
[anubeon 2010-06-12]
Jan-Christoph: Of course you are correct that defaulting focus to the search input field affords it the greatest prominence possible. But try as I may, I cannot shake the compulsion to click in the input field before I start typing; perhaps that's just me though. In any case, thinking purely in design terms it makes more sense (IMHO) that the search input field should have greater visual prominence.

By way of an aside, the current design whereby the search input label is located above wastes a fair amount of real-estate, my above suggestions could alleviate this albeit at the cost of further real-estate for the search input field itself. Another idea, compatible with the status quo would be to either incorporate the label within the input field (a'la 'powered by google') or via an attached icon (a'la firefox's search box).

Also, you are indeed correct in your assumption that I have positioned cardapio in the bottom-left hand corner of my display. I sometimes forget that the default set-up of gnome is not so. You're suggestions vis. a positioning option and auto-detection are far more flexible; Kudos!

tvst: I was planning on getting to grips with Evolus' Pencil this evening so I may well have a bash at a mock-up (or two) to incorporate some of the ideas discussed above as well as better integration of the preference and administration menus.

--------------------------------------
[jancborchardt 2010-06-12]
Lee: I see, sometimes symbols speak louder (and more importantly: quicker) than words. Therefore I like your proposal of incorporating a symbol in addition to the »Search« label already there. I’d say that it best be placed left to the search box, much like the Google search plugin icon for »View«. Would be great if you could consider that in your mockups. :)

--------------------------------------
[tvst 2010-06-13]

Lee: To tell you the truth, I am pretty content with the way the search bar is now. I feel that, as it is, even the most basic user will have no question about what that text entry widget does. Also, by placing the entry on the left instead of on top/bottom, I free up space for the app view on the right -- which is arguably the most important part of Cardapio.

But I am willing to consider alternate designs, because I have been known to be wrong from time to time :-P . So whenever you have the time, please post your mockups and we will take it from there.

These discussions are greatly appreciated.

--------------------------------------
[kyle 2010-06-18]

I'd like to see the colouring intergrate into the panels better. Either pick up the theme colour, or have a colour selector in the properties menu. I'd like to see it mesh in well with the indicators. Also, when you click to open cardapio and then click an indicator, the indicator opens immediatly. Having an indicator open and then clicking on cardapio closes the indicator first, and then a second click opens cardapio. Small things, but polish is key.

Thanks

--------------------------------------
[tvst 2010-06-19]

kyle:

What color are you talking about, specifically?

As it is, *everything* in Cardapio should be colored according to your theme. If something isn't, then I ask you to open a bug report. And maybe include an annotated screenshot :)

davidthamm:

Thanks for the mockup. Some of the features you propose, such as mounting/unmounting and "Connect to...", will definitely make it into Cardapio in the next couple of weeks.

However, regarding the overall design presented in your mockup, I disagree with it in a few respects. The main ones are:
1) It requires too many clicks when opening an app with the mouse (unless the app is in the "popular" list)
2) It takes a mix of mouse and keyboard interaction to search for "recent" items, or to search for "everything".

These are two parts of Cardapio that I want to keep unchanged: app browsing should be the default focus of Cardapio, and all search features should be usable in a keyboard-only mode.

So at this point in time I don't really see a need to move Cardapio in the direction you propose. I *may* consider it later, if the natural progression of things in Cardapio end up pointing in that direction.

For now, though, you should look at GnoMenu or Mint Menu, both of which share some design ideas with your mockup.

[kyle 2010-06-20]
I've opened a bug which explains the above, and more at 596369 ,I've also linked it to this Blueprint. I have some more ideas, but I think I will start to refine them a bit more before presenting them on here. I have a habit of talking (or typing) as I think.

Thanks

--------------------------------------
[dth 2010-06-20]

http://i.imgur.com/0bC6I.jpg
Idea's taken from:
http://ubuntuforums.org/showthread.php?t=1476241
imo, id have just applications and recent with a side arrow to expand either, knocking out the places when expanded.
Applications (popular)>Full list
Recent Items> Zeitgeist
Note: I would like the search to be global just like it is already, below the search are tabs like Firefox.

--------------------------------------
[kyle 2010-06-20]

I think moving the "all" tab from being default will make the menu feel more like it's designed as a applications menu and not a search menu as a lot of people describe this as. On your own specifications you've stated that this is the goal of this application.

When you first open Cardapio you're presented with a search box, and what appears to be "search shortcuts" ie places; accessories etc.

Moving places into the default position will make it look like a menu first. Moving the All to either at the bottom of the list, or underneath the menu items on the right.

Maybe this will stop all of the "innovation" requests for search type functions.

Also in relation to my colour request in the blue print, I was referring to the backgroud colour of cardapio should be consistent of that of the old menu style, or the indicator menus. The colour I get is a light grey colour, consistent of normal window background colours. Looks fine on Radiance, but Ambiance looks very out of place.

--------------------------------------
[jancborchardt 2010-07-13]
I just removed Cardapio’s configuration files and wondered about the standard applet label, which is the name of the distribution (in my case »Ubuntu«). This seems odd to me, a bit like the normal menu bar having the distro logo on the »Applications« menu.

I propose to change the standard applet label to »Menu« because well, that’s what it is. What do you think?

-------------------------------------
[jancborchardt 2010-08-18]
I’ve been playing around with Glade a little and made a minimal interface more similar to Spotlight and Deskbar. You can check it out live on https://code.launchpad.net/~jancborchardt/cardapio/minimal-layout or look at the mockup that comes pretty close to how it is actually looking: https://wiki.ubuntu.com/JanCBorchardt?action=AttachFile&do=view&target=Cardapio+-+minimal+layout.png

tvst and I talked about it and figured it would be best to just remove the category icons and use it as a layout for keyboard users. This could be activated either by ticking a box in the properties or automatically when reducing the width to let’s say under 300 pixels.

So, the menu / category style would be for mouse users and this one would be for searchers / keyboard users, as unobtrusive as possible.

What do you think?

--------------------------
[jancborchardt 2010-08-28]
Have a look at the new minimal layout at http://www.flickr.com/photos/jancborchardt/4936749295/
And check it out for yourself at https://code.launchpad.net/~jancborchardt/cardapio/minimal-layout

To be useful for mouse users as well, I think it is better with the category icons displayed. It is not that much of a mystery meat navigation since they are really distinctive.

So, upon reading http://www.webupd8.org/2010/07/gnomenu-29-released-with-docky-support.html
What about we use the minimal layout as our dock theme? We should move the search field to the bottom for that though.

We could also have an option in the properties to switch the theme, with the normal layout as standard for panel and the minimal layout as standard for dock and hidden mode - the normal layout looks really weird floating ;)

--------------------------
[jancborchardt 2010-10-04]
Interesting insight on main menu interaction: http://davelargo.blogspot.com/2010/09/gnome-230-main-menu.html
»One very interesting usability issue that I found when reviewing how we currently have the main-menu grouped is that most of the regular users never figured out that they can type software applications into the Filter....even though the cursor focus is there when it opens and it's blinking waiting for you to type. :| The users also didn't really figure out that you can click on the Groups on the left edge to reduce the number of packages displayed. Instead, most of them are scrolling down the entire list of software and looking for what they want. I really need to ponder this more, but sure sounds like an improvement area in the design.«

– which leads me to rethink the »remove Search and View« approach. ;)

--------------------------
[tvst 2010-10-04]

Wow, good to know. Seems like we have some thinking to do...

However, I am not sure whether Cardapio would suffer from the same problems. For one, we use the word "Search" instead of "Filter" exactly because people may not know what a filter is. Also, our text color for "Search" and "View" is much more readable than theirs, which should help people notice them. And lastly, I actually think that since our categories have icons they are less scary and promote experimentation.

...although we can't really say any of this for sure without an actual usability study of Cardapio :)

(?)

Work Items

This blueprint contains Public information 
Everyone can see this information.