Yesterday, HP (fare ye well, Palm) announced its summer device lineup, far in advance of release. Presumably, to let developers start working on apps early and show consumers they might want to hold out on getting that Android or iOS tablet. Leaving discussion about the (lack of) wisdom of announcing now and tea-leaf reading of when we might see the competition show up out of things, I want to focus on the new devices’ hardware and share some thoughts on their user interface.

The TouchPad:

Gesture Area / “Home Button”: The TouchPad actually lacks the familiar (and brilliant) Pre / Pixi ‘gesture area’, which lets you swipe left or right and up to respectably go forward or back in navigation or open the launcher for opening apps. Several employees familiar with the matter told me that in the development phase of the TouchPad, the gesture area (or having even four of them on each side of the screen) didn’t hold up as a usable solution. The real question for developers and interface designers is how going back and forth in apps is handled now. I suspect it would be a button in the UI, much like in iOS.

Panes: While some bloggers are quick to dismiss parts of the TouchPad UI as ‘rip offs’ of iPad’s, more study reveals there’s a lot of clever work in there. Personally, I never use my iPad in portrait because Mail, for instance, is barely usable without a list of emails to easily jump back and forth for triage.

The TouchPad solves this problem with ‘grabbers’ on the toolbars of each pane. The user can easily rearrange the UI layout, either showing the email content completely, or showing a both the source list and the content. Further scrolling the email content away reveals the Mail accounts, similar to the navigation stack of the emails column on iPad. It’s a clever solution that’s implemented in all multi-pane apps on the system and never locks you in to a layout.

Notifications: Obviously, the notifications UI is one of webOS’ core strengths. Not even Android handles incoming information and user notifications this elegantly. On the tablet, they settled with bringing them up in the status bar. Android (on phones) also puts notification icons in the status bar, and with the status (wifi, battery, network, alarm) icons, it quickly turns into a bar literally filled with icons and badges. This made me a bit pessimistic about the notification handling on webOS for tablets.

Fortunately, it’s actually quite great. Notifications slide in from the top, separate from the clock and status information: something like an email would come in, show sender and subject and then slide right and fade out into a subtle white email icon. The notifications get their own, clearly demarcated area in the status bar and some can even be swiped through from there:

Overall, a very nicely designed experience. Once again, iOS looks rather bad with either only using badges or tiny, yet modal dialogs interrupting your workflow.

The Pre 3: (image by Engadget)

The Pre 3 has an IPS LCD (valuable information I got loose yesterday) screen at 800×480. I am very happy that it doesn’t use (SAM)OLED technology, as in my opinion they’re a bad stopgap to solve the LCD pixel density and power usage problem. You start to wonder what kind of contracts Apple has with Sharp, considering only Sharp and Apple currently ship devices with 960×640 pixel IPS LCD displays. I bet some of the billions in cash they spend was used to buy a lot — if not all — of Sharp’s manufacturing capacity for these extremely advanced screen panels.

That out of the way, the panel on the Pre 3 is beautiful. Its viewing angles are great, the colors pop, and it has a great black point. Representatives from Palm were very pressing in letting me know the hardware wasn’t completely final, but I believe we won’t see changes to the display quality at this point.

Size-wise (I wasn’t allowed to take pictures of it next to my iPhone) it’s almost the same size as the iPhone. It’s slightly thicker but quite slim, which is a feat considering the built-in keyboard. The screen is slightly larger (3.6″) than the iPhone 4′s. There are no plans to enable an on-screen keyboard.

The Veer:

At the hands-on area it seemed the Veer is pretty much done. It’s an impressive device: it has absolutely no lagginess, the build quality is extremely impressive. Not much to say on designing for it, as it’s the device I am least interested in, but the display quality looked good: standard density (comparable to, say, the Pre / Pixi) but nice viewing angles. Nothing to write home about.

Miscellaneous Design Thoughts and answers to Twitter questions:

When you dock your webOS device (wirelessly), it goes into ‘Exhibition’ mode, which can show things like a clock, upcoming events, notifications and photo slideshows. It’s said webOS will include a feature to intelligently switch between what to show in Exhibition based on your physical location.

