Affordances In Modern Web Design by Andrew Maier

Affordance The quality of an object allowing an action–relationship with an actor Signifier A discrete unit of meaning, including words, images, gestures, scents, tastes, textures, sounds. Should actions be buttons or links? It depends on the action. Should a calendar view be in listform or gridform? It depends where it’s being shown and how long the time period is. Does every global navigation link need to be on every page? Do you need a global search bar everywhere? Do you need the same exact footer on each page? Te answer: “It depends.”

Trang 1

in modern web design

andrew maier

Friday, March 26, 2010

Trang 2

Andrew Maier

andrew@uxbooth.com

@andrewmaier

Interaction Designer &

User Experience Enthusiast

Trang 3

what’s up with

“modern web design,” Andrew?

Trang 4

the web has

Changed

Trang 7

Whence?

Trang 8

fundamental

Concepts

part I

Trang 9

Aﬀordance

The quality of an object allowing

an action–relationship with an actor.

Trang 10

a tour of

Aﬀordability

Trang 11

What does this thing do?

Trang 12

Trang 13

Trang 14

Trang 15

No, seriously:

What does this thing

f***ing do?!

Trang 16

Signifier

A discrete unit of meaning,

including words, images,

gestures, scents, tastes, textures, sounds.

Trang 17

We are all detectives, searching for clues to enable us to function in this complex world Whether it is flags waving in the wind, the diﬀerence between empty or crowded train platforms, or the desire lines illustrated by footprints in the fields that suggest paths to follow, we search for significant signs in

the world that oﬀer guidance ”

“

Trang 21

The Design of Everyday Things

Don Norman

Trang 23

you’re such a

Tool

Trang 24

&

Constraints

Trang 28

Trang 30

Conceptual Models

Trang 31

System Model

Interface Model

Mental Model

Trang 36

Good

Trang 39

Frustrating

Trang 42

applied to

part

Trang 43

Conceptual Models

Trang 44

System Model

Interface Model

Mental Model

Trang 45

microscopic &

Macroscopic

Trang 46

Elements

Trang 47

I’m a Button, believe you me

Trang 48

Trang 49

Trang 50

Trang 51

Trang 52

Don’t Make Me Think

Steve Krug

Trang 53

Layout

Trang 54

list description panel–selector

Trang 55

Trang 56

canvas + palette

Trang 57

canvas + palette

Trang 58

one-window drilldown

Trang 59

Designing Interfaces

Jennifer Tidwell

Trang 60

Context

Trang 61

Trang 63

Should actions be buttons or links? It depends on the action Should a calendar view be in list-form or

grid-form? It depends where it’s being shown and how long the time period is Does every global

navigation link need to be on every page? Do you need a global search bar everywhere? Do you need the same exact footer on each page? The answer: “It depends.”

–Getting Real, 37signals

“

Trang 64

things

Trang 65

Patterns

Standards Metaphor

Trang 66

Trang 67

Trang 68

Designing Web Interfaces

Bill Scott & Theresa Neil

Trang 69

Patterns

Standards

Metaphor

Trang 70

768

Trang 71

header content footer

Trang 74

Patterns

Standards

Metaphor

Trang 75

Trang 76

Trang 78

Trang 79

independent of

visceral response, this

Requires

cognition

Trang 85

the uncanny

Valley

Trang 87

Trang 88

In 1978, the Japanese roboticist Masahiro Mori noticed something interesting: The more humanlike his robots became, the more people were attracted to them, but only up to a point

If an android become too realistic and lifelike, suddenly people were repelled and disgusted.”

–Clive Thompson

“

Trang 89

lifelike = lifeless

Trang 94

Trang 95

identify possibilities

Trang 96

learn from

the

World

Trang 97

speak clearly &

in context

Trang 98

don’t overdo it

Trang 99

http://uxbooth.com

Trang 100

Fin

@andrewmaier andrew@uxbooth.com

Trang 101

• Designing Web Interfaces

• Bringing Design to Software

• Don’t Make Me Think

W H I T E P A P E R S

• Affordances Explained, May 2003

Định dạng
Số trang	101
Dung lượng	12,99 MB