Wire-frame refinement

The earlier structure:



Well, I sat down today to create some visual style variations for this sign, and as I began I discovered that there was still room to refine the presentation and clarity of the information. In doing so, I felt most comfortable working with the text, lines, and simple geometeric shapes that we had already created, but in an even more restricted range.

I focused my attention on creating a more refined visual heirarchy, as well as creating one main path through the content.

The Band saw sign at an early stage in the process:

Here, I began to work with only two colors and a few line weights.
---In the upper-left-hand area, the materials information box was doubled in size. Each material will now have it's own place. On machines where certain materials are not permitted, the space for that material will simple be blank. This layout allows the first-time user to read and comprehend quickly what is allowed, and the positioning that remains consistant across all machine signs allows a familiar user to check for compliance almost instantaneously.
---The portion highlighted by the blue square is information that was formerly located on the left-hand side of the old version. It has now been combined with the illustration to increase comprehension, and arranged in one water-fall-like path, ending with instructions for complete one's use of the machine.
---In the green squares, I began to refine the layout. It seemed that the sections might need to trade locations.

User Test:
We tested the clarity of a slightly later version of this sign with a student, Dan, in the Industrial Design department.
---He was confused by the off-axis alignment of the information next to the illustration.
---He also pointed out that including, "Other," as a material left room for all sorts of bizarre interpretations by students.
---He commented that the diagonal alignment of "Before and After" in the cleaning section lead his eye out of the sign all together.
---The vertical alignment of the "Additional Help" sources lead him to believe that it was an ordered list - not what we intended. This confirmed our intuition that the Clean and Help sections needed to move.

So I then created the more highly refined version in response to Dan's comments and our own observations below...(with my notes on the left side):



See this one LARGE here:style1-3web.gif

---I refined to hierarchy of information further by increasing the contrast by alternating orange, black, and white.
---The information next to the illustration is now organized vertically, for a more straight-forward scan by the reader, and terminates in a very simple icon that directs the reader into the 'Clean' area on the right.
---The Clean area now uses more text - for clarity - but ends with a simple diagram of cleaning to drive the point home.
---The Help area is now at the bottom, with sources for help organized in a horizontal row to avoid any suggestion of an ordered list...

Now, we'll let it rest overnight, and see if it still appears as clear and lovely in the morning!

3/05/2005