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 (7.9MB)

(Thanks to Finn O’Hara for the photo)

While Apple won’t be blessing Canada with the iPad until later this month, that hasn’t stopped some of us from crossing the border and heading directly to the nearest Apple Store. I didn’t take the road trip myself, however I was the beneficiary of one and over the past 2 days, I’ve been using my iPad quite frequently (in fact, most of this post was written using the Wordpress App).

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×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.

Download The iPad GUI PSD Here (24MB)

(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.

It seems the screens we shared of an alternative home screen for the iPhone created some buzz. We had no intention of taking it any further than a blog post but we figured this was something worth seeing through.

We got in touch with Jay Freeman a.k.a saurik. He’s the guy behind Cydia, an application for jailbroken iPhones that allows you to browse and download apps outside of actual app store. He’s crazy smart, passionate and geeky – three things we love here at T+L. Jay is going to be instrumental in making this happen.

If you haven’t already figured it out, getting this on your phone will require you to jailbreak it. That may not be an appealing option for many, but for the 2 million plus out there who have already done it and for those that are comfortable with doing it, this can be a reality.

The app and the underlying technology to make it happen are still in development so what comes out the other side will differ from what we originally proposed. The biggest change will initially be that it will render only on the lock screen. We went down this road for a number of reasons, primarily because of its relative ease of implementation, though there’s nothing easy about it. Jay is creating a framework to write custom lock screens called Cydget. Our concept will act as the guinea pig.

No word on an actual release date yet due to a last minute crash bug, but from what we hear it’s not far off. We’ll make an official announcement once it’s available. You can follow @teehanlax,
@gteehan and @saurik if you’re looking for more detail since we tend to tweet about this stuff more frequently than we blog about it.

I’d have loved for this post to be the introduction of our latest iPhone application. An application that introduces a new default optional home screen. A screen that doesn’t require you to scan for red dots with numbers inside of them. Instead it would display information and notifications of things that are new and relevant to you. We’ll all have to keep dreaming for the time being. Unless you’re willing to jailbreak your phone it simply isn’t possible to develop and implement this type of hostile UI takeover using the iPhone SDK.

Until then (we’re doubtful that sort of freedom will ever be available) Here’s how we might design a new home screen.

You can see from the screens it’s essentially just a scrollable list of applications and notifications. We envision it behaving in much the same way that the list view does in the Calendar application. By default it may track things like missed calls, unread emails and calendar events. But what if users could allow other apps to feed into this screen as well? If I’m a Facebook junkie I’d be able to tell the Facebook app to include certain feeds on my home screen. If I was a frequent traveler I may include the Tripit app to show me my upcoming trips. The options would only be limited by what apps you have installed.

Update: The demand for this has been too great to ignore. We’re building a working version of this. More details and screens to follow. You can follow us at twitter.com/teehanlax

A scrollable screen of the stuff that matters to me.

Application preferences would allow users to include certain feeds on their home screens.

Jon had mentioned (as did Drew in the comments) he’d like this info without having to unlock the phone. I agree. If only development were this easy.

Yesterday Jon visited the BNN studios to chat about the Palm Pre. For those not in the know, it launches today. Watch the video for his thoughts.