| Name | Rosaria |
| Last Name | Marraffino |
| Exercise n° | 2 |
| Date | 24/10/2019 |
| Volée | Zelda |
The plateform's content aims at showing how people affected by different forms of colour blindness see the world. In terms of UX design and ergonomics different aspects needs to be taken into account when designing a platform user-centered. One of these aspects is accessibility in terms of readibility of the content (text, shapes, or images, for instance).
When developing an accessible web platform is therefore important to understand how different colours are seen by people affected by color blindness and how these differences in perception will affect the usability of the platform.
To this end, the proposed interface shows an image as seen through the eyes of someone affected by different forms of color blindness. The target audience is anyone involved in the development of a web page, application, or platform who wants to understand how using some colours would affect the readibility of content, if seen by someone with colour blindness. The user of the platform doesn't need to have specific previous knowledge, other than be familiar with some principles of UX design, notably the importance of accessibility.
The flashcard has been conceived as to be part of a richer plateform, with more exemples (i.e. more types of color blindness applied to more colours).
The plateform and the flashcard have been conceived so as to be simple and engaging. A short explanatory content introduces the colour deficiency (generally known as colour blindness) and explains some of its forms (deuteranopia, protanomaly, and achromatopsia). The flashcard has been designed so as to invite people to discover and learn how someone with deuteranopia, protanomaly or achromatopsia sees a watermelon. The button changes its colour accordingly, thus giving an exemple of color blind vision not only for the main image, but also on another object of the page.
I downloaded and edited a watermelon image from Freepik.com (link in Ressources).
In my idea of the application it made much more sense to have multiple examples (shown one at a time when clicking the button) because there are multiple forms of colour blindness.
I used an online color blindness simulator (Colblindor) in order to reproduce the colours perceptions for 6 different anomalies (deuteranopia, protanopia, tritanopia, protanomaly, deuteranomaly, and achromatopsia). I then chose three of them (deuteranopia, protanomaly,and achromatopsia) because they seemed "more extremes" when applied to the red and green of the watermelon.
|
|
|
|
|
A link to all the six modified images is available above in this page.
I defined in the js file multiple buttons and their properties and functions and I recalled them in the html file. A link to the js code is available above in this page.
I adapted the original code of the Brain lobes example. I followed the JavaScript tutorial provided for the activity, and adapted the code so as to include more "hide buttons". I also changed the colour of the buttons in the CSS file. I chose to use the main red of the watermelon for the "normal" view button, and the main green when hovering on it. I then created 3 more classes for as many buttons and set their new colours so as to match the perception of the original colours for the correspondent condition. A link to the CSS file is available above in this page.
The application does what is supposed to do, therefore I am quite satisfied about that.
I think the platform (and its objective) it's more effective by presenting more than one exemple one the same page, that is why I chose to represent more than one condition applied to the same image.
The weak point is that I only used two colours (green and red) and a limited number of shades and tones, which do not represent fully the complexity of the colour spectrum.
Regarding the code, I understood what I've done and the steps that I have implemented, but JavaScript is not very much intuitive for me, when compared to HTML and CSS.