Toen ik vorige week naar GCDS ging huurden we met een paar man een minibusje en maakten we een roadtrip rond het eiland. Een Banshee hacker (Bertrand), een F-Spot hacker (ik) en zes man van het GNOME art team (Garrett, jimmac, Benjamin, Andreasn, Vinicius and mpt). Vanuit een risk-management standpunt bekeken was dit zelfmoord: wie zou onze artwork maken als we in een ravijn reden? Gelukkig is dat niet gebeurd, we hadden een fijne dag en ik kan deze blogpost schrijven: een verhaal over design.

We wisten het al lang, maar we hadden het nog niet opgelost: de voorkeuren dialoog in F-Spot is totaal ongeschikt voor netbooks. En het is extreem lelijk. Aanschouw:

Tijdens GCDS werd ik benaderd door Matthew Paul Thomas (mpt). Hij wou onze voorkeuren dialoog herdesignen en deze problemen oplossen. We hadden een goed gesprek en overloopten de huidige voorkeuren dialoog, wat het doet en waarom. Twee of drie uur later, na veel schetsen en geteken kwam hij met dit op de proppen:



Het is een simpele papieren mockup, die de huidige dialoog beschreef, wat er mis is en hoe het verbeterd kan worden. Daarna een voorstel voor een nieuw design. Voor een hacker is dit goud. Over het algemeen zijn we niet de meest geweldige user interface designers (laten we dat maar toegeven), maar we houden wel van goed design. Wanneer we een specificatie krijgen kunnen we snel voor verandering zorgen. Deze mockup was zinvol and gefundeerd: het volgt de HIG.

Ik heb deze mockup aan Stephane Delcroix gegeven en een uurtje hacken later hadden we een nieuwe voorkeuren dialoog:



Veel beter!

De moraal van het verhaal
Er zit een tweeledige moraal in dit verhaal:

• Voor hackers is het belangrijk om te beseffen dat ons artwork team niet gewoon een bende kerels is met een obsessie voor mooie icoontjes. Ze doen onze visuele styling en helpen ons met het design van geweldige interfaces (een van de zaken waardoor GNOME een succes geworden is). Als je interfaces suboptimaal is, zoek dan een designer.
• Voor designers: we houden van jullie en zelfs als je niet wil programmeren kan je een groot effect hebben. Als je het gevoel hebt dat zaken niet zijn zoals ze zouden moeten zijn, ga dan eens praten met de maintainers. Vaak is het geen grote zijiging, maar wel een met een groot resultaat. Over het algemeen houden maintainers van user interfaces suggesties, als ze zinvol zijn. En om even schaamteloos reclame te maken: bij F-Spot houden we van UI designers. We weten dat het momenteel niet is wat het zou moeten zijn en als iemand daarbij wil helpen, get in touch!

Het is dit soort samenwerking dat van de GNOME zo'n aangename plek maakt om in te werken.

That looks awesome!
I wish that more FLOSS developers expressed their love for interface designers as you do.
On another note: what's happening in the f-spot community with abock's proposal for merging f-spot and banshee?

@zekopeko: It's important to note that there are no plans to merge the two applications. We might be sharing the same base platform in the future, but both applications will continue to exist. What Aaron is planning is to add very basic photo support to banshee. We at F-Spot want to support so much more than that. Therefore we need both. But perhaps we'll share some of our internals.

Looks great! This was a small bit that discouraged me from switching to F-Spot. Maybe I'll give it a try next release.

I have one suggestion; I think there need to be a bit more space on the top. The mock-up specifies a 12px space from drop-down list rather than from the text. Even so, It looks great.

I have a suggestion too: the "store tags and description for photos..." part could be better (I think) reversed. Let me explain: the choice the user has got to do is about sharing the tags and descriptions among all image-editing programs. Storing them in the file is just a side effect.

So I would propose a single checkbox with the text:
"Share tags and descriptions with other image-editing programs (stores information in the image)"

Nice change! Although the mockups looks much better (IMO) than the final result. This is due to the radio buttons following "Store tags and descriptions for photos" being to the right instead of below it. This is making the window way to wide. Look at the mockup!

I'd kill a theme as no other program is using it - why I'd like to have one program not consistent with others?

Also - why would I *not* like to share tags and descriptions with other programs?

That looks like a huge improvement to usability. I have a couple of additional suggestions which would help F-Spot integrate better with the rest of the system:

- The "use as screensaver" preferences should not live in F-Spot at all; they should live in the user's screensaver preferences, just like configuration for any other screensaver. F-Spot just needs to have an option somewhere for "Use F-Spot as my screensaver", which would open the user's screensaver preferences.

- Why does F-Spot offer an option for using a theme different from the rest of the system? Even if such an option seems sensible, it seems like that option should live in the user's GNOME appearance properties, as some kind of "Application-specific themes" section. F-Spot could then just link to that.

