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.

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.

Now that Apple’s iOS platform has had a few years to mature, it has become a major source of revenue for the company, having recently announced that they’ve paid out $2 Billion to developers. But is that enough? There’s certainly amazing potential in terms of revenue for certain apps — those that have a wide appeal, can reach a global audience and are novel concepts. But unless you’ve got a blockbuster app like the wildly popular game ‘Angry Birds’, the reality is that the practical costs of app design and development will probably outweigh the revenue potential for most developers.

There’s been a certain amount of novelty to being able to say your company ‘has an app’, but many have started to question how much it actually costs to create a native app. The most realistic estimate I’ve seen sits at around $30,000 for an entry-level app — iOS apps are quite sophisticated and, when executed well, require great care in design and development. For a $0.99 app, after Apple and the government takes their cut of each sale, you’ll end up with about $0.50 per app, so you’ll need to sell at least 60,000 copies just to break even. Want to also offer an Android or BlackBerry app as well? Some design use cases could possibly be reused, but expect around the same costs of development since the platforms don’t share any technological commonalities.

App Pricing

The major impediment to having more app developers realizing a profit on their apps is the glass ceiling that exists in terms of app pricing. You can spend six months and write tens of thousands of lines of code paired with the most beautiful design assets, but ultimately you won’t be able to price your app for much more than the hundreds of fart apps that took week and zero imagination to put together.

Why? Users are unwilling to spend more than a few dollars on apps because their perceived value is much lower than the actual value of the app. While people may not take much issue with paying $5 for a coffee, they’re unwilling to pay the same for an app that might bring them much more value.

The value of a mobile app is intangible unless it’s coming from a developer that the user trusts or has been recommended by their friends. Apple may boast that they have hundreds of thousands of apps available, but the fact of the matter is that the large majority of these apps are terrible. The end result of intangible goods in a saturated market is that developers are undercutting each other on price, trying to make up the difference in volume.

Trials and Returns

Users have to take a pretty big gamble on buying an app today. Apple’s App Store offers nothing more than a text description and up to five screenshots of the app in action as a sample of its functionality. With rich interactions and experiences left completely up to the user’s imagination, Apple recommends developers create separate microsites that show off video of the app in action, like the demo site for the app Camera+ that provides video of the app in action and an overview of its features. The issue is that these are all hands-off demonstrations of the app in action — videos can’t convey the actual interactions a user will make and the resultant performance and experience of the app. These sites also burden developers with additional creation and maintenance costs.

One of the brilliant features of Google’s Android Market is that they allow users to get a full refund within 30 days of purchase. All they have to do is give the developer a reason, and Google automatically refunds the transaction. This allows users to buy an app, and keep it if they decide it provides value, or return it if it doesn’t. The developer in turn receives valuable feedback from unsatisfied customers. The end result (theoretically) is that valuable apps will rise to the top of the charts while those that don’t deliver on their promised functionality will have to go back to the drawing boards. Empowering the users in this way could allow developers could try to charge more for their apps since users won’t have to gamble on its value. Amazon’s “Look Inside” feature works in a very similar way, allowing users to immediately get a sense of value from intangible goods, mimicking a customer’s action of leafing through a book in a brick & mortar store before purchase.

As Apple begins to think about removing software for sale from its retail stores, they need to consider how they can improve the quality and value of their platform’s apps. They have a sophisticated DRM-equipped rental system already available for TV shows and movies that automatically deletes media from a user’s devices after a certain number of days, and there’s no reason why this couldn’t be applied to app trials as well.

The Value of a Platform

One would hope that Google and Apple could boast about the quality of experience that their apps deliver rather than merely the hundreds of thousands of apps sold. As the native app market becomes more saturated, it’s becoming increasingly difficult for users to separate the good from the bad. For developers and companies assessing the mobile market, the cost of entry to native apps, as well as the fragmentation of devices available is forcing them to start to rethink their approach to mobile, with many taking the Web app road. Mobile web browsers continue to become more sophisticated to support much of the same functionality that native apps support today, making it difficult to justify investment in a single platform.

To ensure native mobile apps are a viable and attractive market to talented developers, Apple needs to take responsibility for the amount of value those developers are deriving from the platform.

Update: Geoff points out that you can, in fact, return a purchased iOS app through iTunes, but they sure don’t make it easy to find.

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:

