Clusterfuck'd

You think imitation leather is the biggest problem facing interface design today? Think again.

The Windows Explorer Ribbon

The Windows Explorer Ribbon

It doesn’t even make sense to break down what’s wrong with it, because it’s basically everything[1], and reveals a baffling lack of insight into how users interact with their computers.

But at least the post gives us some interesting telemetry data from the Explorer. Data that is theoretically as applicable to any file-based OS – say OS X – as it is to Windows.

Now we don’t get much data about the data[2], but it’s still extremely interesting, and what’s so striking to me, is that Cut, Copy and Paste are in fact some of the most used commands, and they’re not even available in the Finder on OS X. It always seemed weird, but for all I knew, most people never cut and pasted files. It seems they do.

Of course the Finder couldn’t merge folders until Lion, so perhaps it’s simply a matter of it not getting enough attention at Apple, or perhaps there is a genuine reason behind this decision. I don’t know.

Another thing that strikes me, is the Refresh command. Yes kids, there was once when we would have to manually refresh the Explorer to see changes to our file system. And as you can see, it is still in wide use.

Windows 7 Screen Resolutions

Windows 7 Screen Resolutions

No major surprises there, but it’s always nice to know what the market looks like today in terms of resolution.

Anyway.

What the hell is going on at Microsoft? How did this clusterfuck come out of the same team that did this?:

Updated: Cut, copy and paste are indeed available through keyboard shortcuts in the Finder; I must have tested wrong when I wrote this post. Thank you Karl for pointing out my error.

  1. Microsoft has had a history of letting Office set the direction of their interface design, which tells you everything you need to know about why the interface is getting more and more complicated. I think Paris Lemon said it best.  ↩

  2. “This data is pretty solid and given the hundreds of millions of data points, it gives us a very clear picture of average usage across the population as a whole” is all it says, though it seems likely from later comments that it’s exclusive to Windows 7, though it doesn’t say how many users, what the demographical breakdown is or over how much time the data was collected.  ↩

...And Along Came Squarespace

A few months ago, Anthony, the founder of Squarespace, asked me to fly out to New York to meet with him and a few others about a possible job; a very tempting offer, but at the time unrealizable due to circumstance.

Last wednesday we shut the door on our empty apartment in Copenhagen, left the keys in the mailbox and boarded a plane to Newark, all of our necessary belongings neatly packed into as many bags as you can fit into the back of a Lincoln town car, now effectively homeless.

Everything’s a momentary blur, but as reality and the practical measures of moving settles again, hopefully soon, I’ll be stepping into my new role as Interface Director at Squarespace and a new life here in The Big Apple.

In the scheme of things, it has been simultaneously one of the hardest, and one of the easiest decisions we’ve ever had to make. On the one hand existing obligations, jobs, friends and family, not to mention a place to call home and a daily routine are not easily shed. Yet on the other, a chance to try something entirely different, to have a go at the dream of living in roots of the worlds most iconic skyline and in a sense to try an alternate reality — if only for a time — and certainly not least, to have the opportunity to work for a company I have long admired, and which over the last couple of months, as I met with the people behind it, solidified as a force to be reckoned with, a mentality straight out of my most livid day dream and a collection of people the likes of which you’d be lucky to meet in passing, if at all.

Of course, a disruption like this doesn’t spring to life without sacrifice and broken plans, and we owe much to friends and business partners for their understanding and support. But here, at the tail end of it, it seems it wasn’t much of a decision at all as much as it was coming to the realization that we couldn’t not do this.

Which leaves us here, on the 10th floor of a Soho hotel bordering Tribeca, almost in eye-shot of the Squarespace offices, starting our scavenger hunt for a new home, and a life in the big city.

Pinch me.

The Blackberry Playbook and Our Natural Predators

