Considerations Involved in IP-based Geolocation and User Language Detection

By Cody in Constructive Criticism, Design, Usability

I’m going to revisit the UPS homepage—one more time—that I already discussed in Improving the UPS Homepage by Remembering Fitt’s Law and It’s 2010—Use Clickable Labels on Checkboxes. Despite the the sparseness of this particular page, there is a third thing here that I think could improve the user experience significantly and reduce a barrier to entry to the site (and concomitantly, potential premature user abandonment).

I think it would be very useful to pre-populate the dropdown based on the user’s IP-based geolocation and browser language settings (the Accept-Language header). Why pre-populate instead of automatically redirecting? Zak Wilson and Ivan Stojic have argued that IP-based geolocation should not be used in web apps because it causes more problems than it solves. I don’t fully agree—those users are in the long tail and for the majority of users I would be willing to bet geolocation gets it right. The annoyance caused to the few users who travel extensively or are behind corporate firewalls isn’t really enough to outweigh the benefit conferred to the average non-English speaker who goes to google.com and yet sees the site in what’s probably their language.

All the same, Zak and Ivan are correct that the Accept-Language header is a better piece of information to use first. Given the potential for even that to be incorrectly set, and the fact that UPS has already decided to deploy an interstitial, I think it makes sense to at least pre-populate the dropdown with a best guess.

However, it’s quite possible that UPS has considered this feature and determined that visitor satisfaction counterintuitively goes down as a result. Why? Because given that the site can obviously figure out the correct setting for most users, they may be annoyed that they were presented with an interstitial page in the first place. The average user probably isn’t aware that their language settings can be automatically determined, and so presenting them with an uninitialized dropdown hides this fact.

Again, this possibility only underscores the necessity of A/B testing. Much like other complex dynamic systems with many inputs and outputs—weather, nonlinear electric circuits, molecular biology—it is difficult to predict the ultimate outcome of seemingly innocuous or superficially beneficial changes when users are involved. It would be great if someone from UPS could comment on this page and discuss the considerations involved while designing it.

It’s 2010—Use Clickable Labels on Checkboxes

By Cody in Constructive Criticism, Design, Usability

Returning to the UPS homepage I discussed in last week’s post Improving the UPS Homepage by Remembering Fitt’s Law, another problem concerns the checkbox. I’m really dismayed that it’s 2010 now and we therefore live in the future, but we’re still seeing sites not using <label> elements with checkboxes. And indeed, that is the case here—the ‘Remember this location’ label associated with the checkbox on this page is not clickable. This was also pointed out by Patrick McElhaney in a comment on the previous post.

This is another instance of where Fitt’s law applies—the tiny checkbox is a small target area for clicking, and so it makes sense to enlarge it by making the label clickable as a proxy for the checkbox itself. In desktop software on all major platforms (OS X, Linux, and Windows) the label of a checkbox behaves in just that way, and is always clickable.

I should note that, of course, on such a large site as UPS’s the changes I’ve been suggesting would have to be backed up by some A/B testing to ensure they achieve the desired effect and do not have any unintended consequences. Of course, too, UPS may be so big and critical to its customers that they would not abandon the site no matter the magnitude of its interface shortcomings. I would be willing to bet, though, that the changes would improve visitor satisfaction if not reduce abandonment, and any site can stand to increase the satisfaction of its users.

Stay tuned for one more critique of this page in an upcoming post!

Improving the UPS Homepage by Remembering Fitt’s Law

By Cody in Constructive Criticism, Design, Usability

Upon navigating to the UPS homepage for the first time, you as the visitor are presented with an interstitial page asking you to choose your country and language so that you can be redirected to a localized version of the site. These interstitial pages are quite common for companies which have global operations and customers in many countries.

In the case of UPS this page is generally very understated and well-designed. One way in which it could be improved, though, is by increasing the size of the button. Fitt’s law states that the clickability of a target is a function of the target’s size. The button here is 17×18 pixels—an area of 306 pixels. That’s only 0.0236% of the screen on my 1440×900 display—two ten-thousandths of the available pixels. There’s not much else on this page taking up any space, so there’s plenty of real estate to make this change.

Critically, pages like these are barriers that potentially keep visitors from continuing further into your site. They are simply one more hurdle the user must jump over before doing what they want to do on your site. Presenting visitors with a very small (and therefore difficult to click) button is one additional thing that could lead to premature abandonment. It could be the straw that breaks the camel’s back. There’s a tradeoff between making buttons microscopically small and comically large, and I think this button could definitely be enlarged to minimize the effect of the hurdle of an interstitial page.

What do you think? What else could be improved here? Stay tuned for a couple more posts about this page.

New Windows in Safari Touch: A Proposal

By Matt in Constructive Criticism, Design, Usability

