The iPhone GUI PSD has been very helpful for designers / developers in mocking up their apps, although in some cases it’s proved a little too high-fidelity. For rapid prototyping we found we needed a more malleable approach. This is when we turn to the iPhone Sketch Elements AI. This collection of common iPhone elements in a sketch – like style allows us to easily and quickly mock up flows of custom wireframe screens.

Below is a quick example using YouTube of how we are using this quick sketch style to present flows to clients.

If you like it or use it, help us out by retweeting it.

Download The iPhone Sketch Elements AI Here (6MB)

(Font Requirement: To fully achieve the sketch style, you’ll need Tekton Bold — Freely available here)

We come across a lot of bad design in our everyday lives, both online and offline. For most people, it tends to go unnoticed as they browse the Web, shop for groceries, drive their cars or dispense your own butter on your popcorn at the movie theater. That is, until something goes wrong and whatever you were using doesn’t work as expected.

As designers in the interactive space, we’re blessed/cursed with the ability to see all these nonsensical things that confound and disturb, even when we’re not at work. Things that range from tiny to massive. Why does that door handle look like you can pull it to open, when in fact you have to push? Why are parking and other wayfinding signs so difficult to understand? Why does the ATM have so many buttons when we only use 3-4 of them at most? Why was an offshore oil rig equipped with an emergency shutoff valve that can’t be manipulated underwater?

These kinds of questions can drive you mad if you focus on them all day, but it’s precisely that itch, the nagging urge to question the way things are, that make us great at what we do. Any of my friends can probably attest to the times we spend together where I’ve gone bonkers at some of the poorly designed creations people are subjected to on a day-to-day basis.

Of all the ill-conceived, hacked together solutions I’ve seen in my time, AMC’s “Butter Flavor” dispenser at their Yonge & Dundas theater here in Toronto has got to be the most infuriating and, at the same time, hilarious example of bad design I’ve ever come across.

To some, this machine looks relatively innocent, maybe even novel or clever. “Great! I can pour my own butter flavor, letting me douse my stale theater corn product with all the buttery goodness I desire,” could be the first thing that comes to mind.

Upon further inspection, prior to usage, it becomes clear that there’s not one, not two, but three buttons to dispense butter flavor from the same nozzle.

When I see creations like this, I can’t help but think of how it came to be. What went through the heads of the people that created it? What was the original goal of the object, and how did it evolve over time?

Most importantly, which button came first? I imagine the machine had fairly humble roots, offering a single button to start the buttery flow. Just press the button under the nozzle, right? That is, until the nozzle unleashed scalding, buttery horror on the very arm you used to turn it on in the first place.

AMC must have realized the engineering snafu after several complaints, and re-engineered the machine, placing the button well to the right of nozzle, well out of range of the simulated butter. Of course, a fundamental principle of usability is proximity – objects that are close together are perceived to be more related than elements that are farther apart. This button likely confused more people than it did alleviate butter burns.

The final button, placed on the front of the machine, served to alleviate the burn issues of the first button, and the usability issues of the second. Finally, a perfect solution, right? Except for one problem – the other two buttons remain, offering users a confusing array of possible options. Beyond the obvious hygenic issues at play, the fact that this machine exists at all in this current state and some of the decisions that went into its creation lead me to believe there’s some trouble at the helm of AMC’s design team (if one exists at all).

But all the buttons dispense butter, so what’s the harm, right? To me, this is a perfect metaphor to what we commonly encounter in many poorly conceived Web experiences. Creators of websites without clear design principles or (worse yet), any expertise at all, design without clear affordances or paths to completion and then implement bandaid solutions when users complain or sales are less than expected.

Eventually, the site is a cobbled together mess of overlapping functions and navigation elements that were designed with the best of intentions, but just result in a lousy experience for their customers. It reflects poorly on the brand, and is an embarassing indication of the state of the affairs inside the company.

When we design experiences on the Web, we carefully consider the goals of the business and the users, and design the best experience at where those needs intersect. A usable website is the table stakes of a great Web experience. If you can’t get your users to use something as desired, then how in the world will you ever surprise and delight them?

