first-letter-punct-before-* tests unnecessarily hard to use

The first-letter-punct-before family of tests are *extremely* hard to
evaluate.  They require intensely scanning each line to look for a
single 2px by 2px red square.  Even ignoring the size, red and green
are similar in luminance, so the large amounts of (much higher
luminance) white around each line makes the colors look similar unless
you're paying very careful attention.  Because they can't be quickly
skimmed, the couple of really long ones (particularly 019) are very
hard to evaluate, as you can't easily keep track of exactly where you
are while scrolling.

This can be trivially fixed so that the tests are easy to skim and
scrolling is still easy.

1. Make each square 20x20 instead of 2x2.
2. Remove the <hr> between groups.
3. Put a thickish green border around and a green background beneath
the whole set of things.

#1 fixes the problem of the spots being tiny.  #2, and #3 fix the
problem of there being white right next to the spots which can
distract the eye.

I manually fixed several of the pages to match these recommendations
using Web Inspector while running the tests, and it made evaluation of
them *infinitely* easier.  All the rest I still zoomed in to the
maximum level on my browser, which counts as partially implementing
#1, and it all by itself was a major usability win.

~TJ

Received on Thursday, 23 December 2010 02:19:01 UTC