cooper

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

What happened to the iTunes 10 window controls?

iTunes has a long history of violating the Apple Human Interface Guidelines. In past releases, iTunes designers have removed the title bar and borrowed the brushed aluminum look from Apple hardware.

iTunes 10, released yesterday, carries on the tradition of divergence. This time, the designers have toyed with the window controls. As you can see below, the close, minimize and zoom buttons have shifted from their conventional horizontal arrangement to a vertical arrangement.

itunes_comparison.jpg

I can imagine stylistic and practical explanations for doing this. The new layout has a better visual feel to it, and it uses the space more efficiently. Still, it's quite a bold departure from such a fundamental aspect of the Aqua interface standard. (The new volume control also violates the standards, but not quite so shockingly.)

Are we glimpsing a brave new world of window controls? What do you think?

What do you think? Join the conversation in Comments

Supporting context switching on the iPhone

Supporting people's usage contexts has always been an important component to good interaction design. With mobile devices, the diversity of these contexts has gone up, and thankfully many applications have become more responsive to changes in context. It turns out though, that all of this responsiveness has created a big gaping need for better capabilities for easily returning to previous contexts. I think I've got an idea that would help.

Imagine Carl, an iPhone owner. As someone who is directionally challenged he relies on his phone for directions to almost anywhere. In the morning he accepts an invite to dinner across the bay and uses his phone to map the route and figure out how much travel time to plan. During lunch he opens the Map application to find a local electronics store. If he wants to use the route to dinner this evening has two options. Abandon the route, do his search and later reenter the addresses for directions, or save the origin and destination addresses as bookmarks to use later.

He has also figured out that for short trips he can just take a screen shot, so long as the directions fit on one page. This allows him to save many routes that he uses on a regular basis, though he hates that he can't zoom in or scroll around, and they don't show live traffic. He wishes that screenshots would actually be more like saved states of an application, that when he opened them would allow him to interact in the usual way.

He'd like to save states for more than just maps. He gets travel itineraries emails that he needs to reference repeatedly over a week long trip. He does the screenshot trick when he can, but sometimes they are long and he can't screencap-scroll. If he could save the email screen state he could just return to that important email without scrolling or searching though his inbox.

He gets mobile boarding passes as links that open in Safari. The page tries to refresh when he opens the link from his email. If he could just save the screen state in Safari it wouldn't need to refresh the page, and he could scroll down to locate his seat number.

savedStates.pngWith the recent introduction of multitasking on the iPhone, there is the possibility of saving an app in an open state. Why not extend this functionality to allow for saving multiple states of an open app? Apple could provide an application which works similar to how the photo app works with screenshots. But instead of static images of the screen the application would allow Carl to open the saved state of the application. Instead of a static screen, the information could be manipulated as usual (scrolling, zooming, turing on and off options).

Simple things like scrolling (which is not available on screen shots) would make it easy to save and retrieve mobile boarding passes. Saved states of the map application would maintain the route and allow for live traffic updates. It would be easy to retrive a specific email, or return to a web page without refreshing the data. For Carl the best part would be that he can save many different states, so he can save every route, and return to many different emails.

The application could replace the screenshot function. When Carl wanted to grab a screen state he would press the "Home" button at the same time as the "Sleep" button. Visual and auditory feedback would confirm the action was successful. To return to the saved state Carl would simply open the Saved States application. He is greeted with a simple interface; icons of the saved state of the screen are displayed in a time sorted matrix across the screen, he can scroll down, and view older state captures. Since he captured the states he has some visual memory of the screen and icon helps him distinguish between different captures. The sorting by time serves as a secondary way for him identify captured states. Once the desired state is located Carl touches the icon to relaunch the application into the saved state. Once open he can manipulate the application like normal.

With Saved States Carl can quickly capture a screen he will want to return to. When he revisits the saved screen state he has all the functionality he expects, but starts off with the application loaded with the data he wants, rather than starting out from the beginning every time.

What do you think? Join the conversation in Comments

Creating immersive experiences with diegetic interfaces

