1. The Emotion Quiz Cecelia Redding Erika Zimmermann Jeff Crowe Torben Eisler

2. Introduction (1) Step 1: Split project up between members  Erika: GUI design/layout, help contents/docs  Cecelia: backend of GUI, bridge between GUI and game backend  Jeff: media implementation, project backend, game  Torben: GUI icons, generated quiz

3. Introduction (2) Step 2: Organize requirements  Using slides and notes taken during class Step 3: Initial application ideas  Preferences dialog  Quiz generation wizard  Save preferences and quizzes

4. Design – Task Analysis Focused on user requirements  What does the user need to accomplish?  What steps must they take to accomplish this?  What tools need to be provided for the user? Helped with the design of a step-by-step task completion towards initiating a quiz

5. Design – Usability Dimensions (1) Learnability  Positive transfer effect using a menu bar  Meaningful shortcuts  Layout structure that guides the user Efficiency  Shortcuts for expert users  Ability to reload previous quizzes and settings

6. Design – Usability Dimensions (2) Memorability  Shortcuts are simple and meaningful Errors  Unique error messages for all user input  User does not have to start again if error occurs in the middle of the task

7. Design – Multi-layered Appropriate for novice and expert users  Default preferences automatically loaded  Shortcut keys for expert users Children with different abilities  Time allotted for the game can be changed as needed

8. Design – User-centered Problem: due to time constraints, we only had one meeting with the users However, that meeting, e-mails and previous requirements gathered were constantly looked at throughout the design of the application

9. Design – Norman’s Model Constantly referred to Norman’s Model throughout the design process  goal, action and feedback Example:  goal: start a trial  action: click static or dynamic arrow  feedback: change to trial panel or produce error message

10. Design – Human Error Goal was to prevent mistakes from impacting the user’s task performance  Confirmation dialogs for exiting the trials or preferences page without saving  Back buttons for the quiz wizard  Data input errors do not require the user to start the task over again Error prevention does not overly restrict the user input

11. Design – Other Fitt’s Law  Large buttons and text fields Recognition vs. Recall  Saved preferences and drop-down menus

12. Implementation – Prototypes (1) Paper Prototype  Sketched the various GUI pages  High-fidelity in breadth all the features we wanted to implement were shown  Low-fidelity in depth functionality of the features were not there

13. Implementation – Prototypes (2) Computer Prototype  Used for the presentation with researchers  Maintained high-fidelity in breadth  Added high-fidelity in look-and-feel  Still low-fidelity in depth Purpose  Show the researchers what we had and gain information on what we should change/add

14. Implementation – Layout Tools Grouping  Quiz, Participant and Start sections  Preferences page White space  Between groups and around the frames Logical order  Top-down, left-right Alignment  Labels and user input fields

15. Implementation – Direct Manipulation The game provides direct manipulation of the dog (Schneiderman’s basic principles)  Physically move the mouse to move the dog  The child can continuously move the mouse  The dog moves and provides feedback immediately for the child

16. Evaluation – Task Analysis 1 st iteration focused on user requirements  What does the user need to accomplish? what tools to provide for the user 2 nd iteration focused on user interaction  Thinking aloud – What is the user doing/attempting at this point in the task?  Identified points for input restriction, tooltips, error messages, feedback, grouping layout issues, error recovery

17. Evaluation – Help Docs Used textual Hierarchical Task Analysis Broke-down tasks and subtasks to create the help docs and manual

18. Challenges Weighing transfer effects against learn ability (e.g. key shortcuts) Encountered optical illusions during some aspects of GUI/component design Keeping a user persona in mind (e.g. using descriptive and plain English error messages)

19. Questions?