This is a prototype for the HCD project.
In the interview I came to the conclusion that the most important features would be to detect colors of a piece of clothing and to detect matching pieces of clothing. Another point to consider is that the user wants to be able to do things herself.
I created a prototype that can detect colors of a piece of clothing and that can detect matching pieces of clothing. The user can take a picture of a piece of clothing and the app will detect the colors of the piece of clothing. The user can then select a color by file input, color picker or text and the app will show matching pieces of clothing.
I tested the HTML color picker myself using a screen reader, but I couldn't get it to work. I decided however to keep it in the prototype, keeping in mind the Exclusive Design principle "Add nonsense", because maybe the user can use it.
I had a feedback session with Vasilis. He was excited about the prototype I had already made.
During the user test I found out that the user was able to use the app and get the desired results. The file input was a bit difficult to use, because of the default text "Choose a file". The user expected a description of "Take an image". The user also wanted to take a picture of herself instead of the environment, which I set as the default. The form did not reset after submitting, which was confusing for the user, because the new value was not used.
I updated the prototype with the feedback from the user test. I created buttons with clear texts to control the file inputs. The user can now take a picture of herself, the environment or use an existing image. The form now resets after submitting.
I showed the updated prototype to Eric. He was happy with the changes I made, but he urged me to think about adding nonsense. I will think about this in the next sprint.
I made some more changes to the prototype. The input fields are now skipped while tabbing, so you have to use the buttons and don't get duplicate controls along the page. I improved the feedback when submitting the form and I moved the navigation to the bottom of the page.
The user test went well. The newly added buttons made the experience of making an image easier. The user found the color picker the least useful, so I will move it to the bottom of the form. The user found the image from gallery the best option, so I will move it to the top of the form. The color names were not always clear (e.g. "Turbo"). I'll try to get some more descriptions for the colors.
After the feedback session with Vasilis, I decided to remove the color picker. Vasilis reminded me of the Exclusive Design principle "Prioritise identity". The user wouldn't use the color picker, because the text and file inputs are easier to use. He also showed me a script that could help me describe colors better. I will try to implement this.
I added the script that Vasilis showed me to the prototype. The colors are now described better.
I had the final user test. The user understood the purpose of the extra description and liked the premise, but the word "verzadigd" (saturated) was not clear. Furthermore, the user would prefer easier language overall that fits better with the screen reader that reads the words aloud.
I changed the word "verzadigd" to "fel" (bright) and I changed the word "onverzadigd" (unsaturated) to "flets" (pale) as per the user's preference.
Before the course started, I had an entirely different expectation of what I would be doing. I thought I would be applying the "regular" inclusive design principles, so I was surprised when we had to apply the exact opposite of those principles. We had to study the situation, ignore conventions (when applicable), prioritise identity and add nonsense. I am happy with the result of the prototype. I think I have succeeded in applying the principles and I have learned a lot from it. I will definitely use this knowledge in future projects.
I studied the situation by having an interview with the user as a group. I concluded that the most important features would be to detect colors of a piece of clothing and to detect matching pieces of clothing. I also concluded that the user wants to be able to do things herself.
I ignored the convention to have the navigation at the top of the page. I moved the navigation to the bottom of the page, because the user would be able to use the application more easily and didn't really need the navigation.
I prioritized identity by testing the prototype with the user and implementing the feedback she gave.
An example of nonsense that I added was adding a color picker, since the user is blind and relies on a screen reader. While testing myself with a screen reader, I couldn't get the color picker to work, but I decided to keep it in the prototype so the user could actually test it herself. It turned out that the user didn't use the color picker, so I removed it, but because I tested it, I could be sure that the user wouldn't use it and didn't make the assumption that the user wouldn't use it.
I have a few ideas on how this prototype could be improved:
- The user wanted the wording to better fit with the screen reader that reads the words aloud. This could implemented by using language that is more common when speaking.
- While watching the user tests of others, I noticed that the user wanted to know when she reached the end of the page, to prevent going to the browser controls. This could be implemented by adding a footer with a "back to top" link.