user interface

Shiftless Progressive Enhancement

Progressive enhancement is a great philosophy for Web application development. Deliver all the essential basic functionality using the simplest standards available; use advanced technologies to add bonus value and convenience features for users whose platform supports them. Win.

In Three Rings, for example, volunteers can see a “starchart” of the volunteering shifts they’ve done recently, at-a-glance, on their profile page¹. In the most basic case, this is usable in its HTML-only form: even with no JavaScript, no CSS, no images even, it still functions. But if JavaScript is enabled, the volunteer can dynamically “filter” the year(s) of volunteering they’re viewing. Basic progressive enhancement.

If a feature requires JavaScript, my usual approach is to use JavaScript to add the relevant user interface to the page in the first place. Those starchart filters in Three Rings don’t appear at all if JavaScript is disabled. A downside to this approach is that the JavaScript necessarily modifies the DOM on page load, which introduces a delay to the page being interactive as well as potentially resulting in layout shift.

That’s not always the best approach. I was reminded of this today by the website of 7-year-old Shiro (produced with, one assumes, at least a little help from Saneef H. Ansari). Take a look at this progressively-enhanced theme switcher:

No layout shift, no DOM manipulation. And yet it’s still pretty clear what features are available.

The HTML that’s delivered over-the-wire provides a disabled <select> element, which gains the CSS directive cursor: not-allowed;, to make it clear to the used that this dropdown doesn’t do anything. The whole thing’s wrapped in a custom element.

When that custom element is defined by the JavaScript, it enhances the dropdown with an event listener that implements the theme changes, then enables the disabled <select>.

<color-schemer>
  <form>
    <label>
      Theme
      <select disabled>
        <option value="">System</option>
        <option value="dark">Dark</option>
        <option value="light" selected>Light</option>
      </select>
    </label>
  </form>
</color-schemer>

I’m not convinced by the necessity of the <form> if there’s no HTML-only fallback… and the <label> probably should use a for="..." rather than wrapping the <select>, but otherwise this code is absolutely gorgeous.

It’s probably no inconvenience to the minority of JS-less users to see a theme switcher than, when they go to use it, turns out to be disabled. But it saves time for virtually everybody not to have to wait for JavaScript to manipulate the DOM, or else to risk shifting the layout by revealing a previously-hidden element.

Altogether, this is a really clever approach, and I was pleased today to be reminded – by a 7-year-old! – of the elegance of this approach. Nice one Shiro (and Saneef!).

Footnotes

¹ Assuming that administrators at the organisation where they volunteer enable this feature for them, of course: Three Rings‘ permission model is robust and highly-customisable. Okay, that’s enough sales pitch.

In Loving Memory of Square Checkbox

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

…every major OS vendor has been adhering to the convention that checkboxes are square and radio buttons are round.

…

Apple is the first major operating system vendor who had abandoned a four-decades-long tradition. Their new visionOS — for the first time in the history of Apple — will have round checkboxes.

Apple Design Resouces — visionOS — Library

Anyway, with Apple’s betrayal, I think it’s fair to say there’s no hope for this tradition to continue.

I therefore officially announce 2024 to be the year when the square checkbox has finally died.

Nikita Prokopov

The Web did a bad enough job of making checkboxes and radiobuttons inconsistent. I’m not saying you can’t style them, Web developers, but let’s at least keep the fundamental shape of them the way that they have been for decades so that users can understand them!

But yeah, Apple’s new designs could spell the beginning of the end of this long-established standard. Sad times.

Gutenberg versus Elementor – the beginners challenge

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

What happens when you give Gutenberg and Elementor to complete Beginners? In this challenge, Meg and Lily (two of my daughters) are tasked with re-creating a webpage. They’ve never used Elementor or Gutenberg before, and I only gave them 30 minutes each.

…

Jamie Marsland

Jamie of Pootlepress challenged his daughters – who are presumably both digital natives, but have no WordPress experience – to build a page to a specific design using both Gutenberg and Elementor. In 30 minutes.

