SALES / SUPPORT : 844-261-1206 (Mon-Fri, 09:00-17:00 EST)

15 Design Elements That Make Online Gaming So Addictive!

By Eva Barnes , Aug 12 2016
Design Elements

Featured Image Source: Cardtableapp.com

The Web is becoming more game-like or at least has the potential to do so, both in terms of design elements and interactions. Web designers can take a page from the book of game designers to bring on the next revolution in design.

More and more web users prefer content that is easy to interact with, engaging and understandable. Web designers can take advantage of unique UI patterns and design patterns from video games. Let’s explore 15 video game elements which help you create immersive websites.

1. A Simple Menu Structure

Game menus need to provide a lot of information to the player but are intuitively structured so the user doesn’t get confused. Often a hub-and-spoke information architecture is used to present options. For instance, choosing the Weapons option displays all the available weapons on the screen. If you want to go back to the main menu you must navigate back to the Main Menu. Focusing on one kind of information makes the otherwise overwhelming array of information easy to comprehend and recall.

Here’s the structure of a sample game menu mapped out:

A Simple Menu Structure
Image Credit: TheBallGame

What Web Designers Can Learn From This

The menu structure has a striking resemblance with sitemaps. Sitemaps are visual representations of the information structure and flow of a website. This is an example of a real estate website; the user starts at the Home page, chooses to check Buy or Rent options, moves on to the appropriate section, and follows through the hierarchy shown below.

Site Map
Image Credit: HomeFlow

Another great example is this portfolio website structure:

website site map
Image Credit: Built Visible

These examples show a relatively small website, but imagine creating a sitemap for Amazon, Quora, or

Quora’s official sitemap

General Electric. Here is Quora’s official sitemap:

Such an extensive amount of information to be easily handled if web designers utilize the tricks of game menu design. Websites are getting bigger and bigger everyday as content and customizations are added.

Here are a few things you can do to make menu design easier:

  • Customize the flow according to customer type
  • Customers at different stages in the sales funnel can be directed to appropriate sections
  • Direct business partners and consumers need different information, don’t force them to navigate through irrelevant sections
  • Clarify the menu options through tooltips

Games focus more on showing instead of telling. That’s exactly what we need in today’s hyper-visual digital world.

2. Clear Feedback

What makes games infinitely more rewarding is the instant feedback received.  The player sees clear result of every action. The feedback is visual and clear. Audio and tactile feedback (such as beeps, vibrations, etc.) are also common but not very applicable to web design.

Clear-Feedback
Image Credit: Softpedia

What Web Designers Can Learn From This

Clear feedback at the instant of input is something web design sorely lacks. Instant feedback gives a feeling of freedom and control. Something as simple as a prompt to “Learn more?” after form submission will increase engagement. Here are some simple UI elements which can be made better by studying their usage in games.

  • Tooltips
  • Hover menus
  • Carousels
  • Accordions

Upload Files Rebound
Image Credit: Dribbble

3. Creative Loading Screens

These loading screens from Fallout: New Vegas (top) and Fallout 3 (bottom) have helpful information and tips, along with a background image that expands on the theme of the game. Instead of a spinning loader image, the user sees a roulette wheel or green-screen target that transforms a boring wait into a fun part of the game experience.

Example # 1 – Clash of Titans

Clash of Titans
Image Credit: Clash of Titans

Example # 2 – Fallout: New Vegas

Fallout New Vegas
Image Credit: Fallout: New Vegas

What Web Designers Can Learn From This

Let the user know why they are waiting. Customized graphics will create a pull in the focus. Hubspot’s Website Grader tool has this fun loading screen while the visitor waits for results:

Display loader images
Image Source

  • Display loader images and display messages through Ajax
  • Load helpful information and tips
  • Show customized graphics for example a cupcake being iced if you are designing a website for a dessert shop

4. Customized Cursors

Video games use special cursors or often change the cursor to indicate a special action. This extends the usability of the simple pointer.

Fable 3 uses a magnifying glass as a cursor to select a location on the map of Albion.

magnifying glass as a cursor
Image Source

What Web Designers Can Learn From This

