9 violated usability conventions in 2010 and 2011 so far [Update: Gawker]

It’s been a couple of years since I summarized my personal qualms with the state of the web, but it’s time again. While some of the usability conventions in 2008 are still to this day very much in vogue, such as the inability to distinguish links from visited links and links that open new browser windows, other conventions such as styling push buttons and form elements have changed in recent years. More on that a different time, here’s what’s bad about the web today…

Mobile sites that don’t allow you to zoom.

Sometimes, no mobile site is better than a bad mobile site. Case in point, Flickr’s mobile, which has a reasonably mobile friendly layout. The problem? The viewport width is fixed so pinch-to-zoom is disabled. Worse yet, the Flickr image you’re likely to have clicked into from Twitter is smaller than Kim Jong Il’s sense of self-esteem. And there’s no “enlarge” to find.

Most common excuse: “Come on, it’s mobile! Who checks websites on their cellphones?”

AJAX sites with janky back/ forward navigation

That wonderful technology that allows developers to load new stuff in the background without refreshing the entire page also allows for loading entire sections of a website faster. These full-on AJAX websites can appear to load faster, and rids of that white flash of the screen that sometimes appear when you go from one “plain” URL to another. The problem is that due to the way AJAX websites are built, the navigation history needs to be tackled in JavaScript rather than by the browser. Which means most of these fancy new AJAX sites have super janky back-button reliability. Case in point: every Gawker site out there; specifically their galleries are terrible.

Most common excuse: “Hmm, it works fine for me when I navigate the site really slowly, and the gallery is a known issue”.

AJAX sites with the hashbang in the URL

Go visit the fancy #NewTwitter. If it loads for you (part of the problem), have a look at the URL in the addressbar. See that little #! that splits up the address? That’s the hashbang, and it not only makes addresses look cryptic and ugly, it breaks a great many things. Sometimes pages do not load and when they do load, they don’t always load what you expected them to load. The reload button gets janky, and the pages themselves are hard if not impossible to index for search engines. Add to that the fact that you can actually make a full-on AJAX site without using the hashbang in the URL due to advances in HTML5. Just try and click the tabs on my Google profile while keeping an eye on the URL. It’s doable.

Most common excuse: “Oh come on, it works fine. You’re just nitpicking.”

Okay, full disclosure, I both AJAX and the hashbang on my company website. My excuse: “I don’t use that site anymore, and besides nobody ever visits it anymore”.

Multiple consecutive redirects that break the back button navigation, on purpose or not

Ever clicked a search result in Google and wanted to go back to your search results only to find the back button doesn’t work and only “blinks” the page? Sometimes doubleclicking the back-button fast enough, or long-pressing it to step two items back in the history fixes this. But it’s completely user hostile. Sure, some sites do this on purpose — this article is likely to be lost on those sites anyway. Other sites do it for a variety of reasons; redirecting to a mobile view, showing an interstitial ad or whatever oddball reason they have.

What these sites don’t know is that they can keep their redirects, so long as they send the correct HTTP header redirection code; modern browsers will detect these codes and omit them from the history, allowing the back button to function as expected.

Most common excuse: “But we need to redirect to a mobile view! … Wait what? Header codes?”

Implementing a scroll behaviour without the scrollbar

Yes, it looks like the general direction for scrollbars is that of the dodo. In the future, there might not be a scrollbar, it might work opposite to what you expect it to, and so on, and so on. That’s all fine. Seriously, whatever usability improvements operating systems might do to make navigating this or that easier, I welcome.

But it’s too early for all you bleeding-edge websites to jump on this bandwagon. So many aspects of web-browsers rely intently on the scrollbar; that if you break it, or create some kind of fancy JavaScript scrollbar replacement (*cough* Gawker *cough*), things are likely to break in serious and unpredictable ways. My advice: love your scrollbar. You can have your fancy iPad scrolling even if the scrollbar remains there on your desktop.

Most common excuse: “We believe the direction websites are going is that of smartphones and tablets. That’s why we want to adopt these new paradigms to ride the golden wave of momentum that space has at the moment.”

Sites that use QuickTime or Flash for video, without providing a fallback video format

You think Flash sucks? Yeah, it does, but so does the QuickTime plugin. Any video plugin, in fact. It’s been this way for a decade, but we’ve dealt with it because it was impressive video on the web was possible at all. This has changed in recent years, however. Web-video is available on smartphones, set-top boxes and in reasonably high quality. Laymen users are no longer impressed when video plays in their browsers, they expect it. So when they encounter a puzzle piece or a blank area, I no longer think it’s unreasonable to call that bad usability. There should be fallback to other video formats. H.264 or WebM, I don’t care.

Most common excuse: “HTML5?”

Netbanking sites that break when using the back-button

Accessing your bank via the web is no longer a “nice-to-have”, it’s absolutely essential for an increasing share of the population. Considering this, it’s high time these netbanking systems get a usability overhaul. That includes building it in a way that doesn’t break your login authorisation when you click your large convenient back-button, requiring you to click an HTML “back” hyperlink instead.