Regardless of what you think about the products under test or the competitors in the challenge (Lily + Gutenberg clearly seems to be the fan favourite, which I’d sort-of expect because IMO Gutenberg’s learning curve is much flatter that Elementor’s), this is a fantastic example of “thinking aloud” (“talkalong”) UX testing. And with (only) a £20 prize on offer, it’s possibly the best-value testing of its type I’ve ever seen too! Both the participants do an excellent job of expressing their praise of and frustration with different parts of the interface of their assigned editing platform, and the developers of both – and other systems besides – could learn a lot from watching this video.

Specifically, this video shows how enormous the gulf is between how developers try to express concepts that are essential to web design and how beginner users assume things will work. Concepts like thinking in terms of “blocks” that can resize or reposition dynamically, breakpoints, assets as cross-references rather than strictly embedded within documents, style as an overarching concept by preference to something applied to individual elements, etc… some as second nature once you’re sixteen levels deep into the DOM and you’ve been doing it for years! But they’re rarely intuitive… or, perhaps, not expressed in a way that makes them intuitive… to new users.

Note #19590

Called @Tesco Abingdon for a #flujab but fell down a black hole in their menu system. Had to choose the “continue to hold” option several times… and then nobody answered anyway…

Higher/Lower Datepicker

I’ve written before about the trend in web development to take what the web gives you for free, throw it away, and then rebuild it in Javascript. The rebuilt version is invariably worse in many ways – less-accessible, higher-bandwidth, reduced features, more fragile, etc. – but it’s more convenient for developers. Personally, I try not to value developer convenience at the expense of user experience, but that’s an unpopular opinion lately.

Screenshot showing a hovered hyperlink to "Digital Forest" on a list of green hosting providers in France. — Here’s a perfect example I bumped into earlier this week, courtesy of The Green Web Foundation. This *looks* like a hyperlink… but if you open it in a new tab/window, you see a page (not even a 404 page!) with the text “It looks like nothing was found at this location.”

In the site shown in the screenshot above, the developer took something the web gave them for free (a hyperlink), threw it away (by making it a link-to-nowhere), and rebuilt its functionality with Javascript (without thinking about the fact that you can do more with hyperlinks than click them: you can click-and-drag them, you can bookmark them, you can share them, you can open them in new tabs etc.). Ugh.

Date pickers

Particularly egregious are the date pickers. Entering your date of birth on a web form ought to be pretty simple: gov.uk pretty much solved it based on user testing they did in 2013.

Here’s the short of it:

Something you can clearly type a numeric day, month and year into is best.
Three dropdowns are slightly worse, but at least if you use native HTML <select> elements keyboard users can still “type” to filter.
Everything else – including things that look like <select>s but are really funky React <div>s, is pretty terrible.

Calendar datepicker with slider-based timepicker and no text-based fallback. — Calendars can be great for choosing your holiday date range. But pressing “Prev” ~480 times to get to my month of birth isn’t good. Also: what’s with the time “sliders”? (Yes, I know I’ve implemented these myself, in the past, and I’m sorry.)

My fellow Automattician Enfys recently tweeted:

People designing webforms that require me to enter my birthdate:

I am begging you: just let me type it in.

Typing it in is 6-8 quick keystrokes. Trying to navigate a little calendar or spinny wheels back to the 1970s is time-consuming, frustrating and unnecessary.

They’re right. Those little spinny wheels are a pain in the arse if you’ve got to use one to go back 40+ years.

Date "spinner" currently showing 20 December 2012. — These things are *okay* (I guess) on mobile/touchscreen devices, though I’d still prefer the *option* to type in my date of birth. But send one to my desktop and I will curse your name.

Can we do worse?

If there’s one thing we learned from making the worst volume control in the world, the other year, it’s that you can always find a worse UI metaphor. So here’s my attempt at making a date of birth field that’s somehow even worse than “date spinners”:

My datepicker implements a game of “higher/lower”. Starting from bounds specified in the HTML code and a random guess, it narrows-down its guess as to what your date of birth is as you click the up or down buttons. If you make a mistake you can start over with the restart button.

