Week 9: Layouts and accessibility

UXD720

---

This week’s content discusses grid system layout, responsive design and accessibility.

Grid system layout

The grid system is a layout style consisting of evenly spaced columns or rows that make it easier for designers to structure elements on a page (Drisgill et al. 2013: 352). A good structure allows the user to scan the page, creating more readable and findable content.

“The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.” (Drisgill et al. 2013: 352) The grid system may not always work, but it can aesthetically support the design and frame if used well.

The CRAP aesthetic principle is contrast, repetition, alignment and proximity. These four principles support the good practice of structure and layout of a page.

• Contrast involves using colour and size to differentiate elements from each other and to make the most crucial content prominent (Patrick-Brown 2021a)

• Repetition uses similar UI patterns such as shape, font style and colour to create familiarity.

• Alignment is the foundation of a design as it helps structure and makes the elements and content readable.

• Proximity is the closeness of elements and designing them to establish a relationship.

I have applied the six grid column system layout to my designs in Figma. This helps to structure my content and UI elements neatly on the frame. I have included some margin and padding as a container to align and keep the content organised. I have used colour to create contrast between the different elements, such as making the button a solid blue on a white background. I have also used similar card designs to show the various options and grouped elements together to show the connection and relationship to each other. For example, keeping the content in a box or card close together establishes the meaning and connection.

Figure 1: The image shows the grid system applied to my prototype.

When presenting my prototype to my peers, they suggested that I utilise the frame because there was too much white space. I decided to rejig my elements, so my content used more space at the top, allowing for more room and less scrolling. I also used an eight grid column on specific frames that included more content.

However, I realised my grid system wasn’t working well because there was still a vast amount of space. Mobile design requires six or less than six columns with at least a 60-80 width and 20 width gutter. I realised I had been using the incorrect column width of 20 px. I have then researched the grid system and how to use them well. I found that using a 6 column grid system with a width of 65 worked well, and this is what I have implemented this week to improve my design by utilising the space accordingly (Tang 2019). A good design shows a balance of content and margins and padding. It is essential not to overcrowd content but also to provide enough information for the user to be able to carry out tasks.

Responsive layout

Responsive design was first introduced in 2010, allowing the web pages to be seamlessly compatible with different screen sizes and devices such as mobile and tablet (Cosgrove 2018: 93). This makes the content easily accessible to users, which increases its usability. A responsive layout involves using the grid system layout and media queries based on breakpoints in the design. Breakpoints are set and coded using Cascading Style sheets (CSS) to deliver a design based on the size of the page (Mullins 2015: 4–5). Responsive design involves the content, format and navigation to be altered across different screen sizes.

I have decided to produce my prototype as a mobile application because it is required to meet my user needs. The functionality of my prototype has a scanning feature using augmented reality, which is easier to do with handheld devices than with large desktops and laptops. For example, users will use their mobile to scan food products in the supermarket easily and quickly. Moreover, mobile devices have increasingly integrated into people’s lives and it is effortless to access content and applications on the go (Walsh et al. 2020: 2).

Case study research

According to research, some case studies involved choosing responsive-design website applications versus mobile applications for behavioural intervention. One of the case studies involved a 12-week health weight loss intervention (Turner-McGrievy et al. 2017: 226). The goal was to determine whether weight loss results differed between one group that used podcasts and a tracking app, whereas the other group used a researcher-developed mobile app. The results concluded that the decision was to choose the mobile app to avoid the fees of sending text messages to the users to prompt and remind them to self-monitor their progress. You can send notification reminders to solve the expense issue in mobile apps. I will implement this feature in my prototype to motivate users to self-monitor their health.

Accessibility

Accessibility is designing a product or service for people with disabilities. Disabilities can include cognitive, mental, motor, visual and hearing difficulties (Henni et al. 2022: 2). For example, visually impaired people need image descriptions. The Web Content Accessibility Guidelines must be considered when designing content for users, especially people with disabilities. These guidelines include the design to be perceivable, operable, robust and understandable.

I have implemented accessibility elements in my prototype by designing a speech recognition feature so users can input content verbally.

I have used the accessibility checker in adobe which examines the contrast between colours for clear visibility, and this is shown below.

Figure 3: The images show all colours (Dark grey, blue and lavender) have passed the accessibility ratio, which must be at least a 4.1: 1 ratio. The blue background colour and white text score 3.06:1. However, it passes with text that is 14pt bold font or 18pt. I have implemented the text to be 20pt with this specific colour combination.

After discussing my prototype with my peers, they have suggested that the gradient button doesn't look readable across the screens. Although the colour combination is lovely and merges the colours to create a wellness environment, it did not pass the accessibility guidelines. I have decided to change my button colour to primary blue to solve this issue.

It wasn't easy to choose a selection of colours that were contrasting but also visually appealing. Colours associated with wellness tend to be pastel shades with a light value. However, after much exploration and testing, this theme of colours failed the accessibility guidelines. Although it is highly visually aesthetic, it is not functional and usable for my audience. I was keen on using blue as my primary colour because of its evoked emotions, and I explored contrasting variations that worked well together. The full-colour brand is discussed in my last post.