Living in a big urban centre can have its ups and downs. While you may live within a few hundred metres of a full-stocked grocery store, depending on your neighbourhood, you can easily find yourself faced with a 20 to 30 minute walk. Owning a car isn’t a realistic option for many, and a less than reliable transit system doesn’t help matters either, so what options are you left with?

Longos-owned Grocery Gateway is one such option, and allows you to shop for, buy and have groceries delivered right to your door at a time that’s (usually) convenient for you. It’s a great alternative to hauling heavy groceries home, and can save you significant time and money as well. The online experience Grocery Gateway presents for its customers, however, leaves a lot to be desired.

Browsing Visually

When in a grocery store, we’re looking for our favourite jar of spaghetti sauce, tub of ice cream or container of yoghurt. There are many visual cues that allow us to easily pick out the item we’re looking for from hundreds of others on the shelves. The human brain and eyes can do an amazing job of isolating certain colours and features; As we saw from Dan Roam’s SXSW talk last week, about 75% of the brain’s sensory power is devoted solely to vision. Much in the same way that you can recognize a friend from a crowd of other people, you’re usually able to effectively pick a recognizable and familiar product out of a crowded shelf.

Part of this comes from a (sometimes) logical and expected grouping by the shelf stockers in the store, but most of it can be attributed to brands that invest in package design that allow us to pick up familiar colours and shapes in the store. Grocery Gateway relies too much on text and the user scanning long lists of product names in making their selection. The name of the product is a secondary consideration when trying to select preferred foods. A visual view similar to that which we designed for the Toronto Star would do wonders in helping shoppers select familiar products in an unfamiliar environment.

There are pitfalls to designing an experience around the appearance of a product. As we’ve seen recently, much like on the Web, brands can alienate their best customers with misguided and poor rebranding. However, our experience is that it’s better to give users the choice on how they’d like to browse given a set of content with a wide breadth and depth. While Grocery Gateway uses product images while browsing for products, they’re often inconsistent in their presentation and are not given enough emphasis. Descriptions are also unnecessary at this level of browsing.

Meeting Expectations

The last thing you want when you order a product online is to receive something you weren’t expecting – either the wrong product, or the correct one in the wrong colour or size. I’ve been surprised a couple times ordering through Grocery Gateway to receive products that didn’t match the size or freshness that I had expected.

While ordering a loaf of bread, trying to eat as healthy as possible, I picked ShaSha Co.’s Organic Multigrain bread. When it arrived, it turned out to be about half as large as a standard loaf of bread. Grocery Gateway doesn’t have any way of conveying relative size, nor do they have a way of showing how ripe/fresh produce is, always delivering bananas that are as green as grass.

Simple attributes could be designed into product pages to describe the qualities of a product. Size could use simple text links, like small, medium or large. Ripeness is a little harder to describe, but could use colours and richer controls like a banana slider that changes colour as the user interacts with it to indicate desired ripeness, as shown above (hat tip to Andy Warhol for the banana). Adding more fine-grained attribute controls with intelligent defaults would add immensely to Grocery Gateway’s shopping experience.

Shopping Recommendations

Shopping for groceries is a different type of online shopping experience than shopping for clothing or gadgets. While the latter tend to be fairly discrete activities, like buying an iPod or pair of shoes, grocery shopping tends to be a recurring weekly activity in North America. Knowing this, we can make smart design decisions around the items repeat customers buy on a weekly basis. Grocery Gateway’s “MyList” lets users add selected items to a favourites list, which is handy in that it lets you automatically add all of these items to your cart on your next visit, but unfortunately puts the onus on the user to manually add and manage all items.

An intelligent system that keeps track of purchasing patterns could ask if you forgot the milk if you’ve purchased it every time in the last 10 deliveries. Using the same system, grocers could also take advantage the opportunity to act as mentors in living a healthy life. By suggesting healthier alternatives to those you’ve added to your cart, users could see suggestions of low sodium and organic foods where possible. Those especially mindful of their place in the environment could go farther and suggest produce and other food grown locally rather than some that has been flown halfway across the world just to sit in a warehouse.

While Grocery Gateway has been great at making life easier by delivering goods on time in a pre-selected window, it has a lot of untapped potential with its online shopping experience. Customers are increasingly expecting more from online retailers, especially in this case where the frequency of shopping is increased. Usability, design and experience issues become magnified with each repeated use and can lead to quicker customer bailouts and decreased satistfaction.

