Using UI as a means to tell a story, convey emotion, and create personality

Nathalie Lawhead is an award-winning artist and independent game developer.

Throughout development of the Electric Zine Maker I’ve been trying to find some time to finally talk about UI, and how important it is to view it as part of your “world building” rather than just UI work.

All of my work heavily relies on UI to convey the message of the game, or further build on it. To me UI is just as important as dialogue, music, and design. If done right it reinforces the themes of your game, and even builds on it in a way that you might not be able to convey anywhere else.

Okay, so without much of an introduction I’ll dive right in. 

My favorite thing to do is to use UI counterintuitively to build on senses of helplessness, like reality is somehow disintegrating and things don’t make sense. This works well as a platform for humor. For example, the minimize button doesn’t have to just minimize. It could cause the app to complain and protest that it has just been minimized.

In Anatomically Incorrect Dinosaurs, if you minimize the game, the game starts crying and singing "baby don’t hurt me" in a weird robot voice. An interesting note to make in the way UI is used here is that the UI is an actual character in the game. It has a voice assigned. It talks if you do things, like if you move the window around it starts saying "Weeeee!" as if it’s enjoying the ride. It gets mad if you quit the game, and has a final closing remark before fully quitting.

The way UI was approached here is that it’s an actual character. It’s a way to frame the game in a 3rd wall breaking sort of way. At this point the game is even a self-aware entity that you play with WHILE actually playing the game. It’s a wonderful way of layering interactivity, and introducing surprise elements that drive jokes across.

Using UI as a character is very effective and I did this a couple of times. Anatomically Incorrect Dinosaurs is an actual character (with personality design), and ARMAGAD (the desktop version of Tetrageddon) is one too.

ARMAGAD is less obvious and you kind of have to discover it. It will talk about what you do, and functions as a narrator. ARMAGAD is the invisible god character of the game. When you help Cybermonkey escape you encounter a lot of it. ARMAGAD will narrate what Cybermonkey is doing, and it almost feels like the game is playing itself with you.

In some instances the UI can be a game in itself. See Electric File Monitor. Electric File Monitor is parody software that sells itself as a "prison industrial complex for your computer." You scan your computer and it will accuse random files of being dangerous.

You can place these files in interrogation, or a lineup, and determine how to punish them based on which files you like the least. Files will often plead their innocence, and beg. In this case the entire game happens as a UI. The software itself is a character that you are interacting with, and it turns your computer into the game.

So as you can see, there are a lot of wonderful ways to approach UI design. Your UI is a character, your UI has personality, your UI has volume, depth, and distance. Your UI is an actual breakable environment, your UI is used to reinforce the "fever dream" element of a game.

A cute example in terms of UI being a breakable environment, with physics and gravity, is the Electric Zine Maker website. In many pages the UI has physics and reacts to gravity. You can throw it around, or break it entirely.

This isn’t the first time that I used UI as a physical object, but it’s my first use of it in a website. I think it’s successful because using physics + UI this way makes things very playful. It almost feels like a small playground that you put someone in. It’s hard to resist throwing things at something when given the option.

My most recent work that really explored all the ways that UI can evoke emotion was Everything is going to be OK.

A big part of the game's UI is themed to draw heavily from vintage GUI’s and other OS elements. I was surprised by how people noticed the reference! Alexander King actually wrote a very detailed breakdown of it in this medium post. It was pretty amazing that someone “got it” that much.

Everything is going to be OK is a game that’s heavily structured around vignettes (small impressions) of life experiences. It’s a personal game. There are very intentional reasons for using UI this way, to convey these messages.

The historic GUI's create a sense of familiarity and approachability. In many ways it’s a type of comfort zone for interaction and playing with user experience. There are SO MANY charming things about the strange environment that a desktop is, and how we’ve all learned to interact with it. A lot of this is considered to be a type of “interaction vocabulary” (see UX), and understanding this behavior is almost a language in itself.

If you understand it enough you can subvert it (as much as I hate using that word, that’s pretty much what happens here). Sneak in little details that go against what people expect. If it’s done right, and to just the right degree, it can make the environment you’re building feel very much like a fever dream.

Small UI elements talk back to you, you get sucked into something you thought looked harmless but it’s actually an entirely new scene, interactions pile up to a point you’re not sure where you are anymore like you’re navigating a maze rather than a structured functional environment.

How we are used to operating in a computer is very vignette and collage-like in itself. Viewing your desktop as an environment; things tend to be very broken up with how windows, tabs, separate software, all runs at the same time. Everything demands your attention, but each is a separate world in itself. This is a very interesting setup to explore for telling stories.

Like, examine what it’s like to interact with a computer. When you use your desktop, different windows open, different things happen in each, they are mostly unrelated isolated activities and tangents in each, you close them, go off on other tangents, and open new windows.

Since we are so used to using computers this way there is a common agreement in regards to what behavior we expect in these environments. We expect certain functionality of these UI’s and systems. If they do not behave the way we expect (our agreed on interaction language) it’s almost like a betrayal on the computer’s part when it does the opposite.

