Affordances in user experience design

James J. Gibson, a prominent perceptual psychologist, coined the term ‘affordance’ when referring to the feasible properties between the environment and an actor (the user). The word thus recognizes the human instinct to look at their surroundings to achieve their objectives. In his book The Ecological Approach to Visual Perception, Gibson first used the term “affordance” and later built on this definition, describing affordances as all “action possibilities” implicit in the system, focuses on observable and independent of the capacity of the person to recognize them, but always about actors and, thus, dependent on their capabilities, abilities and cognitive pathways. For example, the pencil would not afford writing if the actor is a newborn because a newborn would not know how to write.

Image by Interaction Design Foundation

The relationship between affordances and human-computer interaction was born with Don Norman’s use of the word in The Design of Everyday Things (1988). Interaction designers have appropriated the concept almost as a design philosophy, illustrating the need for clear and definite signals to explain to the consumer what they should do with a computer or inside a system. Interactive components such as scrollbars, command keys, connections and icons inside a user interface, for example, must be configured to give the user enough indications about what they can do with these interactive elements and how they can communicate with them (e.g. moving up and down, clicking, and pressing). We can criticise a design for lack of immediately perceptible affordances or confusing users with false affordances. Therefore, designers need to understand what we mean by affordance and how to apply it to strengthen old and new designs.

Motivation is another key factor for affordances. We are likely to miss or forget to think about them without the drive to check out the potential uses we may have for an artefact. For instance, when you want to write something on a rough surface, you immediately search for an object that provides you with a suitable surface. In that situation, you search for an object that affords you to write easily. We are not searching or thinking about a flat ground that provides easy writing, eating, or working experience in our daily lives if we don’t need it. Still, we are alerted by our goal and encouragement to consider the unique affordance of all items available to us.

Perceived Affordances in Graphical User Interfaces Image by Interaction Design Foundation

Real & Perceived Affordances

As Don Norman states, the word affordance applies to the perceived and real characteristics of the object, precisely those fundamental characteristics that decide how the thing might actually be used. Thus, we say the actual properties of objects by real affordances, rather than the properties recognized by an actor/agent/user as belonging to objects. For example, gripping and pulling are provided by a door handle, which are the user activities needed to open a door. Graphical user interfaces (GUI), on the other hand, can be stated to have perceived affordances when the user perceives that their activity would have a significant effect within the system/software/website, based on experienced correlations between perceptible elements and the result(s) of communicating with them. For example, touching the control screen to use a graphical user interface is perceived affordance, and a touch screen successfully affords it. Perceived affordances in the graphical user interface depend on the system feedback for the user to understand that they produce or do something meaningful, not trying to understand the meaningfulness of their actions from their perceptible properties of the display alone.  

Norman’s other concept is symbolic communication. Apparently, artefacts, names, instructions, and other supplementary ‘clues’ in graphical user interfaces are necessary for situations where the actionable properties of physical artefacts require an agent who does not have sufficient knowledge to identify the intended means of interaction. As semiotically clear objects, images, and vocabulary are used to express the affordances and intended interaction methods to accomplish these purposes. Providing additional knowledge is referred to as symbolic communication. Nevertheless, as mentioned by Don Norman, “The design has failed when simple things need images, labels, or instructions.” 

Perceptible, Hidden, and False Affordances

Gaver outlined the relations between experience and behaviour in Technology Affordances (1991) and stressed the crucial role that perceptual knowledge (including visual, auditory, tactile/haptic, and, to a lesser degree, taste and scent information) helps us evaluate the affordances of an item. In HCI, Gaver (1991) distinguished three kinds of affordability: perceptible, hidden and false affordances.

In order to access the content of this interface feature, one of the first connections we experience in HCI (human-computer interaction) is between a desktop icon and the affordability to double-click. The notion of perceived affordances described by Norman is equivalent to the notion of perceptible affordances by Gaver, but the latter definition includes all affordances that can be calculated from sensory data, which may also include real affordances. Despite this distinction, the significance of explicit and essential perceptual knowledge in design is highlighted by both definitions. Merely catching users’ interest is not sufficient; the details must be connected to the affordance in order to form an essential and easy-to-understand relationship between the presentation and the planned action.

Other examples of perceived affordances in HCI are the computer sounds, button colours and design metaphors (pages, documents, scissor, turning the page in a tablet). According to Gaver, when the interaction between an object and its affordance is correctly described by perceptual knowledge, the subject can immediately recognize what they can do with an object and communicate accurately. 

Hidden affordances are where there is no sufficient perceptual knowledge to enable the consumer to assess the probability of action. For instance, certain affordances are hidden in the design of the graphical user interface, and the user must rely on the expertise or trial-and-error activities to recognize a clear probability of action. For the novice or new users, perceptual knowledge is extremely relevant, but users need less perceptual signals over time since they can depend on familiarity to better direct their behavior. Hidden affordances can be used as a way to minimize confusion when communicating with advanced consumers, but typically there should always be signs accessible to the consumer to allow them to decide how to access the hidden affordances.

