Re[2]: request for sample page structure analyses

[sorry, there is a critical word-o in my previous post, here is the 
same thing with
one correction.  The outboard pane on the Bush site is on the right. 
Duh!  - Al]

>Please, for each guinea pig page, give
>
>a) a link to the page in question, and
>b) your analysis of how this page breaks down into parts
>
>The nominal asking is for people to do at least two pages.
>
>Please post your contributions before midnight UTC Sunday 24 October.
>
>Al

In the November-December issue of _interactions_, the ACM SIGCHI
journal on human-computer interaction, Kathy E. Gill has done a
comparative review of the georgebush.com and johnkerry.com political
campaign websites.

I am sorry, the contents of this issue are not on the ACM site yet.

The following is my structural description of the home pages for
these two sites, with a few points drawn from Kathy Gill's expert
analysis.

** Bush site structure

Site:

http://www.georgewbush.com/

The cut tree for the top page is non-standard in that the first cut
is to separate a right-hand visually 'outboard' panel from the more
or less classic-page structure to its left.

Topics addressed in this outboard right-most panel include
- affinity groups (African Americans [for George W Bush] etc.)
- ads for disaster relief (contributes to the 'we are in an emergency' feel)
- 'volunteer of the day' bio for high-touch feeling
- 'quick vote' invites people to indicate opinions on current issues
(but watch out if you do, the site gets in your face to do what they
want if you do this).

So first divide your canvas into a narrow region against the [not 
left but *right*]
margin from top to bottom, and a wide region against the left margin
from top to bottom.

The second cut is horizontal, but it's not what I would expect. Again
we find an 'outboard' or periperal hanger-on to the main structure.

There is a cut within the left-hand larger region left from the first
cut which pares off just a narrow region at the top of the window
frame for tasks. There are links to tasks known as "Blog, Party,
Action Center, Vote Early, W stuff." And then there is an inline task
to give your email address and subscribe to campaign bulletins by
email. The latter looks like and is placed like the search function
on a normal page.

After peeling off those two 'outboard' panes, the rest of the Bush
home page looks like a currently-classic design.

There is a horizontal cut separating a top section providing site
identification with a picture of the candidate doing something
attractive.

Then there is a vertical cut separating off a pane at the left margin
for text links From a content region to its right.

Note, however, that these two cuts are blurred in the perception as
if there is a frame with top and left panes joined and the rest (the
content zone) wrapped by this two-margin frame. This is strongly
hinted by the absence of any visible line between the top and left
panes. The corner is even rounded a bit by the 'tab' shape of the
left-most tab selector which is what nestles into the inside corner
where the top and left bars meet.

Inside the navbar there is a topic tree in the visual presentation.
This is all done with presentation effects, not structural code.
The Bush site uses an embedded table to structure the contents
of the navbar visually but misses the chance to show the internal
block structure with TBODY blocks and TH cells.

The content region has a horizontal cut through it that splits off a
tabs area at the top from a variable section below that. The tabs
present the top of a topical breakdown of what the Bush campaign
views as the issues in the race.

In the region under the tabs on the home page there is a vertical cut
between two almost equal width columns.

The left-most of these two columns is slightly wider and
news-oriented. It starts off with a 'latest pictures' section
followed by a 'latest headlines' section of links to news stories.
These are made into strongly identified pictorial rectangles.

The right-most of these two columns contains a collection of feature
thumbnails.

These features alternate between information-orientation and
action-orientation, with an action-oriented block leading off.

There is a search tool but it is relegated to the foot of the left
navigation bar.

Kathy Gill points out that this graphical block structure is
preserved throughout the site, even down to task-oriented panes such
as the form to sign up for something.

End of Bush site structural analysis.

** Kerry site structure

Site:

http://www.johnkerry.com/

This page design has a less-innovative structure. More in line with
what visitors would carry with them as expectations, according to
Gill.

The first cut is a horizontal cut across the full width of the window.

This separates a header block from a three-column region below.

Inside the head block there is a vertical cut between page
identification on the left and tasks on the right. Again there is a
signup task and a collection of site-entry tasks. Again the search
tool has been pushed off the top line to the foot of the left nav
bar. But here the signup task is above the others, which are
presented in 'tab' graphics. So this represents a horizontal cut
separating the right-hand part of the head block into over an under
sub-regions.

Moving down to the region left over below the head of the page:

Here there are a classic three columns with a narrow column of text
links summarizing the site map on the left, a larger column in the
middle and a middle-sized column filled with feature thumbnails on
the right.

The right-hand features bar is again a mix of action and information
with action leading off. But the blocks are not rigidly rotated
between action and information, just a grab bag containing both.

The main pane left in the middle of all this is headed by a topic
paragraph for the campaign. It talks to reasons why there should be a
change of administration in Washington. This is static stuff, not
appealing to the Internet lust for something new all the time, the
way the Bush site does with its 'latest' segments in this position.

Inside the left navigation bar there is an option group structure
presented visually that is not reflected in the markup.  The
options are all just separated with line-break <BR> elements
and the group-introducing labels are just body text, not given
an structural role with OPTGROUP or dt, dd options in a dl
list structure.

Also, the whole navbar is one DIV with class 'navcontainer'.

That class is OK, but there is a missed opportunity to present
the segmentation of the nav bar in a hierarchical xhtml2:nl
approximation in HTML.

Kathy Gill points out that in task-oriented pages such as signup
forms, the structure is simplified so that there are only head,
leftNav, and main panes to content with. This is rational in that
when you are on some middle step of a multi-page task sequence you
are less likely to want to bop off to a random feature on the site.
That is different from the broad range of activity predilections of
all visitors arriving at the home page.

End of Kerry site structure analysis.

** A few remarks on tone:

There is a consistent difference between the Bush and Kerry sites in
the sense that the Bush site is more oriented to pictures and action
by visitors and the Kerry site is more oriented to words and allowing
visitors to inform themselves.

The Kerry site does a better job of providing a single topic tree for
the whole site and the Bush site does a better job with getting you
to what you want to do quickly exploiting the (assumed up-to-date)
screen size to give may entry paths in parallel.

In part this reflects the relative positioning of the candidates.
George Bush has to present his case as "we need a firm hand on the
tiller in these troubled times" because he is the incumbent and one
of the strong motivations favoring his candidacy is a reluctance to
"change horses in the middle of the stream." And conversely John
Kerry has to ask voters to reflect on the last four years and get
them to question whether this is really what they want for another
four years.

So the differing posture or tone of the sites is a rational
reflection of the situation that the campaigns find themselves in
through the exigencies of current history.

Al

Received on Monday, 25 October 2004 17:16:08 UTC