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.

On native UI

Google rolled out password sync today! Wohoo! They also rolled out a new options page with styled select boxes and push buttons:

chrome_ui_widgets

Looks nice, doesn’t it?

Still, the styling of UI widgets seem to represents a shift in how Google does things. For the longest time, Google has been accused of doing “non-design” — their approach to design being extremely minimalist with little or no styling and whitespace as long as the eye can see. I believe this trend traced way back to the time when Google swayed us from using AltaVista and MetaCrawler; it was the really fast, no-frills search engine that got us the result faster than any of the other search engines.

chrome_passwords

I have been a fierce proponent of keeping UI widgets unstyled. I’ve always tried to adhere to the usability studies done by Jakob Nielsen which suggest that the less UI you have to learn, the better; that if you let your buttons, select-boxes and radio groups stay the way their operating system made them, users will know natively what to expect. But something has changed. I feel it in the water.

The nativity argument was a good one, so what ruined it? Could it be the plethora of nasty advertisements that look like alertboxes? Could it be a new digital age where computers are appliances and moms no longer fear them blowing up when they turn them on? Maybe, simply there are so many apps that only the good ones — the well-designed ones — float to the top? Perhaps Jakob Nielsen was wrong all the time — is it enough that a button looks like a button, for people to confident in what happens when pressing it?

Nah, it’s still good advice. I’ll still take a native app over a non-native one any day of the week, and I still think that unless you know what you’re doing, you shouldn’t style your widgets. As clear as it is that things are no longer like they used to be — lickable buttons be darned — you can’t go wrong with common UI. This is Unix! I know this!

Android 3.0 SDK preview reveals flat UI goodness

Google has released a preview for the Android 3 SDK, and it’s choc-full of UI goodness, including:

android3_mail

What’s so special about Android mail? Well it’s one of the plain apps, an app that is likely to be used the most on Android devices, and it’s got to be designed to just work, and from that perspective, this is one gorgeous piece of UI design. It’s deliciously almost flat, a design trend I expect to see explode like Apples noisy backgrounds. It’s got very few lines, and it’s got a delicious color palette. Dark blacks contrasting gray and white with a splash of accent color — Matias Duarte clearly gets contrast. It’ll look gorgeous on an OLED screen.

Which brings me to the System Bar — that line at the bottom which holds soft buttons for back, home and multitask, the notification bar, a clock, and battery info.

Wait, always present?

According to the SDK preview, yes.

But isn’t that a waste of precious pixels?

Depends on your point of view. The thing doesn’t use more than 48 pixels, and so it’s probably not a coincidence that these screenshots betray a device that’s 1280×800 px in resolution. That’s HD (1280×720) + 80 pixels. So this particular Android device will be able to play an HD video that’s almost perfectly vertically centered, while still permanently having a system bar present. Combine that with an OLED screen which uses the least power displaying the color black, and I approve.

Notes on Androids new Honeycomb UI

It’s CES time, which means a plethora of new slightly improved gadgets to hold us over until the next time we get slightly improved gadgets. For fans of Android and fans of UI design, Google dropped a bundle of joy in this video introduction to Android 3.0 “Honeycomb”. Here are screencaps and anecdotal commantary.

android3_visuals

This must be Matias Duarte’s art style. Or perhaps the movie Tron Legacy designed the new Android?

tron_legacy_poster

No matter, I loved Tron Legacy (please go watch it so I can get a sequel!), I’ll learn to love this as well.

android3_lockscreen

Nice lock screen. It’s still “something you drag from A to B”, but it’s probably not something Apple’s patented this time. Also, there’s a good chance this won’t unlock in your pocket (if you could fit a 10 inch tablet in your pocket, that is). That font though… It’s very 1993. The wallpaper is very 2001 though, which is actually not bad, just very techno.

android3_homescreen

New homescreen still shows select app shortcuts and widgets. So that’s classic Android with a new coat of paint and a nice new ubiquitous app launcher button (so you can launch a new app without going to the homescreen first).

The three buttons in the bottom left reveal potential awesomeness. We’ve been told (at one point) that Android tablets won’t have any facing physical buttons — no permanent context buttons — which in itself is a step forward. But these buttons, to me, look like “back”, “home” and “switch between apps”. Which, if true, spells the not-soon-enough death of the infamous “menu” button. Why is this good? It means that lazy Android app authors can no longer hide settings and help links in a mystery-meat hidden context menu. If they want their apps to be tablet compatible, that is.