We’re pretty simple. If something sudden happens, we react. We flinch. We stop. We divert all of our attention, unwillingly, to whatever it is that could potentially be posing as a danger to our well being. We will interrupt whatever we’re doing at loud noises or when catching something out of the corner of our eye. It’s our fight or flight instinct. We can’t help it.

Now watch this, and pay particular attention to the animations:

Now if I say: “hunting tiger”?

The animation curves on the Blackberry Playbooks UI are those of a predator, just as it pounces its prey; slooow and then fast!. It’s incredibly disconcerting, causing our lizard brain to subconciously analyze the motions of something as harmless as windows on a screen for signs of danger.

This recalls Apple’s ‘Breathing Status LED Indicator’ (and Dell’s hopeless imitation), though I should mention, just for good measure, that Apple isn’t above reproach; try bringing up your dashboard, and dismiss it. Notice how the widgets fly into your face!, say like a tiger, rather than simply fade away?

Interaction design should for the most part be all but transparent to the user, so here’s my pro tip of the day: try not to emulate our natural predators.

Update: Oddly, the animation curves used for all the marketing material aren’t the ones used in this practical demo:

#NewTwitter

Yes, it is a step up for power users, but I imagine it must be intimidating to n00bz and is a little too crowded for my tastes. But having finally spent some time with #NewTwitter, deeper problems make me think it got kicked out of the nest before its wings were fully formed.

Hotkeys

NewTwitter has shortcut keys for navigating the stream with j and k, as popularized by Google, but with two major problems. First of all, the selection background, #f4f4f4 on white... All but invisible on less than perfectly-contrasted displays.

But more importantly, the tweet you navigate to is not the same as the tweet you’ve selected! And other shortcut keys, like f for ‘favorite’, affect the actually selected tweet, rather than the one you’ve navigated to. Confused? You should be! There’s a reason nobody does it like this!

Aside from being confusing, it’s a hassle to use. While pruning my favorites, I often ended up unfavoriting tweets outside my browser frame, possibly losing favorites I would have preferred to keep. And for every tweet I wanted to interact with, I had to first press Enter, which feels absolutely counterintuitive when you come in from for instance Gmail or Google Reader.

Personally, I would yank the shortcut key support immediately and rebuild it from scratch.

New Tweets

The much neglected, yet still undefeated champion of Twitter on OS X, Tweetie for Mac, has an option, I believe it’s default, where new tweets are stacked on top of your current position. It’s fantastic as it allows you to leave Tweetie alone, and work your way up at your own convenience, never missing a tweet. You can also choose to auto-scroll, which is a great way of monitoring your stream as it’s happening.

When the ‘X New Tweets’ box appears, you click it and the tweets appear, pushing down existing ones. But they aren’t highlighted. So for anything above a handful, you have no way of knowing which are new. When possible, I like reading everything that comes through my stream, but when you come back to the client and the counter is well above a hundred; good luck finding where you left off.

PS: One way to circumvent this problem, is to click the first tweet in your stream, before loading in new ones, as a marker of your progress.

@Mentions

It’s a fundamental problem to the basic tenant that has elevated Twitter from obscure plaything to one of the primary communications channels of our lives, that all replies can’t be treated equally by the user.

Twitter is a two-way communications medium. That’s why it’s successful. You broadcast, they reply. Simple. But in actual fact, the way it goes is: you broadcast, the people you follow reply. And then someone else might also reply, but in Twitter-world, as decreed by the web and iOS app interfaces, replies do not mingle. They’re either from people you follow, showing up in your timeline, or not, showing up only under the @Mentions tab.

This makes sense if you’re more popular than you have time for, grumpy and/or very focussed, but if you turn it around and instead think of the timeline as your twitter timeline, then it only makes sense to allow for @mentions from people you don’t follow.

Aggravating the issue, the @Mentions tab in the web app doesn’t highlight when new mentions roll in, which I guesstimate converts into the majority of people using only the web app, not seeing any replies from people they don’t follow.

