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.

3. Why are you here?
Bottom-Line Performance
3

4. CHALLENGES &
OPPORTUNITIES OF THE
SMALL SCREEN

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

6. How
many
people
can you
fit into
a….?
Bottom-Line Performance 6

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.

8. CRITERIA FOR UX, UI, ID,
GAD

9. UX Design Principles
Bottom-Line Performance 9
Design to smallest
screen: text, touch
targets

10. Bottom-Line Performance 10
This
becomes
much
smaller on
a iPhone 5
NEXT
This
becomes
much
smaller on
a iPhone 5
NEXT

11. UX Design Principles
Bottom-Line Performance 11
Design to smallest
screen: text, touch
targets
Focus on one key
action or use per
screen.

12. Bottom-Line Performance 12

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!

14. Bottom-Line Performance 14
To
this…
From
this…

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.

16. Bottom-Line Performance 16
From
this…
To
this…

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).

18. Bottom-Line Performance 18
Desktop
Phone

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.

20. Bottom-Line Performance 20

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.

23. Bottom-Line Performance 23

24. Bottom-Line Performance 24
Visual flash to focus attention Auditory effects for immersion

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.

26. Bottom-Line Performance 26

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.

31. GETTING IT ALL RIGHT
REQUIRES ITERATION

32. Bottom-Line Performance 32

33. Bottom-Line Performance 33

34. Bottom-Line Performance 34

35. Resource to
help you….
https://www.td.org/Publications/Books/Play-to-
Learn

36. Thank you for
letting me play
and share with
you!
Sharon Boller
President
Bottom-Line Performance, Inc.
Sharon@bottomlineperformance.com
@Sharon_Boller (Twitter)