1 / 19

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

Teaching interaction design patterns in the Human Computer Interaction (HCI) course. Dušanka Boškovi ć Faculty of Electrical Engineering University of Sarajevo. Content. Background information on HCI course Interaction design patterns Teaching IDP Assessment methods Conclusion.

mike_john
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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!

More Related