DesignAday

My name is Jack Moffett. I am an Interaction Designer with over ten years of experience. According to Herb Simon, that makes me an expert, so I must have something worth sharing. I have started this venture as an exercise to spur critical thinking about my chosen profession. I hope that others may find it thought provoking as well.

DesignAday will present a brief thought about Design every weekday.
May 20
Permalink

In the Details: Make up your rewind

I’ll occasionally use the frame animation palette in Photoshop to create an animated GIFF, but most of the time I use it to save different states of a screen mockup in one file. Adobe is blatantly inconsistent with the iconography used for the controls in the palette.

There are four arrows controlling playback. The single, right-pointing arrow starts playing the animation. This is appropriate, as a right-pointing arrow has long been a standard icon for “play”. The single, left-pointing arrow moves back one frame. This is acceptable, as one would not expect to be able to play the animation backwards, though I would have preferred a symbol that didn’t so closely resemble the play icon. The double, left-pointing arrow displays the first frame of the animation. Double-arrows are long-time standards for “rewind” and “fast forward”, so this too makes sense. One might expect, then, that the double, right-pointing arrow would display the last frame in the sequence. However, this is not the case. That button merely moves forward a single frame, much like the single, left-pointing arrow.

A better use of standard iconography would have been something like this:

Comments (View)
May 09
Permalink

In the Details: Tabs

I’m still acclimating to Adobe’s CS6. I think I like Photoshop’s new, dark gray color scheme, but there are some quirks that have been tripping me up. For one, I keep clicking on the wrong document tab. Realizing that I was doing this repeatedly, I analyzed the UI to figure out why.

In this screenshot, I have two documents open. One tab represents the document with focus. The other tab is the one I want to click on to switch focus to the other document. Adobe’s designers decided to make the current tab brighter. The background is a lighter gray than that of the other tabs and the text on it is a light enough gray to appear white. It’s a relatively high contrast. The deselected tab, on the other hand, has a very dark gray background, and the text is a dark enough gray to recede. This works okay when there are more than two tabs, as it is easy to tell which tab is different. It stands out from the others.

As you can see, though, I have only two tabs. I’ve been clicking on the already selected tab more often than not. I think I know why, and the reason, interestingly enough, is skeuomorphic in nature. If you think of a tabbed manilla folder, or the tabbed dividers in a library’s card catalog (remember those?), you’ll realize that traditionally, tabs were part of a larger whole and shared the same color. Tabs within a UI work best when they share a background color with the area that they represent.

Adobe made the background of the deselected tab match the background color of the area below it—the very area that the tabs represent. The text in that tab even matches the color of the text in the ruler. The background of the selected tab matches the bar above it, and the text in that tab matches the text on the bar. Color, brightness, and contrast associations all point to the darker tab being connected to the currently viewed document.

My mind subconsciously makes these connections, and I go for the tab that my brain has decided is disconnected from the current document.

Comments (View)
May 01
Permalink

Do Something Smart

A couple of weeks ago I spent a fair chunk of time opening old Freehand files in Illustrator CS4 and saving them as Illustrator files, since Illustrator CS6 can’t read them. I used Freehand to create a lot of user interface specification documents and diagrams back in the day, so the files I was opening had a lot of linked images. A large percentage of these links were broken, and I had  to relink the files. I happen to have here a transcript of the conversation I had with Illustrator as I went through the process..

Illustrator: Hey, these linked images aren’t where the file says they are supposed to be. Do you want to show me where they are or just ignore them?

Me: Oh, I’ll show you where they are.

Okay, the first one is file1.png. Where is it?

It’s right here: images/screenshots/file1.png.

Great. Let’s see, is file2.png in images/screenshots too? Yep, there it is. Alright, what about file3.png? Hmmm, I don’t see it. Where is that one?

Oh, that one is over here: images/dialogs/file3.png.

Yep, got it. Ummm, I don’t see file4.png in images/dialogs.

Well, no, it’s back in images/screenshots.

I see it. Now, where is file5.png?

That’s in images/dialogs. Hey, can’t you just check both of those folders now that I’ve pointed to them?

Nope, sorry, I can only remember one location at a time.

Well then, can’t you check a location for all of the missing files, rather than stopping for each one you don’t find?

Huh uh. I have a one-track mind. Now shut up and show me where file6.png is.