Most common excuse: “It’s as simple as that huh? You will use the software we provide and be happy! What are you gonna do, switch banks over a hyperlink?”

Inflexible form widgets in surveys or profiles

Ever encountered a survey whose “age” field requires you to select a birth year between 1900 and 2010? How about a credit-card input field that wasn’t updated for newer credit cards that don’t expire until 2015? Even a gender radio-group might rub you the wrong way. Either way, building a good form is an excellent excercise in usability; limiting choice is good, but you need to know when to be flexible. Which a lot of sites fail to do.

Most common excuses: “What other genders are there?”, “If age is a textfield, users are going to write ‘ripe’ or ‘timeless’.”

Sites that use flash for Navigation

Yeah Flash, it still kinda has a place in the world. But that place is not for navigation. Are you listening, Vimeo? That related content sidebar sucks! Get with the program!

Most common excuse: “Our target audience is a different one, one that cares a lot about design and visuals. These people will appreciate that our scrollbar matches the rest of the site design. Enough to halve their battery life.”

What else is there?

I hope you enjoyed reading this incomplete list of usability nuisances. Feel free to fill in the blanks.

[Update]: It looks like Gawker has rolled out changes to their janky AJAX stuff removing the hashbang but keeping the AJAXiness. Check it out on Gawker.com, Lifehacker.com and io9.com. I’m sure their SEO will improve, if not the overall loading consistency.