That cute guy/gal you met at SXSW, casually trying to get in touch through Twitter? Forget about it. The tweet from someone notifying you of a grievous error in your latest column? Won’t see it. Or more relevant, if you happen to publish a blog post that becomes very popular and people write to you on Twitter…

But here’s what really grinds my gears: @replies from the timeline do show up under @mentions. That makes some kind of sense. The problem is that for the most part you’ll first see those replies in your timeline, and then again when you next check @mentions. And apart from that redundancy, the two ‘unread’ indicators (where they exist, being absent as they are from the web app) don’t know that you’ve already read those same replies in your timeline, and gleefully light up when they @mentions is updated.

Also, just as a sidenote, replies aren’t highlighted in the timeline, nor are there any notifications for new direct messages.

AJAX

Since all internal Twitter links are AJAX-powered, they’ll actually break your browsers tabs. Just try opening someones profile with a middle- or CMD-click. For this crime alone!, I’ll leave the right-hand column empty.

Final Thoughts

It’s a step forward; nay, leap. Generally I do like it. But as they grew from oddity to industry behemoth, Twitter has become an indispensable part of many people’s lives, my own included. And because of that I’ve been baffled in the past by their reticence first towards GUI clients, and then towards their own web app. That seems to finally have broken, and while the iOS apps are by-and-large the best Twitter apps on those platforms — and beyond — the web app is in need of some fix-‘er-upping before it’s up to snuff.

That’s not to say that it isn’t a major improvement. And it’s great to see — wait for it — synergy between it and the iPad app interfaces. I can’t wait for it to mature.

I’d just kinda hoped that would have happened with this version.

Romancing the User

dConstruct 2010 was above and beyond expectations, and it was, as always, pleasant putting real-world faces and mannerisms to Twitter streams. Others will do much better play-by-plays than I could hope for (the talks will be podcast, and I’ll be sure to curate my favorites then). For now, a couple of the highlights that stuck with me:

Confidently opening the day, Marty Neumeier spoke about making products not just good, but different. Really, different. Good points throughout, but a single side-remark, regarding a long forgotten coffee product experiment, an abysmal failure, stuck with me (here paraphrased from memory).

I suppose it’s some sort of coffee you store in your fridge and then heat in a cup in the microwave. Horrible idea. Miserable failure. Where’s the romance in that?

Romance. It’s amazing how the right word can describe an already known set of ideas in such a way that they become clearer. To me, romance is one of the things ho-hum run-of-the-mill products most commonly oversee.

Ridiculous as it may sound, I only just started drinking coffee in the last half year, so perhaps the romance of the coffee brewing process still carries more weight with me than with hardcore caffeine junkies, but I think most people, even non-coffee drinkers (and even Nescafé addicts), know exactly what Neumeier means by that.

Coffee brewing happens to come with romance built into the ritual of preparing the coffee (doubly so if you, like me, are a french press user), but romance isn’t restricted to stuff that smells nice or beans supported by millions of dollars of marketing narrative on their packages.

Mystery, playfulness, trust, courtship and sexuality are all a part of romance.

To me, the way that dock icons bounce eagerly to get my attention. That’s a little bit of romance; it breathes a little bit of life and playfulness into what is an otherwise entirely boring event; a file has finished downloading, or an application needs attention. Had the animation not been given just the right ease-in and -out curves, it would have been inanimate. Boring.

Another, recently much talked about, flourish Apple got right many years ago, is the sleep indicator on their laptops. As if the laptop is at ease. A lover, sleeping soundly in your presence.

The unlocking mechanism on the iPad, perfectly executed, is perhaps closer to the kind of ‘ritual’ brewing coffee requires (computer doing what they can to eschew rituals, being as they are often easily automated). I only set a security code on my iOS devices when I travel, specifically because punching in a code ruins the ritual of bringing my iPad or iPhone to life.

