Affordances in modern website design

Affordances in modern website design does this factor

Affordances in Modern Website Design

  1. Affordances in Modern Website Design

    This summer 2009

  2. Hello, I’m… Andrew

    Interaction & Consumer Experience Designer andrew@uxbooth.com @andrewmaier uxbooth.co hashrocket.c m om Affordance

  3. Exactly what does this factor do?

    Affordance

  4. Exactly what does this factor do?

    Affordance

  5. Exactly what does this factor do?

    Affordance

  6. Exactly what does this factor do?

    Affordance

  7. Affordance The an excellent of

    an item allowing an action–relationship by having an actor.

  8. The Birth

    of Affordances

  9. J. J. Gibson (1904–79) •

    Visual Psychiatrist • Gestalt Psychology, Perception and Action • Gibson Affordance Theory • Measure the Condition around the globe: Threats and promises Affordance

  10. “an affordance isn’t presented

    upon an item with a necessity of an observer and the act of perceiving it… [for instance] to become graspable, an item should have opposite surfaces separated with a distance under the length of the hands.” – J. J. Gibson Affordance

  11. Don Norman (1935 ) •

    Neilsen, Norman Group • Physician of Philosophy in psychology • The style of Everyday Things • Perceived Affordances • Added the idea of signifiers: Affordance

  12. “We are detectives, searching

    for clues to allow us to operate within this complex world. Whether it’s flags waving within the wind, the main difference between empty or crowded train platforms, or even the desire lines highlighted by footprints within the fields that suggest pathways to follow along with, we look for significant signs on the planet that provide guidance. Within the social world made up of people and technology, these cues are social signifiers.” – Don Norman Affordance

  13. Signifier A discrete unit of

    meaning, including words, images, gestures, scents, tastes, textures, sounds.

  14. Visual/Behavior The Word What of visual

    communication • Conceptual models • Constraints • “Affordances” –– Signifiers Affordance

  15. Conceptual • Exactly what the system

    is and just what it may do • Three parts: system, interface, mental … • Conveyed not directly, Affordance

  16. Conceptual System Model Conceptual Model

    (Physical/Constraint–bearing (User’s Model) Model) Interface Model (Designer’s Model) Affordance

  17. Conceptual • Recognition over Recall

    • Good: Digital Spreadsheets, Game Titles Physics Engines •Questionable: Thermostats, Google Wave Affordance

  18. Constraints (and Tools) • “An

    entity accustomed to interface between several domains…” • Necessitates the designer to conceptualize various domains • Reduce Implied complexity Affordance

  19. Tools

    Affordance

  20. Tools

    versus.

    Affordance

  21. Affordances & Signifiers • Conventions,

    patterns and metaphors • Attracts the senses • Again, requires little–to–no cognition Affordance

  22. Affordance

  23. Affordance

  24. Website Design

    & System Design

  25. “Web” Design • Visual Design

    • Interaction Behavior Design • System IA/UX Design Affordance

  26. Manifest • Use Signifiers &

    Constraints • Recognition over Recall • Create Context with Meta Design Affordance

  27. Signifiers & Constraints • Invitations,

    labels, Icons • Good visual design concepts • Constraints, reduce load Affordance

  28. Affordance

  29. Default Layout “Wiggling”

    Layout

    Affordance

  30. Recognition over Recall • Standardization

    (tabs, resolution, IA…openid, facebook) • Shared libraries Affordance

  31. http:// ui-patterns.com http:// developer.yahoo.co m/ypatterns/

    Affordance

  32. http:// emberapp.com /explore/ http:// konigi.com

    Affordance

  33. Designing Interfaces

    Jennifer Tidwell

    Affordance

  34. Designing Web Interfaces Bill Scott

    & Theresa Neil Affordance

  35. Metaphor • Base design off

    of real–world objects • Instantly forms mental models • Requires no significant ramp–up • Can be quite simple: shadows, polaroids Affordance

  36. Affordance

  37. Affordance

  38. Affordance

  39. Create Context • Meta Design:

    Group related functionality • Information Architecture Affordance

  40. Context Over Consistency Should actions

    be buttons or links? This will depend the loop. Should a calendar view maintain list-form or grid-form? This will depend where it’s being proven and just how lengthy the timeframe is. Does every global navigation link have to be on every page? Do you want a worldwide search bar everywhere? Do you want exactly the same footer on every page? The solution: “It depends.” Getting Real, 37signals Affordance

  41. Affordance

  42. Regular Safari Keyboard

    Keyboard

    Affordance

  43. Context Over Consistency Regular Header

    Post–Search Header Affordance

  44. Overdesign

  45. Over–Design • Physical Overload •

    Obscures content •Independent of visceral response –Requires cognition •Not just jealously on my small part Affordance

  46. Combined with permission from Alex

    Komarov

  47. Combined with permission from Alex

    Komarov

  48. Realism in Design • Realistic

    = Lifeless •Robotics, Videogames, Comics, Movies, etc. • Uncanny valley •Empathy & Possiblity Affordance

  49. versus.

    Affordance

  50. The Uncanny Valley In 1978,

    japan roboticist Masahiro Mori observed something interesting: The greater humanlike his robots grew to become, the greater everyone was drawn to them, only up to and including point. If the android become too realistic and realistic, all of a sudden everyone was repelled and disgusted. –Clive Thompson Affordance

  51. Zimbra

    Microsoft

    Outlook

    Affordance

  52. Affordance

  53. Don’t Cause Me To Feel Think Steve

    Krug Affordance

  54. Understanding Comics

    Scott McCloud

    Affordance

  55. Conclusion

  56. Affordances in Design • Identify

    action options, goals • Consciously gain knowledge from the world, your users do • Manifest your design, use metaphor • Don’t overdesign Affordance

  57. References WEBSITES BOOKS •http://www.usabilitypost.com/ •

    The style of Everyday Things •http://www.37signals.com/ • Designing Interfaces •http://www.codinghorror.com/ • Designing Web Interfaces •http://www.slate.com • Getting Design to Software •http://wikipedia.org •http://jnd.org •http://www.jnd.org/dn.mss/ signifiers_not_affordances.html White-colored PAPERS •http://www.akomarov.com •http://smashingmagazine.com • Affordances Described, May •http://uiscraps.tumblr.com/ 2003 • http://hci.stanford.edu/bds/2- liddle.html Affordance

  58. Fin

