So you’re thinking about being a designer? If I could tell you only *one thing* about going into the field, my advice would be ________.

I thought of a lot of different answers, many of them quite cynical. I imagine my time watching the industry’s discussions and throwing peanuts at it from OK/Cancel makes me think that way a lot. For example, I considered answering with, “don’t use convoluted phrases just to make yourself sound smarter.” In the end, I erred on the side of practicality:

The other answers have been collected on the School of Visual Arts blog.

Stephen Anderson clearly has similar philosophies and this year at the IA Summit, he discusses some of the inspiration he’s gathered from games, cars, consoles, phones and more.

Continuing the Inspiration

Before I go into the notes I took, I’d first like to mention that the first think I thought when Stephen was presenting was, “he has the same hobby as I do.” I knew that we needed to share links with each other but even better would be for us to share links with everyone. So I created a Twitter account called Inspiring, where Stephen, Coley, Patrick Haney (who runs a web inspiration Flickr set) and I will post inspiring, innovative or beautiful artifacts. Do subscribe and check it out.

The Presentation

Stephen begins by discussing some of the objects he’s tried to convince his family he needs: the iPhone, the Nintendo Wii and the Toyota Prius. He’s succeeded in getting the iPhone thus far but he’s hoping his rationale of needing these items for research and inspiration will eventually fly (I also employ similar tactics when discussing World of Warcraft, but I actually do believe it’s one of the most immersive experiences today and as such, deserves to be studied – or so I shall claim).

Taking the iPhone as an example, Stephen asks how the iPhone has impacted web design. This question is interesting because the iPhone is undeniably innovative for mobile phone interfaces, but has it inspired changes in other medium? As it so happens, the iPhone has inspired such changes as the on/off controls in jQuery’s checkbox as well as interfaces such as Muxtape or Grooveshark which have iPhone-like interfaces for non-iPhone usage.

Stop Default Thinking

In an example which hit quite close to home, he asked where people would get inspiration from for redesigning an airline site. As one who has been involved with both British Airways and Cathay Pacific, I was feeling rather sheepish when I recognized that I fell into the trap of only looking at competitor sites for ideas and reference. As a contrast to the ubiquitous interfaces that adorn all the travel sites, he showed Wundrbar, a natural language flight search engine.

To further prove his point, he quoted a Forrester Research paper:

… look beyond immediate industry rivals for innovative design ideas. Why? Frankly, your competitors may be getting it wrong. But, more importantly, your customers visit Web sites outside of your industry, which their raises expectations about the types of experiences the Web can provide, expectations that remain intact when they come to your site.

With that, Stephen demands that we should all stop “default thinking” in a number of ways. First, to stop looking only within our industry or even medium and second, to think beyond what we traditionally think is our toolbox of drop downs, radio buttons, etc.

Anything is Possible

Just to get things straightened out, Stephen discusses how there are a great deal of hardware and software changes that have made many exciting things possible. Technologies such as touch screens, gesture interfaces, lightweight desktop applications, etc. are enabling much more. Further, Stephen claims that natural behaviours are better than learned behaviours, unless the learned behaviour greatly increases satisfaction or performance (e.g., QuickSilver).

He uses a Willy Wonka quote to illustrate the ultimate point, but I’ll paraphrase with a quote from Jonathan Trevor, the engineer behind the Pipes editor, when we were working on the project:

It isn’t, “can it be done?”. Anything is possible. It’s a question of, “how hard is it?”

Hiding Data Until It’s Needed

Although the examples provided by Stephen are set in the context of his projects, I’ll simply detail some of the sources he provide as inspiration and how they might be applied. These examples discuss how one can rein in a large amount of data and navigation to a manageable interface.

The XO Laptop utilizes the Sugar Interface which contains a frame with contextual actions. This frame, however, does not appear until the cursor is close to the edge of the screen and thus, stays nicely hidden until needed. Stephen applies this to the web by hiding information until needed.

The Wii, Club Penguin, iPhone and Quicksilver all employ what is called a “Hub & Spoke” model of navigation. Rather than illustrating the entire navigation, or going with traditional primary/secondary navigation, these interfaces have a hub which you return to before navigating to another top level action (e.g., the home buttons on the Wii and iPhone). This model can be easily applied to websites in a similar fashion to reduce clutter.

Games and advanced desktop tool such as Adobe products have often used panes and customizable interfaces to deal with a range of user ability. This level of customization and the breaking apart of panes through lightweight desktop clients or layers on top of a page can achieve similar effects.

Other interfaces discussed with regards to hiding data include Songza, which uses a radial menu, Picnik, which hides its navigation when in the context of a tool and the iPhone’s Mobile Safari tab structure which doesn’t display the tabs at al times and sacrifices clicks for screen real estate.

