Presentation from QCon showcasing our work for Barclays Global Investors

Here's a video featuring Eoin Woods, a software architect at Barclays Global Investors (BGI), talking about Apex, the new equities portfolio management system being built for the company's well known active management group:

Cooper worked with closely with BGI users and developers for almost 2 years going from from concept to detailed design and well into construction.

Much of the talk is focused on the technical architecture of the system, but you get the first glimpse of the user interface at 23 minutes in. Around the hour mark he takes questions, the first of which is about interaction design.

We're really excited about how it turned out, and a lot of credit and congratulations are due to the incredibly smart and talented folks at BGI.

What do you think? Join the conversation in Comments

congratulations to litl

We're excited to announce the release of the litl, a simple, and quite frankly, very cool, computer for the home.

We're proud to say that we helped design the litl. We worked for a year alongside the amazing folks at litl, as well as a number of other partners including fuseproject, Fort Franklin and Pentagram to make the vision a reality.

The litl can be used in both laptop and easel modes (to support lean-forward and lean-back interactions), and does away with a lot of the unseemly artifacts of more traditional desktop idioms like folders and menus. It's closely integrated with the social Web and designed around family life.

We'll get a case study about our efforts up on our site as soon as we can. In the interim, check out the litl site for more about the computer and the company.

What do you think? Join the conversation in Comments

I have seen the shadow of the moon

I'm excited. In the first week of my summer internship at Cooper, I couldn't wait to get my hands on a test project for a PDA system. And when starting on my first team project for a new piece of software, my Cooper mentor, Nick Myers, had to warn others that he was about "to let the lion out of his cage."

To a young graphic designer, the world of screen-based, interactive work is mouth-watering. The relatively new, ever-expanding and extremely relevant world of web, touch screen and software design allows for seemingly limitless visual exploration. Like early nautical explorers (viz., the title of this post), graphic designers must confront various barriers as they reckon with the unknown.

Continue reading...

Video of Kim Goodwin speaking about how to integrate interaction, visual and industrial design at IxDA NYC

Last night, our own Kim Goodwin presented her talk "Designing a Unified Experience" at the IxDA NYC, generously hosted by our friends at LiquidNet.

(Click the button on the bottom right of the "screen" for a fullscreen view.)

About the talk

Interaction design, visual design, and industrial design are distinct disciplines for good reason: Each excels in different ways. Interaction designers must be good at imagining structure and flow, which requires strong analytical skills and a high degree of rigor, especially for complex systems. Visual designers and industrial designers are masters of visual and physical usability but are also masters of emotion: They know how to evoke caution, attract attention, and instill desire for a product at first glance. Users have just one experience of a product, though. All three aspects of the design must work in concert, or the product will fail to satisfy. Integration of the three disciplines is a central theme of Kim’s new book, Designing for the Digital Age.

What do you think? Join the conversation in Comments

The movement is the massage

Cooper hosted an IxDA-SF event last summer in which Punchcut's Christian Robertson discussed motion design, and the ways in which it can provide meaning in user interfaces. His presentation was specific to his experience designing for mobile devices, but many of his insights apply to a much broader perspective and, since then, they've remained in the back of my head.

Prior to joining Cooper as a visual designer, I was a motion graphics designer. For a long time, these two experiences were disconnected. I took interaction design classes and motion design classes in school, but they were separate lines of thought. One was rational; the other, evocative.

Recently, I worked on a consumer product in which the interface movements and animations were the foundations of the experience. The real lesson for me in this process was that thinking about, and designing, what happens between screen states. Even when there isn't a mandate for you to consider motion in your product, incorporating it can yield a design that is more complete, more understandable, and more meaningful.

This was a huge duh-moment for me. Looking at a typical design framework, we see discrete places (or states), snapshots in time and space. We architect this way because it is efficient and breaks the flow down into digestible parts. But when we ignore the path between A and B, we risk disorienting and confusing the user.

Scrolling a menu with no transition.

Scrolling a menu, transition included.

The example Christian used in his presentation was the subway: You get on at one place, and you are essentially teleported to another place. You arrive without really knowing how you got there.

Humans look for, and respond to, movement. We evolved to spot predators in our periphery and track the movement of prey. This instinctual attention is what motion design can leverage in order to make a behavior feel more "intuitive." When users can see how the screen gets from state A to B, we (as designers) can worry less about them getting lost. When designers think about how the screen gets from state A to B, we can understand the system of behavior at a more detailed level. The movement becomes the meaning.

What do you think? Join the conversation in Comments

