DesignAday

Replacing the Desktop

Charlie Stross and other journalists are theorizing that Apple is trail blazing a new world for computing. As Charlie puts it,

Steve Jobs believes he’s gambling Apple’s future… on an all-or-nothing push into a new market. HP have woken up and smelled the forest fire, two or three years late; Microsoft are mired in a tar pit, unable to grasp that the inferno heading towards them is going to burn down the entire ecosystem in which they exist.

If they are to be believed, the iPhone OS, also found on the iPod Touch and iPad (which Apple just announced the sale of the first millionth), represents a vision of the future of software and user interface design. The desktop metaphor is being replaced… by what?

I wouldn’t say there is a singular metaphor to replace the desktop. There is, however, a replacement theme. It’s a theme that we’ve been seeing in movies, like Minority Report and Avatar, for quite some time. It’s been echoed across everything from Microsoft’s Surface to Autodesk’s multi-touch wall. The theme is “direct manipulation.” As such, we are seeing a plethora of very literal visual metaphors, such as page flipping, spinners, and details taken from physical objects, right down to the stitching in the leather seams of the “pocket” in the Notes app and the stitched binding in the Contacts app on the iPad. Some of them are behavioral, while others are merely decorative, but they all speak to a very familiar, physical approach to interaction.

Courier

Perhaps I’m just jaded, but I can’t get excited over the two videos Gizmodo has put up demonstrating Microsoft’s Courier concept. First of all, Gizmodo is treating it as if it is a unique, unforeseen vision for a tablet computer. What exactly makes it so innovative? Is it the folding, two-page form factor? I don’t think so. Last year saw Negroponte’s announcement of the second-generation OLPC XO: the XO-2.

And there was the Canovo that made the rounds in 2007.

Then, of course, we’ve seen the dual screen eReaders by ASUS (2009) and iRiver (2007).

Well, then, is it the stylus? Surely not—we’ve had tablets and PDAs for years that have those. The iPhone was revolutionary for doing away with the stylus. Okay, could it be the multi-touch? Obviously not, as we’ve seen that in the iPhone, Surface, and any number of other demonstrations. And the combination of the two is already available in tablets such as Panasonic’s Toughbooks.

I’ve ruled out the form factor and input methods, so it isn’t the device itself or the technology behind it. Is the user interface especially innovative? There are some interesting ideas in it. Using the spine as a place to tuck things that you want to move from one page to another is a clever implementation of cut and paste, but beyond that, I don’t see any interaction patterns that I haven’t seen before. Quite frankly, I don’t find the scenarios to be very compelling. The UI has that “visionary concept” quality to it that suggests it hasn’t been fleshed out much beyond the script. The handwriting recognition is flawless, the screens show only the controls that provide access to the features showcased, and complex actions, such as selecting and copying a graphic and two columns of a 3-column table, are accomplished with a single touch of a finger.

Yes, it’s an interesting concept, and yes, there is value in creating such visionary explorations. However, I’ve seen far too many of these that don’t result in anything other than inspiration (not to say there is anything wrong with that), and Microsoft in particular has a horrible track record of delivering innovative products. Please pardon me for some uncharacteristic pessimism. I’m not going to take a deep breath, let alone hold it.

Cursor Goalie

I was typing up a list of requirements in Microsoft Word yesterday and had pasted some content in from an email I had received. There were some characters I wanted to change at the end of several lines, and I was using copy and paste to do so. But I ran into a little problem. They decided that when text is pasted into the document, it is very often the case that it has brought styling along with it, which you may very well not want. So, to make it convenient, whenever you paste text, there is a small pop-up you can click on to get a menu with options for changing the content that was just pasted in. The pop-up appears whenever the cursor gets close to the pasted content. It is available until you have performed some other content-related action, such as typing.

