Bookmarks: GUI and usability

December 27, 2006

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

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

December 27, 2006

“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

December 26, 2006

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:

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

Enough for today. Have a good reading!


Hall of shame: Videora iPod converter

December 20, 2006

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?

Videora

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:

vid-02.png

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

vid-03.png

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

vid-04.png

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

December 19, 2006

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?

December 18, 2006

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:

Abander tag control

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

December 18, 2006

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:

Winamp MP3 tag display

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:

Winamp MP4/AAC tags

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:

itunes MP3 tag

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):

itunes MP3 tag

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:

itunes MP3 tagitunes MP3 tag

Not really much to comment…

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

foobar 2000 mp3 tags

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:

foobar 2000 mp3 tags

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.