Amazingly, this isn’t actually the worst datepicker into which I’ve entered my date of birth! It’s cognitively challenging compared to most, but it’s relatively fast at narrowing down the options from any starting point. Plus, I accidentally implemented some good features that make it better than plenty of the datepickers out there:

It’s progressively enhanced – if the Javascript doesn’t load, you can still enter your date of birth in a sensible way.
Because it leans on a <input type="date"> control, your browser takes responsibility for localising, so if you’re from one of those weird countries that prefers mm-dd-yyyy then that’s what you should see.
It’s moderately accessible, all things considered, and it could easily be improved further.

It turns out that even when you try to make something terrible, so long as you’re building on top of the solid principles the web gives you for free, you can accidentally end up with something not-so-bad. Who knew?

Confused.com Confuses Me

It’s that time of year again when I comparison-shop for car insurance, and every time I come across a new set of reasons to hate the developers at Confused.com. How do you confuse me? Let me count the ways.

No means yes

I was planning to enumerate my concerns to them directly, via their contact form, but when I went to do so I spotted this bit of genius, which clinched it and made me write a blog post instead:

Animated GIF showing how clicking on "No" on Confused.com's contact form checks the "Yes" box. — Clicking the word “Yes” means “Yes”. Clicking the word “No” means “Yes” as well.

Turns out that there’s a bit of the old sloppy-paste going on there:

<input type="radio" value="Yes" id="ContactByPhoneYes" name="contactByPhone" />
<label for="ContactByPhoneYes" class="label">Yes</label>
<input type="radio" value="No" id="ContactByPhoneNo" name="contactByPhone" />
<label for="ContactByPhoneYes" class="label">No</label>

I guess nobody had the “consent talk” with Confused.com?

That’s not my name!

Error message "Please enter a name between 2 and 30 letters long..." when Dan enters "Q" as his surname. — Somebody needs to brush up on their falsehoods programmers believe about names.

Honestly, I’m used to my unusual name causing trouble by now and I know how to work around it in the way that breaks the fewest systems (I can even usually get airline tickets without too much difficulty nowadays). But these kinds of (arbitrary) restrictions must frustrate folks like Janice Keihanaikukauakahihulihe’ekahaunaele.

I guess their developers didn’t realise that this blog post was parody?

Also, that’s not my title!

This one, though, pisses me off:

Animation showing title selector with options "Mr", "Mrs", "Miss", and "More...". Clicking "More..." reveals three more: "Ms", "Dr (Male)" and "Dr (Female)" — As everybody knows, there are only six titles, and two of them are “Dr”.

This is a perfect example of why your forms should ask for what you actually want to know, not for what you think people want to tell you. Just ask!

If you want to know my gender, ask for my gender! (I’m a man, by the way.)
I don’t understand why you want to know – after all, it’s been illegal since 2012 to risk-assess/price car insurance differently on the grounds of gender – but maybe you’ve got a valid reason. Which hopefully you’ll tell me in a tooltip. Like you’re using it as a (terrible checksum) when you check my driving license details, that’s fine!
If you want to know my title, ask for my title! (I prefer not to use one, but if you must use one I’d prefer Mx.)
This ought to be an optional field, of course, and ideally you want a free text input or else you’ll always have missed somebody (Lord, Reverend, Prince, Wing Commander…). It’s in your interests because I’m totally going to pick at random otherwise. Today I’m a Ms.

Consistency? Never heard of it.

It’s not a big thing, but if you come up with a user interface paradigm like “clicking More… shows more buttons”, you ought to stick to it.

Animation of marital statuses: clicking "More..." shows a dropdown instead of more buttons. — Maybe their internal style guide says “a More… button with three additional options should use buttons, but four additional options should be a drop-down”. But it seems more-likely that they just don’t have one.

Again, I’m not sure exactly what all of this data is used for, nor why there’s a need to differentiate between married couples and civil partnerships, but let’s just assume this is all necessary and legitimate and just ask ourselves: why are we using drop-downs now for “More…”? We were using buttons just a second ago!

