| Name | Rosaria |
| Last Name | Marraffino |
| Exercise n° | 5 |
| Date | 20/01/2020 |
| Volée | Zelda |
In Exercise 2, Exercise 3,and Exercise 4 I explored the colours perceptions of people affected by some forms of colour-blindness and gave a few best practices in order to design a web platform that takes colour blindness into account. For this exercise I chose to develop a drag and drop application that tests the understanding of those previous concepts.
The application is aimed at those interested in designing for colour-blind people. It should be inscribed in a website where all the previous exercises/themes are grouped so that it could be the natural “succession” of those concepts. In this configuration as a stand-alone page, it’s rather developed for people that have previous knowledge on the subject and want to test this knowledge. Nevertheless, the link to Exercise 4 is also provided, for those who want watch the video and know more.
A feedback appears when an item is dropped in the right box. It aims at reinforcing the transfer of knowledge but it has an additional objective. Since the boxes only accept the correct choice, I introduced the feedback so that the users know why that choice is correct.
In order for the user to be able to differentiate between good and bad practices I decided to have both possibilities instead of an application where only the good practices could be dropped. This approach should prompt the user to consider why each of the items represents a good or a bad example of UX design.
In order to take into account colour-blind users who could use the application, the “YES” and “NO” areas are indicated by green and red colours, associated with a thumb up or down respectively.
With the addition of the Touch Punch script, the application works as well on smartphones and tablets, so as to follow the UX accessibility principle.
The page is composed of two sections: a brief introductions (with a link to Exercise 4) and the application itself, divided by a separator. As previously explained, the draggable images and the droppable areas are close to each other so as to reduce the “effort” for the user. When an item is misplaced it goes back to the starting point and it could only be dropped in the right box.
The structure of the page is relatively simple and the draggable items are placed close to the droppable areas, in order to respect the Fitts's Law.
The visual aspect recalls the previous exercises. The goal at the end of this semester is to group all the exercises in one platform dedicated to the subject of UX design for colour-blind people.
I had gathered the conceptual information and also crated or modified the images for the previous exercise.
For the code I followed the explanation on the EduTech Wiki pages for the exercise.
A link to the js code and the CSS are available above in this page. The less evident part was to have the feedback appearing when the item was dropped and not, as in the example provided in the EduTech Wiki page, when the item returned to its original place.
The development of the application was easy enough, and I spent most of the time for the page layout, so as to have all the different parts close enough and a pleasant visual aspect.
The application does what is supposed to do and that is a strong point. I didn’t have particular problems in developing the application. The explanations on the EduTech Wiki pages were also very simple to follow.
However, I think that the application would be much more useful if the users could drop the item everywhere (make their choice) and then verify it with a “check answer” button, for example.