When brick & mortar retailers move their products online, they often leave behind some of the core emotional interactions that make up their experiences. One could argue that feeling for the right avocado in the produce section is a pretty mundane activity, but it’s actions like this that put us in control of the food we provide for ourselves and our families. Grocery Gateway should embrace their very important place in their customers’ lives and use that opportunity to provide a superb shopping experience.

Between the dozens of panels, talks and conversations that happen every day during South by Southwest (SXSW) and the ensuing parties and networking opportunities each night, there was quite a bit to take in in Austin last week. Yesterday I shared some of the highlights and trends that I observed at SXSW 2010, but for me the real reason for attending SXSW is having the opportunity to hear some truly inspiring and fascinating people who work in Design speak in person.

Dan Roam on Visual Thinking

One of first few talks I attended was by Dan Roam, author of The Back of the Napkin, a bestselling book on how to think and express ideas visually. Dan took the last five minutes of his excellent hour-long session to summarize what visual thinking is, and used it to illustrate the history of humanity. Dan has an extremely engaging way of speaking that is enhanced by the live sketching on his slides.

Peter Molyneux on The Emotion Engine

Peter Molyneux is a game maker and the founder of Lionhead Studios and creator of Populous, Black & White and the Fable series. Although Molyneux is often critiqued for not delivering on his visionary ideas that go into each of the games he makes, I’ve always admired his ability to engage players emotionally in gaming experiences, and to challenge their moral views. At SXSW, Molyneux spoke chiefly about the emotional side of gaming, particularly with regard to his upcoming game Fable 3.

He also described the concerns and excitement Microsoft’s new controler-less motion tracking interface dubbed “Project Natal” poses to him as a designer. I could instantly relate to the duality Molyneux expressed around anxiety & excitement when faced with a platform that forces us to re-think how we design. Over the past few years, platforms of like the iPhone, Microsoft Surface and iPad have definitely left us with no shortage of design challenges as we explore all the design possibilities inherent with their form factor.

Wired Magazine on the Tablet

Wired hasn’t been shy about getting into the Tablet space. While I was at first excited to hear about magazines and other publishers getting on board with the iPad and other touch devices, I can’t help but be underwhelmed at Wired’s design execution. Their demo at SXSW with a rep from Adobe felt like a magazine crammed into a tablet, as opposed to content designed specifically for the form factor. I absolutely admire their visual design work in print and am a regular subscriber for that reason, and can understand their desire to reuse content and design from print to web and tablet.

However, their “one size fits all” approach to designing the tablet version in Adobe Air, and attempting to force it into other platforms like Android felt cheap and rushed (and borderline unreadable, from what I could see). Other publishers are sparing no expense to provide readers with a truly new experience, suited for the form factor and taking advantage of the device’s ability to provide rich animations and interactions.

As a fan of Vimeo’s, I was stoked to hear that Blake Whitman would be giving a talk at FOWD in NY. (You may recognize Blake from that time he had some questions about the homepage…) Blake’s presentation showed that cultivating a vibrant community online is, in no small part, a tractable design problem.

Let me explain what I mean by that.

Vimeo stands out to me because I think they’ve done a great job of embodying simplicity on the web. And it turns out that this is a by-product of thinking about their site in a really focused way. First and foremost, Blake explained that Vimeo is NOT a video site: it’s a community for creative folks who like to make and watch videos. So all of the design decisions are built around this core identity.

I’d argue that understanding the team behind Vimeo’s design decisions can help us bust some popular implicit myths about building online communities:

Myth 1. Online communities are like the wild-west: they work best when uninhibited by constraints.

It’s tempting to think that there’s very little mechanical or social control we can or ought to exert when it comes to building online community. After all, members need to feel like this is their space and we wouldn’t want to stifle engagement–especially early on. Vimeo’s approach challenges this notion.

Blake explained that designing for a specific type of user and imposing key limitations have made their online community flourish, not flounder.

