“Games are becoming more Web-like, and the Web is becoming more game-like.” This is the point presented in Anne Miles’ article called What Web Designers Can Learn From Video Games, and considering the developments in gaming technology that allow for online access and the improvements in the web’s interactive elements, this insight appears aptly descriptive of the design evolution that is taking place right in front of us.

Elements of gaming are increasingly present in web pages. Take Miles’ example of the format of Yahoo answers. When a user provides the inquisitor with the answer he thinks is best, the user earns credibility points in reward of her “win” that allow for her to access more features within the system. This kind of incentive-driven behavior is helping websites become more engaging and more likely to lead the user down the funnel to the ultimate point of conversion. Below are some more ways sites have integrated (video) gaming elements to improve user experience and create a more intuitive environment for the user.

“In considering game interfaces, a Web designer needs to be acutely conscious of their project’s context and their client’s goals,” says Miles. Unlike video games, efficiency should take precedence over elements of entertainment when creating a successfully functional website. But when it comes to mapping out the layout of a website, the hub-and-spoke approach of video games can be appropriately applicable. Selecting one application that leads to another allows users to focus on one task or chunk of information at a time, making it more comprehensible and organized in their minds. Integrating this kind of layout should also take into consideration the different types of needs from different types of users and build the site out accordingly.

Another engaging element of video games worthy of web integration is the use of customized graphics. In some video games, the loading screen is often designed to match the theme of the game, which continues to keep to the player engaged during the wait. This practice can be transposed to web design by creating functions, pop-up loading screens and 404 pages that visually support the look of the site and keep the user interested.

Video games and websites face a similar challenge in that they both strive to be intuitive and quickly comprehensible. One way video games have been successful in this endeavor is by using different cursors for different functions. For example, some RPG games use a hand when the object it is hovering over can be picked up. This same approach in web design can help guide users to where they can click to continue or hover for more information.

Icons are used heavily throughout video games to quickly communicate different functions. We have seen this same reliance on icons in the development of web applications, and as the line between websites and web applications continues to blur, icons are used increasingly in web design as well. There are often cases where icons and symbols communicate the function much more instantaneously than words. They also make a site more user-friendly and easier to navigate while giving it a cleaner appearance.

When giving a web user options from which to choose, many of the effective layouts in gaming can be applied to make the process more engaging and interactive. Options menus in the form of carousels, sliders menus and context menus can achieve a game-like feel that encourages the user to keep “playing.”

See? Web design really can be all fun and games. In fact, borrowing these ideas from gaming can help make sites more intuitive, more user-friendly and more successful in engaging the user to the point of conversion. Make your site’s goals your users goals, and encourage them to play. It’s a win-win situation.

This week at Lifeblue University, it was LB Design Savant Ben Tautfest’s turn to teach us all something new. As one of our amazing designers, Ben knows the importance of resolution, color and other factors that keep a site looking consistent and high in quality. So in this week’s LBU, Ben took the time to not only show us how to resize and alter logos and images to maintain quality and proper color, but also to stress the importance of such practices in producing top-notch sites, presentation materials and collateral.

Style guides, like the ones Lifeblue’s designers user for websites they create, keep a site consistent in the color scheme, typography and general appearance. These guides assist designers in maintaining control over the design and can be handed over to the client post-production to ensure that any changes made stay in harmony with the site they have created. Following a style guide will not only make a website look better, but it also reinforces branding messages by making it instantly recognizable and correctly credited to its respective brand.

But style guides can transcend website design and be transposed to other marketing elements. Once a solid guide is in place, it can be applied to advertising and presentation materials, collateral, social media pages and any other messages put out by the company. This practice goes hand-in-hand establishing cohesive, consistent branding—an important point that we have stressed in posts before.

Companies often lease out different marketing needs to several different agencies; providing them with a style guide to refer these other agencies to will ensure that it is all branded properly. When given the specific hues, fonts and styles to be used, these other agencies—despite creative differences—will most likely produce materials that follow suit with the site and the company’s brand image will be further solidified. I can’t guarantee that the client will actually decide to enforce the guide, but at least as a designer you will have armed them with what they would need to create a beneficial branding standard for their marketing materials.

Not everyone is a designer who has a trained eye for developing the elements of a style guide. Making it a point to always use one and making it available and comprehensible allows others to forgo making erroneous design decisions themselves, and they will instead know exactly what to do. Create a simple and clear concept guideline, and you will save your client from potential doom. Be responsible and look out for them. Practice safe design. Use a concept. And always do it with style guides.

