loading...

What Web Designers Can Learn from Game Designers

merrickherbert profile image Herbert Merrick ・5 min read

There’s a lot that is universal about design among various applications and disciplines. Web designers, UX designers, industrial designers, and others use common principles in their work. At times, we can even see ideas cross-pollinating across these disciplines. However, sometimes sharing doesn’t happen. This is not only unfortunate but a mistake - there are so many things that can be mutually learned and applied!
Although web design seems to be a rather narrow area, the truth is more complex. The video game industry is one of the most successful and monetized industries in the world. Designers that create video games can grab a player’s attention and have them play it many hours non-stop. When it comes to websites, web designers want to achieve a similar effect – they want to attract the visitor and then lead them down the sales funnel until they convert into a paying customer. Although websites and video games are entirely different things, there are a lot of lessons a web designer can learn from game designers. Many website design firms today are looking for more creative ways to build successful websites that can provide incredible user experiences to their visitors. Applying some ideas and even techniques from the video game domain has proven to be one of the most effective tendencies during the last few years.
In this article, we are going to look at some of the things video game designers have been doing within their professional niche, and then see how they can be applied to web design and more.

Preliminary Notification of Changes and Further Iteration

Design is a language. You have to determine the components of that language so others can understand you. No one knows this fact better than game designers.
For example, the famous game publisher and development studio Blizzard Entertainment is known throughout the video game industry for its ability to use its game design language. Hit games like StarCraft and World of Warcraft (WoW) are incredibly complex, and it may take hundreds if not thousands of hours to achieve true comprehension of their twisted systems.
However, Blizzard’s designers introduce each concept separately, provide the player with enough time to master it, and add the complexity dimension only when the player has shown their mastery. For instance, in WoW, the player normally starts with one primary ability to challenge their enemies. To progress in the game, the player has to learn to use this ability skillfully, as challenges appear to make certain the player comprehends this ability before introducing a second one that makes the experience more complex.
This approach is highly applicable to web design. Every time a new functionality or feature is presented to the user, it’s necessary to make certain they’ve had the chance to take in all the features that were introduced previously. Consider using visual or even brief verbal language to notify about the new feature. Then, allow the visitor to apply this feature as they progress through the website.

Pattern Recognition Is Awesome

Back in 2004, game design superstar Raph Koster published a book named The Theory of Fun. Instead of trying to teach game designers about the mechanical process of creating a good game, Koster asked them, “what is the fundamental nature of games, and why are they fun?”
Koster devised a widely acclaimed theory that classifies games as pattern recognition exercises and further suggests that their fun factor stems from the process of learning and understanding patterns.
Web designers frequently say that they want to “thrill the user,”. Fun and thrill are closely related terms. Like a game designer, a web designer has to lead the user through an experience, teaching them what each function does and means. The goal is to make this process engaging, thrilling, and fun.
When creating a website, designers should establish delicate patterns that can be recognized by the user, who can then master them while navigating and interacting with the site. It is closely related to the point described previously as well: while thoroughly introducing concepts in the website, designers should let the user relish in the experience of learning and mastering them.
It doesn’t mean that designs have to be obtuse. Instead, the design should be able to set up a clear, understandable language that can be applied throughout the website.

Users Need to Be Motivated

Since interactive applications are essentially learning exercises, video game designers take advantage of the educational theory to try and create optimal designs.
Back in the day, educational psychologist John M. Keller devised an educational theory that is used by many game designers all over the world. This theory can work for web designers as well. It is known as the ARCS model, which stands for Attention, Relevance, Confidence, and Satisfaction. The theory describes a method for promoting a sense of completion in a player, student, or user.
In the ARCS model, the sense of completion emerges after the student understands the relevance of knowledge to their life and goals. After this is settled, the student feels a sense of completion at having obtained the knowledge, since he or she sees its value.
Every word in the ARCS acronym is crucial for the motivation of a learner. Attention is obvious: it refers to the readiness of the learner to check out the material. Setting up relevance is crucial since the student only wants to learn something that they deem relevant to their life and individual experience. The designer then makes certain that the user has positive results after mastering the concept, which leads to confidence. Satisfaction stems from this feeling of confidence, but only after attention has been sustained, and relevance has been settled.
As a web designer, you want to keep website visitors’ attention and make them feel some accomplishment when they surf the site and perform various tasks. The ARCS model can be an effective tool for making certain that your end-user feels accomplished and like they have completed something.

Mechanics, Dynamics, and Aesthetics

Similar to games, websites are essentially interactive experiences. A lot of game designers employ a model known as MDA, which stands for “Mechanics, Dynamics, Aesthetics,” to describe interactive functions. This concept may also be successfully used on websites. Each letter of the MDA model describes a crucial game element. So, let’s define each of them.
Mechanics refer to the functional rules of the interactive application. These are things like actions available to the user, basic restrictions on their activity, and conditions for failure or victory.
Dynamics essentially refers to the application’s run-time. They are the mechanics in motion, including the ways that the application reacts to actions performed by the user.
Aesthetics are an all-encompassing concept for anything that elicits an emotional experience or response in the user, including such concepts as relevance or story. In web design, this may include highly emotional illustrations, the narrative delivered in the content or copy, or the user’s own story of their experience. These might include reflections such as “this website annoys me,” or, “I’m feeling satisfied that I accomplished what I wanted to on this site.”

Conclusion

When designing a website, the very first thing you should do is define the mechanics. What are the choices that the user will be able to access? What are the end states in which the user might find themselves? Try mapping out potential dynamics that could stem from these mechanics. Then, contextualize the map you’ve created within the aesthetics of your site’s content and appearance. Of course, don’t forget about the emotional state of the user.
Indeed, the video game industry is incredibly vast and therefore has a lot to offer to other design-related industries. If you own a web design agency, make sure to pay more attention to how great games deal with the issues you often face when creating websites for your customers. And don’t forget to keep your sites fun, no matter how serious they may be.

Discussion

pic
Editor guide