Accessible Design

This lecture was quite enlightening to me, as I was not aware how many people in the UK are living with disabilities, and it highlighted to me the importance of making design accessible to as wide a user base who need it as we possibly can. I read Jesse Hausler’s article for Medium on Accessible Design, because this greatly interested me. Some interesting points highlighted on this article were ensuring that the smaller the text, the higher contrast is necessary, and that you can afford to use slightly less contrast when the text is bolder or larger.

0_gjAl4cxEGBazbYNY.webp

This image was also used as a bad example of accessible design. This is because the icon and red colour indicates an error in the fields, but while all are red, only one has the error icon, which is inconsistent and may cause confusion for the user, there is also no error message displayed, so the user may not know how to proceed.

Interestingly, the article also covered filling out forms, like in the lecture from this week. The article also mentioned placing labels outside the typing area, but also highlighted the need for clearly defined input areas, which may be defined by an outline or different colour, as users with cognitive disabilities or fine motor issues may find it difficult to find the input area or click on it effectively.

Another common issue it pointed out was that in some sites, forms do not always even have labels, which would be extremely difficult to navigate for cognitively impaired users or those who are not familiar with digital products, like elderly users who have not grown up with it, while we take for granted that we know where to input, for example, our email address or password.

SDG App Screens

This week I also created some of the screens for the SDG App project.

Frame 1.png

I chose to use a green gradient background, which will also display along with a positive message when the user gets something right. Conversely the screen will change to red when the user gets something incorrect. I also created one of the games, where the user must select the correct statements, which will turn green when selected correctly, and red if they are incorrect. Over the next week, I will research how to use Figma variables to advance to the next screen when all the correct statements are correct, and add the animations when the statements are clicked.

Accessible Design article - https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b