#39 UI: Cybertext

"Substance before Style"

 Another post, another storytelling device: The user interface, or for short UI.

Principles of Interaction Design

On his website, Bruce Tognazzini gives a holistic (my favourite!) introduction to what he calls "interaction design". The background he is writing from is that of the great design, UI, UX (user experience) trends which came up with the arrival of digital interfaces. He writes about core topics such as aesthetics, anticipation and autonomy. Here's the link for anyone interested:

First Principles of Interaction Design

However, while Tognazzini is primarily interested in communicating correctly with the user, I as a storyteller am equally interested in the question of how to give the designed interface a style consistent with the narrative or: what options I have to tell a narrative via the interface.

I think the answers lie in all the gaps, the variables that are not determined by interaction design principles. Today's project will serve as a demonstration of this thought:

The User Interface of Cybertext

A recurring reader of this blog or a person studying game studies with me might remember this project. It is, essentially, an interactive novel enriched with some audiovisual and interactive features.

You'll notice that various elements are at times heavily inspired by Cyberpunk 2077, especially its UI (see e.g. this great portfolio). Note however, that this is an unofficial fan work and is not approved/endorsed by CD PROJEKT RED.

Before the actual game starts, the player is presented with a view allowing to determine
herself when the actual gameplay starts.
Also: Opens up a void, which wants to be filled. Color and character usage sets up the theme.

 

When pressing ENTER, the logo is faded in and distorted,
accompanied by an electronic, distorted sound. Link

The standard gameplay view is accompanied by soundtrack and has several
sub-elements with specific thoughts put inside.

The lines and boxes framing text, decision and quest UI have two-fold meaning: Once, they create the impression of a system that can be steered - this is especially reinforced by the line's fading in and out over time. Second, they create the impression of being boxed in, unable to break out of this system - a thought which is reiterated in the game's tutorial and ending, where seemingly corporate messages are delivered about how the game should be enjoyed, for instance. It tells the meta-story of this game.

Regarding the story happening inside the boxes, the right UI is a visualization of the non-linear quest graph with its current state and possible future events. It tells the story that is written down and decided on the left in a way that may generate interest in the future or alternatives.

The entire visual style with mechanical moving elements and a clear reference to Cyberpunk aesthetics sets the atmosphere, thus possibly helping with immersion.

Conclusion

Even if I'm surely no "native" UI designer or 2D Artist, I do am a little bit proud of my work. It feels coherent in the right way - and this, in the end, is what a good production should be like, I guess. Anyway. I would have uploaded the whole game on itch.io already and embedded it here, but I'm not sure yet whether I'm allowed to.

If you already found this post and want to play - stay tuned! As soon as I know more about the legal stuff I'll post this on Twitter with an updated post including the - possibly altered - game.

Until then, have a good time!