A couple of months ago I started in earnest on a project that I was calling UI Sex Game at the time, but then became It is as if you were making love. As per the the MDMA process, I started the requisite code repository in late March, including a design journal and so on, and I wrote an introductory post about it back in early May. It’s been a sporadic process thanks to the fact I was teaching, travelled to Yellowknife to run a workshop, made b r 1, and went to Naples for a wedding. However, I’m back in the saddle with it and wanted to write a short piece about a specific element of the game’s design and development: its aesthetics.
It is as if you were making love started out life as just a slider on a webpage. In that incarnation I was focused on having a very smooth experience with minimalist graphical flourishes, so the slider was just a gradient-filled round handle on a slender bar.
I was preoccupied at that time with my understanding of the game as futuristic, because it’s a part of the larger Speculative Play project I work on with my colleagues Rilla Khaled and Chris Moore. In that project we make playful, interactive experiences that reflect on alternate presents and possible futures, so this game is meant to come from a future where physical sexual intimacy has been ‘deprecated’ (too icky? too personal?). However, humans still want some sense of giving erotic pleasure to someone else, and so this application exists to provide that service: you give pleasure to a computer (or at least the software running on it). As an application from the future, I immediately jumped toward the idea that it would have a very slick interface, though I did end up making the concession of having some instructional text to avoid total confusion.
However, in this clean and minimalist iteration of the game, I struggled to do the actual design work necessary to make progress - I was perpetually stuck with the basic idea that you needed to slide the slider’s knob across a range of values repeatedly, but couldn’t get further with that. Contrary to any ideas that might still float around about aesthetics (visual and other) being secondary to mechanics/rules, this design quandary was very much coming from the visuals of the game. In going with this very clean UI, I was implying qualities of the underlying interactions one would have with it - they would be sophisticated, with that sophistication lying beneath the surface, they would not be funny. The implication of underlying complexity really got me - by having so little UI to guide the experience, I was putting myself in the position of needing to develop subtle methods to communicate the ‘pleasure’ the UI was receiving, how well the player was performing, and so on. It very much led me into panicky cycles of thinking about how to develop an intricate system that would simulate the underlying arousal of the UI. The implication of seriousness is a huge problem too, of course, given that I generally prefer to make work that is comic.
The ‘solution’ to these problems wasn’t some kind of clever systems-thinking or better writing and better minimalist UI, it was to shift the styling and layout of the interface entirely. To Windows 3.1/95. Again. Because I had run into exactly this set of problems before when I was developing It is as if you were doing work. In that game, too, I started with a slick and futuristic UI only to realise that it was holding me back from the comic element that (I think) good critical design needs. Switching from its minimal UI to the Windows 3.1/95 styling unlocked the personality of the application and allowed me to move ahead with design. So I renamed the sex game from UI Sex Game (working title only of course) to It is as if you were making love at that point, and edited the CSS until it looked more Windows-y.
This change is clearly minor in terms of function: in fact it’s exactly the same, but it gave permission to think differently about the project and had underlying implicationsabout appropriate design moves. Notably, it made the game a kind of sequel to It is as if you were doing work and therefore put it into a related space of half-serious half-comedy play, a much better fit for a sex game in particular, I think. And in fact the visuals themselves did some design work for me: in this new format, it didn’t make sense (to me) to have a slider that moved smoothly and continuously between values. Given the ‘pips’ marking the Windows-style sliders, I shifted to a slider that ‘clicked’ between the different values, leading to a ever-so-slightly clumsier experience of using it. Another way to deflate any heightened expectations or claims of idealised sexiness.
Moving forward with this new narrative context implied by the UI visuals, I realised that to fit properly with the Work game and with Windows aesthetics, this game shouldn’t be presented as a single-page web-app, but rather should be implied to be an application running on the phone (or PC), so I put the interface elements into a window to capture that idea.
As you can see, the instructional text (placeholder flavour text in that image) is now in one of those non-editable text boxes complete with beveling etc., and I’ve added a progress bar. Putting the interface into an application window drove those decisions, because it immediately needed to look more ‘application-y’ that it did with just a slider and plain text. The progress bar, in particular, began to feel like a good direction because the aesthetics were making me ask more and more ‘how would 90’s Microsoft design the UI and feedback process for this sex game?’, my own personal WWJD. This kind of interface feels like it would be much more direct and obvious about registering how the sex is going - it would just tell you. Again, the visuals drove the design.
The game isn’t finished yet, but the current UI layout now includes a split between the idea of instructions of how to use the slider (what to set it to) and the output of the system in terms of how it’s feeling and any more subtle things it wants (speed of input is going to be a thing). Again, following the lead of the aesthetics, I added labels to the different elements to be even more explicit about what each component is for, while maintaining a kind of neutral ‘computer interface language’ about it all. (That placeholder text in the ‘output’ field has to go, for example - language is a big next question for the project.)
I guess that concludes my little tour through the aesthetic history of It is as if you were making love to date. It’s not impossible I’ll change everything again, but I doubt it - the change to the Windows visuals just feels right and has opened up a particular framing of the design that I find pleasing, funny, and workable. It’s a gift that keeps on giving, too - for instance, in thinking about how to integrate sound into the project, the obvious answer is (again as with It is as if you were doing work) to use Microsoft system sounds.
There is joy to be found is asking yourself how to best use the Microsoft ‘ding’ in a sexy way…