Touching a webOS phone and tablet lets them ‘push’ information to each other, like sharing a webpage. This is an impressive technology — I couldn’t get any answers on what is being used for this. Presumably NFC.

TouchPad can take calls and texts from webOS phones thanks to Bluetooth pairing.

No official word on it, but HP aims for ‘global availability’ of new webOS products.

No word on UI conventions for PC / Laptop webOS.

App dock icons (and dock height) for the TouchPad / Pre 3 are 63 pixels. They’re smaller on the screen of the Pre 3, obviously, due to the much higher pixel density, but an interesting bit regardless.

It seems current icon guidelines call for realistically rendered (OS X-style) app icons, glyphs in circles for toolbar icons and colored, more detailed icons for source lists and source panes.

Designing for various screen sizes is made easier through Palm’s development model and tools, which are obviously based on web technologies like CSS. With non-pixel units it’s quite easy to ensure widgets and text scale right. Apps can be built with Palm’s new ‘Enyo’ framework to scale a multi-pane tablet view to a simple one-column view on phones. Truly a ‘universal’ approach to developing applications.

And that’s all. Feel free to leave more questions in the comments.

Now, when Sony does a bold claim like this, I get very excited. The interface they introduced in 2003 with the mediocre “PSX” product and later used as the main UI for their flagship consoles like the PlayStation 3 and PlayStation Portable was known as the “XrossMediaBar“, and despite its awkward — ‘X-treme marketing’ — name, it was (and still is) an amazing piece of work. In fact, Sony managed to innovate in the stale and extremely unfriendly gaming console interface and create something that was devoid of useless flashy crap, extremely scalable, discoverable, elegant and intuitive.

That’s why it’s no surprise that Sony has decided to outright kill the XMB in its PSP2 console and replace it with an absolute train-wreck UI that shows they lost all sense of what a good interface looks like.

What prompted Sony to kill its primary user interface, which won awards and got major praise? Some people may say that the almost childish, late-nineties ‘bubble icon’ look they have going on in the new interface (marketing-named “LiveArea”) is key to be friendlier for the touch-based interactions the new device will have. However, the Xross Media Bar was easily adjustable for touch, and even while I’d admit there’s a great argument to design a new interface around touch (after all, XMB was specifically optimized for the PlayStation controller input), departing from all of XMB’s core values is hard to justify. We can say LiveArea wasn’t made the way it is purely for making touch input easier.

However, let’s take a look at the competition Sony is facing.

The 3DS, set to release early this year, with Nintendo’s typical interface aesthetic.

… and of course iOS, the touch-based elephant in the room. Apple’s begun marketing the iPod touch as a gaming device and now has several “triple A” titles in the App Store (their actual gameplay quality remains up for debate).

(iPhone photo by Anthony Sigalas)

Ah, now we see why Sony pressured several of its (no doubt talented) interaction and visual designers to disregard their feelings and years of experience to create a saltless and hideous “me-too” interface. Sony is afraid that its sterile and modern aesthetic actually scared off potential customers, particularly the more casual gamers. I have no doubt that there may be some truth in that (I suppose Android 3.0 for tablets will be a good test of that, with its extremely geek-techy look), but to say “LiveArea” is the solution…

Actual usage of LiveArea will show how much of a failure it actually is. But for now, I mourn the loss of the mindset at Sony that led to innovations in interface design which enabled millions of users to get more out of their feature-rich consoles. To decide your interfaces shouldn’t necessarily ape those of your competitors takes balls, and I’m afraid Sony’s put all of those in LiveArea — in the wrong way.

Imagine how I felt when I was sitting at my desk, Nexus One in one hand and pen in the other, after being asked to design doubleTwist’s media player for Android. Android doesn’t have a very nice media player in terms of design (I’m carefully picking my words here – I don’t want to offend the undoubtedly hard working people at Google) and it was easy to just go the way some developers go: make an iPhone app, shoehorn it into Android, and call it a day.

We wanted something that actually advanced the state of the art. I sure as hell wasn’t going to use an entirely new platform for months just to ape another. It was a mixed blessing to have so little limitations on what constituted a ‘native’ user interface.

