45 Seconds of Confusion: When a Familiar GUI Fails the Human Eye

 

In meetings, we often hear the same line, 

"That's not a bug.  Report it as an enhancement."

Sometimes the observed behavior never even makes it to the enhancement list.  

But, what happens when the problem is not about functionality, but about how the users experience the GUI and its usability?

My peer Dhanasekar Subramaniam (DS) recently published a blog about a UI design that delayed him using the app. This made me curious.  How could a UI that an engineering team acknowledged and used slow down a user?

I decided to test investigate the design.  On testing and analyzing the UI behavior and usability, I discovered something interesting -- the GUI looks as in code, but behaved differently to the human eye.  

I went through the usability and experience problem, but I was conscious about this behavior so I could identify it in quick time.

If you are a SDET or Test Engineer, this blog will help you develop new perspectives while analyzing GUI problems.  If you are a manager or decision-maker, it highlights why seemingly small GUI problems should not be ignored.

When a Simple Task Creates Anxiety

Late at night 11 PM, the user opened the cab booking app Rapido, just as they had done many times before.  The goal was simple -- book a cab and reach the bus stop.

But something unexpected happened.

This time, the users could not figure out how to book the cab.

Seconds started passing.  The GUI looked familiar, yet the action to book the ride was not obvious.  Nearly 45+ seconds went by, trying to understand what to do next.

The situation made it worse.

It was 11 PM, the bus departure time was getting closer, and the user was unaware how to proceed because of the app's GUI.

That moment -- when the user knows the app, knows the task, yet cannot complete it, creates anxiety.

So the question is,

Why did two tech-savvy users, using an iPhone and familiar with the app, spend more than 45 seconds trying to figure out how to book a cab?

45 seconds for a task that usually takes less than 5 makes the problem feel bigger instantly.

Understanding the Cause of Anxiety

Here is how I started to learn and understand,

1. I installed the Rapido on the Android phone.
2. I have no ride history with Rapido.
3. I signed in for the first time.
4. I see the Ride screen.
• I see the three addresses given which I had not chosen. I could save these as favorite; I did not.

On the Ride screen, I do not see where to enter or select the pick up location and destination.  

TL;DR -- In quick and short here is what caused the confusion which led to anxiety.

1. The text in the search text field.
2. The color contrast of search text field.
3. The color contrast of view showing the three addresses.
4. The color contrast in between the 2 and 3.
5. User not able to identify that is a search text field which is tappable.

What to fix?

1. To rephrase the search text.
• "Enter pickup location" works as charm; refer Pic-4 in this blog post.
2. To have better color contrasting for the three GUI elements.
• The GUI color and contrast to have ΔE ≥ 3  -- good and preferred
3. To highlight a search text field so that I will be prompted to tap and enter or select the pick-up and drop location.
4. When experimenting with AB Test configs, the GUI design to follow the suggested GUI Design & Color Engineering practices.

In usability and user experience what is not noticed is as good as not present.

Continue to read the below sections for the detailed information on usability and user experience problems.  

If you want to quickly know the technical analysis alone then move to sub-section -- Why It Fails - Mathematical Analysis and Human Brain. This tells why the present Rapido app's GUI Design and colors confuses a human brain and eye.  

No wonder, why the users got into anxiety when booking the cab at 11 PM!

The First Usability Pitfall in the GUI

Now continue to read with much attention.

1. I looked at the top of the screen.  I see text -- "Where are you going?".
2. Below the text, I see the three locations listed which I had not chosen or entered or of my current interest.

Ah! that confused me.  Why?

I closely looked my mobile screen, that is Ride screen.

Pic-1:  The confusing text and three locations displayed

1. I see a search text field.
2. I see a search icon next to the text field.
3. The search text field has a text -- "Where are you going?"

This is the first usability pitfall in the confusing GUI.

Why am I asked where am I going and listing the three locations that I did not enter or choose?

The Second Usability Pitfall in the GUI

In the below image Pic-2, I see,

1. There is no prominent visual difference in the layouts of
• Search text field
• Color hex code #FFF8FAFC
• The three location displayed
• Color hex code #FFF6FAFF
2. Yes my brain could not perceive the differences right away between these two layouts.

Pic-2: The color contrast of the GUI elements.

The color contrast of these two layouts are almost same.

• This added for the confusion.
• My brain was perplexed in knowing what's happening here.
• I'm wasting time here to learn how to book a cab.
• Is this what a Rapido need as a business?
• Or, does it need a user to book a cab right away on opening the app?
• Won't this experience drive away the user to the competitors app -- Ola, Uber, Namma Yatri.

