Proposed update to Growl notification system

October 5, 2007

There’re several things in Growl notification display behavior that I think might be improved.

First of all, it’s a new “close” button implemented in version 1.1. It only appears when you hover a notification and lets you close the message you see no need to react on. Not even mentioning a degraded look of notifications (tastes differ) the button has a serious disadvantage as it requires quite precise positioning that eliminates the advantage. So what? Easily: just recall the Fitt’s law and let one click a larger area like the whole message… By assigning the right click to this action you let the thing be done without extra complexities. Is “right-click to close” an obvious action? No. Just like any idiom it has to be learned, but once learned it may become very handy. Arguments for are that some applications like QIP (Windows) or Google Notifier (OS X) already use the same approach successfully and both have very large user bases.

The second thing is the way Growl displays notification pool. Right now the mechanism is quite primitive, so when there’re just too many messages they may take all the screen space available thus interrupting you from work. Having a dedicated area for displays might improve situation a lot. I.e. let’s say messages can only take a single row with a maximum height of 50% of screen height. Now you may be sure that no matter what happens messages would not cover your workspace if you have it outside a suggested area. Besides, now we know that if notifications come from top-right they bottommost message is always the latest one.

Once again, this approach is already adopted by other applications.

The third improvement would work great with the second one. As we have limited our screen space, let’s make notifications use space more effectively. Now, when one of displayed messages disappear, the “hole” is covered by shifting other notifications, thus making sure the order remains intact and no message would “accidently” get into the hole. As a picture is worth a million words, here’s (270 Kb) a Keynote demo of suggested behavior and QuickTime (2 Mb) version of it for those who doesn’t have the latest iWork. The idea is also not new and is used in applications like Google Talk.


GUI prototyping for OS X: makeing life easier

October 5, 2007

Just for ones who are interested I provide a link to my OS X GUI design stencil I use for my own prototypes. It’s currently work in progress and still retain large portions of WireframeShapesAngles it’s based on (make sure to check the original, it’s pretty useful by itself). Future versions should have more controls, dialogs and other ready to use stuff, but if you’d liked to finish the work, feel free to do so.
stencil preview

So, here’s a link. Download and enjoy, it’s less than 100Kb anyway 😀


GUI prototyping in Mac OS X

October 1, 2007

While working on a mac (which is currently my primary platform) I do still have to deal with interface creation stuff. Unlike Windows, OS X doesn’t have Visio, so I had to look for a different tool.
This tool exists and is called OmniGraffle.
Even though the GUI mock-up creation process is still the same “drag form, drop it, drag a button, place it on the form“ there’re some key differences from Visio. First of all, OmniGraffle has a pitiful default GUI creation stencil. Unlike one from Visio package (which is also far from perfection) this one merely represents Aqua-like look and is not suitable for any serious work. In other words, you’ll have to create a stencil set yourself or just start adopting an existing one to your needs. Wireframe Shapes is a good starting point, although it misses some controls and existing ones may require tweaking. You’ll have to do your set sooner or later, anyway, so don’t take this as disadvantage 🙂
Layers is another interesting feature I always missed in Visio. Even though it’s not a daily tool and not required for simple mockup, one may save you lots of time on complex shapes or fine-tuning your designs when combining vector and bitmap images.
Grid, guides and smart-guides are features that leave Visio far behind. Yes, Visio has a decent grid and guides, but aligning objects with their help is an unpleasant experience. With the help of smart guides you no longer have to work in zoom mode to make sure your controls are evenly distributed on the form and it really saves you a lot of time! Another time saver is “eternal canvas“: when you place objects outside your canvas, OmniGraffle creates a new page for it, so you would unlikely face difficulties while working with large images or multipage drafts.
Shape tools are primitive. Creating new primitives with Visio is a more pleasant experience, IMHO as OmniGraffle tools are overcomplicated while not allowing you to create basic shapes fast. Table editor is freaky. It has a non-standard interface which may hardly be called elegant, although you may get used to it one day.
Overall, the app is very good for wireframing and non-interactive prototyping. If only a tool set gets “fixed“ or default stencil set would be enhanced, it may become an ideal UI designer’s tool. Right now it’s just good, but good enough to recommend it over Visio.osxfastguimockup.png


Expose 2: improving tab switching logic

September 8, 2007

While working in Mac OS X I got used to Expose feature for rapid window switching. I love it a lot, except for one thing: it simply cannot help if you use tabbed applications. OK, you may switch to the app window and then click a tab you need, but why not saving clicks while being able to review all tabs’ content during switching? Shiira tries to solve the problem by implementing a kind of Expose for its own windows which partly solves the problem.

