| Introduction |
[Jan. 4th, 2005|07:20 pm] |
There we go. As previously hinted, I had been planning to relaunch my Usability blog under a new name, from scratch.
"Where's the Button - More Power to Usability" will primarily be a general information site, featuring articles about recent UI Design issues ranging from topics such as Tabbed Browsing and Cross-Platform UIs to recently-invented widgets such as Drawers, Sheets and Circular Controls. There will also be reviews - I'll start with one, in fact - to outline particular UI problems. The purpose of such reviews is never to answer the question "is this the right software for me", but to stress in what ways it is flawed, purely from a User Interface[1] perspective. WtB does not specifically exclude UI platforms, but will focus on Mac OS X's and Windows XP's default user experience ("Aqua" and "Luna"), with GNOME, KDE and others being less-prominently featured.
Initially, WtB is going to be a one-man show. I've always had people to discuss Usability with though, so maybe this will at some point be posted to by a group of people. It will not, however, become a public community. I've considered a Wiki site for my Usability book, so that it can eventually turn into a comprehensive reference, but I'm currently not into setting something like that up.
Anyways, welcome to the site, hope you like it, comments including any kind of criticism are always welcome and well-received.
P.S.: No podcasts yet. Need to find an appropriate setup for that if I'm going to pursue it at all.
[1] By now you've probably used I interchange "UI" and "Usability". While not entirely accurate, for the purpose of this site, there should be no confusion. |
|
|
| Icons vs. Logos |
[Jan. 4th, 2005|08:15 pm] |
One major issue with marketing-driven UIs (a phenomenon that didn't start until the late 1990's) is that they fail to distinguish the purposes of icons and logos.
Since logos have existed for many decades now, their function is clear. Cf. Wikipedia:
A logotype, commonly known as a logo, is a graphic element which uniquely identifies [..]products [..] in order to differentiate publicly the owner of the logotype from other entities.
Whilst Wikipedia goes on to explain that a proper logo must always include text (rather than a graphic), that's a detail which can be neglected nowadays: regular customers of Adobe, for example, will easily recognize them by their logo even without the text beneath. What would you suspect, however, an application with the above logo as its icon to do? Logos' graphics tend to be entirely meaningless. Icons, on the other hand, should not be.
 
The Preview application icon is often taken as a good example of what an icon should look like. An unusual amount of detail went into creating it:
- Its most prominent feature is a photo, on top of another. This suggests the application is image-related (and can handle multiple images at a time). If the photos were almost the same, it would suggest the application's primary purpose is editing of filtering, which is not the case.
- The second-most prominent feature (although it is visually on top, it stands out less as it is smaller) is a magnifying glass focusing on part of the topmost photo. This suggests the application can view photos. Putting a real-life-used tool inside an icon to depict its primary purpose is a good idea.
- Although the icon uses shadows, they do not get visually in the way and actually help the eye focus.
- The icon is of photographic nature: it uses no simple amount of colors, and does not make use of gradients at all. Instead, a high range of colors is present.
- The outer shape of the icon is unique. Note that "outer" ignores the drop shadow, as it is barely visible, and includes the outlines of the glass and both photos. To make the point clear, the outer shape looks roughly like this:
 [1] Other applications are unlikely to have a similar shape, let alone the same one. Preview is thus easily recognized in a group of applications, merely by its icon.
- When scaled down, some details are removed (the 32x32 pixels version was not merely computed), and more stress is put on the important "features". The magnifying glass is hardly recognizable any more, but it's still clear that there are two photos, and what looks to be a viewing device.
- Note the absence of logos. Even though the logos of Apple and Mac OS X are very well-known, neither is featured here. The icon works entirely on its own.
As a negative example, consider this icon, from Adobe Reader 7.0. Whilst there are 16x16, 32x32 and 48x48 versions, they do not not appear to differ in any way and are therefore pointless (since Mac OS X automatically scales images down in good quality anyway). The main problems with this icon are:
- Its shapes are entirely random, curved lines.
- Its outer shape is but a rounded rectangle, nothing that makes it special.
- Its use of color is plain, which goes against the concept of Mac OS X icons. This may be fine on other platforms, but Mac OS X's Aqua (and Windows XP's Luna, too) request that icons' use of color should have a meaning. The red could be blue instead, and the grey could be green - nobody would notice any difference. Clearly the use of red, grey and white reflects Adobe's corporate identity, as the web site uses the exact same color scheme.
- Most of all, the icon as an entirety tells the users absolutely nothing about what the application may or may not do. The application could be a disk defragmentation program just like it could be an internet browser, and it is in fact neither.
It is therefore without a doubt a marketing-driven icon. This works particularly well in an application suite: for example, Microsoft's Office line uses icons that do not represent the application's purpose particularly well (if at all), but share a common design scheme. The user can look at the icon and immediately figure "that's part of Office". The same is true for Adobe's CS (Creative Suite) line of software.
To implement the above idea of "application suite brand identity", however, there is no need to sacrifice the features of icons such as Preview's. One possible solution is a dual icon.
Classic Mac OS had default folder icons that looked like these (in System 7 and Mac OS 8 and 9, respectively). Although not immediately apparent, they share the same basic design: the real life metaphor of a folder (containing files) was taken literally. System 7 added color over the previous iterations of the icon, Mac OS 8 added its almost isometric three-dimensional style, and 8.5 / 9 added a slight gradient and a drop shadow (I couldn't find a properly alpha-channelled version of the image, unfortunately).
This icon design was also well-suited for attaching an additional icon to it, with decreased size. Mac OS included a few of such icons, such as that of the Documents folder. Attached to the lower left of the aforementioned default folder icon is that of a generic file. Don't let the colors fool you: it is because of its retained slight shadow and solid black border that the outer shape of the file icon remains distinct from that of the folder underneath. Mac users often created their custom icons like this; there were tools that automatically shrunk icons down and placed them at the right spot on top of the folder icon.
Companies that want to retain brand identity and still create a good icon could use this "dual icon" technique. For example, Microsoft Office's web site features a logo with quite a unique shape. Even when decreased to 16x16 (or less) size, it can still be recognized quickly. Create application icons that work on their own, then attach the Office logo at one uniform place in all icons, and you get the best of both worlds.
But remember not to confuse logos, branding and other kinds of corporate identity with icon design. An icon is, after all: (Wikipedia article "Icon (computing)")
[..] a small graphic, usually ranging from 16 pixels by 16 pixels up to 128 pixels by 128 pixels, which represents a file, folder, application or device on a computer system.
[1] If someone has half-decent graphics skills (unlike me), feel free to contribute a better graphic. |
|
|
| navigation |
| [ |
viewing |
| |
January 4th, 2005 |
] |
| [ |
go |
| |
Next Day |
] |
|
|
|
|
![[info]](http://l-stat.livejournal.com/img/userinfo.gif){kind=small}
wheresthebutton's journal
