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.png

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.png

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.png

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.jpg

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

tron_legacy_poster.jpg

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.jpg

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.jpg

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.jpg

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.png

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.jpg

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.png

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.

Launchpad

osx_launchpad.jpg

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.jpg

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.jpg

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