Citizen Science Prototype: User Testing and Accessibility
With the initial flow chart and prototype process coming to an end, it’s time for us to check with users about accessibility as well as general usability. As this website intends to be a type of “Citizen Science” project with an emphasis on code, and cleaning code it specifically needs to have high usability and a simplistic design to avoid distractions.
Test 1 : Basic User Group & Generational
For my standard interview I interviewed both Chris, and Mike on the design. Chris is 29 years old, while Mike is in his 50’s and both had different looks at the design. Both thought the name of the website .dirtyCode was either too unprofessional or carried negative connotations. When asked the comfortable level of technology both answered very comfortable as Mike works in Cyber Security and Chris works customer support for an ISP. Another issue they both ran into is the iconography on the website. Neither understood that the circle button on the top right of the screen was intended as a profile button to sign-in and access your settings and it took them both some time to find the button to change what coding language they wanted to work in.
In terms of the UI moving forward, the registration page they said should have a Login and a separate Register button. I initially was attempting to create a function that was simple and less intrusive and ultimately this idea makes the process more difficult.
Going through the tutorial for both was seamless and easy for them to understand except for a poorly written instruction about layout which was unhelpful.
Lastly, in terms of the settings both stated that they wanted some form of indication of how points work and how the leaderboards are formed.
Test 2 : Color Blind Test
Using the website Coblis, We tested various screenshots of the .dirtyCode project using different pre-made filters. Ultimately, out of these filters the Green-Blind/Deuteranopia filter affected the website the most.
This is a screenshot of the same main page displayed above but with the Deuteranopia filter onto of it. As one can see, many of the elements remain rather unaffected. The blue turns into a lighter shade of blue and the buttons receive a sort of reddish haze where a drop shadow would have been. Text, images, iconography, are all still very much visible and readable.
In one of the most important screen shots of this application, the programming and editing screen as well with the filter Deuteranopia, is relatively unscathed. In fact, the red tint that is given to the light gray that was there before further increases the ability to see a contrast between text and background. The colored methods of the code also keep their different colors.
In the tutorial, as with above, the background of the entire page obtains a red hue. While the tutorial page itself keeps with the white look. The biggest difference, which still stands out, is that the green of the header and buttons below have turned into an orange which are still distinguishable.
Test 3 : Visually Impaired
I tested Janet with the visual impaired test, since I don’t have anyone I personally know who is visually impaired we took her monitor and knocked the brightness down to 1% which made the screen very dark. She was able to read most of the text just fine and progress through the site without error until she ran into the small, and colored text. With the screen being dark she had to move closer to read the text a few times. The main coding page especially was difficult for her to read.
Test 4 : Motor Impaired
Chris, who did the standard interview, also did the motor skill test. In this test he was instructed to move through the webpage using only his thumb. He was able to move through the website without error.
Conclusions
Ultimately, I’ve found that I need to create more options in the settings for accessibility especially to change colors of text, make text larger and raise the size of the text in general. As per the standard interview I found that there are certain icons I need to fix, wording, add buttons, and overall increase the User Experience of the website in order to make it accessible to all.
