This demo both succeeded and failed in usability and the effectiveness of teaching the CSS feature. In this critique, I will focus on the aspects that made it fail. As seen in the video, there were no instructions on how to use the demo. The user had to play around with the buttons and sliders to learn how the demo exactly functioned. This negatively affected the learnability dimension of usability (learnability considers how easy it is for users to accomplish a task for the first time they encounter the interface). For instance, when changing the colors of the gradience, hovering your mouse over a block of color would grant the option of removing it (with the x sign). If you clicked a block of color once, a color palette would appear for you to edit the color instead. However, if you clicked a block of color twice, it would not prompt you to do anything. Another example consisted of the angle changer (which was shaped as a circle). Originally, I thought the angles would work similarly to the unit circle. Yet, as seen in the video, the angle locations were placed slightly different. Zero degrees on the unit circle was actually ninety degrees on the angle changer. This confused me on the first try, and I had to consistently check the descriptor on the right to make sure of the angle measurement. This demo did a great job visualizing the changes of gradience in CSS, but did not effectively teach the code involved when making those changes (especially since it was placed at the bottom of the page). Users would most likely give more of their attention to the large gradience box on the left than to scroll down to the bottom of the page to see what changed with the code.
This demo both succeeded and failed in usability and the effectiveness of teaching the CSS feature. In this critique, I will focus on the aspects that made it succeed. As seen in the video, instead of having to manually shape the photos, users were able to choose from a variety of shapes on the first try of the demo to clip a sample photo. Additionally, there were colored points on the shaped photo which indicated to the users that the points could be altered. These colors corresponded to the colors on the CSS code that was changed (seen on the bottom of the page). Users did not have to search to find the code as it was displayed directly below the interactive visualization. Additionally, the shapes category automatically collapsed to a smaller view of frame when users would hover down to the demo size and background options. These features of the interface's design all made it quicker for the users to learn and accomplish how to clip a photo in CSS, positively affecting the usability dimension of efficiency.