$30 off During Our Annual Pro Sale. View Details »

SER594 Lecture 10

SER594 Lecture 10

Human Computer Interaction
UI Design
(201904)

Javier Gonzalez-Sanchez
PRO

April 26, 2019
Tweet

More Decks by Javier Gonzalez-Sanchez

Other Decks in Programming

Transcript

  1. SER594
    Human-Computer Interaction
    Lecture 10
    User Interface Design
    Javier Gonzalez-Sanchez, PhD
    [email protected]
    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
    [email protected]
    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