A unified approach to visual and interaction design

During my seven years as a visual designer at Cooper, I’ve learned that designing for complex digital products and services requires input from a number of unique perspectives to be truly effective. Furthermore, each of those perspectives must be effectively integrated throughout the lifecycle of the design process to achieve results that are consistently and predictably usable, useful and desirable.

In the course of managing, consulting and teaching, I have not only had the opportunity to define and discuss design process with my colleagues here at Cooper, but with countless practicing designers from organizations all over the world as well. Unfortunately, my observation has been that even when all of the right people are involved, more often than not, the various design disciplines opt to compartmentalize the problem. In other words, they divide the project into an interaction design problem, a visual design problem, and an industrial design problem. Each of these problems is then tackled separately, and the resulting individual design solutions get bolted together at the end. It’s a Tower of Babel situation, where huge opportunities are lost because the team fails to work together to come up with an innovative product solution and to employ a single, unified design language.

A fractured process makes for a fractured user experience

In practice, people view their experience with a product in a unified way. For example, when a user interacts with a cell phone, she doesn’t experience the phone’s behavior separately from the visual and tactile presentation of that behavior on screen and through the physical form factor. Why, then, don’t product teams consider these aspects of the experience in a unified way when designing solutions?

Of course, we know that many digital products and services represent extraordinarily complex, large-scale design challenges. A significant degree of rigor and a rational approach to methodology is required to bring together the diverse perspectives of the different design disciplines in a way that results in optimal creative abrasion, rather than destructive friction that threatens to bring the entire process to a grinding halt(1).To this end, let me share with you a few of the insights that we’ve gleaned from practicing a truly convergent approach to design.

(I should note that in an attempt to keep the length under control, I've focused this article on the convergence of interaction and visual design for products with defined hardware, like PC's or handsets. We're looking forward to sharing our experiences with integrating these two disciplines with industrial design in a future article.)

Continue reading...

Finding inspiration from photos via Flickr groups

I often find design inspiration from photographs. One of my favorite sources for this is Flickr groups. Lately, I’ve been really distracted by the list of my groups on the newly designed homepage. Here are some of the best that I find directly relevant to the work we do.

Visual language and interface inspiration

Possibly my favorite group of the entire collection is Inspiration Boards. This set is a compilation of people’s stuff. It might be postcards, magazine cutouts, interior design samples, shells, or a mish-mash of other objects. I find this group particularly interesting because it approaches design the same way we approach early explorations in visual interface design. When designing a product we’ll do research, define the visual strategy, and then design visual language studies that are an emotional, immediate representation of the visual strategy. The studies are arranged similar to inspiration boards in a way that separates them from any specific behavior so that our design team and our project stakeholders can have a more focused conversation about the visual design without being distracted by the interaction design.

Designing affordances using reference material

The dials, knobs, buttons etc… and Push Buttons groups are great for exploring user interface control languages. These groups cover examples from everyday life that are sometimes new, sometimes old and worn. Designing realistic controls can be difficult so it’s helpful to reference photographic material when designing your own creations. Texture is a similar group of photos with… you guessed it… texture! Of course, this shouldn’t be a sole substitute for getting out there with your own camera.

Continue reading...

Travel and the experience of being a beginner

On a recent vacation to Europe I promised myself that I’d put my new camera to good use by documenting as many examples of typefaces as possible. With only a week of travel time I quickly realized that I wasn’t going to accumulate the desired collection of new and modern trends that I’d hoped for given that I was dedicating my travel to the olde parts of York, London and Paris.

I captured some old and new typefaces but came to a more profound realization that traveling is like being a beginning user. As designers, we try to put ourselves into the minds of beginners through observation in research but this can be only partly successful. Research doesn’t beat the real thing and there’s no better way to do that than throwing yourself into another country. I should disclaim that I spent 18 years of my childhood in England so it’s not a completely new experience, and I’ve been to France many times also. Being away for so long is a good way to completely forget old experiences and see new design innovations for the first time.

The photos

Continue reading...

Who says white space doesn't count? Fight for pixel rights!

Recently, Ben Gomes at Google shared some experimental testing they had been performing related to their search results page. The first experiment showed two pages each with a different presentation.

I'm ashamed to admit that I couldn't tell the difference between the pages until I read the entire article. Can you tell?

Continue reading...

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.

Continue reading...

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

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.

What do you think? Join the conversation in Comments

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.

What do you think? Join the conversation in Comments

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?

What do you think? Join the conversation in Comments

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