For example, unlike YouTube, Vimeo constrains the type of videos you can upload. Another example: rather than deploying the standard designer’s toolbox for building community around content (e.g. ratings and reviews), Vimeo only lets members formally designate videos they “like.” Blake was pretty adamant: “Vimeo is not a popularity contest.” This makes sense when you think about it since two traits of a strong community—online or otherwise—are 1) shared identity, and 2) a sense of belonging. If other people in the “community” are trash-talking something you’ve created and contributed, both of these traits are strongly diminished.

Myth 2. Successful online communities require strong and deliberate social engineering

This myth swings the pendulum all the way to the other extreme. Clients often default into this line of thinking as a way of hedging their bets. Above all, they want to manage and mitigate potential risks associated with an open online community.

Vimeo demonstrates the promise of a much simpler approach: get involved and lead by example.

Vimeo hires community positions out of their actual community. Their staff are very active on the site: they engage with other members, are supportive where they can be, they make and post their own videos. The upshot of all this is that the team has a vested interest and and embedded perspective—they’re effectively designing their own community space.

To wrap it all up, Blake’s talk encouraged me to think about the cultivation of online community as a a multi-disciplinary undertaking, but assuredly one where design plays an important role.

To keep the conversation going, what are some other design principles that can be applied to these sorts of online environments?

While attending FOWD last week in New York an overarching theme of Progressive Enhancement started to develop as more and more presentations preached it’s benefits. So what exactly is Progressive Enhancement? and how can we realistically use it and ensure our users and clients are happy with the end result?

Progressive Enhancement is all about delivering structured content to browsers and devices regardless of their capabilities, then adding layers of style and behavior that are progressively more complex. If you’re using a modern browser it will be able to render those complex styles and behaviors and deliver a beautiful rich experience. However, if you’re using a legacy browser or device, the content will be rendered to the best of browser’s ability with less complex styles and interactivity. The key here is that nothing breaks, it simply doesn’t look or behave the same in older browsers.

This probably sounds very similar to something web designers and developers have been preaching for years, Graceful Degradation. While they are similar, they have completely different objectives. Graceful Degradation has you building what the most modern browser can handle, and then ensuring that it degrades (or breaks) gracefully in older browsers. Progressive Enhancement on the other hand has you building for the lowest common denominator and then adding extra polish and functionality for browsers that can render it. Graceful Degradation has you looking backward, and Progressive Enhancement has you looking forward.

Why would you want to Progressively Enhance your website? Quite simply, you want to ensure that anybody who wants to consume the content you’re delivering can do so without getting slapped in the face with a broken unusable site. It will also lead to cleaner, semantic code which is easier to maintain and easier to upgrade (or enhance) at a later date.

Lets a take a look at a quick example. Here we have a pretty really basic nav with rounded corners, shadows, and a custom font. Normally we would build this using something like:

You can see we have code in there just to support the design, a div for the bottom corners, a class on the last list item to get rid of the last underline, and a container div to keep it all together. We would also have about 8 different image files for the corners, background, shadow and custom fonts. Don’t forget the PNG hacks to get everything looking properly in legacy browsers. All of that just to support a pretty basic design.

Ideally we would use something more like this:

Here we have clean semantic code with nothing but a class name (maybe) for the styling of this basic nav. No images are required for this navigation, we’ll let CSS take care of all the styling. Rounded corners, shadow, gradient background, custom fonts, and removing the underline on the last list item can all be taken care of with the latest CSS styles. I won’t dig into the CSS code for this today, but we’ll take a look at how this would look in different browsers.

As you can see, nothing would break and everything is still usable no matter which browser you’re using. If you’re using a newer browser you’ll see a little more polish than users with an older browser, and your experience will be a little bit better. Dan Cederholm used television as an excellent analogy for Progressive Enhancement. You can watch the latest episode of 30 Rock in glorious HD and surround sound if your home theater has an HD TV and a surround sound system. However, you can watch the exact same show on a 15″ black and white TV with mono sound. You’ll get the same content, and be able to talk about the same jokes around the water cooler regardless of what your home theater looks like. If you’ve invested in the latest and greatest TV and Audio gear you’ll be rewarded with a better experience. If you have a 15″ black and white TV, chances are you don’t care about that better experience, or at least understand why you’re not getting the best experience.

