Bookmarks: GUI and usability

Just another portion of interesting (?) links for people interested in interface design.

• New combo-box control. Quite an interesting idea about an “improved” version of ordinary combo-box. Lots of pros as well as cons. Looks quite similar to corresponding GTK control.
• A petition to bring back buttons on phones. Touch screens and surfaces are pretty nice and usually attract users’ attention, but are they really that good?
• First principles of interaction design by Bruce Tognazzini must definitely be read by any person involved in interaction design process.
• GUIdebook. The best and the most comprehensive source of various OS UIs. It might be a good idea to compare some to see the strength and weakness of each approach.
• Web design is 95% typography. From the position of a people, who used to be involved in typography process for a while I would highly recommend you reading the article.
• Bruse Tognazzini’s bug hall of fame. Just for illustration of what HCI problems could lead to.
• The Desktop is changing… Mostly a comparison of Windows/Linux/OSX Desktop approaches plus some thoughts on why old Desktop paradigm remains nearly unchanged today.
• Metadata instead of hierarchy (ru). Metadata can replace classic hierarchy even today.
• New lifeof a scroll-bar (ru). An attempt to improve existing scroll bars.
• Infoscroller (ru). An implementation of a scrollbar discussed above. Features live demo.
• Why splitplane views suck. An interesting and argumented article about split views.
• Web 2.0 design guidelines. What gives a site web2.0 look? The author has analyzed several popular resources and created a very interesting guideline.
• Web charts and AJAX controls. These guys sell excellent ASP.net components for charting and AJAX controls which you should at least take a look at.
• Nielsen’s 2D is better than 3D article. Even being 8 years old, it’s still actual. Btw, don’t forget to check other articleson this site: most of them worth reading.
• The design of the Mac OSX Shutdown. An interesting article about design and decision making process in apple. You may also easily find similar one about Microsoft
• GNOME HIG. You must already know Vista UXG and Apple HIG. This one is about GNOME, famous Linux Desktop which is interesting to read in order to widen your knowledge horizons.
• The Start menu must be stopped. Windows Start menu sucks… and the article is a good explaination of this.
• Visual feedback: why modes kill. One more article about modes.
• Membranophonist’s Ramblings. An interesting blog, having partial focus on OSX HCI. Some good critics and suggestions plus fake shots to illustrato possible solutions.
• Office assistent. Microsoft HCI specialists on good and bad decisions in Office suite. do you still think Microsoft is blind and deaf?
• The beauty of simplicity. The name of the article is self-explaining. KISS.
• Typography and the User Interface. Yes, once again
• Opensource usability. Weighted and argumented explainations why OSS usability sucks and what can be done in order to improve it.
• Usability in the movies. Why you should spending less time watching TV Actually it’s about usability of interfaces shown inpopular movies.
• Cascading versus indexing menu design. A nice research on various menu types. Its results are at least interesting to know.
• International usability standards. Once again on reinventing the wheel. In facts many of the linked documents are highly recommended for immediate examination.
• X vs XP. A weighted and argumented comparison of OSX and Windows XP.
• Interfaces of the future (ru). A good article by professionals. No classical “yada-yada, 3d’s to rule’em all”.

All articles, marked with (ru) are written in Russian. In case you haven’t learned it yet try automatic translation via PROMT.

P.S.: comments, corrections, incoming links, etc are welcome, as usual.

Quote of the day: Design

“Most people make the mistake of thinking design is what it looks like. That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.”
Steve Jobs, Apple.

Bookmarks: icon design

Even in case you’re not a professional icon designer having a sence of beauty and knowing some background of icon design would doubtly be useless. Therefore here’re a few links youmay find useful:

• Tango project. An excellent icon design guideline (plus a set of CC- licensed icons), started byNovell designers. Some pages to pay closer attention to: http://tango-project.org/ArtLibreSet, a set of icons for graphics editing applications, http://tango-project.org/Generic_Icon_Theme_Guidelines, general Tango-style icon design guidelines. Plus http://tango.freedesktop.org/Tango_Icon_Gallery, a ready to use icon set.
  Overall, Tango seems to be the best and the only useable set of icons, licensed under fair conditions and thus suitable for low-budget projects.
