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 1: Introduction and Scope: (PRICPE)
Due date: See the main class web page. For the electronic part, use TEACH.
Your proposal should include the following:
- Name of team members
- Project description: what do you want to do. What's interesting about your project from a usability perspective: concerns with the patient, etc. (about 1 paragraph).
- At least 3 scenarios you want to be able to support in a way that is much more usable than the system currently is for these scenarios. Each scenario should be some kind of "main" task your user would probably want to accomplish, not something trivial like just logging in. Example if your patient is "google map for the inside of a bookstore": "Scenario 1: Abby wants to find science fiction books using this app.").
- Your representative user will be "Abby". Customize her background to make her a suitable user for your project. Abby cannot be a software developer and cannot be a Computer Science student unless the student is just taking their first programming class. Turn in an edited version of customizable Abby. You'll be using this persona all term.
- You'll need to find someone to observe who is similar to the background portion of Abby's background section (as you customized it). Who do you have access to that you can observe, who is "like" Abby?
- "P": predispositions. (From the perspective of factors that could affect USABILITY, what do you know, what do you NOT know?). Sample predispositions from a prior course (under slightly different requirements).
Tentative Grading Criteria for Project 1
Graded by: Dr. Burnett graded team/description/scenarios, Lara graded the rest, Total of 30 points
- 2 points: Name of team members
- 3 points: Description, from a usability perspective
- 3 points: Suitable scenarios for Abby, for project, for class, for enough depth.
- 2 points: Suitable customized Abby.
- 2 points: Genuine access to someone "like" Abby
- 4 points: Do you actually KNOW what you say you know?
- 12 points: At least 6 examples not knowing useful UI/user related issues.
- 2 points: Completeness, did you miss any critical issues? Did you think about the users and the UI?
- -2 points (or more) for generic statements like "increasing usability makes UIs easier to use".
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.
Grading Criteria for Project 2
Graded by TA, Total of 40 points
- 25 points: Filling out every single heuristic for every question/screen, correctly
- 10 points: Included all the screens readably
- 5 points: High quality of answers: thoughtful responses for each heuristic?
- -2 or -1 points for fundamental misunderstanding or misuse of the Abby persona
- -2 or -1 points for fundamental misunderstanding or misuse of the Pat persona
- -2 or -1 points 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 you've been given permission to use them (I think this is only the CodeBubbles team).. 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.
Grading Criteria for Project 3
Graded by: TA, 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, ...)
- Make another chapter (Chapter 4) containing your results from the in-class activities to find usability issues in your project (e.g., from the Gestalt exercise). Extend this work to cover all the screens in your first two scenarios (i.e., the one you analyzed in Chapter 2, and the one you observed in Chapter 3). You may also add insights to this you find other ways, such as the TandTs, Design Principles (e.g., constraints, affordance, ...).
- 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, ....)
- Optional: If you used concepts to brainstorm about some of the prototype (below), please include a photo of these concept sketches 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.
- Sample concept, sample lo-fi prototype
- Hardcopy AND Electronic: A poster with prototype sketches for your recommended changes in the 2 scenarios you've worked in so far, as follows:
- Prioritize the bugs (as per Krug Ch 10), and list the ones you're fixing (ID and short description) on your poster.
- A sketched screen transition diagram of the prototype (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-8 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 Wednesday 5/23)
Grading Criteria for Project 3
Graded by: TA, Total of 30 points
- 10 points: Correct justifications and clear explanations of bugs / bug fixes
- 10 points: Sufficiently clear, complete, and readable lo-fi prototypes of two scenarios, with transitions/arrows
- 10 points: Poster creation and in-class poster session
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 15-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 10 minutes, 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 4:00pm)
Date of last update: May 30, 2018