The user is prone to make mistakes if the visual signs are available, but the corresponding affordance does not occur. Designers must ensure that the perceptual knowledge used to signal an affordance’s presence correctly reflects the possibilities of intervention accessible.

Physical, Sensory, and Functional Affordances

Rex Hartson developed and built on the concept of perceived affordances by Don Norman. He used the term cognitive affordances to highlight the effect of product features on our thinking processes and ability to determine what we can do with or in an interface and particular features of graphical user interfaces. Cognitive affordances, to paraphrase Hartson, are the design characteristics that assist, aid, support, facilitate, or allow thinking and/or realizing about something. Cognitive affordances are also the design characteristics that lead to our ability to decide whom we can engage with, anticipate the effects of our behavior, and therefore improve the general usefulness of a product or graphical user interface.

The physical affordance principle of Hartson reflects on the actionable components of screen-based interfaces, such as command keys, and how these affordance attributes enable us to decide the actions we can execute and the outcome(s) of these connections. Although the actual affordance definition of Hartson is relevant to the real world, it differs from the real affordance principle of Don Norman, as Norman sees visual features in graphical user interfaces as symbols of abstract communication, such as images representing such actions, or perceived affordances, which are properties that we interpret as afforded.

Sensory data refers to the ‘top’ aspects of items that help us interpret stimuli in our world. Sensory affordance is a notion present in all affordance schemes, but Rex Hartson is the first to treat it as a different affordance from other affordance categories. In all cases of evaluating the cognitive and physical actions we may execute, sensory input processing is the first step. The lack of sensory affordance can curtail our capacity to perceive cognitive and physical affordances since it plays an important and supportive role in all these phases. Sensory affordability examples include scale, colour, perceived loudness, and sensation. In addition, sensory affordance plays a critical role in the successful user experience correlated with a design within the GUI.

Hartson can approach as distinct terms the four modes of affordance identified and segregated, but they are interrelated, and allow us to determine the functions we will play within a show, how and when we can do so. For example, sensory affordances involve text size and readability that allow us to read instructions (cognitive affordance) and identify what happens when we engage with an active component (physical affordance), and subsequent interface upgrades help us establish functional affordability, such as adding a product to our online shopping basket.

Conclusion 

Since Don Norman presented the design world to James J. Gibson’s theory, there has been intense discussion about the definition, forms, and potential use of the word affordance in human-computer interaction. The above topics and arguments made by the other researchers only point to the main parts involved in this discourse, but the other relevant topics allow everyone to see how vital the mechanism of communicating, exchanging ideas, and proposing new methods is for a coherent and accepted collection of models and frameworks.

Design as a Service for continuous improvement

We are a digital design studio, based in Istanbul & London, focusing on “the experience”. We create memorable products that work best for both users’ needs and business goals. Abiding by our home-cooked design methodology SHERPATH, we challenge ourselves in three areas: product & service design, UX consultancy, and UX training. And, to us, design thinking is a manifest of continuous improvement, and investment in UX should never cease.

So, Design as a Service? Yes, it’s possible.

The thing is, design studios are not well-equipped for adapting to a changing landscape. No plan survives contact with the enemy and project-based quotes, fee-per-page pricing models do nothing but add up to the complications that arise from a sudden change of direction in plans.

That’s why we invented our way of doing business: DaaS, Design as a Service, a subscription-based fee model to keep the ball rolling, nonstop.

With ever-changing user needs and evolving business models, having a user-centric perspective at the core of your business is the way to get results. And, in a world where needs and expectations are constantly changing, companies are in a search for plug & play task forces that possess all the necessary skills to collect user feedback, ideate on digital solutions and deliver insight-led products.

In a way, it’s another “Don’t give me the fish but teach me how to fish” case, where giving a fish means employing design thinking only to come up with solutions for specific problems. You can always hire an elite team to solve your problems; but acting with a user-centred mindset, taking on each challenge with a UX perspective is the key today to meet the user needs while working towards your business goals. Before having the best chef cooking a stellar dish for you, you should set up a kitchen with the right toolset and ingredients for sustainability and scalability.

In a long story short, we dug deeper to understand the ways of working with our project owners and came up with the DaaS model, where we offer a vast array of UX skills and an opportunity to transfer user-centred design thinking into your company rather than working with an agency for a defined task like a landing page or a mobile app. 

A walkthrough of our proposal process w/ DaaS

Imagine this: Project owner comes to us and explains the details of their project. Most of the time, they’ve got three key variables that affect their decision making: time, budget, and scope. Upon understanding each variable in detail, we come up with a resource allocation proposal for their project including a fee for our services. Yet, differently enough, what we do here is just giving a ballpark estimate in terms of hours to hit the milestones as regards to the needed resources.

