Posts Filed Under User Interface

iPad GUI PSD

Geoff Teehan
Feb 1 121

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)

Facebook Privacy Settings

Jon Lax
Dec 11 3

I don’t use Facebook much anymore so I just saw the new privacy settings prompt when I logged in today.

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

Facebook privacy

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?

Privacy settings in Facebook

After last week’s announcement of the Kindle coming to Canada I re-kindled (get it) a purchase decision I had started several years ago when I first saw a Sony e-Reader at CES.

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.

Startup screen Kindle

Amazon Startup

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.

    kindle1

    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.

Image

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. Read the rest of this entry »

iphone_home_build_preview

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.

iPhone Needs a New Home

Geoff Teehan
Sep 22 267

iphone_home

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

iphone_home_all
A scrollable screen of the stuff that matters to me.

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

slide_unlock

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.

bnn_jon_palm_pre

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.

I want my scrollwheel back!

David Gillis
Aug 26 5

iphone_scrub

Two steps forward, one step back. That’s how I feel about the crappy media scrubbing interface built into the iPhone, iPod touch, and I guess pretty much all touch screen-based media devices. Ever since I “upgraded,” I’ve missed my scroll-wheel.

The playhead/timeline widget is frustrating to use and doesn’t facilitate navigation of media with any real precision.

What’s worse, the level of navigational precision decreases in proportion to the length of the audio or video file. That’s because more time gets mashed into the same 1.8’’ of scrubbable timeline space. This is really apparent for things like podcasts, audiobooks, movies, etc.

There are 2 problems here:

  1. the UI requires me to use a course-grain input method (my finger on a small display) to control a fine-grain input mechanism (timeline/playhead).
  1. There’s a fixed, linear mapping between input and output. In fact, they’re one and the same: input = output.

    The scrollwheel doesn’t have these problems because a) the input method and interface mechanism are both course-grain, and b) input and output are only loosely coupled.

    Let me explain b) a little better. The scroll-wheel is an example of an indirect, or mediated interface. I manipulate the wheel, which in turn affects the playhead’s position along the timeline. At the end of the day, this means that revolutions on the scrollwheel can translate into an increment of time that’s absolute vs. proportional to the duration of the media file.

    Apple designers even inserted some really smart code into this mediation layer that let me use other cues on the scrollwheel—like velocity and acceleration—to control how fast or slow playhead moved along (like shifting gears). It works really well, and in my opinion was key to the success of the iPod early on. (Do you remember the first time you used the scollwheel on an iPod? I do.)

    It’s worth pointing out that Apple could essentially make a touch-screen version of the scroll-wheel interface for iPod Touch and iPhone.

    I’m not holding my breath…

Palm Pre GUI PSD

Geoff Teehan
Jul 8 42

palmprepsd

We still love pitching iPhone ideas but the Palm Pre offers us another way to present ideas that connect our clients with their customers. In light of this fact, we put together another PSD to help our designers pitch and develop polished concepts using a tool their pretty familiar with, Photoshop.

It’s put together in a similar fashion to the iPhone PSD, in that the elements are built with vectors for easy editing and scaling. We tried to capture most of the common GUI elements but inevitably we’ll be updating this as we use it more ourselves.

Update: We’ve been asked to remove the zip file that included the webOS font Coconut. The updated PSDs require CS4 and their corresponding font.

Requires Coconut
PalmPre_GUI_1_0_Coconut.psd.zip (7.3MB)

Requires Avenir
PalmPre_GUI_1_0_Avenir.psd.zip (7.4MB)

Props to Matt Fukuda for suggesting we do this. Additional thanks go to Finn O’Hara for the photo.

First off I need to commend Canada Post on improving their Web site. I can actually find out what a stamp costs for the 4 times a year I send a letter. That used to be an exercise in torture on the site. Real improvement.

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

Canada Post Tracking

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

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

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


Client Login Access our review area to see the great work we're doing. Login
Why Choose Us? Our 5 minute presentation will give you 5 good reasons. View the Presentation
labs.teehanlax.com A showcase of our ideas + executions outside of everyday client work. Enter the Lab