CSS Demo Critiques
Smooth shadow generator
Learnabililty
As seen in Figure 1, the Smooth shadow generator CSS demo has nice sliders for adjusting each of the box-shadow properties, and the effects of adjusting these sliders are instantaneously shown in the shadow of the CSS code box. This increases learnability by indicating to the user exactly what type of property adjustments lead to what stylistic results. This immediate feedback allows the user to develop an intuitive mapping between property values and their visual effects. Furthermore, by having the CSS code box also be the component with a changing shadow, the user can look at code and visual effects in the same place at the same time. This proximity is very creative and improves learnability and efficiency as well.
One learnability issue of this interface results from the three graph-like components containing pink lines with dots at the ends (see Figure 1). As I was experimenting with the demo, I did not realize these figures were actually additional sources of user input to adjust properties until very late in the process. After using the pink controls, I still do not really have a conceptual mapping of what actions lead to what results in the box-shadow. Another thing is that not all the box-shadow properties that can be adjusted are visible at once; I had to zoom out to see the "reduce spread" property. This lack of visibility inhibits learnability.
Efficiency
The slider inputs are very efficient in showing incremental changes to property adjustments from the minimum possible to maximum possible values.
Safety
The safety of this demo is very high; there is no way for the user to input illegal values into any of the properties. User actions are very limited: slider and pink-control manipulation.
Teachability
One downside of the sliders is that they are the only source of user input. The slider value-boxes are not editable. Furthermore, the CSS code box itself is not editable. Not allowing for the user to be able to manipulate the actual CSS code inhibits learnabililty of the actual content of the demo.
Fluid typography
Learnability
The aspects of the Fluid typography interface, as can be seen in Figure 2, that have high learnability are the editable "Minimum size" and "Maximum size" statements. They are intuitive and make sense. Additonally, their affect on the "Result(edit me!)" text is immediate and clear. There is immediate visual feedback.
However, what is not very learnable for me is the conceptual mapping between what the user inputs into the "Minimum size" and "Maximum size" statements and its effect on the "clamp" values. The conversion is not shown or described. Because of this, when error messages like the one in Figure 3 come up, I do not know how to fix it.
Efficiency
Being able to see the immediate effects of manipulating the minimum and maximum sizes provides efficiency when looking for a particular visual result. Making the result text editable also contributes to this efficiency. The copy icon in the CSS code text box, as seen in Figure 2, provides great efficiency if a user would like to immediately insert the font-size property and its value into their own style sheet.
Safety
When I input values that I presume to be illegal, such as no input and negative sizes (seen in Figure 4), there is no feedback from the interface. This is a safety issue, because a user can insert CSS that is incorrect into their style sheet. It also contributes to an incorrect conceptual model of the property itself.
Teachability
Similar to the Smooth shadow generator, the Fluid typography interface does not have an editable CSS code box. Not allowing for the user to be able to manipulate the actual CSS code inhibits learnabililty of the actual content of the demo.