Though it’s been much maligned by some, as being either too unresponsive, or simply too simulationist, I think critics – the same ones bothered with Pages’ leather toolbars – much underestimate the romance of iBooks’ page-flipping animation. Its novelty, while powerful, soon wears off, but I hold that even after that, iBooks sustains a ‘bookness’, which makes it a warmer, kinder experience than that of the Kindle app.

My analytical self, my inner optimizer and minimalist (two of my strongest inhabitants I might add) would have ended up with a design akin to the Kindle app, no doubt. Something to fit the steel and glass look of the iPad. But in my heart, I would have wanted to end much closer to iBooks or Pages, something to complement your journey on the Orient Express, circa the late 1800s. Something with a little romance in it.

Apple isn’t the only company capable of endowing their products with romantic flourishes of course, but they are by far the most consistent (and I would argue, best) in the computer industry. Outside, companies such as Starbucks (obviously), Audi or Mercedes, Kitchen Aid, Dyson (to some odd extent) and others, do equally fantastic jobs at engaging their customers with their products not merely in a functional manner, but in a humane and romantic one.

There’s a fine line between touches that bring that little extra magic into the equation, and overcompensation. I’ve gone too far myself a few times, and I inevitably regret it. It’s what happens when you’ve got some snazzy framework at your fingers and everything starts to look like a nail (luckily I don’t think Apple goes entirely free of a little overindulgence from time to time, which I’ll gladly use as a crutch).

I guess my point, or rather Marty Neumeier’s point, is to remember that yes, it needs to be good, and different to make it out in the great wide world, but whatever you’re building, you’re building for people; and people need a little romance.

Stop the Browser Selecting Text When Dragging

In playing around with the interface design for an as of yet unannounced—so far webkit only, and altogether largely non existing, I might add—project, I came across several nice-to-know a-ha’s and gotcha’s that are unbelievably helpful for trying to get beyond the usual flaky ‘yeah, we’re still in the browser alright’-feel of most web apps out there, one of which is the remedy to how when you’re using something like this timeline, and you end up selecting text and other elements on the page as you try to navigate it? Stuff like that makes me want to blow my brains out.

Well, saved by the bell, there’s a CSS3 property for that called user-select, it works at least in both Webkit and Mozilla, and it’s heavenly. There’s a lot of uses for it, but for something like the stuff we’re going to do, which is a lot of dragging and dropping of elements, we’ll probably end up simply adding a basic class to the BODY element whenever we don’t want text to be selected, and ét voila.

body.dragginginprogress { -webkit-user-select: none; -moz-user-select: none; user-select: none; }

World peace. Easy as that.

It’s these small things, the things that you don’t see people writing massive colorful articles about, that really make my day.

You can see it in action in my playpen, though I won’t promise I don’t break that n the near future as I throw various things up on the wall to see what sticks.

Update: If you’re using jQuery UI, there’s also an (undocumented) function called .disableSelection().

Less is More

I love the engineers behind iPhone OS. They’re head, neck, shoulders and torso ahead of everyone else. It’s kind of scary in a way, as it probably shows just goes to show how far behind everything else is in contrast.

Not to pick on WordPress, I’ve just spent a good deal of time with it over the last few days, and it struck me again yesterday how, as I was testing a slew of role management plugins (argh, by the way), that I would activate a plugin, and subsequently not have the faintest clue where to look for any new UI inserted by it. Some put a single options page under Users, others inserted whole bundles of pages, some put them where I least expected it…

Contrasted with the iPhone, where when you install or update an app, from the phone itself, it will actually exit the app store and take you to the screen where the icon is, and show you that it’s being installed/updated. This usually takes 10-20 seconds, and you’re good to go; it’s right there ready for you.

It’s a small thing, and in the cases where you’d prefer to stay in the store it may be mildly annoying, but on a larger scale it means a lot less frustration and searching, even in a system as simple as the iPhone.

Very Symptomatic, I'd Say

