what could gaming learn from ui/ux design? .•touch helps ux/ui design: •buttons have minimum

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

Dont just rely on back button

Dont obsess about number of clicks.

USER FLOWS

The number of necessary clicks affects neither user satisfaction, nor success rate. Fewer clicks dont make users happier and

arent necessarily perceived as faster.

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

information along the users path. If you dont make the user think about the clicks, they wont 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 wont see the A, B, C Designs

Think about the icon.

WIREFRAMES

In the 1980s a branch of economics

known as Chicago School started.

Its 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 mens 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

mailto:jim@sprungstudios.commailto:jim@sprungstudios.com