We need to use this type of analogy to explain Progressive Enhancement to our clients. Websites absolutely do not need to look the same in every browser. You can deliver an enhanced experience to users with the latest technology and not alienate users with legacy technology. The tricky part comes when you present a design with all the sparkle and polish to a client, and they can only see the basic lacklustre version of the final product because they’re using a browser that’s 10 years old. Finding a way to present the lo-fi and hi-fi versions in tandem will be key in selling Progressive Enhancement to clients, and moving web design forward.

The @font-face rule allows authors to specify online fonts to display text on their pages. In other words, you’ll be able to use fonts outside the usual Arial, Verdana, Georgia and the like, even if the end user doesn’t have them resident.

There are a few other things worth mentioning. The rules are unique to CSS3, so only a few of the newest browsers support them. The fonts you use must be made public, so if you use the rule you’re essentially distributing the fonts – not cool. That’s its biggest hurdle right now and may in fact lead to its demise unless someone can figure out how to protect the fonts. I’m not convinced services like “Typekit”:http://typekit.com/ are the answer.

Originally, we had designed a page using some recently purchased “H+FJ”:http://www.typography.com fonts but quickly realized we couldn’t use the layout without distributing the fonts. Don’t hate the playa, hate the game.

Before you go clicking you’ll need a really modern browser. “Firefox”:http://www.mozilla.com/en-US/ works best, not only in the way it renders the actual type but also the way it displays letter spacing. The new “Safari”:http://www.apple.com/safari/ and the “Opera beta”:http://www.opera.com/browser/next/ browsers will also render it decently. We could have made the page degrade gracefully for older browsers, but we didn’t. While you can still view the page in older browsers it’s gonna look like it’s 1999.

Update: It seems as though Firefox 3.5 for Vista doesn’t render a few of the fonts well or at all.

“view the sample page”:http://www.teehanlax.com/labs/projects/fontface/

Okay, so we won’t be using it anytime soon due to the issues stated above, but it sure does look promising. There’s a good post at “craigmod”:http://craigmod.com/journal/font-face/ on this subject too if you want to learn a bit more.

But I hate it when sites ask me questions they should know the answer to.

Canada Post Tracking

Shouldn’t you guys know if this is business or personal based on the tracking number? Are there really duplicate tracking numbers? What is the difference between business and personal?

In my case I received the tracking number from a business who was shipping me something to my office so I selected “business”. I was wrong, its personal. I’m so stupid.

Why can’t I enter the tracking number and Canada Post figures it out? Am I asking for too much?

Along with Apple’s official release of the new iPhone 3.0 software came a number of new graphic GUI elements. We’ve been holding off updating the Photoshop file until we could properly implement the additions. We built it using vectors, so it’s all still fully editable. Apple’s SDK is amazing, but when we need to mock up something quickly for a pitch we turn to this.

Some of the changes and additions in the 3.0 iPhone GUI PSD include:

• Map and map elements including curl
• Copy and paste elements
• Timeline bar editor
• Horizontal iPhone
• Horizontal Panels bars and keyboards

If you like it or use it, help us out by retweeting it.

New Version Available!

iPhone GUI PSD Version 4

(Thanks to Finn O’Hara for the photo)

h1. Magic Happens When You Give Smart

The 2008 holiday season was certainly a busy one for us and TELUS. Ads, ads, some more ads, a few signage pieces, and a little microsite kept us well occupied in the weeks prior to Christmas. Now, I won’t bore you with all the little details, but I did want to share a few of the pieces we created this past holiday season.

h3. Online Ads

The Q4 campaign was quite broad and required a large variety of ads. We created a mix of standard and rich ads, cross-talkers, a mini product-viewer, and even an ad where you can search Google on the phone… in the ad. You can see a few of the ads “here”:http://www.teehanlax.com/awards/telus_banners/, but we’ve also put together a little highlight reel to show them off.

h3. Microsite

I suppose magic doesn’t happen on its own… it’s really something that has to be manufactured, right? Enter the “Magic Machine”:http://teehanlax.com/awards/telus08/giftguide_site/index_en.html – a simple machine that helps you find the right smartphone.

Our internal team modeled and animated a number of scenes, all of which were dynamically assembled depending on the features you select at the beginning. We wanted to make the experience playful and if you use with the machine a few times, odds are you’ll see a completely different scene each time.