I could pull out a plethora of reasons why the media manager in WordPress needs to be the focus of the next major release after WordPress 3.0, but honestly, this particular issue seems to say everything there is to say on the subject.

Seriously now; did anyone even bother testing it? How long has it been like that?

I love WordPress; I actually really do, but you can’t just throw the first media manager that crosses your path into WordPress core and think that’s that… And I’m not just talking about this either. I’ve looked at the code; I’ve reverse-engineered the code. It’s not pretty, but more importantly, it’s symptomatic of a whole heap of problems in WordPress in general.

A Snow Leopard-esque release would do wonders; though I have to wonder if it won’t break the back of those who take it upon themselves to try it?

iBooks vs Delicious Monster

The iBooks interface

Maybe he’ll shed some light on it himself at some point, though he’s probably under some crazy NDA. But before people start slinging mud at Apple for ‘ripping off’ the ‘wooden shelves’ look for the new iBooks app from Delicious Library, consider that Mike Matas who designed that interface for Delicious Monster worked for Apple for a couple of years (leaving in july of last year).

Update: “[Delcious Monster co-founder] Mike Matas was a UI designer on the iPad, [former employee] Lucas Newman is an iPhone / iPad engineer, and [former employee] Tim Omernick was an iPhone / iPad engineer but left a while ago to work on games independently.” #

Vertical Pixels Are Friends

I love me some Chrome, let there be no doubt about that. On Windows it’s my browser of choice, no contest, and on OS X it’s getting to a point where it’s usable as a default browser. But, there is one thing that is really grating me on OS X.

Chrome vs. Safari

That’s Chrome’s 100 vertical picels toolbar highrise vs. Safari’s lean 72px. Even with its bookmark bar folded, Chrome is taller than Safari…

28 paltry pixels don’t seem like a whole lot, but considering that all of Google’s web apps also take up at least 25px at the top for links to other Google apps, sign out, help and settings links… Well my 13.3” MacBook Pro’s screen is starting to feel vertically challenged.

I actually ahppen to love Chrome’s ‘oversized’ address bar and on-top tabs, but something’s gotta give.

Update: After some discussion below, it should be noted that Safari actually exceeds Chrome in vertical… eh… chrome pixels if you also turn on the status- and tab-bars.

AR & iPhone, Sitting in a Tree

I immediately imagined the possibility for a multiplayer tabletop strategy game, along the lines of Warhammer 40.000, in which there is no board and no pieces, just players. Bring the game with you, when you meet up with your opponent, have a quick round, wherever you are. I was going to say, that all you’ll need is a flat surface; but you obviously don’t even need that, when everything is virtual.

Another thing struck me. Since the iPhone knows where it is, which way it’s pointing and how it’s tilting, it should theoretically be possible for it to apply that data-over-time to a video stream and in essence create Google Streetview-like spheres; employing some clever math, no doubt.

Exciting stuff, though of course not the first example of augmented reality on the iPhone.

Movable Tabs

At work, where I’m forced to use Windows Vista, I use Google Chrome exclusively. And a thing I’ve grown to love about Chrome, is how it handles moving tabs, which is slightly different—and better—from Safari 4b, which I use at home.

In Safari, you grab the small lined area at the top left of a tab to start dragging, something introduced with Safari 4, where before the entire tab was draggable. Once you start dragging, the semi-transparent tab follows your mouse arround until you let go of it, whereupon it either integrates itself into a row of tabs or into a new window. Most annoyingly, Exposé doesn’t work while dragging tabs.

In Chrome, you can initiate dragging anywhere on the tab, and if the tab is the last remaining member of a window, that window will disappear when you start dragging. This allows you to move a tab into a window behind the current, without first rearranging windows; quite nice in Windows’ maxmized windows regime.

Dear Apple: Please steal some of these interface tricks for Safari.

PS: I would switch to Chrome on OS X in an instant, if I could; extensions or no.