Oh good grief!

I don’t know what decisions were made during the development of this feature. It could be that a project manager decided that it wasn’t worth spending the extra time. Maybe the interaction designer was lazy and thought it was good enough. It could even be that the feature was implemented years ago without an interaction designer involved, and nobody has thought to revisit it. Goodness knows I’ve witnessed each of those situations on software I’m responsible for. With just a little bit more logic, the application could save me a lot of extra time. Whenever you are tasked with specifying behaviors, be sure to think it through completely. Do something smart.

Comments (View)
Apr 09
Permalink

Oh no they didn’t!

I assumed the headline was tongue-in-cheek link bait. Wired would know better than to publish something so mind-numbingly stupid. “Car Tech Isn’t Failing. Owners and Infotainment Interfaces Are”. That has to be a joke, right? What’s the date on this article? No, it’s not an April Fool’s Day joke, and it’s not from 1996.

The gist of the article is that computer systems in cars have become very reliable—very few software bugs are reported. This apparently means, then, that any problems drivers have using the infotainment systems are due to their own stupidity. It’s the user’s fault.

Really?

Here are a few quotes from the article that blew my head gasket:

Reynier [owner of a small interactive design agency] admits that “it’s definitely user error. I never have the idea that something is broken.”

While investigating whether the current explosion of automotive technology will cause owners of a [sic] late-model cars to visit a shop more often, everyone we spoke with agreed that he [sic] biggest failure with in-car technology has little to do with vehicle systems and more to do with owners.

“The hardware itself is really pretty bulletproof,” Kato adds. “It’s very robust and reliable. Occasionally we’ll get a bad hard drive or a bad screen. We are having challenges, but it has less to do with the components of the vehicle and more with dealing with customers on how to properly pair their phones.”

And what is the solution to this problem? Is it to improve the usability of the user interfaces? Is it to make sure that the software is not becoming a distraction to the driver, giving them very clear choices that require little thought and minimal attention? No, apparently the solution is to educate drivers on the correct way to use the software. They’re stupid, remember?

To address this problem, luxury brands like Cadillac, Lexus and BMW are staffing dealerships with dedicated tech support specialists, and even everyman automaker Chevy recently doubled its “connected customer specialist” staff stationed around the country from 25 to 50.

Here’s a better idea: automobile manufacturers should pull their heads out of their gas tanks and, instead of doubling their support staffs, hire interaction designers to improve their software. Address the root of the problem, rather than the symptoms. But I wouldn’t recommend hiring Reynier’s firm.

And while I’m at it, here’s some free advice for Wired. Hire a proofreader, and have Doug Newcomb read some articles on Co.Design or Boxes and Arrows.

Credit: Dan Saffer get’s the blame for initiating this tirade.

Comments (View)
Apr 08
Permalink

How I Learned to Stop Worrying and Love Scrubby Zoom

Photoshop CS5 changed the default behavior of the zoom tool, which of course I am now experiencing for the first time in CS6. It was quite a surprise the first time I tried to drag out a marquee around the area to which I wanted to zoom in. Instead, the image dynamically zoomed in on the spot I first clicked as I dragged the cursor across the screen. When you have been using a tool as long as I have, actions like this are deeply ingrained, and the change was a shock. Of course, I immediately disliked it. I continued to dislike it as I repeatedly forgot and tried to draw out my zoom marquee, thus zooming in on the wrong part of the image.

But, being an Interaction Designer, I know that they must have made the change believing it to be a good idea. I did some quick Googling and learned that the feature is called “scrubby zoom”. I learned that I can turn it off by selecting the zoom tool and unchecking the scrubby zoom checkbox in the tool options bar. I never actually select the zoom tool, instead using the command+spacebar and command+option+spacebar key commands to temporarily switch to it, so I’m not sure I would have discovered the setting on my own.

So, safe with the knowledge that I can always switch back to the way it used to be, I started playing with scrubby zoom. After all, I adapted to Apple’s reversal of the scroll direction easily enough. Scrubby zoom is actually quite elegant, even if its name is not, and if I can get my brain to remember to click in the center of the area I want to zoom in on, rather than the top-left corner, I think it’s going to be a more efficient method. The one oddity is that I am able to zoom out until my entire document is about two pixels wide. It seems to me they should limit that, as it makes more room for error than it does utility.

