What can video games teach you about UX and UI?

  • Published on

  • View

  • Download

Embed Size (px)


  • http://fenix.agency/blog/

    What can video games teach

    you about UX and UI?

    by Marko Paar

  • http://fenix.agency/blog/

  • http://fenix.agency/blog/

    Table of contents

    1. Introduction

    2. Humans are lazy

    3. Know your place

    4. The power of the click

    5. Fitting the theme

    6. Bonus content

    7. About Fenix

  • http://fenix.agency/blog/


    This presentation is a collection of main takeaways from a blogpost

    I wrote on the topic.

    If you want to learn more, make sure to read the full post or visit our

    blog if you're interested in more articles.


  • http://fenix.agency/blog/


    Modern video games are characterized by immersive, dynamic

    worlds, and it has a lot to with the advance of User Experience and

    User Interfaces

    Similarly to video games, having both a usably and visually

    attractive website or app is a must

    Many, function-wise, great apps have failed, simply due to bad UI

    and/or UX

    Web development has influenced the gaming industry and vice


  • http://fenix.agency/blog/

    Humans are lazy

    Humans are lazy and design should take advantage of it

    Our brains are hardwired to do the least amount of work possible to

    get a certain task done

    Interation design technique, known as progressive disclosure, is

    centered around maintainint focus by removing clutter for the sake of


    This is similar to the inverted pyramid model used in journalism


  • http://fenix.agency/blog/

  • http://fenix.agency/blog/

    Web experience should be tailored to give the most information with

    least amount of effort required

    We're also very visual which makes games so appealing

    One of the strongest point of games is the preference towards


    The ability to transform meaning into symbols was a huge step

    towards visual decluttering

    Health bar is a good example as it takes less space and uses symbols

    to represent meaning

  • http://fenix.agency/blog/

    Image source


  • http://fenix.agency/blog/

    What can we learn from that?

    Using symbols is often superior to text

    They are easy to understand, simple to produce and take less space

    The trend towards minimalism and symbolism is well documented

    and continues

    Tinder, for example, is a great example of an app that uses symbol

    and elegant mechanics

    In the future, UX will become even more context-based

  • http://fenix.agency/blog/

    An interesting example of a game that experimented with minimalism

    was Trespasser

    This is how you were supposed to check your remaining health

    It was a failure, but it did influence later games when it comes to UI

  • http://fenix.agency/blog/

    Know your place

    The Binding of Isaac is a game that gets (mostly) everything right

    It requires you to learn and repeat in order to master giving you vague

    and basic information

    Although it might seem counterintuitive, it knows its audience and the


    It's not afraid of trying, knowing that its players are not afraid of trying

    over and over again

  • http://fenix.agency/blog/

  • http://fenix.agency/blog/

    What can we learn from that?

    The Binding of Isaac is extremely user-centric

    It goes against the grain of modern UI because its players like to go

    against the mainstream gameplay

    It recognizes the needs of the target audience

    It's UI and UX are tailored to meet the needs of its target niche and

    target audience

  • http://fenix.agency/blog/

    The power of the click

    Morrowind, at the time of its release, had a great UI

    Extremely simple to use, with everything being just a click away, the

    UI was as simple as it gets

    With an item count and world as large as Morrowind's, lowering the

    amount of clicks and interactions was a necessity

    Morrowind implemented the one click mechanics to the fullest

  • http://fenix.agency/blog/

  • http://fenix.agency/blog/

    What can we learn from that?

    Conceptually, the three click rule makes a lot of sense although you

    shouldn't blindly follow it

    Potential customers will leave your site if they can't find what they're

    looking for in a short amount of time

    Modern webs and apps should be as intuitive as possible and pay a

    lot of attention to quality of information architecture

    That's especially prevalent in e-commerce where lowering the

    bounce rate is of great importance


  • http://fenix.agency/blog/

    Fitting the theme

    A couple of decades ago, video games relied heavily of completely

    on text-driven experience

    The lack of graphics required designers to think outside the box and

    be very creative

    Video game designers became masters of storytelling

    Fallout 2 is a great example of a game thats known for its attention

    to detail

  • http://fenix.agency/blog/

  • http://fenix.agency/blog/

    What sets Fallout 2 apart is the love for contextual details

    Almost everything is designed to fit the theme of the post-apocalyptic


    Even the boring elements, such as the text-HUD, are designed in the

    similar fashion

    The game doesnt let technical limitations get in the way of its UI and


    It does everything to create compelling experience

  • http://fenix.agency/blog/

  • http://fenix.agency/blog/

    What can we learn from that?

    Great User Experience comes from the holistic approach

    Just like in Fallout 2, all elements should create a compelling


    Best UI is the one that not only provides utility, but also tells a story

    Elements should be well thought out and serve as a building block of

    a larger system

  • http://fenix.agency/blog/

    Bonus content

    How can Solitaire help you explain how UI works

    Sonic the hedgehog and the Green hill zone

    How gamification works

    To view bonus content and learn more,

    make sure to read the full article here


  • http://fenix.agency/blog/

    About Fenix

    Fenix is a custom development agency focusing on mobile and

    web development. We provide custom-made solutions to a large

    variety of clients. Our clients thus far include Disney, Microsoft,

    Discovery Channel, TLC, Kinder Sport etc.

    To learn more about us, contact us at info@fenix.agency or take a

    look at our company profile.