Your mission is to re-design a substantial user interface, carefully and thoroughly following the methods and principles from CS 565.
Guide your efforts by following the PRICPE process.
Project Part 2: Heuristic Evaluation (PRICPE).
Due date: See class schedule.
This is about doing "E", evaluating where problems lie in your patient UI, using an analytical method, namely Heuristic Evaluation using The GenderMag Heuristics. This will also become Chapter 2 of your final recommendations report.
- Here is the individual portion of this project installment, in Word format so that you can paste your answers into the document.
- Here is the team portion of this project installment, also in Word format for the same reason.
Tentative Grading Criteria for Project 2
Graded by **TBA**, Total of 25 points
- 5 points: Filling out every single heuristic for every question/screen in the Workflow, correctly
- 15 points: Filling out every single heuristic for every question/screen in the Detailed Evaluation, correctly
- 2 points: Included all the screens readably
- 3 points: High quality of answers: thoughtful responses for each heuristic?
- -1 point for fundamental misunderstanding or misuse of the Abby persona
- -1 point for fundamental misunderstanding or misuse of the Pat persona
- -1 point for fundamental misunderstanding or misuse of the Tim persona
Project Part 3: Your users (PRICPE)
Due date: See class schedule. For the electronic part, use TEACH
This is part of the "R", mainly from your formative empirical work, stemming from the "P" part of your proposal above. It's also part of "E". Note that since the process is iterative, it is indeed allowable to expand the "P" (research questions) as you progress with finding out more about your users.
In this part, you'll observe 1-2 people who could be your users doing one of your scenarios from Project Part 1.
- It cannot be the same scenario as you used for Project Part 2.
- This is an observation, so you should observe not only the person, but the objects, environment, etc. Since these are mostly on the screen in this case (not the physical world), think about what extra objects, environmental things, etc., apply here. eg, the Windowing system, keyboard, mouse, extra tools/apps they bring up to help them with their task (e.g., notepad? Google?). If they use something physical too (e.g., cellphone? paper?), be sure to note that as well.
- Reminder: Please avoid CS students as the users you observe/interview, unless I've given you permission to use them. You need experience learning to understand users not so much like you.
What to turn in:
- What are the research questions/goals (initially derived from the "P" in your proposal).
- Process: How did you proceed to answer these questions? Be detailed. For example, if you conducted an interview, list all the questions. Where and when did you collect the data? How did you set up to allow triangulation, etc.
- An exhaustive inventory of the elements we discussed in class:
- The people in the space
- 1. Who are they, what are they like?
- 2. What are they doing?
- 3. How are they doing it?
- 4. What do their emotions, purposes, reactions seem to be?
- 5. What problems do they encounter with their activities?
- The objects (technological and otherwise) in the space and with the people
- 1. What are the functional elements of the objects?
- 2. What are the decorational elements?
- 3. Which objects do people look for (perhaps to somehow interact with)?
- 4. Which objects do people bring with them that matter to the activities they are trying to do?
- The environment: spaces, architecture, lighting etc
- 1. What is the layout?
- 2. What is the environment like?
- 3. How does it influence the activities people engage in?
- 4. How does the environment support the objects above?
- Attach your raw data: detailed observations (verbal and non-verbal)
- With the detailed observations, point out the places that provide Results/Insights and say what they are ("I"):
- What are the answers to your research questions?
- What other insights did you get from this that are relevant to your "patient"?
What am I looking for:
- A) That you included all the elements I asked you to.
- B) That your observations data contains sufficient detail to notice something interesting, or which the average visitor would not normally see.
- C) That you derive some interesting design Insights from the data. Should be related to some real user need or activity that deserves support/attention.
- D) That you describe the experience factually, clearly, and in enough detail so that someone who has never been in the setting could clearly appreciate and understand what you saw.
Expected length: 6-10 pages, including words and sketches. For sketches, feel free to scan them in instead of drawing them on the computer.
Note: You can combine things into one file, or turn in separate files if it's easier (eg, a separate one for sketches?). The TEACH site will support several separate files.
Tentative Grading Criteria for Project 3
Graded by: **, Total of 30 points
- 5 points: Research questions/goals that are reasonable for your project
- 5 points: Thorough description of your process (how you set up to allow for triangulation, etc.)
- 5 points: Thorough description of the people in the space, objects in the space with the people, and the environment
- 5 points: Complete set of your raw data
- 10 points: Providing Results/Insights that are sufficiently detailed/numerous to lead to the Concepts phase of the project
Project Part 4: Concepts and early Prototype #1 (PRICPE):
Your team will fix some of the usability problems you've found, and show the resulting designs at Design Studio 1, for brainstorming and feedback. See main class web page for the date.
You'll turn in everything below by 11:59 pm. Make sure everything turned in is readable. Use the TEACH hand-in page.
Turn in the following:
- Electronic only: Your (emerging) report so far, as follows:
- Chapters 1-... of your report as far as you have it. (Recall, Chapter 1 is Project #1, Chapter 2 is Project #2, Chapter 3 is Project #3, ...)
- Another chapter (Chapter 4) should contain your results from the in-class activities to find usability issues in your project (e.g., from the Gestalt exercise).
If you want to, you may also add insights to this you find other ways, such as the TandTs, Design Principles (e.g., constraints, affordance, ...).
Note: This chapter is not being graded at this time, but will be graded at final report time. It's needed now so that you can refer to the bugs in it.
- Label every usability problem/bug in all your chapters with a bug tracking ID. (Not a separate list -- just label them in-place in your existing chapters 1, 2, ....)
- At least three concepts to brainstorm about at least one Aspect of the prototype (below) in an Appendix. Say what Aspect of the prototype the concepts were meant to brainstorm, and which one you picked.
What a CONCEPT looks like: see slides 8-14 of the Concepts/Prototypes lecture, or sample linked below.
What an ASPECT looks like: the headings of slides 8-13.
- Sample concept, sample lo-fi prototype
- Hardcopy AND Electronic: A poster with concepts and prototype sketches for your recommended changes in the two scenarios you've worked in so far, as follows:
- Prioritize the bugs (refering to them by the IDs you gave them above)), and list the ones you're fixing (ID and short description) on your poster.
- A sketched screen transition diagram of the prototype so far (see lecture slides for examples).
- What a lo-fi prototype LOOKS like: sketched (with your pencil/paper or stylus/tablet). eg, see slide 22 of Concepts/Prototypes lecture, or sample linked above. Do NOT draw these with computer art -- just sketch them.
- Diagram must have the user task flow as per the scenario description, with arrows showing the flow from "widget" to the screen as it appears after pressing/interacting with the widget.
- Diagrams must completely cover the two scenarios you've worked with so far. This is lo-fi, so each individual screen does not need to be completely fleshed out.
- Number each screen so that you can refer to it later.
- For each bug you're fixing, briefly justify how the prototype above fixes the bugs you picked. Be specific -- refer to Bug IDs and screen #s. Eg:
- BugID #Gestalt#1: On screens #2, #5, #6, moved the tool widgets close together to show that they "go together" (Gestalt Proximity).
- Bug ID #HeuristicFlow#3: Changed workflow by moving login screens until after user explores the site: i.e., screens #15, #16, #17 now after the explanation screens #1-#14. (Heuristics: Risk, Information Processing Style).
- Feel free to annotate the prototype with these explanations if it's easier than writing a separate list.
- Expected length of poster: enough to fill up a poster, which will probably be 6-12 pieces of paper containing sketches, justifications, explanations, background. As usual, feel free to scan in sketches instead of drawing them on a computer. Make sure all electronic documents are readable.
- (The contents of your poster will become your Chapter 5.)
How you will be graded: This prototype will be graded based on how well you addressed the details I asked you for (see list in this subsection), and the "correctness" of your fixes. This score will contribute a portion of your eventual grade for the prototype portion of the project.
You can give feedback to other teams here from Design Gallery #1 (until 5/19)
Grading Criteria for Project 4
Graded by: TBA, Total of 30 points
- 10 points: At least 3 significantly different concepts.
- 10 points: Correct justifications and clear explanations of bugs / bug fixes
- 10 points: Sufficiently clear, complete, and readable lo-fi prototypes covering two scenarios, with transitions/arrows
Final Prototype (Mockups) and Team Presentation:
Due date is on the main class web page.
Turn in (1) your "runnable" Mockups prototype and 1-page "run instructions", (2) your recommendations report, and (3) your team's powerpoint presentation electronically on the due date. Use the TEACH hand-in page.
(1) Your runnable Mockups prototype plus 1-page run instructions:
- Contains all three scenarios, high-fidelity.
- Is accompanied by the same style of one-page description you turned in for Prototype #2. Simply copy that one, and update it if needed to reflect any changes since the previous hand-in.
(2) The recommendations report should contain the following:
(3) Your powerpoint file and your 20-minute team presentation (you can update it to improve it before you finally hand it in):
- (Brief, eg 1-2 minutes): Start with a brief descrption of your "patient", up to 3one-sentence descriptions of scenarios you're supporting. (From your report's up-to-date chapter 1).
- About 1-2 minutes: Your customized "Abby" persona (from your report's up-to-date Chapter 1).
- About 2 minutes: One or two interesting problems you found using the GenderMag Heuristic Evaluation. Be concrete about the scenario you were evaluating and the "facet" that enabled you to find what you found in the Detailed part of the evaluation (from your report's up-to-date Chapter 2). Say what scenario you were evaluating, show a screen you were evaluating, and what your "Abby" revealed with what facet. eg from XAI team:
- (Picture of screen) Facet: Information Processing Style. There is no information displayed other than the time steps. This seems insufficient for the user (BUG #5, HEURISTIC: Info-Processing Style), since they want to see how saliency adapts over time. Jake (Abby) looks at everything on the screen to engage in sensemaking for saliency maps:
- No information present about what the UI contains
- Looks for information in the tabs and what buttons mean, Finds nothing
- Looks for a menu, FAQ, or guide, Finds nothing
- ...
- About 2-3 minutes: One or two interesting problems you found in your observation of a real user (from your report's up-to-date Chapter 3). Briefly say what kind of person you watched and where you did it (eg, a high-school teacher in her kitchen), then go on with the one or two interesting problems you found. As in the example above, be concrete, including the scenario and the way the screen(s) in which it happened looked at that time.
- (Remainder of your presentation): Pick your most interesting scenario (most of interest to your client, who is probably here watching), and walk us through your up-to-date high-fidelity prototype showing how it works. First just go through it quickly to show the flow, then go back and walk us through it slowly, justifying each interesting design decision you made.
Spend most of your time telling us about the design decisions you made, explaining why you made each one.
Explicitly tie each decision to at least one thing from this course: a T-and-Ts, a Norman design principle, one of the Gulfs, a Gestalt principle, a user observation, your Heuristic Evaluation, or feedback you received during the Design Gallery.
- At the end of the presentation, there will be a few minutes for the client and rest of the class to give you questions/feedback, while we transition to the next team.
You can give your feedback on teams from their final presentations here (until June 7 at 2:30pm)
Date of last update: June 5, 2019