I like to think of Interaction Design in its purest form as being about shaping the perception of an environment of any kind. Yes, today the discipline is so closely tied to visual displays and software that it almost seems to revolve around that medium alone, but that’s only because as of now, that’s pretty much the only part of our environment over which we have complete control.

The one field that has come closest to overcoming this limitation is the video game industry whose 3D games are the most vivid and complete alternate realities technology has been able to achieve. Game designers have control over more aspects of an environment, albeit a virtual one, than anyone else.

Lately I’ve been thinking a lot about this idea that interfaces can be more closely integrated with the environment in which they operate. I’d like to share some of what I’ve learned from the universe of video games and how it might be applicable to other kinds of designed experiences.

In Designing for the Digital Age, Kim Goodwin criticizes the term “Experience design” as being too presumptuous because we don’t really have the power to determine exactly what kind of experience each person with their own beliefs and perceptions has. Even when we work across an entire event from start (e.g. booking a flight) to finish (arriving at the door), there are still countless factors outside our control that can significantly impact how a person will experience it.

Video game designers on the other hand can orchestrate a precise scenario since almost every detail in their virtual world is for them to determine. They can arrange exactly what kind of person sits next to you on a flight no matter who you are or how many times you take that flight.

That isn’t to say that videogames don't have their limitations. Of course, it isn’t completely true that game designers can determine who sits next to you. They can only determine who your avatar sits next to. The most significant weakness of videogames is the inability to truly inhabit a designed environment or narrative. As much control as we may have over a virtual world, as long as we are confined to experiencing it through television screens and speakers, it won’t be anywhere near comparable to our real world.

Fortunately, there’s a growing effort to address this lack of immersion.

A key area of the problem lies in how we’re presented and interact with complex information diegetically, that is, interfaces that actually exist within the game world itself.

The 4 spaces in which information is presented in a virtual environment

Before continuing, it helps to be familiar with some basic concepts and terminology around diegesis in computer graphics, the different spaces of representation between the actual player and their avatar. The diagram above illustrates the four main types of information representation in games.

duke-nukem-3D.png

Non-diegetic representations remain the most common type of interface in games. In first person shooters, arguably the most immersive type of game since we usually see the scenery through our avatar’s view, the head-up display has remained an expected element since Wolfenstein 3D first created the genre.

A social network too far

No one can argue that social media hasn't had a significant impact on modern life. My current favorite example is the Zooniverse series of “citizen science projects” that bring people together to apply human brains to tasks in science that computers aren’t very good at yet, like identifying types of galaxies in Hubble images or craters on the moon. Supported and produced by the Citizen Science Alliance, this is social media at its very finest: Bringing communities of people together for the common good of humanity. The whole thing, I gotta say, leaves me a little verklempt.

On the other end of the ultility spectrum we have Cookie Bonus Solitaire, a little nothing of an iPhone solitaire game that cleverly bakes in cheating. It also incorporates robust social features like profiles and chat, achievements and leader boards, the whole shebang. I used to play Cookie Bonus Solitaire daily on my commute, but got irritated when there were constant updates to the social features of the program. Hello? Solitaire is not a social game, that’s why they call it “solitaire.” I finally deleted the game in disgust when it got to be too much, chalking it up to me just being some old fuddy-duddy who just doesn’t get it.

But, this is where I draw the line.

ihome social sleeping

This is only acceptable in a home-care situation where people can keep track of the health and well-being of infirm individuals. Beyond that? No. Just no. Sleeping is not a social activity, and I say that as a married woman who sleeps alone only on business trips. What’s next? Social colonoscopy?

How did this happen? I can see it now: a conference room at SDI Technologies, a red faced manager pounding the table and demanding innovation. “How can we make this alarm clock more hip? What is it that all the kids are into these days? Social networking, right? How can we incorporate that?”

This, my friend, is where a brave soul should have spoken up. Not everything is social.

What do you think? Join the conversation in Comments

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.

Design research & World Cup fever

During the World Cup, a few Cooper teams found themselves in Europe. The Europeans take this event pretty seriously, and many of us were swept up in the fever of our host country. In addition to being a blast, World Cup fandom reminded me of what I enjoy about design research -- making those emotional connections that allow us to achieve a deeper understanding of what motivates people.