Thanks for you patience on this one. It took a good deal longer to complete given the sheer size and level of detail the retina display has. It wasn’t a simple scale-up from the last file. It was clear as we created it that Apple has spent a lot of time considering how each element should be translated to such a dense resolution. What were single pixel elements are now two or three pixels thick and effects are exaggerated to become visible. For anyone designing for the retina display (640 x 960) it really is quite a different experience. When you work at 100% everything seems absolutely huge but small details get lost when viewing it on the device. You really need to be mindful of how it looks on the phone since your monitor displays things so differently.

The file is huge, both in file size (62.7MB) and dimension (4074 x 2986). You’ll need to work at 25% – 50% even on the largest screens to roughly grab elements before zooming into 100% for the actual work.

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.

iPhone 4 GUI PSD (Retina Display)

License: This file may ONLY be used for mocking up iPhone 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

Updated: Get the Retina version here.

Now in its fourth iteration, this version of the template has been completely redesigned from the ground up. Based on iOS4, it includes all the elements you need to design proof-of-concepts or production ready assets. Previous versions of this file we’re 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.

It should be noted that this file is still formatted for 480×320 resolution. The Retina Display version of this file will be posted once we’re able to get our hands on a production unit. We’ll also be updating the iPad version of this file, since it too needs some TLC.

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

Download The iPhone GUI PSD here

You can follow Geoff and Teehan+Lax on Twitter

(Thanks to Finn O’Hara for the photo)

The updated platform uses a higher resolution screen (960×640 as compared to 480×320). This additional resolution also means that any graphic elements need to be designed twice. One set of images for the lower resolution and optional high resolution set for iPhone 4. iOS4 still considers itself 320×480, but introduces a scale factor you can check or provide upscaled graphic assets for it to automatically use. In other words, the iOS4 requires low resolution artwork and can scale it up, but you can’t expect to simply build out a high resolution version and have the OS scale it down.

We’re currently working on updating our iPhone GUI PSD to reflect the forthcoming iOS4 update. We’ll likely release 2 new PSDs. One for 480×320 and another for 960×640. We’re going to try and make everything as pixel perfect as we can while maintaining assets as shape elements for easy scaling. We’ll be sure to post an update when it’s done.

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)

Looking for an iPad version of this file?

View iPad Sketch Elements AI

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

• How Canadian media usage patterns have dramatically changed
• Why advertising within VideoGame, Mobile and Digital Out-Of-Home channels are poised to reach critical mass, and
• Where Social Media is being harnessed to drive sales.

Prior to the conference I got a chance to discuss these topics with Eyal Zilnik from One Stop Media. He delivered the presentation for the panel I was on, Do It Digital: How The Latest Advances In Digital Out-Of-Home Bring Internet, Mobile and Social Media To Life. Eyal did an excellent job of illustrating how DOOH has changed. And it was exciting to throw ideas around with someone else who gets as excited about Digital Out-Of-Home as I do. We came to several conclusions, namely:

1. Marketers still regard DOOH as an animated billboard or a placement to run video loops (often running adapted TV spots without audio)
2. Few people understand that DOOH boards are more like desktop computer screens than they are Out-Of-Home billboards – they are integrated into a network with a unique IP and facilitate the full range of dynamic targeting we now take for granted in traditional online advertising, and
3. Few Canadian marketers have experimented with DOOH despite the low cost of participation, and fewer still have embraced the opportunity to link DOOH with mobile and social media.

These points were reinforced by the comments and questions we heard during our session. Several attendees came up to me after the conference and said they had no idea that the things we discussed were even possible. Maybe it’s because I’m interested in this topic but that came as a surprise.

To me, DOOH is much more than just another media tactic. DOOH will play a key role in the future of marketing. With the rise in smartphone usage and the recent introduction of the iPad (and the announcement of Apples’ iAd platform) consumers are moving away from the desktop. One only need look at consumer adoption of Facebook and the platform changes announced at F8 to understand that for many, social media is the backbone of current communication habits. Could a retail marketer integrate their social presence with DOOH (or their in-store signage network) and enable consumers to engage over mobile? Most definitely. The technology and systems are already in place.

My hope is that marketers will seize the opportunity to innovate and begin to create communication that does more than shout messages, but instead engage with consumers in new and profound ways.

Dave Stubbs is a member of the Emerging Platforms Council, IAB Canada