We don’t often write about products that we didn’t work on, but I came across Path last night and felt it was worth talking about. Path has been around since November of last year. I only vaguely remember looking at it when it first launched, and I don’t even recall what it did – obviously a problem.

The new version, Path 2, is about capturing and sharing moments – they refer to it as a smart journal. It’s not Twitter, Foursquare, Instagram or Facebook (though it does feel like the timeline). It’s a bit more like Evernote in terms of what it does, but is more about what’s going on in your life. What struck me about this app though, and made me want to write about it, was the interaction design.

Native vs Custom

Until recently, I’ve felt most apps fall into one of two camps. They either use core elements of an OS or they’re comprised primarily of custom UI. Neither one of these approaches is wrong, though some argue that breaking conventions is a no-no. I typically argue that it’s okay to diverge from conventions so long as the experience is intuitive and polished. If it improves things, even better. Experiences that start with an overlay teaching people how to use the interface obviously miss the mark. Thankfully, we’re beginning to see UI designers start to find some balance in between these approaches – Path is an excellent example. It feels familiar, but they’ve made some smart decisions that break away from the norm without wandering off into obtuse interactions or under/over-designed visuals. The decisions they’ve made not only make things better, they add personalty and delight – something that is crucial, and often overlooked when designing something functional. There are a number of things I love about the work the team at Path have done but I want to point out a few on iOS.

First impressions matter: first-run & on-boarding

Signing up for a service is typically a painful, or at least, mundane experience. It’s a few fields, some buttons and some useless directional copy. It works though. With the exception of a system error, no one struggles with these experiences. As designers, our tendency is to focus in on the meaty parts of a project and innovate. Something as trivial as a signup flow is considered a commodity and typically little to no effort goes into them. Path chose to improve it. The first-run simply lets you understand the value by looking at a canned ‘Path’. From there, you either create an account or use an existing one. No fields, no useless directional copy, just a few intuitive interactions. I love that form elements and actions are suppressed until I’ve chosen what I want to start with. This non-linear approach is refreshing. Once registered, the app also does a good job of connecting you with other people on Path (albeit without Twitter integration, though I’m told it’s coming soon). The number of screens below make make this appear like a long, drawn out process, but in reality you never notice it.

Best part about this: I don’t have to type in my email or phone number, just pick the appropriate info that’s pulled from my address book.

Navigation: Learned and explicit

There are two things that are noteworthy here. One is how you access the menu. There is an explicit button that slides the current view to the right revealing the menu below (the Facebook app does this too). Additionally, Friends are accessed through a button on the right. What’s nice about this is that there’s what I call UI hinting going here. By animating the panels left and right I’m given a hint that I can likely swipe them to execute the same action. Relying solely on swipe isn’t quite learnable enough, and obviously we don’t want a UI instruction sheet. But only using buttons isn’t the right choice either since a gesture requires far less accuracy and is therefor a more efficient means of performing the same action.

Best part about this: This isn’t a simple swipe then animate action. It’s a pan gesture. There is an enormous difference between these two methods. The former, makes things feel sluggish and disconnected, while the latter feels physical and natural.

Prioritization: Information when needed

One of the things that I love about small screen mobile design is that the physical size constraints force us to make hard decisions. What matters most in a given context is something that I’d love to see designers ask themselves more when working with larger displays. Striking a balance between what navigation and content I need to see at any given moment is what Path does right. The ‘post new’ button suppresses the options into a delightful radial fly-out menu – I’m not inundated with options by default. The best example though, is how they’ve prioritized the content. Because a Path is timeline-based, the common tendency for most designers would be to have a time stamp in some elegant, faint grey text – just visible enough, but not to loud as to cause a distraction. What Path decided to do, and I agree, is to focus on the content of the post and de-prioritize the timestamp by making it appear when you begin scrolling the timeline. This removes clutter from the screen but allows you to see the information when needed.

Best part about this: That Path realized the timestamp isn’t all that important by default. It is after all, a timeline, so you already understand some element of time without the stamp – i.e. the stuff at the top is recent.

