Design Problem
We are increasingly spending our days in front of a computer screen researching, analyzing, collecting information from the Internet. Looking at web pages for long hours can cause eye fatigue due to a significant amount of light emitted by web pages with a white background.
Reduce the eye strain experienced while reading web pages due to their white background.
Competitive Product Survey
Existing Solutions 1
Tools like Night Reading Mode add-on, Turn off the lights add-on try to reduce eye strain by changing the background color to black.
The problem with this approach is that the screen on laptops have a lot of glare i.e. they reflect ambient light. This effect highly noticeable with a black background which makes a web page unreadable.
The problem with this approach is that the screen on laptops have a lot of glare i.e. they reflect ambient light. This effect highly noticeable with a black background which makes a web page unreadable.
Existing Solutions 2
Tools like Readability, Firefox Reader Mode, Pocket work by intelligently recognizing text on a web page and providing the user with tools to control the background color and font size.
This approach does not work on all web pages. Also, these tools change the layout of the whole web page which might not be desirable in many cases especially web pages that have images with text.
This approach does not work on all web pages. Also, these tools change the layout of the whole web page which might not be desirable in many cases especially web pages that have images with text.
Design Iteration
Evaluating the existing tools improved my understanding of the problem that the users were facing. Approach 1 was clearly superior as it maintained the layout of the web page and the original intent of the designer. The main problem with this approach is the use of black background color. Using another background color can mitigate the effect of reflective screens.
On further research, I couldn’t come up with a single color that could be useful in all cases and for all users. So, I decided to give the user the freedom to choose their background color. The idea was that this color would then replace the white color or any other background color on a web page while maintaining the layout.
On further research, I couldn’t come up with a single color that could be useful in all cases and for all users. So, I decided to give the user the freedom to choose their background color. The idea was that this color would then replace the white color or any other background color on a web page while maintaining the layout.
Prototyping and Implementation
Since I wanted to maintain the layout of the web page, the only solution to do this was to modify HTML/CSS of the web page. And a reliable way to do this was through an add-on. I decided to create a Google Chrome add-on as it is the most popular browser and thus has a larger reach.
I implemented the code using JavaScript to access relevant DOM elements and their children on a page and attach a <style> tag with the background color of user's choice.
Interaction Design
1. Add-on Activation
One of the design challenges was to provide an easy way to activate this add-on i.e. change the background color of a webpage. In looked at the design of other similar tools for this and came up with three options: Always on/off, Always on/off on selective pages, on-demand activation. Some tools acted on every web page until you turned them off, other ones had the ability to select which websites you wanted them to be active on. But the interface for selecting these websites was always too complicated. I was aware that on-demand activation might be annoying for a user that wants to use this add-on frequently. On initial research, I found that users tend to use this add-on on text-heavy pages, primarily news and blogs. Users don't want this add-on to be active on all web pages. The on-demand activation seemed like a good compromise with being slightly annoying for heavy users and accommodating light-use people as well.
2. Default background color
I decided to put up grey as a default background color because it is the most inclusive color. I was aware that this add-on might be used by people with visual impairments to improve page contrast. The users may also involve color blind people. Thus any colors with red or green might not be distinguishable by people with red-green color blindness, the most common color blindness. Also using any bright colors would have not been useful for people who want to reduce their eye strain. Thus I chose Grey as the default background color. I was aware that a majority of people will not change the default background color. Grey seemed to be a color that accommodated the most number of users. For individuals who get annoyed with this color can always use the option to change the default background color.
3. Color change menu
Another point of interaction with the UI was when the user wanted to change the default background color. Again I looked at other tools and found pop-up menus and chrome add-on settings. I realized that users would rarely use this option after they had chosen the background color that they want. Thus a pop-up menu was not the right solution, as it would have appeared on the screen every time the user clicked. So, I decided to go with the chrome settings and used the featured photos on the Chrome store to communicate this functionality to the user. Users are highly likely to notice this feature when they install this add-on.
Here is a link to the Google Chrome add-on: Chrome Extension.
The code for this project can is available on Github.
