USER CENTRED DESIGN PROCESSES

Design & Documentation » HTML Prototypes

HTML Prototpying compared with static wireframes

Wireframes have always been part of the User Experience or Information Architect's arsenal but when it comes to Interface Developing, is there an easier way of showing interactivity?

Wireframes are a way of showing on a page how a site will lay out, and certain elements of interactivity, mainly through example content in black-bordered boxes (wire frames). This is normally coupled with a method of showing how a user might navigate through a site. Normally through 'user journeys', showing a click-through route.

I've been using HTML wireframing or prototyping on a few of my latest projects, and have had very favourable results. There are some very great positives, but also some large negatives.

What is HTML Prototyping?

HTML prototyping is, either from scratch, or using a tool such as Axure, creating a series of pages designed to show interactivity within a new site.

Essentially, if you envisage a series of static wireframes, the HTML allows the click-throughs to work. You can navigate from one page to a next in a user journey, but not throughout the entire site.

Advantages

• Done correctly, the HTML can stand as the base for the site HTML templates.
• Click throughs are easily conveyed, and are shown in the medium they will finally appear in
• Annotation can be displayed next to page elements and widgets without obscuring the items, if using mouseovers. It can, however, be confused with interaction

Disadvantages

• If you're using a tool such as Axure, the generated HTML is a good as useless for a new site build, and exists only as documentation The HTML cannot be viewed off-line, i.e. on paper.
• You can get stuck in the 'how' and don't concentrate on the 'what it does'
• It's harder to place clear annotation in a separate area, as is possible with paper wireframes
• Has a tendency to look to 'finished'.