Scribd
Upload
27 views40 pages

07 UI Design

Uploaded by

Link Hero
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
27 views40 pages

07 UI Design

Uploaded by

Link Hero
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

CS 325 : Designing User Interfaces

“User interface design in games differs from other UI design because it involves an
additional element : fiction”
User Interface design

UI in games differ with other UIs in one element: FICTION

Player becomes invisible but key element (like a narrator).

As said in the previous topic we can use UI techniques to increase


the relation between the player end the game.

2
User Interface design

Historically games did not need complex UI.


No complex narrative component.

3
User Interface design

As games evolve, more complex UIs needed.


FPS like Call of Duty, HALO, MoH, … changed how this was
designed.

Modern UI can be classified indifferent groups depending on how


linked to the narrative they are and game´s geometry.
“Beyond the HUD -- User Interfaces for Increased Player Immersion in FPS Games.”

Not everything is Dead Space.

4
User Interface design

5
User Interface design: DIEGETIC

DIEGETIC USER INTERFACE :


DUI elements exist within the game world.
PLAYER and AVATAR can interact with UI through visual, audible
or haptic means.
Well executed they increase immersion and narrative experience.

6
User Interface design: DIEGETIC

Metro 2033
Perfect integration of non-future elements in a diegetic user
interface.

7
User Interface design: DIEGETIC

Metro 2033
Slow response is part of the design telling the user how weak
humans are against monsters.

Can be frustrating if used to faster and less realistic games.

8
User Interface design: DIEGETIC

Batman
Fiction games use technology to justify overlaying UI over real
environments.

9
User Interface design: DIEGETIC

Batman
Futuristic and “fiction” games use this.

10
User Interface design: DIEGETIC

Batman
Futuristic and “fiction” games use this.

11
User Interface design: DIEGETIC

Batman
Futuristic and “fiction” games use this.

12
User Interface design: DIEGETIC

Batman
Futuristic and “fiction” games use this.

13
User Interface design: DIEGETIC

Batman
It once was a great game mechanic. But nowadays is a knock-off
of some other game.

Cheap trick that steals game features from other games.

Why do they keep doing it ?

14
User Interface design: DIEGETIC

The problem of lazy designers :

Batman : Detective mode (well, it´s Batman).


Assassins Creed : Eagle vision (well, it´s fiction).
Tomb Raider : Survival instincts (why ? Lara Croft has no
superpowers).
Last Of US : Super hearing ? (well, it´s Daredevil ?)

15
User Interface design: DIEGETIC

Sometimes it feels like cheating.

What prevents me from going DM during the whole Batman


Arkham adventure ?

If we plan to include something like this, maybe we should lower


it´s use. The first approach could be punishing the user.

16
User Interface design: DIEGETIC

17
User Interface design: META

META USER INTERFACE :


2D UI elements that still keep game´s narrative.
Like 2D Diegetic elements

Both techniques can be mixed. Or swapped like some racing


games.

18
User Interface design: META

Gran Turismo Sport :


2D elements simulate car´s dashboard

19
User Interface design: META

Gran Turismo Sport :


2D elements simulate car´s dashboard and can be mixed with
diegetic

20
User Interface design: META

Any shooter since 2000:


Blood splash in screen is the universal way in games to tell the
user to run.

21
User Interface design: META

Grand Theft Auto


On Rockstar they put a lot of effort on creating awesome UI to
enhance the narrative.

22
User Interface design: META

Grand Theft Auto


Nico Bellic´s phone represents that mixing diegetic and meta UI.

23
User Interface design: META

Grand Theft Auto


Other tools like companion apps can be a revolution to this UIs.

24
User Interface design: META

Since games are 3D elements (most of the time) shown in 2D (TV)


and received in 3D (human view), meta UIs don´t feel strange.

There´s an exception where META UIs go against user´s


experience.

25
User Interface design: META

Since games are 3D elements (most of the time) shown in 2D (TV)


and received in 3D (human view), meta UIs don´t feel strange.

There´s an exception where META UIs go against user´s


experience.

26
User Interface design: META

In VR having a 2D interface breaks immersion (which is the actual


goal of VR).

We need to force them to be Diegetic.


To know more :
●
Cs388
●
https://www.youtube.com/watch?v=78F_HNWuqbw

27
User Interface design: META

What about this ?

28
User Interface design: META

What about this ? Now translated to VR

29
User Interface design: META

In Iron Man´s helmet, we can´t say that the UI is META since it´s
not a 2d version of something. It´s an actual projection close to
the face.

In UI terminology we call it SPATIAL USER INTERFACE.


It can also be diegetic (the line between them is thin).

30
User Interface design: SPATIAL

SPATIAL USER INTERFACE :


Spatial UI elements are used when there's a need to break the
narrative in order to provide more information to the player than the
character should be aware of.
They still sit within the geometry of the game's environment to help
immerse the player and prevent them from having to break the
experience by jumping to menu screens.
The closer these follow the rules of the game's fiction the more they
can help immerse the player.

31
User Interface design: SPATIAL

They break the narrative, but not much.

32
User Interface design: SPATIAL

Some games have golden trails to show paths.

33
User Interface design: SPATIAL

If we justify it we can make it part of the narrative

34
User Interface design: SPATIAL

We can also use another tool to do the same work.

35
User Interface design: SPATIAL

Spatial UI has become an standard when interacting with 3d


elements.

36
User Interface design: SPATIAL

Also on some menus.

37
User Interface design: NON DIEGETIC

Sometimes we can´t create Diegetic, Meta or Spatial User


Interfaces.
In these cases we talk about normal or NON DIEGETIC USER
INTERFACES.

38
User Interface design: NON DIEGETIC

Easy to create.
Easy to show needed information.
Narrative breakers.
Sometimes unavoidable..

39
User Interface design

Conclusion:
●
The less narrative breaker they are, Uis are considered better.
●
Sometimes it´s impossible to integrate everything.
●
Knowledge and practice is power.
●
Modern markets are changing this.
●
New inputs set new standards.

40

You might also like