Sustainability-driven UX
Optimizing Content Presentation for Enhanced User Experience and Website Sustainability
Project Supervisor: Yoram Chisik
External Supervisor: Irina Wang
Project Brief:
The Energy Institute (EI) is a chartered professional membership body for people who work across the world of energy and their purpose is creating a better energy future for their members and society by accelerating a just global energy transition to net zero. Their research prompt is in line with their mission of reducing carbon footprint produced by websites.
My role:
UX Researcher/
Designer
Duration:
4 months
Time:
Summer 2024
Research Background:
The internet, with its extensive network of data centers, servers, and end-user devices, is a major consumer of energy. By some estimates (Griffiths, 2020), the internet emits 1.6 billion annual tons of greenhouse gas emissions, a number that is rising quickly. Each activity a user performs online comes with a small cost – a few grams of carbon dioxide is emitted in running their devices, and powering the wireless router, but powering the data centers, vast servers needed to support the internet, and store content is quite energy intensive.
This research focusses on understanding the impact of content presentation on user experience and website sustainability and leveraging User Experience (UX) to reduce the carbon footprint of a website in the process.
Research Questions:
How does content presentation influence user experience and website sustainability? What guidelines can be derived to balance information elements effectively?
Scope of ‘content presentation’
Density and Layout
Readability
Visual Clutter
How does the amount of text and objects covering a screen influence user experience and website sustainability?
How does optimizing text readability affect user energy consumption and the ecological footprint of a website?
How does eliminating clutter on web pages influence user experience and their carbon footprint?
Hypothesis:
High density = Higher CO2
Better Readability = Lower CO2
Less Clutter = Lower CO2
Methodology:
Preliminary Eye-tracking with the current website to identify usability issues
Prototyping based on preliminary eye-tracking, heuristic and sustainability principles
A/B Testing & Eye-tracking with website and prototype (Quantitative and Qualitative analysis)
Interviews with participants to triangulate findings
Metrics:
- Time
- Fixation
- Error rate
- Heatmap
- Skimmability
- Target Findability
Overview:
Membership pages of the current EI website were used as a case study to prove the concept and develop guidelines. 8 participants were given 8 tasks to perform on the website and 8 on the prototype. Quantitative data of how much time was taken to complete each task was recorded and analysed, along with qualitative insights were recorded using the Tobii Eye-gaze tracker device. This was followed up with an interview. The whole process led to achieving empirical evidence of the the relation between elements like Density and Layout, Readability and Visual clutter, with Sustainability.
Results of Preliminary Eye-tracking with the current website
Skimming of the Benefits Section:
None of the participants read the complete benefits section, but simply skimmed through the section. This suggests that the participants found the detailed text overwhelming or less engaging, potentially due to a lack of visual hierarchy or a failure to immediately convey value.
Longer Saccades and Scroll Length Due to Large Images and spread-out text:
The website’s use of large images, spread out across the page, resulted in longer saccades—the quick, simultaneous movements of both eyes between two or more phases of fixation. This design choice not only made the page lengthier but also disrupted the participants’ ability to quickly scan and absorb information.
Higher Cognitive Load in the Cost Section:
The cost section, presented in a uniform paragraph format, posed significant challenges for the participants. As the text was not broken up into distinguishable parts, users found it difficult to quickly locate the exact cost of any membership. This increased the time taken to extract relevant information and caused a higher cognitive load, leading to user frustration.
Difficulties Due to Full-Width Text Layout:
The information on the website was spread across the entire width of the page, with little to no margins, which significantly impacted readability.
It also reflects higher cognitive load because of overload of information in a small space.
Prototyping:
Based on existing guidelines related to density and layout, readability and visual clutter, and the results of preliminary eye-tracking test of the current website , I designed a prototype.
Click on images to view details
Findings
Quantitative Analysis:
Mean, Standard Deviation, T-values and P-values
- The Prototype had lower mean times than the Website
Except for Q2 and Q8, in all the tasks, the website had higher mean times than the prototype, suggesting that on average, participants took longer to find targets and suffered a higher cognitive load while interacting with the existing website.
- The Prototype has a more uniform experience
Except for Q2, all tasks reflect a higher variability in users’ experience with the website than with the prototype. This indicates that the prototype delivered a more uniform experience to all participants during these tasks.
- 6 out of 8 tasks have statistically significant results
Except for Q1 and Q8, all other tasks have p-values below 0.05, indicating that the differences between the website and prototype are statistically significant. However Q1 and Q8 do not have statistically significant results.
- 6 out of 8 tasks have a high magnitude of difference between platforms
With Q1 and Q8 showing a small to moderate impact, Q2-Q7 have a Cohen’s d above 0.8, indicating that the magnitude of the difference is higher, and the changes made in the prototype brought significant impact in the usability of the page.
Quantitative Analysis:
Q1: Quickly skim through the Join Us page and summarize the main points.
- Highly complex and scattered scan path
- Users’ attention is divided among multiple sections, including various text areas and images,
- Suggests a higher cognitive load.
- Focused attention on specific areas suggests that the prototype is easier to skim.
- Faster understanding of the main points.
- Suggests a lower cognitive load.
Q2: Locate the benefits of joining EI with a Professional Registration.
- Spent a considerable amount of time reading through the details.
- The heatmap reflects that most participants just skimmed through the pointers
- Shows a more concentrated focus on the icons and short descriptions that represent the benefits of joining EI.
- Suggests a lower cognitive load
- People didn’t recognize the icons as benefits ast first leading to a higher mean time. A title saying “Benefits” may be helpful in quick recognition to be tested in the next iteration
Q3: Browse through the product and find how to upgrade your membership.
- Users spent time scanning through multiple sections before focusing on the “Upgrade your membership” option.
- Heatmap is more complex and time-consuming process suggesting a higher cognitive load.
- Shows a more concentrated focus on “Upgrade your membership” with minimal scanning of other sections.
- Suggests a lower cognitive load
Q4: Read in detail the Apprentice Membership and reviews from current members.
- Shows more dispersed attention with more focus on the questions in the text rather than the answers.
- Multiple areas of moderate to high fixation, suggests a higher cognitive load.
- Shows a more concentrated focus on key areas, particularly on the review of the current member
- More streamlined and intuitive experience, reducing unnecessary cognitive effort on the part of the user
Q6: Identify and describe the main call-to-action on the Company homepage.
- Shows more dispersed attention due to confusion amongst multiple options.
- Multiple areas of moderate to high fixation due to conflict, suggests a higher cognitive load.
- Quick identification of CTAs, showing a more concentrated focus on key areas
- No confusion about what the main CTA was, suggesting lower cognitive effort.
Q8: Find out the membership price of Student Membership.
- High fixation area is focused on “What does it cost?” rather than the actual price of the membership.
- The paragraph form and dispersed fixations suggest a higher cognitive load.
- The two high fixations spots are right on the prices. Less dispersion.
- Suggests lower cognitive load.
Results
Website
Prototype
ENERGY SAVED
with the Prototype over the Website
11.92 min
32.94%
9.94 Wh
4.14 gm
Conclusion
Through this study, it has been demonstrated that content presentation significantly impacts both user experience and the sustainability of a website. By optimizing elements such as density, layout, readability, and visual clutter, user navigation time can be reduced, leading to enhanced user experience and a lower carbon footprint due to decreased energy consumption. The prototype developed during this research was effective in reducing the time participants spent on tasks, validating the hypothesis that thoughtful content presentation can lead to more sustainable web designs.
The guidelines derived from this research include:
- Density and Layout: High density of information on a webpage negatively impacts usability and environment. Layouting elements effectively leads to a smaller carbon footprint.
- Readability: Improve readability through WCAG guideline and UX principles significantly improve web sustainability while reducing cognitive load of the users.
- Visual Clutter: Reducing visual clutter in terms of text, colours, elements and images, reduces user distractions from important information and hence reduces time and energy consumed.
These guidelines provide a clear framework for designing websites that are both user-friendly and environmentally sustainable.