Creating "visual blocks"

Question

I am designing a fill-in-the-blanks quizz. I start with paragraphs, and for each paragraph I append some buttons below which are the possible answers for the blanks.

Please see http://wikilearner.net/wiki/

The problem is that, because there are multiple paragraphs, it becomes easy to get confused about which paragraph the buttons correspond to.

I want to make it visually obvious that the two are linked. I have tried using a single line/double line on the left, but it doesn't look good. Any other suggestions?

Answer 1

First of all: I think it is already pretty awesome and quite usable - it already works quite intuitively (several ways to interact) and just needs a bit of finetuning.

To answer the specific question to make visual distinction between paragraphs: 1. more space between the buttons and the next paragraph. 2. a line between the buttons and the next paragraph 3. highlight the active paragraph and the corresponding buttons (on hover or selected field)

Most of those effects don't need much to work, they can be subtle, just a slightly different shade.

One more thing you could do is use the statistics to help grouping, for example by placing them under the buttons, still right aligned. It will serve as a natural separator. I think those need to be clearly separated in style from the buttons and the text to indicate it is meta-data.

Some more feedback on the page itself: I would make the buttons just a bit more distinct from the normal text: at this moment it is all the same font, colour and size, and that gives the impression that the (unused) buttons are part of the normal text flow. You could break this up by using a different font (serif vs sans serif), displaying it in italics, using a different font size, using a different color and background color. There's a balance to be found: it needs to be distinct enough to not confuse it in the overal flow, and yet not so distinct as to completely seperate itself.

I would also display the dropdown menu on arrow down, and move the items in the dropdown menu a bit closer together. Perhaps indicate the dropdown functionality with a small light-grew arrow on the right side of the field that has focus to make it more discoverable.

Answer 2

What about something like this:

• Use an interaction model that users expect; treat the missing words as a control panel that sits above the content
• Change the colour from grey to yellow (or any colour), draw a relationship between interaction and result
• Background colour can help separate control and content
• Thin stroke can help encompass your 'visual block'
• Slightly exaggerate the space between each 'visual block'

Answer 3

Perhaps something like this instead:

I do have a few comments on other aspects of the design:

• The "answers" look too much like buttons. I clicked a couple of times before I realized that I needed to drag and drop.
• Dragging and dropping takes time so the time to complete is going to include a lot of drag and drop time, and, in the first section, some possible "click time".
• The right/wrong answer, time, and % look a lot like the "answer" buttons.
• The text boxes within the text make the paragraph difficult to read.
• The red/green feedback are very close in contrast making it difficult for a person with red/green colorblindness.
• It will be pretty difficult to make this design accessible.

It could be that a standard true/false or multiple choice quiz would be a better alternative.

Answer 4

Regarding how to make things look like they are grouped properly, you can sometimes use alternations of background colors rather than drawing lines. Note for instance my answer to this question uses color instead of boxes. Similar but more subtle techniques might help:

How to create bands of number ranges for a field?

Other thoughts: This is neat. However, it does not seem like a good Fitt [sic] for drag & drop. You've got a better thing going with the type & suggest interface, and I'd focus on refining that. Perhaps even to the point of disabling the drag and drop, to keep people from thinking that's the right way of doing this...especially if they're being timed! Even "click on blank and then click on the word button to fill it with" would be faster and easier, as well as letting you quickly try an alternative after a wrong answer.

The suggester drop-down adds visual noise and you really don't need it. People already have to keep their eyes on your list of "word buttons" to know what the possibilities are. It would be better to have those light up to reflect the list of candidates as they narrow, and when there's only one candidate left have an alert appear like "press [Enter] or [Tab] to accept".

Your scoring and timer information should be visually different from the "word buttons". And there's no reason to make it look like buttons at all. For starters you can try making it read-only information in a panel with a different background color, that is consistent and over to the right of a vertical stack of the paragraph and the word buttons.