The Design of Everyday Web

41

description

This presentation takes concepts presented by Don Norman in his book "The Design of Everyday Things" and applies the same fundamentals to online interaction design. Short and high-level, this presentation serves as an introduction to the application of physical world usability to an online interface.

Transcript of The Design of Everyday Web

Page 1: The Design of Everyday Web
Page 2: The Design of Everyday Web

interaction design

Page 3: The Design of Everyday Web

micro

Page 4: The Design of Everyday Web
Page 5: The Design of Everyday Web

3

Page 6: The Design of Everyday Web

perceived affordances

Page 7: The Design of Everyday Web

“…properties that determine just how the thing could possibly be used.”

- Don Norman, The Design of Everyday Things

Page 8: The Design of Everyday Web

“This thing is telling me to ___ it”

Page 9: The Design of Everyday Web

action words

Page 10: The Design of Everyday Web

*TODO: Need push plate photo*

push

Page 11: The Design of Everyday Web

pull

Page 12: The Design of Everyday Web
Page 13: The Design of Everyday Web
Page 14: The Design of Everyday Web
Page 15: The Design of Everyday Web
Page 16: The Design of Everyday Web
Page 17: The Design of Everyday Web

mimic IRL physical properties

Page 18: The Design of Everyday Web
Page 19: The Design of Everyday Web
Page 20: The Design of Everyday Web
Page 21: The Design of Everyday Web
Page 22: The Design of Everyday Web
Page 23: The Design of Everyday Web
Page 24: The Design of Everyday Web

visibility

Page 25: The Design of Everyday Web

“making relevant parts visible”

Page 26: The Design of Everyday Web

“I didn’t know I could do that!”

Page 27: The Design of Everyday Web

“You need to click this, then you can do that.”

Page 28: The Design of Everyday Web
Page 29: The Design of Everyday Web

functions > controls

Page 30: The Design of Everyday Web

feature creep

Page 31: The Design of Everyday Web

feedback

Page 32: The Design of Everyday Web
Page 33: The Design of Everyday Web
Page 34: The Design of Everyday Web
Page 35: The Design of Everyday Web

a:hover {/* your cool effect here*/}

Page 36: The Design of Everyday Web
Page 37: The Design of Everyday Web
Page 38: The Design of Everyday Web

leverage affordances

Page 39: The Design of Everyday Web

make relevant parts visible

Page 40: The Design of Everyday Web

provide feedback

Page 41: The Design of Everyday Web

Thanks.

Justin Davistext “jdavis” to 50500

@jwd2a