• Original Creating Windows XP icons guide by Microsoft. Must know for anyone related to Windows interface graphics.
• iTunes icon creation tutorial. Great for learning some icon designing techniques in Illustrator.
• A history of AllTunes graphics by Mezich (rus). Might be useful if you wish to learn some tricks from highly professional designers.
• Adam Betts’ blog entry on icon weight.Especially useful fornovice artists.
• A history of making a Thunderbird icon. Learn from gurus
• Turbomilk blog. Blog, nearly entirely dedicated to professional icon design.
• What makes a good icon? Quite an interesting article on creating really outstanding icons.
• ArtLebedev’s icon reflection trick (rus). It’s an interesting hack, but not a common solution
• Alpha on Windows XP toolbars. 8 bit vs 32 bit icons on Windows XP toolbars.
• Bitmap vs vector. A very good article on bitmap vs vector icon design approaches.
• Some free icon sets. Icons, distributed under the terms of GNU, CC, GPL and LGPL licenses.

And, finally, my own small article on vector vs bitmap icons.

Enough for today. Have a good reading!

Hall of shame: Videora iPod converter

Many GUI creators let users change their application window’s size. But are they really ready for such actions? Not all of them. So, let’s welcome the hero of today, Videora iPod Converter. Among tens of free and commercial “DVD to iPod, DivX, XviD and vise versa” converters this one is definitely a first candidate to “keep away from” list. Not even mentioning its encoding features (I couldn’t make it work) I would only stop on a portion of its interface.

So, what do we see on launch?

Self-made iPod icon in the left-top corner, some tree control derivative for tab selection (come on, there’s a lot of space), some (grid-control?) garbage on the top of it and cut right panel. The controls are so poorly aligned that you won’treally be able to read the text unless you resize the whole window. The bitmap is centered and thus the text on it is unreadable…

Let’s just switch to te second tab to see controls:

Unusable without window resizing. So, let’s try to make the window bigger and see if it looks better then:

Not much, really. Now we just get a huge window with poorly composed controls. Let’s scale the thing down:

No comments.

In fact, even this pitiful UI could look better if its creators followed some very simple rules:

1. Can’t control – lock. I.e. just lock dialog size if you cannotmake it look decent under different resolutions
2. Don’t use center align without a reason: in most cases left (or right) align woulddo less harm.
3. Be careful with bitmaps: scaling them is no fun.
4. RTFM. Seriously. If you find yourself a groovy coder, why not spending few minutes on readingbasic control usage rules?

Overall, resizeable windows and dialogs are quite a pain for many developers as they’re harder to handle then fixed-size ones. You may have to remember window position, size, state, carefully align controls, set sane defaults, etc…

New header

Updated the blog header in order to give it a more “customized” look.

The graphics is based on images from the Tango Project and thus distributed under the same CC BY-SA license (I still hope you’ll modify it a bit before putting into your own site ).

The SVG source and final layered bitmap are available here

Tango rocks, no matter how weird it may sound

Power or mess?

Just to finish the audio file tagging topic for today I provide a screenshot of a real program intended to be a music tag editor:

The program is Abander Tag Control by Softartstudio. Screenshot is taken from their site (and yes, I did try to use the program myself).

Tagging the music: approaches

Many of us are familiar with standalone, portable or software-only music players most of which can handle tag metadata, which contains information about the artist and the song. But have you paid opinion to how this data is edited by modern software players?

Here I just compare different approaches shown by Winamp, iTunes and Foobar 2000 players all of which are known enough…

First, let’s take a look at Winamp:

There’re two big colums with ID3V1 and ID3v2 data, most of which is diblicated. There’re numerous restrictions on ID3v1, so it’s usually a cut version of ID3v2 tag. On the left-bottom there’s a lot of technical info like byte-precise size, header position, encoder delay and padding, “copyrighted” flag and so on. There’s also replaygain info and options to copy data between two tag versions.

Quite a mess in fact. For example, why letting someone manually edit two tag versions (increasing the chance of a conflict) if most developers leave ID3v1 tags only for compatibility wish stone-age hardware (most modern hardware players, including cheap Chinese ones handle tags decently). Besides, the majority of provided technical information is doubtly interesting for the majority of potential users. Most people care about 5 mb vs 7 mb difference, not 1400 bytes versus 1200. And encoder delay and padding is mostly interesting to hardcore audio enthusiasts but not the majority of users.

Just compare this to the file properties of MP4/AAC file in the same Winamp:

Just another messy poorly designed dialog, not fitting well the previous one. You may check other file types and find out that Winamp tagging GUI is terribly inconsistent. Shame on developers…

Now let’s take a look at iTunes, famous iPod companion:

What we see is a classic tabbed dialog. The first tab is not editable: it just displays general file information like artist name, track title, associated album artwork, etc.

Take a closer look at how technical info is displayed (notes are mine):