It all started when my teammate, Noah, and I were checking into a Zurich hotel. On a nearby TV, we saw that the Swiss national team began their World Cup match against Spain. We knew enough about the World Cup to know that the Spanish were favorites to win it all, having enough talent on their bench to compete with the starting teams of other nations. We walked across the lobby and joined the Swiss supporters in the hotel lounge.

Standing next to me were a small group of Swiss wearing national team jerseys. As the match began, their eagerness seemed foolish amongst a sea of conservative business suits -- not surprisingly, the suits weren't eager to join in their chants of "Hop Schweiz!" But as the game developed, the crowd began to gain a little confidence, and the sense of community engagement grew steadily. For Noah and I, it was hard not to get caught up in all that hopeful emotion. At halftime, I realized that I genuinely wanted Switzerland to win. Even though I appreciated the beauty of the Spanish game, I wanted to share the experience of a Swiss win against Spain. I was, temporarily, but most assuredly, a fan of the Swiss football team.

swiss_1.png

To everyone's surprise, the Swiss scored a goal in the 52nd minute and then gamely hung on to win the match. Hysteria in the lobby! The conservative suits chanted with the jersey clad supporters. Car horns honked. It felt as if the whole city had come alive and for that moment were able to share in what seemed like a truly cultural and communal experience.

GemanyComp_2.png
Noah and I later became English fans in London, and German fans in Frankfurt.

Both those cities also came alive with the communal energy of expectation and hope. Even though neither England or Germany won their matches, the excitement was just as irresistible as it was in Zurich when the Swiss side beat Spain.

dave_2.png
Dave also discovered that it was hard to resist getting swept up by the locals. (Unfortunately for the French, it was all downhill from there, as far as their World Cup prospects were concerned).

It may sound like a stretch, but we all found that fandom requires skills that aren't totally dissimilar to design research. To be a good fan, you've got to have an empathetic disposition, and that the process of becoming a fan is remarkably similar to the process we engage for every user research project: Observation, participation, curiosity and empathy are essential tools for making sense of a complex user system -- or the complex universe of football.

What do you think? Join the conversation in Comments

Put your best interface foward

I’ve traveled through many airports recently, so I’ve had lots of time to consider airport advertising. Most airport ads are obscure and inscrutable, and software ads in particular are often filled with buzzwords and jargon. Without the generic distinctions of logos, slogans, and color palettes, the majority would be interchangeable.

When I was walking in Boston’s Logan Airport, this is just one of the many lackluster ads I saw:

How will this ad create new business? For those who don’t know what “ERP” is, the ad is impenetrable. For those who do know, the ad doesn’t give them any new information and isn't particularly memorable. Perhaps the sole function is to promote the brand? If that’s all, I would say that this ad is a squandered opportunity.

Contrast that ad with this one that was a few steps away:

FactSet creates software for financial professionals, and it has chosen to put its product front and center in its campaign. As an interaction designer, I’m biased, of course, but I find this ad much more accessible. Anyone walking past can see the product, and can understand (at the very least) that FactSet delivers a dizzying amount of information. The UI displays enough detail that people in the know will recognize its differentiating qualities. As I was standing near it, quite a few people stopped to take a second look. No one did for the Big ERP ad above.

At Cooper, we know how much work goes into creating a sophisticated information platform like the one FactSet has displayed, so we’d like to extend some appreciation to FactSet for taking pride in their UI, and for putting it front and center. If you’ve got something that you think is vivid, powerful, or differentiating, show it off. If you don’t, hire some great designers so you can.

What do you think? Join the conversation in Comments

Combating availability bias

Understanding how the brain works is important in interaction design not only to be able to craft experiences that support the way people think, but also to avoid common biases in our own brains as we make design decisions. One bias that sneaks into design problems all the time is called the “availability heuristic”, or the tendency to judge how important or common something is based on how easy it is for us to think of an example. For example, if you were to ask me how the baby boomers react to technology, the first example that jumps to my mind is my mother who happens to be a complete technophile and Apple fangrrl. Because of the ease with which that example comes to mind, I am at risk of grossly overestimating technical interest and ability amongst the baby boomer population.

