UI / UX Design and Games

UI / UX Design

What is it?

UI – The User Interface of a game is the input methods and interfaces/screens through which a user interacts with the game.

UX – The User Experience of a game refers to how intuitive and enjoyable the experience of interacting with the game is.

The UI is tangible, for example using the mouse or touching an on screen button. The UX is untangible, for example an animation effect on a button that is subtle ,pleasing, and communicative.

UI Design is primarily a logical process rather than a creative one. This is because the design itself should be largely invisible as its goal is to enhance the game and not to be noticeable. It really does depend upon the game, building on design principles such as composition, color theory, lighting, typography, architecture etc will help to crteate something that stands out from the rest.

Why use it?

To achieve immersion through a quality and seamless user experience. To achieve a seamless user experience the user must be able to convert an idea into a game action with ease. A balance must be achieved on screen so that the perfect amount of information is displayed and how to interact with what is shown is obvious and natural.

The Fundamentals

♦ The interface should communicate only relevant information?

♦ The information that is needed should be easily accessible (is it obvious and easy to navigate to the required information through the UI)

♦ Interacting with the UI should be an intuitive experience and should not require any information on how to interact with it.

♦ It should be obvious to the user what I can interact with on screen.

♦ The experience should be seamless and fluid, the user should not have to wait for an interface to load or animate.

♦ Repetitive tasks or events should be fast and subtle.

How to acheive good UI and UX Design

Traditionally in software a UX designers job is to create an experience when using something for a purpose. These are the traditional common characteristics of UX design for software.

  • Transparent, so that the user needs to think as little as possible
  • Affordant, so that the user knows what possibilities it offers
  • Scalable, so that it unfolds as the user develops skills
  • Feedback-rich, so that the user knows when they did something
  • Constraining, so that the user can’t do things that get them in trouble

How do people interact with games?

UX design principles in games are often genre specifc, for example in an RTS game the panning camera through moving the mouse to the edges of screen is the expected norm for users.

User Experience Design and Game Experience Design

UX design in games is different than in other software. A good game is an immersive experience by design. The user experience of interacting with the game must ultimately support the game user experience. For example for a website traditionally with UX design you would show the minimum amount of information required to the user, however for a game, the game design may require the user to learn or solve a puzzle. Therefore more information is shown so as to satisfy the goal of the game design which is to provide an immersive and enjoyable game user experience. UX is about clarity that hides complexity while game design is about clarity that teaches complexity.

Clarity

At any place in an app, a few things should be perfectly clear to the user:

  • What just happened
  • Where you are
  • What you can do
  • What will happen when you do it

Just as in other software clarity is the first and most important job of any game interface. To be effective using an interface you’ve designed, people must be able to recognize what it is, care about why they would use it, understand what the interface is helping them interact with, predict what will happen when they use it, and then successfully interact with it. While there is room for mystery and delayed gratification in interfaces, there is no room for confusion. Clarity inspires confidence and leads to further use.

Consistency Matters

Screen elements should not appear consistent with each other unless they behave consistently with each other. Elements that behave the same should look the same. But it is just as important for unlike elements to appear unlike (be inconsistent) as it is for like elements to appear consistent. In an effort to be consistent novice designers often obscure important differences by using the same visual treatment (often to re-use code) when different visual treatment is appropriate.

Strong Visual Hierarchies Work Best

A strong visual hierarchy is achieved when there is a clear viewing order to the visual elements on a screen. That is, when users view the same items in the same order every time. Weak visual hierarchies give little clue about where to rest one’s gaze and end up feeling cluttered and confusing. In environments of great change it is hard to maintain a strong visual hierarchy because visual weight is relative: when everything is bold, nothing is bold. Should a single visually heavy element be added to a screen, the designer may need to reset the visual weight of all elements to once again achieve a strong hierarchy. Most people don’t notice visual hierarchy but it is one of the easiest ways to strengthen (or weaken) a design.

Smart Organization Reduces Cognitive Load

Group together like elements, show natural relationships by placement and orientation. By smartly organizing your content you make it less of a cognitive load on the user, they now do not have to think about how elements are related as it is obvious.

Interfaces exist to be used

As in most design disciplines, interface design is successful when people are using what you’ve designed.

Familiarity

Research shows that people enjoy seeing simple and familiar things. If something is an established norm then it should be used without any feeling of guilt.

 

Great design is Invisible

Great design usually goes unnoticed by the people who use it. One reason for this is that if the design is successful the user can focus on their own goals and not the interface.

Things To Consider

What am I on the screen?

Character Identification: The interface in games is more than how the user completes a task, it is also about to communicate with the user what they are on the screen and how that ‘character’ can be controlled through the UI. Immersion is critical in games and so making the user connect with the player ‘character’ is key.

Screen Space

Screen space should be used and not wasted, everything on screen should serve a purpose. Bigger is better but always try to show an appropriate amount of elements, scrolling should be avoided if possible.

Some Tips

  • Reptitive scrolling due to linear lists is never a good idea.
  • Not responding to clicks sometimes is not good, it should be obvious when input is working and when it is not.
  • Having the HUD  fading in and out is a good idea if that information is not constantly required, for example, the information does not change and is not required by the player all the time. When the player has low health the hud may instead not fade. If the HUD started pulsating it may distract from the game experience however due to the game design you may want the player to be distracted and aware that their health is low.
  • Don’t remind the user that they are using software, sudden pop ups are not good.
  • Everything should be a few clicks or touches away.
  • Aural feedback is important and enhances the user experience.
  • Reduce delays where possible especially around repetitive tasks.
  • Complex multi layered games sometimes require a more elaborate UI that must communicate a lot of information. Here pop ups or tool tips can be used to display that information when the user needs it.
  • Make something flexible, meaning something that looks in good in any possible situation.
  •  Connect emotionally with the user through color theory.
  • Sometimes elements that can help save you space, put more of a burden on the user mentally by forcing them to guess what is within the dropdown or what the element might be.

Leave a Reply

Your email address will not be published. Required fields are marked *