ISSUE 11 - Q3 2004

GoLive - the interaction designer's hammer and nail
Prototyping with Adobe GoLive

In web development projects, HTML based prototypes have some advantages when it comes to usability testing. In this article we'll take a look at the HTML editor Adobe GoLive, which has a number of features that makes it a decent prototyping tool.

I still consider Visio the interactions designer's nail gun. It's a powerful tool, which makes it easy to build interactive prototypes in a rush. But compared to real web pages, prototypes build with Visio and other non-HTML tools have a few limitations:

It isn't possible to interact with dynamic controls such as drop-down lists in forms.
It isn't possible to enter data into text entry fields.
It's a bit cumbersome to simulate scrolling pages.

In a usability test, this might lead to problems:

If you have to ask the users to imagine things, such as typing text into a text entry field, it can interfere with the natural flow of the usability test.
It can prevent you from testing important aspects of a design, such as the wordings of options in drop-down lists.
In worst cases it can lead to false assumptions about usability problems, for example if the users seem reluctant to scroll a page, and the true reason is that the prototype doesn't clearly communicate that the page is scrollable.

While these limitation can be solved with a bit of creativity, it's sometimes more convenient to build the prototype in HTML.

Why GoLive?

As you might know, there are a lot of HTML editors out there. I find Adobe GoLive a decent editor for HTML prototyping, because it has some features, which makes it quick and easy to layout pages and carry out even wide-ranging changes during the prototyping process:

With its unique layout grid, we can drag and drop page elements onto pages without having to construct page layouts with tables or style sheets.
Its template feature allows us to do site wide changes, which is important if we need to make changes to for example a global menu.
Its component feature lets us reuse page elements, such as section menus, which we might need to update later.

In the following, we'll take a look at these and other features using the GUUUI site as a case study. I won't be able to explain every detail of GoLive, but enough to give you an idea of how GoLive works as a prototyping tool.

Creating a new project

Before we can start prototyping, we have to create a new site in GoLive.

To create a new site:

Choose File > New Site to open the site wizard
Select Single User and click Next
Select Blank Site to create a new project folder
Click Next and follow the rest of the instructions in the wizard

When we have created the new site, GoLive will show us the site window, which will contain our prototype pages. From the beginning, there is one blank page in the project folder named index.html.

The layout grid

The layout grid is what makes GoLive different from other popular HTML editors. When a layout grid is added to a page, we can drag text boxes and other objects anywhere we want on the page. This takes the pain out of using tables or style sheets to control page layouts.

To add a Layout Grid:

Open the page index.html in the project folder
Drag the Layout Grid icon from the Basic set in the Objects palette to the page, or double-click the icon to place it at the insertion point.

GoLive's layout grid, where we can drag elements anywhere we want on the page

We can now begin prototyping the GUUUI site. We'll start by adding the common elements located at the top of all pages to the layout grid using GoLive's layout text boxes.

To add a Layout Text Box:

Drag a Layout Text Box icon from Basic set in the Objects palette onto the layout grid.

Using text boxes, we add placeholders for the logo, the top illustration, and add the global menu, with the Home, Search, and About links.

The top of GUUUI mocked up using the layout grid and text boxes

Templates

If we had to change the wording of a menu item in a global menu, it would be a hassle if we were forced to modify each and every page in a project. Using templates, we can maintain elements that are displayed from page to page in a singe location.

Now that we have a page containing the top elements of GUUUI, we can turn this page into a template, which will be used by other pages in the project. When we make changes to this template, the pages based on the template will be updated automatically.

Before we turn the page into a template, we'll add another layout grid, which will hold the content of the pages to come.

The template with an extra layout grid added to hold page specific content

Next, we'll mark the new layout grid as an editable region, where page specific content can be placed onto.

To mark a region as an Editable Region:

Select the area in the page that you want to mark as an editable (in this case the layout grid we just added).
Select Special > Template > New Editable Region.

Now that we have an editable region, we want to save the page as a template.

To save a page as a Template:

Select File > Save As
Name the template
Select the file type HyperText Template (.dwt)
Choose Templates from the Site folder
Click Save

Adding pages

Now that we have the foundation of the site in place, we can start adding the actual pages to the project. We'll start with the front page, which we will create from our template.

To create a new page from a template:

Select File > New Special > Page from Template
Select a template
Click Open

On the front page, we'll put the area for the quarterly issues in the left column and the area for the weekly postings in the right column. Notice that we are only able to add content to the layout grid we marked as editable in the template. The rest of the page is locked.

The front page of GUUUI mocked up using text boxes placed on a layout grid

Next, we'll add a GUUUI About page to the prototype, which we should be able to reach by the About link in the global menu. This page is also created from our template. On the page we'll place a header, the links which make up the About section menu, and some dummy text.

A GUUUI About page mocked up

Linking pages together

Next, we want to make the About link in the global menu active. Since the global menu is located on our template page, we have to open the template and specify the location of the About page that we just made.

To modify a template:

Click the Extras tab in the site window
Double click the template in the Templates folder
Click Modify

To add a link:

Select the text
In the Inspector, click the Browse button, and select the page
Click Open

While we are at it, we'll fix the Home link in the global menu following the same procedure. Save the template, and the two pages that we have created will be updated automatically.

Components

While global menus are easily updated using templates, section menus, such as the About section menu, can be handled using GoLive's Components.

If we turn the About menu on the page we just made into a component, we will be able to reuse it on the all of the pages that make up the About section. Changes we make to the menu will then automatically be updated on all pages that use the component.

To turn the About menu into a component, we have to create a new blank page (select File > New Page). On the blank page we'll place a layout grid and a layout text area containing the section links.

To save a page as a Component:

Select File > Save A
Name the component
Chose Components form the Site Folder menu
Click Save

After saving the menu as a component, we can drag it from the Components tab of the Library palette to the About pages.

If we need to make changes to the menus on all the About pages, all we have to do is edit the menu component.

To edit a Component:

Double-click the component on the page to open the source file.
Make the desired changes and save the source file.
Click OK to update all pages that use the component.

In conclusion

If Visio is the interaction designers nail gun, GoLive is hammer and nails. But if you are going to run a usability test on a prototype, your might consider surrendering to a HTML editor. A HTML prototype is more consistent with the final web site than prototypes build with a non-HTML tool. In a usability test, a HTML prototype can facilitate a smoother flow, enable us to test more details, and reduce false assumptions about usability problems caused by the prototype.

With its templates and components, GoLive makes it reasonable easy to make thorough changes. Macromedia Dreamweaver actually does a better job on this area, but GoLive wins the match because of its layout grid. With the grid, it is considerable faster to layout pages, since we don't have to waste our time struggling with table or style sheet layouts.

Text: Henrik Olsen

"...a HTML prototype can facilitate a smoother flow, enable us to test more details, and reduce false assumptions about usability problems caused by the prototype."