Communicating Content and Context

To illustrate some examples of visual interfaces that convey content and context in a clear and concise manner, Stephen showed Aaron Jasinski’s portfolio, Disco.app’s simplistic CD burning tool, Get Satisfaction’s clear indicators of mood through smileys, and Microsoft Popfly’s phyiscal representation of data objects as boxes.

Finally, Stephen wrapped up with a number of very visually powerful interfaces including Piclens (which I recommend and use), Jing, Schematic’s portfolio and the tag cloud from CookThink.

He begins with a discussion on how we currently optimize for sites – by studying their hierarchy and how pages relate to each other within the site. However, the site does not live on its own but rather as a node within an unstructured web. For most sites, the majority of their traffic is generated from external sources, not from within its hierarchy. Therefore, it’s worthwhile to spend much more time and effort optimizing designs for those who visit from outside.

In a site hierarchy, there is a home, a page may have parents, laterals and children. In contrast, web ecosystems have components to them roughly broken down as communication, display surfaces, content creators, content aggregators, and search (the categories are credited to Tom Chi, my colleague on OK/Cancel).

Communication refers to medium such as instant messaging or email. Links and recommendations which come from personal sources fall under this category. The quality of these links are generally very high and people are likely to click on them as they are received directly from a trusted source.

Display surfaces are places where one may show their support of a website or product. Common examples include MySpace sidebars, or the recent Yahoo! Mash. Facebook’s modules on a user’s profile page can also represent a display surface.

Content creators are where people are producing content which generally act as recommendations or information for their readers and subscribers. The most prevalent example of content creators are bloggers.

Content aggregators represent the places where content creator feeds are collected for quick browsing, accessing and updating. My Yahoo!, iGoogle, Netvibes and feed readers are all examples of these.

The important thing to note, of course, is that all of these lead to the same place – i.e., your content. In order to design with these entry points in mind, we need to design to inform Context, illustrate Related material and of course, get the readers to the Content they were attempting to access

Content

Although seemingly obvious, it’s surprising how few of us follow the core advice Luke gives: make the content your focus.

He illustrates with an example from an old design of the Chicago Tribune, where an article on the Olympics occupied 24% of the screen real estate, leaving 76% to overhead such as navigation, advertising, etc. Other examples he gave included Yahoo! Answers, which had their content occupying 5% of screen real estate prior to their redesign and Buyit.com which has horrendous visual hierarchy.

Users have an expectation when they access the page, based on where they arrived from. Thus, making sure they can see the relevant content as easily as possible is important. They have certain expectations which must be met through easily scannable content – beginning with keeping the title tag of the site the same as the link and the title on the page.

He uses CNN/entertainment as an example of great hierarchy and how they also use bullet summaries to increase reader comprehension and deliver on promises quickly.

Related

Luke then shares the less is more philosophy and reminds us that we don’t have to show everything. “Spare us your site map,” he says as he shows a site that has their entire site as a side navigation.

There are, however, often related pieces of content that tie in with the content being viewed and these should be revealed and embedded in a clearly visible fashion

The ever popular BBC.com is used as an example. On just about any given story, they right side features very relevant categories and content. Further, for some stories, the left navigation changes. Rather than showing all of BBC’s categories, for example, a story on European Football shows European Football news and teams as the core navigation on the left.

He then references the ever popular and relevant book, The Paradox of Choice by Barry Shwartz, reminding us that fewer choices tend to lead to more likelihood of action than more. Specifically, people who had 6 choices were more likely to act whilst those who had 10 tended to not choose at all. Of course, I couldn’t help but recall our own references to choice overload.

In terms of placement of related information, he recommends the left navigation side as the right tends to be viewed as advertisements. As one might suspect, readers do not click on links they don’t see so visibility is important.

Of course, all of this is irrelevant if your content wasn’t relevant in the first place. But if you make good on your content, then related calls to action are welcome.

Context

When the reader accesses a site through external means, they lack any sort of context. It’s important to indicate to readers:

• Who’s site is this?
• What’s going on?
• Is this a site I can trust?

Ensure that this information is evident and the design of the page looks professional or appropriate for your purposes in order to build trust. Luke mentions the Stanford Web Credibility research which indicated more professionally designed sites were viewed as more trustworthy.

Finally, Luke mentions how on his own site, if a reader arrived through searching for a certain term, he uses that term to provide additional context. For example, he will pull up other related articles on his site based on the search term. He will also highlight the words which match the search term. Similarly, Luke illustrates how Yahoo! Answers bolds the search terms used.

Luke’s slides are available as a 4MB PDF and he has his own summary as well as links to other writeups of his presentation on is blog.