Course:
Advanced Interaction Design
Built with:
JavaScript, HTML/CSS
Product:
Interactive Web Experience
Concept
William Carlos Williams’ “This Is Just To Say” is a poem about eating someone else's plum from the icebox. It's a small act of mischief, guilt, and a half-apology. The poem is short, playful, and a little destructive.
The interaction mirrors the poem's destructive permanence: Each click takes a bite of the plum. Each bite reveals the next line of the poem, etched into the flesh beneath the skin. By the time you reach the last line, “so sweet and so cold”, the plum is gone.
Reading the poem requires irreversibly consuming it.
Ideation
The core idea was to center the visual design around a singular plum (or plums). In order for the user to read through the poem, the plum has to be consumed until it is finished. Early exploration in low-fidelity wireframes focused on different basic structures for this consumption-and-reveal process of the plum.
Early Wireframes:
-
Wireframe 1 considered "eating" multiple plums in an icebox. This was most faithful and literal description of the original text. However, the interaction did not intuitively encourage the consumption to be in chronological order of the poem.
-
Wireframe 2 pivoted to a single plum in which lines reveal in chronological order underneath each bite. This deviated from the poem's prose, but preserved its chronological component.
-
Wireframe 3 explored using a 3D modeled plum (i.e. modeled in Blender). However, this proved challenging on a technical level, requiring both expensive technology & coding expertise.
-
The final design concept stacked several 2D layers of the plum. To bite through the plum would be to bite through the z-axis. This maintained the forced chronology of the poem.
Wireframe 1
Wireframe 2
Wireframe 3
Creation
Drawing:
Plum layers were digitally hand-drawn using Procreate for iPad. Different layers used different colors to differentiate them, and try to create the naturalistic differences between the layers.
Type Treatments:
For Typography, two fonts were used to balance two themes in the poem:
-
Playful, mischievous --> East Sea Dokda
-
Guilty, apologetic --> Gentium Basic
Type implementations were added to the plum drawings, once they were finalized. To display the poem in a legible way, a balance had to be struck between natural color and legibility.
Color Treatments:
Color was inspired by the purple/red hues of a plum and the cold, ice-blue colors of an icebox. Initial color studies used more cartoonish, brighter purple color. Ultimately, a more naturalistic color scheme was chosen to adapt to the realism of the interaction and style of drawing.
Font Color & Type engraving treatments
Development (Code)
This project was developed in HTML/CSS with JavaScript.
This project was my first exploration of isolating microinteractions, so I approached this with a single micro-animation (the bite) at the spot the user clicks. This would bite for only the layer in action until it clears. This effect would progress and be repeated by each layer.
Iterations added intuitive features to the bite sensation to make it more satisfying to the user. These iterations included adding a "crunch" sound byte, a "natural" and randomized bite shapes, a shake feature when bitten, clearing layer after only 7 bites. These changes allowed users to experience the bite, yet not have to spend too long clearing each layer or be forced to clear small, hard-to-see specks,
Reflections
Single microinteraction
I chose to isolate this project to a single microinteraction. This made it intuitive, natural, and intentional. Though other microinteractions could be explored, this project demonstrated constraint in simplifying the result.
Legibility over aesthetics
Communication is the real goal; aesthetics should enhance what is already legible. For typography, that meant making the poem readable over "looking cool".
What do users expect?
Finally, I heavily considered what users should expect before, during, and after a click. Before the click, there should be some indication that a click can occur, such as an increase in size and the cursor change. During the click, some act of "eating" should feel apparent, such as shaking and the bite sound. After the click, the user should feel that they have complete the goal, with a clear and naturalistic imprint left behind, as well as an understanding of how to do it again. Considering these makes an interaction feel natural and ultimately rewarding!