Intro to Eye Tracking
Biosensor Technology or more specifically Eye Tracking, is a method of collecting data based off the involuntary and voluntary responses of the test subject to develop insight behind the reasoning and actions of a user. It is an Emerging Technology that is rapidly used in all forms of study, from psychoanalytical studies to sciences of brain chemistry, or in my case through participating in studies of Eye Tracking it can be used for UX/UI Research.
When studying UI/UX Research and to truly understand user experience, a fundamental component of such would be analysis the user's conscious and subconscious processes when encountering an UI. Methods such as Eye Tracking help in gathering visual based quantifiable and qualitative data of these processes in order to maximize the visual and subconscious flow of an User Interface. Even by understanding the most basic aspects of Eye Tracking, one can understand aspects of an interface that direct and control the user's attention and utilize said information to improve the efficiency of the interface. This even accounts for the other forms of biological sensing such as various electrodes and perspiration detecting data for understand the deeper forms of subconscious involuntary reactions to UI. In order to develop a deeper understanding of UI Design and Research, then it is inherent for me to grow this understanding and integrate the fundamentals of Eye Tracking and other biological sensing data in order to gain UX/UI growth.
Approaching this need to grow this skillset, the class taken delved into the aspects of these technologies with the eventual goal to create a full project, experimentation, and presentation of findings made proxy of collections of Eye Tracking data. To begin this pursuit, we started reading into the full details of utilizing and understanding biosensing data through the book "Eye Tracking the User Experience: A Practical Guide to Research" by Aga Bojko. From discussing the underlying insights, choices, and proper usages of data, we were able to approach our incoming projects into approaching the final project of the class as we set out to formulate teams to practice our learned material.
Explanation of Project
The end goal was to be able to establish a workable methodology pipeline of testing and utilizing biosensory data to breakdown and analysis an User Interface. However, before we began to approach a full analysis akin to our accomplishment in the final project, we started a mock pretrial of an analysis on a smaller scale. Our pretrial was able to develop basic practical application of our learned knowledge to apply to a comparable analysis.
Eye Tracking itself can utilize extensible complex and intensive equipment from MRI Brain Scanners, to careful precision technology, to even EEG Electrodes. However, our purposes for both our final project and pretrial, we had less need for advanced equipment. Our trial only needed to utilize Eye Tracking and User Experience data, and our final required use of Eye Tracking, UX data, GSR Sweat analysis, and Facial Tracking. The voluntary and involuntary data we would collect with all equipment provided more than enough data for our purposes.
Explanation of Pre-Activities
To establish our skill with utilizing Eye Tracking data for UI design, we sought to analyze two similar high fashion brand websites, JCrew and Banana Republic, not only due to their resemblance to each other, but the many UI issues that are expressed by its customers and reviews. We aimed to collect Eye Tracking data to quantify the UI issues present in both websites to additionally understand what can be done better.
In order to compare each website, we established a brief list of tasks for our test subjects to conduct while the Eye Tracking scanners monitored their vision. Our collaboration set three basic tasks that can be equally accomplished on both websites. These tasks would find relevant data that can show the faults of one websites UI and the better choices of another. When going about proceeding with testing the task script, we aimed to collect data on three test subjects (who lack eyewear that can interfere with the Eye Tracker) and test each subject with two members from our team. During a test, one team member would recite the script and order the subject on what task to accomplish, while the other team member would gather the noticeable and significant notes on the performance of the subject. The main goal of tracking significant voluntary and involuntary actions was to develop proper qualitative data outside of the sensory data being gathered by Eye Tracking.
A subject would also express their experience with each site, which became necessary to track and retain their user complaints or verbal understanding. Whenever a user finished with a task, they were prompted to turn away from the screen and view the team member, however this nearly decalibrated the Eye Tracking device, so that process in our script to end a task was reworked in future tests.
Meanwhile, the Eye Tracking equipment was collecting precise data of the movements and stalls of the test subject's eyes and vision. Our main method of understanding the Eye Tracking data, beyond viewing their eye's path along the website, was through the use of measuring Areas of Interest (AOIs). AOIs are fixed spots within an interface that group portions of the screen under a category, in use of this trial we established AOIs of the screen within portions of similar photos or key items that would determine the success of each task required. AOIs helped to provide quantitative data of the fixations and durations of specific eye movements down the millisecond. This precise data helps indicate irrefutable differences between the performances of each website.
After we successfully gathered enough data, we were able to triangulate the user feedback, qualitative, and quantitative data to understand the mistakes and oversights within both of the websites. Not only were both websites lacking in user based interface design and often confused the user in its layouts, but we discovered several perception errors in the websites. More specifically Competitive Perception errors within elements of the layout and products, as many of our users would expect a function, button, or product to be located on a different screen than where the actual location was, which would extend the time between accomplishing a task by a significant amount.
By understanding these UI errors and faults, we were able to understand what to view and point out when we observe other projects and what to recommend to change.
With our Trial Successfully Completed, we were Ready to Begin our Final Project
Approaching the Final
Our design of most of the project was familiar to our pretrial, only with the ensuing changes:
- Increase our test subjects to 5 people.
- Make a comparable analysis with more tasks and resulting findings
- Create a singular analysis of a websites different pages
- Analyze an advertisement's effectiveness with involuntary biosensor data
- Develop possible recommendations from findings
For each different group of analysis, a separate brand was utilized with a slightly different test and task to diversify our data collecting.
Each Brand and Tasks
Chewy and Petco: Comparative Analysis
Most similar to our pretrial, we established three tasks for our test subjects to follow as the equipment tracks their Eye Movements and fixations on key AOIs of portions of the above screens. However a key change also included how a task would end, as instead of the user looking away from the screen, our tracking software ended the projection of the website screen and would bring the screen back up for the next task. This prevent our earlier calibration errors and helped the flow of tasks.
Tasks included were:
- Proceed with a purchase of a number of bags of dog food, in a specific size, and proceed with checkout.
- Find the nutritional facts of the bag of dog food and find the protein percentage.
- Locate and read the first negative review of the dog food.
Hypothesis: We original presumed for the users to proceed with check out smoothly, for them to scroll to the description of the food to find the nutritional facts, and for the user to scroll down to the reviews to find a review.
AOIs: Compared to last time, the AOIs among the sites were more accurate to accomplishing each task. AOIs were centered in the images, and buttons that would immediately accomplish the task, such as the description's nutritional bar. However as our tasks and method of producing the test required scrolling between screens, the AOIs had to be created more dynamic to the user's movements.
We especially had the presumption that Chewy would be less optimal than Petco from the proposed renown of Petco might indicate them possibly having a better site.
Serious Eats: User Experience
Utilizing similar equipment as done with the comparable analysis, after the two previous brands were tested, the user was then brought to the Serious Eats blog and given tasks that allowed them to explore the website to accomplish the tasks instead of remaining on a singular screen. Our main goal was to identify the faults of a website's UI and UX without the need of comparing to another website.
The tasks given were:
- Find an article about the best knives to purchase for cooking.
- Find the Serious Eats Instagram link and hover your cursor over it.
- Find a Caribbean dish without utilizing the navigation bar.
Hypothesis: We believed that a self sufficient website like Serious Eats would have a layout beneficial to accomplish these basic tasks that a standard user would utilize the website to accomplish. We thought that finding a specific article with a goal in mind would be easy to locate, the social media would be found in the bottom of the web page quickly, and that a specific dish can be found by utilizing the design of the webpage itself.
Our main goal was to breakdown Serious Eat's quality of its web design, more specifically the efficiency and clarity of its homepage.
Game Grumps x Crunchyroll: GSR and Emotional Valence
For analyzing a video advertisement, we approached collecting and testing data in a completely different way. Our testing was expanded to include more involuntary biosensor data such as sweat detection by collecting Galvanic Skin Response data, and utilizing Facial Recognition and Tracking technology to determine the briefest emotional reaction at different points of the video. By utilizing these biosensor technology, we would determine the effective portions of the to draw judgements and analysis from the involuntary responses and behaviors of the test subject. The only task was to allow the user respond to the ad in anyway they feel fit.
Hypothesis: From the comedic tone of the advertisement, we assumed that most of the test subjects would produce a positive reaction to most of the ad, standalone from any context of the ad. Additionally we assumed that the positive emotion to the ad will only build gradually as it plays. However we did expect some level of bias to emerge, either from a user recognizing the content creators of Game Grumps or recognizing the brand of Crunchyroll.
By understanding involuntary biosensor data, we can determine the quantitative effectiveness of the ad and determine which parts of the ad elicited more positive responses.
User Testing and Findings
Methodology
Compared to our pretrial, we had to utilize more equipment and more test subjects for the experiment to proceed. This required more difficulties in our setup, not only to find a proper time to establish a testing area for the Visual Tracking and GSR equipment, but also to gain our goal of 5 test subjects in a proper time. We had only a few windows of time to coordinate our possible test subjects with our time to utilize the equipment and conduct the experiments. However we were still able to overcome this difficulty by developing the findings we had previously and being able to add the aggregate data of the extra test subjects afterward, which required more work to properly reestablish our findings when the data reaggregated changed significantly. However, most of the data we added with out last test subjects only proved some of our findings and helped legitimize our discoveries.
The user also lacked the need to look away from the screen which would have ruined the calibration of the eye tracking. The webpages were copied into different sections between each task cut to allow our methodology of proceeding with testing to run faster.
Once all of our quantitative data was gathered, all data used was formed as an aggregate metric that combined the values of each test subject so we can view our data as a whole and to open our data to noticing significant difference across all subjects. For individual user experiences, our qualitative data was able to differentiate the key differences and actions between users similar to the pretrial of notetaking during the experiment.
Findings and Errors for Each Brand
Petco v Chewy Finding 1: User Experience Failure
Chewy is More Organized and Easier to Use Than Petco- Petco has a large pop up every time the page is refreshed and asks user to track location with a pop up window in the top left of the screen. This frustrated most users and made them go off track for a few seconds. Petco's AOI fixation on the bag image is equal to 21.7 while Chewy had a fixation count of 5. Petco's organization and ads took away the attention of the viewer from their task and it even extended fixations by 4 times.
Petco v Chewy Finding 2: Competitive Perception Failure
Users Often Utilized a Different Way to Find Nutritional Info- Nutritional information is shown in multiple locations, both the product images and product description section. Time to first fixation of Petco for finding the Nutrition AOI is more than 600% longer than Chewy's 13331.7ms compared to 2078.9ms (13 seconds as compared to 2). This option that our 3/5 users often took shows not only an expected Perception Error, but also a lack of functionality of the bag view option from its difficulty to read.
Surprise from Hypothesis: Chewy turned out to be the better user experience, from not only the lack of invasive and distracting pop ups that Petco had, but also had a much more digestible layout that helped present the information needed for the tasks but better than Petco. Additionally it was unexpected for the users to rely often on the bag images to find the nutritional facts, we expected them to search in the description but the users acted in the same manner as if they were physically shopping.
Serious Eats Finding: Competitive Perception Error
Social Media Accounts Were Not in Expected Area- 100% of users went to the About Us page to find the Serious Eats Instagram account. The only place that the Serious Eats social media accounts can be found on the site is in the footer with very small icons of each platform. This extended their time to properly finish the task. Forcing the length of the task to extend between 32 seconds to as long as 1 minute to find the Instagram link.
Although other tasks within Serious Eats illuminated similar Competitive Perception Errors of expecting an element to be in different locations, this was by far the most dramatic example of this error being repeated.
Surprise from Hypothesis: Serious Eats turned out to be difficult for users to navigate and parse through the products and screens to accomplish the tasks. Items were either in wrong locations in the eyes of the user and they often complained about navigating the pages.
Advertisement Finding
For determining the Ad, the Galvanic Skin Response data aggregate is measured in increments by the bottommost brown line. As it shows sweat response detection the highest in the beginning at a slow decline.
The Emotional Facial Valence data is represented by the amount of positive reactions by increments in the topmost yellow line, and the negative reactions in the middle purple line. The positive reactions were high in the beginning of the ad, but after the 30 second mark, the valence appeared to switch.
The Ad Received Mixed Reactions- Preconceived notions of the Game Grumps as a brand effected user responses, but certain points of the video resonated with all users. The strongest area of positivity culminated around the beginning of the video and tended to die off as it played on. This could be a result of the ad running on longer than most would.
Surprise from Hypothesis: We didn't expect the length or the bias of some users to affect their view of ad so terribly. The longer the ad went on, and especially for the 40% of users who expressed their prior dislike of the content creators, the more negative the emotional reactions became. Although 40% of viewers still consistently expressed enjoyment of the ad throughout, it still declined as it continued longer.
Recommendations and Conclusion
From the pretrial, our more small scale differences between our hypothesis in the UX of test subjects set us to be overconfident in our hypotheses. When we conducted our full final experiments, we were incredulously surprised at most of the results illuminating many unoptimized faults within the interfaces of the websites tested and the experience of the users.
However, this only showed us how these experiences can be evolved to better fit a more user centric design and form than before:
- For Petco and Chewy- Complete Overhaul of the Layout Design- 3/5 users tried to find nutritional information on the bag's picture before scrolling. This made time to find this information longer and resulted in unneeded frustration. As the majority of users utilize the bag image to find nutritional facts, reorganizing the page to make nutritional information easier to find will assist in making sure users get the correct product. Another alternate solution is increasing the magnification % to allow for easier reading on the photos.
- For Serious Eats- Improve the Locations of Elements in the Website for User Expectation- For one example from the error identified in the Instagram link task, Serious Eats should add the links to their social media accounts into the About Us page on their site. They could add mini photos of each social media icon right underneath the title as well as keep it in the footer. This would allow users to find the accounts in multiple, easier ways.
- For Game Grumps Ad- Optimize Content, Jokes, and the Ad within a Shorter Timeframe- When looking at the aggregate data, emotional valence and positive reactions slowly died down after 30 seconds. If the ad itself can be cut down to 30 seconds while retaining all the jokes that received positive reactions, it could make for a product that is both more memorable and entertaining to sit through.
Evolving it for the Future
Takeaways
Although I was fairly confident in the pretrial of making assumptions, the Final's experiments showed me how much can truly be revealed by method of proper UI testing and biosensor data. The biosensor and aggregate data often defied expectations on the outcome of the data, and often showed me when a design would often hurt a user's experience when I previously believed it to aid. Not only did it morph the understanding of the final, it also began to teach me how to understand and integrate user based design based off the test subject's behavior when navigating the websites for a task. The same principles used to understand the mistakes of each site and provide recommendations for would additionally build my own understanding of User Based Design for my own media.
Overall Thoughts and Future Processes
Looking back on the assignment, our team only scratched the surface of the extensive applications of biosensing data. Truest forms of UI testing and user experiences can branch into psychoneurological sciences, more extensive and monitoring equipment, and more sample sizes to expand the differences between users. We only had a taste of trialing User Interface design, but the biosensing experience we did utilize helped up formulate proper postulations and insightful determinations of what our testing material could do to improve. These experiences fully integrate my understanding of UI design with biosensing data, which would provide the quantitatively backed insight to form nonbiased perspectives and data findings from testing UIs.
If this project were to continue, the recommendations presented wouldn't rest there, beyond establishing more trials and larger sample sizes to perfect the recommendations, full mock ups and interface drafts would be created to fully illustrate the recommendations to better fit the experience of the user. If this project even had further capabilities to grow, said mock ups would then be retested to reiterate its design, to possibly showcase the improvements that were created by the team to even present it to the brands themselves. UI/UX Design is a journey, and perfecting the product will extend that journey. If I would conduct UI Design experiences, I would utilize the biosensing tools I have become acquainted with to properly perfect the product in all aspects of its design.
Credits:
https://www.youtube.com/watch?v=Qvha1rA92Zs&t=1s Eye Tracking the User Experience: A Practical Guide to Research: Bojko https://eyetracking.ch/improve-user-interface-designs/ https://www.sr-research.com/eye-tracking-blog/how-does-eye-tracking-work/