Categories
Uncategorized

VisInfo Prj2

Challenge: Find an object that can be explained visually with images or diagrams in 5 steps or less.

Conceptual

Ideation: How to paint tabletop miniatures(apply primer & wait 24 hours, prepare miniature paints(shake lightly, squeeze a bit of the paint medium out, shake well, squeeze a small amount of paint into a container to apply to paintbrushes. Repeat steps for each colour of paint, skip removing medium if paint has been used before), apply paint to miniature and wait 24 hours, apply varnish or sealant on the miniatures either with a brush or aerosol spray and wait 48 to 74 hours) This would require me to convey a lot of details that may not be immediately clear based on pictures and diagrams.

Ideation: How to shuffle a deck of cards. I am not great at shuffling cards though and there are many accepted ways to shuffle.

Ideation: how to play magic the gathering. I though this might be a fun idea, but I don’t know very much about it and there are a lot of steps and “phases” of a turn, as well as an insane amount of possible actions or interactions based on the card.

Ideation: How to prepare a drone for flight. This might require more than 5 steps, specific technical terms, and would be easy to photograph but difficult to create diagrams or illustrations for.

Ideation: How to replace a toilet roll using a spring-loaded holder. This can be easily explained in five steps or less and I would have a lot of freedom in working with photos, diagrams, or illustrations.

Ideation: How to use an Etch A Sketch. This is slightly more visually complex than a toilet roll dispenser but still only has a small number of steps. (shake Etch A Sketch vigorously to clear the display. Rotate left dial counter clockwise to move pointer left. Rotate left dial clockwise to move pointer right. Rotate right dial counter clockwise to move pointer down. Rotate right dial clockwise to move pointer up.)

Elements

Part 1A: Name and titles of parts – Left Dial, Right Dial, Display, Shell, cursor/pointer/pencil?

Part 1B: 5 Steps to using the product –

Shake Etch A Sketch vigorously to clear the display.

Rotate left dial counter clockwise to move pointer left.

Rotate left dial clockwise to move pointer right.

Rotate right dial counter clockwise to move pointer down.

Rotate right dial clockwise to move pointer up.

Part 2: Process Documentation (this blog site)

Part 3: Product audience, user needs, user knowledge, user abilities.

Demographics

According to the Etch A Sketch FAQ‘s, the product is for children ages 3 and up, but can also be enjoyed by adults. Using this information we can deduct that the product is marketed to adults with young children, and because the product has been around for a very long time there is a secondary, smaller demographic of adults that used the product as a child and have fond memories or feeling of nostalgia toward the product.

So if the end user of the product is children as young as three they would be unable to read a manual and it would be a parent that reads it and attempts to relay relevant information to the child. If a child as young as five is using the product it would be unreasonable to expect the child to read and understand any technical or complex information, although a parent would be able to communicate more concepts and instructions to them.

The decision to make in regards to how much information is presented comes down to whether the instructions are being presented to the end user or to an accompanying adult.

If the reader is a child it’s important that there are very few simple words, if any at all. The information must be presented visually and simplistically, it would need to be immediately evident how the object is interacted with.

If the reader is an adult accompanying a child there can be detailed instructions and technical information presented, and the adult can decide how much information can be effectively communicated to the child. For instance, if the child is seven the adult could share some information on what’s inside the object and how it functions or other ‘fun facts’ to pique their interest. Alternatively if the child is three, the adult would know that they could not communicate verbal instructions and would instead need to interact with the object so that the child can see how it operates and interact with it while supervised.

I believe the most effective way to communicate information and instruction to the end user is to incorporate colour diagrams(large, taking up maybe 70% of the total page) that are as simple as possible, so that if a small child glances at the guide they might be able to intuit some of the interaction. The text on the page should be targeted toward adults and can be more technical and in a smaller font (maybe 16pt – 8pt, assuming that the guide is printed above 150DPI, if the guide is in digital format I wouldn’t go smaller than 10-12pt). The text can include details about the mechanisms of the object and how it works, possible interactions, and(potentially) a diagram of the internal parts(as long as it does not visually distract from the larger visuals and confuse the child)

Process

Early studies
Early hero graphic
Updated flat graphic
Early layout design
Shake to clear screen graphic
Output
Output with bleed marks

Finalizing

Final font choices: Marker SD and Futura. Although Marker SD is not the most amazing font, it is very legible and has a childlike quality to it. Futura is very legible and modern, and pairs nicely with many typefaces but very much so with a loose display font.

Issue: background colour is the same as used in graphics.

Solution: Background colour was desaturated to prevent visual competition with the foreground.

Issue: legal text look uncomfortable justified

Solution: Legal text is aligned right for a sense of visual movement, there is a slight difference between left align and right align. Left align feels okay, but right align leads the eye in more of a diagonal that keeps the page moving

Issue: With an 8.5 x 11 page there isnt much room for page reduction when it comes to bleed marks. I had to reduce bleed to 0.05″ which doesn’t do much for the printer, and it’s entirely possible that the bleed marks don’t show up due to printer pages shifting. When you print you do an entire stack of pages and each page shifts a tiny bit, so if you use the top page for bleed marks the bleed needs a lot of room or you will end up with a lot of pages that have white coming through. Bleed marks can’t be larger without reducing the size of images (which is a problem because the images need to be intuitive to very young children)

Solution: Removed emphasis of bleed marks, focused on providing a compelling digital experience.

Issue: The title feels very flat and doesn’t have any visual intrigue.

Solution: Used existing colours and a modified rectangle to give the title a sense of overlap and a little bit more unity with the rest of the page.

Issue: although proximity distinguishes the list of instructions, it lacks visual contrast and can blend in with the other information on the page.

Solution: In a similar style as the title, used a modified rectangle that travels on the same diagonal as the title, but reverses the colour from the title. This creates contrast and seperates the instructions from the rest of the page

Issue: The hero image is compelling but lacks distinction and it needs to ‘pop’ a little bit more

Solution: With the introduction of diagonal modified rectangles, a little bit of the ‘pop’ is added by having the hero image overlap with the instructions rectangle. The outline colour was changed from white to black and a drop shadow was applied to give it extra three dimensionality.

Final Product

Alt final with labels. I prefer the final without labels as text should not visually distract the reader as they could be a small child. The visuals should be able to communicate to the reader without the inclusion of text.