DesignAday

Hypocriticalmorphism

Interaction Designers and UX professionals have been ganging up on Apple for its skeuomorphic user interfaces. I mean, they’ve really been hammering hard. They make claims such as that decorating UIs with Corinthian leather is lying to the user. The UI designers baby us. They are holding back the progression of sophistication in UI literacy by chaining us to our analog past. James Higgs states on Made By Many:

Simply put: [I detest these new apps] because they are lies. They attempt to comfort us (to patronise us) by trying to show how they relate to physical objects in the real world when there is no need. How are we helped to understand what Find My Friends does by the addition of “leather” trim? And how difficult can it be for someone, even a relative digital newcomer, to understand a list of books? Difficult enough that the only possible way they could understand it is to present them in a “wooden” bookshelf format?

I heard several designers deriding skeuomorphism in their Interaction 12 talks to much applause and supercilious laughter. And yet, two of the keynote speakers, Anthony Dunne and Fabian Hemmert, were treated with great respect for showing us examples of physical objects that had been granted animalistic behaviors, such as mobile phones that breathe and disk drives that avoid coffee spills by standing up. This dichotomy struck me as being rather hypocritical. I’ve been puzzling over it, and I have a hypothesis.

Once upon a time, just prior to the release of Mac OS X, the graphics capabilities of computer operating systems were relatively poor. Sure, games included photorealistic imagery, but your typical application was limited to rather cartoonish representations. Our icons, buttons, and textures were decidedly low-res. OS X changed that. Suddenly, it was possible to include shadows, translucency, and sophisticated gradients. That freedom presented UI designers with a completely new vocabulary to explore, and as history has shown us, we will explore it for better and worse. One of the results of this exploration was a wave of applications, mostly from independent developers and startups that jumped on Apple’s newfound popularity, that were informally referred to as “delicious” applications. This name was derived from the application Delicious Library by Delicious Monster, one of the first new OS X applications to employ a visually stunning UI. They displayed photorealistic books, with the actual book covers, on wooden shelves. This was, in fact, so successful that Apple hired Mike Matas, the co-founder and graphic designer of Delicious Monster. It was not surprising, then, to see similar skeumorphic touches start appearing within Apple’s own software, even to the point of duplicating (stealing?) Delicious Library’s aesthetic in iBooks.

Of course, we designers can only applaud something so popular and successful for so long. We are driven to disdain anything that becomes commonplace in the challenge to find the next, great, original idea. We are so over the once lick-able candy coating of early Mac OS X, ready to embrace the Modernist-inspired Metro UI of Microsoft’s Windows Phone 7.

Our physical devices, however, are in a different stage of development. As artists and scientists alike explore the uncanny valley of robotics, we are fascinated with the potential of animation, automation, and even self-awareness in the everyday objects that have thus far been static—unmoving and unresponsive. We are quick to forgive the tackiness of sneezing phones in the name of experimentation.

But I would suggest that skeuomorphism isn’t as bad as many make it out to be. Compare the Notes app on the iPhone with its Metro cousin. There is no mistaking what the app is for on the iPhone. The color of the background, the rules, and the leather bar across the top all scream “notepad!” The only thing to visually distinguish the notes application from any other in Metro is the name. There is a lot to be said for visual identity, familiarity, and personality. No, faux leather trim isn’t going to help me find my friends, and I don’t need wooden shelves to understand that I am looking at a library of books, but I’ll be damned if I’m going to spend the rest of my life looking at identical, sterile user interfaces, regardless of task and context. Leather is an aesthetic choice, and certainly it will appeal to some and not to others. It’s an awfully popular choice for high-end car interiors, so why not virtual dashboards? Fashion is going to influence interaction design just as it does anything else. Apple has been one of the drivers of fashion in the computer and consumer electronics industries since the introduction of Bondi Blue. We went through brushed metal; now it’s linen and leather. Next year it will be something else.

In conclusion, I encourage you to think about the potential benefits of skeuomorphism just as you consider any other tool in your UI design bag.  Use it effectively when it makes sense to. Don’t give in to hate. That leads to the Dark Side.

disKinect

