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.
As you might know, there are a lot of HTML editors out there. I find
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
- 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
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
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
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
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
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
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.
While global menus are easily updated using templates, section menus,
such as the About section menu, can be handled using GoLive's
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.
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