CRAFTING UI VOLUME 1: User Interface design process based on decision-oriented approach.

1. CCRRAAFFTTIINNGG UUSSEERR
IINNTTEERRFFAACCEE

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

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

4. What IIss UUsseerr IInntteerrffaaccee??
E:__UIUI-08.odp / 4 of 33
industrial design field
User Interface (UI) = of human–machine interaction
INPUT
OUTPUT
GRAPHICS
TEXT
SOUNDS
...
FORMS
CONTROLS
...

5. What IIss UUsseerr IInntteerrffaaccee??
USABILE / UNEASY ...
CLEAR / CONFUSING
E:__UIUI-08.odp / 5 of 33
industrial design field
User Interface (UI) = of human–machine interaction
INPUT
OUTPUT
GRAPHICS
TEXT
SOUNDS
...
FORMS
CONTROLS
...

6. WWhhaatt IIss UUsseerr IInntteerrffaaccee??
IItt llooookkss lliikkee yyoouu aarree ggooiinngg ttoo
uussee tthhee eennggiinneeeerriinngg aapppprrooaacchh
USABILE / UNEASY wwhhiicchh ...
CLEAR / CONFUSING
iiss oouuttddaatteedd ssiinnccee
CCoolldd WWaarr aanndd ggeenneerraallllyy
ffiittss oonnllyy ffoorr ccyybboorrggss??
E:__UIUI-08.odp / 6 of 33
industrial design field
User Interface (UI) = of human–machine interaction
INPUT
OUTPUT
GRAPHICS
TEXT
SOUNDS
...
FORMS
CONTROLS
...

7. What IIss UUsseerr IInntteerrffaaccee?? //aapppplliieedd ttoo vviiddeeoo--ggaammeess
Players play Games through an Interface
EXPERIENCE
(UX, UeX)
E:__UIUI-08.odp / 7 of 33
UI
PLAYER GAME

8. What IIss UUsseerr IInntteerrffaaccee?? //aapppplliieedd ttoo vviiddeeoo--ggaammeess
EXPERIENCE
E:__UIUI-08.odp / 8 of 33
UI = MEDIA
UI
PLAYER GAME
GRAPHICS, TEXT, SOUNDS, FORMS & CONTROLS ...
= EXPRESSIVE MEANS

9. KKEEYY AA:: TTRRAANNSSPPAARREENNCCYY
The interface should be simple enough that Players will be able to use it without thinking
and let the Players do what they want.
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!
E:__UIUI-08.odp / 9 of 33
GGoooodd UUII == iinnvviissiibbllee ffoorr PPllaayyeerr

10. Why Game DDeessiiggnneerr sshhoouulldd ccaarree??
IInnddeeeedd,, wwhhyy ccaarree aabboouutt tthhee UUII ddeessiiggnn??
Makes an impression of the Game, sometimes
even earlier than graphics
* We'll give some examples when discussing best practices and common faults
E:__UIUI-08.odp / 10 of 33
Defines the way Game and Player communicate
Could be the 'unique selling point' that attracts
Client and Players if innovative + usable*
May spoil a Game if uneasy/confusing*
UI

11. What exactly ddooeess tthhee ggoooodd?? //aapppplliieedd ttoo ggaammee''ss UUII
E:__UIUI-08.odp / 11 of 33
Related concepts:
IMAGES SOUNDS
UI
TEXT
EXPERIENCE
...
...
Let's consider their values!

12. What exactly ddooeess tthhee ggoooodd?? //aapppplliieedd ttoo ggaammee''ss UUII
E:__UIUI-08.odp / 12 of 33
provides a nice perceptual
experience (I like it!)
Awesome picture
or sound =
intelligible, exciting
Awesome text = (I enjoy reading it!)
pleasant, surprising
(I have so much fun!)
Awesome
experience =

13. What exactly ddooeess tthhee ggoooodd?? //aapppplliieedd ttoo ggaammee''ss UUII
E:__UIUI-08.odp / 13 of 33
So, how to make a picture
awesome?

14. What exactly ddooeess tthhee ggoooodd?? //aapppplliieedd ttoo ggaammee''ss UUII
E:__UIUI-08.odp / 14 of 33
So, how to make a picture
awesome?
• Object / background
• Silhouette
• Rhythm / structure
• Framing
• Perspective / order
• Color
• Nice details
• ...
Harmony

15. What exactly ddooeess tthhee ggoooodd?? //aapppplliieedd ttoo ggaammee''ss UUII
E:__UIUI-08.odp / 15 of 33
Nice, so if we apply this rules
and methods to an UI —
would it be awesome?

16. What exactly ddooeess tthhee ggoooodd?? //aapppplliieedd ttoo ggaammee''ss UUII
E:__UIUI-08.odp / 16 of 33
Nice, so if we apply this rules
and methods to an UI —
would it be awesome?
NOPE! That would
serve no
function!

17. What exactly ddooeess tthhee ggoooodd?? //aapppplliieedd ttoo ggaammee''ss UUII
E:__UIUI-08.odp / 17 of 33
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

18. What exactly ddooeess tthhee ggoooodd?? //aapppplliieedd ttoo ggaammee''ss UUII
E:__UIUI-08.odp / 18 of 33
Nice, so if we have a beautiful-looking
UI that motivates Player
to behave in intended way —
would this be awesome?

19. What exactly ddooeess tthhee ggoooodd?? //aapppplliieedd ttoo ggaammee''ss UUII
E:__UIUI-08.odp / 19 of 33
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!