Customized cursors are nothing new in web design. Almost everyone is familiar with the Google maps cursor shaped like a hand, which grips and drags the map. Web designers should use keep the following tips in mind when using this element:

  • Don’t overdo it
  • Only highlight information which is vital
  • Keep the nature of the website in mind when choosing the cursor

5. Use Of Icons As Visual Cues

Icons make complex, multi-option game menus simpler. The menu looks compact and becomes more user-friendly.

The action RPG, The Elder Scrolls IV: Oblivion uses icons instead of text on the character creation menu.

The Elder Scrolls IV
Image Credit: Nexusmods

Halo Reach uses a lot of icons in the game menu:

game menu
Image Credit: Windowsitpro

What Web Designers Can Learn From This

  • Use readable icons
  • Make sure they fit the context of the content
  • For optimum usability , add text labels

6. Use Of Icons To Facilitate Navigation And Information Discovery

Navigation through a large game environment is tough to represent, maps often use icons instead of text to show items more clearly.

Facilitate Navigation
Image Credit: superadventuresingaming

What Web Designers Can Learn From This

sketch travel
Image Credit: Sketchtravel

  • Use icons to draw attention to important information
  • Add icons to make textual lists more interesting
  • Break up huge walls of texts with relevant icons
  • Practice consistency; use the same icons for particular content types
  • Use icons to group content under one topic
  • Use shapes as headings instead of text
  • Use the client’s products as icons to reinforce branding

7. Tabbed Screens

Games often use a tabbed layout to show multiple screens. It’s an efficient way to show content across several broad categories.

multiple screens
Image Source

What Web Designers Can Learn From This

  • Present information in a coherent way
  • Usability and UX should be your prime concerns
  • Get the information categorization right to prevent users from feeling lost

The Ministry of Sound website makes great use of the tabbed layout

Ministry of Sound
Image Source

Vertical tabs can also look great if done right, as used by the Arbor Restaurant website.

Arbor Restaurant
Image Source

8. Full Page Carousels

Halo Reach takes the tabbed layout to more awesome levels by including horizontal scrolling in the player Carnage Report. Each screen contains multiple tabs and lots of information, yet looks neat and well-organized.

Player Carnage
Image Source

What Web Designers Can Learn From This

This type of layout is very popular in mobile apps and responsive websites. The Charleston website is easy to navigate because of the full-screen horizontal scrolling.

charleston restaurant
Image Source

  • If your website has a lot of content, this is an elegant solution for the information architecture
  • The screens slide into view and are easy to navigate on touch screens
  • While it is a tad tough to implement, you will have to make sure that the layout is responsive

9. Immersive Menus

Role playing games such as the Fable series include a lot of options for in-world customizations. Presenting these in a user-friendly manner is tough but game designers have come up with an elegant solution: they create immersive menu structures. These are amazing multi-level menus. 

The following image of a menu form the Fable 2 shows a character creation menu with tons of options, and each option in turn contains scrollable items.

What Web Designers Can Learn From This

  • Huge menus that fan out three or four levels deep are a big no!
  • Keep the menu smaller
  • Make scalable menus, growth in content is no excuse to let menus become screen hogging elements
  • Include scrolling into primary options to allow drilling down
  • Try to keep users on one screen
  • Be creative with your menus and experiment a little. For inspiration check out this example menu from Fantasy Cartography.

10. Altered Visuals

Halo Reach uses perspective shift as a UI element. In the main menu and throughout the game, the text is angled away from the screen, check out the image below to get a better idea:

Fire Fight
Image Source

This draws the player’s attention to the bottom right corner of the screen, subtly indicating that pushing the controller to the right produces some effect. What does this accomplish?  The screen blurs and then shifts to reveal the next screen, on which the text is skewed towards the left.

What Web Designers Can Learn From This

A slight change in the angel can attract attention towards the element. For example, the Let’s Go Rally website uses rounded triangles to display work samples. However when you hover over the triangle, the element twists a little:

Let’s Go Rally
Image Source

  • Be a bit creative and ditch the right angles
  • Unusual shapes and angles will set your design apart
  • It can also help indicate interactivity
  • Creative angles add a sense of depth

11. Context Menus

The menu options displayed in games are generated according to the area/skills/character of the player. Context-sensitive elements are a common part of game user interface. This helps get rid of extraneous options. For example, in the action-adventure game, Assassin’s Creed, Brotherhood uses a circular context menu:

Context Menus
Image Credit: Image Source

The menu is laid out pretty well and shows all the active options for movement and attack.

What Web Designers Can Learn From This

  • Context-sensitive web design can lead to more user engagement
  • Menus don’t have to be circular, traditional shapes are also valid
  • Use the radial version only if you have at least three to eight options to show
  • Show a context menu when inviting a user to take a specific action
  • Center the options around the needs of specific buying personas

12. Change Of State Signals

Borderlands 2 lets players know their shields are depleting without the need for text or menus, the screen simply flashes. They have done away with the traditional health bar for a more immersive experience. Other games will show a splash of blood on the screen to indicate damage.

Change Of State Signals
Image Credit: wegotthiscovered

Another example is Mirror’s Edge, as the player’s health depletes, the screen colors start fading.

Mirror’s Edge
Image Credit: Tomshardware

What Web Designers Can Learn From This

  • Simplify interface by using on-demand elements and hide complex functionality unless specifically chosen by the user
  • Change the appearance of elements to show that the request is being processed

13. Radial Menus

Radial or pie menus are commonly used in games, but they don’t necessarily have to be context-based as mentioned above. Radial menus take up less space and keep the player’s focus squarely in the middle of the screen.

Wolfenstein: Old Blood uses a radial menu to display all available weapons:

Radial Menus
Image Credit: Giantbomb

What Web Designers Can Learn From This

  • A large number of options can be displayed efficiently
  • Keeps the choices relevant
  • The menu should be lightweight and load easily
  • Make them easy to click or tap on

14. Sharing Through Tagging

Games environments are highly interactive, so players can leave messages for others by tagging items. Games such as Sniper V2 lets players easily tag targets to help out other users.

What Web Designers Can Learn From This

  • This pattern of interaction translates easily to web design.
  • Websites should include social sharing buttons
  • Any mechanism that lets users leave a digital trail of recommended content will drive user engagement
  • Incorporate commenting platforms such as Disqus

15. Immersive And Engaging Environment

The immensely popular Pokémon GO takes this concept to the extreme, the game operates in the most immersive environment of them all, reality itself!

According to the Internet Gaming Database, Pokémon GO lets the player “Travel between the real world and the virtual world of Pokémon”

Immersive And Engaging Environment
Image Credit: Niantic Labs

Technically augmented reality, which some would argue is even better because it is customized to the individual’s needs.

What Web Designers Can Learn From This

Interactive and immersive web design can help set your design apart. Thanks to continuous developments in HTML, CSS and JavaScript, web designers can take advantage of game design elements. The users will find the right information quickly and will actually enjoy the browsing experience. Here are some things you can do to make your website more interactive and immersive:

  • Use seamless animations to reveal information. We love the use of this element by Creative Cruise; the little boat is controlled by scrolling, and clicking on the Pickup Points reveals a side menu.

Creative Cruise
Image Source

  • Animated notifications
  • Scroll-triggered animations: The About page of the Humaan website (shown below) is a great example.

Humaan
Image Source

  • Highlighting important content at an appropriate time
  • Smoothly collapsing forms and menus
  • Smooth scrolling (especially applicable to one-page sites)
  • Incorporate useful interactions and tools.
  • Use layering effects, the AIGA (American Institute of Graphic Arts) website, 100 Years of Design makes excellent use of layering effects. The screenshot below doesn’t do the experience justice, you have to check out the link to get the full effect. Go ahead, we will wait.

Celebrate Design
Image Source

A Word Of Caution To Web Designers

When considering elements from game interfaces, a web designer should keep in view the overall context and goals of the client’s business. Websites will have very different goals from video games. For example, efficiency of the design is more important than the element of fun. Keep the goals of the project at the center of your focus for best results.

The line between the web and gaming realm will continue to blur as devices get more powerful and customers demand more interactivity from traditional sites. Web designers need to look at the flourishing gaming industry for lessons. It’s time for the gamification of web design.

About The Author

Eva is a marketing major with a keen interest in web design. She is also an explorer and loves to dig into web trends from mobile apps to visual communication and everything in between. Feel free to send her your web design queries or blog related feedback in the comments below.

Leave a Reply