Android has its guidelines, but most apps (even the Google-sanctioned Twitter app) have a very ‘custom’ appearance. We opted for a look that works well on the various devices and custom ‘shells’ (notably, HTC’s terrible “Sense” interface) and arrived at this muted, native-looking yet polished visual scheme, which also helps users navigate the app in direct sunlight, where OLED screens like the Nexus One’s tend to be hard to read. Subtle usage of textured surfaces in the application also help prevent color banding on the color-limited OLED screens.

I’m happy to have this in the hands of Android users. It’s sometimes depressing to read comments on tech websites of people exclaiming: “Why would you even care about how a media player looks or works? You play music and turn off the screen!”, but I am sure there’s a lot of people who will appreciate the thought and details that went into this app. And that makes it all worth it.

The player is available on the Android Marketplace for free for a limited time.

However, the part I disliked about Steam on the Mac is the (understandably) less-than-native looking and feeling UI. While the entire application was recently redesigned (and re-engineered to utilize Webkit as its rendering engine), it still feels less than at home between the system apps.

As a fun exercise, I’ve redesigned Steam in a way that maintains consistency with its own UI conventions and values, while changing look and feel to make it more native to the Mac platform.

You can see a comparison between Steam for Mac’s UI and my redesign on flickr here.

I won’t tease you with only vapid mockups, though. While you’re here, grab my Steam replacement icon for OS X.

Steam replacement icon – 434 KB

Of course, if you have input on the mockups, sound off in the comments. Meanwhile, I am currently considering sending my thoughts to Gabe for further consideration.

As usual with a large Apple product launch, I’ve written up this post to round up the good, the bad, and the ugly of all the new interface and interaction designs that were set loose on the world by the company that’s regarded as the most influential and skilled when it comes to designing experiences. The usual disclaimer applies: iPad hasn’t hit the market yet, and thus its UI may still be subject to change or improvement.

Man, where do I begin. iPad’s made a huge step from the small and cramped iPhone screen to a crisp 1024 by 768 pixel screen, and instead of going down the road of iPhone’s (or Mac OS X’s) rather sterile and conventional interface designs, uses very ‘earthy’ metaphors that behave like their real-life counterparts. This allows for most, if not all of the conveniences modern interfaces we know from our desktop computers while retaining ease of use.

Let’s start with the home screen, then, and thus, its icons. Ah, icons. The traditional iPhone icons have taken a small step up on the iPad homescreen, to 72×72 pixels. This wasn’t public, but you can calculate this from press images. For Spotlight, the search interface, and the Settings application the icons are scaled down to 48 pixels. The same shape, gloss, shadow and lighting is used for the icons on iPad. This does help a consistently looking platform, but I’m not out on the extra spacing of icons on the home screen yet. They all look so lonely in there.

What you’ve heard here first, though, is that iPad’s OS also houses as-of-yet unused 64 and 320 pixel document icons, which makes me eager to see how the ‘filesystem UI problem’ will be solved by Apple. Obviously, iPhone OS was a great way to re-imagine computer interaction from scratch, and the whole hierarchical filesystem that confused and confounded users for so long was left out in the cold. The new and simple method was to use automatic saving and persistent data – but with iWork on the iPad as a serious content creation platform, this isn’t an option anymore. I’d love to hear people’s speculations and ideas on how Apple could solve this.

Globally, when compared to iPhone, the biggest obvious change is the relocation of toolbar buttons and controls. For iPhone, crucial controls and toolbars are placed at the bottom, where they’re the easiest to reach with your fingers when held in one hand. The iPad disregards this somewhat, and uses the desktop toolbar model. iPad’s Safari, for instance, has all its features accessible through toolbar buttons in the top toolbar:

Sometimes controls go on the bottom, though. It seems to vary from app to app, much like on Mac OS X. Interfaces overall are much more tactile though, as I mentioned in the introduction.

iBooks, for instance, uses an interface similar to the one me and David designed for Classics for iPhone. Since it got a bit of hubbub due to the (obvious) similarities, Classics is now free. I encourage you to grab it; it’s still as great an app it once was, but iBooks is certainly how we’d envisioned it to be if we had unlimited engineering power.

