Exercise 1: Critiquing CSS Demos

Fancy Border Radius

Successes:

  • Having draggable squares to change parameters is intuitive, increasing learnability and ensuring safety.
  • Seeing the CSS format in real time gives more insight to which drag corresponds to what field, increasing learnability and efficiency.
  • The option to copy the current parameter to clipboard increases efficiency and safety for users looking to recreate the control.
  • The color-coded corners in the Full Version makes the correspondence between drag point and number more clear, increasing learnability.
  • Refreshing the page preserves the content, showcasing safety.
  • Simple, uncluttered interface allows for better learnability and efficiency.

Critique:

  • My immediate action was attempting to directly change the percentages for border-radius by clicking into the box. This is in part driven by an expectation of consistency, as the width and height fields directly below (when "Custom size" is toggled) are editable. Adding direct text input could be a way to make the demo more learnable and efficient, the latter of which is especially true if large changes are desired.
CSS Generator

Successes:

  • Seeing the CSS format in real time gives more insight to which input corresponds to what field, increading learnability and efficiency.
  • The option to copy the CSS to clipboard increases efficiency and safety for users looking to recreate the control.
  • Generally simple, uncluttered interface allows for better learnability and efficiency.

Critique:

  • The CSS Patterns section violates consistency in having a different user interface than the others once clicked. This decreases learnability of the tool and efficiency of site navigation, and can be fixed by ensuring interface uniformity.
  • Having to go back to the home page using the back button to switch between sections also decreases the efficiency of site navigation. A nav bar could offer an alternative.
  • Some sections have choices/ inputs only on the right, while others also include selections on the top of the page. Grouping interactions and ensuring consistency would increase learnability and efficiency.
  • Refreshing the page does not preserve the content, decreasing safety.