In the screenshot above, the bracket following “Any digit [\d” is what was pasted in. The next thing I wanted to do was to select a character at the end of the next line and replace it by pasting a bracket there as well. The problem was that the pop-up kept me from being able to get to it. When I moved the cursor away, the pop-up disappeared, but as soon as I moved the cursor back, the pop-up would block me. Clicking elsewhere in the text first didn’t help. I actually had to perform an action someplace else in the document to be able to do what I wanted to do. This happened to me repeatedly as I tried to make the correction at the end of each line. I realized afterward that I should have made the changes from bottom to top. That way, the pop-up would obscure the lines that I had already fixed.

The moral of this tale is that any pop-up that covers content should only appear when asked for, or should be movable by the user. Don’t be a cursor goalie.

Cursed Cursors

I’ve done a fair amount of UI design for applications intended for use on tablet PCs. That means that the software is running on Microsoft’s tablet version of Windows. It has a number of additional features, such as a pop-up keyboard and handwriting recognition, that is specific to stylus and finger input. Typical of Microsoft, however, they haven’t really thought through the details. One thing that has always bugged me is the cursor. If I’m using a stylus, I have no need for a cursor whatsoever. The cursor is a stand-in for direct manipulation. That is, it represents your finger when you have to use something like a mouse to interact with the UI indirectly. On a touch screen, you can tap things—there is no click.

The cursor is superfluous, yet Microsoft left it there. Every time you tap, the cursor jumps to that point on the screen. This often leaves it hovering over a button, and what does that end up doing? Well, for one, it partially obscures whatever icon or label is on the button. Even worse, it usually causes a tooltip to pop up, as the cursor just stays there. The tooltip remains, covering whatever portion of the display it happens to cover, until the standard timeout is reached, or until you tap somewhere else, moving the cursor to a new location. Tooltips are not an interaction design pattern intended for touch interfaces. I guarantee you will not find tooltips in the iPhone UI.

I received email today from Apple’s App Store advertising the latest iPhone apps. I got excited to see that LucasArts has released The Secret of Monkey Island Special Edition for the iPhone. The original was the very first game I purchased for the Macintosh—my LCII. It’s one of my all-time favorites, and I was ready to buy it, but I read the reviews first. Every one that I read complained about the UI. Apparently, they didn’t adapt the UI for the iPhone. Rather than just tapping things, you actually have to drag a cursor around the screen!

Epic Fail!

The Bane of Web Design

Very rarely do I feel the need to rant on DesignAday. I spent hours today trying to solve what should be a very simple layout issue. I have a variable width div that I need to center within the window. I achieved this without a problem in Safari and Firefox. True to form, IE threw a wrench in the works.

In IE, the div is expanding to fill the width of the screen, instead of fitting to the width of its content. I spent hours trying to fix it. I finally figured out that IE doesn’t like the fact that I have some content within the div that I have floated right. I must have tried a dozen different approaches this afternoon to get some semblance of the layout I have designed, but to no avail. By the time I left the office, I had retreated to a fixed width div in which long lines of content will truncate with an ellipsis. However, there is a new layout issue plaguing me that I’m still trying to resolve. At this rate, I’m going to be resorting to using a table.

IE truly is the bane of web development. I would love to see a tally of the man hours spent troubleshooting its incompatibilities with web standards. I fervently wish we could forget about it—stop supporting it—and tell our customers to get a real web browser. But we can’t. IE has a chokehold on the industries in which our products are used. It has only been within the past year that we’ve been able to stop developing for IE 6 (what a nightmare that was)! I know IE 8 is a significant improvement, but I’ll be stuck developing for 7 in the foreseeable future.

Rant over. We’ll now return to our regular programming.

First Touch

I mentioned in a previous post that a feature of Interaction ’09 was the Tangible Interaction Café. Manifest Digital provided a Microsoft Surface for us to fiddle around with. This was my first hands-on experience with the table, and while it was interesting, I was a little underwhelmed. It wasn’t as big as I imagined it would be; it’s the size of a smallish coffee table. The resolution is also quite low. The interactions were very natural, however, and it was fun to spend a few minutes flicking photos around and playing with the water table “screensaver”.

One thing that made it a bit more engaging was that Manifest had developed some software expressly for our conference. They had it pulling in photos and tweets from the conference feeds, which was a nice tie in, but the icing on the cake was the interface with Crowdvine, the social networking site tied into the conference. Everyone who had registered with Crowdvine had a 3-D barcode on the back of their nametag. When I placed my nametag on the Surface, it recognized me and pulled in my photo from Crowdvine.

The red “connect” swash could be dragged onto another person’s photo, which would send them a message through Crowdvine saying that I connected with them on the Surface at Interaction ’09. While this is a rather trivial example, it turned what could have been a short, distraction with a novelty item into a more relevant and engaging experience.

Microsoft’s Retail Experience Center

Engadget reported mid-month on Microsoft’s new Retail Experience Center. This isn’t the beginnings of their response to the Apple Store—it’s a showcase for Microsoft’s solutions for retailers, including everything from RFID enabled shopping carts that display information about the items on the shelves nearby, to Surface displays and back end systems.

It’s very typical Microsoft. Here’s how all of our technology can be put to use in your store. This is very different from what Apple did. They took a look at the retail experience and decided that there needed to be a fundamental shift in the way the entire store was organized. It’s not about the products, but what people can do with them.

From a must-read Fortune article published in March of 2007:

“One of the best pieces of advice Mickey ever gave us was to go rent a warehouse and build a prototype of a store, and not, you know, just design it, go build 20 of them, then discover it didn’t work,” says Jobs. In other words, design it as you would a product. Apple Store Version 0.0 took shape in a warehouse near the Apple campus. “Ron and I had a store all designed,” says Jobs, when they were stopped by an insight: The computer was evolving from a simple productivity tool to a “hub” for video, photography, music, information, and so forth. The sale, then, was less about the machine than what you could do with it. But looking at their store, they winced. The hardware was laid out by product category - in other words, by how the company was organized internally, not by how a customer might actually want to buy things. “We were like, ‘Oh, God, we’re screwed!’” says Jobs.
But they weren’t screwed; they were in a mockup. “So we redesigned it,” he says. “And it cost us, I don’t know, six, nine months. But it was the right decision by a million miles.” When the first store finally opened, in Tysons Corner, Va., only a quarter of it was about product. The rest was arranged around interests: along the right wall, photos, videos, kids; on the left, problems.

My first thought when I saw the picture of Microsoft’s store was, “Wait. Why does she have a shopping cart? Who is going to buy enough software and computer peripherals at once to make a shopping cart necessary? That’s ridiculous!” Granted, that was before I read about the purpose of the Retail Experience Center, but I still think it’s a relevant reflection of Microsoft’s approach.

From the Department of Redundancy Department

One of the few things I like about Microsoft Word is its commenting feature. I like the way it expands the width of the page to add a column for the comments so that they can be directly across from the text they refer to. I like the color-coded boxes that contain the comments and the dashed lines that connect them to the content. It is a well-implemented feature, and dare I say it, very Mac-like.

However, nothing is ever perfect. When the cursor hovers over a comment, a tooltip is displayed. At first, you may think this is standard behavior and to be expected, but there are two problems.

The tooltip covers up the comment that it belongs to. When you need to insert the cursor in a comment to edit it, the pesky tooltip pops up and precludes you from clicking in the comment. You must move your cursor away and try again, often to be foiled a second time.

Secondly, as you can see, the tooltip doesn’t provide any information that isn’t already displayed in the comment itself, but takes up a lot more space to do it.

This example illustrates two best practices in user interface design:

1. Try not to cover up anything important when providing additional information in a floating pop-up, and never block access to interactive content or functions without very good reason.
2. If you have nothing of importance to say, don’t say anything.