If you’re involved in the design of products, you run into this problem all the time. Stakeholders use their own most easily-retrieved examples to compare against, whether it’s the CEO who is influenced by the pundit he read that morning, or the product manager who knows that one guy who is just like your target market, or the designer who is really designing for himself -- the self being the extreme “available example.”

Availability biases leads to poor design decisions because they are based on single, potentially skewed, examples; they also result in thrash because each individual involved in the design has his or her own reference example, making consensus difficult.

Effective research is only the first step toward avoiding this problem. Properly conducted ethnographic research will provide an understanding of the needs, goals, and behaviors of your target market, but it won’t solve the problem of availability bias on its own. It is too easy for designers and stakeholders to be influenced by, say, the most recent interview conducted, or the most memorable one.

Fortunately, we have a well-honed tool to elegantly overcome this problem: the persona. A well-crafted, research-based persona is an archetype that smooths out the idiosyncrasies of real individual people while retaining the patterns of needs and behaviors in the target market. At the same time, a persona retains enough human detail to feel like a real person. With practice and dedication, the persona becomes the first example that comes to mind. You still suffer from availability bias, but the bias is in favor of reality.

Incidentally, I got to thinking about the availability bias when Chris Noessel pointed me to this video on YouTube. Be forewarned: the tune is catchy and likely to cause a nasty case of earworm . Bradley Wray, FTW.

What tools do you use to overcome cognitive biases in your work?

What do you think? Join the conversation in Comments

Celebrating the World Cup Visualizations

We really enjoyed watching the World Cup over lunch here in the Cooper office. The games sparked many conversations about soccer, beloved sporting traditions, and why FIFA is so bloody minded about goal-line technology use (okay, maybe that last one was just from a bitter England fan).

It's also been a time to admire the many new and unusual visualizations used for the tournament brackets, game-by-game breakdowns, and statistical replays. For the fans that wake up in the coming weeks with an empty feeling, perhaps this library of visualizations will provide a glimmer of comfort and distraction until the next tournament. (That is unless you're an England fan.) There are many visualizations to look at here but if I could suggest one to look at closely it would be the Guardian twitter replay. The best of the bunch.

And of course, congratulations to Spain on winning the World Cup!

Game Schedules & Results

The classic visualization for the World Cup is the table breakdown and brackets. For any hardcore fan this is the most exciting visualization where supporters can see their team's road to the final and victory.

MARCA World Cup calendar
One stadium visualization received plenty of attention for it's beautiful form and elegant interaction but, for me, it failed to illustrate the future match-ups. I never could understand the rationale of the order of the teams either.
MARCA World Cup calendar

World Cup radial bracket poster
While just a poster, this visualization gives a very quick glimpse into potential future opponents. It also is beautifully designed with bright colors and typography. Sadly, it isn't interactive.
World Cup radial bracket poster

Introducing our new web site !!!

After years of mumbling excuses about the cobbler's children and how busy we've been, we're thrilled to announce the launch of our new site. It's taken almost a year from our initial design explorations, but we're really happy with where we've ended up.

While its been a very collaborative effort, it's also been refreshing to design without the usual cast of stakeholders. (In order to overcome the well-known nightmare that is a firm designing its own site, we almost completely eliminated creative reviews by anyone not directly involved in the project.)

We think the new site much better reflects our design sensibilities and the direction of the firm. It's still a bit of a work-in-progress. (For one, we plan on adding social bookmarking features in the Journal when we have a moment.) But we're interested to hear your feedback—let us know what you think in the comments section.

Credits

Design by Nick Myers and Dave Cronin, with help from Jayson McCaulliff, Doug LeMoine, Imon Deshmukh, Martina Maleike, and Daniel Kuo. Copy by Dave and Doug, with editorial assistance from Steve Calde and Suzy Thompson. Code by the amazing Elisha Cook and Andrew Hoag at blackdrumm, and photography by the very talented Emily Nathan.

What do you think? Join the conversation in Comments

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

Categories

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