Slide 1

Slide 1 text

SER594 Human-Computer Interaction Lecture 10 User Interface Design Javier Gonzalez-Sanchez, PhD [email protected] javiergs.engineering.asu.edu Office Hours: By appointment

Slide 2

Slide 2 text

UI Design • Cognitive Engineering • Usability Engineering • Software Engineering

Slide 3

Slide 3 text

Cognitive Engineering

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Example B

Slide 7

Slide 7 text

Goal, Intention, Action

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

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?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Example A

Slide 12

Slide 12 text

Example B

Slide 13

Slide 13 text

Example C UI Text

Slide 14

Slide 14 text

Usability Engineering

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

SER 516 Project

Slide 17

Slide 17 text

SER 516 | Project 2

Slide 18

Slide 18 text

SER 516 | Project 2

Slide 19

Slide 19 text

Another Solution

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Login A

Slide 22

Slide 22 text

Login B

Slide 23

Slide 23 text

Login C

Slide 24

Slide 24 text

Screen 1

Slide 25

Slide 25 text

Screen 1

Slide 26

Slide 26 text

Screen 1

Slide 27

Slide 27 text

SER 516 | Project 3

Slide 28

Slide 28 text

SER 516 | Project 3

Slide 29

Slide 29 text

SER 516 | Project 3

Slide 30

Slide 30 text

Software Engineering

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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.