Congratulations to the team at Path for re-inventing themselves. It’s an incredibly thoughtful interface and very interesting product – you should try it if you haven’t already.

Most of you likely know that Color is also reinventing themselves. I hope they read this and recognize that they too need a transformation like this. This is the level of care and polish that will become the standard for everyone – startups and established businesses.

You can follow me on on Twitter @gt and us @teehanlax.

A few months back Fast Company’s Co.Design blog published a controversial post that triggered a lot of discussion. In their article provocatively titled User-Led Innovation Can’t Create Breakthroughs; Just Ask Apple and Ikea, Jens Martin Skibsted and Rasmus Bech Hansen wrote:

“[User-centered design] doesn’t work. Here’s the truth: Great brands lead users, not the other way around.”

Skibsted and Hansen cited Apple and IKEA as some of the most innovative brands that don’t follow the user-centric design model. They say that their friends in the Apple design team spoke out against user-centric design because it’s “a waste of time”, and similarly at IKEA because “it doesn’t work.” They argued that brands have to take the lead in innovation with a strong and consistent vision, and outlined several reasons why it’s actually detrimental to listen to your users.

I have to admit, their examples are compelling, but are they correct? How do we reconcile their claims with what we know about the value of design research and user-centered design?

What is innovation anyway?

Let’s first define what we mean when we say innovation. If we go by the textbook definition, innovation in short is a renewal or improvement on something—e.g. a process, system or product—that changes the way people make decisions and do things, outside their norm. In other words, it has to be something new and useful enough for people to adopt en masse, otherwise it’s just another useless invention. Most often, these innovations are small and incremental: cars keep getting faster and more fuel efficient; TVs keep getting bigger and thinner; iPads keep getting faster and sexier—you get the idea. But sometimes they can be radical and lead to revolutionary breakthroughs: automobiles replacing horse-drawn buggies as the primary mode of transportation; televisions replacing radios as the dominant home entertainment medium; iPads replacing netbooks as the best-selling ultra-portable computing device.

So what does this all mean?

Let’s go back to the original question. Can UCD lead to breakthroughs? I want to make the claim that in most cases the short answer is no—that UCD alone is not enough. In a nutshell, UCD is about listening to the users, analyzing their problem, and providing solutions that meet their needs. These methodologies can often lead to incremental innovations—that is, incrementally improving and optimizing pre-existing solutions. But what about radical innovation? I think the answer lies in how the pioneers of innovation did it in the past.

A catalyst for innovation

Let’s take a look at Henry Ford for example. He is famously quoted to have said, “If I had asked people what they wanted, they would have said faster horses!” However, what most people forget is that Ford was an engineer and an experimental hobbyist. He was experimenting with gasoline engines that he eventually put on four bicycle wheels. He called it the Ford Quadricycle and it predated the first Model T by about 12 years. Nobody knew what a “car” was, let alone find any use for it.

Here’s what I’m trying to get at: the man responsible for one of the greatest innovations of our time had, what I would like to call, a tinkerers’ personality. Someone who was always curious and loved working on things. And it wasn’t just Ford; Thomas Edison, while working on improving the telegraph transmitter, heard noises coming from the paper tape that resembled spoken words. He had a hunch that telephone messages could be recorded in a similar way and, after a lot of tinkering, eventually created the phonograph. I believe this tinkerers’ personality is common among the world’s greatest innovators and was a catalyst for a lot of the radical innovations of the past.

Finding the balance

Adam Richardson, Strategy Director for Marketing at Frog Design, sums up the challenge of innovation this way:

“[ … ] the pendulum has swung so much toward doing user research that we (as a profession) risk losing the magic that comes from conceptual thinking. The seductiveness of evidence and insight that comes from design research can push inspiration, intuition, hypotheses, hunches and non-linear thinking to the sidelines. Analysis overwhelms creativity.”

I’m inclined to agree with this sentiment. I surmise that the pioneers of innovation really did have inspiration, intuition, hypotheses, hunches and non-linear thinking on their side. These are traits I would consider a part of a tinkerers’ personality.