Resourse: https://slideshare.internet/andrewmaier/

Build An HTML5 Website With A Responsive Layout


Video COMMENTS:

Viral-Videos: plzz in future expand this tutorial with adding JavaScript & some backhand php plzzzzzz

Akshay Jassal: excellent job!\nThe day I get my first pay check, you can expect a big donation. \nCheers!!

NathanAshby: Comming from someone who has been struggling to get into webdev because of the lack of well made tutorials (most are underexplained or have a ton of useless info) I hate it when a video takes 5 minutes to explain me why I should install sublime text, and you just said, oh use atom if you like k (i use atom cause its clean and works tbh). I have to say yours is perfectly what I needed. Kudos for your simple explanations and "to the point" info.

idmt93: Fantastic video. This will be a great reference project for future endeavors. I think a good idea might be to make an extension of this video where you implement some JavaScript. Thanks a lot!

redsnakeintown: I think if you type Lorem and tab – Atom should be able to generate the dummy text for you…all other editors does

Aman Babbra: I love this video, I learned so much from it! I would really recommend you do another one like this please, but this time add some javascript as well. or even expand this one with some javascript! Thanks for the videos and keep up the great work!

J W: This tutorial is a real eye opener. It pieces together what I am struggling to understand on Codecademy. I feel much more enthusiastic and confident that I can do this and have fun while concentrating.\n\nThank you for providing guidance to a newbie like me….

Cường Nguyễn: thank you so much, teacher. Anyone else who is beginner like me ? let's make friends :D

Arun Raj: nice tutorial, Thank you!! \n\nif you install "emmet" package it will help you with the coding the html. for eg. if you write .container and tab, it will create <div class="container> </div> for you. And if you write #container and tab, it will create the <div id="container"> </div>.. \n\nplease ignore if you already know about this :-D

Surprise Surprise: Very Very nice! But i miss the PHP part for the newsletter and the quote :(

Related Posts:

➤