This design attempts
to incorporate some of the best features observed in the competitive
analysis, with particular emphasis on maintaining a consistent layout
of navigation options on every level. The focus was on browsing and
posting tasks, as in Cindy's scenario.
As indicated in
the flow design (main navigation
structure), the site is essentially heirarchical: the Entry page
leading to multiple Forums, each Forum leading to multiple Threads.
The following blocks
of navigation options / tools appear on each page:
- Basic tools (Login,
Registration, Help/FAQ, and Search)
- "Horizontal"
links to all forums. When at the forum level or below, the current
forum will be presented in a visually distinct way, to show that it
is the "current" location.
- On pages above
the Thread level, a third block will appear with links to outside
resources.
Sketch
A shows the constant elements that will appear on each page. The
blocks of functions/links are shown on the right-hand side of the page.
In addition, the top of the page presents "bread crumb" links
showing the place in the heirarchy, and allowing the user to jump back
to a "higher" level in the path followed to this point.
Sketch
B shows the entry level page. This page presents several kinds of
preview information for each of the forums:
- A flag indicating
whether the forum contains "new" messages, i.e., messages
which are more recent than the user's last login. If the user is not
yet logged in, this space remains blank.
- The number of
topics (original messages) in the forum.
- The total number
of messages (original messages and replies) in the forum.
- The date of the
most recent message.
- Two lines of
text showing the subject line(s) of the most recent message(s).
We are assuming
that this application will have around 5 or 6 (and no more than 10)
forums. Our intent is to provide a large amount of useful preview information,
while still having the entire set of forums normally viewable above
the fold on the entry page (in contrast to some of the sites viewed
in the competitive analysis).
In Cindy's scenario,
she would reach the Entry page from a link on the Simians' Tips for
New Students page. Since she is specifically focusing on housing, she
would start by scanning the names of the Forums. The preview information
would tell her that the Housing Forum has recent activity, and that
some of the most recent postings are relevant to her task. Based on
this, she chooses to enter the Housing Forum.
Note: This initial
design does not include details of the registration and login functions,
nor does it specifically address which functions can be accessed without
login. Similarly, it does not attempt to address the issue of anonymous
posting. We are assuming that a non-logged-in user will be redirected
to the login screen at the point where they select a function which
cannot be accessed without login. This may include access to anything
below the Entry page.
Sketch
C shows the Forum level. The layout closely parallels the Entry
page, with similar preview information for each Thread:
A flag indicating
whether the thread contains "new" messages, i.e., messages
which are more recent than the user's last login.
- The name of the
author and date of original message.
- The number replies
in the thread.
- The date of the
most recent reply.
- One line of text
showing the beginning of the original message.
- At the bottom
of the list, a link is provided to start a new topic (i.e., post a
new original message to this Forum).
It is assumed that
this page contains all recent original messages in this forum (e.g.,
from the past two months), rather than a fixed number. The mechanism
to access older messages is TBD.
In Cindy's scenario,
she scans this list and sees several messages of interest. Again, the
preview information helps her to judge which messages are most promising.
For instance, for her task, a message that did not yet have any replies
might be ideal. Her task involves a cycle of selecting a topic (original
message), reading some or all of the Thread, then returning to the Forum
to select another topic. The Forum page supports this by using the standard
hypertext convention to indicate which links have already been followed.
Sketch
D shows a Thread display. The central area of the screen is subdivided
to show an outline of the thread (on the left side) and the text of
the message currently being read (on the right side).
The thread outline
indicates reply-to by indentation and a line linking each message to
the one above it in the tree. (Note that this is expected to work best
for relatively simple, shallow threads; additional filtering would be
needed for complex threads. Again, the small user base for this application
suggests that "typical" threads will be relatively short and
shallow.) The user can select a message for display by clicking on its
subject line in the thread outline. The currently displayed message
will always be highlighted.
The full text of
the message appears on the right. Underneath the message appear options
to post a reply or start a new topic (post an original message). In
addition, the user may step through the thread heirarchy by selecting
"Next" (and step back by selecting "Previous").
The order in which the messages are displayed by "Next" and
"Previous" is the same as their order in the thread outline
(i.e., traverse depth-first).
For Cindy's task,
she will use both of these navigation options. For instance, she may
want to "jump" to the middle or bottom of a thread if the
subject line implies that the author of the original message has already
found a roommate. In other cases, she may simply step through the entire
sequence of messages to skim them. When done scanning an individual
thread, she uses the "bread crumbs" at the top of the screen
to return to the Housing Forum. When she feels that she has reviewed
all of the messages that seemed relevant, but has not yet completed
her task, she decides to post a new topic.
Sketches
E and F show the Composition
and Preview pages. The second page of the flow layout diagram (post
message) shows the interaction between these two pages. The competitive
analysis suggested that it is advantageous to "force" the
user to preview, since this is almost always desirable, may be accidentally
skipped if it is not the default, and does not cause significant delay
for the occasional user who doesn't want to take advantage of it. For
this reason, the Composition page provides only options to Preview or
Cancel.
It is intended to
scale the size of the "message body" block to be as large
as possible, while normally allowing the entire new message and Preview/Cancel
controls to be displayed on one screen. Since users will occasionally
write very long messages, the message body block has scroll bars.
From the Preview
page, the user may select Edit to return to the Composition page, Cancel,
or Submit. In the context of a reply, Submit will return to the Thread,
displaying the newly posted message on the right side. In the context
of a new topic, Submit will return to the Forum, showing the newly posted
message at the top of the list. In both cases, the user gets immediate
reinforcement that their post has been entered, and they get to see
that it appears in the "right" place.
Cindy takes advantage
of the unlimited message length to provide lots of information about
herself. She cycles from Composition to Preview and back several times,
making corrections and adding more details. When she finally hits the
Submit button, she is pleased to see her message at the top of the list.
When she returns
to check for replies, she scans through the Housing Forum, simultaneously
reading the topics of the new entries and looking for her own. The "new"
flag will appear on all or most of the messages above her own (depending
on whether she logged out immediately, or spent time browsing in other
forums). When she locates her original message, she can see immediately
whether she has any replies.