In a recent article Don Norman, one of the pioneers of the UX field, points out that it’s sometimes good to act first, and do the research later. In our search for innovation, it is dangerous to swing the pendulum too far in any one direction. Too far towards research and we get overly deterministic, stifling design; too far towards experimentation and we get arbitrary and open-ended design. If we can strike a balance between creating opportunities that foster tinkerers and deploying the proven processes of UCD in everything that we do, I believe we are at least on the right path to doing more and more innovative work.

Every time we create one of these files we notice just how much has changed. I’m not talking about the obvious stuff like iCloud, Siri or Notifications. I’m talking about the small stuff. It’s an eye-opening experience looking this closely at what makes up an interface.

You don’t notice this level of detail on a micro level, but you’re aware of it on a macro one. When you pick up your phone to send a tweet or check an email you’re seeing hundreds of these details a second. Those details add up to make the experience what it is. It gets me thinking about the endless hours of debate and decisions that must have occurred around a seemingly meaningless change to the weight of a stroke, or the depth of a shadow. For the most part, I think these changes aren’t meaningless – they’re purposeful and intentional. Some of these changes make things more consistent, others make things more useable. There are however, a few that might leave you scratching your head.

One thing to be sure of here is that this OS is tighter from a design standpoint than its ever been before. Apple’s passion and attention to detail is something that every designer and developer needs to have. Without it, you’re simply not putting your best foot forward. Now, go make epic shit.

Download the iOS 5 GUI PSD here

Examples of changes between iOS 5 and 4:

iOS5 introduces a white drop shadow to an inset table view cell (iOS5 on left, iOS4 right)

The stem of the shift symbol on the keyboard is shorter in iOS 5 (iOS5 on left, iOS4 right)

The carrier name now has a deep inset shadow in iOS5 (iOS5 on left, iOS4 right)

You can follow Geoff and Teehan+Lax on Twitter.

Yes, we <3 Android, too!

One of the challenges of an ever-changing digital channel, is that we find ourselves spending more and more time designing for various platforms and form factors. One such platform is Google Android. This doesn’t come as much of a surprise: a survey conducted in June, 2011 found that among consumers who plan on buying a smartphone in the next 3 months, 32 percent prefer an Android-based smartphone. This is a significant increase from 3 percent just a year ago. Both brands and designers should take note of the rising popularity in Android-powered devices as consumers continue to embrace this platform.

To help improve our design workflow (and hopefully yours too) we made a fully vectorized Android GUI PSD. The template is based on the most popular screen size (normal) and pixel-density (high) using the default Android skin as the baseline. And as always, we’re sharing it with everyone at no charge. All we ask in return is a shout-out in the form of a tweet. The PSD requires the Droid Sans font which can be downloaded from Font Squirrel.

Download the Android 2.3.4 GUI PSD Here

License: This file may ONLY be used for mocking up Android apps. No, it can’t be used in a theme to sell or go in ads for your new app or use it to build your Web site. It is a tool for designers, that is it.

Government open data presents a number of opportunities for citizens, designers and elected officials.

Using the TTC transit system here in Toronto, I would stand amongst other commuters on a cold winter day and watch as someone would step impatiently off the curb, press off their heel and try to get a glimpse of any streetcar on the horizon. After a few seconds, they’d step back with their head to the ground, and we would try to assess their gaze.

As a UX designer, it’s impossible to suppress the natural instinct to observe human behaviour and imagine how I might make peoples’ lives more enjoyable — to me, the question on everyone’s mind was the same, “Where the hell is my streetcar?”

Late last year, the TTC, in a bold and rather unexpected move, made an open data feed available that showed the exact GPS locations and expected arrival times for each streetcar. Just like that, an app that I’d been dreaming about since third-party apps for the iPhone were announced was now feasible.

I spent a week sketching out what the experience might look like, and then assembled a team to help me build it: T+L’s own Jason Sao Bento, and co-workers from a previous gig, Mohammad Kurabi and Jeremy Koch. Within 60 days, Rocket Radar for iPhone was for sale on the App Store.

It’s been six months since then, it’s received some great coverage from the media and has been downloaded thousands of times. I’ve also learned a great deal about not only building mobile apps, but building them on open data sources.

