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 16
Permalink

Lazy Genericism

Bootstrap is a beautiful piece of work, no doubt. It makes flexible and responsive grid-based layout a piece of cake. It provides transitions and dynamic behaviors without a sweat. It even provides clean, contemporary aesthetics in pre-made components. Add Glyphicons or Font Awesome and you have a web app that will satisfy the CEO built in no time flat.

Of course, you used an accordion panel instead of coming up with something better, because it was easy to do. And the select widgets aren’t exactly what you had in mind, but they were there. Add you used a non-descript document icon for “Add Properties” because there wasn’t a better icon in the set. Oh, and it looks like every other site built with Bootstrap because you started with one of their templates, and you just didn’t take the time to do much customization.

Yes, Bootstrap and its cousins are wonderful things. We should take advantage of them. But please, I beg you, don’t fall into the trap of quick and easy. Don’t forget that your user interface is your brand. Excellence will not be found in lazy genericism.

Comments (View)
May 06
Permalink

IxDA Pittsburgh Workshop Open for Resgistration

My workshop, Sitting in the Driver’s Seat: creating production-ready CSS, which I led at Interaction 13 in Toronto, is getting a second run in Pittsburgh. All proceeds, beyond the rental of the space, are going to IxDA Pittsburgh for use in future programming. Since this is the first event to which we are charging admission, we’re keeping it very accessible. It’s only $100 for professionals and $50 for students. Spots are limited, so register now through Eventbrite. After you register, RSVP on IxDA Pittsburgh’s Facebook event page to let everyone know you’re going.

CSS 3 has handed the keys back to designers. With a syntax and structure that speaks our language and a fine-grained level of control, it empowers designers to not only prototype in the actual medium, but to contribute production-ready code. The days of pointing at the screen over the developer’s shoulder and trying to explain how something needs to shift three pixels are over. In fact, much of the JavaScript currently employed for simple UI behaviors can be replaced with well-architected styles. Take the driver’s seat, and make the CSS your UI specification document.

This workshop is intended for intermediate designers interested in gaining more control over their team’s final product. Participants are expected to possess a working knowledge of CSS. They should be able to read a stylesheet and understand what it is doing in the HTML page that references it. They should be able to write CSS styles and apply them to HTML elements to achieve a desired layout on a page.

As a participant, you will:

  • Familiarize yourself with the tools you’ll need to integrate with your development team.
  • Learn how Object Oriented CSS (OOCSS) can lead to cleaner, more maintainable code.
  • Discover how to replace heavy-handed, inefficient JavaScript with CSS-driven behavior.
  • Get started on your own library of CSS components.

About Jack Moffett
With a BFA in Graphic Design from West Virginia University and a Masters in Interaction Design from Carnegie Mellon, Jack has been designing web, desktop, and mobile applications for over a decade. He has worked in both research and industry environments and has been teaching design part-time for more than eight years at WVU. As Senior Interaction Designer at Inmedius, a Boeing Company, Jack’s responsibilities cover the gamut from initial user research and product conceptualization through to implementation and testing. As such, his skill set includes visual design, information design, and front-end implementation. He has designed software tools for Lockheed Martin, Shell, DaimlerChrysler, Eaton, and many organizations within the U.S. military, including Joint Service Explosive Ordnance Disposal, Naval Reactors, and NCIS. Jack has spoken at conferences and led workshops to teach designers how to integrate with their development teams and participate in implementation. He writes about design on designaday.tumblr.com.

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 30
Permalink

Select What?

Before I left for Japan, I added AT&T’s international roaming to my mobile plan. After selecting the services that I wanted to add (voice, SMS, and data), I was presented with this screen.

I can’t for the life of me figure out why the instructions are to select an “Effective/Expiration Date”, rather than just an effective date. This step is to pick the date that the service starts. You don’t pick an expiration date. There is a big difference between selecting a start date and an expiration date. If you take the label beside the radio button literally, you would think that it was going to start and expire on the same day. The first time I went through the process, I assumed that the service would expire automatically at the end of my billing period. That, of course, didn’t happen, and I had to call them to have them remove it retroactively. I bet they could significantly reduce customer support calls by changing the wording on this screen.

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 01
Permalink

Bento So-So

I’m the drummer in a worship band, and I participate in the planning of our services. We select five songs every week to support a theme or scriptures that the service will be based on. Our repertoire is well over 100 songs, and it continues to grow. To make it easier to select songs, I want to create a database that I can easily search. I should be able to find a song based on its key, tempo, related scriptures, keywords, and a general search of its title and lyrics. To this end, I’ve downloaded a trial copy of Bento. I have read that it is the best option on the Mac for a low-cost database that is easy to use.

It is proving easy to use, but I’m running into limitations. Specifically, there is no good way to add a collection to a record. By a collection, I mean a list of distinct items. For example, I would like to add a list of keywords to each record. There are two ways I could do this, but neither is satisfactory. I can enter them into a single field separated by commas. They will be searchable this way, but I won’t benefit from auto-completion while I’m entering them. Auto-completion is desirable for keyword entry, as it helps maintain a clean list without variations of the same keyword. The other method would be what they call a Simple List, which I thought would be perfect, but for some reason, Simple Lists aren’t searchable. I don’t understand that at all. Why would you have anything in a database that can’t be retrieved with a query?

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)