The term affordance was introduced by James Gibson to denote the interaction or relationship between a person and its environment. However, Donald Norman introduced a new aspect of this term: Perceived affordances. A perceived affordance is when people perceive similarities between digital representations and actual physical objects and thus it denotes action. These perceived affordances in the digital world help us know where and how we can interact with the interfaces.
Screens are made of pixels, and thus the way we interact with the digital world is just through images and light as Hogue explains. However we still see clear opportunities for interaction because it resembles previous experience from the physical world, hence, whenever designing it is always important to include perceivable clear cues that promote interaction. Some key things that help the design support the idea of perceived affordances are the use of: shadows, depth, textures and perspective.
Hogue explained the term of perceived affordances using a button as an example. Digitally buttons look like real buttons, they resemble what in the real world we would normally press down and expect for something to happen, so this idea is translated into the digital world. Although in a screen a button is really not a button but a simple image, it looks like one, it has shadows and depths that sends cues for people to know that it will react like a button from the real world.
All of this, made me think about the way Apple used to design a couple of years ago. Although nowadays most of the interfaces are changing towards flat design, before Apple used skeuomorphism. Their design style would resemble the real world. I remember when I first downloaded an iBook for the iPad, it looked like a real book, and thus I felt like I could swipe the page like I would normally do, and indeed it was like that, it still is. This is a perceived affordance. Also I remember the calendar, phonebook and the notes App had perceived affordances, they looked like real objects with details in leather and they reacted like they would in the real world.
Image 1: The way “books” are displayed as real books in a shelf
Image 2: Skeuomorphism used by apple
Image 3: Address book resembles a real address book
Image 4: Apple simulates reality through design.
Image 5: Perceived Affordances. Apple iBooks.
Hogue, D. (2012) Interaction Design Fundamentals. Chapter 10: Perceived affordances. Available at: http://www.lynda.com/Dreamweaver-CS5-training/Interaction-Design-Fundamentals/82822-2.html (Accessed: November 25, 2015).
Interaction Design Foundation (2015) Affordances pp1-6 (Accessed: 18 November 2015)
Interaction Design (2011) Affordances. Available at: https://www.youtube.com/watch?v=NK1Zb_5VxuM (Accessed: 18 November 2015).
Norman, D. jnd.org ‘Affordances and Design’. Available at: http://jnd.org/dn.mss/affordances_and_design.html (Accessed: 18 November 2015).