Solve one problem

Prior to Rocket Radar, transit apps offered every piece of information under the sun related to the TTC — schedules, routes information, maps, advisories, RSS feeds and more. There was no focus on what the user was trying to do; instead, it was a data repository.

By their very nature, open data feeds are a raw dump of all information available from the given source. While it can be tempting to consider how to fit all of the information into a user interface, always consider the primary purpose of the app. Just because the data is available, doesn’t mean you should use it.

This was reflected in the information design of Rocket Radar. Throughout design and development of Rocket Radar, I constantly questioned each idea with, “Does this help me find out how long I’ll have to wait for the next streetcar?” If the answer was no, the feature was cut.

For all mobile apps, it’s important to be judicious about context and sensitive to core functions. For open data apps, resist the urge to take a shotgun approach to design.

Clean it up

Open data doesn’t see the light of day easily. It took a handful of passionate people with a bold vision rallying the city and the TTC to shepherd Toronto’s open data catalogue into existence.

Large organizations, governments included, are almost always wired together like a bowl of spaghetti where isolated legacy systems were created for a very specific purpose, and are rarely designed to talk to one another.

As a result, what comes out the other side when a department is ordered to make their data public can be unwieldy at best. Live data feeds might have improper syntax, markup, and change management. Accept it. The quality of the data is a by-product of this environment and in most cases you won’t be able to do anything about it.

It’s the designer’s responsibility to reduce the cognitive overhead of the user, and in this case, it’s taking a mess of data in, and presenting it elegantly in a way that the user can intuitively understand. For Rocket Radar, that meant taking extremely verbose stop names such as “Queen Street West At John Street” at renaming it simply to “John”.

All stops within Rocket Radar are named in the same way that TTC drivers announce them and in some cases even use nicknames that passengers use like “Ronci” to represent Roncesvalles where screen real estate doesn’t allow for the full name. This gives the app a conversational tone that feels welcoming and familiar and helps to speed up the user’s ability to process the information.

Do it magically

Mobile apps require laser-like precision in their focus in order to properly respond to the user’s context. Prompting the user for information and asking them to configure options are just roadblocks between them and what they’re trying to achieve with the app. Mobile apps should ideally provide something of value to users as soon as they are launched with as little friction as possible.

With GPS, gyroscopes and other types of sensors now built in to smartphones, there’s so much that we can gather from users without having to ask them every time, and that’s how Rocket Radar has seen some pretty astounding reactions from users. As soon as it launches, the app finds you, the route that you’re on, the stop you’re closest to, even the direction you’re probably going, and then tells you when the next few streetcars will arrive.

CFRB’s John Downs, speaking about his first experience with the app when he saw a streetcar arrive right when the app said it would, exclaimed rather hyperbolically, “We let out a giant cheer like we’ve seen the first shuttle ever blast out in to orbit. It was one of the most amazing moments of my life.”

We put a lot of effort into making the app as frictionless as possible, making best guesses as to what the user might be trying to do. It was quite technically challenging to figure out how to select the stop on the other side of the street if the user changes directions (since the list of stops for each direction are maintained separately), but for the user, it just works.

That’s why I equate some of the best experiences on any platform to magic, even if Apple has reduced the word to a bit of a cliché; there might be quite a few levers being pulled behind the scenes technically, but to the user, when you deliver an experience that was never possible before in a matter of seconds without them having to do anything, it can really feel like magic.

Today, we are proud to launch a new online presence for Teehan+Lax!

Digital is changing, and so are we. We believe that 2011 will be a defining year for our company, and the new Teehanlax.com is a great way to mark the moment as we move ahead. Here’s a little bit about what you’ll find on our site:

Multi-screen from the start

From the get-go, we wanted to create a site that would work across a wide range of devices and screens sizes. We sketched out our mobile screens first, then worked up to tablets, standard, large and extra-large desktop resolutions. It was important to keep context in mind. For example, the mobile homepage simply displays contact information and a map. For layout and design, Matt and Andy worked together to design and develop a scaleable framework based on a 50-column grid. Design elements, styles and typography were all then built on top of this framework. You can get a sense of how this works by resizing your browser window.

