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.

The power of rich visual modeless feedback

One of my favorite aspects of product design is the feedback mechanism. When I think of feedback, I think fundamentally about the car dashboard. Nearly every action that a driver makes in a car is responded to with one or more forms of feedback whether audible, tactile or visual.

When turning into a left lane, the driver will (hopefully) use the turn signal lever to indicate the change of lanes. Pulling the lever anti-clockwise will activate the turn signal on the exterior of the car, but will also offer the following feedback:

• Audible: The dashboard will emit a clicking sound
• Visual: A green arrow will flash on and off in the dashboard
• Tactile: The lever will click or nudge over

All of these feedback mechanisms work in tandem to communicate with the driver that the turn signal is active and working. As a side note, if you’ve ever activated your turn signal and it emitted a clicking sound at double the normal rate, it usually means that one of your lights is dead (this is considered negative audible feedback). That’s great design when you consider how impossible it would be to turn on your signal indicator, get out of the car, run around it to check all the lights are working and then jump back in again, all at 30 miles an hour!

Continue reading...

Mimicking the physical

Many a software app has gone down the dead-end of attempting to recreate physical controls and affordances. (See the rich sub-genre of notebook apps with spiral binding and turned-up corners.) But sometimes the clarity and familiarity of a physical analog is just the thing. The key is to use it as a starting point, not to slavishly recreate the physical experience in its entirety.

A good example of this is the new audio capture app, TapeDeck. Modeled after an 80's-era cassette recorder and its collection of tapes, TapeDeck addresses a key issue in audio recording — the difficulty of distinguishing audio tracks in a visual world. Each recording is represented by a separate cassette tape, organized by date in a slide-out drawer called the Tape Box. It also gives a clear indication of state, running the tape spools in sync with the big push-button controls. Plus, it's just fun to use.

Continue reading...

The next step for community design

Community design centers are non-profit organizations that provide high quality design to underfunded and underserved areas of a community. They're usually established as extensions of colleges and universities, and they're intended to positively impact the surrounding community though design — usually through the physical build.

Back when I was pursuing my degree at the University of Cincinnati’s college of Design, Art, Architecture and Planning, I worked for one, with the intention of helping to revitalize one of the more depressed parts of Cincinnati. The focus was the design of a farmers market, an initiative that included contributions from Architecture, Planning, Industrial Design, and my own discipline of study, Graphic Design. The end result of our work is a vibrant, exciting environment, and this experience got me thinking about ways in which my current discipline could take part.

Continue reading...

Important visual design principles for interface design

Now that everyone at Cooper has committed to writing a more frequent Journal, I’ve found myself reading a lot more blogs. That’s not to say that I wasn’t happily browsing and sponging before, but I’ve been really consumed by other people’s opinions lately. For instance, Ryan Singer of 37 Signals pointed to an interesting UI discussion just a few weeks ago. The discussion began in the comment area of a screenshot posted to Flickr, and it related to an iPhone application called Triplog/1040 by Stevens Creek Software; I've pasted the photo below.

The screenshot received a great deal of negative criticism. The customer reviews at the iTunes store have been equally negative, and the average rating is currently 1 ½ stars out of 5. (Not great if you’re looking to earn revenue on your application and there are several competitors challenging you).

So what to do about it? Well, I *could* critique the screen with additional constructive thoughts but I feel like Steve, the designer, has received enough suggestions and probably is not looking for more feedback. (If my work had received that kind of attention I think I might quit and become a barista). Instead, I’ll highlight a few visual design principles that this conversation sparked in my mind.

First impressions count
Just like you gain an instant impression when you meet a person for the first time, the same is true for interfaces. Called the Aesthetic-Usability Effect in Universal Principles of Design, this principle highlights the important role that visual design plays when designing products:

The Aesthetic-Usability Effect describes a phenomenon in which people perceive more-aesthetic designs as easier to use than less-aesthetic designs — whether they are or not ... Aesthetic designs are more effective at fostering positive attitudes than unaesthetic designs, and make people more tolerant of design problems.

The discussion about the Triplog software has been all about how unusable it looks despite the application not being available at the time to use. That’s not to say there aren’t usability flaws but a visual design with more organization and the right prioritization would go a long way to improving the perceived usability of the application.

