A few weeks ago I had the opportunity to spend a few minutes browsing the web on the new touchscreen Blackberry Storm.
The rendering was passable but from a UI perspective, it was the most painful browsing session I’ve ever had the misfortune to experience. The phone seemed to interpret every action I made as requiring it to do the thing I was least likely to want. I have a reasonably high threshold for poor usability (and several shipping apps on my current Android phone fall into that category) when I need to get something done but after only a few minutes I was close to tearing my hair out. I’m so glad we have Top Men working on mobile browsing UI. I can’t wait to get Fennec on my Android phone…
Ubuntu supports the annoying and near-useless Insert and Caps Lock keys, with no obvious way to deactivate them. (Windows and Mac OS also make the mistake of supporting Caps Lock. I mention it here because Ubuntu – unlike Windows or Mac OS – offers no fewer than five options for “CapsLock [sic] key behavior”, but none of them are “Off”.)
You’ll be encouraged to hear that, four years later, GNOME now supports ten different options for “Caps Lock key behaviour” (a 100% improvement)! Sadly, it is still true that none of them are “Off”. :-((
In the discussion about making screensavers intelligent so that they disable themselves if you keep dismissing them, Philip Paeps made the following comment:
I use a Makefile to compile my LaTeX-beamer presentations. The “present:”
target of that Makefile just does “xscreensaver-command -disable” before
calling xpdf and then “xscreensaver-command -enable” afterwards (ie: after
I don’t see a reason to introduce “intelligence” into software when it can
be simply implemented by human cleverness.
No disrespect to Philip, but I have rarely seen a clearer example of the disconnect in requirements between smart geeks and ordinary people :-)
How many times have you been to a presentation where the presenter’s screensaver or screen blanker kicks in 5 minutes in to the presentation, and then every so often thereafter, causing them to have to stop in mid-flow and swipe their finger over their trackpad to restore their slide to view?
It would be great if the GNOME screensaver (or that of other free software platforms) were able to detect that the screensaver had been automatically dismissed immediately after being invoked (say within 10 seconds), and decide to disable the screensaver entirely for the next hour or so. Possible loss: some energy. Possible gain: a much more pleasant presentation. Good trade-off? If this made too many false positives, then perhaps it could switch it off only after 2 consecutive sub-10-second dismissals.
The Free Software Foundation Europe just launched pdfreaders.org, a site designed to be an alternative link for places where people have to offer “Download a PDF reader here”. However, compared to the competition, the usability of the site is not very good. So much so that I would be very concerned about linking to pdfreaders.org from a site on which I was providing PDFs, because I would be concerned that users would not be able to get what they need.
A quick list of flaws:
“Vendor neutrality” has trumped usability – it offers a choice of 4 (Windows), 2 (Mac OS X) or 5 (Free OSes) readers rather than the best one for each OS. This is probably the primary foot-shooting move – it will bewilder anyone trying to use the site.
They don’t detect the OS the user is running and highlight choices for that OS.
Some software is marked “additional software may be required to use this program”. What does that mean? Either it is or it isn’t, and if it is, what is it and where do I get it?
There are paragraphs of text to read before you get to the download links.
At least one of the Windows downloads leads to an FTP site with a ZIP file. What are the chances of an average user correctly installing that software? Even with a proper Firefox installer we lose almost half of downloaders along the way.
They forgot to register the obvious typo “pdfreader.org” and it’s now been grabbed by a squatter.
This is a mock-up of what the page should look like for a Windows user who speaks English. (Both the OS and the language should be detected server-side, although there are links on the page to override the choice.) Note that graphic design is not my forte. Page features:
All of the possible free software PDF readers for each OS have been evaluated and the one with the best combination of easy installability, compatibility and usability has been recommended.
The link would be direct to the download, not to the project website.
For free OSes, it would detect the OS and say “you probably already have a PDF reader but, if not, here is how to install some using your package manager”, then give instructions.
Rather than trying to force people to read all the freedom stuff before you tell them about the download, it lets them start the download, then give them the freedom stuff to read while they are waiting. So it does not, in my view, compromise the core message of the importance of freedom.
The language has been simplified and dejargonized.
As I write (although not as I post), I am flying back from Australia (where I was attending linux.conf.au) on an Airbus A380, which QANTAS have just started using on their London to Sydney route. These new planes, as well as being really big, have high-res widescreen video-on-demand seatback entertainment. This client software, “iQ”, has terrible usability and so rather than sit here and try and use it, I’m going to inflict an analysis on you all :-) Warning: long and occasionally ranty screed ahead.
Chapter 9 in Alan Cooper’s book “The Inmates Are Running The Asylum” explains a seatback entertainment system that they designed. But clearly the designers of the A380 system didn’t read the book, because it commits many of the possible blunders listed there, with exactly the consequences that Alan Cooper says that they would have if implemented. If you haven’t read this book, do.
Hardware: self-contained seatback computer with hard disk and 512MB RAM, widescreen (guess: 1024×800) high-resolution LCD touchscreen. At one point, they had to reboot it, and showed that it was running a version of Red Hat Linux, dated November 2006 (anyone know any good recent kernel exploits? :-). There was an optional retractable controller in the armrest with the usual controls on one side and a full mini keyboard/game controller on the other. I didn’t use that much at all. In short experiments, it didn’t make much difference which you used.
Object Browser Type 1 – General, Film and TV
The menu system is basically a giant tree structure – a big Alan no-no. This maximises the amount of navigation you need to do in order to get a full overview of what is available, because you have to go into and out of every category and sub-category. The top level has seven categories – Entertainment, News, Business, In Sky Shopping, Information, Communications and Settings. Pick Entertainment and you then have six choices: Movies, TV, Music, Radio, Games and Audio Books. Pick Movies and you then have a choice of ten categories – Premiere, Encore, Oscar Classics, Family, etc. etc. Below that, you have the actual movies themselves – albeit just a picture, the title and a genre description. To actually find out what each one is about, you have to select it. (I think some movies appear in more than one category. Some music certainly did.) Sometimes, in TV, there’s at least one more level because you need to pick a series and then an episode.
Object Browser Type 2 – Music
They seem to have implemented three types of object browser, with different interaction patterns for each. The first one – for the upper levels, movies and TV – has five items per screen, scrolls horizontally with no scrollbar, and requires a tap to select and a tap to activate (i.e. move down the tree). The second one – for music – selects and activates with a single tap, scrolls vertically with a scrollbar you can’t drag, and has ten smaller (too small) items per screen. The third one – for A-Z listings – has five items per screen, scrolls vertically with a scrollbar you can’t drag, and requires two taps to activate.
This need for incessant navigation is made even more painful by poor response time. Horizontally scrolling using an Object Browser Type 1 from one end to the other of a 21-item list, tapping the button frantically, took 13 seconds. (Compare choosing one of 21 items using any current GUI toolkit or in HTML.) There’s no draggable scrollbar, only a button, so no way of jumping or increasing speed. It stores up taps so there’s a big lag after you stop tapping frantically before it stops moving, so you tend to overshoot your target. Selections take half a second to work. I don’t know whether this is because the computer is underpowered for the flashy scale-in-and-out style interface they’ve chosen, or it’s a design misfeature.
Perhaps the tree structure was added because it was the only way to inflict a small enough amount of scrolling on the user that there would not be in-flight mass suicides. Imagine a 200-item list of movies with this interface.
Object Browser Type 3 – A to Z
They have a Movies A-Z (but no TV A-Z), which I thought would be a good way of bypassing the endless navigating. But they manage to shoot themselves in the foot here as well because instead of just being a long list you scroll through, it was divided into categories by letter, and you had to select each letter in turn before scrolling through a much shorter list. There are five items on the screen and the scrollbars are not sized so the only way of telling if there was a sixth or subsequent hidden item was clicking the down arrow six times and seeing if the list moved. Additionally, you get much less info (just the title, rating and year) in the A-Z than in the more painfully scrolly bit of the interface, so it’s hard to know even if you’ve seen the film in question.
If you click a letter for which there are no items, e.g. Q, it tells you There are no items in this list beginning with Q”. Then why didn’t you grey it out and stop me picking it? At one point, I clicked “#”, which was at the end of the A-Z, and got the same error “no items beginning with #”. It makes you wonder whether they did any testing at all, because that list was for items beginning with a number, not a #. Shows clear lack of attention to polish.
There are some neat features in the system. You can dim the screen when listening to music so it goes to a grey-on-black progress and info indicator. The music you choose plays while you are painfully navigating the rest of the system, and there’s one touch icon access to a simple set of controls. You can create a playlist. And of course when you finally choose and watch some video, it’s in nice high-res widescreen.
The route display application has somewhat higher-res satellite maps and more options (nighttime, globe etc.) and you can switch to “interactive map” if you want to get nostalgic for the days of tile-based click-to-reload-page-and-scroll-one-square Mapquest maps from the late 1990s as experienced over a 28.8k modem. There’s a forward-facing “SkyCam” mounted in the tail which gives you stunning views – or would if they hadn’t used something with the image quality of a £15 webcam. Still, watching take-off and landing like this was very cool. Putting one in the belly as well would have been even better, because you could then have viewed the landscape without 30% of your viewing space being taken up by plane.
The armrest has a USB port for charging gadgets (which I didn’t use) and an ethernet port. There is supposed to be limited external connectivity (POP3 mail and selected IM clients) but the wireless the on-screen help talked about didn’t seem to be there. I could have tried using the ethernet port but I don’t use POP3 anyway so I didn’t bother.
There is supposedly at-seat power but the socket is located low down at the base of the armrest of the seat in front of you so you can’t actually see its orientation or what plugs it takes. I had a steward on the floor for at least a minute trying to work it out for me. At one point, the two other people in my row left and I got a chance to look – US, EU and possible Australian, no earth connector. And then, when I plugged in, to either of the two in my row, I didn’t get any juice. The flight attendant said he would “reset the seat” but this also seemed to involve resetting the seat of the guy in front of me! So he gets inconvenienced by my need for power! It’s easy to forget on a plane that each entertainment system (except at the front of a block) is made up of hardware from two different physical seats. Even after that, it didn’t work. I was glad I brought three batteries. At-seat power is a really simple way to make long plane journeys more pleasant for many passengers, and yet they still seem to have managed to mess it up.
Even with all that, it’s much better than the flight the other way, which was in a 747 with broken VOD so all you got was four unlabelled cycling channels of video where you just had to pick something that looked interesting and watch to see what it was. And you can’t complain too hard about something which allows one to watch the entire first series of Fawlty Towers. But still, the UI is timelessly terrible. Having spend billions developing the thing, was there really no budget for an interaction designer?
Six months ago I had to set up a Linksys Access Point (WAP54G) as a wireless repeater in my house, to get the wireless signal from my Wireless-G Broadband Router (WRT54G) to reach the attic. It was a painful process, and the main reason it was painful was trying to get the correct value on the repeater for the setting labelled “Remote Access Point’s LAN MAC Address”. This is how it knows where to send all the relayed traffic to.
How hard can this be? You go to your WRT54G router, click “Status”, and there it is: a field labelled “MAC Address”. Just copy that in, right? However, that’s the MAC address for the wired side. So, despite the fact that the field is labelled “LAN MAC address”, if you enter the MAC address the router uses on the LAN, nothing works! It’s not the “LAN MAC Address” at all – it’s precisely the other one, the MAC address from the Status/Wireless subtab. Doh! A “Breathtaking UI” award to Linksys, I think.
(This is a bit geeky, but I also want to document it to try and avoid anyone else having to suffer through this.)
The Mozilla Foundation’s mission is to preserve choice and innovation on the Internet. And that’s a great thing.
But there are some contexts where choice is harmful. Security is one. For example, I believe that if a Link Fingerprint download fails, the file should be deleted without giving the user the option to retain it. That’s because when you ask the user about security decisions (like “This certificate is bogus; do you want to continue?”), they normally do the insecure/convenient thing. So the trick is to avoid having to ask. But my view has been attacked in discussion as not “giving the user choice” and “just deciding for them, like Microsoft”, as if taking decisions for users is somehow always a bad thing.
Another example is shown by this O’Reilly Radar post, which notes with derision that Windows Vista preserves a distinction between “Sleep” and “Hibernate”. Commenter “Rick” exemplifies the “what’s wrong with choice? Choice is good” view when he says:
OMG, they give users a choice instead of assuming they are all morons…
Sure, there is a lot to be said for simplicity, but leaving the choice up to the user is equally valid.
But commenter RichB points out:
For example, OSX combines these two features into a single sleep feature which also hibernates in case your power dies (battery exhausted) during sleep.
This is clearly, plainly, obviously, the right way to implement the feature. And it amazes me that we’ve taken so long to see it. (Perhaps it’s harder for Vista because it has to work on a much wider range of hardware.) But it also goes to show that you can improve things for a user by reducing choice. With apparently no irony, a Microsoft representative is quoted here as saying:
[R]edundancies and choice are the second most important reason to use Windows (the first being backwards compatibility), and without it, Windows would just be a Mac.
Having done the prototyping, and a UI review with Jonathan Nightingale and Mike Beltzner, we now propose that we do the following two independent things, as a start:
1. Remove the favicon from the URL bar
We want to make the URL bar totally trusted, and that means not allowing sites to control parts of it to spoof locks or things like that. We can either remove it entirely or replace it with a generic page icon/folder icon/whatever under our control.
I note that mockups posted recently for the Places UI use this icon for a menu, and so we may need to negotiate as to what happens.
2. Change the URL bar so that everything except “Public Suffix + 2″ is greyed out
If the URL bar is focussed or hovered over, the colour switches back to black throughout. This should be possible using CSS only. The “greyed-out” colour is a pref; people who don’t like this feature can set it to “black”.
Public Suffix (also called Effective TLD) is the part of the URL not owned by a registrant. E.g. “.com”, “.co.uk”, “hokkaido.co.jp”. 2 is the default for a pref; we think this is the right number, but want real world experience. So Public Suffix + 2 is e.g. http://www.mozilla.org, http://www.ibank.barclays.co.uk/foo/bar/login.do, http://www.fred.blogspot.com/archive/2007/04/06/mypost.
We may also do other things from the LocationBar2 UI experiments. However, these two things are where we want to start, and then we can look at further changes.
I’d like to finish by pointing out that it seems to me that the process we’ve just gone through is a textbook example of how open source development and UI prototyping should work in our world. We had loads of cool ideas, implemented them in an extension, kicked them around a lot in discussion, realised some were too radical, and have now come out with a considered proposal. This rocks. Thank you to everyone who took part.
I had a great response to my 3-Question Usability Quiz – thanks for everyone who participated and who commented. I asked people (perhaps unnecessarily) not to comment too much on the questions in the previous thread, so feel free to do so now.
Results (from those who actually answered all three questions):
Left, A, A
Right, B, A
Left, B, A
Right, A, A
Left, B, B
So our first conclusion might be that there is certainly disagreement on how this should work :-) This could be a factor of the particular UI chosen or of column sorting in general. Several comments about “I just click until I get what I want” suggest the latter is certainly a factor.
Several people made the important point that using triangles is always going to be confusing – because some people will think of the triangle as an arrow, so that “A” is where the base is and “Z” is where the tip is, whereas other people will think of it as a widening, so “A” is the small tip and “Z”, being bigger, is the widest part. This is interesting, because most UIs of this sort do use triangles. The solution seems to me to be to use explicit arrows, such as ↑ (↑) and ↓ (↓). (Pirates must like those entities…)
Having two arrows means that there’s always a UI and affordance for sorting, but it is almost certainly an example of the UI principle where giving people two ways to do something actually loses them time, because they have to choose between them. It also implies that it’s equally likely that the user will want to sort in either direction, which is usually not the case – A-at-the-top is more commonly wanted by far.
However, keeping the affordance is good. So here’s a mockup of my suggested UI for this sort of sorting:
There are arrows on all columns on which the table can be sorted, to show this fact. Clicking the arrow sorts the column from the smallest item at the top to the largest at the bottom – I think a downward-pointing arrow is reasonably unambiguously correct for this. There is a highlight on the arrow on the column by which the table is currently sorted, to differentiate it from the rest. Clicking this arrow again reverses the sort (this is a more advanced feature, which people can discover).
And what was the point of all this? The UI I used was from BookEx, a book-selling web app that I’ve just become co-maintainer of because I’ve put up a private installation for some people. I didn’t think the UI was very good, but I wanted to find out why it seemed wrong to me. Thanks for helping me find out :-)
Update: After a little more thought, there are some other options for the symbols. For example, by analogy with “twisties”, you could have the “unsorted” arrow be →, converting to a downward arrow when clicked. Or, you could have the sorted arrow be ⇓ to differentiate it further. One would need to work within the HTML 4 Entity List, of course.
This needs a higher profile – a service to show you what any website looks like to someone with various sorts of colourblindness. (Example: compare WAI and colorblind WAI.) If you use the grayscale filter, not only will you know whether any bits of your page would be unreadable to one or more colourblind people, but it would also make it obvious where you haven’t explicitly specified colours (because the default colour will remain).
This is obviously useful to web designers, but perhaps it would also be useful to colourblind people too. When they complain about a website, they could send a URL saying “this is what it looks like to me”, to give the webmaster an idea of the problem.
Is it just me, or do the default OpenOffice.org Writer styles suck?
Given that most people don’t even use all six heading sizes in HTML, what made them think that it was vital to have ten styles, adjacent pairs of which are only distinguished by the presence of or lack of italics? Quick: is the italicised one more or less important? Heading 1 is not at all suitable for the top of a document, where I, at least, would expect something centred and perhaps underlined. And the spacing OOo leaves between the smaller headings and the previous paragraph is far too large, giving documents a “gappy” appearance.
In the default list, what’s the difference between “Default” and “Text Body” anyway? And where are the styles for common things like like “Quotation”, “List”, “Emphasis” and so on?
There’s a “Styles and Formatting” window which you can invoke when you want anything more than the default simple five which are in the toolbar dropdown (thereby making you pay a window management penalty). There are about five different ways of configuring the exact list of styles it displays, but it does not have a “New” button. The closest you have is “New Style From Selection”, which is one option on a combination pseudo button/menu in one corner with a totally unintuitive “Paragraph” icon on it. (After five minutes of searching, it turns out that you can create a new style from the context menu.)
Lastly, whenever I try and read a Word document, it always sets the margins too far in so some of the content is squeezed onto the next page. Do Word files not contain margin information? Grr.
There’s a big opportunity for the free software world to make a word processor which is actually usable – because it’s one area Word has failed miserably in recent years, hence their multi-million dollar new UI. The retraining this UI requires is an opportunity to persuade people to switch; but it’s going to be a hard sell if the alternative is even more complex than the original.
I’ve been following bug 366797, and discussions in mozilla.dev.security, with great interest, and I’ve been thinking about this for some time now. Here’s my (slightly long) attempt at a unified and consistent proposal for changing the way the location bar works for Firefox 3.
In the original design of the web, the URL was supposed to be an implementation detail. That hasn’t turned out to be the case, for better or for worse. Still, the URL bar itself has changed very little since Netscape 1. I believe there’s scope for changing the way it works to improve the user experience.
Don’t break stuff people use
Make the hostname stand out more to reduce spoofing
Reduce the risk of spoofing in other ways
Make the contents of the URL bar more understandable
Make common operations easier
Find a way of presenting information from EV certificates
1) Hide the scheme
The scheme (e.g. “http://”, “ftp://”) should be hidden permanently for HTTP, HTTPS, FTP and file URLs. The differences between HTTP and FTP have long since ceased to matter to the average web user. The difference between HTTP and HTTPS is, of course, important, but we have other UI to indicate that. (And if it sucks, we need to fix it.) Eliminating the scheme also means we could do things like show some HTTPS connections as if they were HTTP – e.g. for self-signed certificates, which people just use when they want eavesdropping protection – without our UI being inconsistent. This is an improvement on the current behaviour, which is just to throw an error.
FTP could have a special favicon, as could file://.
2) Hide username and password
If present. Usernames and passwords over unencrypted channels, embedded in GET requests (which are cached) and links, are fundamentally insecure and their most common use is for spoofing (although we already have some protection against that). If people type them in, we’ll use them to try and log in, but we won’t show them in the location bar.
Yes, this makes them less useful – if you make a typo, you need to retype everything. I don’t think this is a bad trade-off.
3) Highlight hostname
Take either the entire hostname or the Effective TLD + 1 and highlight it in a button-like style. So either:
(We need to be careful with bold; with some fonts, it reduces the difference between letters such as l and i, which is bad from a spoofing perspective. Further research required.) There is some space (perhaps half an em) either side of the button.
Clicking the hostname “button” takes you back to the root of the site – and this would affect which of these two options we actually choose. Consider george.blogspot.com/archive/… – do we want to go back to george.blogspot.com or blogspot.com? Probably the former. But then that would mean that microsoft.com.foo.bar.baz.evil.com would be all on the button, including the microsoft.com part. Difficult.
For file URLs, you’d get:
on Windows, and
on Unix. Yes, these two are inconsistent with respect to the placement of the initial slash. I’m not sure how to deal with that. I think a prefix like
would be horrible, particularly on Unix.
Example of what I mean, so far:
4) Display EV business name and country
For HTTPS connections with EV certificates, replace the hostname with the O (Organisation) and C (Country) fields from the certificate. So:
Replacing the hostname rather than just adding to it means there’s a really big difference between the real site and an attempted spoof, which would have a domain name in that space rather than a textual name.
We need to include information about the country (there can be businesses of the same name in different jurisdictions), and the question is, do we use letters (US, UK, CM) or a flag? A flag is safe because we are actually talking about countries, not languages, and it might be more recognisable and differentiable. IE and Opera are using letters.
Example (ignore the unlikelihood of the URL):
The flag is next to where the favicon should be, which raises a risk of confusing of spoofing, but leads on to:
5) Remove the favicon from the URL bar entirely
We would keep it on tabs, of course. I realise this is controversial; here’s my rationale. Favicons in the URL bar are dangerous, because they represent the website having some control over what’s in the chrome. This is why we turned off website access to the status bar. We already have spoof websites having a little lock as their favicon, to try and persuade users they are over SSL. Let’s put the websites back into the content area box.
This would probably imply making the tab bar always visible – i.e. setting browser.tabs.autoHide to false – so that the favicon was always visible. I think this is good because it improves the discoverability of tabs and stops the content area jumping around when you go from one to two tabs or vice versa. I don’t know if the default setting of this preference is a controversial issue.
I believe that the only other function of the page-proxy-icon (where the favicon appears) is to be draggable to create e.g. bookmarks toolbar entries; that role could be taken over by the domain name button, perhaps. I admit there’s further thinking to do here.
6) Focus turns bar back to a text box
On focus, move back towards being a text box. People have important behaviours to do with URL bar hand-editing that we don’t want to break. Therefore, clicking anywhere in the URL bar (except on the domain button) or pressing Ctrl-L, focusses the URL bar and makes the following changes.
The 3D-ness of the domain button becomes faded and 2-D – so the separation is still visible, but the URL now looks flat. The URL bar acts as much like a single text box as possible. The spaces between different parts remain (to keep the text stable; the text must absolutely not move on focus, otherwise the caret appears somewhere different from where you clicked) but if you select and copy, the spaces don’t appear.
7) Change selection behaviour
People edit individual URL components. So, we should make it easier to select individual components. Like in a word-processor, a single-click focusses, a double-click selects a component (“word”) – hostname, path segment, URL parameter key+value or fragment identifier, and a triple-click selects the entire URL (equivalent to “select line”).
Again, I don’t know if this is a can of worms – I suspect URL bar selection behaviour has been discussed before.
8) Analyse font choice carefully
If we are emboldening some parts of the URL (e.g. the domain), we need to be very careful about choosing fonts where the bold version provides enough differentiation between visually close letters like i and l. For example, the font that my copy of Firefox uses for my example bold URLs (see mockups) has very bad i/l differentiation. Perhaps we might consider a fixed-width font in the URL bar? This would also make selection easier; at the moment, putting the caret in the right place in million.com is nearly impossible for those with less than perfect motor skills, and tricky even for those with.
Not all of these suggestions are interrelated; some could be removed without affecting others. This is not supposed to be a tightly-bound take-it-or-leave-it package.