Slides from Focus on Learning conference that share principles from UX, UI, game design, and instructional design to follow when creating learning games for the phone.
1. WHEN GAMES GO SMALL
By Sharon Boller | June 2017
A presentation from
2. What I’m here for….
Bottom-Line Performance 2
1. Talk about the particular challenges of a small screen
from four perspectives:
• ID, GD, UX, UI
2. Devise criteria for evaluating for quadrants: game
design, learning design, and UX design.
3. Examine some mobile games and show how iteration is
essential to being successful across quadrants.
4. Convince you to paper prototype before you build and to
iterate on what you build.
5. Four designs that
each require different skills &
knowledge to produce
Creating a
successful mobile
game requires…
User Experience
Design
User Interface
Design
Instructional
Design
Game
Design
7. User Experience
Design
User Interface
Design
Instructional
Design
Game Design
The framework
and navigation
design: makes
your app 1) easy
to learn; 2) easy to
use 3) easy to
add/build onto it
later!!!!
Graphical “look
and feel” of the
game; provides
the aesthetics and
helps create a
mood or “feel.”
The design and
structure of the
experience to
meet specific
learning need for
specific
audience(s).
The design of the
play experience:
the core
dynamics, rules, &
game elements
that work together
to enable players
to achieve a game
goal.
13. UX Design Principles
Bottom-Line Performance 13
Design to smallest
screen: text, touch
targets
Focus on one key
action or use per
screen.
Cut the clutter!
15. UX Design Principles
Bottom-Line Performance 15
Design to smallest
screen: text, touch
targets
Focus on one key
action or use per
screen.
Cut the clutter!
Make navigation
intuitive.
17. UX Design Principles
Bottom-Line Performance 17
Design to smallest
screen: text, touch
targets
Focus on one key
action or use per
screen.
Cut the clutter!
Make navigation
intuitive.
Make the experience
seamless (if web or
hybrid app).
19. UX Design Principles
Bottom-Line Performance 19
Design to smallest
screen: text, touch
targets
Focus on one key
action or use per
screen.
Cut the clutter!
Make navigation
intuitive.
Make the experience
seamless (if web
app).
Cater to contrast.
21. UX Design Principles
Bottom-Line Performance 21
Design to smallest
screen: text, touch
targets
Focus on one key
action or use per
screen.
Cut the clutter!
Make navigation
intuitive.
Make the experience
seamless (if web
app).
Cater to contrast.
Design for how
people hold a phone.
Minimze the need to
type.
22. UX Design Principles
Bottom-Line Performance 22
Design to smallest
screen: text, touch
targets
Focus on one key
action or use per
screen.
Cut the clutter!
Make navigation
intuitive.
Make the experience
seamless (if web
app).
Cater to contrast.
Design for how
people hold a phone.
Minimze the need to
type.
Attend to small
details.
25. UI Design Principles
Bottom-Line Performance 25
Be consistent:
buttons, text, screen
“types”
Design to your user. Don’t re-invent; stick
with common
conventions.
Enhance the focus;
don’t BE the focus.
Assume mistakes. Provide clear
feedback.
27. Give specific,
timely feedback
Instructional Design Principles
Bottom-Line Performance
Mental
involvement
Memory
builders
Tap
motivation
Balance
cognitive load
Provide relevant
practice
Trigger emotion
Use spacing &
repetition Use stories
28. Game Design Principles
Bottom-Line Performance
Provide intriguing
goal or challenge
Balance game
complexity
Too
hard; too
much
Too
easy;
too little
Use appropriate
game elements
Design to your
target
Stick with 1 or 2
core dynamics
Race to the
Finish
Exploration
Alignment
Other?
Provide clear
rules
29. TE Town mobile game
– I’ll play; you evaluate
Bottom-Line Performance 29
30. Let’s put this all together
Bottom-Line Performance 30
• Work in groups of 2-3.
• Use your handout. As I walk you through
TE Town; brainstorm how you see the
principles applied.
• Note places you would do something
different.
36. Thank you for
letting me play
and share with
you!
Sharon Boller
President
Bottom-Line Performance, Inc.
Sharon@bottomlineperformance.com
@Sharon_Boller (Twitter)