"How many cars are at your home?" has a "More..." box that shows more buttons. — This was just crying out for a type-in field. But I guess the same developer who did the “Title” question did this one too, and wanted to show off the fancy “more buttons” control they’d written. (Imaginary style guide be damned!)

What’s my occupation again?

There’s so much to unpack in the “occupation” part of the form that I’m not even sure where to begin. Let’s just pick out a few things:

What type of student are you? List of options, many of which intersect. — I never answered a question this hard even in the exams I did when I *was* a student. Why do we care where students live… except if they’re postgrads? If I’m a mature student studying a postgraduate course in medicine while living at home with my parents… which of the five possible options should I pick? And, again: what difference could it conceivably make?

The student thing is just the beginning, though. You can declare up to two jobs, but if the first one is “house person/parent” you can’t have a second one. If you’re self-employed, that has to be your first job even though the guidance says that the one you spend most time on must be the first one (this kind of thing infuriated me when I used to spend 60% of my work time employed, 20% self-employed, and 20% studying).

I’m not saying it’s easy to make a form like this. I know from experience that it’s not. I am saying that Confused.com make it look a lot harder than it is.

Tooltip reading "Please choose the employment status that reflects the majority of the work you do. For example if you are a house person and have a part time job of 5 hours a week, you should select 'House person/parent' as your primary job. — Well that clears everything up. Also, I think you mean “houseperson”, unless you’re referring to somebody who is half-house/half-person, like some kind of architectural werewolf.

What do you mean, you live with your partner?

At a glance, this sounds like a “poly world problem”, but hear me out:

Relationship to policy holder: Living together (couple) results in the error "The driver's marital status must be Living With Partner" if their relationship to the proposer is Living Together (Couple)". — What you’re seeing here is a reference-identity error. I can’t possibly be living together with somebody as a couple if their marital status isn’t “Living With Partner”.

I put Ruth‘s martial status as married, because she’s married to JTA. But then when it asked how she was related to me, it wouldn’t accept “Living together (couple)”.

Relationship to proposer question with 'spouse' option but not 'living with partner'. — If I put Ruth as the primary policyholder (proposer) though, I don’t even get the option of “living together (couple)” to describe her relationship with me. ‘Cos it’s physically impossible to have a partner *and* be married, right?

Even if you don’t think it’s odd that they hide “living with partner” button as an option to describe a married person’s relationship to somebody other than their spouse… you’ve still got to agree that it’s a little bit odd that they don’t hide the “spouse” button. In other words, this user interface is more-okay with you having multiple spouses than it is with you having a spouse and an unmarried partner!

And of course this isn’t just about polyamorous folks: there are perfectly “normal” reasons that a person might end up confused by this interface, too. For example a separated (but not yet divorced) couple, one of whom has a new partner (it’s not even inconceivable that such a pair might share custody of a car). Also interesting is the fact that the form doesn’t care about the gender of your spouse (it doesn’t ask for “husband” or “wife”) but does care about the gender of your parent, child, or sibling. What gives?

Half a dozen easy fixes. Go for it, Confused.com.

Given that their entire marketing plan for most of the last two decades has been that they reduce customer confusion, Confused.com’s user interface leaves a lot to be desired. As I’ve mentioned before – and speaking as a web developer that’s been in the game for longer than their company has – it’s not necessarily easy to get this kind of thing right. But you can improve a form like this, a little at a time. And every little win counts for something: a more-satisfied returning customer, perhaps, or a new word-of-mouth recommendation.

Or you can just let it languish and continue to have the kind of form that people mock on the public Internet.

It’ll be a year until I expect to comparison-shop for car insurance again: let’s see how they get on, shall we?

Update (21 January 2021): Confused.com Respond!

