|
1st
interactive prototype
New
Scenarios
Changes
after Lo-Fi Testing
Storyboard
Sketch
(Yet to be Implemented)
Prototype
Overview
Screenshots
Interactive
Prototype
New
Scenarios
Scenario
1: You are working for Lobotech and need to add a company announcement
for the annual picnic to the company web site. You are going to
use the content management system to complete this task. You know
as part of your job you know that the content of company announcements
will be stored under the category AboutUS.
Scenario
2: One of your hobbies is drawing. You created a cool graphic
of one of your drawings in your spare time. You asked your boss
if he wanted to use it as the company logo. You boss thought it
was great and asked you to add the graphic to the system so it will
be available when the web master decides to use it.
Scenario
3: You are the webmaster for lobotech. You recently attended
a HCI talk and realized that your company's use of green for links
is a poor choice. All the links should be blue. You are now going
to use the content management system to change the link color.
Scenario
4: You are the head of Human Resources for Lobotech. You asked
an underling to put a company announcement for the annual picnic
on the company web site. You now want to check that addition to
the company web site before it goes live.
Changes
after Lo-Fi Testing
·
replaced the term background with graphic (screen shot(ss) -
2)
·
reduced number of options available from the first page (ss-2)
· set the editor's console apart from the other options (ss-2)
· provided an indication of how many items are waiting for verification
(ss-2)
· added an overwrite function for graphics (ss-2)
· separated category selection for working with text from the action
user wants to do with the text (ss-3 and ss-4)
· made interface for working with text and working with a style
sheet consistent and more closely associated with task flow(ss-4
&ss-6)
· Changed interface for adding graphics so user can see all the
options at one time (ss-7)
· Put additional navigation into the system after confirming an
addition, modification, or deletion has occurred to help the user
determine where to go next (ss- 8)
· Plan to rename the editors to distinguish the console from other
editing activities (see sketch)
· Plan to make editor's console mode clear (see sketch)
· Plan to add instructions to each page to tell user what they need
to do at each step (see sketch)
Storyboards
For
Scenario 1
http://www.sims.berkeley.edu/academics/courses/is213/s01/projects/P3/storyboard/scenario1.ppt
For
Scenario 2
http://www.sims.berkeley.edu/academics/courses/is213/s01/projects/P3/storyboard/scenario2.ppt
For
Scenario 3
http://www.sims.berkeley.edu/academics/courses/is213/s01/projects/P3/storyboard/scenario3.ppt
For
Scenario 4
http://www.sims.berkeley.edu/academics/courses/is213/s01/projects/P3/storyboard/scenario4.ppt
Sketch
(Yet to be Implemented)
We
included one sketch that shows our current idea for renaming the
editor's console. The new name is verification console. This sketch
also depicts how we are going to distinguish the verifying mode.
First, there is a title at the top in bold that states verification
console. In addition, the background of the console is a different
color then any other pages in the system. Finally, we show how we
plan to use instructions in the interface help the user through
the system.
Prototype
Overview
Overview
of the UI
The UI that was implemented for the
first interactive prototype is simply a recreation of the paper
prototype in HTML and JavaScript. We anticipate that the final version
of the UI will also be created with these languages, so subsequent
iterations will simply focus usability and perhaps add a bit of
graphic design polish.
While the output is primarily simple
HTML, the way the HTML is created for the browser not done in the
traditional manner. Instead of incorporating every design element
into each document, we chose to cleanly separate the application
from its presentation. In essence what we did was to use Cold Fusion
to dynamically generate form controls that were populated with the
values that were appropriate for the user at the given stage of
application use. Using these skeletal documents, it is possible
to manage content. However, each one of these pages includes directives
to load HTML documents before and after the form controls appear.
These documents form the skin, or outer appearance of the system.
They also utilize Cascading Style Sheets to modify the appearance
of the text that appears within the Cold Fusion templates. With
this approach, it is simply a matter of modifying these two documents
to change the look of the entire system. The primary navigation
controls also exist within these documents, so when these are modified
the changes are also globally propagated.
What was left out and why
The Document Editing Module
is the sub-application that users will use to directly modify content
on the system. This is an open source application called EzEdit
that has been slightly modified to fit within our system. However,
this DHTML application will require a number of changes before it
is fully integrated. For example, the application offers users the
ability to upload images, but this functionality occurs elsewhere
within our system. EzEdit also tries to follow the traditional word
processing metaphor that allows users to save work by including
pressing a floppy disk icon in the upper left hand corner of the
window to their save work. Unfortunately, this convention differs
from the rest of our application because most other events are initiated
when the user presses an HTML submit button at the bottom of the
selection options. In order to provide a seamless fit into our system,
these, and other changes will need to be made to EzEdit. However,
the CMS system is still fully functional without the changes, and
no Wizard of Oz techniques are necessary to use it. Finally, the
back end portion of our application is not entirely bug free. These
will be taken care of in future iterations.
Tools
The two primary applications that
were used to build the UI were Cold Fusion Studio 4.5 and Macromedia's
Dreamweaver Ultradev 4. These tools are incredibly powerful and
useful. One of the nice features of the Dreamweaver 4 family is
the ability to visually create layers that are automatically resolved
into common HTML tables. Dreamweaver has always offered the ability
to create layers, the most effective ones in previous versions usually
had to resolve to DHTML layers, which were inevitably incompatible
with most browsers. This fact severely limited the use of this feature.
However, the new and improved Ultradev 4 makes it simple to visually
try out new UI configurations without coding a single line of HTML.
It can also act as a quick and dirty way to create wireframe pages
before committing to the final UI with graphic design embellishments.
The unanimous consensus of the
group was that in this case it made sense to utilize a minimalist
design that did not make use of any graphics for the primary navigation
or layout elements. While in the future we may include things like
Flash animations in the Help section for introductory tutorials,
we felt that simple text links would probably be the most intuitive
navigation controls for our users. Of course, we do make use of
Style Sheets to elevate the application above a bare bones HTML
look and feel.
Screenshots
Screen
shot 1 - Log in
Screen
shot 2 - main page
Screen
shot 3 - choose a category
Screen
shot 4 - choose action for a working with text
Screen
Shot 5 - DEM
Screen
shot 6 - choose action for working with style sheet
Screen
shot 7 - options for adding a graphic
Screen
shot 8 - confirmation of addition of text
Interactive
Prototype
Instructions
In
order to run the content management system, you need to use Internet
Explorer.
Type
in the following URL: http://tzo.silicongenesis.com/cmanage/login.cfm
The
login is cmarin and the password
is test44. After logging in you will
see the main page which provides navigation to complete your tasks.
(Sometimes there are technical difficulties with the system. Chris
Marin is running the system on a server at his home. Please send
Chris an e-mail if there are any problems. We intend to solve
this lack of reliability by using a computer in the Sandbox, buthat
is not up and running yet)
· One note, we have not created a submit button for working with
documents due to technical difficulties. After you work with a
document you have to press the save icon at the top
to proceed to the next page.
· You need to complete scenario 1 before you can complete scenario
4 so that the document file will be available in the editors console.
Scenarios
Scenario
1: You are working for Lobotech and need to add a company
announcement for the annual picnic to the company web site. You
are going to use the content management system to complete this
task. You know as part of your job you know that the content of
company announcements will be stored under the category AboutUS.
Scenario
2: One of your hobbies is drawing. You created a cool graphic
of one of your drawings in your spare time. You asked your boss
if he wanted to use it as the company logo. You boss thought it
was great and asked you to add the graphic to the system so it
will be available when the web master decides to use it.
Scenario
3: You are the webmaster for lobotech. You recently attended
a HCI talk and realized that your company's use of green for links
is a poor choice. All the links should be blue. You are now going
to use the content management system to change the link color.
Scenario
4: You are the head of Human Resources for Lobotech. You asked
an underling to put a company announcement for the annual picnic
on the company web site. You now want to check that addition to
the company web site before it goes live.
|