Iconography

I attempted to create icons for the prototype to experiment and explore new skills in graphic design. I have some experience using Adobe Illustrator but have not designed graphics before. I used online tutorials to support my learning. It was quite tricky, but the step by step tutorials made it easier to practise. In the prototype, I have created some icons myself, such as the settings, close button and tick icons. Icons support the user interface design to make it more meaningful (Kascak et al. 2013: 82).

I have also used material icons, a Figma plugin and illustrations created by Katerina Limpitsouni. Using a combination of icons and graphics makes the product user-friendly and inviting to users. If I wanted to focus more on visual design, I could explore graphic design to enhance my skills, but this is not essential in my UX career journey.

Figure 4: Icons I have designed in Illustrator

Reflection

In an interesting case study, some participants addressed the CRAP principles to be overused and only applied to logo designs and ineffective to design elements (Kimball 2013: 27). However, I believe that the principles are a good starting point, and I will learn to implement new design trends and principles over time with practice.

The Web Content Accessibility Guidelines need to be considered when designing your prototype (Vanderheiden et al. 2019). Although it is not possible to design for all, it is essential to consider these aspects to increase accessibility and usability for your users. Colour contrasts are crucial to the design, which can take a while to explore. I constantly changed my design system, but with practice, I was able to find a solution by researching colour psychology and using the adobe accessibility checker.

I have also learnt that deciding on a mobile app versus a web app will depend on various factors such as user needs, time, cost, expertise, security needs, and components (Turner-McGrievy et al. 2017: 231).

I have made strong progress with my SMART goal 2, and I want to continue seeking tutorials and guides to develop my Figma and UI design skills. Moreover, next week I want to review my content to improve the terminology and language used in the prototype to make it understandable for my users. “Content is king” (Huizingh 2000: 124–125). This is a well-known quote expressing the importance of informative and valuable content to users.

References

COSGROVE, Samantha. 2018. ‘Exploring Usability and User-Centered Design through Emergency Management Websites: Advocating Responsive Web Design’. Commun. Des. Q. Rev 6(2), 93–102.

DRISGILL, Randy, John ROSS and Paul STUBBS. 2013. SharePoint 2013 Branding and User Interface Design. John Wiley & Sons.

HENNI, Silje Havrevold, Sigurd MAURUD, Kristin Skeide FUGLERUD and Anne MOEN. 2022. ‘The Experiences, Needs and Barriers of People with Impairments Related to Usability and Accessibility of Digital Health Solutions, Levels of Involvement in the Design Process and Strategies for Participatory and Universal Design: A Scoping Review’. BMC public health 22(1), 35.

HUIZINGH, Eelko K. R. E. 2000. ‘The Content and Design of Web Sites: An Empirical Study’. Information & Management 37(3), 123–34.

KASCAK, Ljilja, Claudia B. RÉBOLA, Richard BRAUNSTEIN and Jon A. SANFORD. 2013. ‘Icon Design for User Interface of Remote Patient Monitoring Mobile Devices’. In Proceedings of the 31st ACM International Conference on Design of Communication. 77–84.

KIMBALL, Miles A. 2013. ‘Visual Design Principles: An Empirical Study of Design Lore’. Journal of Technical Writing and Communication 43(1), 3–41.

MULLINS, Cheri. 2015. ‘Responsive, Mobile App, Mobile First: Untangling the UX Design Web in Practical Experience’. In Proceedings of the 33rd Annual International Conference on the Design of Communication. 1–6.

PATRICK-BROWN, Clementine. 2021a. ‘Week 9: Web Layout and Grid’. Learn Falmouth [online]. Available at: https://learn.falmouth.ac.uk/courses/282/pages/week-9-web-layout-and-grid?module_item_id=12800 [accessed 3 Apr 2022].

PATRICK-BROWN, Clementine. 2021b. ‘Week 9: Accessibility and Compliance’. Learn Falmouth [online]. Available at: https://learn.falmouth.ac.uk/courses/282/pages/week-9-accessibility-and-compliance?module_item_id=12802 [accessed 3 Apr 2022].

TANG, Christie. 2019. ‘Responsive Grids and How to Actually Use Them’. UX Design [online]. Available at: https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01 [accessed 5 Apr 2022].

TURNER-MCGRIEVY, Gabrielle M. et al. 2017. ‘Choosing between Responsive-Design Websites versus Mobile Apps for Your Mobile Behavioral Intervention: Presenting Four Case Studies’. Translational behavioral medicine 7(2), 224–32.

VANDERHEIDEN, Gregg et al. 2019. ‘How to Meet WCAG (Quick Reference)’. W3.org [online]. Available at: https://www.w3.org/WAI/WCAG21/quickref/ [accessed 2 Apr 2022].

WALSH, Thomas A., Gregory M. KAPFHAMMER and Phil MCMINN. 2020. ‘Automatically Identifying Potential Regressions in the Layout of Responsive Web Pages’. Software Testing, Verification & Reliability [online]. Available at: https://onlinelibrary.wiley.com/doi/10.1002/stvr.1748.