Teaching interaction design patterns in the Human Computer Interaction (HCI) course

1. Teaching interaction design patterns in the Human Computer Interaction (HCI) course DušankaBošković Faculty of Electrical Engineering University of Sarajevo

2. Content • Background information on HCI course • Interaction design patterns • Teaching IDP • Assessment methods • Conclusion

3. Background • Course: Human Computer Interface, Master studies, 3rd semester, elective course • Objective: Designing HCI as approach to develop usable software • Curse content: • HCI design principles; • HCI design methods • Prototyping • Interaction design patterns • UI Evaluation

4. Background • Students assessment: • 4 Homework assignments (report type) : • Looking for an interface • Design method: Hierarchical Task Analysis • Prototype • Web Page Evaluation • HCI Project • HCI Project Questionnaire

5. Content • Background information on HCI course • Interaction design patterns • Teaching IDP • Assessment methods • Conclusion

6. Interaction Design Patterns • UI design principles are general, abstract, and quite often misunderstood (visibility, affordance, color coding) • Students learn interaction design patterns aimed to solve specific problem, learn alternatives and warnings when not to use them • TextBook: • Jenifer Tidwell: Designing Interfaces: Patterns for Effective Interaction Design, (1st edition) 2005.http://designinginterfaces.com/

7. IDP Classification • Navigation • Clear entry points • Global navigation • Organizing the content • Two panel selector • Wizards • Organizing the page • Central stage • Movable panels • Showing complex data • Overview Plus Detail • Row Striping • Commands and actions • Getting data from user

8. Interaction Design Pattern Description • Interaction Design Description: • Name, • Definition (What), • Application (When), • Purpose (Why), • Description (How) , • Examples (not code)

9. Content • Background information on HCI course • Interaction design patterns • Teaching IDP • Assessment methods • Conclusion

10. Teaching Interaction Design Patterns • Lectures • Theory behind IDP • Discussions • Design pattern and anti-design patterns examples • Labs – getting familiar with the IDPs: • Competition – how many examples of certain pattern found on the web • Recognizing IDP

11. Example IDP: Clear entry point • What: Present only a few entry points into the interfaces; make them task-oriented and descriptive. • Use when: You're designing a task-based application, or any other application used largely by first-time or infrequent users. It's also helpful for some web sites. But if the application's purpose is clear to basically everyone who starts it, and if most users might be irritated by one more navigation step than is necessary (like applications designed for intermediate-to-expert users), then don't use it. • Why: ... • How: ... [Jenifer Tidwell: Designing Interfaces: Patterns for Effective Interaction Design, (1st edition) 2005.]

12. Example IDP: Clear entry point • Examples: • Good examples, but bad as well • Good moment for interaction during lectures • Trying to avoid the examples from the textbook • Student projects and homework are excellent repository [Jenifer Tidwell: Designing Interfaces: Patterns for Effective Interaction Design, (1st edition) 2005.] http://designinginterfaces.com/firstedition/index.php?page=Clear_Entry_Points

13. Content • Background information on HCI course • Interaction design patterns • Teaching interaction design patterns • Assessment methods • Conclusion

14. Assessment methods • Students need to demonstrate acquired knowledge – but not to list and name IDP but to demonstrate knowledge of appropriate application • Assessment of IDP knowledge is embedded in assignments focused on other parts of the course: • Homework: Developing prototype • Student HCI project development • Final exam report • Although IDP are not in the focus of the assignments, the assessment rules address them directly

15. Assessment methods • Demonstrating acquired knowledge: • Homework assignment – UI Prototype using IDP • Sensor network; MyTV, SmartHome

16. Assessment methods • Student project • Focus on UI (20%); • Following design principles (50%) • Interaction design patterns • Project size (30%) • Questionnaire for the Final Exam • List all interaction design patterns used in your project • Explain the reason for using them • List IDPs that would be beneficial if developing professional product

17. Content • Background information on HCI course • Interaction design patterns • Teaching interaction design patterns • Assessment methods • Conclusion

18. Conclusion - Competences • Learn examples of UI that are in accordance with UI principles • Design UI with confidence and not by guessing • Demonstrate understanding of UI design patterns when recommending solutions for problems • Prepared for the UI analysis and evaluation: with knowledge how to recommend to fix a problem

19. Thank you for your attention! • Questions are welcomed!