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.

03 Nov
   Filed Under: Personal   

Boy, it’s been a while. I really need to update everyone on what’s up and what’s coming up.

– I’ve been working hard for the Mothership for the last months (hence the blog silence) and really enjoying the big workload. I’m very thankful to work with a lot of extremely talented people.

To get misunderstandings out of the way: I have not closed up shop, I have not relocated, and I am not working on Mac OS X Lion. Phew! This is also the reason I am not doing UI roundups and the likes for iLife ’11 or doing elaborate commentaries on Apple products. I’ll announce what I’ve worked on when it’s released, though!

– There will be new designs for Icon Designer, Cocoia and this blog next year!

Icon Resource 2 is still very much being developed! Due to Retina Display and other new developments I’ve added some more material to the curriculum which piled on the delay. I’m wrapping things up for this year, so you can spend 2011 making awesome icons and interfaces. I apologize for the delay, but it’ll be worth it.

– I’ve been doing a video series on Minecraft. Check it out: the newest part, due out this week, will be very intense. A teaser:

Check out the full series here.

– Remember Composition? Vaguely perhaps? There’ll be news on that. It’s out of my hands, since I’ve been unable to complete it, but… well, I’ll save the good news for when it’s applicable.

– Speaking of old posts: I’ll be hitting up Dreamhack Winter 2010 again, thanks to sponsors like Intel, HP and others who are facilitating Pack4Dreamhack (with full press access!). Are you there? Let’s meet! I’ll be doing another ‘packing’ post and a report from the floor.

– And, of course, there’s some neat blog posts coming up. Good Old Games on extremely small touchscreen devices? Check! Pointers on Android UI design? Check! And (hopefully) showing off some work I have been doing for a PC / PS3 / Xbox 360 game.

11 Mar
   Filed Under: News, Personal Work   

Bricky, my shirt advocating a life without Flash on iPad and iPhone (or perhaps open video itself – or happy plugins? I guess everyone can make up their own meaning) is now ready to be delivered to your doorstep.

Bricky is a very limited run. There will be no re-prints, so get it now. Printed once more at very high quality by the fine lads of BuyOlympia on genuine American Apparel shirts.

09 Mar
   Filed Under: Personal   

I tend to be harsh on Flash a lot, and I dislike it as much as the next standards-advocating (and technologically savvy) Mac user. Since I like putting my money where my mouth is, I decided to try going into February and not use Flash even once during all of its 28 days, inspired by Michael Heilemann‘s initiative to do the same. He even logged his difficulties, which I haven’t and won’t be doing.

Flash Free

For me, the conclusion after February was clear. I missed out on a few things that annoyed me intensely. Most of the things I missed out on were videos on websites like TED and the New York Times. I had some catching up to do after February. With the help of ClicktoFlash and Youtube and Vimeo’s HTML5 players I was able to watch most of the video content out there, but there is still a lot that you can’t watch without that little plugin. I also ‘missed out’ on a truckload of so-called ‘rich advertisements’, which I absolutely adored.

But the problem of going through your digital life without Flash it’s not just videos on otherwise accessible websites. Try browsing for motion design agency showreels and websites for new games without Flash. Some industries have a vested interest in Flash because it is a mature platform for graphic websites, despite advances in HTML + CSS + Javascript. And I can imagine; the Flash-less approach doesn’t only break down in some browsers, it’s simply not mature yet. Take a look at the current Macheist page. At the time of this writing, it is using 65 to 70 percent of the processing power in my early 2008 Mac Pro, equipped with eight Xeon cores.

Worse still, people hail these Flash-free websites as progress and the road to the future. With terrible performance and compatibility like that, I prefer Flash, despite its drawbacks and proprietary nature. Actually using these technologies and advacing the state of the art is great, but I hope it doens’t put these upcoming standards in a bad light. It’s worth noting, however, that a lot of these techniques are in their infancy.

I’ll be happy with a more efficient and well-performing Flash plugin for Mac, but what I want above everything is a access to the of data that is used by web plugins. It’d be great if I would’ve been able to at least view the motion agencies’ showreels (which are all in Quicktime) and read a bit about games or view some screenshots without requiring a plugin. If I do want to opt into the so-called ‘rich’ web experience, I’ll use Flash, Silverlight, or Web Plugin #4512 to render blinking text and videos projected onto cubes which fall down the screen and bounce around using realistic physics.

Microsoft Labs is doing great things with Silverlight that aren’t possible with Javascript and modern standard-based technologies (yet?), like Pivot, which was demonstrated at TED this year (Flash video – sigh). Pivot’s data, however, for at least half of the video, is the actual web, built on standards and accessible to any technology. This way, if another superior technology comes by or a plugin is no longer supported, anyone can harness the power of the existing data to replicate or even improve on the functionality that we’re so accustomed to. I like that.

There is nobody stopping you from making an iPad or iPhone application using Core Animation which browses Wikipedia like Pivot does – try doing that with all the video that is on the internet.

In conclusion, I’m actually happy to use Flash again to get at all the content I want. I’m equally happy to have missed out on the drawbacks of Flash. While before February I was convinced Flash had no place in the world, I am now a bit more relaxed about it. Flash has its place – but we shouldn’t lose track of the real goal: making the data we want to interface with accessible regardless of the technology I have on my computer, be it a phone, tablet, or PC.

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.