THE CONCEPT
The Problem: Reading lengthy text feels frustrating, especially when you're unsure if it is interesting.
We learned that users with vision impairments found it particularly frustrating to read through long bodies of text on their phones. By providing the freedom to choose between a text and visual summary, users who prefer visuals can more comfortably consume the content with ease and have the flexibility to toggle between different content mediums.
DESIGN EXPLORATIONS
Co-designing a Breakdown panel.
My goal with prototyping these interactions was to help me think through what type of interactions felt most natural and intuitive. Taking an iterative approach, I sought out feedback and ideas from individuals with vision-impairments and experts in accessibility design.
How to Trigger a Summary
I initially prototyped an interaction where users could select text and choose a "Breakdown" option to view key points on a sliding sheet. Selecting large text blocks on a phone feels cumbersome, and the sliding sheet also feels disruptive to the reading flow. A summary at the beginning of the page reduces the economy of effort.
Naturally-surfaced Prefacing Summary
Iteration 02
Breakdown Upon Selected Text
Iteration 01
Key Feedback
Selecting large bodies of text feels tedious, and users don’t feel confident that the current interaction can help them quickly determine interest.
Hypothesis
By providing a summary of selected text, users can quickly determine whether they’re interested in reading.
Hypothesis
Providing a prefacing summary eliminates the need to select bodies of text.
Key Feedback
While a prefacing summary feels more fluid, users prefer visuals over text for visual comfort.
Toggle between Text / Text & Visual summary
Iteration 04
Naturally-surfaced Prefacing Text & Visual Summary
Iteration 03
Key Feedback
While some users prefer visual elements, others prefer a textual summary. A panel with multiple images also creates a disconnect in the interface.
Hypothesis
A visual and text summary provides more visual comfort for users with vision impairments.
Hypothesis
Providing a toggle panel enables users more freedom in choosing the type of summary they prefer.
Key Feedback
A toggle gives users more control over the type of content they prefer.
Considerations for Screen Real Estate
We learned that users preferred visuals and infographics over text. Incorporating visuals involved a multitude of considerations. What types of visuals would be feasible to surface and most helpful for users? I first experimented with a pop-up where relevant images are retrieved from the text with captions to contextualize them. However, a panel with several images takes up the entire screen and creates a disconnect in the interface. To more efficiently utilize the screen real estate, I experimented with a toggle interaction to view various images and captions.
Design question: How can we help people quickly determine whether they’re interested in reading?
I learned from experts that focusing on one specific design problem is more effective than trying to address everything when designing for accessibility. I'm particularly interested in thinking more critically about how to help people quickly determine whether they’re interested in reading more when encountering a long body of text.
TIMELINE
Jan - May 2024 (Team Work)
Aug - Oct 2024 (Ind. Work)
CONTRIBUTION
User Research, Prototyping
PROJECT TYPE & TEAM
Independent Continuation of Team Collab
Team: (5 Designers) Sravani K, Nick C, Jin L, Helena V
Designing for accessibility.
Prototyping and gathering feedback from experts in accessibility design revealed valuable insights into the nuanced process of designing inclusively. One of the key things I learned is that "vision loss" is not a one-size-fits-all concept but rather a spectrum of experiences that requires tailored solutions. Users with partial or low vision may benefit from larger text, high-contrast visuals, or customizable color settings, while users who are completely blind often rely on screen readers, alt text, and other non-visual cues to navigate content. Understanding these distinctions is critical because designing for one group without considering the other can unintentionally create accessibility barriers for part of the audience.
For instance, while a visual summary with customizable font sizes and color contrast adjustments might work well for low vision users, completely blind users may benefit more from detailed and context-rich alt text that concisely describes the visual information. I learned how to balance these diverse needs by adopting a flexible approach, recognizing that accessible design often can inspire alternative, outside-of-the-box methods to approach problems.
More importantly, I learned to better adopt a mindset of openness and continuous feedback. Advocating for users means not only incorporating their preferences and into the design but also championing accessibility as an essential component of product development.
REFLECTIONS
Learnings
FINAL DESIGN
What if there are no images in the article?
One key challenge with incorporating images in the visual summary is that not all articles have images, and ones that do don’t always have images that are relevant to the key ideas of the article. To address this, I experimented with designing a text-to-image interaction as part of the panel. Experimenting with this functionality as part of the panel provides a unique way to dynamically adapt to content needs, creating flexibility and consistent quality in the visual summaries. Additionally, it also introduces new possibilities for personalization, as users could even select preferred visual styles or emphasize certain aspects of the summary, such as data or charts.
Users have freedom in choosing the type of prefacing summary they prefer.
A prefacing summary can benefit users who prefer skimming and or for those who prefer accessing information on mobile devices where scrolling can be cumbersome. Visual summaries can quickly convey essential points in a way that might be easier to interpret for those with low vision or partial vision. By including a toggle between text and visual formats, this feature broadens accessibility, catering to diverse preferences and needs.
DESIGN PROCESS
RESEARCH 01 (PRELIM)
Adopting the mindset of designing for accessibility.
To understand how to approach designing for accessibility, we turned to industry leaders to learn about the steps they take for accessible design. This process was key in helping us understand more holistically what it means to design for accessibility.
Vision loss encompasses a broad continuum.
We began by exploring how vision loss impacts people's interaction with technology. Recognizing that each person's experience is unique, we narrowed our focus to understanding the overall effects of vision loss on technology use and developing broad guidelines to enhance the experience for a wide range of individuals with vision impairments.
Progression of Vision Loss
Vision loss falls on a broad spectrum, so every individual’s experience and progression of vision loss differs.
Common Vision Impairments
In addition to vision loss, many individuals experience impairments such as reduced clarity in peripheral or central vision, as well as blurred vision at near or distant ranges.
PROBLEM DEFINITION (INTERVIEW & CONTEXTUAL INQUIRY)
Building on Preliminary Learnings
Within the project's constraints, we gained insights into the experiences of four individuals through conducting interviews and contextual inquiries.
BRINGING IT TOGETHER
Understanding insights of how visual impairments affect technology use.
Instead of personas, we used empathy maps to avoid generalizing their experiences. With empathy maps, we wanted to align our team on a shared understanding on each person we interviewed and understand more deeply their motivations and underlying needs.
Maintaining our focus on detailed insights.
Based on the empathy maps, we organized the challenges users face by the type of content that they interact with. Recognizing the importance of detailed insights in accessibility design, we avoided over-generalizing and kept in mind the nuanced insights we learned. Based on these insights, we derived ideas of strategies to circumvent each problem. (Chart format inspired by Tammy Taabassum)
Working with constraints of our research.
Recognizing biases and limitations of our research helped us better position ourselves to think about insights and how they inform our direction for design.
EXPERT FEEDBACK (START OF INDEPENDENT WORK)
Seeking feedback from experts in accessibility design.
The scope of the semester project concluded with devising potential strategies to tackle each key insight. As an independent study, I was curious to see the strategies in action. Before creating design concepts, I met with several experts in the field of accessibility design for vision to get their perspectives. This step was key to helping me further understand the values of accessible design and empathize more deeply with the low-vision and blind community.
Winding back in time...
Accessible Interfaces for Vision
As part of Berkeley Innovation, I worked with a leading Biotech company to create an accessible branding guideline for individuals with vision loss. Curious to see these guidelines in action, I created conceptual prototypes based on what I learned.
If you're curious about the detailed design process, I'd love to chat on Linkedin!