cooper

Journal: A blog about design, business and the world we live in.

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 is currently writing and speaking about a work being coauthored with Nathan Shedroff about how science fiction and design influence each other.

Diacritical character entry made simple (by stealing from the iPhone OS)

I’m going to call it. Apple won on this one.

The whole host of Latin-derived diacritical characters (such as ç, č, & ĉ) are too large to fit into a standard keyboard. The methods by which various operating systems have provided access to them have, in all but one case, sucked.


This sucks. It's hard to access and takes way too much visual hunting, not to mention having to "select" and "copy" the character to the clipboard.

Making pagination meaningful

Working with long lists of information over a network, like web email, can be problematic. Very long lists can have a huge performance hit on your servers, leaving the user tapping her fingers waiting on slow page loads, especially on “very thin” clients like mobile devices. To limit the server hit and improve response times, some systems paginate data, that is, break it up into a series of pages.

This works well since most lists can be sorted by smart defaults, and the first page is the one that users most likely want to pay attention to, anyway. In the web email example, you can sort lists of individual emails by date with newest on top, or threads by most recent activity, and be confident that users will find what they’re most often looking for quickly.

But if a user needs to hunt for something, she’s going to need access to other pages, and this article is about how those controls should look and behave.

Design Loneliness

DL_small.png

On a recent project a client confessed some small degree of envy of Cooper’s team structure. He was the sole designer at a medium sized software company doing good work, but unsatisfied doing it alone. In our short project he was able to see the value of paired design and wasn’t looking forward to heading back to business as usual. I’ve got four ideas on what someone can do in this circumstance, but first let me extol the virtues of Paired Design.

Four seconds of silence

Here’s a quick tip for you as you conduct your goal-directed interviews with users and potential users: Leave a four-second pause after your interviewee pauses their response, allowing them to add more information or additional detail.

shhhh.png

This is hard to do. In ordinary conversation, people will often step in and fill these silences. Especially with a stranger, we don’t want to leave the conversation “hanging,” preferring instead to offer up some response or reflection on what the other has said.

But an interview is not a cocktail conversation. The interviewer is trying to get as complete a picture as he or she can of the user’s thoughts. To help do this, we want to give them that room to think about what they’ve just said and append as necessary.

<Insert Title Here>
(or, Variables in Interface Language)

One of my favorite scenes in Futurama features a Lucy-Lui-lookalike robot who is programmed to fall in love with the main character, Fry. When she sees him, she purrs, “You’re one sexy man,” and then switches into a harsh monotone to shout, “PHILIP J. FRY”, before jumping in his arms and giving him a kiss. The writers can make this sort of insert-name-here joke because we’re all familiar with this type of communication, mostly from mass mailed form letters and IVR telephone systems that try and composite sentences from prerecorded bits. “If you want to talk to SUZY THOMPSON, press THREE FIVE TWO FIVE

PHILIPJFRY.png

Variables in otherwise-static text (like in interfaces) can be good or bad, depending on how you treat them.

Awww…I need to shut down now.

It seems that language in software is on the mind of interaction designers. A few bright folks over at UX Matters have thought about whether software should speak to users from a first person or second person perspective. I have been thinking about similar issues after a client recently asked me about whether a piece of software should ever refer to itself. “If we already think about computers as other people, why wouldn’t we?”

What’s he talking about? For those unfamiliar with The Media Equation, in 2003 Stanford professors Reeves and Nass published a series of experiments they conducted which show that humans essentially treat computers as if they were other humans. mediaE.jpgFrom Publishers Weekly: 

"People are polite to computers, respond to praise from them and view them as teammates. They like computers with personalities similar to their own, find masculine-sounding computers extroverted, driven and intelligent while they judge feminine-sounding computers knowledgeable about love and relationships."

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.

Apple iPhone email

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.

newsmap2.jpg

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.

google-0search.jpg
Google provides helpful “Did you mean?” suggestions when a search produces no results.

Re: Shaping Things

shapingthings.jpg

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.

Homer's blueprints for The Homer

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.

Peemoeller’s OUT

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.

Sign Up

Want to know more about what we're thinking and doing? Tell us about yourself, and we'll be happy to share.

+

Required

+

Optional

contact

Contact

To work with us

tel: +1 415.267.3500
Talk to the man
Want a direct line to the big guy? Here's your conduit. Alan Cooper:

+ Careers

Cooper is always on the lookout for the best and brightest talent. Feel free to take a look at our current career opportunities.

+ Site

To send feedback about our site, drop a note to our web team. An actual human will respond.

+ Cooper

100 First Street
26th Floor
San Francisco, CA 94105
tel: +1 415.267.3500
fax: +1 415.267.3501