what could gaming learn from ui/ux...

What Could Gaming Learn from UI/UX Design?

James Chaytor CEO, Sprung Studios

●SPRUNG STUDIOS A UNIQUE DESIGN AGENCY

SPECIALIZING IN UX/UI DESIGN

WHAT DO WE DO?

GAMES MOBILE TV DESKTOP

ESTABLISHED IN 2005

A LOT OF DIFFERENT INTERACTION PRINCIPLES ACROSS A LOT OF PLATFORMS

WHAT DO WE DO?

CSR RACING

• CSR Racing top grossing

game of 2012

• Featured in Apple keynote

• Grossed over $12 million

a month for over a year

• Experience was over 60%

UX/UI

CSR RACING

WORKSHOP

MAP

RACE

MY DESIGN HISTORY…

Interaction digital products require

and respond to human input, and

change their own content or

behaviour based on that input.

WHAT IS UX/UI DESIGN?

Industrial design Hardware form, aesthetics and ergonomics

Visual design Colour, typography and layout of images/transitions

Information design Clear communication of concepts of data.

Interaction design Defines the behaviour of a product; also concerned with form and

content as they relate to system behaviour and user input.

UX/UI DESIGN IS…

WHAT YOU COULD DO…

USER FLOWS

• Each box represents one page

• Decision trees included

• Don’t just rely on ‘back’ button

• Don’t obsess about number of clicks.

USER FLOWS

“The number of necessary clicks affects neither user satisfaction, nor success rate. Fewer clicks don’t make users happier and

aren’t necessarily perceived as faster.

What really counts here is ease of navigation, the constant scent of

information along the user’s path. If you don’t make the user think about the clicks, they won’t mind having a few extra clicks.”

UXMyths.com

USER FLOWS

• Gravity Assist or Slingshot

theory.

• “The use of relative

movement to speed up a

spacecraft in order to save

time/expense.”

• UX designers want to save

time too, on behalf of their

users.

USER FLOWS

Editorial Recommendation

Social Recommendation

Sponsored Recommendation

USER FLOWS

Where will the user go next?

USER FLOWS

EXAMPLE

CSR Racing instigation of ‘sleep-walking menu’

WIREFRAMES

• Hi-fidelity wireframes can be

tested.

• Bring to the wireframes an

understanding of:

1. Positioning

2. Font size

3. Division of information

WIREFRAMES

USER EXPERIENCE IS A

DESIGNERS JOB!

WIREFRAMES

• Layout consistency

• Interaction consistency

• Try to solve spacial issues

• List out all possible pop-up scenarios to

avoid multiple pop-ups.

WIREFRAMES

• Keep colour out of it.

• Layout consistency AGAIN

• People won’t see the A, B, C Designs

• Think about the icon.

WIREFRAMES

• In the 1980’s a branch of economics

known as Chicago School started.

• It’s fundamental principle was “rational

choice theory”: but this was flawed.

• Our minds are biased and flawed, but

predictably so.

• It is this predictability that makes it

possible to change behaviour and the

concept of the nudge was born.

• Nudge = choice architecture.

New Scientist (April issue 2013)

CHOICE ARCHITECTURE

• In 1999 economist Aad Kieboom

had an idea to cut the costs of

cleaning the men’s toilets at

Schiphol Airport in Amsterdam.

• He had a picture of a fly etched

into each urinal

• The cleaning bill dropped by 80%

New Scientist (April issue 2013)

CHOICE ARCHITECTURE

• The city of Chicago reduced the

number of car accidents on the

scenic but twisty Lake Shore

Drive by painting white stripes on

the approaches to sharp turns.

• The stripes get progressively

closer together, creating the

illusion that you are speeding up.

New Scientist (April issue 2013)

CHOICE ARCHITECTURE

Social Proof

Reassurance / Previous purchase

Fear / Scarcity

Reward / Excitement

CHOICE ARCHITECTURE

Indication of status

Easy choice / Abstract

Option for Free Gas

IMPATIENCE

CHOICE ARCHITECTURE

UI DESIGN

COMMON INTERACTION PRACTICES

UI DESIGN

You can use well known interaction archetypes from app designs

UI DESIGN

INFORMATION DESIGN

• Get inspiration from Information Design

• Think of novel ways of presenting information

• Think of how movement could add to

experience

UI DESIGN

UI DESIGN

UI DESIGN

UI DESIGN

DESIGNING FOR GENRES

EXAMPLE

EXAMPLE Foretold- a modern twist on the fantasy genre.

EXAMPLE

CONSISTENCY OF NAVIGATION

CSR Racing - Consistency achieved across different navigation paradigms.

EXAMPLE

Lichdom Battlemage - consistency achieved across different navigation

paradigms.

EXAMPLE

Lichdom Battlemage - consistency achieved across different navigation

paradigms.

EXAMPLE

EXAMPLE

THINK CONTRAST - ACCESSIBILITY

Surge Deluxe – addressing accessibility issues through UI Design

EXAMPLE

EXAMPLE

ANIMATION/SOUND AS A REWARD

• Movement is a reward

• Consider animations carefully

• Consider sounds carefully

• Always let the user skip them

EXAMPLE

• Consider everything that everyone else has

done and then give it a unique twist.

• Treat games as brands, easy to recognise

and appreciate.

UI DESIGN

• Think about your audience

• Bigger curves/bevel = less sophisticated

• Windows 8 Phone style is hard to own

• Think of visual design as a brand

• Consider dpi of the system for fonts (Retina

vs Vita)

UI DESIGN

• Conform to rules of button size and stick to it

• Careful who you canvas opinion from initially

• Send initial concept designs through testing

UI DESIGN

UI DESIGN

ICONOGRAPHY IS VITAL

ICONOGRAPHY

ICONOGRAPHY

• Create a family set

• Always use the same treatments

• Think about hover/touch/selection/hit

ICONOGRAPHY

• Tell a story

• Give visual clues about genre

• Intrigue the player

• Think about the name - will it truncate?

APP ICON DESIGN

Coercive Monetization Putting the consumer in an undesirable position in the game and them

offering to remove this “pain”.

Premium Currencies Purchase currency in-app and allowing users to see the currency at all

times in the interface is less anxiety generating.

Skill Games vs Money games Sound decisions ensure success as opposed to your ability to pay.

Reward Removal Give players rewards as they play and then make their “loss”

inevitable unless they pay

Ramin Shokrizade (Gamasutra)

F2P MONETISATION

• The UI is not a sticking plaster

• Get Progression Working Really Well

• Offer Nudges, Not Gateways

• Less Smash And Grab

F2P MONETISATION

Many conventions in UX/UI design have been

adopted by the entire world.

EAST MEETS WEST

And we have this in common.

EAST MEETS WEST

• Touch helps UX/UI Design:

• Buttons have minimum sizes for touch

• Chinese characters have a minimum font

size of 12pt and touch requires at least 14pt

so legibility is improved

EAST MEETS WEST

• Cultural differences often based on colour.

• In China, Red is a colour for good luck and

happiness.

• In the West, Red is often said to be used as

a warning of a signal that something has

gone wrong.

EAST MEETS WEST

“GOOD UX DESIGN GIVES THE USER NO

BARRIER TO USING A PRODUCT.

GOOD UI DESIGN MAKES THEM FEEL

REWARDED FOR CONTINUING TO DO SO.”

jim@sprungstudios.com

Twitter: ChaytorJames

THANK YOU