Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
HCI Project Overview
CS 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 proj...
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,...
Interviewing
! Interviewing to figure out the user’s goals
"In-person interviews, observations, video
"Lots of data
"Data ...
Interview data, observations
Trying to better understand the users
! Creating a User Environment Design
" A UED provides the “floor plan” of how the ch...
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, trustwo...
System Design
Our system design, SuperSciFinder, allows users to:
! Efficiently manage lab projects
" Project management f...
UED – System Design
UED – System Design
Designing to user needs
Designing features to map directly to user needs
! Citation Generator feature
" Feature: The citat...
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 Screen
Keywords & number of search results map to our user needs
! From our data, we found that users would like to...
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 professo...
Article Preview screen
Designed for the users: Immediately gives the chemist a preview of the two
sections they view first...
Article Preview screen
Designed for the user:
! Our user data indicated that the chemists were most interested in
the Expe...
Project screen
Designed for the user: The project dashboard helps the chemists manage all facets
of their project in one p...
Article View
Designed for the user: The chemists highlight and annotate their journal articles when
they print them, and t...
Evaluation
Heuristic Evaluation
Prochain SlideShare
Chargement dans…5
×

HCI - Human.Computer.Interaction Project - CS 489 / CS 449 - University of Waterloo

Lead a team project - at the University of Waterloo - to design a software prototype for a group of PhD students, based on the HCI Contextual Design philosophies of Hugh Beyer and Karen Holtzblatt; worked within a group of 5 software engineering and/or computer science students as part of the CS 489 (CS 449) course, taught by Michael Terry at the University of Waterloo.

-

The Opus Magnum of my UWaterloo Experience | Final Course Grade: 87%

• Lead a team to design a software prototype for PhD chemists; vigorously extracted tangible, data-driven user needs through Contextual Design
• Contextual Inquiry: Interviewed users, gathered requirements, vigorously extracted user needs
• Design: Managed the project; lead brainstorming, design and debriefing sessions
• Prototyping: Applied user-centered design techniques, quick prototyping, and evaluation methods

  • Identifiez-vous pour voir les commentaires

HCI - Human.Computer.Interaction Project - CS 489 / CS 449 - University of Waterloo

  1. 1. HCI Project Overview CS 489 course, University of Waterloo Talha Khalid
  2. 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. 3. Contextual Design ! Applied the contextual design technique developed by Hugh Beyer and Karen Holtzblatt
  4. 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. 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. 6. Interview data, observations
  7. 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. 8. UED – How the chemists work
  9. 9. Flow model ! Highlights roles, responsibilities, communication, and interaction between people in a workplace
  10. 10. Physical Model ! This physical model described the chemists’ environment
  11. 11. Design Phase
  12. 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. 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. 14. UED – System Design
  15. 15. UED – System Design
  16. 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. 17. Team Design – UI mockup
  18. 18. UI Design Mockup vs Hi-Fidelity Prototype
  19. 19. Search Screen Designed to help users balance keywords with number of search results
  20. 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. 21. Refined Search screen Designed for the users: Helps them immediately specify trustworthy sources
  22. 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. 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. 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. 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. 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. 27. Evaluation
  28. 28. Heuristic Evaluation

×