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.

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.

Last year Dave Cronin wrote this post about whimsical interaction design. In that spirit, I wanted to share our work on the litl webbook.

In my mind there are a couple approaches to incorporating whimsy into interaction design: To bring a little dash of entertainment to a capability that already has to be there (e.g., jiggling icons on the iPhone), or to add something for the pure joy of it (e.g., Easter eggs in software).

In this first example, the whimsical element brings a bit of delight to a moment that could have been upsetting to users.

The Retro Outro

The litl can take the form of a traditional laptop, or be flipped into a easel configuration. This flexibility creates potential confusion because the hinge that enables the flipping has two buttons on opposite ends: One is the power button, the other is a menu/select button. When the litl is flipped between configurations, the relative position of the buttons swap left to right, making it easy to imagine pressing the power button when you intend to press the menu button. So we explored some solutions — a confirmation message, or maybe the double-press required by projectors. Both of these felt too "computer-y" for the litl experience.

When the power button is pressed, the video on the screen begins to compress vertically. If you keep holding the button, the video compresses down to a single dot and the litl turns off, just like older CRT TVs — hence, "retro." If you release the button before the video compresses completely, the video springs back to full screen and the litl stays on. One of the keys to making this work is it's responsiveness. (The litl development team did a great job of tuning the feel.)

The Giggle

The other whimsical detail we added just for the fun if it. If you press both of the buttons on the hinge at the same time, the litl will giggle, as though you've tickled it. It's just a fun element that further emphasizes that the litl is different that other computers and has a personality all it's own.

It can be hard to work whimsy into enterprise applications and tools that people use all day. That extra little bit of entertainment usually comes at the cost of speed and efficiency. But for consumer products it may be worth considering some whimsical solutions to sticky design problems, or just adding some fun surprises. It's a great way to create an atmosphere and experience that becomes a deeper kind of branding.

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.

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.

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.