I wrote this article, Creating Usable UI—Buttons and Interactive Dialogs, for Palm webOS Developer Portal. I walk through the Enyo button setup, the proper use of color and text, and how best to use buttons in intuitive, consistent user dialogs.

This is written for the webOS’s very own enyo.js framework, however, the major contents should apply to any web and app development so please take a look!

Thanks!

p.s. In case you don’t know – I am a developer relations engineer at Palm (acquired by Hewlett-Packard). As you may know, the best-yet-most-unfortunated mobile-platform, webOS’s future is unknown in this moment…

A few month ago, after I was saw the impressive web wireframes templates and iPhone stencil created with Google Docs by Morten Just, on Docs blog, I started playing with this Google’s new addition to the Docs family, Drawing, to copycat this idea and made a Palm Pre stencil.

So here you go! You can check out my Palm Pre stencil on Google Docs.
If you’d like to have your own copy, sign in your google account, then:
Choose file > make a copy

You can drag or copy the UI widgets to the white canvas (printable area). To edit text, you need to ungroup the object first, by selecting the UI widget to be editted and go to Format > Ungroup (you may need to repeat ungrouping grouped objects) then double-click the text to edit.

Also, I labeled each UI objects to match the Mojo UI Widget names so developers can reference the stencil and code easily!

I just noticed the 2nd proposal for Mobile Firefox UI was posted, (dated Feb.8).

This screenshot is for touch-screens, by looking at its dimension (240×320), it is almost obviously made for iPhone.

Buttons are overlaid at bottom and by tapping it activates URL bars and more options, including refresh and bookmark.

Personally, I think they need to redo the icon designs. This can look much nicer.

Source: Mozilla Links

WebCredible has this great article about usability on mobile web, 7 usability guidelines for websites on mobile devices. With actual examples and screenshots, pros and cons of each are explained nicely and clearly.

The seven guidelines are:

1. Meet user’s needs quickly
2. Don’t repeat the navigation on the every page
3. Clearly distinguish selected items
4. Make user input as easy as possible
5. Only show essential information
6. Place basic browsing control
7. Design mobile-friendly layouts

Do they seem to be common-sense to you?
Yeah, but trust me, creating mobile web pages following the guidelines is not as easy as it appears to be. Mobile web is not just a dumb-down version of its desktop web sites, as some of you may think. Mobile web has whole new purposes!

By the way, I am glad to see Yahoo!’s oneSearch is used as an example for the “meet users’ needs”. We’re working really hard to provide the best mobile experiences to you!!!