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.

We don’t normally cross-post Labs content, but this experiment is so cool we couldn’t resist. If you haven’t already, check out their latest (includes video) on the Touch Vision Interface. Combining Computer Vision and Augmented Reality Techniques, they’ve created a way for users to reach out and interact with their environment through a simple touch interface. We think there are some great possibilities here—let us know what you think!

(Also, don’t for get to follow the Labs Unit on Twitter @tllabs)

Sincerely,
Your best buddies @ T+L

The iPad 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 iPad Sketch Elements AI. This collection of common iPad elements in a sketch – like style allows us to easily and quickly mock up flows of custom wireframe screens.

Below is a full shot of all assets included in this release.

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

Download The iPad Sketch Elements AI Here

Looking for an iPhone version of this file? View iPhone Sketch Elements AI

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

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)

Since its announcement and subsequent release, the general consensus appears to be a) the battery life / speed & industrial design is unparalleled, and b) the software is somewhat limiting. I’ll definitely echo these observations, however I’ve noticed much of the criticism has been focused on issues which will undoubtable be addressed in future OS updates. Everyone is busy looking at their feet, complaining about the immediate and obvious shortcomings, when they should be focused on where Apple is going with the iPad. Make no mistake about it, the iPad really is Apple’s reconception of personal computing, however they’ve only taken the first of many steps in that direction.

“It’s just a big iPod Touch”

When Apple first announced the iPad, an audible groan echoed across the Internet. It’s just a big iPod Touch appears to be the most common reaction upon seeing the iPad for the first time, and while there is definitely some validity to that observation, it’s not exactly true. Yes, the iPad looks and feels very similar to an iPod Touch, and yes they share the same operating system (which really makes them fraternal twins). However, the iPad currently sits uncomfortably between the iPod Touch and the MacBook; Born from a smartphone and wanting to be laptop replacement, but unable to reach its full stride. It wants to run—and starts to pickup pace— but then trips over it’s own feet.

Coming from an iPod Touch or iPhone, you’ll feel right at home. Sure, the screen is roughly 4x the size, but it looks and functions more or less the same. You’ve got the singular home button on the face, the same dock along the bottom, and the same lock screen (now with 4x the unused space) . However, once you start using iPad-optimized Apps, it becomes clear that this is a different ballgame. The larger screen affords a completely unique experience, and the developer community is taking full advantage of this. It’s actually quite amazing how quickly the operating system disappears once you launch an App. The App fills the entire screen and you immediately feel like you’re holding an entirely different device. But then you try to delete something and a tiny blue dialog window appears, drowning in a sea of pixels. It feels odd and out of place, like a relic from a different era. There are all sorts of little details like this that reflect the iPads smaller-screen lineage.

You get the same feeling when you turn the iPad on for the first time, and you’re forced to tether with your computer and authorize via iTunes. Arguably, you shouldn’t have to do this with an iPhone/iPod either, but it feels even worse with the iPad. This isn’t a device that should require a separate computer. You should be able to give it your Apple ID and have everything automatically sync. Apps, email contacts, calendars… files. And this is where the iPad begins to move towards the MacBook and then stumbles. I want to save & edit files on the go, but there’s no meaningful way of managing them. While I believe Dropbox is vastly superior, Apple’s iDisk should really be the “exposed” filesystem on the iPad. It shouldn’t be an App like it is on the iPod, but a home directory that’s accessible by all Apps and sync’d across all your devices. But what happens if you’re sharing the iPad with other family members?

“The First Real Family Computer”

I’ve seen a number of people describe the iPad as the first real family computer, and I would agree that this is an apt description. My iPad will live in the kitchen and will be shared by my wife and I. However, when I started setting up my email and calendars and contacts, I realized that this wasn’t really going to work. We may want to share the device itself, however we don’t want to share applications. The iPad really needs unique user accounts, complete with independent setups. Of course, this adds a magnitude of complexity and I’m unsure if the platform can really support it. Fundamentally, the iPhone and iPod Touch were designed as single-user devices, but the iPad clearly has multi-user intentions. Being that the share the same OS underpinnings, I can see how the iPad could be weighed down by it’s resolution-deprived siblings.

I’m incredibly excited about how much potential the iPad has. I’m sure Apple will address the multitasking issues that plague it and the iPhone. I’m sure they’ll correct the odd interface holdovers its smaller siblings. And I’m hopeful they’ll introduce some sort of cloud-based solution for the file management issues. The only question is if Apple will allow for multiple users per iPad, or if they’re expecting 1 iPad per person. I have a feeling it’s the latter.

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.

Now that Apple has officially released the iPad we want to start designing for it. While Apple’s interface builder is great, it doesn’t really allow us to create custom UI elements on the fly. We decided to take a page from our iPhone GUI PSD and create one for the iPad.

The PSD was constructed using vectors, so it’s fully editable and scalable. You’ll notice there are a few new UI elements as compared to the iPhone interface. The workable screen design is formatted to 768 x 1024 so anything you design in the Photoshop file can easily be brought over to the SDK.