Kind: MPEG Audio File or simply mp3
Size: 4,9 Mb not 5127415 bytes: slightly less precise, but way more readable
Bit Rate: 168 kbps (VBR) VBR means “variable bit” rate which it is
Date modified: 12.12.2006 2:20 easily readable text
Play count: 0 just zero, not even “0 times”
and so on…

Format, Channels, ID3 tag version and encoder info. That’s all. Simple, clean, informative. Plus a line below, displaying full path to the file.

Now let’s switch to an “info” tab:

Name, Artist,  Album Artist (useful for jazz or records with many guessed musicians), Album, Groupin, Composer, Comments (multiline, no disabled scroll bar!), Genre (drop-down list), Year, Track number, Disc, BPM. All the fields are large enough not tor equire scrolling, logically and aestetically groupped and divided. Besides, while entering data iTunes makes some suggestions about it based on information it already knows, so you won’t need to type the name of your band ten times (even without batch tag editing!). BPM and grouping are probably the only redundant tag fields there (as manually editing BPM doubtly has any good) but overall it looks accurate and pleasing.

“Options ” tab lets you fine-tune the track and is generally quite useless (as most of information there might be received from other sources):

Manual volume adjustment is arguably useful because of SoundCheck (a faster, but less accurate version of replaygain), per-file equalizer preset also has arguable usefullness, just as placing here rating (which is usually adjusted in media library) and  start/stop time (usually encoder provides enough information to calculate them properly). Last three checks are also doubtly a must and I have serious doubts that the last two are very rarely used while the first one could be automatically set based on track length (well, it might be suitable for language learning, but still…)

The last two tabs are solely dedicated to lyrics and artwork info. People like that kind of stuff although there’re lots of ways to put album artwork editor right into the main tag editing dialog:

Not really much to comment…

Now let’s take a look at the last competor, Foobar 2000:

Looks different, right?

There’re some predefined fields like Artist or Title , but you’re generally free to add your own ones (there’re  usually no restrictions in modern tag formats). Just like in iTunes, there’s nodivision to ID3v1 and ID3v2 tags: v1 is used by default, but as soon as any field requires more v2 is added automatically so there’s nearly always a v1 tag, working as a crippled down version of tags info (due to format limitations).

Field editing is accurate, but not elegant: the window is poorly sized by default and may require  window and column size  adjustment. As you may see on the shot, there’s a third  void column whichjust wastes space.

And what about technical info? Here we go:

Let’s just name things their names: it’s a mess. I.e. this is nearly all the technical info you may ever need to know about the file, but it’s decently formatted (5 127 547 bytes vs Winamp’s 5127547, etc.) and it’s not flashing on the first tab, thus only seen by ones interested. From another point, all information, frequently and rarely used is gathered  and displayed in a single place which is generally not good.

So, what do we have in the end? Winamp features messy inconsistent and ugly looking dialogs. iTunes info editing is elegant although not too comprehensive for geeks (being an audio geek myself I must add it gives you enough info for most cases of normal usage) while Foobar makes a strong accent on power, so elegance suffers: its dialogs are more friendly than Winamp’s ones but have serious lack of fine-tuning.

Hall of shame: Nero Info Tool

Ahead, the creators of famous Nero CD/DVD-burning (and managing whatever-data-you-have-on-your-pc) software suite is responsible for very powerful (from the technology point of view) engines as well as some of the worst software UIs you may ever find out nowadays in such programs.

A wonderful example of such interfaces is their Nero Info Tool:

Am I given some choices totweak functionality of my CD-writer? What if I click Supported Features>CD-R? Nothing happens… Just because these checkboxes are not really checkboxes and are… simple indicators for displaying “capable”/”not capable” states.

Even without discussing overall tool’s GUI I must add that such “functionality ” is becoming dangeroussly popular among over developers. Here’s a sample from another CD-burning suite:

Same problems witch checkboxes…

This is doubtly a behavior Microsoft implyes under common checkbox usage. And even if some of you might argue that users are not that stupid I should add that enabled checkboxes by their definition imply interaction. Disabling them might partitially solve the problem and shift it from the “itiotic solution” to the “ugly solution” field.

btw, you might have also noticed an additional quit button in Nero Info Tool as well.

Hall of shame: mp3Trim

This one looks like an ordinary program with quite a decent interface (could definitely be worse), unless you mention one thing…

The menu on the top is not actually a menu. In some reasons the program’s developer decided to make it behave like a toolbar i.e. “open”actually displays the file open dialog, and “exit” quits the application.

It’s obviously not the way menus should behave like. The most painless solution might be replacing the menu with a toolbar with the same functionality and cleaning it up (no need for the “exit” as there’s already a “cross” button on the window itself).