If my brain cannot perceive the differences and is processing to understand what's happening here, is that a good user experience?

Forget about the user experience.  Is that a serving UI Design and Engineering?  I will leave this to your thoughts.

Further, the space in between these two layouts is with color contrast of #FFFFFFFF.  This makes the confusion much stronger.  Why?  

• All these three GUI components are on one main view
• To the human eye and brain, the color contrast of these three GUI components blend as one rather three distinct GUI elements.

This is the second usability pitfall in the confusing GUI.

Not being able to distinguish between these three GUI elements in a quick time is a problem.  Why the app has confusing color engineering for these three GUI components?  Why the GUI design did not highlight that search text field as tappable?  Why the search text is confusing when combined with the GUI color?

If the GUI components had distinguishing contrast colors.

Rapido's Competitor GUI and Usability

The competitor of Rapido has similar GUI, but it is more intuitive with the search text and color contrast of GUI components.  Refer the below pic.

In the Ola and Uber apps,

• The search text is straight and easy to understand.
• The readability of search text is close to the context of using the app.
• Importantly, the search text field is easily distinguishable easily.

The search text and distinguished search text field makes me understand I should tap on it and enter the pick up and destination location.

Pic-3: The search text field and GUI in Ola, Uber and Rapido apps.

The Two GUIs of Ride Screen

When test investigating, I experienced the two GUIs of Ride screen.  

The other GUI looks better in terms of usability and prompted me to tap on the search text field.  But my question is when do I get this screen?

Could be a AB test parameter coming in to the app shows the different Ride screen.  I did not pick this for debugging as it looked better.

In the below picture, screen 2 shows a better search text.  Also, it does not have those three locations that I see in screen 1.

Pic-4: The two different Ride screens of Rapido.

Test Investigation & Analysis - Why My Brain & Eyes Took 45+ Seconds?

This section has details of my debugging, test investigation and analysis.  I have put my eyes, brain, smart phone, reasoning and the Rapido app to evaluation.

If you are a Test Engineer or SDET in a role, this should be super helpful when you are testing for GUI.  Do not skip it!

Human Eyes and Cones for Blue Shades

I learn, the human eyes have three cone types L, M and S; below are it sensitivity.

• L-cones is for Long-wavelength cones; it is sensitive to red-ish light.
• M-cones is for Medium-wavelength cones; it is sensitive to Green-ish light.
• S-cones is for Short-wavelength cones; it is to Blue-ish light.

You remember, I shared the hexa color code for the two GUI components, that is

• #FFF8FAFC
• #FFF6FAFF

Pic-5:  #FFF8FAFC color

Pic-6:  #FFF6FAFF color

