Sign up to get our featured articles delivered straight to your inbox every month or two.
RSS feed of all articles
Follow us on Twitter
Chris Noessel
Chris Noessel is a senior consultant at Cooper. His industry experience ranges from owning a small, museum-focused company in Houston to working with Microsoft's futures prototyping group in Seattle. For marchFIRST he was Director of Information Architecture, conducting research and design for notable web sites such as Apple, SEGA, and Harmon Kardon. He was one of the founding graduates of the Interaction Design Institute Ivrea. He teaches interaction design at the California College of the Arts.
A reminder about system conventions
I'm a Facebook user. I'm also an iPhone user. I'm also a bit lazy about updates. So having the Facebook app on the iPhone seems like a good idea. But there's one interface element in the application that frustrates me and makes me prone to not want to use it at all.
If you use your iPhone to email, you're used to sending it using the SEND control in the upper right hand corner of a message. It's a good place to be for right-handed people, as it's easy for your right thumb to jump right there. I send emails all the time from my phone, so I'm really used to this behavior.
South by Southwest: A stream of consciousness report from the half-trenches
For those who aren’t familiar with South by Southwest, it’s a huge three-track conference that occurs in Austin, Texas each year around mid March. (It’s timed to coincide with UT’s spring break, which makes room for the conventioneers and avoids student-professional brawling.) The first track is music, and lots of bands come and play live, hoping for more fans and maybe a deal from talent scouts. The second track is film, and in addition to a regular set of conference panels and presentations, there is a concurrent film festival going on at the city’s many rockin’ cinemas. The third track is interactive (SxSWi), with conference presentations and a whole lot more.
Squared rectangles: A space-efficient layout for ranked graphics
Many people have seen Marcos Weskamp's brilliant visual design of Newsmap. The site uses the Google News aggregator to rank news stories by popularity across the Web, and then maps them out with the popular items larger, and less popular headlines smaller, all in color-coded categories. Here's a quick screenshot if you haven't seen it, but view it live if you can.
The beauty of the layout is that it allows a user to quickly glance to see what's most popular. But what if you wanted to do the same thing with a set of identically-proportioned graphics? (Like channels of video, CD artwork, or avatar options on a social networking site.) You couldn't use different proportions for the images, as Weskamp does with headlines, without sacrificing the graphics' integrity.
What you could do is use "squared rectangles."
One free interaction
"One free interaction" is a prospective design pattern that gives software and hardware a more humane feel. It exists outside of task flows and the concept of users as task-doers. Instead it sits in the "in between" spaces, suiting users as fidgeters, communicators, and people who play with things.
Snapback pages
When I got my iPhone, I spent time opening up all the applications and playing around. I was keeping an eye open for what new facets of the touchscreen interaction design were fun and useful. When using the Safari web browser, I noticed the funny stretchy-edge pages. Meaning, when you use your finger to scroll above the top of a page or below the bottom of a page, it pulls away from the edge of the browser, revealing a small blank area that sits “behind” the page. When you lift your finger up, the page snaps back into place. It’s kind of hard to describe, so this little video should help.
It was pretty cool, since it provided some visual confirmation of the edges of the page. But honestly I thought it was just a coding oversight. Then I saw it again in the text message page. And again in email menus, and the emails themselves. Nope, I realized, it’s baked into the OS.
I put the feature out of my mind until I found myself fiddling with it. Mulling over an email, or waiting for a text response from someone, I’d sit and idly flick the pages away from the edge just to watch them snap back. Flick-snap. Flick-snap. It was so satisfying, even if it was sort of useless.
Then I started seeing this same pattern in other things.
Nothing is special
Numbers abound in interfaces, hopefully delivering a great deal of information. Bigger numbers usually indicate more activity (like when you're looking at comment threads), or more work to do (like when you're looking at your inbox); smaller numbers generally indicate low activity. However, when the number zero must be represented in an interface, it should be treated differently than other values. Why? As I'll show below, "zero" can actually imply a variety of things, depending on its context.
Search results
Zero results can mean either that the term isn’t represented in the searched data set, or that the user mis-keyed the term. Each possibility would suggest a different recourse.- Correct term, but no results? You need to find another term or look elsewhere.
- Bad term mis-keyed? You need to supply the correct term.
When the search results are zero, help the user notice the error with attention getting graphic design, and provide options about alternate terms or places to look.
Re: Shaping Things
One of the most interesting books we’ve read recently at the informal Cooper Book Club is Bruce Sterling’s Shaping Things
In the book, Sterling extends some salient technosocial trends to construct a prospective new technology he calls a spime. Sterling lauds designers as the only ones capable of making spimes' (arguably) inevitable emergence into something positive and meaningful, and ultimately, save humanity from its current trajectory of self-destruction. (But no pressure.)
Folkware
In his recent article for TechCrunch, salesforce.com CEO and chairman Marc Benioff frames the web 1.0 revolution as “Anyone can transact” with great 1-to-many online transactional applications like Google and Amazon. The 2.0 revolution was “Anyone can participate” with a host of many-to-many online applications like LiveJournal, Flickr, and YouTube that really put the focus on user-generated content.
The parable of The Homer
Even after you’ve sold them on personas, even after you’ve explained that you want to design for a specific persona first, even after you warned them about the perils of the “elastic user,” you can find yourself hearing things like, “Well, I know this guy who would do it this way...”
To help clients who won't be put off by pop-culture references, I reference the parable of The Homer.
For those who aren’t familiar with the Simpsons episode “Oh Brother, Where Art Thou?” (Season 2, Episode 15), it plays out like this: Homer meets his long lost brother Herb, who happens to head an automobile company. Believing Homer to be the perfect “everyman,” Herb instructs his designers to make exactly the car that Homer wants.
Discoverability
Hey iPhone users, did you know that you have access to special diacritical characters? Neither did I. The bloggers at iSmashphone had to point it out to me in their entry 12 iPhone Tricks You Might Not Have Known.
The way you do it is to press and hold the base character, and the line of diacritical characters appears above. Slide your finger to the correct one and lift up, and now you can properly spell the word háček.
Digregiousness
One of the nice things about working with smart people is the conversation. It soars to heights, teleports across topics serendipitously, and can suddenly dive back towards its original target like a bird of prey. As an illustration, one day I slyly documented these topic shifts over a long lunch between myself and two other designers at the company. The results of this exercise are below.
Slanty (and underhanded) Design
I’ve been entranced with the notion of Slanty Design ever since I read Russell Beale’s article about it in Communications of the ACM in 2007. For those of you who aren’t familiar with it, Slanty Design is kind of anti-affordance, a difficulty-of-use employed to achieve certain design decisions. I think even the acknowledgment of such tools mark a maturity of interaction design: it’s not solely about making things easy to use. (Just, perhaps, mostly?) Unfortunately, the use of slanty design isn’t always to encourage better behavior. Sometimes it’s just greed.
Startle wayfinding
Axel Peemoeller’s wayfinding system for the Melbourne Eureka Tower Carpark has been making the internet rounds. Props to him, it’s a novel and eyecatching design. (See below for one example from his site.) But something about it makes me think it’s disorienting (and possibly dangerous) for drivers. Let me try and articulate my amateur cognitive science/interaction design theory to explain.
While driving, your brain’s 3D systems are in high gear. (Pardon the pun.) Your mind is tuned to look for positioning cues such as occlusion, parallax, and especially size changes. This last is most important, as your visual system is on the lookout for anything that suddenly grows larger than the things around it, which would be a clear sign that you’re about to hit something. It’s called the startle response, and it happens within about 80 milliseconds, far too fast for any rational processing to counteract it.
So now, think of yourself in the Eureka Tower Carpark. Turning a corner, you’re a little confounded by the strange and lovely colored shapes on the wall. What’s going on here? All of a sudden, your visual system puts all these shapes together in a way that could only make sense if there was something (in this case, typography) jumping out right in front of you. Your gut reaction should be to slam on the brakes, even if your logical brain can decipher the thing a few milliseconds later. Hopefully the driver behind you left enough room.
So I haven’t been there, and I don’t know if this conjecture bears out in fact, but the pictures certainly set off my startle reaction.
What do you think? Join the conversation in Comments
Translation services in interviews
My team recently completed a set of non-English interviews in Beijing, Moscow, Munich, Paris, Seoul, and Tokyo. To facilitate these meetings, our client arranged translators. Having one was indispensible, but it cost time; and more time than we initially thought.
Whiteboardability: How to make process diagrams memorable
Have you ever been in a design review where instead of talking about the proposed solution you spend half the time revisiting what the user is trying to accomplish in the first place? Keeping the human-centered models of the processes that lie behind your solution fresh in the minds of stakeholders (and designers) can prevent this unwanted rehashing. One way to ensure this is to create a diagram and give it qualities that make it simple enough and memorable enough so that, on a dime, you can whip out a dry-erase pen and sketch it out as a reminder.
I like to call that collection of qualities whiteboardability. It won't work with extremely complex business processes, but for simpler processes or most consumer domains, it works well.
Interview tips: The critical first five minutes
Goal-Directed Design necessarily involves first-hand research with real-world users. Whether these interviews last 30 minutes or two hours, the first few minutes of discussion are vital to establishing rapport with your participant.
Outside of celebrities and politicians, few people are practiced at giving interviews. And while participants are almost always willing to help as best as they can, there may be some unspoken questions troubling them before an interview begins. This article offers a list of common topics that proactively address these questions and make participants feel at ease.
Ignore that designer behind the persona
One piece of advice I have received in my first year here at Cooper is to avoid referring to personas as creations. Of course they are, and everyone knows it, but they work better if we refer to them as if they were real people in the world. For example, the conversation got off track a bit in one client presentation when I said, "We gave Tracy two kids, with one heading off to college…" The discussion went from being about the personas and the design problem to being about why we gave Tracy two kids, and what tweaks might be made to better fit the persona to the client's expectations. Had I instead said something like "Tracy has two children, the older of whom is about to head to college," the conversation likely would have remained on track. Why is that the case?
Goal-Directed Service Design
Most people think of Goal-Directed Design techniques as focused on product design, but they work equally well for services. A service is comprised of the various "touchpoints" between a customer and a business. Touchpoints include public-facing systems such as web sites and web-enabled software, but can include other channels as well, such as brick-and-mortar stores, points of sale, interactive voice response systems, email and postal mail, too.
A service model best fits offerings that are intangible, distributed in space, or play out over a length of time, especially on a routine basis. Some obvious examples include: electricity, hotels, mobile phone service, or even a government. The touchpoints you design as part of your service are critical to the user's understanding of your brand. Increasingly, many touchpoints are interactive systems rather than human contact, so paying careful attention to the design of these things from the user's goals is vital.