SER594 Lecture 10

SER594 Lecture 10

Human Computer Interaction
UI Design
(201904)

B546a9b97d993392e4b22b74b99b91fe?s=128

Javier Gonzalez

April 26, 2019
Tweet

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.