I didn’t expect to receive any response to this post: most organisations don’t when I call-out the problems with their websites (not least because I’m more than a little bit sarcastic about it!). I never heard back from the Digital Climate Strike folks, for example, when I pointed out that their website was a great example of exactly the kind of problem they were protesting. But Confused.com passed on my thoughts to Product Manager Gareth who took a look at them and gave me a £20 Amazon gift card by way of thanks. Nice one, Confused.com!

HTML attributes to improve your two factor experience

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

There are plenty of opportunities for friction in the user experience when logging in, particularly while entering a two factor authentication code. As developers we should be building applications that support the need for account security but don’t detract from the user experience. Sometimes it can feel as though these requirements are in a battle against each other.

In this post we will look at the humble <input> element and the HTML attributes that will help speed up our users’ two factor authentication experience.

…

Phil Nash (Twilio)

Summary: simple changes like making your TOTP-receiving <input> to have inputmode="numeric" gives user-agents solid hints about what kind of data is expected, allowing mobile phones to show a numeric keypad rather than a full keyboard, while setting autocomplete="one-time-code" hints to password managers and autocomplete tools that what’s being collected needn’t be stored for future use as it’ll expire (and can also help indicate to authenticators where they should auto-type).

As my current research project will show, the user experience of multifactor authentication is a barrier to entry for many users who might otherwise benefit from it. Let’s lower that barrier.

Joe’s First Computer Encounter

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

…

(Joe reads the text on IE and clicks on “Suggested Sites”)

Me: “Why did you click on that?”

Joe: “I don’t really know what to do, so I thought this would suggest something to me.”

…

Jennifer Morrow

Finding adults who’ve got basically no computer experience whatsoever is getting increasingly rare (and already was very uncommon back in 2011 when this was written), and so I can see why Jennifer Morrow, when presented with the serendipitous opportunity to perform some user testing with one, made the very most of the occasion.

As well as being a heart-warming story, this post’s a good reminder that we shouldn’t make assumptions about the level of expertise of our users.

Note #12926

Saw this and thought of you, @themissprince: cantunsee.space
Still have “the eye” for pixel-perfect design? #UX

The window can’t be opened. But I can open it anyway. Wait, what?

This link was originally posted to /r/CrappyDesign. See more things from Dan's Reddit account.

The original link was: http://i.imgur.com/14qTmmT.png

The Good, The Bad, And The Ugly Of System Tray Icons

What the fuck is that icon for? Despite the best efforts of icon designer to (apparently) make clear and comprehensible icons, and by computer users to learn and understand them, I still remain perplexed from time to time by the plethora of icons in my system tray (sorry, I mean Taskbar Notification Area). Let’s take a tour:

This is a good start. It’s a clear, obvious icon that just screams out what it is and what it does. It’s blatantly the volume control. If it’s got more lines, the speakers are louder. No lines, and it’s muted. It’s also a lot clearer than the standard volume icon that came with earlier versions of Windows, which tried too much to look like a speaker, and not like a representation of a speaker. There’s a reason that speed camera signs in the UK look like old-fashioned cameras: it’s about the representation (can you imagine an iconic form that actually represented a speed camera – how stupid would that look?).

And now it all goes rapidly downhill. What the fuck does this icon mean? It’s a monitor with a growth in the top-left corner which I’m lead to believe is supposed to be an Ethernet cable. Seriously, Microsoft? You almost had this one right in earlier versions of Windows, when you had the “two computers with a line between them” metaphor, which is a more clear representation of network than this is. And when it’s connecting? A pair of spinning balls! What the fuck does that mean? It means “something’s happening” without giving any clue as to whether my pen drive is mounting or my toast is nearly done.

Oh, it’s a flag. I guess this must be the icon I click on to, I don’t know, help aircraft land on my computer. While I applaud Microsoft’s efforts to make everyday users know about the maintenance tasks they ought to be doing on their computer (like backups), this icon doesn’t scream out “DO SOMETHING OR YOU MIGHT LOSE ALL YOUR DATA!” to me. Then again, my work puts me in contact with people who ignore even their I.T. departments telling them about the importance of backups, so this might be a losing battle anyway. That’s probably why Windows is waving the white flag.