In between the above two hexa color code images, we have white (#FFFFFFFF) background as in the Rapido app.

These two hexa color codes explain my observation.

• I struggled to distinguish the subtle color difference, especially in certain ranges.
• So the two users who were booking the cab at 11 PM.  Why?  
• We humans have a fewer S-cones and it is less sensitive.  Hence, the small changes in blue/cyan hues are hard to see.

But, the small changes in red/green are easier to detect.  

Have you seen sky in the night when an aero plane is flying.  

You see the red-light of an airplane though the distance between sea level and the air plane is around 10 to 13 KM.  

Why do the plane use red-light and not blue or any shades of blue?  Hope this should trigger your eyes and mind now.  

With this simple daily life example shared, tell me about the two blue shades discussed here with minimal difference and next to each other as GUI components in an mobile application?  

To add more to the complexities, the hardware and display capabilities of smart phone models from the same OEM varies.  You see, how critical is the UI Engineering now in software design!

Display Behavior of Smart Phones

Even before your and my eyes see the color, the smart phone's display (hardware + software) processes it.

That is, the smart phones,

• Quantize colors (round up values)
• Use OLED sub-pixels
• Apply gamma corrections

This leads the rgb(246, 250, 252) and (248, 250, 252) to be same emitted light.  Why?  The display hardware will round or merge the small difference.  An another reason why on the Android device that I used and on an iPhone the other two users could not differentiate between the two GUI elements of Rapido app.

Viewing Angle Makes It Even Worse

I was holding my smart phone at 180 degree to the ground -- that is device at an angle to view. 

Pic-7:  Holding the smart phone to view at an 180 degree to the ground.

At an angle,

• The contrast reduces
• The colors shift
• The subpixels blur

So even a small difference that might exist becomes visually flattened.  Small hue differences are flattened by the panel optics.  This effect is common in cyan/blue hues.

Further our human visual system averages nearby pixels.  The two adjacent colors like #FFF8FAFC and #FFF6FAFC are interpreted by the brain as a single averaged blue.

Why It Fails - Mathematical Analysis and Human Brain

In color science, the term "Empfindung" is used when talking about the experience of a color.  It is a German word meaning sensation or perceived differences.

In the UI and Design Engineering it is used as ΔE.  Where Δ (delta) means change or difference, and E is Empfindung -- perceptual sensation.

The professional UI Engineering rule enforces the minimum color difference of 3 to 5 RGB units.  Or the perceptual metrics as ΔE > 3 to ensure UI elements remain distinguishable. 

For these two colors #FFF8FAFC and #FFF6FAFC in discussion here, the calculation using CIEDE2000 color difference formula results in ΔE = 2.0 to 2.3.

• This range falls into interpretation as slightly noticeable -- borderline perception.

But, both colors in discussion here are with very high lightness (almost white) and low chroma (very low saturation) -- this is critical. 

• For such colors the human sensitivity to differences drops significantly.  
• Despite the ΔE ≈ 2, in reality the users will not notice the differences, especially on the mobile phones.

The smart phone display may map the two colors discussed here to the same or near-identical output.  Why?

• Display Quantization
• The values of R and B are near maximum in the above said color
• The maximum color value is 255.
• In our case the RGB of the two are rgb(246, 250, 252) and (248, 250, 252).
• Rounding and Gamma correction will compress the differences from the hardware and software of a mobile device.
• OLED Screen
• The smart phones having OLED screens, with high brightness levels,
• The subpixel differences become less distinguishable
• +3 in blue channel may not produce a visible shift
• -2 in red may be completely lost
• Viewing Conditions
• On smart phones, the brightness varies, ambient light interferes and viewing angle shifts color.
• As a Result, ΔE ≈ 2 is often perceived as identical by human brain.
• That is, the human brain cannot differentiate between the colors

Using these two colors #FFF8FAFC and #FFF6FAFC for buttons, states and backgrounds is risky and leads to users unable to distinguish them reliably.

For those with accessibility concerns and conditions, ΔE ≈ 2 is effectively invisible.  It fails practical usability and experience expectations.

The final outcome from the test investigation and debugging is,

1. These two colors used is not helpful and unreliable.
2. Not suitable for distinguishing the GUI elements.
3. Needs stronger contrast for interactive GUI design.
4. If the ΔE ≈ 2.0 to 2.3, it is borderline and unreliable.
• The range 2.0 to 2.3 may be ok only for subtle background variations.
• In this case it failed; we all three users had difficulty and trouble to understand the GUI.
5. Use the colors and contrasts with ΔE ≥ 3.

Use the below as a reference (heuristic) for standard perception thresholds.

• ΔE is < 1,
• the interpretation is not visible.
• ΔE is 1 to 2, 
• the interpretation is barely noticeable.
• ΔE is 2 to 3, 
• the interpretation is slightly noticeable
• But it does not serve on mobile app engineering.
• ΔE > 3, 
• clearly visible

On the lighter fun side refer to the below pic.  Let me know what is the Empfindung of your eyes for the discussed two colors together with the white background.

Pic-8:  The screenshot of this blog post on my mobile screen.

The three colors FFFFFFFF, FFF8FAFC and FFF8FAFC appear to merge and look as one color.  Doesn't it?  

You can  try an experiment with the above pic.  Look at this pic, by increasing and decreasing the brightness and contrast of the screen (smart phone or monitor) by being in the lighted and dark.  What's your experience?

Hope this should be a sufficient data to understand the seriousness of the problem discussed in this post.

What's the Fix?

1. For mobile app engineering, the recommendation for GUI color and contrast is
• ΔE ≥ 3  -- good and preferred
• ΔE ≥ 5  -- safe
2. Use the better text in the search text field
• This looks better and prompts to tap on it -- "Enter pickup location"
3. Distinguish and highlight the search text field GUI component prominently
4. When experimenting with AB Test configs, the GUI design to follow the suggested GUI Design & Color Engineering practices.

These fixes also benefit the users with accessibility concerns and conditions.  

Any questions or information needed on this please do connect with me.  I'm just one ping away!

Everything is Script -- A Philosophical Interpretation of Software System

 

The word 'script', I know it from days I started practicing Shell script.  My understanding for script then it was -- a small set of instructions in a file or piped through in a command.  

Prior to this, I had heard VBScript.  But, I did not use VBScript.

The bash script that I wrote did not span beyond 50 lines, then.

This was my first encounter with word 'script' and how I dealt with set of instructions grouped in a file and called it script.

The Ambiguity -- Script or Code?

I have this conversation in myself for a long time ow -- What is Scripting Language and Programming Language?

Technically, there are reasons why the two are seen as different paradigms in building and running the software systems.

That said, Python serves as Programming Language and also as a Scripting Language.  I learn JavaScript also falls into the same perspective.

In short, this is what I understand for script -- technically compilation exist but I do need to do it explicitly, can run using interpreter, quick and useful in automation of tasks.  

Today's programming languages can also work like scripting languages.  I see this is one of the key reason for the ambiguity.

Then what's the difference and advantage of scripting over programming?

• I understand, the scripting languages leverages the speed of writing and automation.
• Whereas, the programming languages leverages performance, structure and scaling of systems with better control for processing, memory, storage, exchange and communication.

Mental Model -- To Ease My Understanding

Scripting

• Say, the instant coffee that I prepare with Bru or Nescafe sachet and milk.
• Though there is a kind of compilation, that is, mixing of coffee powder and milk, it is not evident to viewer, who is making it, and the coffee sipper.
• That was fast making an instant coffee!

Programming

• Me preparing the coffee by boiling the milk and then add coffee powder.  Boil it for few minutes. Then filter and sip it.
• This is not as a instant coffee.
• It had different layers [explicit compilation] to go through before feeling the aroma of coffee and sipping it.

This mental model helps me to get and feel the coffee.  But, the taste and aroma of coffee got from these two approaches are different.  

The second way of preparing coffee gives me a control on how the coffee has to taste, feel and serve just to me or for the crowd.  I see this is a paradigm of programming language in a perspective.

Philosophical Perspective -- Everything is Script

Caution: This section is not confusing; it needs imagination and interpretation to see it.

I have been into this debate with myself.  One of me says, why the word 'script' is not so right for context.  While the another in me says, why the word 'script' is so right -- this person have had a upper hand so far in the debate.

Why I feel it so right?

• Philosophically, whatever I do it is a script.
• In that case, a software version deployed itself is a script.
• Why?
• A software system is a bunch of such coordinating scripts.
• Each script has a structure, organization, specific seams and responsibilities assigned to it.
• These scripts undergoes changes consistently to keep it contemporary!
• The word contemporary weighs and augments the notion of 'script' in the software.

I see, the script is always in the state of development unless the system turn to be static and requires no change.  But what it is static?  Is there anything static?  That's philosophical you see!  From the point view of computer science if it can be deleted any time and restored is that static?

Today's software system keep evolving to meet the need of business and scaling.  That way each deployed software version looks to me as a script doing a specific job to constitute the idea of software as a service.  This script sees the consistent development and maintenance to serve.  Do you see this philosophical and mental model of me?  

Seeing each component of the software system as a script  is philosophical.  Technically it make sense to me for interpreting it this way.  But, when communicating to people I cannot present it this way.  Why?  If I do so, it confuses people who follow the distinction between programming and scripting languages.  

I understand this confusion here is for not seeing there is a philosophy to the technical aspect too, and just consuming the technical as binary.  Is that wrong?  No!  That is also a way of consuming what I understand and what I just need  -- it serves the purpose well.

When the script [software components philosophically] undergoes a change, the system composing of such being developed scripts can still co-exist together.  Here is where that person in me asks -- Why should I remove the notion 'script' from my vocabulary, practice, interpretation and usage?  This question hits me bang hard to my head!

To end this philosophical transitions for now,  I pulled this blog post from draft and rephrased the above section a bit after responding to Shrini Kularni's LinkedIn post.  The link to LinkedIn post is in the comment.  I see, Shrini is right in his interpretation and the from perspective he is talking.

I know, I have sounded with not the common philosophical interpretation.  It makes relevant to me in my imagination, interpretation, visualization and modeling.

Every code has a script within it -- a set of instructions to do a task.  How I see the code and the scripts within the code is my imagination.  If there are scripts within a code, then the code is a script in a way -- the script with capability of language used to build a resilient software system and to automate a business's services and tasks. 

Will I use the word script or code?  That depends on vocabulary, understanding and interpretation of people with whom I'm communicating.  I prefer code.  

If you are in between the debate and thinking of code or script, then, how this sound -- the code in the script file or the script code.