android3_chromebrowser

Hey, that almost looks like Google Chrome, doesn’t it? Does that mean improved speed, standards support, bookmark sync, tabs and extensions? Oh my. I can see myself wanting one of these tablets now.

Overall, this looks really nice. Some of it is a bit off, but the sharp diagonals and mostly flat colors aesthetic seems to land in a good place between the delicous but spartan Windows Phone 7 UI and the overly textured and glossy iOS UI. It’s got some growing to do, but this a good place to grow from. The best thing: this UI feels like a serious jab at skin vendors like HTC and Motorola. People are going to want this UI, not “Sense” or “Blur”.

Firefox 4 gets custom alertboxes

Look, Firefox 4 is getting custom UI for JavaScript alert boxes:

ff4_alerts

My first impression is that while that’s pretty, it seems to be pretty for the sake of pretty. My gut feeling is, however, that with the XUL-based interface Firefox has, they need to make custom UI if they want to make JavaScript alerts tab-modal — and why wouldn’t they? So they might as well run with it. Tab-modal, if that is in fact what they’re doing: thumbs up. Pretty for the sake of pretty: mullet.

On Apples new OSX interface ideas

Fullscreen.

osx_fullscreen

It’s about as near a maximize feature — something I’ve been clamoring for for years — as you’re going to get.

Some thoughts on that, and Apples other OSX news.

Stoplight Consistency

stoplight

Apples stoplight window management controls, the red, yellow and green buttons at the top left of OSX windows, have long been a cause of headache for me. The problem I’ve always found, is consistency and predictability.

At first glance, red yellow and green means “stop, wait, go”. When you hover over the buttons, however, you’re shown x, - and + symbols. Classicy mystery meat navigation. Fine.

When you click the red button, you close the window. Fair enough, even though you don’t actually close the app. It takes some getting used to. Also fine.

When you close the yellow button, you minimize. Very good.

When you close the green button. Well, it’s anyones guess. Firefox will scale the window to fit the available space on your screen; Chrome will toggle the height of your window. This is the bad one, this is the one that needs changing. Which is why the next OSX should own the green button and let it invoke fullscreen for every app there is.

Launchpadosx_launchpad

 

Apple introduced a launchpad which shows all your apps in an icon grid view similar to your iPhone device. That’s nice, especially in concert with the new App Store. It’s a bold new step in Apples vison of ridding the world of the file-system. In fact, apps may be the final frontier, as installing, managing and uninstalling apps cleanly and easily has been the bane of operating systems for decades. As such, it’s not the launcher interface itself that interests me — that could really have been anything and a grid of icons is not supremely original per se — but the fact that adding, managing, removing and launching apps is now done in a completely new and easier way is going to be something new Mac users are going to love. That’s nice.

Mission Control

This’ll be interesting.

osx_mission_control

The love-child of Exposé — the thing that explodes all your open apps on to the screen to help you select — has hooked up with fullscreen and Spaces, the arguably orphaned multi-desktop environment. The resulting ménage à trois is one where each fullscreen app gets its own “screen”. When you invoke “Mission Control”, you’re able to switch between screens — one screen for your oldschool stoplight windows, one for each fullscren app you have.

It really doesn’t look so intuitive. Frankly it looks confusing.

But that’s okay, because for most users, when you maximize an app — iPhone style — you get to another app by minimizing. And that’ll still work (I assume). Mission Control is for those willing to learn how to use it. It’s a window management feature for not-casual users, and those users are going to love it.

Next Project: Kill The Menu

One of the reasons I’ve clamored for fullscreen all these years, is so that screen edges can be used. You know, when you drag the mouse to the top, bottom or sides of your screen? Yup, that’s real easy because when you hit the edge, you can’t go any further — when you’re at the edge, you need only worry about moving in one direction, horisontally or vertically.

Which makes me excited for a fullscreen Chrome browser. Tabs can now work in Chrome as they’re supposed to — sit right at the top for extremely fast access. I betting Safari is going to try tabs on top again.

Long time OSX apologists have been pointing to the fact that OSX does in fact utilize screen edges. The top of the screen is reserved for the ubiquitous “file menu”. The only problem is, file menus are oldschool. They’re boring. They’re there because no-one had a good idea how to tuck in lots of features in very little space.

