Today, I delve into a topic that most designers overlook, as they focus solely on the "cool" factor: modes.
The most well-known are Light and Dark modes, with all the apps I use daily offering Light/Dark Modes or just one mode.
Which one is best? What's ideal for the end user? What's accessible and what's not? Let's explore together.
What is a mode?
I did my best to come up with a complete definition of what modes are.
Modes in the context of digital design refer to various display configurations that a website or app can adapt to enhance user experience. These configurations can include dark mode, which reduces eye strain in low light conditions; color-blind mode to assist users with color vision deficiencies; or a reading mode that strips away distracting elements for focused content consumption. Modes recognize the diversity of user needs and preferences, allowing for a more personalized interaction with digital content.
One point I really want to stress with this definition is that modes aren't just about what looks good, such as one person liking white while another prefers black on a basic level. Modes cater to the particular requirements of the end user, so it's about using the mode that suits them best and feels most comfortable to them.
How many eye diseases do you know?
Considering that the modes are tailored to address different accessibility requirements based on users' visual conditions, it's interesting to see how individual eye diseases may necessitate distinct modes to ensure a comfortable experience.
For instance, Cataracts, a clouding of the lens in the eye, can cause vision to appear blurry and increase glare from light sources. Glaucoma, another prevalent condition, damages the optic nerve, often leading to peripheral vision loss. Age-related Macular Degeneration (AMD) primarily affects central vision, making it difficult to see fine details. Diabetic Retinopathy, common among people with diabetes, can cause blood vessels to leak or proliferate on the retina, distorting vision. Modes can be tailored to alleviate strain and improve clarity for users suffering from these conditions, with features like high contrast and text magnification providing significant relief.
Some eye conditions can make reading challenging due to high color contrast, while others may struggle with low contrast. Some individuals might not find dark mode to provide enough light for comfortable reading, whereas light mode could be too glaring.
There isn't a definitive better mode because vision is highly subjective and influenced by factors such as ambient light, screen quality, time of day, screen time, and visual fatigue based on eye health. It's a multifaceted issue, and neither mode alone can cater to all potential scenarios.
When Design Decisions Go Astray
I can't dive deep into accessibility in this post as it's a complex area needing time and effort to tackle. Sadly, I notice that selecting the right mode is often hindered by fundamentally flawed design choices.
Sometimes, it's not about which mode to choose, but rather how certain design choices like contrast, spacing, font size and weight, and other design elements could make content hard to read for some people ma anche e sopratutto per quale device le persone stanno utilizzando.
For instance, the average distance from the screen of a computer differs from that of a phone. Additionally, on a phone, the user's zoom control varies due to gestures, unlike on a computer.
In OLED screens, light behaves differently. Without proper color settings, it could be dimmed by surrounding light. OLED turns off some pixels when the interface displays absolute black, reducing light bleed.
Some screens are calibrated properly while others are not. If a user has a screen that's not calibrated optimally, they might not see certain shades of gray with slight variations. The color range is less wider; ultimately, a high-end screen offers a different viewing experience compared to an entry-level consumer screen.
I can't dive deeper into the topic, but at times, opting for a different mode can help end users correct some unhappy decisions made by designers and developers, like choosing an already unreadable typeface and applying an ultra-light font with low gray contrast just because it's "cool."
Why only 2 modes?
Getting to the heart of the matter. Why do we offer only two modes when we know they aren't sufficient to cover all accessibility issues?
There are several reasons why we've chosen to focus mainly on two modes. Firstly, statistically, most visually impaired individuals use either a screen reader or high-contrast browser to navigate the web. Additionally, these two modes are considered essential according to most accessibility guidelines.
Providing guidance on optimizing the use of these modes can significantly impact how users with visual impairments access content. Having multiple modes could make it challenging to maintain correct settings for each new piece of content.
However, with design tokens, theming, and SCSS, designers and developers could easily offer more modes, allowing users to customize the site or app viewing experience beyond light and dark modes and system configurations.
Customizable Viewing Modes
The absolute best solution that all apps and websites should use, and one that I believe will be used in the future, is the adoption of a standardized pattern.
How does it work? Each user on their computer or device adjusts the display options based on their own sharing view or eye condition.
The website or app offers three modes: the first two, Light and Dark, both of which must be accessible and comply with the WCAG (Web Content Accessibility Guidelines) principles.
By adhering to these guidelines, designers ensure that users can choose the mode that best fits their visual needs, creating a more inclusive digital environment. Additionally, apps and websites should regularly validate their accessibility modes against these standards to ensure ongoing compliance and usability.
In a third mode that accurately incorporates user settings like font size, body, headings, color, contrast, spacing, and more, there's an API of sorts where users set parameters, and the website or app considers them in this third mode.
This mode would be the default for users who are visually impaired or have visual sensitivities and couldn't use the Light and Dark modes. However, it's essential to note that this third mode should still adhere to the WCAG standards for accessibility.
By implementing a standardized pattern, designers and developers can ensure consistency across different apps and websites. This not only benefits users who may have different needs but also simplifies the design process and reduces development time.
Having an easily adjustable display option for users can improve their overall experience and satisfaction with the app or website. By giving users control over their visual settings, they feel more included and accommodated, leading to a better overall user experience.
