At the push of a button, your monitor flickers alive. Your computer’s “desktop” comes into view; a series of images, bars, buttons, text, and colors.
You grab your so-called mouse, that is neither animal nor particularly mouse-shaped, and pull it across the table. In tandem, an arrow image on the screen imitates your hand’s path, flowing across the sea of colors before you.
Once the arrow hovers over a single small image amidst a grid of other small images, you deftly press a button on the mouse twice in quick succession. A most secret maneuver known as the “double click”. The small image gains and loses a colored border in response. Grey fills the screen, save for a blue-accented box in the center with the words “Microsoft Word”.
Before long, the screen takes on the appearance of faux-paper, with text written on it. You get to work, clacking on buttons upon a board of keys before you, a keyboard — if you will, and further letters pop into existence on the faux-paper.
How We Interface with Machines
Everything in the tale above is based on a true story. It may be mine, or it could be yours.
The acts taken therein were those of a person interacting with a magic box tricked into thinking using lightning trapped in sand. Said person may be called a “User” of the magic box, and the things they interacted with — an “Interface”.
This is the first in a series of blog posts about User Interfaces — The Concepts, Technical Approaches, Tips and Tricks, and more.
Inter-post links will appear here as they come.
Ok, Enough of That
Having suffered through that wall of text above, let’s get straight to it: User Interfaces.
What is a User Interface (UI)? I mean, it seems like an easily answered question, but really — we tend to take our individual insights and distinctions for granted, so let’s explore that.
Oxford Dictionary defines it as:
Thank you for visiting Oxford English Dictionary
To continue reading, please sign in below or purchase a subscription.
(I’m sorry Philosophy Tube, please don’t tell Hbomberguy)
Meanwhile, Merriam-Webster notes it as:
“Software that is designed to allow a computer user to interact with the operating system of a machine or system (such as by selecting presented options or entering text commands)”
So then, which is it?
Of the aforementioned definitions, they have “user"s (which we assume to be people, but maybe not sometimes. Think: games for cats), "computer"s, and "interaction"s in common. From these we can glean that computers are key due to their general compute capabilities requiring some way to facilitate interactions, and User + Interaction are required because they make up the initialism for "UI” (almost).
Generally, interfaces for non-general-computer machines are better known as Human-Machine Interfaces (HMI) and are out of scope for our topic.
Personally, I’m a fan of the more vague definition of:
“A system to facilitate interactions between a user and resources within a general computer.”
This keeps us from tying it down to an operating system per-say; although, that is a whole philosophical debate I don’t want to get into.
Graphical User Interfaces
All of that said, when we say UI — colloquially — there’s a more specific brand of UI we tend to think of: Graphical User Interfaces (GUI). Ones with images and a multitude of colors to them, in addition to text.
Not all UIs must have a graphical component to them. There are Text-based User Interfaces (TUIs) as well as Voice-User Interfaces (VUIs), to name just two.
For the remainder of this post, when I mention UIs, Graphical interfaces are the type being referred to.
Why
Why write about UI? Why define it? What do we gain?
First, a bit about myself — why do I have any interest in this?
Who am I?
I am a UI programmer by trade, and have been for (coming on) 8 years as of writing this post.
My start was in hobby web development as a kid, initially aiming to create my own animation software because I wanted to be an animator, but software licenses were too expensive. That hubris, right? It never happened of course.
Then I went to college for game development (do not recommend), where I made plenty of games and tools for games.
After college, I had a brief period of contributing to web tool frontends for an indie game project before getting lucky and landing a role in UI for games — a role I’ve happily stayed in since, although with different companies and projects.
Evidently, I have a vested interest in UI. Even beyond games; application and tool GUIs are topics I’m involved with and invested in. I’m a proponent of better accessibility, improved User Experiences (UX), more creativity in game and app GUIs, and less exploitation.
What I am not: I’m not a designer — I understand design principles and can make very basic designs at best. I took art and design classes all throughout my schooling, originally wanted to be an animator, etc. While I may have opinions on certain design approaches, I am severely lacking the practiced eye of a good designer. That’s worth acknowledging.
What’s There to Know
In challenging our core assumptions about the definition of UI, we expose our biases.
It’s not uncommon to assume UI is only ever Graphical — what possibilities are we leaving on the table by doing so? Who are we leaving out? There may be methodologies, concepts, and design principles that other domains of UI have that could be gleaned by recognizing their existence.
It also helps us to focus our goals.
By defining our UI in terms of Users and Resources, there is a clear objective to work towards and optimize. Who is the user? What resources? What is the best way to expose those resources to the user?
Continually asking these questions will help refine the experience for the better, and better define the problem space you’re working in. Other priorities may get in the way at times, but so long as these considerations remain at the core of your interfaces, you’ll have a better system for it.
On User Experience
On that note, there’s a common misconception, especially at game companies, that UI and UX are the same thing.
UX stands for User Experience.
User Experience encompasses the interaction flow of the user: the amount of friction experienced at any time during use of your software. This extends beyond the GUI of your application into other things like the operating system interaction, file system interaction, login / identification flow, portability, consistency, accessibility, platform-specific conventions, etc. In games, it includes game system flow, tutorialization, control schemes, and non-UI accessibility as well.
UI design is a critical concern of UX, but they are not the same thing. UI design may be independent of many aspects of UX; in fact, it’s not unheard of for UI designs to be conceived without any consideration for UX — like screens being inconsistent with one-another because it makes the individual design better, at the expense of the overall User Experience.
And that’s all I will say on that~
More to Come
It’s a common refrain that UI development sucks, both in gamedev and in webdev. I have my opinions on why this may be, which will be explored in later posts.
Along with that, with an understanding of what UI is and is not, we can delve further into the “Why"s and "How"s — exploring methodologies for creating UIs, investigating different systems (mostly from games), and consider some approaches to make UI development less cumbersome.
Having been on various types of projects and teams, experiencing different problem domains and solutions to them: there is so much to learn about in the realm of UI.
UI sits perfectly at the crossroads of fulfilling visual creativity, people pleasing, and puzzling technical challenges.
I hope you all look forward to it, thank you for reading thus far~