原作者：Nathalie Lawhead 译者：Willow Wu
在开发Electric Zine Maker（一款杂志制作软件）的过程中，我一直想找个机会来好好谈谈UI，向大家解释为什么要把UI设计当作是创造虚拟世界的一部分，而不是单纯的界面设计工作。
Anatomically Incorrect Dinosaurs这个游戏就有类似的设计：如果你点了最小化，游戏就会开始伤心呼喊，并用一种奇怪的机器人嗓音唱着“宝贝，别伤害我”。这个UI应用方式的有趣点在于开发者将UI视为游戏中的一个实际角色，还给它配了音。它会对你的行动做出反应，比如你拖动窗口，它会发出玩滑滑梯时的欢呼声。如果你退出游戏，它会生气。在完全退出前还会跟你告别。
这种方法能获得相当不错的效果，我用好几次。与Anatomically Incorrect Dinosaurs类似，ARMAGAD（PC版的Tetrageddon)也使用了这种UI设计方式。但ARMAGAD没有那么明显，可以说你得费些心思才能发现。UI就像是个叙事者一样，讲述你的行为。ARMAGAD就是游戏中隐形的上帝角色。当你帮助Cybermonkey逃跑时，ARMAGAD会进行“现场解说”，就感觉像游戏自己也在玩一样。
在某些情况下，UI本身也可以成为游戏。就比如Electric File Monitor，一款伪软件，它自称是“为你的电脑打造的监狱监管系统”。它会扫描你的电脑文件，随机指控某个文件为危险对象。
举一个具体的例子——我的Electric Zine Maker网站。在许多页面中，UI具有物理特性并会受到重力的影响。你可以把东西扔来扔去，或者是打碎。
Everything is going to be OK这个游戏是我的最新“实验”，真正深入地探索了利用UI唤起人们情感的各种方式。
Everything is going to be OK是一款围绕着生活小片段构建的游戏，一个非常私人化的游戏。这样使用UI是有原因的，是为了传递某些信息。
Anatomically Incorrect Dinosaurs会在结局时自己关闭。它给你呈现一个随机的猎奇视频，然后“拜拜”，窗口关闭。你会有一种空虚感，就像你在进行一场狂野的旅行，却无法控制其中的任何一部分。
Everything is going to be OK也有很多类似的情况。当你玩到结尾时，游戏会自动关闭。有一个象棋环节，你可以直接移动棋子“吃掉”国王或者女王，但是人们通常还是会按照普通象棋那样玩。他们要花上一些时间才意识到这个世界并不需要按照他们所想的规则进行互动，人们恍然大悟的反应总是很有趣。
在Everything is going to be OK中，我通过这种方式增加了一种身处炽热之梦、失控的感觉，并且游戏充满了猎奇的幽默元素。
用“真实环境”替代普通的用户界面，这样的例子不止一个。再比如3DNA、Microsoft Encarta的Mind Maze，早期的寓教于乐软件经常这么干。试图改进某些东西与多此一举之间的界线是一个灰色地带，审视这些失败案例、理解其中的原因是非常有意义的。你可以去toastytech.com看看，那里有非常丰富的档案记录。
所以这就是为什么我要做Electric Zine Maker，利用UI来创建一个“低标准”的环境。人们可以在这里释放创造、探索天性，不会给你一种莫名的压迫感，暗示着你必须要利用这个工具做出专业性的产品。
Electric Zine Maker是一个电子杂志创作工具，目的是让创作者在无压力的环境下制作杂志。你一看就知道这是个低标准环境。因为这界面太蠢萌了，就算你瞎涂鸦也不会跟其它部分形成鲜明对比，从而造成压力。你不擅长画画没关系，画个火柴人也没关系。
我故意把Electric Zine Maker的UI设计得很夸张，让所有东西看起来都很傻、布局很好玩。界面角落还有一个大土豆，能给你带来积极的帮助，它就像是微软的那个大眼曲别针。背景会有一只金鱼悠闲地游来游去，你问为什么？有宠物、动物或者其它类似的东西能给人们带来舒适感，所以为什么不加只金鱼呢，多可爱啊。
Electric Zine Maker的设计灵感来自于卡通。正如你所见，这个工具所有的UI互动元素都是动画。我没有参考其它好玩的UI素材，我之前在迪斯尼工作过，所以我从那段经历中汲取灵感。我做过很多类似的UI，卡通画风通常包括许多倾斜的、不对称的形状。最重要的是有一套自己的风格设计规则，并坚持下去，这样就不会让人觉得过于随性，而是一种独特的趣味。
就比如The Incredible Toon Machine，我觉得一定得讲讲这个游戏。
UI方面，The Incredible Toon Machine的色彩很丰富。一样也是很蠢萌、趣味十足。这是一个非常值得学习借鉴的游戏。
另外一个游戏是Mario Paint。我一般不会赞扬任天堂，因为我觉得他们的游戏设计主导性太强。各种主机游戏已经被剖析得很彻底了，但是Mario Paint是一个很奇怪的游戏，我觉得值得分析分析。
Mario Paint有个印章工具，你可以自定义印章图案。大部分艺术设计软件都有这个功能，Dabbler 2（一款面向儿童的电脑绘画软件）也是。早年的艺术设计软件有点像是让人们“发明”工具，而不是试图完全模仿现实，这很有意思。你可以完全不管那面让你懵逼的工具墙，直到你真正开始用它们创作，这些功能才是有存在意义的。
Kai’s Power Goo就是一个极好的例子，它的界面设计非常棒。像这样的设计如果不是在电脑环境中就完全没有意义了。这些工具都很古怪，几乎没有任何实际用处，但开发者找到了一个可以大展拳脚的地方。那个Goo功能应该是大家最为熟知的了，简而言之就是把图片扭曲，跟现在Photoshop的液化效果有些相似。想象一下，把一张照片当作粘土来使用，扭曲拉扯，这种效果就是Goo。Kai’s Power Goo值得研究的地方不仅仅是UI，还有工具的设计。
Electric Zine Maker UI和工具设计是相辅相成。Zine Maker的某些工具非常魔幻，真实世界里没有这样的东西，其它艺术设计软件里也没有。你需要探索一番，发现它们的用途。
The Smoosh Zone是致敬Kai’s Power Goo的而设计的功能。
Glass Stamps能够扭曲效果。你可以尝试把大小值到500，选择“draw” ，把鼠标移到作品上你就能看到扭曲的即时效果，得到满意的效果时按下鼠标就行了，非常有趣。
Electric Zine Maker中的许多工具都有自己的独立界面，你可以在这调整数值和选项。每个界面都是单独设计的，并非共用一个设计模板。这种界面与界面之间的不同，目的是让用户在使用不同工具时像进入了不同的空间，唤起一种探索的欲望。就跟鼓励人们画点什么一样，激发探索、发现的欲望也是很重要的。
我近期的大部分工作都是在避免称之为“游戏”的前提下进行的，但就Electric Zine Maker而言，我更倾向于将它视为一款游戏，
当我在LA Zine Fest的Playdate活动上展示Electric Zine Maker时，我很惊讶它能获得这么热烈的反响。路过的人们看到它总会说“我的天啊，这太可爱了吧……”丰富的色彩、可爱的动画，所有这些都吸引着人们。它的界面充满活力，而不是冷酷的科技感。
尝试Electric Zine Maker的人最终都不可自拔地陷入了其中。有些人一玩就是20多分钟。这也是我头一次看到不同年龄段的人都喜欢我做的东西。但年龄对我来说并不重要。
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 UI resources thread:
Favorite old UI resources on the internet:https://t.co/ec31LFAUoC
— Nathalie Lawhead (@alienmelon) July 29, 2017
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.
Art tools today are very polished, very productive environments. A lot of work goes into streamlining the process of whatever art it’s intended to specialize in. If you enter Photoshop, you are IN an art tool that’s meant to make money, and make professional art in. I think when you’re in these spaces there’s always a feeling that you have to be “good at it” and make something notable. There’s the looming feeling of productivity always hovering. Don’t dare draw a stick figure. It’s not meant for that!
This can be intimidating to people that just want to make something goofy. A large amount of people want to make art without being reminded that it has to be “Good Art,” so this is a space to create with UI and design decisions.
The Electric Zine Maker is a zine creating tool meant to make Zine Making as non-intimidating and approachable as possible. It’s low stakes right off the bat. Because it looks so silly, and goofy, it’s not going to judge you for drawing a dick in it. It’s not going to judge you for drawing stick figures. It’s ok to not be good at something, and even just do dumb shit.
I think it’s REALLY important to lower the stakes when designing a tool that’s meant to draw in people who might be skeptical of even just TRYING to make something. You have to re-assure them that it’s ok not to be good at it. Being creative doesn’t mean you have to be a professional genius at it. It’s good to be bad.
The UI of the Electric Zine Maker is intentionally big. Things look goofy, and the layout is very playful. There’s a potato in the corner to positively reinforce you. It acts a bit like clippy by being a tooltip. Goldfish are floating in the background because why not. Having some elements of pets, animals, or whatever else can be comforting. It’s charming.
I think if you’re building an environment like this, color is very important. Granted, I exaggerate with my use of it and in this case it’s more of a personal decision rather than intentional, BUT you should strongly consider some level of color use when building a UI that communicates low stakes.
The design inspiration for the Electric Zine Maker was “cartoon”. You’ll notice that when you interact with it literally every element in the UI is animated. Unfortunately I didn’t use any interesting UI specific references for it. I drew from the work I did when working at Disney. I did a lot of UI work like this way back. Cartoon aesthetic typically involves a lot of slanted, non symmetric shapes. The most important thing is to come up with your own style-guide and stick to it so it’s not TOO random, but just enough to convey a sense of playfulness.
A lot of people compare the Zine Maker to old edutainment software, and I think it’s rightfully so. Edutainment is probably one of the biggest places where people take UI risks, and give “goofyness” precedence over usability. Kids love color. You need to make the environment silly and imaginative in order to maintain that attention.
(there are good screenshots of it on the myabandonware site)
For example, The Incredible Toon Machine is something I feel like REALLY needs to be talked about more.
This game was simply brilliant. I’m still blown away by it and how complex it was. As a game, I think it did a very interesting job at kind of subverting design. Kind of in line with the game doesn’t have rules, you make your own. Build your own environment in it and watch things react. This led to a lot of interesting creation in it.
UI wise, The Incredible Toon Machine is very colorful. Very goofy. Very playful. The sense you got from being in it was fun. It’s a title worth looking into.
Another one I think that’s important to look into is Mario Paint. I’m typically not one to strongly praise Nintendo since I feel like their games dominate too much of the design discussion. Overall, console games are given too much analysis in my opinion, but Mario Paint was a weird one that I feel like deserves analysis for how bizarre it was.
This one was a painting program. It was silly, and made noise when you painted. Most tools actually “took time” to happen. For example, the paintbucket tool had to animate. It made kind of a paint pouring sound as you watched and waited for the color to fill in. The tools for making art in it were fairly strange. Aside from that it had some bizzare tangents. Like there was a fly swatting game in which you swatted flies. The types of bugs kept getting bigger and bigger until you fought the “big bug”.
The music creation program in it was fairly silly too. UI reinforced the goofiness throughout. It was playful and cartoon-like with lots of color. You should look into it! It’s worth deconstructing.
In terms of tools, I think these old programs make some interesting functional decisions that we don’t really see in modern art tools.
Mario Paint had a stamp feature, and you could create custom stamps for it. Most older art programs had this. Dabbler 2 had a stamp feature too. I think it’s fascinating how old art programs kind of “invented” tools, rather than completely trying to imitate reality. You could get these completely off the wall features that you weren’t sure how to use until you actually started making art in them, then they kind of made sense.
Before we started to imitate “real world” art tools (like chalk, pencil, watercolor, and textures) we had experimental computer inspired tools. Things only made possible under the premise of a digital environment.
A very good example of this is Kai’s Power Goo. The interface design of Kai’s Power Goo (and the other tools) was amazing. Something like this would never make sense if you didn’t have the context of “computer”. These tools were bizarre, eccentric, almost not usable, but you found a place for them. The Goo one is probably the most famous example. Basically you could smudge and distort things. Imagine using a photo as if it was clay. Kai is worth looking into not only for the interface design, but for the type of tools.
Make tools that reject mediums that happen in the “real world” and can only exist in the virtual. Tools that don’t imitate anything but invent themselves, and exist as something of their own. See also, BECOME A GREAT ARTIST IN JUST 10 SECONDS.
So that was a lot of ground to cover, but both the UI AND the tool design of the Electric Zine Maker go hand in hand. Some of the tools in the Zine Maker are completely virtual. They don’t exist in the real world, or in other art programs. They are something you explore and discover uses for.
There’s a throwback to Kai’s Power Goo called The Smoosh Zone that lets you smoosh photos. You can also make all your smooshing “run together” by clicking a button. This essentially makes all the colors run into eachother based on your smooshes (as texture).
The Color Factory features all sorts of strange color manipulation, like Convolution or RGB shifting. You can even make your art into ASCII art. The Displacerizer lets you import images and layer it over your art. Like you could use ASCII art as a displacement map for your art. So at this point you’re coming up with ways to use all these strange things together to make strange art.
The Glass Stamps tool lets you stamp distortion. If you wanted to you could set the size value to 500, select the “draw” option, and run it over your art. This makes a really interesting “flying into your art” effect, so you’re watching these distortions happen in real time and you can stop at any point and use what you stopped at.
There’s A LOT to this.
Many tools in the Electric Zine Maker come with their own interface where you can manage values and settings. Each interface is custom and looks different. The interface design here is intentionally “different” to make each tool kind of like a different space that you are entering. It’s meant to evoke a feeling of exploration.
It’s just as much about exploring, and discovering, as it is about just drawing something.
A lot of the work I have been doing lately was created under the premise of avoiding calling it a “game”, but in case of the Electric Zine Maker, I’m very much viewing it as a game.
It’s meant to be a game. The same way as you build in something like Minecraft, and figure out all these combinations for building objects, you discover tools in the Zine Maker and figure out how to combine them to create effects. That’s the premise of all the tools being added.
When I was showing the Electric Zine Maker at Playdate during the LA Zine fest it surprised me how effective this all was! People passing by would see it and say “oh my god this is adorable…” (the phrase was used often). It looks inviting. It’s colorful, and acting cute. All this draws people in. It’s disarming on the surface.
As they interacted with it, they ended up getting really involved. Some people spent 20+ minutes with it.
This was also the first time that I saw both very young people, and very old people enjoying something I made. The age didn’t seem to matter.
One older lady was very skeptical when she sat down to play with it since she didn’t feel very inspired, and thought she wasn’t going to be good at it. She ended up spending a very long time making art using just the smugger. Her comment was that it was surprisingly therapeutic. So I think I accomplished doing what I wanted to do with it. Make a tool that’s inviting, and encourages low stakes art making.
All these elements work surprisingly well together. I think when you’re setting out to do UI work, it’s important to have a concrete goal. In every case that I mentioned, I had one. Ask yourself what you would like your UI to communicate about your game and REALLY theme it around that. Try not to make UI separate from the game, but REALLY make it part of the game, so much so that it’s hard to know where it begins and where it ends.
What I would hope this post encourages is to stop viewing UI as something boring. It’s important to view it as a creative thing, and question your approach to it. View UI as a living, breathing, environment that you are building.
UI is part of the world that you are designing!