Comments (View)
Apr 04
Permalink

Cursing the Cursor

I mentioned yesterday that I’ve upgraded to Adobe CS6. As I start using it, I’m sure there will be quite a few posts about changes to it here. I should also point out that I upgraded from version 4, so I may be pointing out details that are old news to many of you.

The first thing I do after installing a new version of an application is run through its preferences. This is especially important for a tool I’ve been using as long as I have Photoshop. Just as a musician tunes his instrument, so do I tune the UI of the application to play well under my hands. I set my painting cursors to display as the full size brush tip with a crosshair, and I set the other cursors to “precise”.

I immediately noticed that Adobe took a different approach with their cursor. In prior versions, the crosshair was of a single pixel in thickness. If over a light background, it would be black. It would change to white when over a dark background. In CS6, however, they have have changed to a static cursor. While over a white background, it looks the same as it did before, but move it over a black background, and you’ll see that it is now 3 pixels thick on the ends: a black line outlined in white. It is a much chunkier cursor, covering more pixels, and making it harder to perform actions with perfect pixel precision.

I don’t know why they would make such a change. The old cursor was smart and elegant. The new cursor is dumb and clumsy. I hope this isn’t a portent of the other changes I will be encountering.

Comments (View)
Mar 27
Permalink

Skeuomorphism: the good, the bad, and the ugly

I’m really getting tired of hearing people complain about skeuomorphic user interfaces, especially tech journalists that don’t understand what they’re discussing. Podcasts on the TWiT network (yes, I’m looking at you, Leo) have been especially annoying. So, here’s an example. The next time you hear somebody complain about Apple’s skeuomorphic leather stitching, please send them here.

The Ugly
This is Apple’s much maligned Notes app from the iPad. There are a lot of people that strongly dislike the visual aesthetic. Some people like it, perhaps because it is familiar or it resonates with past experiences and sensations. Other people don’t care one way or another. For the most part, this is a matter of personal taste. As I’ve explained before, this is fashion. It’s also a bit of branding, and a case can be made that the visual design of the application has some utility, as it immediately communicates which application you are using. Many people seem to have just taken an intractable stance against skeuomorphic designs because it’s currently hip to do so, but for the most part, there is no negative effect on the usability of the application. The stitching is purely decoration, but there is a good reason for providing some amount of margin between the interactive components and the edge of the screen. The notepad doesn’t require a binding, but it benefits from a title bar, the height of which is based on the size of the button that resides within it. The one skeuomorphic treatment that is wasteful is the pocket on the left. It serves no functional purpose, and it takes up a significant chunk of what could be usable space. If you had a lot of notes, the pocket would obscure two (and part of a third) that you would otherwise be able to see and tap on.

The Bad
This is the iPhone app Metronome by MarketWall. It is almost completely skeuomorphic. It looks like a traditional, mechanical metronome. To set the tempo, you have to drag the weight up and down the arm. To start the metronome, you drag the arm to one side and release it. The arm animates back and forth just as on a mechanical metronome, and it makes a ticking sound. Now, you can like or dislike the visual design of it. When I first saw it, I thought, “Oh, that’s cute,” and I enjoyed playing with it briefly. But then when I had to actually use it, I immediately realized that it is a poorly designed application. It is really difficult to get the weight to the exact tempo you want to set. Some tempos I couldn’t get at all. It was really frustrating. The application is hard to use because it is limited by the constraints of the physical object and it’s translation as a skeuomorph.

The Good
This is Pro Metronome, an iPhone app by EUMlab. The visual design of this UI is also skeuomorphic, imitating a handheld, electronic metronome. It is designed to mimic a physical object with an LCD screen, beveled buttons, and a click wheel similar to a classic iPod. This is unnecessary, and the screen-within-a-screen is downright silly, but it isn’t detrimental to usability. The click wheel, however, is actually a very good interface for setting the tempo. You can quickly get to the tempo you want, and the control is fine enough to easily adjust the tempo by single digits. I find it preferable to other methods of entering a tempo (e.g. numeric keypad, increment/decrement buttons). Furthermore, I immediately knew how to use it—a primary benefit of a skeuomorphic UI.