As a side note, am I the only one who’s noticed that the Windows 7 taskbar and the new standard notification icons, above, are starting to bear a remarkable similarity to MacOS (at least, left in their default configuration), with it’s Dock and Notifcation Area. Unfortunately, Microsoft didn’t take the time to tell every software manufacturer that white is the new colourful, so only Windows’ own icons appear in shiny white: everything else looks just like it used to. Like these:

This is the icon for my wireless network device. Usually I don’t bother with these, but this this particular app is the first of it’s kind that I’ve actually found to be better than Windows’ own (excellent) Wireless Zero Configuration tool. Unfortunately, it’s icon leaves a little to be desired. Thanks to mobile phones, everybody and their grandmother now understands the universal icon for “signal strength” is a series of bars ascending like steps. Except for NetGear, apparently, who believe that the best icon would be a radioactive laptop whose screen changes colour from green through yellow to red to represent signal strength. I hope none of their customers are colourblind.

I like my keyboards (and mice) big and feature rich: I’ve got big hands and I have no problem memorising what functions and macros I’ve mapped to a dozen or so hotkeys. That’s why, as well as having the best mouse in the world, I have a related keyboard with about a million buttons. This icon, which depicts a keyboard and mouse, links to the applet that configures those hotkeys, and provides notifications about my mouse’s battery level.

It’s not the clearest icon in the world – how about a little more contrast between the mouse and keyboard there? – but it’s perfectly functional.

Obvious Bluetooth icon is obvious. Kthxbye.

Although I do wonder why the Bluesoleil driver stack – which I tend to use rather than the Microsoft one or the one provided by my chipset manufacturer, because of it’s fantastic support for just-about-everything from Wiimotes to OBEX/OPP – uses an icon with a very-slightly-different Blue, which only irritates you if you, like me, frequently have multiple Bluetooth dongles installed with different stacks attached to each. I guess that’s just me.

You can almost see where Microsoft is trying to go with the safely remove hardware icon, but it just doesn’t seem right. It only shows a USB plug, yet (for some unknown reason) provides features to unmount, for example, my internal SATA hard drives. And the little green “tick” icon suggests that this icon back-ends onto an application which is “doing fine” and doesn’t need my attention. So, as always, I happily yank out my pen drive without unmounting it, and it always turns out fine because I’m not the kind of idiot that does so while I’m copying files to and from it.

Ah, Sandboxie, how I love you. This icon’s actually pretty good, and I couldn’t think of a better one for an application that “runs other applications in a sandbox” – see, it’s a stylised sandbox! My only objection is that the best icon that the designer could come up with for when the application is working in the background is what looks like a sandbox with five cat turds in it. Seriously. Seriously; let me show you:

If that’s supposed to show me that my sandbox is in use then, well, yes, I guess it does. It could also be to indicate that my sandbox needs cleaning – a routine operation with the application – in which case, yes, it also works. Maybe it’s a better icon than I thought. Or maybe it’s just telling me to shoot the cat.

ZoneAlarm. I used to like the ZoneAlarm icon, back when it was two little bar charts – one red, one green – that indicated the amount of traffic coming and going from my computer. Now it still does that, but when there’s minimal traffic it shows this “Z” icon instead. This icon’s also okay, but it irritates me that the icon changes so drastically. If I’m looking for an icon, I want it to look somewhat vaguely sort-of the same as when I left it, not completely different.

What? An amorphous blob? I guess this much be the button to click if I run out of jelly cubes. Nope, it’s the icon for WebDrive, a wonderful little abstraction layer that allows S3, SCP, FTP, FTPS etc to be mounted transparently as local drives: in short, it makes it so that any application can manage files stored on just about any remote system can be edited as if they were local, which is a sickeningly lazy way to manage a network. It makes me feel dirty, and I love it.

On the other hand, the icon sucks. What does it mean? It looks like a piece of nondescript corporate artwork. Their other products don’t fare much better – they make an FTP server whose icon is the same as the WebDrive icon, but in red and blue instead of blue and orange.

