SLIDE 1
Events and Feedback ck
- Prof. Lydia Chilton
COMS 4170 7 February 2018 No screens
Say your name
Goal 1
Events and Feedback ck No screens Say your name Prof. Lydia - - PowerPoint PPT Presentation
Events and Feedback ck No screens Say your name Prof. Lydia - - PowerPoint PPT Presentation
Events and Feedback ck No screens Say your name Prof. Lydia Chilton COMS 4170 7 February 2018 Goal 1 Build websites that suit the needs and abilities of users To accomplish a goal, users must execute an operation and evaluate the result To
SLIDE 2
SLIDE 3
What goes wrong when you provide no
no feedba eedback?
Users are confused about whether their goal has been achieved, and they continue to expend energy to accomplish the goal.
SLIDE 4
Information incorrect
What goes wrong when you provide to
too little feedback ck?
Users know something has happened, but they don’t know what. They must expend energy to find out what happened and what to do.
SLIDE 5
What goes wrong when you provide to
too little feedback ck?
BEEP
Users know something has happened, but they don’t know what. They must expend energy to find out if it’s important. else
SLIDE 6
What goes wrong when you provide too much
ch feedback ck?
I am now booking your flight I am now using Google flight search I am now typing JFK into the departure location I am now typing LAX into the arrival location I am now selecting February 26, 2018 from the departure date box
When there is too much feedback, Some of the feedback is not important to the users goal and they may ignore all the feedback.
I am now confirming the date I just selected from the Departure date box
SLIDE 7
What goes wrong when feedback
ck too late?
By the way, I booked that flight you asked for yesterday!
Users assume that no feedback means no action And they find another way to accomplish the goal.
SLIDE 8
What goes wrong when feedback
ck is not continuous?
Users have to poll the system for feedback frequently.
Your Uber is not here yet.
SLIDE 9
What goes wrong when feedback acknowledges the action but do does no not t communic mmunicate the the ne new state?
Users will continue to perform actions from the previous state
Request complete
SLIDE 10
Design goals for feedback: Communicate fu full a and c con
- ntinuou
- us information about
the re results of an action and the cu curr rren ent state e of the e system em to help people achieve their goal
SLIDE 11
Ways of perceiving feedback
SLIDE 12
How do we perceive this feedback?
BEEP
I’m sorry, Dave. I’m afraid I can’t do that.
SLIDE 13
How do we perceive this feedback?
Information incorrect
SLIDE 14
How do we perceive this feedback?
SLIDE 15
How do we perceive this feedback?
SLIDE 16
The human nervous system is designed to perceive feedback in many forms.
BEEP
Use it.
Sight Sound Smell Touch
SLIDE 17
Every time the user executes an action, the interface should provide feedback
Low-level physical actions, like pressing a key Low-level virtual actions, like clicking a button High-level actions, like buying a book Mid-level actions, like filling out a form
SLIDE 18
Low-level user actions are represented in the system as ev
events.
Action Event
Keypress event Mousemove event Mousepress event Pinch gesture event
SLIDE 19
Physical Input Events and Feedback
SLIDE 20
Ke Keypress event feedback?
SLIDE 21
Soft Keypress event feedback?
SLIDE 22
Ke Keydown event feedback?
SLIDE 23
Ke Keyup event feedback?
SLIDE 24
Mo Mousemo move event feedback?
SLIDE 25
Mo Mousedown event feedback?
SLIDE 26
Low-level Events and Feedback
SLIDE 27
Bu Button click k event feedback
Normal state
SLIDE 28
Bu Button click k event feedback
Mouseover feedback Normal state
SLIDE 29
Bu Button click k event feedback
Mouseover feedback Mousedown feedback Normal state
SLIDE 30
Bu Button click k event feedback
Mouseover feedback Mousedown feedback Mouseup feedback Normal state
SLIDE 31
How do you implement visual feedback?
Mousedown Normal state
- 1. Register an event handler on the object
- 1. Change the style
SLIDE 32
How do you implement visual feedback?
Mousedown Normal state
Will this work to change the style?
SLIDE 33
How do you implement visual feedback?
Mousedown Normal state
This way is better. Why?
SLIDE 34
Mid-and High-level Action Feedback
SLIDE 35
Feedback: Communicate full and continuous information about the re results of an action and the cu curr rren ent state e of the e system em to help people achieve their goal
SLIDE 36
What action is this the result of?
SLIDE 37
What is the new state?
SLIDE 38
What action is this the result of?
SLIDE 39
What is the new state?
SLIDE 40
What action is this the result of?
SLIDE 41
What is the new state?
SLIDE 42
How does it help the user accomplish their goal?
SLIDE 43
Every time the user executes an action, the interface should provide feedback
Low-level physical actions, like pressing a key Low-level virtual actions, like clicking a button High-level actions, like buying a book Mid-level actions, like filling out a form
SLIDE 44
Even input events and low-level events have
full and continuous feedback ck about act ctions and states
Normal state Mouseover Mousedown Mouseup Normal state
Click! Depress!
SLIDE 45
Final Thought on Feedback
SLIDE 46
Learning and interacting with systems like this
- sux. Why?
SLIDE 47
Summary
SLIDE 48
Feedback helps evaluate the result of an action
SLIDE 49
The human nervous system is designed to perceive feedback in many forms.
BEEP
Sight Sound Smell Touch
SLIDE 50
Design feedback k that: Communicates fu full a and c con
- ntinuou
- us information about
the re results of an action and the cu curr rren ent state e of the e system em to help people achieve their goal
SLIDE 51
Every time the user executes an action, the interface should provide feedback
Low-level physical actions, like pressing a key Low-level virtual actions, like clicking a button High-level actions, like buying a book Mid-level actions, like filling out a form
SLIDE 52
Low-level user actions are represented in the system as ev
events.
Action Event
Keypress event Mousemove event Mousepress event Pinch gesture event
SLIDE 53
Even low-level events have
full and continuous feedback ck about act ctions and states
Normal state Mouseover Mousedown Mouseup Normal state
Click! Depress!