Picking up where I left off yesterday’s post, there was one other thing about the Kinect that I thought was particularly poor, and again, I don’t know whether it is the fault of the Kinect or poor design of the games. The user interfaces were horrendous. I’m not talking about the actual gameplay, but the menus that allow you to select levels or options. On the Wii, menus all work pretty much the same. You point the controller at the screen and move a little hand cursor over the button you want to press, then press a button on the Wiimote. I played or observed three different games using the Kinect, and saw three different conventions for selecting items on the screen.

Fruit Ninja obviously themed its interaction, having you slice the options just as you do the fruit. This appeared to work fairly well. The targets were large and spaced apart enough that I didn’t see anyone accidentally slice the wrong one. Wipeout had large buttons as well, so they were easy to target, but you have to hold your hand over them for several seconds to make them activate. Once your hand is over the button, an animated cursor indicates how long you have left to hold it there. If you accidentally move your hand out of the boundary, it starts over. As a result, it seemed to take an awfully long time to navigate through the UI. Just Dance 3 uses a completely different technique. Each menu item is a slider, kind of like the one for unlocking the iPhone. You have to slowly swipe your hand across the menu item from right to left. Unfortunately, these items were relatively small and stacked fairly tightly, so it was much too easy to accidentally move up or down during the slide, triggering the wrong selection (e.g. selecting the wrong song). I saw this happen repeatedly.

One of the reasons iOS is so successful is that Apple defined a gesture language and demonstrated it with its own software. I guess I don’t know whether or not Microsoft did the same thing for the Kinect, having had so little experience with it, but it certainly doesn’t appear so. For such an interesting input method, I was disappointed with the interface design.

Kinect

I had an opportunity to play around with an Xbox Kinect over the holidays, and while it is an interesting piece of technology with a lot of potential, I wasn’t particularly impressed. I first attempted to play Wipeout, based on the ridiculous ABC game show. The game couldn’t tell when I stopped running in place, so my on-screen avatar would frequently run right into obstacles or off ledges. There was significant delay between my actual jump and my avatar’s jump. Counter-intuitively, the game was designed such that bending to the right made your avatar bend forward, and bending to the left would make it bend backward. I assume this was done because the kinect can’t very well detect forward and back movements. Now, these problems could very well be due to poor implementation of that particular game.

The second game I tried was Just Dance 3. My daughters have the first two for our Wii. The older of the two thinks that it works better on the Wii, but I can’t speak to this from my own experience. What I did observe was that the game was extremely forgiving in what it considered to be correct movements. There were several times that it got confused as to which player was whom (up to four can play).

The environment has a huge effect on the Kinect’s performance. When two ceiling fans were turned on in the room, the Kinect could’t see me at all. This may have been due to a subtle strobing effect caused by pot lights above the fans. My two-year-old nephew was running around, and the Kinnect would sometimes confuse me with him, even given our drastic difference in height.

The Kinect seemed to be good enough for the sweeping arm motions used in Fruit Ninja, but the more nuanced motions necessary for the other games didn’t translate well. There is a lot of potential, and the device is certainly selling well, but the experience didn’t make me want to trade in my Wii.

Designer’s Toolbelt: IE7.js

This JavaScript library has been around for several years, but don’t let its name fool you. While it can be found in Google’s repository under the name IE7.js, it has been regularly updated with more recent versions titled IE8.js and IE9.js. But, I’m getting ahead of myself. Just what, exactly, does it do?

IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG [sic] work correctly under IE5 and IE6.

Consequently, IE8.js will make previous versions behave more like IE 8, and IE9.js will make all previous versions behave more like IE 9. To see the list of selectors, properties, and elements that are enabled, take a look at the demo page. I’m using it to get IE6 to cooperate with the :hover and :active pseudo classes.

DIE6

Friends don’t let friends use Internet Explorer 6. And neither should acquaintances. Educate others about moving off of Internet Explorer 6.

This statement was pulled directly from a Microsoft website: The Internet Explorer 6 Countdown. You know it’s bad when the company that sold the software is working this hard to get people to stop using it. I applaud them for doing so, as it has been a huge thorn in my career. Unfortunately, due to their very slow adoption of new technology, the military is still using IE 6 in some instances and will be for several years. There is a browser-based application I’ve been working on for over a year now that will primarily be deployed using IE 6.

