Vasily Shamray “Crafting Game UI”

CRAFTING USER
CRAFTING USER
INTERFACE
INTERFACE

E:__UIUI-08.odp / 2 of 33
What Is User Interface?
industrial design field
of human–machine interaction
User Interface (UI) =

INPUT
OUTPUT
GRAPHICS
TEXT
SOUNDS
...
FORMS
CONTROLS
...

INPUT
OUTPUT
GRAPHICS
TEXT
SOUNDS
...
FORMS
CONTROLS
...
USABILE /UNEASY
CLEAR/CONFUSING
...

INPUT
OUTPUT
GRAPHICS
TEXT
SOUNDS
...
FORMS
CONTROLS
...
USABILE /UNEASY
CLEAR/CONFUSING
...
It looks like you are going to
It looks like you are going to
use the engineering approach
use the engineering approach
which is outdated since
which is outdated since
Cold War and generally
Cold War and generally
fits only for cyborgs?
fits only for cyborgs?

EXPERIENCE
(UX,UeX)
UI
PLAYER GAME
Players play Games through an Interface
What Is User Interface? /appliedto video-games
/appliedto video-games

EXPERIENCE
UI
PLAYER GAME
UI = MEDIA
What Is User Interface? /appliedto video-games
/appliedto video-games
GRAPHICS, TEXT, SOUNDS, FORMS & CONTROLS ...
= EXPRESSIVE MEANS

KEY A: TRANSPARENCY
KEY A: TRANSPARENCY
When it comes to games, a Player should NOT care about usability or clearness of data
representation, should NOT think in terms of 'input' or 'output'. This could distract the
Attention and disturb the Immersion. This is you, the Designer who should care about it!
Good UI =
Good UI = invisible
invisible for Player
for Player
The interface should be simple enough that Players will be able to use it without thinking
and let the Players do what they want.

E:__UIUI-08.odp / 10 of 33
Why Game Designer should care?
Why Game Designer should care?
* We'll give some examples when discussing best practices and common faults
Defines the way Game and Player communicate
Could be the 'unique selling point' that attracts
Client and Players if innovative + usable*
Makes an impression of the Game, sometimes
even earlier than graphics
May spoil a Game if uneasy/confusing*
UI
Indeed,
Indeed, why care
why care about the UI design?
about the UI design?

E:__UIUI-08.odp / 11 of 33
What exactly does the good?
What exactly does the good? /appliedto game'sUI
/appliedto game'sUI
Related concepts:
SOUNDS
IMAGES
UI
TEXT
EXPERIENCE
...
...
...
Let's consider their values!

E:__UIUI-08.odp / 12 of 33
/appliedto game'sUI
provides a nice perceptual
experience (I like it!)
Awesome picture
or sound =
intelligible, exciting
(I enjoy reading it!)
Awesome text =
pleasant, surprising
(I have so much fun!)
Awesome
experience =

E:__UIUI-08.odp / 13 of 33
/appliedto game'sUI
So, how to make a picture
awesome?

E:__UIUI-08.odp / 14 of 33
/appliedto game'sUI
So, how to make a picture
awesome?
• Object / background
• Silhouette
• Rhythm / structure
• Framing
• Perspective / order
• Color
• Nice details
• ...
Harmony

E:__UIUI-08.odp / 15 of 33
/appliedto game'sUI
Nice, so if we apply this rules
and methods to an UI —
would it be awesome?

E:__UIUI-08.odp / 16 of 33
/appliedto game'sUI
Nice, so if we apply this rules
and methods to an UI —
would it be awesome?
NOPE!
That would
serve no
function!

E:__UIUI-08.odp / 17 of 33
/appliedto game'sUI
What about posters? They serve
a function or a purpose:
to deliver a message / motivate
• Awesome picture
• Clear & convincing
message
Form and Function
in a harmony

E:__UIUI-08.odp / 18 of 33
/appliedto game'sUI
Nice, so if we have a beautiful-
looking UI that motivates Player
to behave in intended way —
would this be awesome?

