skweez.net

Alles skweez?

1001111001011101011011101101101

Alles zu “mockup”

20.12.2010

GNOME Contacts mockups

von mks.

GNOME Contacts: Details
This post is a bit late, because I was too lazy too post it. :-)

A few weeks ago I attended a small GNOME hackfest here in Munich. Actually it was more of a “design fest”. The goal was to design a user interface (and software design) for a new address book application for GNOME. We feel that the current contact managing applications just aren’t easy to use. They often miss a simple and clean UI and integration with other applications.

We see two main problems with the current situation. One being that there is no central address book database on GNOME at the moment. All the applications that use contacts (like Evolution, Empathy, etc.) manage them on their own. Of course this is bad, because the user has to manage the same data multiple times. There is the Evolution Data Server, but it seems it’s not flexible enough to be used by other applications.

The second issue is that there is no easy to use and visually appealing user interface to manage contacts on GNOME. Again, there is Evolution but … well, just open your Evolution address book and you’ll know what I mean.

Last Saturday we mainly addressed the latter problem. We started to design a new user interface. After lots of iterations, we identified four possible basic approaches:

  • Displaying a list or grid of contacts and opening a dialog upon double-clicking. We came already very early to the conclusion that a separate dialog would be the most unelegant solution.
  • Displaying contacts like in the first approach but showing details in the same window upon a double-click, providing a “Back” button to get back to the list.
  • Showing details in-line when a user is selected.
  • Using a three-column approach for groups, contacts, details.

We made mockups for all of the solutions (except for the first one). Salomon and Daniel wrote detailed descriptions of everything we came up with. Everything is on Github.

04.03.2010

Gnome Nautilus sidebar mockup

von mks.

Nautilus sidebar mockup

Click for full size

I think the mode selection of the Nautilus sidebar currently has some flaws, that’s why I made a little mockup.

Please note this is not about its contents, there are already some interesting mockups for this.

I did nothing revolutionary, the changes are really pretty small. Here’s what I did in detail:

  • Remove the border around the selection thingy, it seems useless to me and clutters the UI.
  • Optional: Remove the close button, it looks weirdly out of place and provides duplicated functionality. You can hide and show the side pane with F9 or via the View menu.
  • Change the dropdown into a toolbar. This should be more user friendly because you only need one click instead of two to cange the mode and it’s more visible that something can be clicked here at all. The current dropdown is only visible on mouse-over and looks like a label (besides the little down arrow).
  • Fallback to dropdown, if the available space is to narrow, but always show the dropdown. The current doesn’t look like clickable, see above.

What do you think?