Responses to “9 violated usability conventions in 2010 and 2011 so far [Update: Gawker]”

  1. Mark Payne says:

    The return of the pointless landing page is something that’s driving me crazy.. why would someone want to click just to get into your site erg.

  2. fritzthecat says:

    Gosh do get a life… I stopped reading after the ‘hash in the address bar’ nonsense

    I landed on a 404 following some old bookmark, and had no idea where I was or how to go anywhere – the logo doesn’t look like a logo, and I don’t usually read tiny type near the window edge… if you want to make a fuss about usability you may want to check your own house is in order

    • Joen says:

      Gosh do get a life… I stopped reading after the ‘hash in the address bar’ nonsense

      I landed on a 404 following some old bookmark, and had no idea where I was or how to go anywhere – the logo doesn’t look like a logo, and I don’t usually read tiny type near the window edge…if you want to make a fuss about usability you may want to check your own house is in order

      Who are you, the blog police? You clearly read long enough to fill in your name, email, website and click the “subscribe” checkbox and then proceed to voice your opinion.

      I reserve the right to screw around on this blog. Here’s a picture of a squirrel:

  3. Kristian says:

    Some of these things are nitpicks, some are true annoyances. I do think you could probably find stuff that is way more annoying and problematic than the #-sign in the URL, for instance. :)

    I’m doing a short article on horrible forms (in Danish only unfortunately), which focuses on horrible form usability. This is an area where UI design and user friendliness is often thrown out the window.

    Of course, the danger of critizising usability is no one is perfect, there’s always going to be stuff that either breaks accepted UI conventions and “rules”, or causes dissention on whether it really is a good way to do something. :)

    (With that in mind, I’ve tried to have a decent contact form on my own site, though it’s far from perfect. :P).

    As for HTML5, blame the people who STILL haven’t finalized the spec, and the browser companies that are putting out HTML5 browsers when the spec COULD still change.

    Can we PLEASE get a finalized spec, and get all browsers roughly conforming to it?
    I’m in no particular hurry to start using HTML5 tags, particularly when someone like Google wants to throw a wrench in things with a video format which comes out of nowhere, instead of the nice h.264 format we’re getting used to.

    It took HOW many years before we could even use transparent PNGs in what can reasonably be called all browsers, and only the newest of the Internet Explorers have real support. (Try using PNG’s with transparency in javascript – without hacks, IE can’t figure out transparency and falls back to 1-bit).

    /rant, sorry. :p

    (Edit: Speaking of usability, when you edit a comment on this site, it removes double linebreaks (for paragraphs for instance)… ;)

    • Joen says:

      Kristian,

      I do think you could probably find stuff that is way more annoying and problematic than the #-sign in the URL, for instance.

      Obviously you haven’t visited #NewTwitter or the new Gawker sites enough times.

      The existence of the hash is there to send variables to the JS without reloading the page. This is used on AJAX heavy sites. But the # is still legacy HTML anchor stuff, so it’s janky. Which means sometimes the variables aren’t passed to the machinery, which then stalls. I’ve had #NewTwitter and Gawker _not load at all_ enough times for this to be what I’d consider a legitimate gripe.

      Especially because there’s a new HTML5 technique to do the exact same AJAX funkiness without the jankiness.

      I’m doing a short article on horrible forms (in Danish only unfortunately), which focuses on horrible form usability. This is an area where UI design and user friendliness is often thrown out the window.

      Indeed! Please send me the link!

      Of course, the danger of critizising usability is no one is perfect, there’s always going to be stuff that either breaks accepted UI conventions and “rules”, or causes dissention on whether it really is a good way to do something.

      (With that in mind, I’ve tried to have a decent contact form on my own site, though it’s far from perfect. ).

      You speak the truth. And as another commenter pointed out, my site does suffer from a bunch of issues. But I do have a day job, and I still do think about these things in that job. Plus, as arrogant as this may sound — I do actually think you should be allowed to criticize, especially in general terms, without having your own house in order. A legitimate gripe is a legitimate gripe, and the comment form is open.

      Oh, and I like your contact form, though the selectbox isn’t keyboard friendly ;)

      Can we PLEASE get a finalized spec, and get all browsers roughly conforming to it?
      I’m in no particular hurry to start using HTML5 tags, particularly when someone like Google wants to throw a wrench in things with a video format which comes out of nowhere, instead of the nice h.264 format we’re getting used to.

      Yeah, ack. I’m not touching that with a ten-foot pole. I’ll only give you these two conflicting links:

      http://ishtml5readyyet.com/

      http://ishtml5ready.com/

      Personally, I like HTML5 as being a banner under which we make stuff that’s not Flash or requires plugins, though I concede that’s still an idealistic idea.

      (Edit: Speaking of usability, when you edit a comment on this site, it removes double linebreaks (for paragraphs for instance)…

      Yup. The Edit Comments plugin sucks on quite a few levels, though I decided to keep it as I consider the feature essential!

      Thanks for the rant.

  4. Kristian says:

    No idea how the quotes work so I’ll just pile everything up here with “”‘s. :p

    “Obviously you haven’t visited #NewTwitter or the new Gawker sites enough times.”
    Gawker sites have a shitload of UX problems, I don’t even know where to begin. The hash-sign is just one of them. :)
    When HTML5 is finally widely support I’m sure it’ll go away. (Though it probably won’t, when I think about it. I know I probably won’t go back and fix my old stuff unless someone pays me to, which I don’t see happening). :p

    “I do actually think you should be allowed to criticize, especially in general terms, without having your own house in order. A legitimate gripe is a legitimate gripe, and the comment form is open.”
    True, and I never meant to insinuate a Tu Quoque fallacy. :)
    But other people have a more tenuous grasp of logic, and aren’t dissuaded by reasoning.
    Thus by critiquing XYZ, you are inevitably going to get the “But your work suffers from X, so what do you know?”.
    It definitely shouldn’t stop us, though.

    “Oh, and I like your contact form, though the selectbox isn’t keyboard friendly ;)”
    It is actually, it just gives horrible feedback and isn’t quite intuitive. I ripped large parts of the code from somewhere else, since I’m not a programmer, and I needed something that gracefully fell back in case JS wasn’t allowed, and which also support stuff like sessions.
    If I had my programmer do it, I’d yell at him to fix it. :p Promise.

    I’ll send you a link to a draft of the article when it’s nearing completion, so you can tear it apart. :) I still need to finish the site itself (only 8 months in the making… :p), and get some good cases to illustrate the points in the article, but it’ll get there eventually. Probably.

    K.

    • Joen says:

      When HTML5 is finally widely support I’m sure it’ll go away. (Though it probably won’t, when I think about it. I know I probably won’t go back and fix my old stuff unless someone pays me to, which I don’t see happening). :p

      The thing about HTML5 that’s kind of a problem is that it’s a somewhat vague grouping of features. And with proper fallbacks, a lot of HTML5 can be seen as “graceful enhancements”.

      For instance, the new HTML5 feature Gawker sites use to create AJAX navigation without the hashbang — yeah, that requires Chrome, Opera, Firefox, Internet Explorer 9 or Safari to work.

      But if you’re on IE6, 7 or 8, it’ll also work. It’ll just work without the AJAX loading. Because the HTML5 feature that’s relied upon can be detected through JavaScript, and when an old IE is detected, the page is simply served the old fashioned way — with a brief white flash between pages.

      If you build it right, it’s the same with HTML5 video (though yeah, there is that WebM/H.264 fragmentation, let’s not get into that), and even the new semantic tags.

      Mostly though, HTML5 for me, and I know I’m repeating myself, is a rallying call to say HEY! We can now build Quake in a webpage! Let’s move to the cloud people!

      True, and I never meant to insinuate a Tu Quoque fallacy.

      Nice! Never even knew that quote!

      I ripped large parts of the code from somewhere else, since I’m not a programmer, and I needed something that gracefully fell back in case JS wasn’t allowed, and which also support stuff like sessions.
      If I had my programmer do it, I’d yell at him to fix it. :p Promise.

      Hah, I almost made a tu quoque fallacy myself! Apologies. I think it looks great.

      Will look forward to the article, and I don’t expect to rip it apart.

Leave a Reply