The Colour Laboratory in your Pocket. 📱

In terms of UI/UX Design, color is one of the essential tools that designers must convey meaning and functionality. Nonetheless, for people suffering from color disabilities, it is hard to distill such meaning when not being able to see the full-color spectrum. In order to explore how color affects the user experience, my team and I decided on Black & White color filter and maintained it for five consecutive days.

The goal was to document what changes, if any, in how we use your mobile phone. We later reflected on things we perceive regarding our day-to-day usage and how your most-used apps get impacted by the color filter.

What was this project about and what my team and I did?

• We explored how sensation, perception, and color impact the experience of users in different contexts and settings.

• We researched sensation, perception, and color to a practical activity we face and propose solutions through HCI design guidelines.

• We created a preliminary Design Aid Device (DeDe) incorporating specific evidence to address the impacts of sensation, perception, and color on the HCI.

How can we design user interfaces that accommodate human color perception and sensation?

1. Color filter choice and rationale

   We chose to experiment with a grayscale color filter. Although monochromacy (complete color blindness) is quite uncommon (Types of color blindness, 2019), we predict this color filter will play an important role in reducing screen time. This filter discourages activities in which color is an important part of it, while keeps productive activities like reading unchanged. Besides, we want to confirm that vast brightness difference and motion would be able to attract users’ attention while using their phone in grayscale, from there, we can try to maintain the visibility of important features on the phone interface without the use of color.

2. Definitions

   Sensation: The physical process during which our sensory organs respond to external stimuli is called sensation. We collect information from the surroundings and process it through transduction which converts the information into energy that our brain can understand.
   

   Perception: The process during which our brain responds to the surrounding external stimuli is called perception. The first time we build a perception about something, we cause a bottom-up-processing, where the information is gathered and stored. Next time when we listen to the same song or smell the same perfume, we are performing a top-down-processing.
   
   Color: Light in different wavelengths within the human visible wavelength range from 380nm (violet) to 700 nm (red). Humans can perceive color thanks to cone-shaped photoreceptors that preferentially respond to red, green, and blue light wavelengths (Privitera, 2021). We can see color from objects when light bounces off that object into our retina. Color Blindness hap

3. Brainstorming

   • What is known & unknown

     • Known

       • 1. Internet-surfing activities will become less enjoyable because of the lack of color.

       • Important color cues will no longer work in grayscale mode and information can be easily misinterpreted.

       • . Color helps up navigate through a lot of apps as we get used to the color and position of buttons.

       • According to color theory, different color evokes different message and emotion (Cherry, 2020).

     • Unknown

       • How does grayscale effect users’ behavior on the phone?

       • How to maintain functionality in grayscale mode e.g., make notification dot pops out?

       • Will grayscale mode actually reduce phone usage?

       • What message do humans associate with different colors?

   • Design objective and research question

     • Notification dots are less visible in grayscale mode, changing users’ behavior (skip checking mail when waking up) and increasing time spent looking for apps. We need to find a way to improve notification dots visibility in grayscale mode

   • Mindmap

4. Research Knowledge

We chose to experiment with a grayscale color filter. Although monochromacy (complete color blindness) is quite uncommon (Types of color blindness, 2019), we predict this color filter will play an important role in reducing screen time. This filter discourages activities in which color is an important part of it, while keeps productive activities like reading unchanged. Besides, we want to confirm that vast brightness difference and motion would be able to attract users’ attention while using their phone in grayscale, from there, we can try to maintain the visibility of important features on the phone interface without the use of color.

Question 1: Does pulsating animation make notification dots more visible in grayscale?

Answer:

• “Tiny bit of motion is enough to make a viewer's eyes zip over in that direction.” (Johnson, 2010, p. 73).

• “If motion or blinking is used, it should be brief: it should last about a quarter to a half-second—no longer.” (Johnson, 2010, p. 75).

Implementation:

Adding a pulsating animation on the notification dot should be subtle but enough to draw users’ attention

Question 2: How to make notification dots stand out without animation?

Answer:

“Our vision is optimized to detect contrasts (edges), not absolute brightness.” (Johnson, 2010, p. 53).

Implementation:

If we place a border around the icon with different brightness comparing to the icon and app drawer background color, we might be able to attract user attention

Question 3: How to let users know if they have scrolled past apps with notifications?

Answer:

Clash Royale uses a moving arrow to show players if they have scrolled past a reward, or there are more rewards above/below we can use this to show users if they have scrolled past an app with pending notifications.

Implementation:

We put a pulsing notification dot in a moving downwards/upwards triangle that looks like an arrow, the dot pulses in synched with other dots to avoid misinterpretation.

Reference

Types of color blindness. (2019, June 26). Retrieved February 13, 2021, from https://www.nei.nih.gov/learn-about-eye-health/eye-conditions-and-diseases/color-blindness/types-color-blindness

Cherry, K. (2020, May 28). Can color affect your mood and behavior? Retrieved February 13, 2021, from https://www.verywellmind.com/color-psychology-2795824

Privitera, A. J. (2021). Sensation and perception. In R. Biswas-Diener & E. Diener (Eds), Noba textbook series: Psychology. Champaign, IL: DEF publishers. Retrieved from http://noba.to/xgk3ajhy

Johnson, J. (2010). Designing with the mind in mind : Simple guide to understanding user interface design rules. ProQuest Ebook Central https://ebookcentral-proquest-com.proxy.lib.sfu.ca