When you tap to switch to the iBookstore, the entire shelf rotates around and shows the store layout. Upon buying the book, the book’s cover moves toward you, the shelf rotates again and the new book gets neatly placed on the shelf, rearranging the other books automatically, and gets a nice blue ribbon to indicate its unread status. As you may expect from such extremely elaborate animation design, picking a book animates opening the book. Every single action is animated to allow for natural interaction with it.

When the discussion of electronic books comes up, people always mention the emotional connection with the feel and look of a real book. Nice typesetting, the sound and feeling of turning the pages are all big factors in this. While iBooks is not a replacement of a real book, I believe it’s certainly close enough – with the added convenience factor of having thousands of books in a device as thick as a magazine.

The natural metaphor of books is reused throughout the OS, such as in the Contacts application and the calendar. Contacts, with its index list of all contacts on the left hand side, doesn’t have page flipping, but the Calendar might. I’ve only seen it being navigated using the tiny arrows at the bottom so far, though, so I assume it doesn’t allow for this type of interaction.

Other touches of animated interaction are equally amazing. Instead of tapping a button to curl up the edge of a map in the Maps application, you actually flip the edge over yourself. When selecting emails, they all get thrown on a stack. Deselecting an email in the stack curls up the top email and sucks the deselected email back into the list. Speaking of stacks: Photos actually has little stacks of photos that you expand with tapping or pinching.

Photos also takes the scrubbing we’re familiar with from iMovie and iLife (see also: my iLife UI roundup) and applies to it to a photo album, to allow for easier and visual navigation of images. I think it’s a nice interface element, and much more efficient than Coverflow, which seems to be on the way out at Apple if you look at iPad’s conspicuous lack of it (it seems to have stuck in the App Store – no other sightings, though).

The note-taking application is still a bit of a gimmick playground. The font is still Marker Felt, which hampers legibility somewhat, and instead of a regular selected state, it appears the currently active note is displayed with a red outline in the source list on the left. It’s a friendly touch, but I feel like it’s a bit unconvincing and forced.

The Calendar application looks very nice and seems to be functionally awesome, but the corkboard texture is drab from a distance (I am not sure how this looks in the flesh). The amount of rethinking that’s been put into the calendar makes iCal on Mac OS X look rather bad, though. It looks like the best calendaring app I’ve seen so far.

The movies application is surprising and pleasing in its simplicity and amazing in its animations: movie covers fold out like a DVD to show chapters, information, and artwork, and let you play back with a simple tap. It’s gorgeous, top-class design, and so simple and obvious that it’s hard to imagine something that could do a better job at presenting information to allow the user to pick a movie to watch without getting in the way.

iWork for the iPad is interesting: it’s a first in a series of serious applications that you can use for ‘production’ work on such a device mainly geared towards content consumption.

Keynote has a black toolbar with its features accessible through popover inspectors. The presentation view lets you use a faux laser pointer (a neat touch) or draw over the slide to highlight an item. Its desktop interface was already amazing, and they’ve kept it practically intact for the iPad.

Pages and numbers, however, get makeovers in the UI department, making some things a bit more simple and graphically pleasing. Pages, for instance, has a formatting bar that slides out from under the main status bar that lets you manipulate text-editing parameters.

I think I’ll spend more time dissecting the iWork UI once it hits the shelves: there’s very little of it to be found in the galleries and movies of Apple.

The pinch gesture seems to be used a lot more in the entire UI: in Photos you expand grids with it, but you can also go back up the hierarchy by pinching out. The same can be done in books. It’s similar to what Palm did in WebOS: using universal gestures for the hierarchy navigation. Fortunately, Apple still makes going back in the hierarchy discoverable with the regular ‘back’ buttons on the top left, which remain usable. I do like the idea of using gestures for quicker navigation, which is starting to become necessary with such a big screen.

The departure from the pinstripes and blue bars of iPhone OS is something that I’m quite happy with, as it’s the first part of the iPhone UI that has started to look rather dated. In the interface of Mac OS X, the pinstripes were gradually phased out, and perhaps the same thing is happening to the iPhone. Who knows if we’ll see iPhone OS 4.0 introduced at WWDC this year with new ‘metallic’ status- and toolbars and no more pinstripes. I’d be quite happy with that.

