Week Two Reflection
This week I wanted to focus on making a prototype of the network visualization tool and informing the design with inclusive and accessible UX theory. I had read some very surface level information on this concept in my design thinking course last winter quarter but I was eager to learn about the concept more in depth. While I have experience creating audio resources of visual digital exhibits for accessibility, the material I read this week was focused on more fundamental aspects of navigating web resources, such as color contrast, content sliders, collapsable sections and tabbed interfaces. In some instances, these are design choices that people without visual impairment may not consider, but in many cases, I found the design choices advised in the material made content navigation more efficient for all users.
Following Sarah Ketchley's suggestion of following a network visualization model that would be dynamic but intuitive to future researchers, I felt that there were three main elements that I could pull from the inclusivity reading for implementation in the design:
1. Contrasting colors between text and background elements by 4.5 to 1, in adherence to the World Wide Web Consortium's Accessibility Guidelines.
I have downloaded a few recommended plug-ins that can automatically test color values to meet this bar and will implement them during the design process for the final products.
2. The network visualization tool can be navigated completely by using conventional keyboard navigation.
This was a significant barrier of entry for many of the preexisting DH models I studied in preparation for this project. Many of the examples I found were based around visualizations of the nodes created by the project's programming language. While these visualizations can often create intricate spontaneous attractive mandalas, they also impede accessibility both comprehensively and navigationally for users. I created the prototype so users have the ability to navigate the tool completely using only directional arrows, the enter and escape keys in addition to other methods which rely on visual information.
3. The implementation of focus states that reinforce where a user is at any point in time.
While I hadn't known this term before last week, I have noticed the absence of focus states in the past. Focus states indicate where the user is within a digital interface by creating visual or audio feedback. This could include creating an outline around a field when it is selected, enlarging a box when it is being hovered over or the classic example of a process spinner when an item is being loaded. For my design, the focus states were oriented toward the blue lines indicating where the user was navigating towards in the volume side view and tiered perspectives as well as the dots of biographical references within the overhead view, expanding as the researcher moves incrementally through each volume.
Rereading Schon's Design Process as Reflection-in-Action to inform the model making process, I wanted to keep the design simple enough so that feedback would feel welcome from other team members. I also felt that video might be the most appropriate format because it would best represent the transitional movement between the perspectives that I have been thinking about for the EBA diaries.
The interface design is essentially three perspectives: side view, overhead view and tiered view. The side view allows the user to select one of the 19 volumes. Once the volume is selected, perspective shifts to a slanted overhead view where the user can see all of the people mentioned in chronological order with color coding depending on their tagging attributes. Selecting the person mentioned opens up a tiered perspective in which fields associated with that person can be explored; creating new access points and connections for researchers.
I sketched out the model a few different times to prioritize functions and interface and wrote a script which would convey the core concepts of the design. To create the video, I worked with Adobe After Effects' 3D function, which I had no prior experience with before this week. Though I don't feel that the video perfectly translates my vision for the interface's movement, hopefully the tool will spur conversation and encourage future iterations towards the end product. The prototype video and sketches can be seen on the first entry for the inclusivity and accessibility learning outcomes page.
This week I will be digging into the operation of the TEI historical markup tool in order to understand the more technical aspects of the repository and contribute to an analysis of Emma B. Andrews' final volume alongside a parallel account by travel companion Mary Newberry.
Reading:
Coady, Geri. “Color Accessibility Workflows.” A List Apart, 6 June 2017, https://alistapart.com/article/color-accessibility-workflows/.
Designing for Accessibility Is Not That Hard | by Pablo Stanley | UX Collective. https://uxdesign.cc/designing-for-accessibility-is-not-that-hard-c04cc4779d94. Accessed 6 July 2021.
Hausler, Jesse. “7 Things Every Designer Needs to Know about Accessibility.” Medium, 18 Dec. 2015, https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b.
Home | UCLA Disabilities and Computing Program. https://dcp.ucla.edu/. Accessed 6 July 2021.
Schön, Donald A. The Reflective Practitioner: How Professionals Think in Action. 2016. Open WorldCat, https://search.ebscohost.com/login.aspx?direct=true&scope=site&db=nlebk&db=nlabk&AN=1480239.
Vox Product Accessibility Guidelines. http://accessibility.voxmedia.com/. Accessed 6 July 2021.
Web Content Accessibility Guidelines (WCAG) 2.1. https://www.w3.org/TR/WCAG21/. Accessed 3 July 2021.