My suggestion is wider: why not change the Expose itself?
(I know, Apple would doubtly ever do this, but we have Expose-like features in Linux Fusion)

proposed Expose 2

As you may see on the picture, in Expose mode each tabbed app is represented by a tab grid, so you may switch to a certain tab (not just the app!) in a single click. When the numberof tabs is not too large, this feature should work without any problems.

This way we eliminate confusion when user cannot see a page he knows has just been opened in Expose mode just because it hides by the main application’s window.

Related document (PDF, 50 Kb)


Hall of shame: Apple Safari

August 3, 2007

There’s one interesting thing about Safari that I used to ignore (likely because I rarely use Safari at all) before. As some local developers have pointed out, Safari does not create clear tab-content relations (like Firefox does) because of using inverted tabs:

safari tabs

As you may see, the tabs are simply upside down, which might look OK from aesthetically, but is definitely not a good design solution.


Close me not: Camino usability glitch

July 2, 2007

Even though I do like Camino browser a lot it has a glitch sometimes making me mad.

Just like Firefox, Opera and any other modern Web browser it uses Tabbed UI for navigating page sets. That’s generally OK (I wouldn’t discuss tab-related problem here, besides many users get used to this style of working).

Camino tabs

So, what’s wrong with the picture above?

First of all, the “close” button on each tab is located on the left, just like it is on any Aqua window. Nothing special, actually, especially as it’s quite an expected behavior and Safari (OS X bundled browser) does exactly the same:

Safari tab

The problem comes when you try to do something with tabs. One of possible features includes easy bookmarking by using drag’n’drop technique, familiar to any modern OS user and widely popular on OS X:

drag and drop

The thing is that in order to bookmark the site you must drag it by the site’s icon. Ooops. What happened? You just clicked “close” instead of bookmarking?

The cause of the problem is simple: Camino developers have just placed destructive (close) and non-destructive (site favicon) controls too close to each other. Strange enough, as this principle is largely covered by Apple HIG.

So, what possible solutions might be?

The first and non-elegant one is placing “close” on the right part of the tab (Windows way). Non-consistent, not “Aqua”, but it works. At least, Opera and Firefox find no problems doing so:

Opera tabs

A kind of “who cares?” solution.

Another one might be a bit more elegant. It doesn’t solve the problem completely, but creates a good workaround: just instead of using favicons for drag’n’ drop operations Camino developers might have made the whole tab draggable, so users may avoid dragging tabs by favicons in favor of other, less “dangerous” areas.

Edit: submitted as bug 386574.


Who made who: Apple vs Microsoft vs all others

June 20, 2007

The “who stole from whom” on Microsoft vs. Apple UI discussion seem to renew again with the release of Windows Vista and the upcoming release of OS X 10.5 “Leopard”. With implementation of hardware destkop acceleration in Linux (thanks to Beryl/Compiz project) overall mess has only increased, so some freaks even state that Apple “stole” cube effect from Linux (sic!).

Fortunately, we have internet, books and other media to help us find the truth out.

Short story

As you may already know, today’s GUI is a far offspring of Star UI developped by Xerox PARC. That’s it: during the 70th, PARC used to be a blacksmith of what we now call “graphical user interfaces”. Nevertheless, with Xerox losing interest to its own computers and concentrating on copier machines people started leaving.

If you try to trace biographies of some of PARC’s leading UI researches you’ll also ind out that many of them used to work in Apple as well. This looks familiar, right? Apple not only managed to get some of the best designers in the industry, but also got rights to use some graphical interfaces already created by Xerox.

So, what does Microsoft have to do with all this? The thing is that Apple has licensed Microsoft some of its UI in return for some investments and the promise to continue development of the Office suite for Mac.

So, Apple made it first. But even before Apple there was PARC. Microsoft “lent” some ideas from Apple and often had a “catching” role. But if you think Microsoft is researchers are only working with photocopiers and steal Apple GUI (I’m not talking on Linux as in general it has brought nothing new into the UI world) try to look at this page 😉

Long story

Some references you may find useful:

Further reading

To anyone having interest in the history of graphical interfaces let me recommend some interesting reading sources:

http://www.designinginteractions.com/ Site, dedicated to a book with the same name, “Designing Interactions”. Even though somechapters are available for free I do strongly recommend buying the book itself. Some of its most interesting parts cover the history of the very first computers’ creation, the appearance of the Desktop metaphor and interviews with people benind these wonderful inventions.

http://www.guidebookgallery.org/ – a visual guide to the history of modern operating systems. Ever wanted to compare interfaces of Apple II and Windows 1.0? Go and try it yourself. Must be bookmarked by any GUI