HCI Project OverviewCS 489 course, University of Waterloo

Talha Khalid

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 artifactsquite broadly.

Contextual Design

! Applied the contextual design technique developed by Hugh Beyer and Karen Holtzblatt

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

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

Interview data, observations

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.

UED – How the chemists work

Flow model! Highlights roles, responsibilities, communication, and interaction

between people in a workplace

Physical Model! This physical model described the chemists’ environment

Design Phase

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)

System DesignOur 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

UED – System Design

UED – System Design

Designing to user needsDesigning 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.

Team Design – UI mockup

UI Design Mockup vs Hi-Fidelity Prototype

Search Screen

Designed to help users balance keywords with number of search results

Search ScreenKeywords & 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.

Refined Search screen

Designed for the users: Helps them immediately specify trustworthy sources

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.

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

Article Preview screenDesigned 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.

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)

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

Evaluation

Heuristic Evaluation