All in all, our proposals could be boiled down to one sentence similar to this one: “For your project and requirements, we propose 150 hours per month for 6 months to come up with insight-led solutions to your expectations.”. In those 900 hours, we essentially offer discovering business goals along with user needs, ideating on solutions and a UX Strategy, and creating interaction solutions & interfaces.

  • The reason why we do not create turnkey project proposals, I. Drawing from our experience, we know that we can only propose a high-level time plan, a monthly resource allocation table, and a list of the key processes we plan to touch upon during a project. Other than that would be a mere guess that does not factor the weight of the user expectations to be obtained once the project starts.
  • The reason why we do not create turnkey project proposals, II. Thanks to the DaaS model, we always highlight the fact that our project owners are free to use their SHERPA resources how they see fit. We might have agreed on a mobile app project, for example, but in the following months after the kickoff, our client is free to change the setup and use their allocated SHERPA resources on a completely different scope. No strings attached. Because we do not assign particular team members to a project or strike a deal based on the endpoint. What we aim to do is give SHERPA credits to project owners to be spent on anything digitally relevant.

We know that every pre-defined project scope is subject to change with the user insights obtained at any time in a project, and confidently claim that no one can give you a laser-cut proposal if you are looking for a truly user-centric solution. If understanding user behaviour and building user-centric products is a priority, then project owners should adapt to changing scopes and have the flexibility resource-wise. That’s why we offer SHERPA’s UX skills with a time & material pricing model regardless of the project you’ve got.

Fine-tuned for better products, T&M with tweaks

First off, the elevator pitch: DaaS (Design as a Service) is a transparent business model in which we allocate “hours” to project owners upon deciphering their needs. It is simply a subscription-based model, where we take on any brief at hand in line with an allocation bandwidth. 

DaaS is flexible. We are not limited by scope and can adapt to your changing priorities, the only constraint being the number of hours allocated to your project per month.

DaaS is transparent. At the end of each month, we provide highly detailed timesheets (based on person/task/minute spent) to our project owners to justify the ROI of UX services we delivered.

DaaS is user-friendly. One way or another, if 100% of a project’s monthly resource allocation is not delivered, we take its remaining part starting from 50% and add it to the following month. We don’t like inefficiency, nor any kind of waste.

The key benefits

There are two things we know about building a product: Diversity creates value, and resource allocation requires flexibility. 

Therefore, whether or not there is an in-house UX team on board, we believe that grabbing additional resources from a UX studio will pan out nicely in the grand scheme of things. Aside from the operational advantages, there are three main benefits production-wise for those who are interested in working with our DaaS model.

  • Building a diverse team

The secret to building digital products is simple, having strong product teams. Culturally diverse, cross-functional teams are behind today’s top products. 

In our case, as a team of UX experts, we strive to bring our unique experience to the table while collaborating with product teams. In a sense, our collective memory is a repository for those who seek to find a relevant solution-set regarding their project. And as consultants, we work on multiple projects spread across several industries, which eventually unlocks a great opportunity; rapid testing of our assumptions and fine-tuning every aspect of our work in a relatively short amount of time.  Therefore, as practitioners, who “have been there before”,  we can catalyze a reaction fairly quickly than a product-specific team.  

  • On-demand talent acquisition

The number of problems in your agenda can quickly reach alarming levels, requiring an expansion of the talent to deal with it. Yet, it might not be always feasible growing headcount to handle the work, because bringing talent without thoroughly considering the consequences may paralyze a team for a couple of reasons. 

First, it’s not easy to find talent. Without spending an enormous amount of effort on talent acquisition, you’re not going to be able to form a team, coming from a relevant background to take care of your problems. You need someone who “has been there before.”

Second, you probably need a temporary solution to carry the workload. You do not want to set anything on a stone if you do want to get financially tied up. That’s why interim teams come in handy to alleviate the pain stemming from an overfilled backlog. 

We shorten the time needed to find talent and soften the blow on your talent acquisition activities for a simple fact: we’re talented, we are relevant, and we’re only there as long as you need us with the power of DaaS.

  • The vast spectrum of skills

From initial launch to late maturity stages, each milestone in a product’s lifecycle demands a different set of skills to meet user needs. As a natural outcome of this process, a need for new skills gradually emerges. Similarly, the UX expertise you need changes in time while working on an idea. Instead of having high turnover rates to fill out gaps in skills, elite teams could come in to play to give a hand.

We are on a mission to understand users and find intricate ways to solve their problems, and the methods we utilize to do so are largely diversified. It would not be rational to expect all the necessary skills from a candidate or an embedded team. To cope with a skill deficiency or extend the level of UX maturity in a team, external teams with flexible business models like DaaS can provide unique value as temporary remedies. 

DaaS, now

DaaS is not something new on the shelves that is brought to you without a proper validation process. As the firm believers of iterative solutions, we validated our idea by simply using this model for projects varying in size, from a complete redesign to small research projects. Ever since 2015, we’ve been working with DaaS and creating better solutions for our clients relentlessly. Unorthodox it may seem, you should give it a chance with this mindset, with or without us. Change is constant, so should your efforts to keep up with user needs.