Web Widget Best Practices

As with information architecture for standard web pages, designing the user experience for web widgets and iPhone apps is a similar process, but with the key difference being the size of the area you have to work in.

Compared with a screen resolution of around 960x640 for standard screens, the iPhone screen resolution is around 320x480 pixels. In real terms, the diagonal widescreen display of 3.5 inches for the iPhone is dwarfed by the 17” plus LCD screens that are popular today.

As a consequence of this significant loss of screen reals estate, the need to focus on key messaging, streamlined processes and simpler interfaces grows in equal significance. Indeed the key difference with a widget or iPhone application is the common focus on a single process or function set.

At Wiliam, the focus is on three key areas:

1. Functionality. What is the widget supposed to do?
Clearly defining the business focus leads to a focused and clear design that supports core capabilities in an engaging and appealing way.

2. Content. How can content and images be effectively displayed?
Readable fonts, short descriptions, brief and to the point headings and language all support the user to do what they need to do.

3. Usability. How can the widget be made appealing and easy to use?
The aim for the user here is to remove clutter and ease the user’s path through the widget. Use larger fonts, buttons and controls that simplify the interface. Structure lightweight interactions that utilise selectable options and values. Create lightweight text entry using auto-completion and pre-filled text fields.

The overriding concern is to create an experience that does not overwhelm the user with too many choices or tasks and annoying extraneous details. Keep it focused on clear choices and actions and you’ll find that your users will keep coming back.