It’s 1.0 so I’m sure we’ll notice missing elements as we begin to use it. We’ll perodically update it to include new elements as we notice them or as they become available through any SDK updates.

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

UPDATED: A new version of this file available here

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

You can follow Geoff and Teehan+Lax on Twitter

(Thanks to Finn O’Hara for the photo)

Redesigning something as increasingly complex and widely used as Facebook is never going to be easy. People are going to complain. I’ve always felt bad for the slamming Facebook takes on UI design but unfortunately I’m about to pile on.

Here is the default screen for Facebook privacy settings

OK, pretty straightforward except what are my “Old Settings”? I setup my Facebook account a few years ago I have no clue what those settings are.

I looked at this screen for a minute or two and then by accident my mouse hovered over the radio button and it revealed what the old setting was.

[Note: sorry I didn't grab a screen cap at the time and now I can't get to this view again. ]

Why would you put a rollover on a selected radio button? I have no reason for my mouse to go near a selected radio button since there is no action I can do on that form widget.

Their account view of Privacy Settings reveals this info quite elegantly. Not sure why they wouldn’t use this for the initial prompt screen?

Here are my thoughts after spending 24 hours with the Kindle.

Ordering

I bought the Kindle with accompanying leather cover. Total cost: $352.99

Order placed November 23. Order Arrived November 24.

Packaging

The Kindle arrives in a pretty simple brown package.

Kindle Packaging

At first I was underwhelmed but I really like the “Once Upon a Time” on the side.

side of kindle box

Here is an unboxing video….

The Amazon Kindle Arrives at Teehan+Lax from Greg Washington on Vimeo.

After opening the box this is what you see.

That text on the screen is not a sticker. That is the screen! It is incredibly sharp and crisp.

USB Kindle

You need to charge it fully by connecting the micro USB to the supplied power connector.

I’m not going to cover a full tour of the UI since these shots exist elsewhere online. But here are my initial thoughts.

* Purchasing content is easy. I bought a book on Amazon.com and it appears on the Kindle within 60 seconds. Buying content from the Kindle is as easy. Great experience!

* Reading is effortless and little to no eye strain. I read for about 2 hours last night and had no problems.

* When you hold the Kindle your fingers naturally rest on two buttons.

Kindle with Fingers on Nxt Page

My natural inclination is that pressing on the left button will go back and the right will go forward but that is not the case.

Kindle with Fingers off

It’s not a big deal but I miss hit it a few times.

* My biggest issue is something that I would never have thought of until I used the Kindle. When you read a book you make note of where you are spatially in the book. You are always aware of if you are 1/3 of the way through or 1/2 or near the end. The tactile feedback of weight in your left or right hand is an important cognitive clue, it also helps your brain position passages and narrative in a physical space. I can go to a book I read a year ago and know roughly where certain passages or parts are. “I know it was in the first half of the book”.

* With the Kindle I was aware that I would need to mark passages I may want to remember. There is a very robust notes and bookmarking feature in the Kindle. You can highlight passages, makes notes or simple bookmarks. The problem is to do this, you need to enter a menu, navigate a 5 way controller and then select the passage. It takes not only 10 or 15 seconds of time but more importantly you consciously need to stop reading and do this action. It is disruptive to the experience.

* The keyboard is ass. The buttons are really tough to type on. Maybe in the future I will type more notes and use it more, for now it’s just in the way.

* The Kindle arrives with your name and Amazon account programmed. This means there is zero setup when you turn it on.

* You get a Kindle.com email address. Sending PDFs to that address will add them to your Kindle.

I will try to cover more about the Kindle Store, newspaper and magazine reading in another post.

How is it that in a time where everything is so connected and information is passed at such lightning speeds, people continue to steal, rip and defraud other members of the design community? As if somehow they’ll be able to get away with it. Yes, the internet is a big place, but its communities are still very small and well connected.

It’s obvious we didn’t design the original iPhone interface, therefore, we own no rights in respect to the recreation of its elements. But we did put in a lot of time and effort to produce the original iPhone GUI PSD, and we did it for the betterment of the community, for aspiring iPhone designers and developers everywhere, including ourselves.

Like any royalty free photography or stock vector artwork, they are designed to be used, shared and reused, all with the ethos of helping one another out. All we ask is for a little accreditation to compensate our donation of time.

The fact that the design community responded by celebrating our efforts with a ton of praise, actually motivated us to continue building more helpful tools like the Palm Pre GUI PSD.

But others looked upon our efforts with evil and greed, and took what we produced, switched up a couple small details and republished our efforts for their audience without a single bit of accreditation. A bold move from a website that’s been trusted by their readers for the originality and usefulness of their content.

There are a number of things that made it evident they didn’t create their own. The folder structures, layer names all remain the same. The dead giveaway was when they used our custom iconography.

Update: They’ve since removed the file and replaced it with separate flattened elements. Still no response from them though clearly they’ve seen this post and the related tweets.