CSS Demo Critique

Demo found here.

Learnability. As someone who was not very familiar with gradient CSS properties, the gradient CSS Demo was not very successful in its learnability. The amount of information and controls displayed was overwhelming, and took a significant time to digest. I am still unsure of what the stop attribute is meant to contribute. The toggling across the bars lead to no intuitive answers when looking at the results. I liked the inclusion of the text-fill, as I believed it was an interesting additional application. However, I would’ve appreciated if the text-fill checkbox was more noticeable, as I was unsure of what the purpose of including text was before I noticed it. I think, overall, the demo attempted to explore too many features (all types of gradients combined into one image), and rendered itself thin.

Safety. I like the option to be able to erase the added colors, as this allows error recovery. However, I would’ve benefited from an undo button, as I often made mistakes (apart from adding a color) that I was unable to change.

Efficiency. I liked the efficiency of the rolling inputs. They allowed me to quickly settle on a color and on values without having to enter or click through anything.

Overall, given the unfamiliar terms used, this demo is not very useful for learning to use the gradient tool itself. However, it might be useful for experienced users aiming to quickly create complex designs.

Demo found here.

Learnability. This second demo for CSS gradients was very straight-forward and easy to grasp. The interfaces for editing the color, shape, and movement of the gradient focused less on words and were much more visual, making them a lot more learnable. I wish there was a more obvious way to signify that the scale at the top is actually a random gradient generator. Once I saw it move, I thought it was another kind of scale. I wish there wasn’t a limit of colors. From my understanding, CSS does not limit the amount of colors a gradient can have, so I would’ve liked to have that option.

Safety. Once again, I like the option to be able to erase the added colors, as this allows error recovery. I still wish there was another type of undo button, for the shapes, angles, etc. Moreover, if no more colors can be added, I wish there was a warning/error message clarifying so.

Efficiency. I liked the buttons to copy CSS code and URL at the bottom. This is a big win in efficiency, as the alterative to highlight the entire code and then copy to clipboard is tedious and time-consuming.

Overall, this CSS demo is much more learnable and does a much better job at keeping things simple (such as features and attributes) to make them understandable. Moreover, it is also an efficient generator for an experienced user who wants to quickly copy a piece of code. It is, however, lacking in complexity, as there are less features available. This could target more experienced users who are searching for a very particular gradient. Nevertheless, as far as Demos go, I believe this is an adequate tradeoff.