What web designers can learn from video games
Games are becoming more like web pages, and web pages are more and more like games. Look at Habr: people write topics for which they charge karma and rating. This works according to the psychology of success and game mechanics, thus encouraging interaction. This raises the question: what can a web designer learn from games, or rather, video games?
A good game interface should be user friendly and intuitive, capable of performing many repetitive actions with as few clicks as possible. It should be attractive and catchy. It should be nice looking. A good interface increases the fun of the game: people need to get content in a form that does not destroy the game of imagination. Any dissonance with the interface can cause the failure of the game, which in all other respects is beautiful.
Even in old games such as Prince of Persia, the limited system of possibilities forced designers to come up with creative and innovative design patterns. Now opportunities have increased, and we can find more advanced design techniques in modern video games.
')
Similarly, sites want content to be presented in a simple, intuitive, engaging, and not requiring a large number of mouse movements. Web designers can learn a lot from video game interfaces. Sites that use the usual gaming interface tools can speed up the user experience and at the same time add personality. This can lead to more traffic and more repeated visits, and therefore sales.
Therefore, it is not surprising that we see an influx of carousels, lightboxes, drop-down menus and increasingly sophisticated navigation models, since CSS and JavaScript libraries allow browsers to use such tools. Good or bad - a topic for a separate article, while this article will focus on various techniques.
Things that a web designer can learn from video games are not limited to the user interface. Thus, when we look at some basic ideas and interface models, other top-level concepts may also be useful and worth exploring.
Considering the game interfaces, the web designer must be keenly aware of the context of their project and the goals of the client. It goes without saying that the goals of the site often, although not always, are very different from the goals of the game. On many sites, greater priority is given to efficiency, rather than the entertainment side. A cool, fisheye-style interface is not the most practical idea for a website that provides quick tax information or an e-commerce site. However, an interactive media channel can only benefit from the use of a leaderboard or a certain system of achievements. Choose the components of your interface so that they fit the project.
Looking at the big picture, take into account the structure and method, not just the interface components. For example, take a look at the menu structure and think about why this choice was made. Many games use the “hub and knitting needle” architecture, with different sets of tools in different menus. If you choose "Weapon", on the next screen you will see all the options for weapons. To select "Maps", you need to return to the first screen. This structure simplifies a set of options that could otherwise become too confusing, as it focuses on one choice at a time.
Do you see how this type of architecture can help a website offering a huge amount of information to visitors? By allowing the visitor to focus on one part of a large online task, you potentially increase the conversion rate for the client. The example below shows the structure of a simple game menu that can be easily applied to the information architecture of a site.
If you make a website for a certified audit firm, you may need to segment the information in the menu according to the type of visitor. A high-ranking person needs completely different things than a small business, but even those may be interested in hiring one firm. You could start from the top level, from two entry points: one point - for individuals, the second - for organizations.
Also notice the places where video games are shown instead of telling, and try to understand the reason for this. Successful games are particularly adept at showing during workouts. The hero must go through the simplest rooms or levels, where he is taught to perform basic tasks in a form that is fascinating and relevant to the plot. An adventurer learns to take a sword and wave it, then kills a rat, and then learns how to collect treasure. The player learns how to use the interface, through training with the effect of presence.
In The Elder Scrolls IV: Oblivion, you start the game in prison and must escape to an underground cave, fighting rats and rare goblins along the way to learn the basic principles of control in the game.
Why is it important? You may not have to create a complete interactive tutorial for complex interfaces, but it may happen that your client's content will be easier to understand using graphs and tables. You can take large concepts and break them into smaller ones. You can look for potential causes of difficulty and explain them with hints and examples (but not long explanations). By understanding how games are shown instead of explanations, you can make a breakthrough in a difficult submission problem.
Game Design Wizard Jesse Schell says: “Games offer the possibility of success, the chance to satisfy your curiosity; this is an opportunity to try to solve problems and make choices. ” Even the most mundane sites can be made much more fun by asking the question: “What elements of games seem to people the most enjoyable?”
Games provide feedback, often at the time a player enters their choices. These elements can be included in the interfaces, and not only through the menu-carousel or drop-down menus. By asking something like “Want to know more about it?” Before confirming the submission of the document, you can greatly improve the user's interaction with the site.
Some web designers already use some of these interface components on a simple level. Of course, the drop-down menus and tooltips are not new. Their use in games may suggest a more interesting and creative use of them in the interface.
Let's take a look at some user interface elements that can animate your next project. We will look at examples, and then on some resources where you can learn more about it.
These loading screens from the Fallout: New Vegas game (above) and Fallout 3 (below) provide useful information and tips, and a background image appears in the background that matches the theme of the game. Instead of the image of a moving load, the user sees a roulette wheel or a highlighted green target, which makes boring waiting a part of the gameplay.
What can a web designer take from here:
Come up with your own graphics. Use it to tighten the player in the "world" that you create on the screen. Even if you are working on a corporate website, you can add tips and useful information. Are you making a sports equipment website? It may be worth using a spinning basketball as a boot image in a slideshow. Not sure where to start? See this tutorial on how to preload images.
The full-page background image may be too heavy and slow for the boot screen, but you can fill the background with color in the boot bar div and then use JavaScript plugins to load random tips and information to fill the space. For best results, the size of the boot files should not be more than 30 KB: the smaller, the better. A simple AJAX request can change tips once a certain number of seconds, or simply put one tip for each download. The choice depends on how much content you need to download and how much time you have available. Examples of such downloads are on the website grader . Look at the download that appears while you wait for the result.
In Fable 3, the player’s selected location is marked with a magnifying glass icon, which acts as a custom cursor.
In The Elder Scrolls IV: Oblivion, a simple hand cursor indicates that a player can pick up this object. The red cursor indicates that the item can only be stolen, and that the soldiers can start the pursuit.
What can a web designer take from here:
Perhaps the most recognizable cursor is a “grabbing hand” on Google Maps. But custom cursors are not new and common to web applications. The ability to use them is built into most browsers.
It is important to use these cursors wisely: to offer help, to indicate content that can be clicked, to highlight important information. You see how this can be used to attract attention and highlight important points. Imagine what a magic wand well done in JavaScript can do on a kids site! Obviously, however, that such a solution is not suitable for a corporate site.
The only significant difference between video games and sites is that the icons in the game menus are much more complicated. Usually the user spends more time in the game than on the website. But icons are being used on websites more and more often, so the line between sites and web applications is erased.
So, how can icons be effectively used in game navigation? They must be readable and contextualized. For example, in the game Halo Reach, the player relies on icons when navigating and choosing weapons, but the menu resembles indicators of direct visibility (in the real world, such can be seen in vehicles). Icons for websites should also be easily understood. For optimum ease of use add text labels.
If icons are chosen carefully and consistently, they can speed up navigation with sophisticated menus. Use pure colors, bright contrasts and simple, easily visible contours.
Games are moving from small, highly detailed images to more sophisticated outlines, such as those that can be seen in Halo Reach and the Call of Duty series, and to large detailed pictures with clear forms, such as below. Even if you do not notice the details, you will recognize the outlines of the arm, the circle and the face. The use of one color makes them less complex visually and easier to distinguish. The more icons used, the simpler and clearer they should be.
You can also use icons to focus on key topics. Use picture headers instead of buttons as quick hints in content boxes and repetitive sections. Make complex images more and be consistent. Icons can add interesting lists, and also divide content into more digestible parts. With their help, you can draw attention to important parts of the text, as Treemo skillfully does.
Consider using the appropriate icons for navigation and grouping by topic. You can use the same forms as headings or sidebars in the text to indicate the connection between different parts of the content. Icons allow you to easily view the content, noticing interesting places, which makes it easier for users to find the necessary information.
Icons should not be static illustrations. Pattern Tap screenshots serve as traditional thumbnails of images, but their particular form also functions as an icon, increasing interest and strengthening the brand’s position:
And what if you use client products as icons? The smart DonQ submenu shown below uses products as icons, guiding you quickly and easily to the object of interest. It seems even cleverer that when a submenu appears, the rest of the content fades, thus highlighting the options you need.
Bookmarked screens that are slowly disappearing, like this one from Dragon Age, Origins, have been used for a long time:
In the Carnage Report ”(Halo Reach), this idea has reached a new level. The screens scroll horizontally, and there are several tabs on each page. Gamers are used to this interface, but apply it on the site and people will be surprised.
Jax Vineyards uses a similar type of layout, without tabs:
Add tabs to each screen of the carousel and your website will rise to a new level.
Magento offers a different perspective on this idea:
Right now we see this type of interface in mobiles and tablets, with a lot of background images. They are also used in games of all kinds. This is more than tabs in tabs or simple horizontal scrolling: imagine an iPad with multiple monitors. Think for a Living offers a map (very similar to a game card) in the upper right corner to help users navigate this unusual carousel.
What can a web designer take from here:
If you have a lot of content, such a bold decision may appeal to the user, which will increase site traffic. Your screens slide and are easily controlled using a touchscreen - the importance of this factor will only grow.
Because of the different screen sizes, this type of layout needs careful planning and may require CSS3 media queries in order to be sure to upload content to different screen sizes. You will need to make your layout responsive to interaction. You can embed a full-screen carousel with a full-size div and overflow with the hidden value, placing the frames in an unordered list with a set length.
Users are increasingly getting used to this type of interface with the spread of tablets. Using even more simplified horizontal scrolling can help your client stand out from the crowd.
The menu system of the recently released Fable 3 game is completely different from the one used in Fable 2 (in the picture above). But Fable 2 has such a beautiful sliding menu that I was obliged to include it in the list.
Scrolling the slider opens access to the buttons, and the content is shown on the right side of the screen. Buttons also have drop down menus; inactive content tarnishes. The picture above shows the category “Clothes”. Then from the content you can choose "Jackets", from there - to specific details of clothing. Does this remind you of e-commerce sites?
What can a web designer take from here:
Have you ever been on a site with huge drop-down (fly-out) menus across the page? Which expand to submenus, sometimes four-level, while you explore the contents list? Such sophisticated menus look somewhat threatening and can make the visitor leave. A good way to avoid bloated menus and disgruntled users is to create small menus.
There are several “sliding” scripts that offer special scrolling panels for each div – container. Why not put there and buttons? This type of menu, due to its scalability, looks more suitable for some cases (for example, for entertainment or fashion sites) than the usual drop-down menu. Add an AJAX downloader that appears on a click, and it will become easier for users to understand the interface. Here our task is to keep the user on the same screen and keep the menu scalable. You can add virtually any number of items in each menu, and they will not become cumbersome.
I have to admit, the first time I saw the pivot screens in Halo Reach, my heart sank. When you enter the main menu, the text is skewed. Halo Reach uses perspective throughout the game to point to the right edge of the menu. This is a visual signal. What happens when you move the controller to the right? The screen scrolls horizontally, grows cloudy, and the next frame appears, where perspective is also used, this time pressing text and pictures to the left. Under the tab you can see your hero, almost not moving and eerily like a living person. Bravo. I sat for a long time and played with pivot screens. Of course, my first reaction was: I want to do it!
What can a web designer take from here:
You can simulate this menu with a little help from Photoshop. Using a large, two-screen wide panoramic background image with oblique typographical markup of text in CSS3, as well as fast horizontal scrolling in JavaScript, you can get something like a tilted menu in this game. Apply it to a smaller panel and use it on a banner or button, and you will be amazed (just like your client). I do not yet know anyone who would use this method on sites, but I created a small demo so that you have a starting point in case you want to put it into practice.
Notice how Halo Reach integrates regular menu screens into the game world with the skillful illusion of a landscape in the background. It is really beautiful; it gives a feeling of depth and approach, as if you were looking at the ground from an airplane before landing. It excites and tempts you to go ahead, act and be part of the plot. This kind of integration is not suitable for all websites, but if it is appropriate, then this is a very worthwhile solution. Never underestimate the power of admiration!
The context menu in a video game is a “distant relative” of a submenu on a website. Context menus, such as those at the top of Assassin's Creed: Brotherhood, give the user certain options, depending on his location in the game and their choice of actions. If you choose to cast a spell, the submenu offers you a choice of fireball or lightning strike. If you choose movement, you can run, scramble, or hide - that is in the radial menu. Radial menus with icons are very popular, but context menus may well be just short vertical word lists.
What can a web designer take from here:
When you invite a user to do something, the context menu may be convenient. Instead of a list of links, you can offer an interesting list of special actions. Similar is used in web applications and small widgets for social networks.
When creating the context menu, you should at least think about making it radial. Radial menus should give users from three to eight options, and the interface should make them visually interesting. Keep the menus as simple and clear as possible. They should offer the user an appropriate choice at the time of the decision and increase the level of conversion. In addition, they should be easily pressed and visually light.
As a good example of a radial context menu, look at TuneGlue's musicmap:
Since the map was made in Flash, you can build a simple radial menu using JavaScript. Or you can complicate the task with nested radial menus, like this:
Radial menus are not limited to context menus. Drop-down panel menus at the time of action can be just as effective, and their development may require less time and testing.
Many other examples of excellent interfaces can be learned from video games. Games serve as design inspiration and can make your interface more intuitive and fun.
Are you making a site for a nonprofit planning a fundraising campaign? Consider using the board of honor to track donations. You can also use them to know the top 10 of your readers, thus giving them an incentive to comment.
Learn how to work with icons and think about how to use them, making the site more enjoyable and easy to use. Make interesting clues and consider adding downloadable content as a reward or incentive. By observing and applying the above, you will make your sites more exciting and easy to use. And let's not forget that research is fun!
A good game interface should be user friendly and intuitive, capable of performing many repetitive actions with as few clicks as possible. It should be attractive and catchy. It should be nice looking. A good interface increases the fun of the game: people need to get content in a form that does not destroy the game of imagination. Any dissonance with the interface can cause the failure of the game, which in all other respects is beautiful.
Even in old games such as Prince of Persia, the limited system of possibilities forced designers to come up with creative and innovative design patterns. Now opportunities have increased, and we can find more advanced design techniques in modern video games.
')
Similarly, sites want content to be presented in a simple, intuitive, engaging, and not requiring a large number of mouse movements. Web designers can learn a lot from video game interfaces. Sites that use the usual gaming interface tools can speed up the user experience and at the same time add personality. This can lead to more traffic and more repeated visits, and therefore sales.
Therefore, it is not surprising that we see an influx of carousels, lightboxes, drop-down menus and increasingly sophisticated navigation models, since CSS and JavaScript libraries allow browsers to use such tools. Good or bad - a topic for a separate article, while this article will focus on various techniques.
Things that a web designer can learn from video games are not limited to the user interface. Thus, when we look at some basic ideas and interface models, other top-level concepts may also be useful and worth exploring.
Remember the big picture
Considering the game interfaces, the web designer must be keenly aware of the context of their project and the goals of the client. It goes without saying that the goals of the site often, although not always, are very different from the goals of the game. On many sites, greater priority is given to efficiency, rather than the entertainment side. A cool, fisheye-style interface is not the most practical idea for a website that provides quick tax information or an e-commerce site. However, an interactive media channel can only benefit from the use of a leaderboard or a certain system of achievements. Choose the components of your interface so that they fit the project.
Looking at the big picture, take into account the structure and method, not just the interface components. For example, take a look at the menu structure and think about why this choice was made. Many games use the “hub and knitting needle” architecture, with different sets of tools in different menus. If you choose "Weapon", on the next screen you will see all the options for weapons. To select "Maps", you need to return to the first screen. This structure simplifies a set of options that could otherwise become too confusing, as it focuses on one choice at a time.
Do you see how this type of architecture can help a website offering a huge amount of information to visitors? By allowing the visitor to focus on one part of a large online task, you potentially increase the conversion rate for the client. The example below shows the structure of a simple game menu that can be easily applied to the information architecture of a site.
If you make a website for a certified audit firm, you may need to segment the information in the menu according to the type of visitor. A high-ranking person needs completely different things than a small business, but even those may be interested in hiring one firm. You could start from the top level, from two entry points: one point - for individuals, the second - for organizations.
Also notice the places where video games are shown instead of telling, and try to understand the reason for this. Successful games are particularly adept at showing during workouts. The hero must go through the simplest rooms or levels, where he is taught to perform basic tasks in a form that is fascinating and relevant to the plot. An adventurer learns to take a sword and wave it, then kills a rat, and then learns how to collect treasure. The player learns how to use the interface, through training with the effect of presence.
In The Elder Scrolls IV: Oblivion, you start the game in prison and must escape to an underground cave, fighting rats and rare goblins along the way to learn the basic principles of control in the game.
Why is it important? You may not have to create a complete interactive tutorial for complex interfaces, but it may happen that your client's content will be easier to understand using graphs and tables. You can take large concepts and break them into smaller ones. You can look for potential causes of difficulty and explain them with hints and examples (but not long explanations). By understanding how games are shown instead of explanations, you can make a breakthrough in a difficult submission problem.
Involvement should not be intrusive
Game Design Wizard Jesse Schell says: “Games offer the possibility of success, the chance to satisfy your curiosity; this is an opportunity to try to solve problems and make choices. ” Even the most mundane sites can be made much more fun by asking the question: “What elements of games seem to people the most enjoyable?”
Games provide feedback, often at the time a player enters their choices. These elements can be included in the interfaces, and not only through the menu-carousel or drop-down menus. By asking something like “Want to know more about it?” Before confirming the submission of the document, you can greatly improve the user's interaction with the site.
Some web designers already use some of these interface components on a simple level. Of course, the drop-down menus and tooltips are not new. Their use in games may suggest a more interesting and creative use of them in the interface.
Let's take a look at some user interface elements that can animate your next project. We will look at examples, and then on some resources where you can learn more about it.
Download AJAX messages
These loading screens from the Fallout: New Vegas game (above) and Fallout 3 (below) provide useful information and tips, and a background image appears in the background that matches the theme of the game. Instead of the image of a moving load, the user sees a roulette wheel or a highlighted green target, which makes boring waiting a part of the gameplay.
What can a web designer take from here:
Come up with your own graphics. Use it to tighten the player in the "world" that you create on the screen. Even if you are working on a corporate website, you can add tips and useful information. Are you making a sports equipment website? It may be worth using a spinning basketball as a boot image in a slideshow. Not sure where to start? See this tutorial on how to preload images.
The full-page background image may be too heavy and slow for the boot screen, but you can fill the background with color in the boot bar div and then use JavaScript plugins to load random tips and information to fill the space. For best results, the size of the boot files should not be more than 30 KB: the smaller, the better. A simple AJAX request can change tips once a certain number of seconds, or simply put one tip for each download. The choice depends on how much content you need to download and how much time you have available. Examples of such downloads are on the website grader . Look at the download that appears while you wait for the result.
Custom cursors
In Fable 3, the player’s selected location is marked with a magnifying glass icon, which acts as a custom cursor.
In The Elder Scrolls IV: Oblivion, a simple hand cursor indicates that a player can pick up this object. The red cursor indicates that the item can only be stolen, and that the soldiers can start the pursuit.
What can a web designer take from here:
Perhaps the most recognizable cursor is a “grabbing hand” on Google Maps. But custom cursors are not new and common to web applications. The ability to use them is built into most browsers.
It is important to use these cursors wisely: to offer help, to indicate content that can be clicked, to highlight important information. You see how this can be used to attract attention and highlight important points. Imagine what a magic wand well done in JavaScript can do on a kids site! Obviously, however, that such a solution is not suitable for a corporate site.
Icons, icons, icons
The only significant difference between video games and sites is that the icons in the game menus are much more complicated. Usually the user spends more time in the game than on the website. But icons are being used on websites more and more often, so the line between sites and web applications is erased.
So, how can icons be effectively used in game navigation? They must be readable and contextualized. For example, in the game Halo Reach, the player relies on icons when navigating and choosing weapons, but the menu resembles indicators of direct visibility (in the real world, such can be seen in vehicles). Icons for websites should also be easily understood. For optimum ease of use add text labels.
If icons are chosen carefully and consistently, they can speed up navigation with sophisticated menus. Use pure colors, bright contrasts and simple, easily visible contours.
Games are moving from small, highly detailed images to more sophisticated outlines, such as those that can be seen in Halo Reach and the Call of Duty series, and to large detailed pictures with clear forms, such as below. Even if you do not notice the details, you will recognize the outlines of the arm, the circle and the face. The use of one color makes them less complex visually and easier to distinguish. The more icons used, the simpler and clearer they should be.
You can also use icons to focus on key topics. Use picture headers instead of buttons as quick hints in content boxes and repetitive sections. Make complex images more and be consistent. Icons can add interesting lists, and also divide content into more digestible parts. With their help, you can draw attention to important parts of the text, as Treemo skillfully does.
Consider using the appropriate icons for navigation and grouping by topic. You can use the same forms as headings or sidebars in the text to indicate the connection between different parts of the content. Icons allow you to easily view the content, noticing interesting places, which makes it easier for users to find the necessary information.
Icons should not be static illustrations. Pattern Tap screenshots serve as traditional thumbnails of images, but their particular form also functions as an icon, increasing interest and strengthening the brand’s position:
And what if you use client products as icons? The smart DonQ submenu shown below uses products as icons, guiding you quickly and easily to the object of interest. It seems even cleverer that when a submenu appears, the rest of the content fades, thus highlighting the options you need.
Full-page menu-carousel
Bookmarked screens that are slowly disappearing, like this one from Dragon Age, Origins, have been used for a long time:
In the Carnage Report ”(Halo Reach), this idea has reached a new level. The screens scroll horizontally, and there are several tabs on each page. Gamers are used to this interface, but apply it on the site and people will be surprised.
Jax Vineyards uses a similar type of layout, without tabs:
Add tabs to each screen of the carousel and your website will rise to a new level.
Magento offers a different perspective on this idea:
Right now we see this type of interface in mobiles and tablets, with a lot of background images. They are also used in games of all kinds. This is more than tabs in tabs or simple horizontal scrolling: imagine an iPad with multiple monitors. Think for a Living offers a map (very similar to a game card) in the upper right corner to help users navigate this unusual carousel.
What can a web designer take from here:
If you have a lot of content, such a bold decision may appeal to the user, which will increase site traffic. Your screens slide and are easily controlled using a touchscreen - the importance of this factor will only grow.
Because of the different screen sizes, this type of layout needs careful planning and may require CSS3 media queries in order to be sure to upload content to different screen sizes. You will need to make your layout responsive to interaction. You can embed a full-screen carousel with a full-size div and overflow with the hidden value, placing the frames in an unordered list with a set length.
Users are increasingly getting used to this type of interface with the spread of tablets. Using even more simplified horizontal scrolling can help your client stand out from the crowd.
Sliding menus
The menu system of the recently released Fable 3 game is completely different from the one used in Fable 2 (in the picture above). But Fable 2 has such a beautiful sliding menu that I was obliged to include it in the list.
Scrolling the slider opens access to the buttons, and the content is shown on the right side of the screen. Buttons also have drop down menus; inactive content tarnishes. The picture above shows the category “Clothes”. Then from the content you can choose "Jackets", from there - to specific details of clothing. Does this remind you of e-commerce sites?
What can a web designer take from here:
Have you ever been on a site with huge drop-down (fly-out) menus across the page? Which expand to submenus, sometimes four-level, while you explore the contents list? Such sophisticated menus look somewhat threatening and can make the visitor leave. A good way to avoid bloated menus and disgruntled users is to create small menus.
There are several “sliding” scripts that offer special scrolling panels for each div – container. Why not put there and buttons? This type of menu, due to its scalability, looks more suitable for some cases (for example, for entertainment or fashion sites) than the usual drop-down menu. Add an AJAX downloader that appears on a click, and it will become easier for users to understand the interface. Here our task is to keep the user on the same screen and keep the menu scalable. You can add virtually any number of items in each menu, and they will not become cumbersome.
Pivot screens
I have to admit, the first time I saw the pivot screens in Halo Reach, my heart sank. When you enter the main menu, the text is skewed. Halo Reach uses perspective throughout the game to point to the right edge of the menu. This is a visual signal. What happens when you move the controller to the right? The screen scrolls horizontally, grows cloudy, and the next frame appears, where perspective is also used, this time pressing text and pictures to the left. Under the tab you can see your hero, almost not moving and eerily like a living person. Bravo. I sat for a long time and played with pivot screens. Of course, my first reaction was: I want to do it!
What can a web designer take from here:
You can simulate this menu with a little help from Photoshop. Using a large, two-screen wide panoramic background image with oblique typographical markup of text in CSS3, as well as fast horizontal scrolling in JavaScript, you can get something like a tilted menu in this game. Apply it to a smaller panel and use it on a banner or button, and you will be amazed (just like your client). I do not yet know anyone who would use this method on sites, but I created a small demo so that you have a starting point in case you want to put it into practice.
Notice how Halo Reach integrates regular menu screens into the game world with the skillful illusion of a landscape in the background. It is really beautiful; it gives a feeling of depth and approach, as if you were looking at the ground from an airplane before landing. It excites and tempts you to go ahead, act and be part of the plot. This kind of integration is not suitable for all websites, but if it is appropriate, then this is a very worthwhile solution. Never underestimate the power of admiration!
Context menus
The context menu in a video game is a “distant relative” of a submenu on a website. Context menus, such as those at the top of Assassin's Creed: Brotherhood, give the user certain options, depending on his location in the game and their choice of actions. If you choose to cast a spell, the submenu offers you a choice of fireball or lightning strike. If you choose movement, you can run, scramble, or hide - that is in the radial menu. Radial menus with icons are very popular, but context menus may well be just short vertical word lists.
What can a web designer take from here:
When you invite a user to do something, the context menu may be convenient. Instead of a list of links, you can offer an interesting list of special actions. Similar is used in web applications and small widgets for social networks.
When creating the context menu, you should at least think about making it radial. Radial menus should give users from three to eight options, and the interface should make them visually interesting. Keep the menus as simple and clear as possible. They should offer the user an appropriate choice at the time of the decision and increase the level of conversion. In addition, they should be easily pressed and visually light.
As a good example of a radial context menu, look at TuneGlue's musicmap:
Since the map was made in Flash, you can build a simple radial menu using JavaScript. Or you can complicate the task with nested radial menus, like this:
Radial menus are not limited to context menus. Drop-down panel menus at the time of action can be just as effective, and their development may require less time and testing.
Your turn
Many other examples of excellent interfaces can be learned from video games. Games serve as design inspiration and can make your interface more intuitive and fun.
Are you making a site for a nonprofit planning a fundraising campaign? Consider using the board of honor to track donations. You can also use them to know the top 10 of your readers, thus giving them an incentive to comment.
Learn how to work with icons and think about how to use them, making the site more enjoyable and easy to use. Make interesting clues and consider adding downloadable content as a reward or incentive. By observing and applying the above, you will make your sites more exciting and easy to use. And let's not forget that research is fun!
Source: https://habr.com/ru/post/125862/
All Articles