Solve: Rubik’s Comic Interaction Design

Concept

Solve is an interactive comic in the form of a digital Rubik’s Cube. The concept comes from the desire to use the rigidity of cubing as the foundation for a compelling narrative experience. Each side of the cube contains a different story, but the puzzle isn’t as simple as spinning the scrambled cube around to look at all the panels. Instead, those panels are hidden behind solid colors until they have been moved onto the side of the cube where they belong, forcing the player to interact with the puzzle… and even pull off a solve.

(A note: This project is a conceptual set of mockups, not a working game. Consider this blog post a proposal of everything other than the underlying computer science, which is feasible but slightly elusive.)

Design

Introduction

The initial view of the comic/game is intentionally minimalistic. The screen shows a basic Rubik’s Cube, with no story content. Otherwise, the user can perform all normal cube actions:

  • they can rotate the entire cube to bring another face to the front (colorful top, bottom, left or right arrows), 
  • rotate the front face clockwise or counterclockwise (diagonal bottom left arrows), 
  • or rotate any column or row of the front face (using key commands, indicated by the letters drawn around the edge.)

Upon making enough rotations (in this case, one,) the player would shift a panel onto the face with the central piece of the same color. This activates both, revealing that the comic/game is more than a simple rubik’s cube.

From there, the player can complete the comic/game in whatever way compels them. They might activate one panel at a time for all 45 to try to hack through the comic. Or, hopefully, they would be motivated to solve the entire puzzle.

Interface Design

The interface of the comic/game is designed to be challenging and inaccessible, without being tedious and inefficient. Hiding a comic within the cube is intended to give less logically oriented people a glimpse of the hidden rhythms and beauty that truly obsessed cubers see within the puzzle. It shouldn’t be too easy to uncover. It should also be worth finishing.

To increase the challenge, only one face of the cube is ever visible at a time, the panels are hidden unless brought to “their” face, and there is no onboarding.

To bring the accessibility back up to a reasonable level, most rotations can be accomplished by key commands, a map of the full cube is provided in the lower left corner, and hovering over the panels makes their order within their side appear (for example, the central panels will always be the 5th panel on their face out of 9.)

Hidden Mechanic and Conclusion

Eventually, the player will uncover a panel that makes a reference to peeling the stickers off of a cube.

At this point, an icon will appear on every panel which, when clicked, will “peel” it off the cube. Those panels will be stored in a different area of the screen and can be placed on any empty spot.

This provides a funny and easy way to solve the cube. However, a player who does not peel any stickers off will be rewarded if they reach the solution. At this point, the 3×3 grids will transform into larger tenth panels, which will provide a conclusion to the story.

Discussion

What makes a good comic or a good interactive storytelling piece? What about a combination of the two?

What makes a good comic or a good interactive storytelling piece? What about a good combination of the two?

Interactive digital narrative (IDN) works present an interesting collision of design goals. On one hand, they need to tap into the unique potential of their “base medium” (example: text, comics, what have you.) On the other, they need to make that potential shine by adding interactive mechanics that completely change it as a medium. Through the addition of thoughtful and transformative mechanics, interactive and noninteractive combine into incredible new formats that take advantage of the best of both.

In that vein, the strongest interactive comics are the ones that most directly engage with what makes comics special. Comics are characterized by their visual and sequential nature, and the ways that visual sequence creates an unique representation of change, emotion, and connection. One particularly interesting aspect of comics is their relationship with “closure”, a word theorist Scott McCloud uses to refer to the importance of the negative space between panels. Closure can be thought of as the amount of work the reader needs to do, in order to mentally complete the narrative and storyworld to their satisfaction. In comics, the panels are an obvious set of discrete story points, and the reader’s brain needs to stitch them back together into a continuous narrative. This creates an active and engaging readership experience. McCloud describes this in his book Understanding Comics:

“Between such automatic electronic closure and the simpler closure of everyday life, there lies a medium of communication and expression which uses closure like no other… a medium where the audience is a willing and conscious collaborator, and closure is the agent of change, time and motion”.

That well-phrased thought extends into the realm of interactivity, where electronic closure doesn’t necessarily have to be automatic. In fact, it can even be resistant, in ways that serve the story. If the reader is already expected to perform visible closure acts in reading across the gutters of a static comic, asking them to help make the gutters is an interesting next step.

Last year, I read two interactive comics with very different concepts and implementations: Florence (case study here) and Meanwhile (case study here.) These IDN works are great examples of different ways to take advantage of the digital landscape. Florence consists of a long vertical flow of panels that has to be scrolled through, some of which feature puzzles to be completed before the continuation of the story. The comic is inherently spatial. Navigating it is mapped to a sense of the passage of time, and the completion of the puzzles is enactive of the main character’s journey and provides closure. Meanwhile, on the other hand, is a massive, nonlinear, choose-your-own-adventure grid of panels that are connected into storylines based on user decisions. The user is carried through the gutters from panel to panel, playing the role of fate in the story. The visibility of various options and the spatial nonlinearity of the sequence does not invalidate the temporal linearity of the sequence, and is very expressive.

Inspired by all that and by general IDN design principles (some summary here), here are my thoughts behind the design for Solve.

  • The balance of the expected/unexpected. Rubik’s cubes have very familiar mechanics, and the use of their grids of panels for comics is unusual but intuitive. The player’s objective, and steps they could take to reach it, are obvious. The unexpected and hidden mechanics carry more weight because of this normality. They’re outside the boundaries of what is assumed from the work, but they still make sense within it. (The unexpected can be very valuable… wait for it.)
  • 3D as an interesting application of the “infinite comics canvas”. Rather than represent the storyworld as a space to be navigated, it’s represented as an object to be manipulated. 
  • Expression of dramatic (story) concepts through systems. The act of solving the cube, of devoting a lot of time to working through a completely voluntary, frustrating, “nonproductive”, and ultimately rewarding task, could mirror the story themes in the comic. Hopefully the rewards are made more visible with the addition of the comic, but the principle still stands. 
  • The many satisfactions of: reading a good story, completing a ludic challenge, “winning” the right to automatic electronic closure, discovering interesting and beautiful patterns, and putting in the work.

Thanks for reading & look forward to more fun with interactive comics in the future! I find this concept fascinating and while I’m putting it down for now, it’s still a project I hope to return to and properly finish.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s