I really like Phatch. It’s an elegant piece of software for batch processing images (its name is a contraction from photo + batch). Open source, in active development and quick to learn and friendly to use for tasks such as making thumbnails for a directory of photos, or adding round corners and drop shadows. And cross-platform (linux, windows and mac).
As I said, I am very enthousiastic about this tool. However, I had a small annoyance. The opening screen looks like this (I didn’t capture the screen borders, but imagine a standard title bar and window frame):
Three active buttons in the toolbar. A green horizontal bar with a hint text and a nice picture of a box with tools.
The icons
The active icons are very generic:
- open something
- add or increment
- search or inspect
Strong icons because they are easy to understand; at the same time weak because they are so general they could mean just about everything (see my earlier post about different purposes for an icon). The user needs more information, either in the form of a strong metaphor, good tooltips or explicit hints.
Click ‘+’ to add actions
The hint says “click ‘+’ to add actions”. In a way this reminded me of a “click here” case at buigallery.com. What does the naive user (that’s me!) do? Baby-age-people put everything in their mouth, children-age-people just have to touch the toys in the store and grown-up software users… click. The green bar begs for clicking. And the real perfectionists aim for the ‘+’. In the text, that is. Not the button.
But this doesn’t work. Next screenshot shows what’s really the case. The green ‘bar’ area is not clickable at all! The hint is meant to point the user to the real button. Which has a differently shaped cross and a very different color, but the smart user can probably figure out what he is supposed to do.
This really isn’t bad design. The hint will eventually lead the user to the button he should click. This design with the green bar is better than the same design without it. And after this initial hurdle, things really get better. But there is room for improvement. Or discussion. Or maybe – can I say this out loud? – in the very best case … an exciting journey through design space, leading to the conclusion that the starting point wasn’t so bad after all.
A few quick sketches
Text unaltered. Arrowhead added to the bar. Arrow rotated so it points towards the button.
The explicit ‘+’ in the hint text is not needed because the arrow unambiguously points to the right button.
The “click to”-part is superfluous. What else should you do with that button? (See my earlier post about affordance). So that leaves a very short arrow with only the text ‘add actions’.
Such a short arrow can be positioned everywhere, as long as it keeps pointing to the right button. Keep an eye on legibility though, or choose a different shape if necessray. Example (to the right of the button):
And hey, there’s a nice side-effect. There’s plenty of space now for hints for the other two active buttons. And it’s pretty easy to make the arrows even less clickable. They should not look like buttons, they should look like arrows. Probably thinner, three-dimensional and with an even stronger sense of direction.
No Comments