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.