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)

Prototyping with Visio

August 2, 2007

When creating non-interactive GUI prototypes in Windows, you don’t have many choices. Surely, you may try playing with one of numerous specialized tools, but none of them is mature enough to be useful even for basic design mock-ups.

Actually, sooner or later you come to Visio. It doesn’t provide you with pixel-perfect results like ones you may get with Photoshop (or any other bitmap image editor), but it has nearly no completers when it comes to fast iterative GUI design.
The easiest way to start is using build-in Software stencil library. At first, it looks amazing as you have dozens of controls you may easily put on a form and create basic forms in minutes:

Basic Visio form
It’s even better that these forms look exactly like ones in Windows XP and that only increases the “wow factor”. Actually, if all you need to do is making some basic layouts for simple XP applications you may stop reading here and go experimenting yourself.

XP Wizard mock-up

The devil hides in details, so sooner or later you start understanding that a build-in software stencil is not that much good as some things are simply missing. Just it would help you a little on designing a web 2.0 site UI or prototyping a GUI with complex controls (like Ribbon). In order to complete this task you may need to skip all the nice looking Luna stuff and start working on wireframe prototyping level.

On this stage you may just use a Rectangle tool or use any third-party stencil set. However, the more you work, the more you feel a need for your own “constructor”, which covers your current tasks. Using an existing set as a starting point might be a good idea, but you’ll have to re-create missing elements anyway.

Visio with custom control set

Creating a custom control set has other advantages. For example, your own controls may have different sizes, shapes and better fit target application’s look and feel. Such flexibility is usually unavailable when build-in Software stencil set, but comes at a price…

Visio alignment hell
One of major problems with Visio as a GUI prototyping tool is its inability to align elements properly. So you’re either increasing overall mess with lots of guides (which are usually required for every single form) or end up playing with semi-useless Align shapes control in 200+ percent zoom mode or testing your luck with nearly as inaccurate keyboard align (forget of smart guides or alignment logic…)

That’s it, about 50% of all time you work in Visio you waste on fighting with layout. Thus, in order to create prototypes which with “fake screen” level of details (i.e. with all proper aligns, font sizes) it might be a good idea to use bitmap image editor or pagination software, but for intermediate designs Visio is still a worthy solution.

Smart grid control idea

June 20, 2007

Enough talking of fruit operating systems: there’re some other interesting things to discuss.

A couple of years ago, when working on some applications’ UI I’ve found out that existing grid controls utilize space very ineffectively. In fact, they waste it: even if there’s enough space to display all needful data, user must manually adjust columns’ width each time:

iTunes grid

Annoying? For me, it is.

So, in order to solve the above problem, I tried to describe a rough draft of  the new control’s logic.

As a result I’ve got the following document: Smart Grid Control mock-up (PDF, 200kb).

To my shame, this document has never been finished and so far I know no implementation of similar logic in real life. So, if you have any interest in this work, pick it up and feel free to share your ideas.

Future is now: innovative products and prototypes

January 20, 2007

Fortunately, along with all the badly designed stuff I cover in my hall of shame series there’re some good samples of really interesting, innovative and simply great designs.

This series of articles reviews some of these products. Certain items are only prototypes while the rest might already be available. So, let’s go…

Yanko Design company’s site has lots of interesting stuff which is at least interesting.

For example, this Bonfire tripod burner originates from the idea that modern kitchen is just an evolution of a bonfire place:


Thus, by design it looks like a firewood. It’s compact (the construction is transformable) and power intensity is adjusted by several sensors as well.

Elio watch is another interesting prototype by the same company:

Elio watch

Minutes and seconds are displayed by progress bars as well as text. Even though usability of this solution is arguable (one would have to become familiar with scales which are quite visual, but not common), the design is excellent.

Ambient devices company also features a lot of interesting stuff from so-called ambient interfaces: they deliever data to you without disturbing.

Let’s take a look…

Ambient Orb is a lamp, which changes its color, depending on incoming data, like weather forecasts or stock market information:
Ambient orb

Forecasting umbrella utilizes a similar approach for informing you about a need of its use: it starrts pulsing light when the rain is most likely to come. The data is received by the radio channel…

Forecasting Umbrella

Zooming mirror is probably a modern womens’ dream come true:

Zooming mirror

The mirror lets one see her face at 1x to 5x scales making it a great for makover. I’m not sure about actual products’ comfort usage and possible disadvantages, but the fact that such an idea has become real is just great!

To be continued…