20. KKEEYY BB:: GGEENNEERRAALL VVIISSIIOONN
Interface should be accessible, visually appealing and manipulative. Layout and visual
appearance of a UI should be primarily based upon its intended purpose.
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.
E:__UIUI-08.odp / 20 of 33
FFoorrmm eevveerr ffoolllloowwss FFuunnccttiioonn

21. What goals has to pursue GGaammee''ss UUII ddeessiiggnn??
Cornerstones: Priorities:
EErrggoonnoommiiccss
VViissuuaall IIddeennttiittyy
AAcctt MMooddeess
E:__UIUI-08.odp / 21 of 33
AAcccceessssiibbllee // UUssaabbllee
AAppppeeaalliinngg // AAttttrraaccttiivvee
MMaanniippuullaattiivvee // CCoonnvviinncciinngg
Outcome: (interactive) UI layout and flow prototypes, artistic objective, TBI docs

22. User Interface DDeevveellooppmmeenntt FFllooww
Two general development cycle models:
E:__UIUI-08.odp / 22 of 33
PRE-PRODUCTION
PRODUCTION
DDEEVVEELLOOPPININGG TTEESSTTININGG
IDEA,
PROPOSAL
IDEA,
PROPOSAL
LLIVIVEE
A B

23. UUsseerr IInntteerrffaaccee DDeevveellooppmmeenntt FFllooww
Two general development cycle models:
E:__UIUI-08.odp / 23 of 33
PRE-PRODUCTION
PRODUCTION
DDEEVVEELLOOPPININGG TTEESSTTININGG
IDEA,
PROPOSAL
IDEA,
PROPOSAL
LLIVIVEE
UI DESIGN?
UI DESIGN?
A B

24. User Interface DDeevveellooppmmeenntt FFllooww
IDEA,
PROPOSAL..
E:__UIUI-08.odp / 24 of 33
Let's consider the procedure
in more detail:
IDEA,
PROPOSAL..
DESIGN
DOCS,
MOCKUPS
DESIGN
DOCS,
MOCKUPS
..DEVELOPMENT,
QA, RELEASE
..DEVELOPMENT,
QA, RELEASE
UI LAYOUT,
ARTISTIC
OBJECTIVE ??
UI LAYOUT,
ARTISTIC
OBJECTIVE
FORMALIZE
FUNCTION
PUT IN A
FORM

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

26. Formalizing UUII FFuunnccttiioonnss
Decision is a micro-unit of interaction flow:
E:__UIUI-08.odp / 26 of 33
BUY
BARRACKS
TRAIN 6
GRUNTS
TRAIN 3
SHAMAN
BUILD A NEW
BARRACKS
BUILD
SPIRIT LOGE
PLACE
BARRACKS
PICK
BARRACKS
...
DECISIONS FLOW

27. Formalizing UUII FFuunnccttiioonnss
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 / 27 of 33

28. Formalizing UUII FFuunnccttiioonnss
...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
E:__UIUI-08.odp / 28 of 33
design layouts intelligently
* We'll show how exactly do it a little bit later ;)

29. User Interface DDeevveellooppmmeenntt FFllooww //UUssiinngg DDMMPP MMooddeell
Thus, the procedure should look like this:
IDIDEEAA DDEEVV
E:__UIUI-08.odp / 29 of 33
ORGANIZED
DECISIONS
FLOW
ORGANIZED
DECISIONS
FLOW
GAMEPLAY
OR FEATURE
LOOP
GAMEPLAY
OR FEATURE
LOOP
UI LAYOUT,
ARTISTIC
OBJECTIVE
FUNCTION
FORM
DESIGN
DOCS,
MOCKUPS
DESIGN
DOCS,
MOCKUPS
UI LAYOUT,
ARTISTIC
OBJECTIVE

30. User Interface DDeevveellooppmmeenntt FFllooww //UUssiinngg DDMMPP MMooddeell
Development flow involving risk assessment:
IDIDEEAA DDEEVV
E:__UIUI-08.odp / 30 of 33
ORGANIZED
DECISIONS
FLOW
ORGANIZED
DECISIONS
FLOW
GAMEPLAY
OR FEATURE
LOOP
GAMEPLAY
OR FEATURE
LOOP
DESIGN
DOCS,
MOCKUPS
DESIGN
DOCS,
MOCKUPS
UI LAYOUT,
ARTISTIC
OBJECTIVE
UI LAYOUT,
ARTISTIC
OBJECTIVE
DECISIONS FLOW PROTOTYPE:
ERGONOMICS
UI MOCKUPS:
ACT MODEL, VISUAL ID
LAYOUT PROTOTYPE:
ERGONOMICS, ACT MODEL

31. KKEEYY CC:: IITTEERRAATTIIOONN
Gradual and evolutionary development is the key to any kind of design.
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.
E:__UIUI-08.odp / 31 of 33
Buuiilldd pprroottoottyyppeess ttoo mmiittiiggaattee rriisskkss

32. What tools use to prototype Game's UI and wwhhaatt ddooeess tthhee ggoooodd??
ITERATION PROTOTYPING TOOLS WHAT SHALL BE IN? HOW TO CHECK/COMPARE PROTOTYPES?
Gameplay
/Feature loop
analyzed,
decisions
organized as flow
E:__UIUI-08.odp / 32 of 33
Iteration UI Prototyping
tools
How to check
a prototype?
• 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.

33. TRANSPARENCY + GENERAL VVIISSIIOONN ++ IITTEERRAATTIIOONN
AAnnyy qquueessttiioonnss??
E:__UIUI-08.odp / 33 of 33