E:__UIUI-08.odp / 19 of 33
/appliedto game'sUI
Nice, so if we have a beautiful-
looking UI that motivates Player
to behave in intended way —
would this be awesome?
NOT YET!
This model
lacks of
interaction!

E:__UIUI-08.odp / 20 of 33
KEY B: GENERAL VISION
KEY B: GENERAL VISION
Game Designer should use design rules, cognitive and perceptual science to create an
interactive system satisfying specified requirements and considering it's function or goal.
Interface should be accessible, visually appealing and manipulative. Layout and visual
appearance of a UI should be primarily based upon its intended purpose.
Form ever
Form ever follows
follows Function
Function

E:__UIUI-08.odp / 21 of 33
What goals has to pursue Game's UI design?
What goals has to pursue Game's UI design?
Cornerstones: Priorities:
Ergonomics
Ergonomics
Visual Identity
Visual Identity
Act Modes
Act Modes
Accessible / Usable
Accessible / Usable
Appealing / Attractive
Appealing / Attractive
Manipulative / Convincing
Manipulative / Convincing
Outcome: (interactive) UI layout and flow prototypes, artistic objective, TBI docs

E:__UIUI-08.odp / 22 of 33
User Interface Development Flow
PRE-
PRODUCTION
PRODUCTION
Two general development cycle models:
IDEA,
PROPOSAL
IDEA,
PROPOSAL
DEVELOPING
DEVELOPING TESTING
TESTING
LIVE
LIVE
B
A

E:__UIUI-08.odp / 23 of 33
PRE-
PRODUCTION
PRODUCTION
IDEA,
PROPOSAL
IDEA,
PROPOSAL
DEVELOPING
DEVELOPING TESTING
TESTING
LIVE
LIVE
Two general development cycle models:
UI DESIGN?
UI DESIGN?
B
A

E:__UIUI-08.odp / 24 of 33
Let's consider the procedure
in more detail:
IDEA,
PROPOSAL..
IDEA,
PROPOSAL..
DESIGN
DOCS,
MOCKUPS
DESIGN
DOCS,
MOCKUPS
..DEVELOPMENT,
QA,RELEASE
..DEVELOPMENT,
QA,RELEASE
UILAYOUT,
ARTISTIC
OBJECTIVE
UILAYOUT,
ARTISTIC
OBJECTIVE
?
?
FORMALIZE
FUNCTION
PUTINA
FORM

E:__UIUI-08.odp / 25 of 33
Formalizing UI Functions
Treating Player's interaction with the Game
as a Decision Making Process leads
to the formal approach:
PLAYER: MAKES DECISIONS GAME: ASKS QUESTIONS, REACTS
LET'S TRAIN
PEONS!
WENEED
MOREGOLD!

E:__UIUI-08.odp / 26 of 33
Decision is a micro-unit of interaction flow:
BUY
BARRACKS
TRAIN6
GRUNTS
TRAIN3
SHAMAN
BUILDANEW
BARRACKS
BUILD
SPIRITLOGE
PLACE
BARRACKS
PICK
BARRACKS
...
DECISIONS FLOW

E:__UIUI-08.odp / 27 of 33
Things that help to understand this model:
Some decisions may be taken only after other ones
(i.e.: training units possible only after building barracks)
Several micro- decisions can be generalized in a macro- decision
(I.e.: buy barracks + place barracks + train grunts = start light units production)
To roll back a previously taken decision = one more decision
(I.e.: dismantle barracks)
A human can consciously take only 1 decision in a time.
But if an activity becomes familiar, human's brain will tend
to take some decisions unconsciously.

E:__UIUI-08.odp / 28 of 33
...if order all decisions (that Player would take
during the gameplay, while utilizing certain
feature or loop) to a flow*, it will allow us to
design layouts intelligently
* We'll show how exactly do it a little bit later ;)