Fresh new work

We finally get to share some of our latest and greatest work! Check out new case studies for Virgin Mobile, Bell, Weather Network and Logitech, to name a few. Travis, our resident WordPress expert, created an incredibly robust back-end solution which will let us content manage the site much more effectively. Stay tuned for more regular updates to this section as well as a new demo reel coming soon.

Dropping the new science

Labs now has a new home at teehanlax.com/labs. This is where you can see what we’re up to in the Lab and join the conversation. We are super stoked about our new labs initiative. If you haven’t heard about that yet, check out the announcement here. Don’t forget to follow the Labs crew on Twitter @tllabs.

Downloads

We love making stuff to share with our fellow design community, and now you can now find all of our biggest hits in one place. Check out teehanlax.com/downloads to see the latest and greatest in templates, stencils, and more.

Big thanks

Thanks so much to everyone who played a role in the project—especially to Matt, Andy and Travis who all dedicated late nights and weekends to pull this off in a relatively short period of time. And thanks to our fans, followers and commenters for continuing to track with us online (and IRL).

You like?

We’re also launching our Facebook page, which is where folks can get more of a behind-the-scenes look at who we are and what we’re getting up to.If you appreciate what we do, enjoy using some of our resources, or are just feeling friendly, give us a like and stay posted on what’s new at T+L!

Hundreds — not to say thousands — of articles, tutorials, books and websites solely dedicated to grids and their application in (web)design have been published in the last few years. A simple search on Google with the terms “grid” and “webdesign” returns almost 5 million results. There is even a movie with characters trapped in what they call “the grid” […] “a final frontier”.

A short historical perspective

However, grids are nothing new and can be traced back to Middle Ages: in the 1220s/1240s, French architect Villard de Honnecourt designed construction canons based on geometry. These principles were later studied by typographers and designers in the beginning of the 20th century to reverse-engineer medieval canons of page construction. Among them, Van de Graaf, Rosarivo, and ultimately Tschichold who popularized his predecessors’ discoveries in his book The Form of the Book: Essays on the Morality of Good Design.

Designing within a grid space is indeed an old tradition that finds its roots in the need for structure and balance.

A lot of the things that surround us are designed following modernistic principles of grid systems. The beauty of these objects — music players, books, magazines, mobile phones, websites, etc. —  generally resides in the fact that the grid employed to design them is totally invisible. Order is suggested more than it is made obvious. Users should be left with the impression that things are easy to handle if the order employed at crafting them suggests so.

As Josef Müller Brockmann wrote is his book The Graphic Artist and His Design Problems: “The grid makes it possible to bring all the elements of design — type characters, photography, drawing and colour — into a formal relationship to each other; that is to say, the grid system is a means to introducing order into a design. A deliberately composed design has a clearer, more neatly arranged and more successful effect than an advertisement put together at random.”

The Return of the Grid

Why is it that grid systems have become so popular among digital designers? The answer might be that now, good old print principles have become applicable to the screen(s).

In the early age of Internet, when the computer was the only interactive screen around, graphic design possibilities were extremely limited. Creating an online masterpiece à la Müller Brockmann was close to impossible mainly due to technological restraints. Constant improvements, coupled with both professional maturity among digital designers and an increasing interest for more rational design (Bauhaus, Swiss style, Ulm School), undeniably led to the return of the grid. What had been for ages the canons of print design has become a prerequisite of UI design.

Today it is inconceivable that a UI does not fit into a grid system no matter how complex it is.

A grid has two dimensions (at least)

Plenty of online tutorials, templates and calculators exist to create grids, but not all of them place the emphasis on what makes a grid valuable: typographic rhythm and the baseline grid. Building a horizontal grid is of course a fundamental step, but creating vertical rhythm is equally important. As Robert Bringhurst wrote in The Elements of Typographic Style: “Don’t compose without a scale”. Type should actually be the scale that defines almost everything else.

