Direct ct Manipulation No screens Say your name Prof. Lydia - - PowerPoint PPT Presentation

▶
direct ct manipulation
SMART_READER_LITE
LIVE PREVIEW

Direct ct Manipulation No screens Say your name Prof. Lydia - - PowerPoint PPT Presentation

Feb 18, 2024 219 likes •818 views

Direct ct Manipulation No screens Say your name Prof. Lydia Chilton COMS 4170 5 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 Co

slide-1
SLIDE 1

Direct ct Manipulation

  • Prof. Lydia Chilton

COMS 4170 5 February 2018 No screens

Say your name

slide-2
SLIDE 2

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

slide-3
SLIDE 3

Co Comp mputers: Tools for Calculation

slide-4
SLIDE 4

1963: First Graphical User Interface Ivan Sutherland’s CAD software, Sketchpad

slide-5
SLIDE 5

1968: Interaction devices for computer use. Douglas Engelbart’s mouse

slide-6
SLIDE 6

Dir Direct ct M Man anip ipula latio ion Properties

  • 1. Objects are represented visually
  • 2. Actions are rapid,

incremental and reversible

  • 3. User interacts

directly with object representations

slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9
slide-10
SLIDE 10
slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13
slide-14
SLIDE 14

Dir Direct ct M Man anip ipula latio ion Properties

  • 1. Objects are represented visually
  • 2. Actions are rapid,

incremental and reversible

  • 3. User interacts

directly with object representations

Move to trash Resize Move viewport

slide-15
SLIDE 15

Is this direct manipulation?

slide-16
SLIDE 16

Is this direct manipulation?

Not direct manipulation Direct manipulation

slide-17
SLIDE 17

Wh Why y can n Direct Mani nipul pulation n be be good? d?

  • 1. Objects are represented visually
  • 2. Actions are rapid,

incremental and reversible

  • 3. User interacts

directly with object representations

Move to trash Resize Move viewport

slide-18
SLIDE 18

There is visible feedback the user can evaluate There are visible actions the user can execute

Wh Why y can n Direct Mani nipul pulation n be be good? d?

slide-19
SLIDE 19

There is visible feedback the user can evaluate There are visible actions the user can execute

Wh Why y can n Direct Mani nipul pulation n be be good? d?

Direct manipulation interfaces are usable because they have executable actions and evaluate- able feedback to achieve a goal

slide-20
SLIDE 20

Affordances

slide-21
SLIDE 21

Signifier Perceived Affordance Feedback Affordance Sitting Sitting Test sitting on it. Flat part at knee-height Back panel for support Sturdy wood Butt indentation

Af Afforda danc nce: Wha What can n do do you u wi with h thi his? s?

slide-22
SLIDE 22

Signifier Perceived Affordance Feedback Affordance Sitting Test sitting on it. Flat part at knee-height Back panel for support Possibly sturdy cans?

Af Afforda danc nce: Wha What can n do do you u wi with h thi his? s?

NOT sitting

slide-23
SLIDE 23

Af Afforda danc nce: Wha What can n do do you u wi with h thi his? s?

Signifier Perceived Affordance Feedback Affordance Pull Yanking it A handle you can grasp and yank NOT pull (push)

slide-24
SLIDE 24

Af Afforda danc nce: Wha What can n do do you u wi with h thi his? s?

Signifier Perceived Affordance Feedback Affordance Push Pushing it depresses the handle A handle you can lean your weight onto And push Push

slide-25
SLIDE 25

Af Afforda danc nce: Wha What sho shoul uld d do do you u wi with h thi his? s?

Signifier Perceived Affordance Feedback Affordance Put paper in it None. Paper sized hole Bottles and cans

slide-26
SLIDE 26

Design direct manipulation interfaces by signaling affordances with signifiers users can perceive

Bad signifiers / wrong perceived affordances Good signifiers / correct perceived affordances

slide-27
SLIDE 27

What signifiers do these UIs use to signal affordances?

slide-28
SLIDE 28

What are the signifiers of affordances?

slide-29
SLIDE 29

What are the signifiers of affordances?

slide-30
SLIDE 30

What are the signifiers of affordances?

slide-31
SLIDE 31

What are the signifiers of affordances?

slide-32
SLIDE 32

What are the signifiers of affordances?

slide-33
SLIDE 33

Design direct manipulation interfaces by signaling affordances with signifiers users can perceive

Bad signifiers / wrong perceived affordances Good signifiers / correct perceived affordances

slide-34
SLIDE 34

Implementing Direct Manipulation Interfaces

slide-35
SLIDE 35

Dir Direct ct M Man anip ipula latio ion Properties

  • 1. Objects are represented visually
  • 2. Actions are rapid,

incremental and reversible

  • 3. User interacts

directly with object representations

Click

slide-36
SLIDE 36

HTML

What will this do when you click it?

slide-37
SLIDE 37

HTML JavaScript

Add Click events with JQuery

slide-38
SLIDE 38

HTML JavaScript

How do we attach an action to the button?

slide-39
SLIDE 39

HTML JavaScript

How do we increment the counter????

slide-40
SLIDE 40

HTML JavaScript

How NO

NOT to increment the count?

Get the button text: “Counter (0)” Extract the data from from the text Cast to a number and add one Replace the button text: “Counter (1)”

slide-41
SLIDE 41

HTML JavaScript

How TO

TO increment the count?

Create a model of the data separate from the HTML Create a function that can set the counter data to the view When the page first loads, set the counter to 0 When the counter is clicked, modify the data, then update the view

slide-42
SLIDE 42

Good UI programming separates the da

data model from the vie view and controller

Bad JavaScript Good JavaScript

slide-43
SLIDE 43

Dir Direct ct M Man anip ipula latio ion Properties

  • 1. Objects are represented visually
  • 2. Actions are rapid,

incremental and reversible

  • 3. User interacts

directly with object representations Drag and Drop

slide-44
SLIDE 44

How to NOT implement this?

slide-45
SLIDE 45

Step 1. Create the Data Model

slide-46
SLIDE 46

Step 2. Create a function that updates the view with new data

slide-47
SLIDE 47

Step 3. On page load, create view

slide-48
SLIDE 48

Step 4. Attach an event to the object. It should update the data, then update the view

slide-49
SLIDE 49
slide-50
SLIDE 50

Good UI programming separates the da

data model from the vie view and co controller

slide-51
SLIDE 51

Good UI programming separates the da

data model from the vie view and co controller

slide-52
SLIDE 52

Good UI programming separates the da

data model from the vie view and co controller

slide-53
SLIDE 53

Good UI programming separates the da

data model from the vie view and co controller

slide-54
SLIDE 54

Summary

slide-55
SLIDE 55

Dir Direct ct M Man anip ipula latio ion Properties

  • 1. Objects are represented visually
  • 2. Actions are rapid,

incremental and reversible

  • 3. User interacts

directly with object representations

Move to trash Resize Move viewport

slide-56
SLIDE 56

Signal affordances with signifiers the user can perceive

NOT this THIS

Push Affordance Perceived affordance Push Signifier Handle that can be leaned on Pull Affordance Perceived affordance Push Signifier Handle that can be yanked toward you

slide-57
SLIDE 57

Direct manipulation interfaces are usable because they suit the 7 stages of action

There is visible feedback the user can evaluate There are visible actions the user can execute

slide-58
SLIDE 58

When implementing Direct Manipulation:

Modify the data, then update the view Create an object in the view Add an event handler to respond to user’s actions It is important to separate the data (or model) from the view and the controller.