Neat touch: the full-size keyboard of iPad has actual tactile ‘nubs’ on the F and J keys, like a real keyboard.

Another neat touch: the (surprisingly bare) iPad lock screen has a little button next to the unlock slider that turns the iPad into a photo frame.

Source lists, as we know them from desktop interfaces, are basically iPhone tableviews on iPad. I’m sure this works nicely, but the way the iPad interface represents them is very detached. In the Settings application and the Mail application, for instance, they are contained in their own ‘view’ of sorts, with rounded corners and all.

It makes me wonder why the list isn’t simply ‘attached’ to the content on the right. This feels a bit like the iPhone interface elements have simply been shoehorned into a large screen UI. To add to this, in portrait orientation these iPhone-like lists are incorporated into a new UI element called the ‘popover’, where it contrasts harshly against the dark blue. It looks a bit kludgy.

Another tiny nitpick: the tab controls for picking datasets or application modes have an inconsistent active state. When the UI is dark, the active tab is lighter than the other tabs, and when the UI is light, the active tab is darker than the other tabs. I’ll have to see how well this looks on the actual device.

Spotlight is also interesting. While all search fields on iPad go on the right-hand side, Spotlight’s search field is in the middle, since it doesn’t really have an application to go with it. The search results themselves go into a narrow column that doesn’t fill up the entire screen. It doesn’t look as polished as the rest of the OS, in my opinion, and the icons seem rather large. On the iPhone, the icons are as high as one row of search results, but on iPad the icon spans about a row and a half.

The first thing in the keynote that punched me in the face with its repugnant and inconsistent appearance was the iPod application. It resembles a bastard child of the iPhone’s iPod application and iTunes of the desktop, but fails to really take advantage of the innovations either has made. It’s full screen mode is particularly disturbing, which you can see in this image:

Really, Apple? I can see myself looking at lyrics, but can you imagine using your iPhone to listen to music and having round blobby buttons to control playback instead of a clean, glyphic overlay? I’d let it go if it was consistent with the general control layout of the main application, but those are positioned entirely differently. Let’s hope this one is still in development.

The icons of iWork and iBooks are rather bad, as well. iBooks simply has a strange combination of a glyphic symbol and a strangely textured background, while iWork’s desktop icons were placed into an icon roundrect without too much change. The Iconfactory’s solution to this for their iPhone-like desktop icon set ‘Flurry’ was much nicer.

iPhone apps can run on iPad without issue. They actually get a nice little iPhone-like frame when running at 100% size (i.e.: not blown up to the screen size).

I’m worried, however, of displaying them at this magnified size. They’re blown up to twice their regular size, which wouldn’t be a problem if the iPhone encouraged resolution-independent interface design, but almost all iPhone apps use custom controls that are designed at one size. Blowing them up will create a blurry mess of pixels. I’m curious to see how this problem will be solved – if it will be solved at all, of course.

And as a last ‘meh’: the contacts application doesn’t seem to adapt well to a portrait orientation. The book is simply scaled down from the landscape mode, and it feels rather inefficient. This is obviously a trade-off to make the UI still look natural instead of like a terribly elongated book, and I hope it’s being worked on, but regardless, it looks a bit suboptimal.

Fortunately, there’s not that much stuff in the iPad UI that I’d call ‘bad’ or ‘ugly’. Apple has shown once more that they’re at the top of their game, and the interface is sublime. If iPad had preceded iPhone, we’d all be lyrical and hopeful for a smaller device that did even a few percent of its awesome feature set. Instead, this natural evolution of the iPhone OS is being heckled by people that fail to see how extending the underlying ideas of iPhone’s UI helps interaction with ‘serious’ applications like iWork.

This was by no means a full UI roundup: as usual, there are parts I may have missed or overlooked. Feel free to add your observations in the comments. I hope to document some of the most subtle interaction and UI design finesse Apple put into iPad once I get my hands on the final product.

Check back in a few days for several Photoshop files to help you create pixel-perfect mockups of iPad interfaces, a free part of my Icon Resource design resources which will soon feature full lessons on iPhone and iPad interface and icon design.