Be honest. When was the last time you used the Edit menu? Just now, for copy pasting? Oh, alright. How did you do that on your phone? You long-pressed? Right. Because that’s the new way of doing things.

That’s your assignment for your next OS, Apple. Rid us of the file menu. It’s okay to do it in a Snow Leopard-esque maintenance release to Lion. You could call it Liger.

Firefox 4 Maximized, First Blurry Look

Mozilla has posted a startlingly effective video argument for why Firefox 4s default preference will be tabs-on-top. For the first time since the Firefox 4 mockups, we now see a maximized Firefox 4, which uses the Fitt’s Law argument I’ve chimed since 2006 when I tried redesigning the Firefox interface myself:

firefox_maximized

Of course only Windows gets this benefit, since both Ubuntu and OSX have a menu there.

Wishy Washy Ubuntu [Updated]

A little while ago, I posted that Ubuntu is getting a new interface design which includes window management buttons on the left. In addition to this, the close button is now the third button from the left, and minimize and maximize icons are up and down arrows.

ubuntu

This seemingly arbitrary redesign of a central UI concept — window management buttons — has received some flak in the community. Alex Faaborg mentions that the up/down arrows are reminiscent of scrollbar buttons. The community has called out the lead designer to explain the reasoning behind this new direction, and Ivanka Majic responds haphazardly:

After the internal debate and analysis (which went something like the picture below) we decided to put this version in the theme and to use it. I have had it running on my machine with the buttons in this order since before the Portland sprint (first week of February?) and I am quite used to it.

Is it better or worse?

It is quite hard to tell. The theme has been in the alpha since Friday. Now that you have had a chance to use it what do you think?

Personally, I would have the max and min on the left and close on the right.

Aza Raskin, creative lead for Firefox responds on Twitter:

It’s this kind of wishy-washy design speak (from the lead Ubuntu designer) that weakens our field in open source http://bit.ly/axDRbf

Eloquenter. Point: Aza.

Had you asked me yesterday, I’d have cared slightly less about the design of maximize or minimize buttons or even whether they’re left or right (exciting new platforms and UI paradigms intrigue me more these days and these traditional OSes now seem quaint), but this kind of — Aza puts it rightly — wishy washy design speak belittles the whole interface design process.

Not all UI designers think like Ivanka and the Ubuntu design team.

I don’t even care to discuss left or right or up or down. But I will say that window management buttons, minimize, maximize and close, are vital parts of an operating system. That doesn’t mean this is by any means a sacred goat that should never ever be touched, it simply means that when you do touch it, you’re walking on the razors edge (don’t look down, you’ll lose your head).

I’ve said this before: usability is not a Jackson Pollock painting.

If you were designing a faucet, would you switch the locations for hot and cold water? How about making a door-handle go up instead of down to open? What about the direction you turn a key to unlock? Should we drive on the left or the right side of the road? Should americans switch from the imperial system to metric?

Whenever you change a completely vital aspect of a system, do not justify the change by asking: “Is it better or worse? It is quite hard to tell”. That will not fly.

Anyone can make up wishy washy design speak. In fact, here’s a snatched-from-the-ether list of similar justifications:

  • “Steve told me to do it.”
  • “Our branding team told us we had to mess with the buttons in order to stand out from OSX and Windows. It was either left-aligned, close button third-from-the left, or centered buttons.”
  • “It started as a joke, but then we kinda liked it.”
  • “We wanted to be more like OSX, but without blatantly copying.”
  • “Oh right those buttons. What do they do again?”
  • “The close button is a destructive action, which is bad. So we placed it in a really awkward place. The shut down operating system button, however, we placed in the top right corner of the screen, right at the edge, you know, where Windows has its maximized application close buttons. We think it looks good.”

As long as we’re playing “make up an excuse”, there are plenty better ones to pick from.

[Update]: Here’s a super quick mockup, which should hopefully serve to illustrate that the new theme aesthetics could easily work without changing basic window management layouts.

ubuntu_min_max

That Isn’t An Interface; That’s A Disaster Zone (Asmussen vs. Heilemann)

With permission from Heilemann, here’s a reposting of a debate we had recently. Michael had shared this on Google Reader:

Leaked Screenshots of Microsoft Office for Mac 2011 – Daring Fireball

Icon for the Save button is still a floppy disk, despite the fact that Apple hasn’t sold a machine with a floppy drive for a decade.

Michael Heilemann

That isn’t an interface; that’s a disaster zone.