One of these days somebody will release a program that allows me to easily change the system tray icons of other programs, and I will love it dearly. So long as it has a good icon.

You fail, Skype. When I think of you, I think of your lovely blue icon with the “S” in the middle. What you’ve got here is the same icon but in green and without the “S”. So… not the same icon at all. The worst of it is, I can see what they’re trying to achieve. It’s green because my status is “online”, but couldn’t you have used your regular icon and given it a thick green border, or made the cancerous growths on the top and the bottom turn green, instead? That way, I could still tell at-a-glance that you were Skype and not some mucus that had gotten stuck to the corner of my screen.

Okay, it’s a fox. Thankfully this icon is distinct, at least, unless you’re running some variety of furry-fandom-focussed-feed-fetcher, and doesn’t take long to identify as being the stunning AnyDVD, the flagship product of SlySoft, who use the fox head icon as their corporate image, too. I’ll let this one off, but surely an icon that somehow featured an optical disc in it might have been a little better?

This is a perfectly good icon. It’s for Giganews Accelerator, an abstraction layer that adds SSL, compression, and rate-limiting controls to any newsreader software. Most of you won’t care even a little about what any of that means, so here’s the scoop: the icon uses the style of their company logo, it’s small, legible, and distinct, and it’s shaped like a “down” arrow, which is pretty sensible for an application that streamlines downloading.

In other news, Giganews are a fantastic usenet provider and you should really give them a look.

Another perfectly good icon, this time for XMing. The artifacts around the edges are probably the result of the icon being designed to appear only on grey backgrounds, which is a little sloppy, but better that than for this mostly-black icon to disappear completely on black backgrounds. Again, many of you will have never heard of or care what this program is, but trust me: this is a perfectly good icon.

A computer… wearing a hat. You know, this one almost makes sense, if you think about it hard enough or if you’ve had a couple of drinks first. It’s the icon for Pageant, a part of the PuTTY suite, and it… no, wait: wearing a hat isn’t a good icon, is it? A good icon for this application, which stores the keys you use for connecting to other computers, might be more like a keyring, if it weren’t for the fact that every application in the world already used a keyring, sometimes completely inappropriately, like in the case of some versions of the Windows Genuine Advantage nagware. I initially thought that the hat metaphor was a good one, because it was about the different roles you’re in (or “hats” that you put on your computer), but that’s not a good metaphor because it’s possible to store any number of keys in Pageant, but very few people wear more than one hat. At least, not if they don’t want to get laughed at.

A speech bubble, sort-of, and the distinctive green spot of an instant messaging program. Not bad, although if I were running multiple instant messengers there’d be no way for me to know that this minimalist icon belonged to Pidgin. Of course, the theory with Pidgin is that you don’t need to run any other instant messengers (in my case, Pidgin keeps me simultaneously on four Google Talk accounts, MSN, ICQ, Yahoo!, IRC, Facebook Chat, and others), so you can see why they thought that would be okay. They’re wrong, of course, because I’m having to run Skype as well, but the theory was sound.

Like I said, it’s not a bad icon, but Pidgin has such a distinctive logo (a pigeon!) that you’d think they’d have tried to work that in, somewhere. On the other hand, I can’t complain too much because the program allows me to choose my own icons anyway. And also, it’s awesome.

Another pretty-good icon, this time for Synergy+, which helps me pretend that I’m hacking into The Matrix by running several computers (all running different operating systems) and a crazy number of monitors (of all shapes and sizes) simultaneously. Right now I’m surrounded by five screens and let me tell you, having 7.5MP of screen real estate in front of you (while most of your friends with just one high-def widescreen monitor have about 2MP) makes for a fabulous way of organising yourself. Instead of putting windows behind one another, just fling them over onto one of your other monitors, and glance across when you need them! Computer slowing down a little? Move some of your processing off onto your other computers, and get all your speed right back again. It’s like supercomputing on your desktop.

