Inspiration

Lessons for Web Designers, From Game Designers

Web designers, industrial designers, UX designers, and others operate from some of the same principles.

There’s much that’s universal about design across disciplines and applications. Web designers, industrial designers, UX designers, and others operate from some of the same principles.

Sometimes cross-pollination of ideas happens across this disciplines, but sometimes it doesn’t — and that’s too bad, because there’s a lot to learn and apply. Here we’ll look at some of the lessons video game and board game designers have been developing within their own professional silo, and apply them to designing other kinds of interactive experiences like websites and software applications.

Announce changes and iterate

Design of any kind is a language. You have to define the elements of that language to be understood. Game designers know this well.

Game development studio and publisher Blizzard Entertainment is known throughout the games industry for its mastery of this. Games like World of Warcraft and StarCraft are astoundingly complex; achieving true mastery of their hundreds of intertwined systems can take thousands of hours.

But Blizzard’s designers introduce each concept individually, give the player time to master it, and only add on an additional dimension of complexity once the player has demonstrated their mastery. In World of Warcraft, the player usually starts with one, basic ability with which to challenge foes. Skilled use of this ability is required to progress in the game — challenges with possible fail states “check” to make sure the player understands this ability before introducing a second that would further complicate the experience.

This is highly applicable in web and user experience design. Each time a new feature or functionality is presented to the user, make sure they have had the opportunity to process all previously introduced features. Use visual or even concise verbal language to clearly announce new functionality, then give the user a chance to apply it as they proceed.

Pattern recognition is fun

Image from New Collection of Maze Games by deepfuze

In 2004, game design luminary Raph Koster published The Theory of Fun, a seminal book in the field. Rather than try to instruct game designers on the mechanical process of making a good game, Koster asked, “what is the fundamental nature of games, and why are they fun?”

Koster’s widely acclaimed theory identifies games as exercises in pattern recognition, and suggests that their fun factor derives from the process of learning and mastering patterns.

Web designers often talk about the desire to “delight the user,” and fun and delight are closely related. As with a game designer, a web designer is tasked with leading the user through an experience, teaching them what function each element serves. And the goal is to make it engaging, delightful — yes, fun.

When designing a user experience, establish subtle patterns that the user can recognize and master as they navigate and interact with your digital space. This connects closely with the “announce changes and iterate” point as well — as you carefully introduce concepts in your design, let the user enjoy the experience of learning them and mastering them.

This does not mean making obtuse designs. It simply means establishing a clear, easy-to-understand language that can be applied and mastered throughout the user experience.

Motivate your user like an educator

Because interactive applications are learning exercises, game designers draw from educational theory to inform their attempts at optimal design.

Educational psychologist John M. Keller developed one educational theory that is widely applied by game designers, and it can work for other designers too. It’s called the ARCS model — Attention, Relevance, Confidence and Satisfaction. It describes a method for fostering a sense of accomplishment in a student, player, or user.

In ARCS, the sense of accomplishment happens after the student recognizes the relevance of knowledge to their own life and purpose — once this has been established, the student feels a sense of accomplishment at having acquired the knowledge because its value is clear.

Each word in the ARCS acronym is a core component of learner motivation. Attention is self-explanatory; it refers to the willingness of the learner to engage with the material. Establishing relevance is critical because the student is only interested in learning something that they perceive as relevant to their personal experience. Next, the educator or designer ensures that the learner or user experiences positive outcomes as a result of their mastery of the concept — that’s confidence. Satisfaction followers from this sense of confidence that the user has — but only after attention has been maintained and relevance has been established.

You want to maintain users’ attention and make them feel a sense of accomplishment when they perform tasks within your design. ARCS can be an effective model for making sure that happens.

Your user experience is made up of mechanics, dynamics and aesthetics

Like games, websites and applications are interactive experiences. Many game designers use a model called MDA (Mechanics, Dynamics, Aesthetics) to describe how interactivity works. It can just as easily be applied to websites and apps. Each letter in MDA describes a core element of games. Let’s define each.

Mechanics refer to the hard and set, functional rules of the interactive application. These are things like actions availability to the user, basic constraints on their activity, and win/lose conditions or end states.

Dynamics are basically the run-time of an application — they’re the mechanics in motion, including the ways that the application responds to the user’s actions.

Finally, aesthetics are a catch-all for anything that evokes an emotional response or experience in the user, including contextualizations like story or relevancy. This can include eye-wateringly beautiful illustrations, the narrative delivered in the copy or content, or the user’s own self-told story of their experience — that is, “this website frustrates me,” or, “I feel a sense of satisfaction having succeeded at my task on this website.”

When designing a user experience on the web or elsewhere, start out by defining the mechanics — the array of choices available to the user, and the end states in which they may find themselves. Map out the possible dynamics that may occur as a result of these mechanics. Contextualize this map within the aesthetic considerations of content, beauty, or the user’s emotional state.

These are just a few game design concepts that might be useful — there are many more. Consider exploring the free game design talks available in the GDC Vault, or seek out great books about game design for more.


About the Author Samuel Axon

Samuel Axon is a media executive, web producer, and editor with more than 10 years experience building editorial and video content properties at Mashable, CBS, Sprout Social, Samsung, and more.