Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

When Games Go Small

108 views

Published on

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.

Published in: Education
  • Be the first to comment

  • Be the first to like this

When Games Go Small

  1. 1. WHEN GAMES GO SMALL By Sharon Boller | June 2017 A presentation from
  2. 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. 3. Why are you here? Bottom-Line Performance 3
  4. 4. CHALLENGES & OPPORTUNITIES OF THE SMALL SCREEN
  5. 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. 6. How many people can you fit into a….? Bottom-Line Performance 6
  7. 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. 8. CRITERIA FOR UX, UI, ID, GAD
  9. 9. UX Design Principles Bottom-Line Performance 9 Design to smallest screen: text, touch targets
  10. 10. Bottom-Line Performance 10 This becomes much smaller on a iPhone 5 NEXT This becomes much smaller on a iPhone 5 NEXT
  11. 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. 12. Bottom-Line Performance 12
  13. 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. 14. Bottom-Line Performance 14 To this… From this…
  15. 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. 16. Bottom-Line Performance 16 From this… To this…
  17. 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. 18. Bottom-Line Performance 18 Desktop Phone
  19. 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. 20. Bottom-Line Performance 20
  21. 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. 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. 23. Bottom-Line Performance 23
  24. 24. Bottom-Line Performance 24 Visual flash to focus attention Auditory effects for immersion
  25. 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. 26. Bottom-Line Performance 26
  27. 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. 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. 29. TE Town mobile game – I’ll play; you evaluate Bottom-Line Performance 29
  30. 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. 31. GETTING IT ALL RIGHT REQUIRES ITERATION
  32. 32. Bottom-Line Performance 32
  33. 33. Bottom-Line Performance 33
  34. 34. Bottom-Line Performance 34
  35. 35. Resource to help you…. https://www.td.org/Publications/Books/Play-to- Learn
  36. 36. Thank you for letting me play and share with you! Sharon Boller President Bottom-Line Performance, Inc. Sharon@bottomlineperformance.com @Sharon_Boller (Twitter)

×