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.

Beautiful Monsters: The odds are in

Beautiful Monsters is a series by David Fore, head of Cooper's consulting practice. It is intended encourage conversation about how interaction designers can grow more sustainable practices, with the goals of improving our fortunes, our relationships, and the health of our planet. Start at the beginning, or read the latest installment below.

Critics may charge that I’m loving on WunderMap too much. But these guys have vision. They provide fantastic resources for visualizing many of the changes afoot, which is a necessary precursor to visualizing solutions. But what they haven’t done yet is provide us the coordinates of our honeybees, one in three of which have disappeared from these parts. Without honeybees we don’t have agriculture as we know it — and, ipso facto, culture. ("How would our federal government respond if 1 out of every 3 cows was dying?" a scientist recently asked a bovine Congress.)

Continue reading...

Event: Beautiful Monsters live in San Francisco!

I'm going to speak about Beautiful Monsters at the Pecha Kucha-SF gathering on Wednesday, July 23, at 330 Ritch. Originated in Tokyo, Pecha Kucha provides a venue for designers of every ilk to share ideas in a lay-back environment. Like all presenters, I'll have 20 slides — and 20 seconds per slide — to say my piece. RSVP and get more event details.

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.

Continue reading...

Does your persona eat twinkies?

I recently stumbled across an article about personas written by Andrea Wiggins late last year in Boxes and Arrows. Wiggins does a nice job talking about how personas can help the design and development process, and some approaches for creating a good persona set. But what really gave me pause was the title: “Building a Data-Backed Persona.” Data-backed? Wait a minute…is there any other kind?

Continue reading...

Algorithm Ink: Learning by doing

Aza Raskin has released a wonderful new toy, Algorithm Ink. As he states in his introduction, it really lowers the bar to exploring the creative mathematical beauty of fractals. Aside from the images themselves, there are two things I love about this site.

First, the less-is-more UI design really lets the canvas be the focus of attention by keeping tools out of your way until you need them. Second, and more fundamentally, is the “view source” ethos and the direct manipulation of the visualization-generating code that really makes the experience compelling (if not addictive).

Here’s what happens to me: select an interesting image and watch it play out. Click open the “edit” panel to expose the surprisingly few lines of code that make it tick. See all the pretty numbers. Change one. Click “draw” and see the effects of your change. Repeat about a thousand times.

Before I realize it, I’m copy-pasting functions from other drawings, following the logic in code to reverse-engineer how an effect is generated, musing on the power of weighting the randomness of my results. Like writing HTML on the Web 1.0, I’m learning by example and trial-and-error. Sure, there’s a manual for the syntax somewhere, but the experience of seeing and affecting the code in action is so much more fun.

"Wandering" can be productive during user interviews

Recently, a client who was observing us perform stakeholder interviews made a casual off-hand remark at the end of the day that the interviews had "wandered around a bit." We had explained how our interviews are less survey-driven, and more ethnographic in style, but it's often hard for the uninitiated to see the immediate value of an ethnographic type approach to interviewing, especially when it results in circuitous answers. We were particularly happy with the wandering of our interviews, which had produced visceral clarity which could never have been delivered with an overly structured interview. For example, hearing that the back-end systems are "dog shit" provides an additional layer of information than simply hearing that they're "dated" or "inadequate."

Tommy Stinson, Strategic Director at Cheskin, another Bay Area innovation engine recently blogged: "The goal of the discussion isn't to just get the participant's 'take' on the topic (at least it's not limited to that). The goal is to understand this person (or people) and their culture - the 'webs of significance.'"

We work from structured interview instruments, but as a journalist friend of mine is fond of saying, "the best quotes happen when the tape stops rolling." When we leave the scripted interview and allow someone to lead the interview themselves, often things which we couldn't predict or identify are revealed — and, in some cases, new topic areas can be added to the instrument as a result. Of course it's important to return to the script to hit all of the main questions we have, but it is equally useful and important to allow an interview subject to lead a little, to give them enough time and latitude to wander into areas which are not on the map.

Beautiful Monsters: Why on earth does this matter?

It used to be that everybody talked about the weather, but nobody did anything about it. Not anymore. Through the magic of technology, I am empowered to make better decisions about where not to breathe. That’s because the good people at WunderMap have devised a smoke map. For a few days there, the smoke from local wildfires were absorbed by our (formerly) infinitely capacious atmosphere. So I didn’t think I’d need the smoke map. But then temperatures hit new epochal records, humidity took a dive, and the wind began fanning the flames again.

Should our misfortunes expand to include plagues of frogs, boils, and gnats, I know WunderMap will have my back.

In other news last week, the U.S. continued to emit vivid plumes of interactive graphics displaying our industrial might, which nobody can deny … it’s just that my emissions are necessary, while yours are not. World leaders at the G8 Summit in Japan, meanwhile, decided to postpone serious action on climate change for another few decades. Tomorrow’s always the best day to begin a diet.

Why on earth should such things matter to interaction designers? Put another way, why does earth matter to interaction designers?

Continue reading...

Welcome to Michael Voege, Director of Industrial Design!

Some of the most exciting and challenging products we’ve designed here at Cooper have involved a physical component. We admit it, we’re greedy: we want to do more fun projects like that. So without further ado, we’re excited to announce that Michael Voege has joined Cooper as the Director of Industrial Design. We fundamentally believe that interaction, industrial and visual design must be closely coordinated to create user experiences that delight and engage. Bringing in Michael, with his experience, creativity and crazy design mojo, will help us interweave these disciplines even more tightly as we grow our own in-house industrial design department.

Michael comes to Cooper from frog design, where he was an Associate Creative Director. During his 10+ year career he has worked on consumer products, software user interfaces, automotive interiors, furniture, and medical and industrial equipment, among others. Michael was educated at ArtCenter College of Design in Switzerland, and in Pasadena where he studied Transportation and Industrial Design.

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...