I mean, it’s so interesting when something crashes, and how people can get mad at that. It’s a machine. It doesn’t know to care, but it’s almost personal. It’s really fascinating to make something that rejects these suppositions. People genuinely feel a loss of control. Like they’re not in charge anymore.

Anatomically Incorrect Dinosaurs closes itself when you’ve reached the end. It throws a very bizarre random video at you and then says “Goodbye!”. The program is closed then. There’s a sense of emptiness you feel, like you went on a wild ride and had no control over any part of it.

Everything is going to be OK has so many instances of this. Games will close on you when you reach the end. In one case there is a chess game. You can actually just move the piece directly to “consume” the king or queen but people tend to play it like it’s chess. It takes them a while to realize that interacting under their conditioning is actually not necessary, and it’s funny to see them realize that.

The chess game also just degrades as time goes by and playing it becomes almost impossible and pointless.

UI is a functional stage that we easily understand.

A famous non-UI example, but still as applicable: pretty much everyone knows they should go right when playing a classic 2D Super Mario game. If you make the action of going right pointless, and the true way to “win” is to go left, it literally takes them forever to question their mode of interaction & why it’s failing them. Once they realize that the opposite of an expectation is true, it’s like you just freed their mind or something.

The emotional range that you can get by just changing that one thing is a truly interesting space to explore.
A space like this is a good area to discuss issues in, and present interesting fragmented content such as fake programs, branching stories, or layering content in interesting ways for people to lose themselves in. You’re essentially creating an emotional space.

I think this in particular is a very important thing to understand: UI is an emotional language. There is an emotional reaction that happens when a computer doesn’t do what you want it to do (things crash, close, errors = confusion, loss, chaos). This is something you can use to enhance your game’s theme. Work with the ways that UI is emotional.

In case of old-school GUI’s and OS’s it’s a wonderful space to place stuff in because it’s just far enough in the past for people to remember what to expect, but not too close that they might have too complicated expectations from it. It’s kind of like a ghost ship for personal messages. You can use people’s nostalgic expectations in a humorous or deviating manner to surprise them.

In Everything is going to be OK it adds to the feeling of being in a fever dream, lack of control, and often so strange it’s humorous. The varying character of UI (especially old-school) is also a great realm to work with. I have a very long Twitter thread here that I constantly post to.

Old computer systems were clumsy in their UX work. They already had character because of their flaws. For example, buttons were too large, other things were too small, fonts were strange, colors were too strong, and they featured improvised graphics that look like they are placeholders but somehow stayed. 

This ended up creating a strong sense of character for how “bad” or clumsy it was. UI was just trying to figure itself out then, and the lack of rules made it really interesting. See Microsoft Bob as an example. This is an actual environment that was used instead of a desktop. The fact that a major company like Microsoft actually took the time to make something like this is just amazing.

There were other cases where people tried to use a “real environment” like a 3D desktop, instead of your typical UI. For example there’s 3DNA. Older edutainment software did this frequently too. Like Microsoft Encarta’s Mind Maze. The distinction between re-inventing the wheel, and trying to improve something is a gray area. It’s wonderful to examine these failed instances and understand why they failed. Toastytech is a great resource for this.

I don’t want to talk about old-school UI too much, but one final point that I think is important about it (and why we have such fond memories of it) is how it benefited from its flaws. Computers then didn’t feel like you were in a highly polished, corporately branded, productivity machine. The environment was personal. The extent to which people would often go to theme their desktop speaks to that. See the Windows 98 – 2000 themes, and the communities around creating icons for it. Personalization of a space is important because it gives you a sense of ownership. Without it you are more of a “visitor”, instead of it being a home.

Desktops have been traditionally called “Home”. It’s still part of the naming convention. I think this is a relic from a time where people still aspired to make it a personal space that you lived in. We’re seeing this slowly being lost with the way newer design models are pushing corporate branding over these spaces.

For example, both OSX and Windows have a strong polished commercial presence, and the space is strongly controlled by them, rather than the user. Mobile (OSX and Android) is a completely lost cause when it comes to user freedom -- though that's more of a conversation for another time.

I would argue tho that the way we look back at these old desktops, spaces, UI’s is more than just nostalgia. It’s the point in which we really owned our own personality on our computer and had a space to express that with UI. Any type of modern software, especially art software, functions under the premise of maximizing productivity. Even websites today are all about UX to maximize retention, clicks, and interactions.

It’s a type of language that has become almost exploitative in how it treats its users, and I think this is why we love looking back at a simpler time when we had more freedom to just “live” in a virtual space without being milked for it. Flawed UI is comforting because it tells you right off the bat that a human made this, and that you’re not in a "high stakes environment."

So this is where I get into the Electric Zine Maker, and how its UI is being used to make a “low stakes” type environments that people can explore creative impulses in, without feeling any urgency to make something professional.