Microsoft’s site says, “Now that we’re in 2011, in an era of modern web standards, it’s time to say goodbye.” The bad news is that IE 8 doesn’t support CSS3, and IE 9 is only in beta. It’s depressing to think about how long it may be before I can take advantage of the stunning improvements already supported by Mozilla and Webkit.

Meet Me in Boulder!

We increased the attendance of Interaction 11 by about 100 people over last year’s conference. There will be right around 620 interaction designers descending on Boulder. And let me tell you, it hasn’t been easy. I had to arrange rates with several hotels, and we are filling them up. One of the biggest logistical issues has been the transportation. And there just aren’t many venues that will hold that many people for a party in Boulder. We are at capacity.

Even with the increase, the conference sold out way back in November. I was on site for logistics planning when we had to scramble to close registration. There have been a few people that have had a change of plans and sold their tickets, but not many.

Just yesterday, Microsoft, our biggest sponsor, announced that they are giving away three passes! Here are the details:

Interaction 11 Gold Sponsor Microsoft is giving away three passes to the sold-out conference! For a chance to win, visit http://tinyurl.com/microsoft-ixd11. The entry deadline is 12:00 noon U.S. Eastern Time on Friday, January 21. Microsoft will choose three names from among their favorite responses, and winners will be announced on Friday by 6:00 p.m. U.S. Eastern Time.

Believe me, this is not a conference to be missed. Best of luck!

Blame the Browser

He was sure it was a JavaScript problem. We had two tables (that we knew of) that were displaying a disabled scroll bar when it wasn’t needed. The rest of them we had checked were fine. Actually, I should say that a div was displaying the scrollbar. You see, we have tables in which the body must scroll separately from the header. So, I implemented it such that the header and body are actually two separate tables. The body table is in a div that gets a max-height set by JS, based on the height of the window, and has overflow set to auto. The developer that was assigned to fix the bug was looking for a problem in the div sizing logic. He couldn’t find anything. Then I took a crack at it, searching for differences in the CSS. The scroll bar was only showing up in IE, of course, so Firebug couldn’t help me. I was stuck using IE’s built-in developer tools. I compared the broken table with one that was working and compared both of those to my original prototype. The styles being applied were identical. We had spent hours trying to figure it out, and were no closer to finding a solution than when we started.

Finally, I started comparing the tables themselves. It occurred to me that the buggy one incorporated row spans, while my prototype and the working table did not. I removed the row spans and voilà! The scroll bar disappeared. We spent all that time assuming that something was wrong with our code. I should have known it would be a quirky IE bug.

Design Pattern: File Management, Part 1

There are three relatively common models for file management within an application. Over the next three days, I’ll address each in the context of an application that follows the pattern.

The first of the three file management methods is the most common. I’ll use Microsoft Word as a concrete example. Word has no internal view of the OS file system. You open a file one of two ways: by finding the file using the UI of the OS and then double-clicking it, or by using the “Open” command within Word. The first method relies on the OS knowing that the file belongs to Word and should be opened in it. In the latter method, Word calls on the OS to display a standard dialog used for finding and selecting a file.

Word can open multiple files at one time, and each file is displayed in its own window. Word relies on capabilities provided by the OS for window management. The user may open, close, minimize, maximize, etc. on a file-by-file basis. Word will also create new files, and can save files, either replacing the previous version, or saving a new file, again relying on the OS for a Save dialog to specify a location. Word will also allow the user to view meta information about the document.

Word has no concept of a collection of files. It works with one document at a time. The user performs all other file management outside of Word. File deletion is not handled within the application, nor are moving the file from one location to another, making duplicates, and the like.

Tomorrow, I’ll examine a hybrid model that has recently gained popularity, in large part due to contemporary web browsers.

In the Details: Bottom Tabs

I’ve always found it rather odd that Excel places tabs at the bottom of the window. I can’t think of another application that is laid out that way. The vast majority of spreadsheets that I have to work with only have one sheet in the document, but Excel always includes three tabs by default. This combination of factors results in what I consider to be an undesirable user behavior. I never look at the tabs. Just recently, I missed the fact that a test case specification had separate sheets for IE 8 and IE 6 tests (and that’s a story for another time). Someone ended up pointing it out to me.

If Excel documents only had one tab by default, I would likely notice when there were multiple tabs. If the tabs were at the top, I would definitely notice. Purposefully, or more likely by accident, the tabs were designed to be inconspicuous.