Improve link between "The Infi Test" and the sections below that

[jeroenheijmans]

The problem

The 13 quick scan questions in the first part of the page correlate to the sections below it. The discoverability and accessibility of this feature is extremely low: only the color of the bullet (which corresponds to the block color) is an indication. Here's an extra way to show that:

A strongly related but slightly different problem (multiplied by the problem above) is that the link between the "Test" and the sections below it is pretty unclear. They seem to be different types of things, why are they on the same page? At least, that's what visitors will likely think.

Surely we can improve this? There are probably many different ways to fix it.

For reference, this came up as part of #69 (and the e-mail discussions with @dirkinfi on the subject).

[jeroenheijmans]

Possible solution

Here's one way we could solve (large parts of) this. Starting with the immediate issue of bullets not clearly being linked to sections:

• Add the section's icon at the start of each bulleted list for an extra hint
• Link that icon to the actual section
• (optional?) Add a "More info..." link at the end of each question, that jumps to the relevant section (PS. enabling smooth scrolling for this might be worthwile)

Second, we must also clarify the general reason that this "Test" and the blocks lower down are part of one document. The idea behind these two sections is in my opinion as follows.

• The "Test" is pragmatic: it's a "quick scan", designed (similar to the Joel Test) to do a rough, imprecise, but very fast check of how well you're doing. Consider it the main "I only have little time" thing that sits "above the fold" on our document.
• The "Blocks" are more abstract: they offer additional details, background, and whatnot. They support the quick scan, and should roughly equally represent the same knowledge in more detail.

I believe we can fix the fact that viewers won't "feel" or see this link between the pragmatic and abstract parts of the page by:

• introducing a visual cue to separate the "pragmatic" stuff above-the-fold
• introducing a small text or heading to lead into the start of the "abstract" details

Curious to hear others' thoughts on this idea.