Anyway – the icon’s okay, because it’s the “ring” icon of Synergy with a “lightning bolt” that appears when connection has been established. It’d be better if it had more granularity (if the network connections between my computers failed, but at least one was still connected, the icon would still show a lightning bolt: how about a full lightning bolt if all the connections are working, and half a bolt if only some are?), but it’s still quite workable.

Another good icon. It’s AutoHotkey, and it’s, well, the AutoHotkey icon. I suppose it could have been a letter H “key” from a keyboard, but then again, half the things I use AutoHotkey for feel more like macro programming and less like shortcut keys. The key (hah!) thing is that I can identify it at a glance, and it’s perfectly good at that.

This is the icon for Quartz, SmartData‘s (really very good) in-house timesheet/task tracking solution. To plug the application a little more; it sits in your system tray and you click on it to change tasks (for example, right now I’m on my lunch break, but when I get back from lunch I’ll select the project I’m working on this afternoon. It collates all of the data that you and your staff have been working on and presents reports and statistics about how efficient you’re being (by comparison to the actual costs of your staff time, quoted costs for work, and so on), blah blah blah. It’s pretty cool. The icon… that’s debatable. In fact, Alex (lead developer on Quartz) and I have debated it many, many times.

It’s a clock. Well, yeah, that’s a pretty good starting point for a time tracking application, and it’s reasonably distinct. It changes the colour of the face when you’re on breaks, so you don’t forget to tell it when you’re back. And that’s about it. Basic and functional.

But there are two improvements I’d like to see. Firstly, the problem with a clock is it’s a little too generic. I’m actually surprised that more applications don’t have a clock icon (other than the long-dead Windows Clock). Secondly, it’d be awesome if I could tell even more at-a-glance, by associating colours, perhaps, to different projects, and having a little coloured “button” in the corner of the icon, like we saw earlier with Pidgin, that indicated which task I was currently on. I suppose I could just mouse-over the icon, but I’ve got 7.5MP of desktop, here, and it’s a long way from wherever-I-am to the Quartz icon.

On the other hand, I suppose I could just poke Alex until this feature makes it into the application. That’s what I usually do.

It’s a lightning bolt! Honestly, this could be the icon for anything: some anti-virus software, an instant messenger, a BitTorrent client: really, anything at all. As it happens, it’s the icon for Daemon Tools, disc virtualisation software. Again: seriously, couldn’t you have put a picture of a compact disc somewhere into the icon? Perhaps you could have even had a number in the corner, showing how many disc images were mounted right now, or changed the colour based on whether or not the virtual drive was being accessed? Maybe you could have done anything that it’s a dull and uninspiring lightning bolt icon. Such great software, let down by a shitty icon.

A fabulous icon. It’s for a VNC Server, and it’s even got the letters “VNC” in it. It’s a little plain, but perfectly functional, and it even changes colour when a connection has been established.

And finally: the Language Bar icon. I turn off all of the superfluous bits, leaving just the icon, and I only keep that because it changes colour (to a colour chosen by me, which is nice) when I change keyboard layout. I periodically switch between QWERTY and Dvorak keyboard layouts, depending on what I’m writing, and sometimes I use different layouts in different applications on the same monitor: it’s on these occasions that I’m thankful that I’m able to glance down and see easily what keyboard I’m typing on. It kinda ruins the sleek white icons that Microsoft are providing these days that the first thing I do with them is add a colourful (pink, no less) version of the same, but as we’ve already discovered; these white icons aren’t making the impact they were supposed to anyway, it seems.

(if you’d never heard of Dvorak before right now, I highly recommend you read the Dvorak Zine, especially if you write a lot and you aren’t a programmer)

So that’s my notification area: a mixture of good, bad, and ugly. Icon design and selection is often a lower consideration for developers than other parts of user interface design, and it’s easy to fuck up – especially because you can never be sure what environments your icon will ultimately inhabit, or what they’ll end up next to – and I’m not claiming that I could do any better… well; except in those cases above where I’ve specifically said that I could and how I’d do it, but these are the absolute worst cases.