1.
HCI Project Overview
CS 489 course, University of Waterloo
Talha Khalid

2.
CS 489 – Human Computer Interaction
! Took this course out of
extreme interest in HCI
" Received 87%
! Lead the group project
" Lead brainstorming, design
and debriefing sessions
" Applied user-centered design
techniques, quick prototyping,
and evaluation methods
" Interviewed users, gathered
requirements, extracted user
needs
Official Course description
! Rapid ethnography (including how to
perform interviews and in situ
observations)
! User-centered design techniques,
including contextual design and low-
fidelity, high-iteration prototyping
practices (e.g., paper-based
prototyping and Wizard-of-Oz studies)
! Evaluation methods for measuring
how a design compares to existing
methods of accomplishing a task This
course defines computational artifacts
quite broadly.

3.
Contextual Design
! Applied the contextual design technique
developed by Hugh Beyer and Karen Holtzblatt

4.
Project’s Three Phases
! Understanding the user needs
" Interviews, observations, data collection
" Defining Users, Tasks, User Needs, Constraints
" Creating models of how users work (Sequence, Artefact, Flow, Cultural models)
! Designing a technological solution to meet those needs
" Generating alternative designs to meet user needs
" Choosing the best design
" Prototyping: low-fidelity
! Implementation
" Hi-fidelity prototypes of the best design
" Evaluation
! Our users: We studied PhD chemists at the University of Waterloo

5.
Interviewing
! Interviewing to figure out the user’s goals
"In-person interviews, observations, video
"Lots of data
"Data collection: Notes, Audio/Video recording
"Analyzing data
"Categorizing/Labelling data

6.
Interview data, observations

7.
Trying to better understand the users
! Creating a User Environment Design
" A UED provides the “floor plan” of how the chemists
work
! Creating models
"Flow models, cultural models, etc.

8.
UED – How the chemists work

9.
Flow model
! Highlights roles, responsibilities, communication, and interaction
between people in a workplace

10.
Physical Model
! This physical model described the chemists’ environment

11.
Design Phase

12.
Design Goals
! The system design should take these into
consideration:
" Users want to read high impact, relevant, trustworthy
journal articles
" Paper is fast, convenient, not eye-straining
" Talking to colleagues and the Supervisor is useful
" Derive info from 2 key areas in the paper (abstract,
experimental section)

13.
System Design
Our system design, SuperSciFinder, allows users to:
! Efficiently manage lab projects
" Project management features allow consolidated access to
logbook entries, journal articles
! Efficiently research journal articles
" View the abstract/experiment steps immediately
" Specify trustworthy sources in the Search screen
! Share knowledge within the chemistry lab to decrease
the failure rate of experiments
" Access other students' logbooks
" Annotate their own logbooks
" Highlight journal articles and annotate them

14.
UED – System Design

15.
UED – System Design

16.
Designing to user needs
Designing features to map directly to user needs
! Citation Generator feature
" Feature: The citation generator was designed to make it possible to write
citations with the click of a button. At the end of each project, our users publish a
paper (journal article) on the findings of their project. They keep a copy of all of
the journal articles used for that project in order to create a list of citations for the
final paper.
" User Need: The current process was deemed “tedious’ by our users, because
they had to generate citations according to the format of the journal they were
publishing in. Our citation generator allows them to select any articles they’d like
to reference in their final paper, and create a list of citations according to the
convention of each individual journal. (The algorithm of our citation generator
generates different citations corresponding to different journals).
! Article preview feature
" Feature: The quick snapshot view of an article was designed to display the three
pieces of data which are first accessed from a journal article: the abstract, the
experimental section, and the results/conclusions.
" User Need: We analyzed the areas of the journal articles which our users
highlighted, and found that these sections contained highlighted text; this
indicated the importance of these sections to the research phase of our users.

17.
Team Design – UI mockup

18.
UI Design Mockup vs Hi-Fidelity Prototype

19.
Search Screen
Designed to help users balance keywords with number of search results

20.
Search Screen
Keywords & number of search results map to our user needs
! From our data, we found that users would like to browse through the
least number of results optimized with the most number of keywords.
Full Details:
! When the user first enters keywords into the search bar, they are presented
with a list of different search combinations, each of which contains a different
number of keywords.
! The number of results for each combination provides the user with the quick
ability to determine which search combination they are most interested in.
From our data, we found that users would like to browse through the least
number of results optimized with most number of keywords. Depending on
which search combination they’re interested in, users can re-type the
keywords in the search bar if they would like to view an alternative search
combination.

21.
Refined Search screen
Designed for the users: Helps them immediately specify trustworthy sources

22.
Refined Search Screen
! Designing the Refined Search feature
" User need: Chemists only trust certain journals or professors
" This screen allows them to specify those trustworthy sources
! Full Details: The Refined Search screen allows users to refine their
original search. This screen is reached by clicking the “Refine
Search” button in the left pane. Refined Search allows users to
refine their search criteria to include specific authors (professors) or
journals. This feature was created based on user data which
indicated that the chemists trusted certain professors or journals.
Additionally, users can indicate whether they would like to include or
exclude projects or articles in the search results.

23.
Article Preview screen
Designed for the users: Immediately gives the chemist a preview of the two
sections they view first (Abstract & Experiment), when viewing a journal article

24.
Article Preview screen
Designed for the user:
! Our user data indicated that the chemists were most interested in
the Experiment & Abstract sections of a journal article
! We designed our Article Preview screen to display just these two
tidbits of information, fulfilling our user need
Full Details:
! This is the screen which displays the search results along with a preview of the
article. The user can search for journal articles by typing in keywords in the search
bar at the top.
! These results are shown in the left pane, while a preview of the journal article is
displayed in the right pane. Over here, the user is able to preview the most relevant
parts of an article – abstract, experiment, and conclusions – in order to determine if
the article contains enough relevant information on the steps, monomers, and
reactants related to their polymer synthesis project. If the article is deemed relevant
enough based on this criteria, the user can view the full article, where they are
presented with the Article View.

25.
Project screen
Designed for the user: The project dashboard helps the chemists manage all facets
of their project in one place (Journal Articles, log book entries)

26.
Article View
Designed for the user: The chemists highlight and annotate their journal articles when
they print them, and this feature allows them to do just that via our application

27.
Evaluation

28.
Heuristic Evaluation