Positioning or aligning elements on an horizontal grid is fairly simple and borrows a lot from print rules. Typically, a 960px wide page is divided in 12, 16, or 24 columns — synonyms for classicism, complexity… and madness. This division in columns is often determined by business requirements such as advertising placements. For instance, the 12 columns grid system is perfect to accommodate big boxes (300x250px) or half pages (300x600px) that use exactly 4 columns, or one third of the page.

Copy can be easily adjusted along these columns, sometimes close to the border of the column, sometimes not. There is no golden rule and the grid should never be regarded as rigid, but instead used as an assistance to create order. The grid is a means to an end, not an end in itself. To quote Müller Brockmann once again: “The grid system is an aid, not a guarantee. […] But one must learn how to use the grid system; it is something that has to be practiced.”

When positioning elements vertically, the designer has to make decisions that never should be left to chance or random. Too often, designers rely on vertical increments made possible in Photoshop by holding shift and arrows keys: “I use 5 or 10px, it depends.” This approach is acceptable horizontally, as columns are multiples of 10, but it doesn’t conform to any typographic reality.

If we go back to the reason why print designers invented grids, it was because they needed to position both texts and images on the space of their page. By adding a vertical grid — or baseline grid — to their horizontal grid, print designers found the way to create complex layouts where chance was eliminated (when followed obsessive-compulsively). Suddenly typography and iconography could sit on a systematic series of horizontal lines called “baseline grid”.

Experimenting with a baseline grid

Coming up with a grid for print requires multiple calculations based on page format, font choice, font size, leading, etc. Hopefully these calculations are not necessary for digital design, and web design in particular: on screen, the baseline grid is essentially determined by leading.

Recently, we’ve been successfully experimenting with a 6px baseline grid coupled with the 960px grid system designed by Nathan Smith. This system has three advantages:

• first, it simplifies the design process by removing the “chance” factor (no more questions);
• second, it decreases the time spent at positioning elements;
• third, it increases the feeling of organization in our design by articulating all the graphic elements with type.

Talking about type, we have also chosen to use traditional sizes to go with this baseline (9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 48, 60, 72 points): these sizes prove to be extremely useful when combined with leading derived from 3. For example, body copy can be defined as 14/18 (14pt size and 18pt leading). Small copy can be defined as 9/12. The magic of the grid operates and all these elements suddenly align; same if we choose to create a text block with type set slightly bigger (for example 21/27). Copy aligns itself every six, every four or every nine lines. To paraphrase Robert Bringhurst and his concept of vertical tempo, the baseline helps at adding or removing vertical space to create rhythm.

Now it is easy to align various blocks of text (headings, body copy, etc.) with UI elements such as buttons and textfields as they all sit on the baseline grid. The ultimate purpose of this experimental grid is to facilitate the whole design process, particularly for designers but also to help integrators and developers in their work with CSS and HTML.

We hope that you’ll find this grid useful, not just as another trend to follow, but rather as a holistic strategy to envision and execute simple, clear and balanced design projects.

Download our grid here

The primary thing to keep in mind here is that designing for a device like an iPhone, especially one with a retina display, using only a computer monitor leads to a good deal of guess work due to the differences in pixel density. We hate unnecessary guess work. Sure, you can export flats and look at them on the end device but you’re probably not going to do that as often as you’d need to – and it’s a waste of time given that tools like LiveView Screencaster are available. It’s a free app (Nicholas, we’d gladly pay) that let’s you view your Photoshop canvas in real time on your iOS device. It’s the best addition to our toolkit since Photoshop added layers and multiple undos.

Set up Photoshop with a new blank document (640×960 in this case) and make a second instance of it (this is key). It’s done by selecting Window>Arrange>New Window for… in Photoshop. See the screenshot above for reference. Assuming you have 2 monitors, drag one of the instances over to the secondary monitor making sure the entire canvas is viewable at 100%. Leave the other instance on the main monitor. Get LiveView Screencaster running on both devices and line up the LiveView frame to fit perfectly over the canvas on the secondary monitor (use the arrow keys for fine-grain adjustments). You’ll now want to work solely off of the main monitor instance leaving the secondary one alone. This allows you to freely zoom or move the canvas as much as you want for pixel perfection, while simultaneously watching how your actions are affecting the design on the actual device at 100%. Without the second instance, any canvas movement or zooming is mirrored in the iPod, and that’s not a good thing.

