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.
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.
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:
- 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?
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:
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!
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:
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.
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!
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:
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.
What do you mean, you live with your partner?
At a glance, this sounds like a “poly world problem”, but hear me out:
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)”.
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?
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.
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 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.”
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.
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.