Browsing the web on the iPhone is great — page scaling works wonderfully with the high-resolution screen, and Safari Touch (or Mobile Safari, if you like) is well-designed and makes reading in bed or on the bus a breeze. But there’s one thing that irks me: no easy way to open a link in a new window. When you’re browsing blog posts, Wikipedia articles, or, really, any webpage, it quickly becomes limiting to browse the Web in a linear fashion. If you’re like me, there’s some unease associated with trying to remember all the links you wanted to follow on a page. You want to finish reading the page you’re on, but that becomes more difficult as your working memory fills up with all the links you wanted to click further up. By the time you get to the bottom of the page, you’ve forgotten what they were, and you have to go reread from the top. The quickest way around the problem on the iPhone is to open a new page, open History, load the same page again and find the link you want. But that’s inconvenient and less than ideal.

But we’ve a better idea. Two, actually. In our traditionally constructive approach, here’s how ‘Open Link in New Window’ could work on the iPhone.

Click-and-Hold

The trick is in the click-and-hold. On iPhones and iPods Touch, touching a link and not releasing your finger brings up a little callout box with link text and URL, if available.

The Solution

Here’s where we step in. There are two ways, using another finger, that we could imagine opening a new window. The first requires no interface adjustments: just use another finger to hit the ‘Multiple Windows’ button in the lower right, and a new window is opened from that link.

Our second solution contextualizes the ‘New Window’ button by making it even closer to the link: it’s a button in the callout box itself.

If you don’t want to open a new window, and just want to follow the hyperlink, you’d just release your finger and the page would load in the same window, as it does now.

Admittedly, opening links in new windows isn’t the sort of thing every user does (on purpose), even on a desktop computer. The introduction of tabs has undoubtedly affected behavior in that direction, but it’s still the sort of feature that many people won’t miss. On the other hand, we might be willing to wager that the kind of user that has adopted the iPhone is the kind of user that opens multiple links in tabs. But the relatively hidden nature of the functionality in our proposal means there isn’t really a downside: the feature is conveniently tucked away where only those who will use it will see it. For those curious enough to click and hold a link, they’ll likely recognize the ‘New Window’ icon and experiment with it.

We tossed around other ideas (gestures, using the same finger to move to the ‘New Window’ button in the callout), but nothing seemed as natural and obvious as using the existing button. There aren’t any exact analogs to this sort of multi-touch functionality currently, but if you see the multi-touch page and photo zooming functions as “manipulation” actions, then this is a sort of manipulation itself — you’re performing an action on the link. Furthermore, the click-and-hold gesture brings up a loupe when editing text — it’s a sort of “closer look” to specify where you want to place the cursor. Similarly, click-and-hold on a hyperlink is a way to look closer at that link: it functions this way currently, showing you the URL. The addition of a ‘New Window’ button offers the choice of specifying how the link is opened.

So, there you have it: ‘Open in New Window’ for Safari Touch. Any alternative proposals?

Concerning the Mutilation of Typography

By Cody in Constructive Criticism, Design, Commentary

Say, just as a hypothetical situation, that you’re writing a book on phonological analysis. Since the entire book deals with the investigation of representations of human articulatory gestures, a good design tip might be to set the book in a type that actually includes the entire inventory of necessary IPA glyphs. It’s not like such fonts don’t exist — Adobe alone, in fact, has two: ITC Stone Phonetic Standard (in both a serif and sans-serif) and Times Phonetic Standard.

I really can’t deconstruct this design tip into constituent axioms any further than by simply stating it as I have done. It seems self-evident — like that stuff in the Preamble of the Constitution.

But, apparently, it’s not, because someone decided to set the entirety of just such a book with two completely different typefaces — mixing them not only within the same line, but within the same words.

All the IPA symbols that don’t exist in the book’s predominant face are set in a totally different face. The offending characters jump off the page at you in a jarring and discomforting way, because they have a variable stroke width while the dominant typeface has a uniform one, serifs where the principal face has none, a humanist axis in contrast to the other’s rationalist one, and even an x-height inconsistent with that of the main face. Bringhurst is turning over in his grave (and he’s not even dead). The guilty party here is whoever designed Introducing Phonology by David Odden. (Just in case you had any doubt, Tschichold’s golden canon of page construction unfortunately was lost on him, too.)

This example is a good cautionary tale for many things. One, perhaps, is the importance of not coming up to your own solutions to problems that are already solved. Not only does the designer’s solution look awful, but it certainly wasn’t an expedient one. A quick Google search for an IPA typeface would have taken far less time than manually setting each IPA character in a different face. (Unless, of course, the designer did something even more cringe-inducing, like editing the font the book uses to include the glyphs of the secondary IPA font.)

Another is that a designer should really always start designing with the constraints of the particular problem in mind. A textbook on linguistics requires IPA symbols; therefore, the choice of typefaces—ceteris paribus—is constrained from the beginning to those which meet that requirement. Rather than pick a typeface on some other basis, without regard for the salient constraint, and then coming up with a hack to sidestep the inevitable problem, it would have been by far preferable to choose a face first that works best for the context of the design application in which it will be used.