An introduction on how to apply UX Principles in the Design and Development of Serious Game.

1. UX Principles in
Serious Game
Josh (Adi Tedjasaputra) | josh@uxindo.com
UX Indonesia | uxindo.com | @indonesia_ux

2. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Josh (Adi Tedjasaputra, MSc)
• General Chair of Indonesia ACM SIGCHI Chapter (CHI UX Indonesia)
• General Chair of Indonesian Interaction Design Association (PIDI)
• Member of IEEE – Internet of Things Community
• Member of IEEE Technical Committee on RFID
• Member of IEEE – Smart Cities Community
• Associate of Australian Computer Society
• Professional Member of Association for Computing Machinery and SIGCHI Member
• Fully Registered Teacher of Teacher Registration Board of Western Australia
• M.Sc in Computer Systems Engineering (Denmark)
• B.Sc (Hons) in Electrical Engineering (Indonesia)
• Dipl in Japanese Language, Economic and Culture (Japan)
• Cert IV in Training and Assessment, Workforce Development and Training (Australia)
Director and Co-Founder, UX Indonesia

3. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Seeing Theory: Is it a Serious Game?
• Goal: Make statistics more accessible through
interactive visualizations
• Each topic area consists of a series of three interactive
graphs
• The interactive graphs illustrate concepts while letting
users play around with data
• It is expected to become a teaching tool
• It is not expected to be a quick guide to be
consumed within an hour
Sources: http://students.brown.edu/seeing-theory/ | https://www.fastcodesign.com/3068795/a-visual-guide-to-statistics
http://students.brown.edu/seeing-theory

4. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Serious Game: More than entertainment
• “Games may be played seriously or casually. We are concerned
with ‘Serious Games’ in the sense that these games have an
explicit and carefully thought-out educational purpose and are
not intended to be played primarily for amusement. This does not
mean that serious game are not, or should not be, entertaining.”
(Abt, 2009)
• “Any form of interactive computer-based game software for one
or multiple players to be used on any platform and that has been
developed with the intention to be more than entertainment.”
(Ritterfeld et al., 2009, p.6)
Sources: Abt, C. C. (1987). Serious games. University press of America.
Ritterfeld, U., Cody, M., & Vorderer, P. (Eds.). (2009). Serious games: Mechanisms and effects. Routledge
Wilkinson, P. (2016). A brief history of serious games. In Entertainment computing and serious games (pp. 17-41). Springer International
Publishing.
Serious games: Mechanisms and effects

5. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Serious Game: Purpose-driven
• Educational Serious Games (Garris et al., 2002)
• Intellectual disabilities therapy (Martins et al., 2011)
• Military’s recruitment game (Martin et al., 2010)
• …
Sources:
Wilkinson, P. (2016). A brief history of serious games. In Entertainment computing and serious games (pp. 17-41).
Springer International Publishing.
Martins, T., Carvalho, V., Soares, F., & Moreira, M. F. (2011, November). Serious game as a tool to intellectual
disabilities therapy: Total challenge. In Serious Games and Applications for Health (SeGAH), 2011 IEEE 1st
International Conference on (pp. 1-7). IEEE.
Garris, R., Ahlers, R., & Driskell, J. E. (2002). Games, motivation, and learning: A research and practice model.
Simulation & gaming, 33(4), 441-467.
Martin, G., & Steuter, E. (2010). Pop culture goes to war: Enlisting and resisting militarism in the war on terror.
Lexington Books.
Learning | Therapy | Social Control

6. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Serious Game: PlayMancer
• Train emotional regulation in impulse-related disorders
• Improve emotional regulation and impulsiveness
• Complementary treatment in Eating Disorders and Impulse
Control Disorders (Pathological Gambling)
• Learning, Therapy, or Social control?
Source:
https://youtu.be/osmo9EAClv8
Fernández-Aranda, F., Jiménez-Murcia, S., Santamaría, J. J., Gunnard, K., Soto, A., Kalapanidas, E., ... & Konstantas, D. (2012).
Video games as a complementary therapy tool in mental disorders: PlayMancer, a European multicentre study. Journal of Mental
Health, 21(4), 364-374.
https://youtu.be/osmo9EAClv8

7. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Serious Game: Dragon Box Elements
• Learn Geometry
• Introduction to Euclid’s Elements
• Definitions
• Propositions
• Axioms
• Theorems
• Puzzles
• Learning, Therapy, or Social control?
Source:
https://youtu.be/rm-6pDiSH44
https://dragonbox.com/products/elements
https://youtu.be/rm-6pDiSH44

8. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Serious Game: Pacific
• Survival adventure to escape with a team from a desert island
• Manage and motivate team
• Leadership
• Team Management
• Learn and apply strategies, techniques, and tools
• Learning, Therapy, or Social control?
Source:
https://youtu.be/YopbkCYSIEU
https://www.game-learn.com/game-based-learning-corporate-training/serious-game-in-leadership-and-team-management/
https://youtu.be/YopbkCYSIEU

9. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Other Serious Game Examples
• Pulse!!: Learn triaging patients
• Duolingo: Learn language
• Our City: Learn to be a good citizen
• ...
Sources:
https://youtu.be/NxwUMs4VCag
https://youtu.be/8OebgtUjLg4
https://youtu.be/nokqlgKkeMU
Pulse!! | Duolingo | Our City

10. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Why UX in Serious Game?
• We are human after all!
• A successful Serious Game provides meaningful and relevant experience
to its gamers
• Global audience and Localization
• Differentiation from other Serious Games
Sources:
https://www.usability.gov/what-and-why/user-experience.html
https://www.interaction-design.org/literature/topics/ux-design
https://www.nngroup.com/articles/definition-user-experience/
Behavior | Needs | Values | Abilities | Limitations |
Motivations | Pains | Gains | Aspirations

11. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Purpose-driven ⇄ Goal-directed Design
1. Design first; program second.
2. Separate responsibility for design from responsibility for programming.
3. Hold designers responsible for Serious Game product quality and
gamer satisfaction.
4. Define one specific user for your product; then invent a persona -
give that user a name and an environment and derive his or her
goals.
5. Work in teams of two: designer and design communicator.
Sources:
http://www.dubberly.com/articles/alan-cooper-and-the-goal-directed-design-process.html
Cooper, A. (1996). Goal-directed design. InContext Enterprises Incorporated.
Align Purpose-driven and Goal-directed Design

12. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Player (Design) Persona
1. Game Purpose
2. Name
3. Photo
4. Goal: End and steady condition, for example: Healthy Teeth
5. Task: Transient intermediate process to achieve the goal, for
example: Brush teeth in the morning and before sleep every day
6. Gender
7. Age
8. Relationship (Single, Married, Married with Children)
9. Description: Behavior | Needs | Values | Abilities | Limitations |
Motivations | Pains | Gains | Aspirations
Research-based | Proto
Image Source: https://public-media.interaction-design.org/images/ux-
daily/587f99181f266.jpg

13. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Citra: UI Designer

14. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Contextual Scenario
A description of
persona interacting
with a brand (your
serious game) to
achieve a goal in a
specific environmental
situation.

15. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Customer Journey Map
A visualization of
contextual
scenarios in
channels and
touch points.

16. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Prototyping
A working model of
product (your serious
game) with a purpose of
getting feedback and
experiment with ideas

17. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Evaluating and Validating
● Individual Player Experience:
a. Pyschophysiological player testing (Russell, 1980)
b. Game Metrics Behavior Assessment (Tychsen and
Canossa, 2008)
c. Eye Tracking (Stellmach et al., 2010) ...
● Player Context Experience:
a. Playability Heuristics (Desurvire et al., 2004; Korhonen
and Koivisto, 2006)
b. Usability Testing (Moreno-Ger, 2012) ...
Sources:
Nacke, L. E., Drachen, A., & Göbel, S. (2010). Methods for evaluating gameplay experience in a serious gaming context. International
Journal of Computer Science in Sport, 9(2), 1-12.
Moreno-Ger, P., Torrente, J., Hsieh, Y. G., & Lester, W. T. (2012). Usability testing for serious games: Making informed design decisions with
user data. Advances in Human-Computer Interaction, 2012, 4.
(Individual Player + Player Context) Experience

18. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
UX Principle 1: Engage your gamer early

19. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
UX Principle 2: Design with scaffolding
● Provide an opportunity to acquire identity.
● Provide prompts and supplementary information when facing
difficulty, ex. Hints.
● Provide formative feedback, ex. Explain missteps when wrong.
● Provide summative feedback, ex. Performance summary.
● Provide debriefing (human or human-like feedback).
● Provide a challenge when correct.
Sources:
Vygotsky, L. (1987). Zone of proximal development. Mind in society: The development of higher psychological processes, 5291, 157.
Obikwelu, C., Read, J., & Sim, G. (2012). The scaffolding mechanism in serious games. Fun and Game, 9, 4-6.
Fisch, S. M. (2005, June). Making educational computer games educational. In Proceedings of the 2005 conference on Interaction design
and children (pp. 56-61). ACM.
Zone of Proximal Development
Image source: http://bit.ly/2k10OF8

20. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
UX Principle 3: Use Personas
1. Conduct UX Research.
2. Build User Profiles.
3. Create Personas.
4. Elicit behavior, needs, values, abilities, limitations, motivations, pains,
gains, aspirations from Personas.
5. Use the elicitation process results to develop the traits of Game
Characters.
Derive characters from Personas
Image source: http://bit.ly/2k10OF8

21. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
UX Principle 4: Use Contextual Scenarios
1. Conduct UX Research.
2. Build Contextual Scenarios.
3. Elicit specific behavior, needs, values, abilities, limitations, motivations,
pains, gains, aspirations in different environmental situations.
4. Use different environmental situations as insights when developing
different game scenes
5. Apply the specific behavior, needs, values, abilities, limitations,
motivations, pains, gains, aspirations di different game scenes.
Design stories and storylines based on
Contextual Scenarios

22. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Cognitive Disequilibrium
Source:
https://youtu.be/Xj0CUeyucJw

23. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
UX Principle 5: Cognitive Disequilibrium
1. Conduct UX Research.
2. Derive Gamer Mental Model or Schema
3. Stimulate Assimilation, i.e. Fitting new information into existing
mental model
4. Stimulate Accommodation, i.e. Modifying existing mental model
to accommodate new information
5. Assimilation + Accommodation = Cognitive Disequilibrium
6. Create a continuous cycle of Cognitive Disequilibrium
Sources:
Piaget, J. (1970). Piaget's theory.
Van Eck, R. (2006). Digital game-based learning: It's not just the digital natives who are restless. EDUCAUSE review, 41(2), 16.
Create a continuous cycle of Cognitive
Disequilibrium

24. Copyright © 2018. PT UXINDO DIGITAL INDONESIA. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical,
photocopying, recording or otherwise, without the prior written permission from PT UXINDO DIGITAL INDONESIA.
Kontak
Dr Eunice Sari
eunice @uxindo.com
Adi Tedjasaputra
josh@uxindo.com
UX Indonesia | uxindo.com | @indonesia_ux | #uxindo