Do you remember Mr. Rodger’s Neighborhood and the catchy theme song at the beginning…”Won’t You Be My Neighbor?” It got me thinking about social networks and how through them, we all engage in today’s hyper-connected, technological world.

I am certain that by now just about everyone (but maybe my own father) has a Facebook page, a LinkedIn profile, possibly a Pinterest account, and maybe Twitter, Spotify, or some other form of an online presence that serves as a statement about certain aspects of who they are and what they like. We have created micro-communities within the Internet ether that allow for others to inspect, friend, watch, learn and listen to what we post or merit a “like.” Friends or brands can very clearly see our political views, favorite foods, preferred brands and even what kind of music we each listen to. Through my own social networking presence, I have provided a roadmap to my personality and persona.

These social networks make it easier than ever to make new friends, learn about old ones, check on brands or learn just about anything we want—all in real time. I would argue that these social platforms also generate new grounds on which to base trust and build circles of influence. Now more friends and contacts can validate who you are and the decisions or purchases that you make. In a sense, we are building virtual neighborhoods.

The 1950s portrayed community with a picture of someone borrowing a cup of sugar from his neighbor or leaving them a May basket or asking for advice about the local doctors. In contrast, community is now illustrated through page recommendations, tags in photos, or even LinkedIn connections that land you a job. And you don’t even have to leave Starbucks to be a part of these neighborhoods.

I recently read an article in Fast Company Design that I believe to be along the same line of thinking. Tim Morey makes the comment in Reputation-Enhanced Lending and Trading Goes Mainstream, that:

“…The really interesting trend here is that new forms of trust are being enabled by social networking technology. We all joined Facebook and LinkedIn to stay in touch with colleagues and friends, but the upshot of mass adoption is that we can check up on virtually everyone we come across. Individuals who have never met or interacted are using social networks to validate one another. If I’m just selling something to you on Craigslist, it doesn’t really matter to me whether you’re a good or bad person; I take the cash, you take goods, and that’s it. But if I’m renting something to you, trust becomes critical. I want to know that you are not a crook, a thief, or just a generally unpleasant person. By linking person-to-person transactions to social networks, we are reducing the need for cash deposits and other financial remedies to the bad-egg problem. While logging in to third-party websites using your Facebook identity is now commonplace, we are beginning to see person-to-person exchanges making use of social networks to broker trust. For example, before you stay at someone’s spare bedroom via Airbnb, you have to sign in with your profile. I recently rented someone’s house in Toronto for a few days, and between our respective social networks, we found enough friends, relatives, and colleagues in common for him to lend me the property with confidence.”

These concepts are truly astounding. We are building networks of people that we rely on in the way we would our closest neighbors. As we evolve further, it will be critical for brands to develop new ways of engaging consumers based on how they interact within their “neighborhoods.” Listening to and understanding these new dynamics will be important as mainstream media and traditional channels risk becoming stale.

Day One stories by Prudential are a great example how to use storytelling in a way that allows for the “neighbor” in all of us to relate to others. You want to hear their stories, learn about them, and see their lives. Prudential uses traditional channels to exploit their online engagement model and storytelling to get at the heart of consumers in a world where high tech ultimately also means high touch. It’s almost as if, because of technology and the lack of more physical contact, the messages have to be even more emotionally compelling to garner that sense of “neighbor” and connectedness. I love it.

Would you be mine, could you be mine, won’t you be my neighbor?

In last week’s session of Lifeblue University, LB’s Tech Specialist, Chad Davis, schooled the team on a couple different methods of “cloning yourself” for the sake of testing a website. These practices serve to present a single user as multiple or new users, and while they can be helpful in simplifying the testing process, they can serve non-testing related purposes as well, as Chad explains.

“Cloning your virtual self” allows you as a tester or user to—in a virtual sense—pretend that you are someone else for a second. This is achieved through methods that allow the user to be under different accounts simultaneously on the same website. And why would this be useful? For testers, it creates an environment in which they can test features, like shopping carts, under multiple users. In the example of online shopping carts, cloning yourself lets you to fill up your cart and check out multiple times, each time as a different user, without undertaking the laborious talk of emptying the cart and having to back out to restart the process each time.

While systems operate to present each person on each computer as one user at one time—even in separate windows or new tabs—Chad provides two methods of overcoming this obstacle to simplify the testing process: private browsing and what he calls the “Gmail+ trick.”

