Magic the Gathering and UI Design
What we can learn from Mark Rosewater's 20 lessons.
Here at Space Ape we have this great thing called Lunchtime Talks, a weekly event that happens during lunchtime (obviously) in the kitchen, where we watch GDC Talks or any other interesting or relevant video. This week the chosen talk was Twenty years, Twenty lessons by Mark Rosewater, the Head Designer for Magic the Gathering.
The talk is really good and I highly recommend any aspiring game designer to watch it, but what really caught my attention was how well Mark's 20 lessons translated to UI Design for games. That's not a surprise, though, as UI Design and Game Design often cross paths and walk hand-in-hand for a few miles before parting ways, and these lessons definitely represent those moments of intersection. So without further ado, here are the 20 lessons, and some of the notes I took about how to translate them to UI Design:
Fighting against human nature is a losing battle
Humans are stubborn, and when it comes to interacting with digital interfaces, it shows. If a button looks tappable we'll tap it, but more than that, we'll expect it to do something , and when it doesn't we just get angry at our failed expectations. Mark Rosewater says:
Don't change your player to match your game. Change your game to match your players.
So, change the UI, don't try to change the user!
Aesthetics Matter
We designers know this: it surely does. More than just looking great, or being easy to use, interfaces need to feel good. This is particularly critical in games, where that element of magic; that je ne sais quoi that we as players can't quite pinpoint; makes a huge difference. And this is where the principles we learn as soon as we start studying design really come in handy: Symmetry, Pattern Completion, Continuity, Contrast, Balance, etc.
Resonance is important
Mark Rosewater makes a pretty great point when he says:
Humans come preloaded. Designers don't have to start from scratch, the audience already has preexisting emotional responses that the game designer can build upon.
Replace "game designer" for "UI designer" and the sentence is still valid. We constantly have to think about how things will be perceived by our users, based on their existing behaviour, biases and cultural differences. Their existing emotional response to certain things (be it In App Purchases, the perceived time it takes to upgrade a building, etc) based on their experiences with other games can, and certainly does shape how we think about our designs.
Make use of piggybacking
Piggybacking in this context means using the flavour, the context, the lore of the game to support your mechanics. In the UI, this can be noticed in areas like iconography, illustration, and the names of things. Sometimes, trying to stay in-brand might harm the user's experience, making things harder and more frustrating to find. Finding the right balance between flavour and usability can be tough but it pays off. We can use the user's existing knowledge to our advantage.
Don’t confuse “interesting” with “fun”
To put it simply, don't confuse beautiful design with usability. Sometimes we get carried away looking at amazing dribbble shots, or gorgeous simple UI from a game that's drastically different from ours, but in the end, what needs to happen is testing, gathering feedback and doing the right thing for the users.
Understand what emotion your game is trying to evoke
Everything in the game has to contribute to the emotional output you're trying to create. If not, it has to go.
Some flavour and fluff can be very important to set up the context and feel of the UI we're trying to create. I'm talking about frills, effects, icons, illustrations. But if it's getting in the way of learning / using, or if it doesn't objectively contribute to the enjoyment of that interaction, it has to go.
Allow the player the ability to make the game personal
Customisation is very important when trying to create an emotional connection between the player and the game. In UI design, this can be considered in the language and accessibility settings, dashboard customisation, notifications, and the possibility to choose the name and symbol for things like guilds, or alliances and kingdoms.
The details are where the players fall in love with the game
The best example of this in the UI design context would be micro copy, even though there are others. These small quips used as feedback for interactions have the power to change how the user perceives a brand. Slack is great at this, so is MailChimp, for example. We do something similar in our Transformers: Earth Wars game, displaying some great one-liners from the bots in form of comic book speech bubbles. This is a great nod to the original Transformers humour, and hardcore fans will absolutely love it, even though it's just flavour text.
Allow your players to have a sense of ownership
More than just customising, players want to feel like they own the brand, like they are part of it, and that they are the active subjects of the game, not just a passive user waiting for content. We could say this sense of ownership translates to a sense of empowerment when put in a UI design context. Users need to feel empowered to do what they want to do, even when we are actually guiding them and pointing them in the right direction.
Leave room for the player to explore
With customisation and empowerment, we give players the opportunity to express themselves, even if just a little. But some things are unexpected, and emergent interactions and expressions can come in unpredictable ways. And we as designers need to learn when to avoid that, and when to embrace it! This ties in with the sense of empowered mentioned in the previous point: players may want to feel like they discovered things, like they initiated it, and we need to take that into account when designing, for example, the interface for a tutorial.
If everyone likes your game, but no one loves it, it will fail
This is where the similarities between game design and UI design can diverge. UI design needs to be as universally accepted and easy to understand as possible, so there's not much room for such a disparity in the user's perception. But when it comes to Product Owners, this may be true. Some PO's will love the designs we're doing. Some will hate it. If we please everyone, we might be walking the safest path, but we know for sure we're not gonna be doing anything groundbreaking…
Don’t design to prove you can do something
Just don't. Well maybe sometimes do, we all need exciting new things, but mostly listen to your users' feedback, test early, use the knowledge you already have and don't design just to prove you can do something.
Make the fun part also the correct strategy to win
The happy path is the default scenario of interaction with any interface, featuring no errors or exceptions. So, make the happy path fun! In our case, that represents all the interactions a user needs to go through to play the core loop of our games. Whatever that is, it needs to be easy to understand, frictionless, and obviously, fun!
Don’t be afraid to be blunt
There's a time when all you need is a label telling the player what to do or a button with the most obvious copy ever. Beautiful, minimalistic design is great, but sometimes your meticulously designed icon is just not gonna cut it, so be blunt and stick a label there.
Design the component for the audience it’s intended for
The original point was that different players have different playing profiles, and a game should cater to all of them in different ways, and not try to cater to all of them at once. The same thing is valid for UI design. There are different types of user, and when it comes to designing interfaces for games, we need to take the player's background into consideration. Do they play strategy games? Do they only play Candy Crush? Have they ever played a racing game? We can't design for all of them at once.
Be more afraid of boring your players than challenging them
Another lesson that doesn't apply to our users, but does apply to our Product Owners. We are definitely more afraid of boring our PO than challenging them. Sometimes the best design decisions will be controversial and that's fine. That's why we make good use of prototyping tools like Balsamiq and Principle to hack our way into product people's heads. Showing something is way better than describing it, and even the most controversial decisions make sense once you actually interact with them.
You don’t have to change much to change everything
Sometimes minor things like the font size of a label, the colour of a button or the design of an icon seem to be unimportant, but far from it, they can change the way the user interacts with a particular screen.
Restrictions breed creativity
Working with limitations in design can be challenging, but restrictions do breed creativity, and a limited colour palette, screen size or even theme can push designers to do their best work. We constantly worry about performance, for example, because games need to have an acceptable frame rate. This requires some creative thinking about how to structure screens and how to create assets.
Your audience is good at recognising problems and bad at solving them
Users are great for providing feedback! User testing is a very important part of the design process here at Space Ape, and listening to what the users have to say is always a great source of inspiration (and sometimes confusion). But users don't know the solutions to our problems. They don't know our limitations, our budget, our time, and they don't know our future plans. But they do know when something is wrong. So, test! Test, test, test! But take everything with a grain of salt.
All the lessons connect
Finally, a holistic approach to design cares about the user's background, emotional motivation, psychological profile and testing feedback. Everything is connected and leads to a better product in the end.
Hi, I’m Lissa. I play games, push pixels and write sometimes. I'm also a crazy-happy UI Designer working for the awesome studio Space Ape Games. If you liked this article, please ❤ below and follow me! I promise I’m cool.
