Mobile Games Users Interaction Patterns

Lecture 02

2016-2017 Mobile Games Development & Promotion, Maksimenkova

Olga, FCS, SSI 1

Today

• Classification of Gamers

• Design Patterns

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 2

Classification of Users From users to gamers

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 3

Goal Accomplishments Level

• Full (100%)

• Partly

• Entertainment

Proficiency Level in a Domain

• Profi

• Advanced

• Newbie

User Habits

• Experienced with a System

• Familiar with a System

• Unfamiliar with a System

C. Cornett How Habits Can Impact User Behavior

(http://www.inspireux.com/2013/03/30/how-habits-can-impact-user-behavior/)

T. Laurinavicius Designing for User Habits and Routines

(https://webdesign.tutsplus.com/articles/designing-for-user-habits-and-routines--cms-24337)

Gender

• Man

• Woman

C. Kerr New data highlights gender split for mobile game genres

(http://www.gamasutra.com/view/news/260116/New_data_highlights_gender_split_for_mobile_game_genres.php)

And the Others

• Age • Gradation by solving problems

• Specific levels, limitations, permissions, etc.

• Religion • Signs, terms, graphic interpretation

• Psychophysiological • Specific classification – people with disabilities

Gamers Classification

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 9

E. Adams From Casual to Core: A Statistical Mechanism for Studying Gamer Dedication

(http://www.gamasutra.com/view/feature/131397/from_casual_to_core_a_statistical_.php?print=1)

Classification of Gamers

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 10

C. James Hierarchy of Gamers: Where Are the Lines Drawn?

(http://casualgamerevolution.com/blog/2014/03/hierarchy-of-gamers-where-are-the-lines-drawn)

Reminder Mobile Input&Output

Mobile UI

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 11

Mobile Input/Output

• Touch Screen

• Touch Pad, AccuPoint

• Camera

• Microphone, speaker

• Vibrating Alert

• Accelerometer

• GPS

• Wi-Fi, Bluetooth,…

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 12

UI Features and Troubles

• Difficult to fulfil ergonomic requirements

• Lack of screen space

• Troubles with Selection & Drag and Drop

• Variety of geometric forms, types,…

• Voice commands

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 13

Managing with Troubles

• Compress your information • Use abstracts (and “More..”

buttons) • Remember of geometry and

resolution while visualizing • Use high contrast images • Avoid stodgy graphics

• Improve the readability of fonts

• UI manual scaling and auto-scaling • Magnification gestures

• Android accessibility. Help. Magnification gestures (https://support.google.com/accessibility/android/answer/6006949?hl=en)

• Save user’s input ASAP

• Lists, Combo boxes, etc. instead of free input

2016-2017

Mobile Games Development & Promotion, Maksimenkova Olga, FCS, SSI

14

http://blog.campaignmaster.co.uk/2013/01/10/email-101-email-safe-fonts/

Managing with Troubles

• Wide using of hardware buttons on a device’s case

• Linear Wizards • Standard “Back” button is suitable

• Voice input/output

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 15

Real and Sensor Buttons

• What is a Sensor Button?

• We can push a real button, pushing a sensor button is a reaction of a device

• Sensor button needs a visual contact

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 16

User Interface User Centered Design

Patterns

UI Patterns

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 17

User Centered Design (UCD)

• User-Centered Design (UCD) is a user interface design process that focuses on usability goals, user characteristics, environment, tasks, and workflow in the design of an interface • Notes on User Centered Design

Process (UCD) (https://www.w3.org/WAI/redesign/ucd)

• T. Lawdermilk User-Centered Design. A Developer's Guide to Building User-Friendly Applications (http://shop.oreilly.com/product/0636920028741.do)

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 18

UCD Principles

• Early focus on users and tasks • Structured and systematic information gathering (consistent across the

board)

• Designers trained by experts before conducting data collection sessions

• Empirical Measurement and testing of product usage • Focus on ease of learning and ease of use

• Testing of prototypes with actual users

• Iterative Design • Product designed, modified and tested repeatedly.

• Allow for the complete overhaul and rethinking of design by early testing of conceptual models and design ideas.

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 19

Notes on User Centered Design Process (UCD) (https://www.w3.org/WAI/redesign/ucd)

UCD Process Map

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 20

https://www.usability.gov/how-to-and-tools/resources/ucd-map.html

Patterns in Human Behavior, Interaction and Cognition

• Behavior pattern • A “program”, which is started as a reaction on a particular situation

• Interaction pattern • A “program” of communication

• Cognitive pattern • Stimulus-Reaction

• Problem solving

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 21

Design Pattern

• Design pattern provide proven solutions to frequent design problems in a generative and human-readable format

• The special case of interaction patterns describes recurring actions a user performs when interacting with a computer to achieve a certain goal of a task. These actions are implicit if they arise from the discourse context - the previous actions of the user - and are called explicit if they are directly triggered by the user (e.g., pushing a button). • Interaction Patterns (http://wiki.iks-

project.eu/index.php/InteractionPatterns)

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 22

Parts of an Interaction Pattern

• the problem

• the pattern (i.e., the solution of the problem)

• use cases for the pattern

• how the pattern applies for the use cases

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 23

Interaction Design Patterns

• An interaction design (ID) pattern is a general repeatable solution to a commonly-occurring usability problem in interface design or interaction design • (https://www.interaction-design.org/literature/book/the-glossary-of-human-

computer-interaction/interaction-design-patterns)

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 24

Interaction Design Patterns for Mobile Devices

• Input/Output is the most specific

• “Mobile Patterns” • [book] Mobile UI Design Patterns (https://studio.uxpin.com/ebooks/mobile-

design-patterns)

• [blog] Android UI Patterns (http://www.androiduipatterns.com)

• Catalogues • 4ourth Mobile Design Pattern Library (http://4ourth.com/wiki/Index)

• По книге Designing Mobile Interfaces: Patterns for Interaction Design, но книгу читать не надо...

• Ptrns by Beyond Labs (http://pttrns.com)

• Mobile Patterns (http://www.mobile-patterns.com)

• Inspired UI by Sergey Pakhandrin (http://inspired-ui.com)

• AppreciateUI (http://www.appreciateui.com)

• lovely ui (http://www.lovelyui.com)

UI Catalogues for Mobile Games

• Games Inspiration (http://gamesinspiration.com/)

• Game patterns (http://www.game-patterns.com/#!/)

• Mobile game patterns (http://mobilegamepatterns.com/)

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 26

UI Design Patterns Challenges

• M. Glenister The UX of VR (http://www.uxofvr.com)

• Dan Talks UI fro VR at Develop 2015 (http://atomhawk.com/news/post/dan-talks-ui-vr-develop-2015)

• UI/UX Design Patterns in Virtual Reality (http://realityshift.io/blog/ui-ux-design-patterns-in-virtual-reality)

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 27

https://www.google.ru/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjpipLHyK_PAhXLhiwKHXJ3AW4QjRwIBw&url=https%3A%2F%2Fwww.pinterest.com%2Fpin%2F20969954493113813%2F&bvm=bv.133700528,d.bGg&psig=AFQjCNGTOkUoIzGrwGz1vuNQkr1o6LGOMQ&ust=1475066362638112

Examples UI Patterns Implementation

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 28

Menu

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 29

Drag and Drop Using Touch Screen

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 30

Navigation

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 31

Statistics (Simple Dashboard)

Menu with pictograms (icons)

Achievements pattern

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 32

Avatar Representation (FPS)

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 33

Avatar Representation (Platformer)

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 34

Avatar Representation (Fighting)

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 35

Avatar Representation (Third Person Game View)

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 36

Fails and Lessons

• T. Neil, R. Malley Rethinking Mobile Tutorials: Which Patterns Really Work? (https://www.smashingmagazine.com/2014/04/rethinking-mobile-tutorials-which-patterns-really-work/)

• K. Higgins First time user experience in mobile apps (http://www.kryshiggins.com/first-time-user-experiences-in-mobile-apps/)

• K. Higgins First Time User Experience (http://firsttimeux.tumblr.com/tagged/mobile-app)

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 37

Wise men learn by other men’s mistakes; fools by their own.

Architectural Patterns

• M. Haney Design Patterns in Game Programming (http://www.gamasutra.com/blogs/MichaelHaney/20110920/90250/Design_Patterns_in_Game_Programming.php)

• R. Nystrom Game Programming Patterns (http://gameprogrammingpatterns.com/contents.html)

• M. Luedke Common Design Patterns for Android (https://www.raywenderlich.com/109843/common-design-patterns-for-android)

• Mobile Application Architecture Guide (http://robtiffany.com/wp-content/uploads/2012/08/Mobile_Architecture_Guide_v1.1.pdf)

• I. Astahovs Use of Design Patterns for Mobile Game Development (https://www.diva-portal.org/smash/get/diva2:546698/FULLTEXT01.pdf)

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 38

More Relevant Links

2016-2017 Mobile Games Development & Promotion,

Maksimenkova Olga, FCS, SSI 39

• Game Development. Stack exchange (http://gamedev.stackexchange.com/)

• A Basic Game Architecture (http://obviam.net/index.php/2-1-a-little-about-game-architecture/)

• Designing for Mobile, Part 1: Information Architecture (http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/)

• Designing Elegant Mobile Games (https://www.objc.io/issues/18-games/designing-elegant-mobile-games/)

• M. Rohs Mobile Input & Output Technologies (https://www.medien.ifi.lmu.de/lehre/ws1011/mmi2/mmi2-3d-Mobile-IO.pdf)