HCCL Website Conceptual Model

1
HCCL WebsiteConceptual Model

• Lei Zhang, Jamey White, and Kevin Richardson

2
Introduction

• The goal of the HCCL project is to redesign and
  re-implement the existing user interface as an
  information source for people wanting to learn
  about the AU HCCL and about HCC in general. Our
  goals are to make it look nice, feel consistent,
  be informative, and be easy to use for a variety
  of users. The client has required that we keep
  the content and information consistent and
  integrated as with the existing website. The
  current website includes information on research
  and projects, related courses offered, faculty
  and graduate students, and important
  announcement. We plan to add a page with HCC
  related links. Our other update plans include
  modifying the layout, color scheme, and
  navigational methods.

3
Lexicon

• Fortunately, we share the same vocabulary with
  the client. Dr. Gilbert knows much more about
  what he wants and how he wants it done than most
  clients will.

4
Lexicon

• Header This is defined as the banner that
  stretches across the top and includes the logo.
  The header is present in all pages and serves as
  an identifier to the site.
• Navigation Bar This includes the row of images
  below the header that serve as navigation between
  pages.

5
Lexicon

• Roll-over image An image that changes its
  appearance once an event occurs, such as a mouse
  rollover.

6
Task Scenario

• To narrow the scope of the task scenario, we
  first determined who the users are and how these
  users would be using the system.
• Through talking with the client, we found out
  that the users will be people wanting to learn
  about the AU HCCL or people wanting to learn
  about HCC in general.

7
Task Scenario (Cont.)

• To accommodate the users wanting to learn more
  about HCC in general, we replaced the homepage
  with a definition of HCC from wikipedia.org and a
  definition of what HCC means at Auburn. We also
  added a page with links to HCC related websites.
• To accommodate the users wanting to learn more
  about the AU HCCL, we moved the link to their
  current research projects to the second link in
  the navigation bar. We also moved the link for
  the people in the HCCL to the third position in
  the navigation bar.

8
Work Schedule

• Week 1
• We chose the project of HCCL user interface
  redesign and re-implementation based on the
  current website. We did an investigation into the
  users of the website. We focused on finding out
  who these users are and what function they need
  from the website.
• Week 2
• Refining requirements of the client using the
  methods of User Centered Design, we analyzed and
  refined the users requirements and abstracted
  these into standard tasks. We did the paper
  survey of Human Computer Interaction(HCI),
  focusing on webpage design to find theories on
  how to organize information in an efficient and
  user friendly manner.

9
Work Schedule (Cont.)

• Week 3
• Based on the previous requirements analysis, we
  created a prototype of the conceptual model
  according to the famous five human factors
  language, colors, layout, etiquette and tone, and
  special requirements. Our goal is to make this
  conceptual model match the users mental model.
  We used the outside in rule when creating our
  conceptual model.
• Week 4
• Based on the conceptual model prototype, we will
  design experiments for a formative study and
  analysis. We will then perform pilot tests,
  transcript the testing data, collect both the
  quantitative data and quantitative data, and draw
  conclusions from the analysis of the data.
  Finally, we will establish new hypotheses based
  on the data and conduct the redesign supported by
  the data findings.

10
Work Schedule (Cont.)

• Weeks 5 6
• Based on the redesigned system and previous
  evaluations, we will design the prototype and
  procedures for conducting usability testing.
  Applying the usability methods, such as
  performance measurement, thinking-aloud protocol,
  question-asking protocol, co-discover learning,
  and retrospective testing to the system, we will
  collect the objective and subjective data for
  further evaluation. We will then make
  conclusions about needed modifications to the
  design based on the data analysis. A redesign
  will be supported by this conclusion.
• Week 7
• The design will now be complete. We will write
  detailed documentation about usability problems
  encountered, user problems, etc. We will then
  translate the design the testing procedures into
  a research paper using the CHI format.
• Week 8
• We will share our User Interface Design with the
  class. We will also give high-level usability
  evaluation results.

11
Prototype
One goal was to maintain a consistent design
among the different pages. The images below
demonstrate our attempt at consistency for the
HCCL website.
12
Prototype

• The design was given to us by our client. It
  served as the color model for the entire site, as
  well as the banner for identification. The
  banner is located at the top left corner of the
  site, making it the first thing the user
  naturally sees.

13
Prototype

• The navigation menu provides users a way to go
  from page to page with one click. The menu
  buttons are roll-over images that change when the
  mouse scrolls over them. This lets the user know
  that it is a button that is clickable.

14
Prototype

• The original HCCL page only had 4 pages to view.
  We determined that it would be more obvious to
  the user if certain information in those pages
  were put into their own pages. We came up with 6
  total page categories Home, Research, Courses,
  People, Announcements, and Links.

15
Prototype

• The Home page provides a definition of what
  Human Centered Computing is. It then provides an
  explanation of what HCC means to Auburn
  University.

HCC definition
HCC to Auburn University
16
Prototype

• The Research page informs the user as to what
  research the HCCL is involved in. Each research
  area is categorized Spoken Language Systems,
  Advanced Distributed Learning, Usability, and
  Advance Database Systems.

Research categories and descriptions
17
Prototype

• The Courses page describes the courses offered
  at Auburn University that are related to HCC.

Courses and descriptions
18
Prototype

• The People page lists everyone involved with
  the HCCL at Auburn University. Their education
  is listed as well as a link to their personal
  website, if available.

19
Prototype

• The Announcements page provides a way for
  members of the HCCL, as well as non-members, to
  be updated on the accomplishments of the lab and
  its personnel.

Announcements list
20
Prototype

• The Links page provides users with more
  information and other sites regarding Human
  Centered Computing. Links to Auburn University
  are also available for the users convenience.

Categorized links HCCL links and AU links
21
Working Prototype

• A working model of this prototype can be viewed
  at
• http//www.auburn.edu/whitej2/hccl