Private Browsing
Private browsing is a feature that was developed to give a certain amount of privacy to users regarding their web searches and site history on their computers. The feature’s ability to open new windows with no pre-existing cookies intact allows users to present themselves and new and different to a website, which makes it possible for a single user to be logged into separate accounts simultaneously.

While most browsers have private browsing capabilities, Chad subscribes to the opinion that Google Chrome and Internet Explorer perform this task best. Browsers like Firefox and Safari tend to handle it a bit differently and can prove to be slightly more complex in their private browsing set-up.

The Gmail+ Trick
The second cloning technique, the Gmail+ trick, simply involves logging in with a Google Gmail address that attaches a plus sign followed by any word or words to the end of the email address but proceeding the “@” symbol. So for example, if your email address is you@gmail.com, you could login as you+user1@gmail.com or you+whatever@gmail.com and be recognized as a different user without having to set up a separate email account.

This feature, which is unique to Gmail only, cannot only be used for testing purposes but personal as well. It allows users to have multiple email accounts with which they can assign to different categories of online activity. So through this practice, you could create a you+bank@gmail.com account through which you receive all bank or financially related emails or a you+social@gmail.com account that is used for all social media logins and correspondence.

All accounts created by adding a plus sign and additional words will still be forwarded to the original you@gmail.com root account. This allows users to also have the ability to identify the origin of email spam by referring to Gmail+ address to which it was sent and to whom that address was given. Multiple email addresses also provides the opportunity to have multiple login accounts on most sites without having to set up each email separately.

One of the key aspects in improving the user experience lies in designing a winning website design flow. This critical factor is often overlooked in premature discussion of page design and content architecture, and all too often the element of design flow rarely gets the attention it deserves. This very idea is outlined in a recent article on Smashing Magazine by Morgan Brown titled Stop Designing Pages And Start Designing Flows, where Brown examines the correct way to handle design flow in order to create truly successful web experiences.

As with any aspect of web design, design flow should start with the user. Consider the user objectives for the site at hand. These vary, depending on the type of site being created. With an ecommerce site, the user will be searching through products, which will ultimately lead to a stage of purchase. In the case of membership, the user will click a link that leads to a landing page that allows them to register or join by supplying his or her information. A user could be searching for factual information or seeking a tutorial or attempting to connect to other users—among countless other possibilities—but regardless of his or her objectives, it is critical to gain a thorough understanding of this first in order to design an effective flow.

Next, Brown advises mapping user flows into “conversion funnels.” Every user will be different in their level of knowledge, their origin and their goals. As a designer, it is your responsibility to be the expert and map out user flows that are of value to the user and help to achieve the goals of the site.

“You should prioritize the flows and focus your effort on the few that will impact the most users and have the greatest gain,” says Brown. Some of the typical user flows that Brown illustrates are paid advertisements, led to by a banner ad; social media, guided by a shared link; and organic search, which occurs through a search engine query. Understand how these differ and the varying user needs and expectations each elicits.

The next step involves diving into these funnels. Brown uses the example of display advertising, which has the ultimate goal of generating new customers. Display advertising most usually starts with a banner, which ideally results in a click-through and therefore represents the very beginning of your user flow. The design of this banner should consider the user’s knowledge and needs in order to achieve this success.

The designer should ask questions like: What type of user is the target? How do I relate to them in a way that gains their attention and piques their interest? What kind of message would generate this kind of appeal? What kind of problem are they attempting to solve and how can I illustrate that this ad leads to the solutions they seek? Addressing these issues will help to initiate the flow by first engaging the user to go further.

The landing page should ensure that the flow continues. Brown explains how it should build user confidence, streamline content and design in a way that reinforces the call to action, eliminate friction in each step and does all of this in an enticing and engaging manner.

Then comes stacking the flow. Again, in doing this, the designer should refer to the type of site that is being created and its goals. This order should involve minimal steps and tell a visual story that easily makes sense to the user and encourages them to become a part. Take note of the more difficult stages of conversion, and ensure that there are multiple touch points to get the user through to these latter parts of the flow. “By considering how the flows interact, you can create a seamless experience that builds confidence and deepens the user’s connection to your website, leading to the ultimate purchase conversion.”

As illustrated here, design flow can make or break a site. Without first taking a moment to understand the user, their needs and their objectives, a site cannot properly funnel in the way it is intended and fulfill its goals. Brown offers this last piece of advice: “When considering user flows, think past the first conversion, and design for the ultimate conversion, which might lie a few steps behind.” While as designers, we are often encouraged to go against the grain, this is one instance where you really should just go with the flow.