Here’s a quick snap of the sample set up:

When it comes to building a web experience, most of the effort is typically put towards the tactical objectives that aim to satisfy business and user requirements: Users should be able to easily browse products and buy them; The business should have the capability to manage marketing campaigns; Users should be able to easily move laterally between similar products. Every agency, no matter how big or small has to solve these same problems, and that will never change.

However, it’s the execution of these details that makes the difference between a distinctive experience and one that’s forgettable. This week, the Little Big Details blog has been making the rounds in the blogosphere for showcasing clever micro-interactions across different apps and websites. Mico-interactions can be used to enhance a user’s experience, while subtly guiding and persuading them down a desired path.

Mac OS X’s dynamic date formatting and credit card auto-detection are pretty classic examples of micro-interactions that have become widely adopted and even become best practice. On iOS and relatively new platforms, clever designers paved the way with interactions like Pull to Refresh that quickly became not only widespread, but expected by users (and in this case, open sourced).

These types of interactions delight users because they are the by-product of designers anticipating user needs, and going above and beyond to help them through the experience. They’re often so subtle, that most users won’t be consciously aware of them until after they’ve fulfilled their purpose.

Guiding Along & Enhancing an Experience

The concept behind these interactions isn’t new and revolutionary, but the sophistication and complexity of modern sites and apps is making them a necessity in the digital space. Products have been incorporating smart, thoughtful design tactics for years. Thinking even of just a few objects in my own home, there’s subtle yet brilliant features that make life a little easier.

Vacuum cleaners from Dyson have a small hook at the bottom and the top that you use to wrap the power cord around once you’re finished vacuuming. The next time you’re ready to vacuum your house though, the top hook swings downwards to allow the whole bundle of power cord to come loose at once. Cleaning isn’t something anyone’s particularly excited to do, so removing small inconveniences like having to unwrap the cord makes a Dyson a little less painful to use each time.

Breville has won me over with just about all of their kitchen appliances because of this very carefully tuned attention to detail. Their Smart Toaster is a product clearly designed with a great deal of empathy for its user. It includes a button simply labeled “A bit more” that does exactly what you would expect – the bread is lowered to toast again for a few more seconds. Among other features, it also has a “Lift & Look” button, and a progress bar indicating how long is left in the toasting process. As the designers of the product explain, these thoughtful features comes from considerable user testing and feedback.

My headphones of choice in the office here at Teehan+Lax are Urbanears, and aside from delivering some good sound, they have a pretty clever, if unfortunately named feature called the Zound Plug that allows another person to plug in a set of headphones into your Urbanears. It negates the need for any sort of headphone splitter and makes it nice to share a movie or TV show with a friend on a flight or long transit ride.

Ultimately, the sum of all these small features don’t amount to much, but paired with a killer core product they can move a product from good to great. Paul Bennett of IDEO gave a talk at TED in 2005 and sums it up quite well: “…design need not invoke grand gestures or sweeping statements to be successful, but instead can focus on the little things in life.”

Based on the recent 4.2.1 update, it includes all the elements you need to design proof-of-concepts or production ready assets. The last version of this file was riddled with issues like blurry edged buttons and incorrect “bevels”. These issues have been addressed as best they can using Photoshop’s shape layers and layer styles. If you’re modifying any of the vector elements be sure the shapes are sitting on full pixels or your assets will begin to look blurry.

Pay whatcha’ like

We’ve always just created this file for ourselves and shared it freely. It takes a good deal of time to create and maintain but it saves us a lot of effort on projects and pitches – we hope it does the same for you. So, this time around we’re asking anyone who actually gets some use out of it to pay whatcha’ like. Hate it? Don’t pay anything.

Download The iPad GUI PSD Here

License: This file may ONLY be used for mocking up iPad apps. No, can’t be used in a theme to sell or go in ads for your new app or use it to build your Web site. It is a tool for designers, that is it.

You can follow Geoff and Teehan+Lax on Twitter.