- The XDG user-dirs stuff already offers a way to configure user directories for many things, including pictures via XDG_PICTURES_DIR. F-Spot should certainly offer to configure the location for pictures, but it should ideally use the XDG pictures directory, and configuring the location in F-Spot should set XDG_PICTURES_DIR. You *might* want to offer the option to configure F-Spot's pictures directory independently of XDG_PICTURES_DIR, but I can't think of any good reason why.

@Josh: That's indeed where the screensaver options should live, but gnome-screensaver does not allow this yet. So for now we have to keep it in f-spot, unless we want regressions (which we don't).

Why do we offer the option to change the theme just for F-Spot? You are all very right that it breaks consistency and is generally very ugly. I do too. But photographers might not agree, it so happens to be that color photos are best viewed on a neutral grey background, to avoid eye adaptation to white or black (whichever your theme is). Therefore photographers want a very boring greyish neutral theme (check e.g. the theme jimmac uses). As this neutral grey isn't very fun to watch for day to day work, we offer the option to apply it just for F-Spot. In short: we might not care, but some of our power users certainly do.

As the driver for this road-trip, I had a rather big responsibility : one wrong turn on the sinuous roads of Gran Canaria, and the next GNOME releases would probably be ugly...
Not to mention the absence of such nice blog posts !
Fortunately, all went well and we enjoyed the island.

I think that I agree with liberforce that the radio buttons could simply be merged into a single checkbox.

If there's really a reason to keep them as radio buttons, then I agree with anonymous above that the sketch looks more visually appealing than the final result with the radio buttons on the right. They seem to flow nicer in the sketch where they are below the "prompt" (not sure what the correct terminology would be).

That said, this new dialog is a whole lot better than the old one!

That's some nice penmanship there.

Great to see the new preferences dialog implemented, and I'm very grateful we survived the trip.

According to the book "Designing Interfaces" [1], checkboxes are good when you're short on space, but the downside is that it's reverse remains unstated. Please trust mpt here, he knows what he's doing. :)

1. http://www.amazon.com/Designing-Interfaces-Patterns-Effective-Interaction/dp/0596008031/ref=sr_1_1?ie=UTF8&s=books&qid=1247934093&sr=8-1

That mockup, was it made using pen-and paper? Else which software?

MPT is a genius. 'Nuff said.

Well done—it’s a real improvement. (:

Great!
Now, let's do the same for the import dialog, fix the time insanity and you will have a rocking 0.6 release ;)

Good story. Good work.

@Ruben (& MPT): Flawless victory!

@Pascal, missed you @ GCDS!

@Lefty: yea… bit far away and plane ride is pricey. :(

"If your interface sucks, turn to them."

If your interface sucks, it's usually already too late. You should have asked them for help first, not afterwards when all they can do is rearrange things a bit.

A great contum - fix to make more usable and simple gui. Contratulations!

i was looking at f-spot themes, but really interesting to find out how you guys end up with the new preferences layout. yep it does look better and more friendly. keep up the awesome job :)

Just goes to show how important good design is. Excellent blog!

Now that you are thinking 'Netbook' and limited screen space, what are your thoughts on 'animating' flow to show the user what's happening? :-) .... Clutter springs to mind!

Please keep up the good work, we used your tool for the splash screen on the Linux Vodafone Mobile Connect card! ;-)

I'm not real keen on the long descriptions of the controls' labels; in my opinion such details are better provided as tooltip blurbs.

"When importing photos, copy them to:" -- Is F-spot used to import things other than photos? Also, the wording suggests that the copying is not inherently part of the importation process (this may be the case, but then shouldn't an option be provided to "not make a copy"?).

"Store tags and descriptions for photos:" -- Again, is F-spot used to handle meta-data for "non-photos"? Also, the options available seem limited to *where* the meta-data is stored, while the group heading suggests a slightly broader scope (i.e., *whether* the data is stored). The radio grouping also implies that if the meta-data is stored in the image file, it will not be stored in the F-spot database -- if this is not so then a single checkbox toggle ("Embed tags and descriptions in image file") would be more descriptive.

"Color profile for display"
"Color profile for printing" -- Fairly concise, but it's pretty obvious that the profiles associated with displays and printers are "color" profiles; and if the user does not make the connection then a tooltip blurb can provide the needed enlightenment.

"F-spot appearance" -- It would seem intuitively obvious that within an F-spot Preferences dialog, any setting would be relevant to F-spot.

So using your team's new preferences dialog as a starting point and eliminating some of the tautology, I made my own mockup which addresses the above comments:

http://flashingtwelve.brickfilms.com/Temp/f-spot-prefs-new.png

Naam
Email (optioneel)
Website (optioneel)
Onthoud mijn gegevens
Email mij wanneer er nieuwe reacties zijn
Reactie