Image credit: Florian Olivo
Revisions for responsive design.
Following the guidance set in this week’s course content, I aligned the structure of my prototype to a four column grid. This was definitely an improvement in most cases, but the ‘stats’ and ‘points’ pages still looked very dense; each column in the grid system was being used as a column in a table of data.
What’s more, if the user was using a smaller device than I had designed for— or if they had the device set to display enlarged fonts for accessibility purposes— the tables would probably appear broken. Not very responsive.
Using the example of the ‘stats’ page, I will now breakdown my approach to reworking the interface.
Amy Schade, 2017, recognised that “Displaying big data on a small screen is a daunting challenge”, and offered some pointers. Schade advised that users on small devices likely wouldn’t have the time, nor the desire, to see all the data available to them, so a practical solution would be to make the data entries clickable if the user wanted more detail.
To a certain extent, I had already done that by including a ‘more’ button on each row, but I felt I was still showing unnecessary data. I removed the least valuable column from the table, and changed the (small) text button to a larger right-pointing arrow. This was certainly a step in the right direction, but I still wasn’t satisfied with the presentation— so I went back to the literature.
Where Schade’s article advised on designing tables for mobile, Christie Tang, 2019, offered guidance specifically on using a grid system. Here, I discovered that field elements (i.e. parent containers, a term I am more familar with) should be aligned to the grid, not the child elements inside of them.
My mistake was that I was trying to use the columns of the grid system as columns in my interface, when really they offer more flexibility than that. In my second attempt, instead of reducing the data on display I pivoted away from the idea of using a table. I treated each row of data as a parent container, and separated the data with a more natural hierarchy.
I kept the right-pointing arrows from my first attempt. I also introduced more data to the interface with icons to denote whether the run was solo or in a party. Even with the additional data the columns feel less dense – and they are no longer subject to the issues with accessibility and reponsiveness because each parent container would be vertically flexible.
Taking responsibility in accessible designs.
It almost feels wrong to be discussing accessibility this far into my journal. As much as I am not my users, in that I can’t assume I know what my users want, I’m also fortunate enough to not experience the daily challenges of a disability. Until this point I have assumed that, because I haven’t encountered accessibility issues, all of my users would be able to access my app.
In my next iteration, I’ll be aiming to improve the accessibility of my design by referencing World Wide Web Consortium (W3C)’s web content accessibility guidelines (WCAG). Though in doing so, it feels like I am amending for accessibility, rather than designing for it.
Avanish Kaur, 2018, wrote in a post for UX Collective: “The first and foremost step to build an accessible product is to build empathy and install an inclusive design mentality”. I wasn’t familiar with the term ‘inclusive design’, and I wasn’t sure if it differed to accessibility at all.
Vale Querini, 2021, offered some enlightenment in a post for Career Foundry. Inclusive design is the act of designing to include the needs of minority groups; “If we don’t intentionally include the risk is to unintentionally exclude“.
Kenning, 2018, uses the context of designing for people with dementia to investigate ways of facilitating inclusive design. The study promotes the use of co-creative approaches to involve people living with dementia in the design process, “and give designers insights into the embodied experience of living with dementia and the social and cultural impact“.
It seems the notion of inclusive design aligns with my gut feeling that amending for accessibility isn’t best practice. There’s an undeniable possibility that my prototype is, to some extent, fundamentally exclusive at a functional level. If I had considered accessibility during my research, the composition of my prototype may well have changed.
Disappointingly, I’m making this reflection retroactively— week 9 was a good while ago. I don’t have time left in this module to revisit the foundations of my prototype with a new eye.
I suppose I have to call this a hard lesson learned. In my next project, I’ll make a point to consider inclusivity from my earliest round of research.
List of Figures
Fig. 1: A screenshot of the ‘stats’ page from iteration 2.
Fig. 2: A screenshot of the ‘stats’ page from iteration 3, where I revised my use of the grid system.
Fig. 3: A screenshot of the ‘stats’ page from iteration 5 (the iteration I submitted for this module).
References
KAUR, A. 2018. ‘Accessibility guidelines for UX Designers’. UX Design Collective [online]. Available at: https://uxdesign.cc/accessibility-guidelines-for-a-ux-designer-c3ba775539be [accessed 18/05/2021].
KENNING, G. 2018. ‘Reciprocal design: inclusive design approaches for people with late stage dementia’. Design for Health, 2(1), 142-162.
QUERINI, V. 2021. ‘What Is Inclusive Design? A Beginner’s Guide’. Career Foundry [online]. Available at: https://careerfoundry.com/en/blog/ux-design/beginners-guide-inclusive-design/ [accessed 18/05/2021].
SCHADE, A. 2017. ‘Mobile Tables: Comparisons and Other Data Tables’. Nielsen Norman Group [online]. Available at: https://www.nngroup.com/articles/mobile-tables/ [accessed 18/05/2021].
TANG, C. 2019. ‘Responsive grids and how to actually use them’. UX Design Collective [online]. Available at: https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01 [accessed 18/05/2021].
WORLD WIDE WEB CONSORTIUM (W3C) WEB ACCESSIBILITY INITIATIVE (WAI). ‘Web Content Accessibility Guidelines (WCAG)’. World Wide Web Consortium [online]. Available at: https://www.w3.org/WAI/standards-guidelines/wcag/ [accessed 18/05/2021].
Skoobin Design 