Blue light Inspired Custom UI and Dark UI on Eyestrain and Focus
A scientific research project on how Dark UI and blue light inspired Custom UI impacts user`s focus and eye strain
Background
In this project, I collaborated with a computer science student on designing blue light inspired custom UI and how this custom theme is compared to commonly used default UIs and Dark UI themes.
This project is mainly targeted to high volume computer users working in front of a computer screen for long hours due to their work or studies.
The research idea started with a deep dive into the effect of blue light and how it can be possibly utilized better with current UI designs, possibly reducing the eye strain, improving focus and task performance.
Dark UI has shown to have some positive effects on user's eye strain and fatigue. The idea was to incorporate these wavelength ranges into custom UI design to see if there any potential benefits and effects.
Research Goals
-
Design a user interface with a color palette that harnesses the good effects of blue light and reduces/minimizes eye strain at the same time
-
Provide a quantitative data and discussion regarding impact of different user interface designs
Conditions Evaluated
Default UI
Dark UI
Custom UI
Research Questions
-
Does bluelight inspired custom UI improve users focus and reduce their eye strains?
-
Out of 3 conditions tested, which condition users prefer the most and achieve the highest task performance
-
Does the blue light inspired UI provide any valuable benefits to the User
To deliver answers to these questions, we conducted a scientific research
-
Brain Signals using EEG
-
Eye Strain using Eye Tracking
-
Questionnaire and Surveys
-
20 Participants
MY ROLE
-
Planning
-
Recruiting
-
Conducting Study
-
Analysis
-
Presentation
Process and Challenges
The challenge of publishing and conducting nationally recognized peer reviewed research is the justification of the research and its unique contributions.
Even a simple thing such as a color change would not hold any kind of research value if there is no scientific research and explanation behind it.
It is simply not possible to say “This color looks good, lets research this topic to see if it has an impact”
The main challenge in this research was to create a custom UI that is backed up by previous research and blue light measurements.
Measuring incoming blue light from computer screens and designing a user interface utilizing the ranges of blue light is quite the task that requires various tools. To be able conduct the custom design, reviewing various past literature and understanding the blue light was very necessary.
Same as every research, the main goal is to improve the existing past research and introduce contributing findings. So we have dived deep into the color theory and blue light nanometers measures.
Literature Review Highlights
-
Blue light has been believed to be bad for human health, can cause eye strains, migraines
-
Some additional new studies highlights the benefits of blue light; Wakefulness, alertness,
-
Visible blue lights can be separated into two groups - short wavelength blue light (420 nm to 455 nm) and long wavelength blue light (455 nm to 480 nm).
-
465 nm to 490 nm believed to be healthy for computer users
-
420 nm to 455 nm believed to be harmful blue lights
-
Dark UI has been a very popular theme in recent phone, tablet and even computer usage, however scientific findings and support regarding this design is still limited.
-
A study showed that a dark user interface resulted in lower comprehension scores when compared to default UI at about a 6% difference.
-
When looking at screens in darker environments, dark modes and darkened user interface themes reduce eye strain significantly.
Comparative Analysis
-
There are other computer programs that adjust the pixels to present color ratios only within this range to increase productivity and eye comfort.
-
These programs help computer screen to eliminate avoid short wavelength blue light (420 nm ~ 455 nm) emission while retaining the long wavelength blue light (455 nm ~ 480 nm), allowing users to experience the ultimate color reproduction with undistorted colors, high sharpness, and contrast.
-
There are also special computer monitors following this principle to improve eye comfort and productivity
Background Research Summary
Mind Map
Based on the past research, comparative analysis and other applications in the market, custom UI preferences are decided.
Task
Based on the tasks that have been used in similar research, we have created two pilot studies incorporating these tasks to assess if they are fitting to provide us valuable feedback towards our research questions.
In a similar setting, most used and accepted tasks were information search and word search tasks.
Information Search Task
Word Search Task
These two tasks were tested in pilot studies with various participants from different backgrounds
Based on the feedback of our users, and conducted pilot experiments we have created a newly designed task that we believed to provide and serve well to our research purpose.
Hybrid Search Task
To measure the cognitive performance, focus, and additionally keep the participants mentally occupied consistently throughout the task, a special hybrid word search task is implemented.
Rather than finding information that made sense in a paragraph like in an information search, or finding a random word in a jumble of letters like in a word search, our hybrid-search task emulated a programmer searching for a keyword in a screen of random code or analysis looking through lines of excel spreadsheet.
Participants Recruitment
-
Employees who work with computers for long hours
-
Students who study and work with computer for long hours
Experiment Process
Eye tracking and Brain signals recording
RESULTS
Statistical Analysis
Some of the statistical analysis I conducted including but not limited to following methods;
-
Average scores, mean values
-
The standard deviation
-
The %95 Confidence Interval
-
Analysis of Variance (ANOVA) statistical test
-
T-Tests to evaluate the mean values
Hybrid-Search Task Performance
-
Task performance is measured in terms of two categories, average time spend per word and number of total words found within the total duration (15 min per condition)
-
Participants showed their best task performance during the default UI however the results were not significantly different
Workload Questionnaire Results
-
Standardized NASA workload questionnaire results showed a significant increase workload in default UI condition compared to custom UI and dark UI. (p=0.017)
-
Custom UI condition had the lowest workload rating out of all conditions indicating that the participants were not as tired as dark UI and default UI conditions
Cognitive Results
-
Relative PSD theta waves showed a significant difference between UI conditions. (p = 0.04)
-
Theta waves relative PSD values were the largest and the most prominent during the Custom UI conditions and Dark UI conditions
-
Theta waves have been previously linked to relaxation
Summary
The custom UI condition did not improve the task performance as expected however, there were no significance between any of the conditions.
Increase in sample size in future research might provide more information.
However custom UI condition and Dark UI showed its effectiveness on workload. Custom UI caused %6 and %3 less workload compared to default UI and Dark UI.
EEG results also supported these findings that the Custom UI condition significantly reduced workload and increased comfort of participants.
Theta waves, which is the indication of relaxation showed a %40 increase during the custom UI condition compared to default UI condition.
Research
-
This researched created a custom UI and studied its effect compared to commonly used Dark UI and default UI.
-
This study also created a new hybrid-search task to be utilized compared to word-search and information search tasks
-
I as a lead researcher, I have mentored and worked with a computer science graduate student on this project
Impact
-
This researched is recognized and in proceedings to be published by peer reviewed Human Computer Interactions Conference
-
This research provided a new custom UI.
-
Study offered scientific explanation related to Custom UI, Dark UI and default UI.
-
Study contributed to the literature with unique findings especially regarding to the theta waves
Takeaways
-
In addition to literature review, comparative
analysis really helped us nail down some of the experiment and UI design decisions. -
Instead of using popular tasks, creating a suitable task that is more relatable improved the research process substantially and answered the research questions more effectively.
-
Pupil dilation is linked to eye strain. The more the pupil are dilated, it can lead to more eye discomfort and fatigue.
-
There were no significant difference between any of the UI conditions. However, the graph shows a trend of Custom UI having the least pupil dilation values.