E:__UIUI-08.odp / 29 of 33
User Interface Development Flow /UsingDMPModel
/UsingDMPModel
Thus, the procedure should look like this:
ORGANIZED
DECISIONS
FLOW
ORGANIZED
DECISIONS
FLOW
GAMEPLAY
ORFEATURE
LOOP
GAMEPLAY
ORFEATURE
LOOP
FUNCTION FORM
DESIGN
DOCS,
MOCKUPS
DESIGN
DOCS,
MOCKUPS
UILAYOUT,
ARTISTIC
OBJECTIVE
UILAYOUT,
ARTISTIC
OBJECTIVE
IDEA
IDEA DEV
DEV

E:__UIUI-08.odp / 30 of 33
ORGANIZED
DECISIONS
FLOW
ORGANIZED
DECISIONS
FLOW
GAMEPLAY
ORFEATURE
LOOP
GAMEPLAY
ORFEATURE
LOOP
DESIGN
DOCS,
MOCKUPS
DESIGN
DOCS,
MOCKUPS
UILAYOUT,
ARTISTIC
OBJECTIVE
UILAYOUT,
ARTISTIC
OBJECTIVE
User Interface Development Flow /UsingDMPModel
/UsingDMPModel
Development flow involving risk assessment:
IDEA
IDEA DEV
DEV
DECISIONS FLOW PROTOTYPE:
ERGONOMICS
UI MOCKUPS:
ACTMODEL,VISUALID
LAYOUT PROTOTYPE:
ERGONOMICS,ACTMODEL

E:__UIUI-08.odp / 31 of 33
KEY C: ITERATION
KEY C: ITERATION
The more times you test and improve your design, the better your game will be. Build as many
rough prototypes as possible to loop as fast as possible.
Gradual and evolutionary development is the key to any kind of design.
Build
Build prototypes
prototypes to mitigate risks
to mitigate risks

E:__UIUI-08.odp / 32 of 33
What tools use to prototype Game's UI and what does the good?
What tools use to prototype Game's UI and what does the good?
Iteration UI Prototyping
tools
How to check
a prototype?
ITERATION PROTOTYPING TOOLS WHAT SHALL BE IN? HOW TO CHECK/COMPARE PROTOTYPES?
Gameplay
/Feature loop
analyzed,
decisions
organized as flow
• Mind-mapping tools (
XMind, Mindomo, ...)
• Trees of decisions that
player would take during
Action, Incentive and
Expansion phases
• Which way gives Player more fun or more control?
• Which way causes the Player to take more meaningful
and simple choices, right number of choices?
• Would we need extra UI/tutorial to teach a Player
how to play with this?
Flow split by
channels/screens
• Pen & paper (screens
deck)
• UI prototyping tools (
Balsamiq, Fluid UI, …)
• Project-specific tools
(Aurora GT, Flash, …)
• Drawings for each step
on a separate sheet in the
proportions of target
screen
• 'Gray' UI prototypes,
possibly interactive
• Interactive prototypes
• Shuffle the deck of drawings and analyze random
page: would Player catch, what is this about?
• Watch as someone plays trough prototypes: does UI
do what expected? If not, why? Is UI easy to master?
• Is the interface simple enough that with practice,
Players will be able to use such UI without thinking?
Working layout
prototype
selected, artists
prepared first
mockups
• Graphic Editors • Static mockups, UI
flowchart
• Does the reading order of the UI correspond to the
intended order of decisions to be taken by Player?
• Look at the mockup trough 50% gray mask, squinting
or at a distance: do any important elements disappear?
• Look at the picture through a small hole imitating the
movements of the eyes: pay extra attention to not
informative, empty or obscure fragments.

E:__UIUI-08.odp / 33 of 33
TRANSPARENCY + GENERAL VISION + ITERATION
TRANSPARENCY + GENERAL VISION + ITERATION
Any questions?
Any questions?

Vasily Shamray “Crafting Game UI”

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (13)

Similar to Vasily Shamray “Crafting Game UI”

Similar to Vasily Shamray “Crafting Game UI” (20)

More from Lviv Startup Club

More from Lviv Startup Club (20)

Recently uploaded

Recently uploaded (20)

Vasily Shamray “Crafting Game UI”