Joen Asmussen

You’re just a fan of new-app / new-age minimalism. Sure, it’s not nice. But it’s got somewhat discoverable buttons for a plethora of functionality nobody uses.

Michael Heilemann

I think an interface tells a user what it’s for. And yeah, I’m an Apple fan, but that’s because I think Apple’s interfaces get out of the users way and teach them that their applications are for content creation and manipulation, and not as is the case here, about interface interaction.

It is. Ridiculous.

Forget about the mom-scenario, I would be frightened if I opened this, and I would literally have no idea where to start looking. It’t not just the layout, it’s the style and the icons. It looks as native to OS X as Firefox, which is to say not, and has a plethora of obscure mystery-meat-esque icons.

Compare with Pages (http://images.apple.com/lae/iwork/numbers/images/whatsnew-screen-linkedcharts-20090106.jpg), which even when it’s flying all its flags, isn’t nearly as horrible as that.

It hurts me inside.

Joen Asmussen

Pages is a good example of an alternative which I, judging from only screenshots, don’t think is any better at all.

Bear in mind here, I’m doing my thing and playing devils advocate. I’m all Google Docs, even though it’ll probably be another 3 years before that app becomes full featured.

So what I was alluding to, is that the iPhone, iPad and Android platforms herald an exciting new era in which we throw down the shackles of legacy and start anew. On an operating system and application level. I don’t even remember what iWorks on the iPad looks like, but I’m assuming it’s way cleaner than Pages (and certainly Word). Because it’s a writing app how it’s built if we started today. Which Word is not.

Now legacy is an interesting word. In this situation, legacy refers not only to the Microsoft way of supporting every operating system they’ve ever made with their apps, or even including and still using 20 year old code in their applications. No, legacy also refers to the userbase Microsoft is scared of alienating. The very same user base that use Word Art, templates, Comic Sans and that clip art image of a martini glass with fireworks in the background. Both Microsoft and its consumers believe they won’t buy an app that removes features.

So what I’m thinking, kinda defending this interface as not ridiculous or a disaster zone, is that it’s been a bitch for the interface designers, having to add new features, tuck in ALL the old ones, and still make a somewhat userfriendly interface. This compromise sucks like all the Words suck, but it doesn’t suck ridiculously.

Okay so we can split hairs whether “undo and redo” deserve such prominent positions, or positions at all. And you’d probably win the discussion.

But do you see my point?

Michael Heilemann

It’s always possible to defend MS’s position from a pragmatic standpoint. But that doesn’t make it any less confusing or solve the fact that most of the interface cruft won’t come into play for most people more than a fraction of the time; if at all. It’s like they decided to not take any decisions on what to include and what to hide away.

Joen Asmussen

Well I’m not so much defending it, as saying that it’s not a disaster zone. Sure, it could be better, but so could Photoshop. Photoshop is a good example, actually — quite a few people use quite a lot of the features, and even more use nearly none of the features.

How would you tackle Photoshop? I actually consider that a disaster zone.

Michael Heilemann

Well Adobe put out Photoshop Elements, so I guess they acknowledge that a pro+level application isn’t necessarily needed by our moms. Essentially PS has the same problem as Word, which is that it tries to be everything to everyone. Personally I’d either split it into two products (saaaaay iPhoto vs. Aperture or iMovie vs. Final Cut Pro) or at least let the user pick basic or advanced on first open.

I just don’t understand why ‘glowing text’ is an option you want to give as much attention as font size. How often have you used glowing text? Most people will never use it, except of course because it happens to be right there, which is going back to what I mean by the UI teaching the user things they shouldn’t be learning. It’s like having a ‘Comic Sansify’ button in the UI; it’s good for one in a million users, but it hardly needs its own button.

Joen Asmussen

That’s the thing. Part of me thinks splitting Photoshop (or Word for that matter) in to “basic” and “advanced” versions is a usability and interface design cop-out. Sure I’m not presenting any other options here, but ideally there’s another way.

I agree with the rest of what you have to say.

Michael Heilemann

It’s like shipping a car that is both a sedan and a (small) construction crane; you can do it, but why do you want to? Except in the case of software it’s ‘easy’ to ship one product that serves two masters just as easily as one.

In fact, Photoshop already does this. Go to Window > Workspace, and you can choose the interface profile that works best for what you do…

So, yeah.

Joen Asmussen

Alright then. You win this round.