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
   

   View Slide

2. UI Design
   • Cognitive Engineering
   • Usability Engineering
   • Software Engineering
   

   View Slide

3. Cognitive Engineering
   

   View Slide

4. Cognitive Engineering
   1. Cognitive Psychology
   • Understand human action and performance
   • (memory, perception, attention, thinking process)
   2. Engineering of systems
   • Goal: pleasurable engagement
   

   View Slide

5. Example A
   • Knowledge/Thinking
   • Memory
   • Perception
   • Attention
   

   View Slide

6. Example B
   

   View Slide

7. Goal, Intention, Action
   

   View Slide

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.
   

   View Slide

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?
   

   View Slide

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
    

    View Slide

11. Example A
    

    View Slide

12. Example B
    

    View Slide

13. Example C
    UI
    Text
    

    View Slide

14. Usability Engineering
    

    View Slide

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.
    

    View Slide

16. SER 516 Project
    

    View Slide

17. SER 516 | Project 2
    

    View Slide

18. SER 516 | Project 2
    

    View Slide

19. Another Solution
    

    View Slide

20. (free) Tools
    Appeal:
    There is not a
    requirement for using
    an HTML editor!
    

    View Slide

21. Login A
    

    View Slide

22. Login B
    

    View Slide

23. Login C
    

    View Slide

24. Screen 1
    

    View Slide

25. Screen 1
    

    View Slide

26. Screen 1
    

    View Slide

27. SER 516 | Project 3
    

    View Slide

28. SER 516 | Project 3
    

    View Slide

29. SER 516 | Project 3
    

    View Slide

30. Software Engineering
    

    View Slide

31. UI Testing
    • 50% code is UI
    • 50% development time is IU development time.
    • What about testing?
    • How to test a GUI ?
    

    View Slide

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.
    

    View Slide

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);
    

    View Slide

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);
    

    View Slide

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
    

    View Slide

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.
    

    View Slide