Embed Size (px)
Citation preview
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.”
