What Web Designers Can Learn From Video Games

Games are becoming more Web-like, and the Web is becoming more game-like. If you need proof of this, you have only to look at Yahoo Answers. Random questions are posed, the top answer is chosen, and credibility points are given to the winner. It’s a ranking system that accumulates and unlocks more and more features within the system. It works because of the psychology of achievement and game mechanics and thus encourages interaction. This raises the question, what can a Web designer learn from games, or — more specifically — video games?

Good game interfaces have to be highly usable and intuitive, capable of handling a lot of repetitive actions in the fewest clicks possible. They need to be attractive and engaging. They need to be likeable. A good game interface adds to and enhances the user’s experience. In a game, people want the content delivered to them in a way that doesn’t break the fantasy. Any dissonance with the interface will cause an otherwise great game to fail.



Even in older games, as in Prince of Persia (displayed above), the limited system capabilities enforced designers to come up with creative and innovative design patterns. With more capabilities available today, we are able to find more advanced design techniques in modern video games.

In the same way, website users want their content delivered to them in a way that is easy to understand, intuitive and engaging and that doesn’t require a lot of scrolling or clicking. In fact, Web designers can learn a lot from video game interfaces. Websites that use common game interface tools can streamline the user experience while adding a lot of personality. This can result in higher traffic and a higher rate of repeat visits — and sales… Cha-ching!

It’s no surprise, then, that we’ve seen an influx of carousels, lightboxes, accordions and increasingly sophisticated navigation patterns, as CSS and JavaScript libraries have put such tools within reach of Web browsers. Whether it’s a good or a bad thing, is a topic for another article, and this article will focus on the techniques rather than their wrong applications.

What a Web designer can learn from video games isn’t limited to the user interface. Yahoo Answers works because of the psychology of the achievement system that is built in. So, while we will look at some basic user interface ideas and patterns, other higher-level concepts would be useful, too, and worth exploring.


Remember The Big Picture

In considering game interfaces, a Web designer needs to be acutely conscious of their project’s context and their client’s goals. Obviously, a website will often, though not always, have a goal that is very different from that of a video game. On many websites, efficiency needs to be a higher priority than entertainment. A cool fish-eye interface is not the most practical idea for a website dedicated to delivering tax information quickly or for an e-commerce website. However, an interactive social media channel might benefit from a leaderboard or some type of achievement system. Choose your UI components to fit the project.

Looking at the big picture, also consider structure and method — not just UI components. For example, look at how menus are structured, and consider why those choices were made. In many games, you have a hub-and-spoke type architecture, leading to different sets of tools within the menus. If you choose “Weapons,” then all of the options for weapons open on the next screen. You have to navigate back to the top screen in order to choose “Maps.” This structure simplifies a set of options that would otherwise quickly become confusing or overwhelming by providing focused attention on one choice at a time.

Can you see how this type of architecture could benefit a website that presents a large amount of information to the visitor? By allowing the visitor to focus on one piece of a large online task or one nugget of information at a time, you potentially increase the conversion rate for your client. This structure could also be effective when you are crafting a sales funnel on a website. The example below shows a simple game menu structure that could easily be applied to the information architecture of a website, building paths for visitors to follow.



If you were building a website for a CPA firm, you might segment its menu information under headings relevant to the type of visitor. A high-wealth individual has very different needs than a small business, but both might be interested in hiring the same firm. You could start at the top level, with two simple entry points serving as a funnel, one for individuals and families and the other for businesses and organizations, each button leading to the hub for that user. This hub page could provide content, offer pertinent tools and advertise relevant services for these very different users, thus simplifying their experience.



Read Full Article Here

10 Helpful Tools & Apps for Twitter Power Users

Twitter continues to grow its userbase at a crazy pace of over 460,000 new users each day. I found that as this means an increase of followers and conversations, it also increases the noise a lot. Fortunately, lots of tools out there help us to cut through the noise and get to the most useful bits and pieces. Here are 10 of my favourite tools to use Twitter more efficiently:

Buffer – Never Flood Your Followers

One important part I found is to never overwhelm my followers. With Buffer, I can put Tweets into my “Buffer” and the App spreads them out over the whole day. With the handy browser extensions (Chrome, Safari or Firefox) I can add Tweets to it from anywhere on the web. This makes it very easy to become a great source of content for my followers and jump in to chat with them.

Best bit: What I like best is that for every Tweet Buffered, I will get detailed stats on clicks, retweets and reach to know more about what my followers like.

Tweriod – Tweet only when others listen

More after the break...

The Heritage Of Berlin Street Art And Graffiti Scene

Art critic Emilie Trice has called Berlin “the graffiti Mecca of the urban art world.” While few people would argue with her, the Berlin street scene is not as radical as her statement suggests. Street art in Berlin is a big industry. It’s not exactly legal, but the city’s title of UNESCO’s City of Design has kept local authorities from doing much to change what observers call the most “bombed” city in Europe. From the authorities’ point of view, the graffiti attracts tourists, and the tourists bring money to a city deep in debt.



This article looks at the development of the Berlin street art scene, from its beginnings as a minor West Berlin movement in the late ’70s to its current status: the heritage of a now unified city.

The Development Of The Berlin Graffiti Scene
After the few East Germans who crossed the Berlin Wall in the ’80s blinked and pinched themselves, what do you think was the first thing they saw?

They saw big bubbly letters, spelling out words in German, English and French. They saw political slogans, either carved indelibly into the concrete or sprayed temporarily onto surfaces, commenting not only on the situation in Germany, but on the whole political world: “God Ble$$,” “Concrete Makes You Happy,” “Death to Tyrants.” As far as they could see, covering every inch of wall, was layer upon layer of zest, life and color.

Full Article