Dense doesn’t have to be ugly but it does require you to be smarter
Much criticism of the Triplog interface was about the screen being too cluttered. But as Steve pointed out, his users need to view all of that information at the same time. I'm not challenging whether information should be removed but am reminded that for screens with high information density it is more important to use visual design techniques to organize the structure and flow of content as well as prioritize the most important information in a way that’s easily scannable.

Looking at a dense interface is like listening in a restaurant. When the restaurant is quiet it’s easy to hear the person you’re dining with but if the restaurant is busy and there’s a lot of background noise then it takes a lot more effort to hear and understand what the person sitting opposite is saying. You can do it but it takes a lot more work and isn’t as much fun.

Dense interfaces should have a clear visual hierarchy with a maximum four or five levels of distinction. Dense screens should be designed so that similar interface elements share attributes such as size, shape and color or proximity. Dense information should be organized so that elements are aligned to an underlying grid, which aids scanning. Finally, dense screens should contain minimal gratuitous noise that doesn’t support the user interaction.

Be different if you want to be remembered
Several people offered constructive ideas in the discussion. Some even went as far as to quickly mock up how they would design the interface (see here and here). Some resulted in screen designs that looked very similar to Apple’s UI guidelines for the iPhone.

I recognize that these mock-ups were done extremely quickly, but the alternatives run the risk of being too generic to be memorable, looking too much like an iPhone utility and not enough like a unique, useful, and original application. I’m the first to recommend standard UI best practices, but standards need not get in the way of establishing a brand. (Some commenters even preferred the bright blue background in Steve’s design to the more familiar iPhone UI, perhaps because it is unique and memorable).

It’s an exciting time to be in visual interface design
Okay, this may not be a principle, but it’s worth mentioning. There are all kinds of new digital products with interfaces that are changing the world we live in, and it’s exciting to see, discuss, and participate in this movement. Apple’s iPhone is one great example. New technologies require new thoughtful design. Now I just need to figure out what iPhone app I’m going to design and sell on iTunes.

Let the walls do the talking

Many of the Cooperistas were out traveling today, so I had the opportunity to snoop undisturbed. I thought it would be fun to find out a little more about what goes on in the office and to practice an aspect of our research approach while I was at it.

Observation of the environment in which people work is important to gain a well-rounded understanding of the people we design for. The objects and information that people surround themselves with, the character of their workspaces, and the way in which people interact with each other in those spaces all provide important clues about needs, priorities, preferences, and goals. When we talk in someone's personal workspace, we often intuitively pick up on facets that would not come up in conversation.

I snapped some photos of a few curiosities, and wrote down my initial thoughts about what these artifacts say about their owners. I also recorded the questions I would have asked of them if they were around to answer.

I discovered that there are a variety of computer mice around here. At first glance, it looks like people have chosen their mouse setup based on form, control type, and the feel that they prefer.

Questions:
What do you use your computer for? Did you specifically choose this mouse? Why or why not? What other digital products or peripherals do you own? Tell me about your favorite one, and why you like it. Any that you don’t like? Why?

Continue reading...

How we use Fireworks

In our training courses, we're frequently asked what tools we use. The answer is pretty simple. While we might use Photoshop for heavy photo manipulation or break out Illustrator for the odd diagram or visualization, we've come to love Adobe Fireworks for designing screen-based interfaces and illustrating scenarios.

Recently, Adobe asked us to share some of our Fireworks techniques with the user community. As a result, we worked with them to create this short video about how our interaction designers and visual designers worked together on a recent project for GoldMail.

If you want to get more in depth with Fireworks, you can read a more thorough article about specific techniques that I recently wrote on Adobe's developer center.

Foldit: distributed gaming as research tool

Foldit, a game made by two medical researchers in collaboration with some computer scientists and with consultation from some game designers, taps into people's intuition where raw computer processing power isn't enough. Think distributed computing like the Stanford Chemistry Department's Folding@Home, but instead of donating idle CPU cycles to perform scientific research, you play a game that helps researchers understand human pattern recognition.

According to UW associate professor of computer science and engineering Zoran Popovic in Science Daily:

Some people are just able to look at the game and in less than two minutes, get to the top score. They can't even explain what they're doing, but somehow they're able to do it.

One of the most interesting parts is that they've incorporated competition into the game: between gamers playing for a high score, and actual research groups trying to solve problems. I think a lot about how graphic/visual/interaction design could similarly channel human energy in productive ways. There's got to be another example of this somewhere, right?

Using research to end visual design debates

Imagine the following scenario: You're involved in a new product design project and are presenting several visual design options to the team. Everyone in the meeting is leaning toward one direction when in the back of the room an executive's hand shoots up. "I don't like orange," he says, and suddenly the meeting spirals out of control, degrading into a discussion about whether or not the square elements of the interface look too blocky, and "Could we use circles instead?"

If you've ever had to present visual design to a group, you probably have your own collection of similar horror stories. But why is it that a group of otherwise level-headed adults can't seem to have a productive meeting about visual design? The short answer is that in the absence of clear context about what they are evaluating, most people don't know how to objectively evaluate visual design, so they rely instead on subjective intuition.

Why is there subjectivity in this process? Visual communication, perhaps even more so than verbal communication, is a nuanced language. Rich gradations of tone and style exist in even the most straightforward of applications. As the old saying goes, a picture is worth a thousand words, and this is just where the trouble begins. A thousand words—especially when they're the wrong words—can do a lot of damage.

Continue reading...

Typography and the User Interface

There is a quiet issue that nags at the computer industry. While processing speed and computational flexibility have grown at incredible rates, our displays, the most human-facing elements of our digital lives, lag behind.

Addressing an audience of information designers, Edward Tufte once explained that the fundamental challenge with presenting information is that the world we live in is high-resolution and multi-dimensional, yet all of our displays are most decidedly not. And while Tufte was initially referring to the problems of displaying rich data on paper, he was quick to point out that digital displays suffer the same problem but to an even greater degree. It may be tricky to map multiple axes of information (time, temperature, dollars, color, widgets sold, etc.) onto a two dimensional representation, but your difficulties are only compounded when you add the considerable handicap of reducing the target display resolution to a fraction of that of an equally sized piece of paper¹.

Continue reading...

Branding and the User Interface, Part 2: Tips on New Media Branding: Behavior and Color

In the April 2003 newsletter, we introduced a new series devoted to exploring the opportunities and challenges related to branding technology-based products. The first installment presented a handful of basic, high-level brand concepts. In part two of our series, we will take a closer look at how branding differs between traditional applications, like printed corporate collateral, and emerging new media applications, such as software user interfaces, with a focus on behavior and color. If there are particular topics you are interested in, feel free to submit them, and I will try to address them in upcoming articles.

Why is Software Significant to Branding?

Everyday, more and more customer touch-points traditionally facilitated by human representatives are instead administered by computers. This is the case even in the most common experiences. For instance, when you check out of most grocery stores, whom do you pay? You may think you’re paying Patty, the human checkout clerk, but I bet many of you are actually sliding a card through a computer (you know, the one that asks, “credit or ATM?”).

These days, you can no sooner operate your business without computers and their software than you can without people. Your company may sell auto parts, vacuum cleaners, or fine wine, but if you have a Web site or B2B e-commerce system, you’d better believe you’re in the software business, too. Because of its increasingly significant impact on your company’s brand, the quality of software’s behavior is a crucial factor in your organization’s success.

Continue reading...

Branding & the User Interface: Part 1

This article introduces a new series devoted to exploring the opportunities and challenges related to branding technology-based products. The first installment develops a foundation for future, more detailed discussions by introducing several key brand concepts. Forthcoming articles will present a variety of brand-related topics including the differences between traditional media and new media, how to solve common branding challenges, and several case studies that characterize successful technology-focused brand strategies. If there are particular topics you are interested in, feel free to submit them and I will try to address them in upcoming articles.

What is brand?

In tangible terms, brand is a name, a symbol/sign, and typically a system of fundamental visual, verbal, and written characteristics; however, the true essence of a brand extends beyond what we can see and hear. The significance of your company’s brand is also defined by the sum of its interactions with people.

Continue reading...