My point here is that there are two distinct ways to critique skeuomorphism. One is purely aesthetic, and if you are critiquing the aesthetics, than realize that you are making a personal judgment based on your own tastes and prejudices. This is not a basis by which to declare skeuomorphism as good or bad. The other way to critique skeuomorphism is to consider it’s functionality. Is it making the product easier to understand? Is it obscuring information? Does it actually result in an ineffective UI? Asking such questions will result in an intelligent analysis of the design.

Comments (View)
Mar 21
Permalink

In the Details: Two-Step Scrubber

A few weeks back, I reviewed the new mobile app from Audible. One detail I left out was the microinteraction involving the scrubber. A scrubber is a control for moving forward or backward through a segment of audio. In most audio playback applications, it takes the form of a slider. The length of the slider represents the length of the audio clip, and the thumb, or handle, indicates the current playback position. Dragging the thumb allows you to change the playback position. Thus, the control fulfills two functions: it shows you where you are in the clip, and it allows you to navigate to a different point in the clip.

The Audible app is designed specifically for people on the go. It is a mobile app, after all. When you are moving, be it driving or walking, it’s easy to miss your tap target. If you accidentally move the scrubber in a song, that’s not such a big deal. You have a reasonably fine-grained control of position in a 3 or 4-minute track. An audiobook, however, has much longer audio clips. A slight move of the scrubber can translate to a huge jump in relation to the story, and you’ll have a hard time finding where you were.

So, the designers of the Audible app did something really smart. The scrubber is always displayed in the player interface, so you can quickly glance at it to see where you are.

image

To actually move it, however, you must first tap it. Tapping the scrubber unlocks it, allowing it to be dragged.

image

This two-step interaction makes it highly unlikely that you will ever accidentally lose your place. Furthermore, if no further interaction has occurred, the control returns to its locked state after a period of about 5 seconds. This is not conventional—most UIs allow sliders to be dragged without being tapped first. Given that the control is probably rarely used, making the control less intuitive is actually an excellent design decision.

Comments (View)
Mar 06
Permalink

In the Details: Grayed Out

Since very early in the history of user interface design, an object that is “grayed out” has been understood to be disabled. Clicking on it won’t do anything. “Grayed out” means that the object is a lighter or less saturated color. This may be accomplished by making the object translucent, allowing the background to show through. Contrast is reduced.

image

This is a screenshot from Pinterest, specifically from my “Following” page. Compare the Edit Profile button to the Unfollow button. The Unfollow button certainly appears to be grayed out. Hovering over it changes the cursor to a pointer, but the button doesn’t change state. Aside from the cursor change, everything about this button says, “I’m disabled. You can’t click me.”

Comments (View)
Feb 21
Permalink

Laudable Audible

Another of my favorite sessions from Interaction 13 was Trip ODell’s If UX Can Kill it Probably Will: Designing for the 70 MPH Interface. And what interface might that be? I had the fortune of making Trip’s acquaintance a couple days before his talk and learned that he has worked for both Microsoft and Adobe, but he wasn’t speaking of work he did at either company. He is currently at Audible, a company that I have a lot of respect for. He convinced the company that, even though their customers had a very high satisfaction rating with the existing Audible app for mobile phones, it had to be redesigned. That, in and of itself, is impressive, and the fact that the company put the time and money into the effort shows that they really do care about their customers.

What was so bad about the Audible app that it had to be redesigned?

This is what the old app looked like with all of the controls exposed. All the icons and the progress bar at the top could be shown and hidden with a tap on the screen. The volume slider and the row of buttons above it could be displayed or put away by dragging the ribbed tab. But let’s think about the use of audiobooks. As Trip pointed out, you almost always listen to them start to finish. You don’t skip parts, and you certainly don’t jump back to re-listen to a previous chapter. That entire row of rewind/forward controls, while useful when listening to music, are not only useless for audiobooks, but a source of extreme frustration. If someone is driving, or even walking, and they attempt to pause the book, but accidentally jump back to the beginning of the chapter, there is no good way to recover from the mistake.

Trip’s focus was use while driving, and he said that they determined that the play/pause button was the most important, followed by the 30-second rewind and bookmark buttons. Everything else could be minimized for non-driving use. The new design, which released this week, is a brilliant example of simplification done right.

There are a number of other laudable improvements to the app, and it’s getting rave reviews. I want to congratulate Trip and his team on some outstanding work. They should submit it to the IxDA Interaction Awards next year.

Comments (View)