Google Chrome, Metro-Style

Windows 8 is a pretty bold new move for Microsoft. It’s bright, vivid, touch friendly and puts apps and contents way up top. It appears to have ditched the traditional desktop metaphor and filesystem. Apps look very different. Here’s what Internet Explorer 10 looks like:

IE10

That new look and feel for apps is being referred to as “Metro-style”. Metro-style apps run fullscreen and navigation happens through edge-activated interfaces. While I’m concerned about discoverability for edge-activated interface controls (essentially this is classic mystery meat navigation), I do like that apps are full-screen and that Metro-style apps ditch all archaic notions of UI chrome.

Which brings me to Google Chrome, capital C. Really great browser, my such of choice. From a high-level perspective, Google built this browser to accelerate the pace of web technology development, so that Googles own web-apps — Gmail, Calendar, Docs — could adopt newer features sooner. To that end, Google has gone to great lengths to make sure Chrome is not only cross-platform (Windows, Mac, Linux, soon Android), but that Chrome looks native to each platform. This tenet has been taken to the extreme, actually, with Chrome on Windows XP featuring the horrible “Luna” skin, and Chrome on Linux more or less establishing GTK as the de-facto UI toolkit on the platform, just to be able to use said toolkit. It’s really quite impressive, the amount of work put into making Chrome not only look native, but be native.

Of course we’re only on the cusp of the future. The next round of operating systems are likely to be much more mobile inspired. Windows is blazing a trail with adopting the Windows Phone Metro UI, OSX is likely to become even more iOS-like, and Ubuntu is already exploring more touch-friendly UIs. If Google is going to keep following the path of full-on nativity, Chrome engineers are going to be having some nasty headaches in the not too distant future. Is it even technically possible to replace Internet Explorer 10 as your browser of choice? With Windows 8 treating HTML5 web-apps as first-class citizens among native apps, it’s likely that IE is baked in to the operating system more deeply than it ever was before.

It’s also an interesting mind-game, imagining what Google Chrome would look like, if it were to theoretically be re-written as a Metro-style Windows 8 app. The Metro-style UI is already so minimalist in layout, icon style and even interaction patterns that it’s difficult to think of Metro-style Chrome looking very much different from IE10. The racing-car diagonal tabs for instance, which are important to Chrome’s branding, are hard to translate to Metro-style. Though I suppose if Google were to go this way, they could make their tabs look similar to those of the Android Honeycomb browser (which is likely to spell the direction of how Chrome will look like on Android, once that happens).

Will it happen? I think so, but I think Google will want to play the wait-and-see game for a while. Just like Android Ice Cream Sandwich may be a make-or-break proposition for Google, so do I think that Windows 8 is for Microsoft. Could be that Windows 8 adoption is too slow to worry about. Could be Google’s already working on Metro-style Chrome.

Whither Web-Apps

icloud_hero

The web changed things. It’s dictated the path of Android, iOS and Chrome OS. All three are operating systems that approach menial computer tasks in an entirely different way:

  • they store things in the cloud
  • they hide the filesystem from you
  • they’ve shed the shackles of the traditional desktop and windowing metaphor

We no longer have to discuss whether it was actually Xerox PARC that invented the “Recycle Bin” concept, we can instead discuss whether we even need one1. It’s exciting. A computer no longer has to have a floppy or a disc drive. In fact, often times you don’t even need a keyboard. In the future, we might not need a physical interface at all, controlling everything with voice and gestures. It’s as if the new way has uprooted us from the rut of putting application links in a dock and discussing whether the window close button should be in the top left or the top right corner. Everything is different, and we can thank Apple first and Google second, for finally bringing us this much needed paradigm shift. In one key area of this exciting new future, however, Google and Apple differ in their approaches.

Continue reading

  1. The answer is yes, but not for files. Could be for closed tabs, or it could hold an “Undo” history perhaps.  

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!

A couple of quick notes on Googles new profiles

Google just revamped their profiles:

We think this new design helps highlight the information that’s most important to you, making it easier for people who visit your profile to get to know you. As the new layout gradually rolls out, current users of Google Profiles will notice that their existing profile will automatically update to the new style. To update and add to your profile, simply click on the new “Edit Profile” button.

Here’s my revamped profile, and here are my thoughts about it:

  • It’s good. It’s easy to scan, it’s very easy to create and edit, and it’s a nice overall upgrade to the old style profiles.
  • It’s not very pretty. The cleanliness of Googles white color hasn’t bled through and while I’m all for making it easier on the eyes by muting down a bright white, the odd result of gradients, drop shadows and baby blues muddies it all quite a bit.
  • Just the other day, I used “truth to materials” as a subtle criticism of a drop shadow that didn’t blend realistically considering the z-index of layers if one considered a website to be physical. It’s worse here; the the white sheet’s left shadow breaks the physics for me. Go on, point at me and laugh for pointing out something so nitpicky. But it gets to me, subconsciously, and my eyes can’t rest knowing the visuals are off like this.
  • I wonder what a filled-out profile means for search results.
  • Hey, it looks like Google finally got the message, and separated Google Buzz out from Gmail! Maybe it’s useful now!
  • Click the “Buzz” tab. Now click the “About” tab again. Fast isn’t it? Must be AJAX. Nerds: notice that the URL doensn’t contain the infamous #! slug. This is HTML5 boys and girls.
  • It comforts me that profile items you don’t fill out, don’t show up at all on your profile. There’s nothing worse than an item that says “Gender: Won’t say”.

I’d like a redesign, but everything else about this, I kinda like. That said, it’s no-where near replacing my about.me/joen profile in my email signature yet.

Gawker failed to kill the scrollbar

Gawkers 2.0.1 redesign:

We had mistakenly thought mouse scrolling (via scrollwheels or trackpads) and keyboard shortcuts were enough for story navigation—an overly optimistic expectation to say the least. News web sites may indeed become more application-like and readers may grow accustomed to swiping instead of scrolling. But they’re not there yet, as the extensive criticism of the sidebar made clear.

Back when the now almost universally panned redesign was first unveiled, the usual posse and myself had a discussion on Gawkers rather non-traditional new layout. The scrollbar is a good first step, but the real challenge for Gawker will be to get their fancy AJAX layout to load in a reasonable, fast, predictable way and ensuring the back button works properly.