Balls of Fury
A movie that has ping pong in the style of Mortal Kombat and stars Christopher Walken. It’s as good - and bad - as you expect. [imdb link]
IA Summit: Inspiration From the Edge
I’ve often believed that the best designers don’t get their ideas and inspiration from the place they work. As a designer that works in the social web space, I do look at a large number of new sites that come through the pipeline for inspiration. However, I also am a big advocate of experimenting with things that are seemingly unrelated and trying to connect those experiences to my work on the web.
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.
IA Summit: Content Page Design Best Practices
Luke Wroblewski of Functioning Form and Yahoo! describes a framework for designing content on a site.
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 messsaging 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 raeders 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 sitemap,” 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 fwer 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 rader 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.
History of Video Games 1972-2007
When we visited my parents in February, it occurred to my dad that both my brother Jamie and I now work in the video game industry. Jamie started his own company, Klei Entertainment, whilst I joined an early stage startup for gamers called Raptr. My dad said,
I let you guys play too many video games when you were kids.
Well it turns out that may have been true. Of the 114 games listed in this video (via DocPop), I’ve played 83. Here are the 31 that I somehow skipped. As a side note, the biggest omission, Civilization, was very deliberate.
- Adventure 1980
- Pitfall 1981
- Final Fantasy 1987
- Maniac Mansion 1987
- Mega Man 1987
- Commander Keen 1989
- Civilization 1991
- Micro Machines 1991
- Sensible Soccer 1992
- Dune II 1992
- Virtua Racing 1992
- Starfox 1992
- Myst 1993
- The Settlers 1994
- Earthworm Jim 1994
- Donkey Kong Country 1994
- Chorono Trigger 1995
- Rayman 1995
- NiGHTS Into Dreams 1996
- Pokemon Gold/Silver 1999
- Ratchet and Clanck 2002
- Call of Duty 2003
- Wind Walker 2003
- Warioware 2003
- Rome: Total War 2003
- Final Fantasy XII 2006
- FIFA Soccer ‘07 06
- Sam and Max Episodes 1-6 2006
- Elder Scrolls: Oblivion 2006
- Viva Pinata 2006
- Motorstorm 2007
Juno
The movie can be summed up with one word: sweet. You can’t really help but go “aww” at the end of it. I don’t know how Michael Cera feels about it, but the only adjective that really describes him in Juno is “adorable” while Ellen Page verbally kicks ass throughout. Also, not seeing Jennifer Garner kick physical ass Alias/Elektra style is new to me and surprisingly welcome. [imdb link]
How to Throw a Surprise Party
1. Don’t send invites too early - the earlier you send the invites, the more time there is to leak the existence of the party. Send them about a week in advance so people can block it out.
2. Don’t give too many details - start out with a Save the Date. Less details means less to leak. They don’t need to know where it is … yet.
3. Make the invite private - if you’re using Facebook or some such, remember to make it private so it doesn’t show up on feeds. “40 of your friends are attending your surprise party!” is not a good feed item for the target to receive.
4. Get trusted help - figure out what tasks you need done and assign them to volunteers. For example, getting a cake, getting decorations, getting snacks, putting up the decorations. The less people involved, the better.
5. Set the time earlier than you need to - no matter how much you tell people that they have to be on time or they’ll ruin the surprise, people will still be late. Up to an hour late.
6. Create a distraction - obviously, you need to make some kind of plausible distraction event for the target so they don’t suspect. A dinner for two works well. Acting drunk may also yield good results.
7. Get a liason - to communicate with and inform when the target is arriving. Text messages work really well for this.
8. Keep them busy - you gotta keep the target busy on the day, especially when you need to text your liason. Suggest that they drive. Or intoxicate them. But not both.
9. Make sure the surprise party can breathe - a lot of people crammed in a small space can get uncomfortable. Dead surprisers are even more surprising, but not as fun.
10. Take video
As witnessed in the surprise party I put together for Coley with the help of Willo, Min Jung, Jason, Cindy, Marianne and the 40 people that came. The video from the outside:
Coley Supplies! from Kevin Cheng on Vimeo.
And the video from the inside, including the false alarm/beta-test: SURPRISE! from blissforkface on Vimeo.
Photos of Coley’s birthday by Brian, Bliss, Tantek, Marianne, Cindy and me:
The Devil Wears Prada
Saw this ages ago on a plane but never got around to writing about it. I just got back from Hong Kong so expect a lot of mini-reviews. Anywho, the plot to ‘Prada is predictable but enjoyable. Anne Hathaway is far too attractive for a makeover while Meryl Streep stole the show. Also, I suddenly felt like designing fashion instead of websites after the movie. [imdb link]
Yet Another Interim Theme
My friend, the talented designer and entrepreneur, Derek Powazek came up with this very simple theme which fits the bill perfectly for me for a “stand-in” design while I’m slammed with product releases.
Speaking of product releases, I designed and helped release BravoNation a couple of weeks ago. We launched just before Christmas so it was without much fanfare and the product is also invite only. Luckily, I have invites to give. I’d like to talk in depth about the product, why I think it’s very cool and how I went about the design process but that’s for another day.
In fact, here are some of the posts that are on my plate and I just haven’t gotten around to finishing. If you’re still here reading, maybe you can leave a vote in the comments on which article I should write first:
- Improv is Like Design
- Why I Did Buy an iPhone Afterall
- Incentive Systems On and Offline
- Going from Play-Doh to Website (2 parts)
What do you think?
Superbad
It didn’t live up to the hype that everyone else gave it. It’s funny, sure but maybe I’m just too old to relate to the coming of age stories now. It didn’t have me slapping my knees as much as American Pie did, and it didn’t have the nuance that I fely 40 Year Old Virgin and Knocked Up had. Oh well. [imdb link]
This Week
This week
- My brother’s getting married
- Our apartment got a notice to vacate
- One of my best friends got engaged
Phew.
About
Kevin Cheng is a global nomad who's settled in San Francisco after calling Vancouver, Hong Kong, Austin and London his homes. Founder of Off Panel Productions and OK/Cancel. Director of Product Strategy at Raptr, a social network for gamers, and former designer of Pipes and Bravonation at Yahoo!. Presenter on numerous design subjects. Reachable at kc -at- this domain.
Recently
Et Cetera
Currently writing: See What I Mean
© kev/null. Powered by WordPress using the DePo Skinny Theme.