Translating Affordances

Figure 1.0. Blood glucose monitor prototype

My assignment this week was to translate affordances from a digital interface into a physical one. Originally introduced by psychologist Jams Gibson, “affordance” refers to all possible actions within the capabilities of an individual. Later, Don Norman defined affordances as a perceivable possibility for action.

This project challenged me in several different things:

1. Reflect on real-world human behaviors and activities to create a physical mechanism that can be perceived.
2. Reverse-engineer a digital interface and determine how to elevate its affordances in the physical world.
3. Design and build a prototype that best demonstrates how humans interact with it.

For the same functionality, not all digital interfaces have the same level of affordances. To provide better affordance to users, first we need to understand how humans see, think and act on the feature. It’s not easy for me to decide what to make, and I spent days searching for ideas. My interests lie in two opposing directions: Interfaces that produce obsessions and interfaces that cause confusion. None of them is ideal from a moral standpoint, but for designers, reducing user confusion can help to prevent many unwanted results.

There are many reasons why digital interfaces can be confusing, and the key issue is that the design does not create effective conversations with the users. When the design speaks a completely different language from the user, it’s harder to comprehend.

An example I can think of is medical devices. A medical device can detect health data and present many important indicators to help medicare make decisions. But patients usually lack the knowledge to interpret this kind of data. A great opportunity is to create more informative and comprehensive medical device interfaces that allow patients to learn more about their results.

Blood glucose monitor is a good example.

Figure 1.1. Blood glucose meter image source

Using a regular blood glucose meter, you can take blood from your fingertip and the interface will display your glucose level. People who have medical conditions that need to measure their blood sugar frequency are familiar with the normal range of blood sugar levels. Users get quick and comprehensive results from the device, but from a design standpoint, the data can be better presented.

I compared the Apple Watch Activities interface with the blood glucose meter, and I found the Apple Watch Activity interface visualizes the data much better. It’s very clear what ring is associated with what measurement, whether users have completed their activity goals, and how far they are from their goals.

Figure 1.2. Apple Watch Activity image source

Opportunity:

For most people without medical backgrounds, knowing all the normal ranges of blood test items seems a little bit difficult. An interface that transforms the medical data into a comprehensive format will keep them updated on the test results.

In my research, I also discovered that different foods have different effects on people’s blood sugar levels, and different macronutrient combinations have different effects on blood sugar levels.

Here I’m not getting too deep into the details, but in general, the rules can be summed up as follows:

Only consuming carbohydrates can quickly raise blood sugar levels.

Fiber, particularly soluble fiber, helps to slow sugar absorption and stabilizes blood sugar levels.

Protein has only a small impact on blood glucose. Protein can help stabilize blood sugar levels by blunting the absorption of carbohydrates and sugars.

Consuming fat does not directly raise blood sugar levels.

Based on these findings, I decided to add more features to this prototype:

• Show how blood glucose rises after consumption of different macronutrients.
• Inform people if their blood glucose is within the normal range, and show them what’s normal.
• Demonstrate how food combinations can regulate blood sugar.

This time instead of matching my materials to the sketch, I decided to imagine what materials and items can be used to make this prototype.

Getting materials ready.

Figure 3. Materials

I started by making the balance according to a DIY tutorial.

Figure 4.1. Materials for the balance

Figure 4.2. Balance

Figure 4.3. Balance (finished)

And I used the foam crafting balls as representation of different macronutrients: carbs, protein, and fat, also included fiber since it is a key component for blood sugar balance.

Figure 5. Macronutrients ball

I then painted crafting balls purple for carbohydrates, yellow for fat, orange for protein, and green for fiber to indicate macronutrients.

For the monitor interface, I used a small tray for the frame, testing tubes for liquid containers.

Figure 6.1. Frame

As Figure 6.2. shows, the first group: orange liquid level represents the normal(right) and an abnormal result(left).

Figure 6.2. Testing tubes

In the second group, I presented cholesterol levels, since they could possibly be measured through a blood test. And by contrasting the turbidity of the liquid in two tubes, it shows the normal(left) and abnormal(right). As a result of high cholesterol, blood becomes thick and yellow.

Final results:

Video Demonstration

Different colored balls represent different food intakes (macronutrients in essence). By placing them on the balance, the liquid in the test tubes fluctuates according to blood sugar levels and cholesterol levels.

Final Thoughts:

Due to all the constraints in a small class project, I did not spend enough time iterating and making small changes. It’s exciting to be challenged to build a physical prototype again, but finding the right materials and making a physical mechanism work always stresses me out.

This time, however, I did not use my usual paper sketching methods, instead I focused on tangible objects that already exist and elevated them to create affordances. I learned that not all affordances on a digital interface are built perfectly, and that there is always room for improvement. This project is an attempt at reconstructing, and I think a designer has to always be prepared for new interfaces, whether it is a new realm of technology or a natural evolution of human interaction, so thinking beyond the interface should become a way of life.

Basturk B, Koc Ozerson Z, Yuksel A. Evaluation of the Effect of Macronutrients Combination on Blood Sugar Levels in Healthy Individuals. Iran J Public Health. 2021 Feb;50(2):280–287. doi: 10.18502/ijph.v50i2.5340. PMID: 33747991; PMCID: PMC7956086.

Gannon, M. C., Nuttall, F. Q., Saeed, A., Jordan, K., & Hoover, H. (2003). An increase in dietary protein improves the blood glucose response in persons with type 2 diabetes. The American Journal of Clinical Nutrition, 78(4), 734–741. https://doi.org/10.1093/ajcn/78.4.734

DIY: Balance Scale with Cardboard. (2017, December 25). YouTube. https://www.youtube.com/watch?v=wMviwn4g_QI