SER594 Lecture 10

Human Computer Interaction
UI Design
(201904)

Transcript

1. SER594 Human-Computer Interaction Lecture 10 User Interface Design Javier Gonzalez-Sanchez, PhD javiergs@asu.edu javiergs.engineering.asu.edu Office Hours: By appointment
2. UI Design • Cognitive Engineering • Usability Engineering • Software Engineering
3. Cognitive Engineering
4. Cognitive Engineering 1. Cognitive Psychology • Understand human action and performance • (memory, perception, attention, thinking process) 2. Engineering of systems • Goal: pleasurable engagement
5. Example A • Knowledge/Thinking • Memory • Perception • Attention
6. Example B
7. Goal, Intention, Action
8. Goal, Intention, Action 1. Psychological variables • Goal (person wish) and, • Intention (decision to act) 2. Physical variables (for execution) • Controls 3. Mapping psychological and physical variables 4. HCI is about the physiological, SE usually worry about the physical.
9. Mapping • How much intelligence should be present? • How to determine the proper level ? ( too specialized vs too primitive) • Whether or not provide feedback? • Is this feedback?
10. Mapping Tradeoffs • Short-term memory (5 slots, each item decays with a half-life of 1.5s) • Information vs time (confusion vs completeness) • Users do not read • First and second order issues (for whom?) PS. Separate interface from the system
11. Example A
12. Example B
13. Example C UI Text
14. Usability Engineering
15. Items to be considered: • Usability requirements Usually related with multiprocessing (real-time) • Standards, UI design (structure): feedback, performance, high-level and low-level details, • Affect and human (subjective) factors: color, pictures, etc.
16. SER 516 Project
17. SER 516 | Project 2
18. SER 516 | Project 2
19. Another Solution
20. (free) Tools Appeal: There is not a requirement for using an HTML editor!
21. Login A
22. Login B
23. Login C
24. Screen 1
25. Screen 1
26. Screen 1
27. SER 516 | Project 3
28. SER 516 | Project 3
29. SER 516 | Project 3
30. Software Engineering
31. UI Testing • 50% code is UI • 50% development time is IU development time. • What about testing? • How to test a GUI ?
32. UI Testing • The Robot class in the Java AWT package is used to generate native system input events for the purposes of test automation, self-running demos, and other applications where control of the mouse and keyboard is needed. • The primary purpose of Robot is to facilitate automated testing of Java platform implementations.
33. UI Testing • Robot robot = new Robot(); • robot.delay(4000); • robot.mouseMove(40, 130); • // left click robot.mousePress(InputEvent.BUTTON1_MASK); robot.delay(200); robot.mouseRelease(InputEvent.BUTTON1_MASK); robot.delay(200);
34. UI Testing • // type robot.delay(40); robot.keyPress(i); // robot.keyPress(KeyEvent.VK_SPACE); robot.keyRelease(i); • // run String command = "notepad.exe"; Runtime run = Runtime.getRuntime(); run.exec(command);
35. Homework 1. Read the following papers: • Cognitive Engineering – D. Norman • Why UI are Hard to Implement – B. Myers 2. Learn to use Java Robot class
36. SER594 – Human Computer Interaction Javier Gonzalez-Sanchez javiergs@asu.edu Spring 2019 Disclaimer. These slides can only be used as study material for the SER594 course at ASU. They cannot be distributed or used for another purpose.