Designing Interfaces for Touchscreen Devices

Project Progress Report Members: Philip H. Peng Advisor: Dr. Stephen H. Lane CIS 400, Fall 2011, University of Pennsylvania

1 Presentation Overview 1) Introduction 2) Project Proposal 3) Related Work 4) Project Outline 5) Design – Interfaces 6) Prototype – Application Layout ReportProgress 7) Prototype – Demo Video (WIP)

8) Evaluation PhilipPeng,

9) Stretch Goals 400, CIS , Fall 10) Remaining Work

2011/12/07

2011

2

Introduction Rhythm Games: genre of music games, notes and hitboxes, mix of puzzle/action

Touchscreen Devices: devices that use

touch for default input

Progress ReportProgress

PhilipPeng,

, CIS 400, CIS , Fall

2011/12/07

2011

3

Rhythm Game Examples

Dance Dance Revolution Guitar Hero Progress ReportProgress

Beatmania IIDX AudioSurf

PhilipPeng,

, CIS 400, CIS , Fall

2011/12/07

2011

4

More Rhythm Game Examples

DJMax Technika Taiko no Tatsujin Progress ReportProgress

PaRappa the Rapper THE iDOLM@STER

PhilipPeng,

, CIS 400, CIS , Fall

2011/12/07

2011

5

Even More Examples!

Osu! Tatakae! Ouendan! Gitaroo Man Lives! Progress ReportProgress

Hatsune Miku: Project DIVA

Jubeat Plus

PhilipPeng,

, CIS 400, CIS , Fall

2011/12/07

2011

6

Question

Aren’t they all the same?

Progress ReportProgress

PhilipPeng, , CIS 400, CIS , Fall

Looks and usage may differ but 2011/12/07

ultimately all do the same thing

2011

7

Multi-Column Interface

Dance Dance Revolution Guitar Hero Progress ReportProgress

Beatmania IIDX AudioSurf

PhilipPeng,

, CIS 400, CIS , Fall

2011/12/07

2011

8

Multi-Column Interface

Dance Dance Revolution Guitar Hero Progress ReportProgress

Beatmania IIDX AudioSurf

PhilipPeng,

, CIS 400, CIS , Fall

2011/12/07

2011

9

Moving/Point Focus Interface

DJMax Technika Taiko no Tatsujin Progress ReportProgress

PaRappa the Rapper THE iDOLM@STER

PhilipPeng,

, CIS 400, CIS , Fall

2011/12/07

2011

10

Moving/Point Focus Interface

DJMax Technika Taiko no Tatsujin Progress ReportProgress

PaRappa the Rapper THE iDOLM@STER

PhilipPeng,

, CIS 400, CIS , Fall

2011/12/07

2011

11

Fullscreen Covered Interface

Osu ! Tatakae! Ouendan! Gitaroo Man Lives! Progress ReportProgress

Hatsune Miku: Project DIVA

Jubeat Plus

PhilipPeng,

, CIS 400, CIS , Fall

2011/12/07

2011

12

Fullscreen Covered Interface

Osu ! Tatakae! Ouendan! Gitaroo Man Lives! Progress ReportProgress

Hatsune Miku: Project DIVA

Jubeat Plus

PhilipPeng,

, CIS 400, CIS , Fall

2011/12/07

2011

13

Touchscreen Devices Why? - New technology, becoming common - Touch-driven input paradigm - Games need to be redesigned

- Android tablets, iPads, Windows 8 Progress ReportProgress

PhilipPeng,

, CIS 400, CIS , Fall

2011/12/07

2011

14

Project Proposal Goal: Design, prototype, and evaluate different rhythm games interfaces for touchscreen devices.

ReportProgress Approach: Create a rhythm game prototype for Android tablets that demos various game interfaces PhilipPeng, and collects usage data to evaluate their 400, CIS , Fall

effectiveness.

2011/12/07

2011

15

Related Work Wiimote + Dance Game “Understanding Visual Interfaces for the Next Generation of Dance-Based Rhythm Video Games” – University of Central Florida, Orlando, FL

