11 Feb
   Filed Under: Interface Design, News, Unfiled, webOS   

It’s not a big secret that I’m a big fan of webOS’ design and premise. While my primary phone for daily use is an iPhone, I’ve used Android and webOS phones alike for extended periods of time and I always miss some of webOS’ interface polish. It’s simply a delight to use intensively.

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.

27 Jan
   Filed Under: Interface Design, News   

When Sony presented its “Next Generation Portable” device (which I’ll refer to as ‘PSP2’ for the rest of the post) and other plans for portable gaming yesterday, they proudly started their presentation with a bold slide: (images courtesy of Engadget)

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.

Continue reading…

03 Jun

It’s always a huge leap for a designer to come up with designs for a platform you’re not familiar with. I remember feeling extremely uncomfortable at first when I designed my first iPhone icons and interfaces, and while the iPad was a logical extension of the iPhone UI, it still felt like a significant step to take.

Androids and doubleTwist

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.

05 May
   Filed Under: Interface Design, Personal Work   

Steam for Mac will be available for download in a week’s time. Steam, for the uninitiated, is the world’s largest gaming platform, serving in essence as an ‘iTunes for games’. Steam lets you buy, try, and play games, stay connected with other gamers and friends, and much more. I’ve enjoyed testing the beta release of it for the last few weeks.

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.

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.

28 Jan
   Filed Under: Apple, Icon Design, Interface Design, iPad, News   

Unless you’ve been living under in a multitude of nuclear holocaust-proofed rocks, you’ve heard all about Apple’s new tablet, the iPad.

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.

Continue reading…

25 Jan

In August last year, I decided to hold a limited sale period for Icon Resource, since I was about to upgrade it with new content for existing members. I like giving people free upgrades whenever possible: Icon Resource was always meant to be an ongoing project, and it still is. However, it’s taking longer than expected to roll out the new websites. It’ll certainly be worth the wait, though!

Here’s a brief a look at the new Icon Resource – and its new brother, iPhone Resource. There’s something new for previous and new members in the works, but I’m not ready to release it yet. This only means that there’ll be that much more content for you if you’re a member: two entirely new courses on Mac / Windows icon design, including intermediate and advanced techniques.

iPhone Resource, a separate and new set of courses, focuses on making amazing iPhone icons and interfaces. It’s shorter and more concise than its big brother, but from what I’ve seen in the App Store, it’s certainly sorely needed.

You will also get a brand new member area, where you can watch course videos, review lessons and download files. An iPhone application is also in the works, but I can’t tell much about that yet. It’ll be released a bit later than the actual upgrade.

Much design love went into this new version, and all pages have been redesigned from the ground up. The new login page went through over a hundred iterations. Click on the image to view it at full size on Flickr.

I expect to roll out the entire new Icon Resource upgrade in late February or March. As an existing member, you will be notified by email (and only this time! I hate newsletter spam) when the new content arrives. The price will remain unchanged.