Making an Interactive Design Adaptive

Brian Etheridge
Interactive Designer's Cookbook
6 min readMay 7, 2018

Our chef: Jean Piaget and his ingredient → equilibration

“The individual acts only if he experiences a need, i.e., if the equilibrium between the environment and the organism is momentarily upset, and action tends to re-establish the equilibrium, i.e., to re-adapt the organism (Claparède).”
Jean Piaget, The Psychology of Intelligence

Jean Piaget via Mind Philosopher

Jean Piaget was a Swiss psychologist and epistemologist.

He was best known for constructivism; and his associated theories of cognitive development.

His theories can be roughly broken down into three parts: Schemas, Adaption (processes that enable the transition from stage to stage), and the Stages (of cognitive development) (simplypsychology).

To focus of this paper is on Adaptation — the second chunk of Piaget’s theory. The adaptation process that Piaget talks about is sometimes described as a five-step looping process — Assimilation, Equilibration, a New Situation, Disequilibrium, and Accommodation (simplypsychology).

This adaptation process can be applied to interactive design to greatly improve the experience for the user.

This is possible because any new app/game/software is also a new situation that people need to figure out and get used to. Thus, the adaptation process can help guide them through the design to make the onboarding process easier, simpler and can make people use it regularly.

What is Assimilation and Accommodation?

Assimilation and Accommodation are the two key concepts that are the major chuck of the adaptation process. What these two terms deal with how the mind “edits” the schemas, or existing knowledge frameworks, that you have created.

Assimilation is the process of taking a new schema (a fancy word for a new idea) and applying it to a new object or scenario to try and understand it. Accommodation is the process of taking the current schema and making changes, or editing it, to deal with the new scenario or object (traumainform).

Therefore, our brain takes new information and checks if it has the information on the new object or scenario or if it needs assimilate the new knowledge. If the scenario or object does not work with the schema, then the schema needs to change, or accommodate, the schema with the new knowledge.

What is Equilibration and Disequilibration?

So, what is equilibration and disequilibration, and why should a digital designer care?

These are simply Piaget’s fancy terms to describe what happens to the mind during the adaptation process.

Equilibration is a balancing act that that mind plays between the new knowledge that is being absorbed, or accommodated, and existing knowledge that is being changed, or assimilated (traumainform).

Disequilibration is the initial shock of seeing something new, and the first step. Thus, before a new situation is presented, our brains are in equilibrium and the schemas are all unchanged. Once new information is presented, that is where the brain breaks equilibrium and the balance is broken between existing knowledge and new knowledge that is being absorbed.

Adaptation processes in action

via Simply Psychology

The adaptation process that Piaget talks about happens when ideas are applied to a unique situation. The process loop happens in this order: new situation, disequilibration, accommodation, assimilation and equilibration (simplypsychology).

Take eating a blood orange as an example. When you are handed one, you are trying to make sense what you are holding in your hand, it seems like a normal orange, but someone told you it is not one (disequilibration). Then your brain uses your prior experience of an orange to try to comprehend what to do with it. Therefore, you peel it and expect the inside to look orange (accommodation). However, when you open the blood orange, the inside is red. Your brain is now putting what you learned in the past — your schema of oranges that involved the color orange — with the new information — that there are different types of the fruit (assimilation). After this confusion, you take a taste, and feel better as you file this new information into your schema storage areas. From now on, you won’t be surprised by the concept of a blood orange (equilibration).

What does this mean for interactive designers?

A lot, especially for games, apps, and software. Here are some examples.

Photoshop (left) and Illustrator (right) via Adobe Photoshop CC and Adobe Illustrator CC

ADOBE
Adobe has been using this process across all their software. What Adobe does is they make you learn one program, say Photoshop, and you can use another program, like Illustrator, because they developed it with similar mechanics and layout. Thus, a user of Photoshop will have a faster time to get used to Illustrator. This is done by using the same layout as one program but the tools that are available are a mixture of new and old. Therefore, the new tools are easier to learn because are less of them and the user does not have to learn a whole new set.

via YouTube IGN
via YouTube IGN

ELDER SCROLLS
Bethesda, the game studio/publisher, has been using the adaptation process between The Elder Scrolls and Fallout series. These two games are both the same genre, but they are set in different periods and have a slight difference in play style. Fallout is set in a futuristic post-apocalyptic nuclear wasteland with mutants, shanty towns, and weird weapons, as The Elder Scrolls is set in a fantasy setting with basic weapons, dragons, and Castles. If one person plays either series, when they switch to the other it is easier to grasp because the knowledge is there from already playing the other game, so learning the new mechanics will be easier.

Gmail App (left) and Google Drive App (right)

GOOGLE
Google has designed many of services so that you can jump from app to app without needing to learn anything new. For example, the Gmail app and the Google Drive app has different content, but they have the same navigation and menu layout. The equilibration pain has been minimized.

Tumblr Homepage (left) via Makeuseof.com and Twitter Homepage (right)

TWITTER AND TUMBLR
The next example is not from the same company. Twitter and Tumblr are two separate services but still use the adaptation process. These are both mini-blogging websites and apps that people are allowed to like, favorite, repost, share, and comment other posts from users. Both use an infinite scroll on the home page that shows posts that the user follows. What the user needs get use to is the profile page settings of the website.

Conclusion

The adaptation process can be used to make the onboarding process for new software more effective because it allows the user to use what they already know to focus on what is new (assimilation and accommodation). Therefore, after more time using the design, you will build a level a competence where using the design will be second nature (disequilibration to equilibration).

These are some powerful ideas, and understanding how they work can help you make more user-centered, successful (and potentially profitable) products.

References

I used material from these sites in this article.

Simple Psychology https://www.simplypsychology.org/piaget.html

Trama Inform https://traumainform.wordpress.com/2012/07/07/jean-piaget-schemas-assimilation-accommodation-equilibration/

--

--

Brian Etheridge
Interactive Designer's Cookbook

TCNJ Interactive Multimedia Major & Graphic Design Minor | Technology, Design, and Music Enthusiast | UX/UI | Tea Head | Email: etherib1@tcnj.edu