External Multi-touch Panel + Turn-

Based Strategy Game ReportProgress “A Study on Multi-Touch Interface for Game” – Chung-Ang University, Seoul,

Overlayed Multi-touch Screen + PhilipPeng, Real-Time Strategy Game 400, CIS , Fall “One-handed Interface for Multi-Touch Enabled Real-Time Strategy Games” –

University of California, Santa Cruz, CA 2011/12/07

2011

16

Project Outline 1) Design – Draft - Interface visualization? - Categorize/compare? - Reduce variables?

2) Prototype – Code Progress ReportProgress - Combined app? - What framework? - Common engine?

PhilipPeng,

3) Evaluation - Data 400, CIS , Fall - Measurable metrics?

- Sample surveys? 2011/12/07

- Compare trends?

2011

17

Design – Interfaces #1-4

Progress ReportProgress

PhilipPeng,

, CIS 400, CIS , Fall

2011/12/07

2011

18

Design – Interfaces #5-8

Progress ReportProgress

PhilipPeng,

, CIS 400, CIS , Fall

2011/12/07

2011

19

Prototype – Application Layout Android App Demo #1 #2 #3 Interface Common Notes Obj Music Player

Button Obj …

Progress ReportProgress

Timer Hitbox Obj Score Keeper Touch Handler PhilipPeng,

Data 400, CIS , Fall Tracker

Main Menu

2011/12/07

External 2011

Database 20

Prototype – Demo Video (WIP)

Beats2: prototypes

Progress ReportProgress

PhilipPeng,

, CIS 400, CIS , Fall

2011/12/07

2011

21

Evaluation Quantitative Measurements

- Attention load: - Button presses count - Button press average frequency

Progress ReportProgress

- Timing accuracy - Note hit/miss count - Note hit average score PhilipPeng,

400, CIS , Fall

- Demo #1 “Falling Notes” = comparison baseline

2011/12/07

2011

22

Evaluation Qualitative Surveys * = compare perceived results with qualitative results Criteria Description Rating

Did the demo require lots of skill (e.g. timing Challenge* Easy --> Hard

with hand-eye coordination)? Progress ReportProgress Did the demo require a high amount of Concentration* Low --> High attention (e.g. less focus on hitting the buttons)? Did you enjoy playing the demo (relative to the Fun Boring --> Fun

other demos)? PhilipPeng,

Did you find the demo’s interface intuitive and 400, CIS , Fall Mastery Easy --> Hard easy to learn/use? Did you find the demo’s interface and gameplay

Uniqueness Old --> New 2011/12/07

new and unique?

2011

23

Stretch Goals Unity3 - Port to Unity3 engine - Add touch gestures (hold, slide, etc.) - 2.5D graphics with perspectives - Desktop and iOS support?

Kinect/Wiimote - Supported via Unity3 plugin ReportProgress - Virtual touch grid (depth-based) - Different input, same overall interface

concepts PhilipPeng,

Beats2 400, CIS , Fall - Support alternate interfaces based on the

results of study and user feedback 2011/12/07

- Use same base engine

2011

24

Remaining Work Work Item Description Estimation Complete interface demos #2, 4, 6, 7, 8 Interface Requires modifying hitbox behaviour 3 weeks demos Modify graphics loader or add rotation support Rhythm game Add synchronized music player 3 weeks engine Add notes data parser (borrow from Beats?) Add data tracking/survey feedback system (use Data tracker 2 weeks Google Analytics or custom server?) ReportProgress Graphics and Create better, publishable graphics 1 week documentation Cleanup and comment code, write documents

Sample survey Selective surveying of friends and classmates 1 week PhilipPeng,

Mass survey Large-scale surveying via Market publishing 3 weeks 400, CIS , Fall Evaluation Statistical analysis on collected results 1 week

Report Write final report, update website 1 week 2011/12/07

2011

25

Questions?

Progress ReportProgress

PhilipPeng,

, CIS 400, CIS , Fall

2011/12/07

2011

26