InteractivePrototype-Group:Team Pint
From CS 160 Fall 2011
Contents |
Team Members
- Worked on Report + Presentation
- Design update, contribution to report, presentation prep
- Coded the Prototype
- Coded the Prototype
Problem and Solution Overview
Learning physics concepts for the first time can be a daunting process. Physics is often unintuitive, especially when it is explained in formulas and static images. Our group wanted to make this process simpler and more enjoyable by creating a visually appealing puzzle/problem solving game that requires the user to understand basic physics concepts either alone or in conjunction with one another. Since the games require at least a basic knowledge of the stressed concepts we will also have a variety of tutorials available to help teach the user before he/she begins working on the game mode of our application. We believe that by creating a more visually based learning system in concurrence with puzzle-style gameplay users will be better able to study physics and have fun at the same time.
Tasks
(EASY) Adjust Settings
For this task the user is asked to change the "units" setting from Metric to Imperial. This will involve the user accessing the main screen, navigating to the settings screen, and then finding/changing the desired option.
(MODERATE) Look at a Tutorial
For this task the user is asked to look at and interact with the "Projectiles Tutorial." This will require the user to find the projectiles subsection and from there locate the tutorials section that will contain the broad "Projectiles Tutorial" The user must then interact with the tutorial to access all the information available; this includes text and diagrams.
(HARD) Play a Level
For this task the user is asked to play "Level 1" of the Projectiles game mode. This will require the user to access the Projectiles subsection and from there find the "Play Games" mode. The user must then open the level and try to play through the first level.
Revised Interface Design
Changes in New Interface
- Revised Layout of Menus
- Our group of test users agreed that they sometimes felt overwhelmed by the amount of information presented to them. Whether it was too many levels available, too many tutorials, etc. we knew that we had to somehow break the project into smaller sections to make it more user friendly. We did this by making certain subjects of physics such as projectiles, springs, or pulleys into separate game modes. This allows the user to focus on a certain subject that is eluding them and then find puzzles/tutorials that relate only to this one concept. This doesn't change how much information can be contained by the application, but breaks it down in a way to make finding help with a subject much easier.
- Added an Avatar
- Users stated that it would be more fun to include some form of avatar. We decided that this would be a worthwhile addition and could also be used as a motivational tool to complete all the levels in a game mode. We want the avatar to be a simple cartoon person with a few set options that will change the appearance of the avatar. We will have three separate categories of option: face/skin tone, upper body, lower body. Sticking to only three categories allows the user to feel like he/she has some creative control while still keeping the avatar simple for designers. The avatar system is not implemented yet due to its complexity of implementing the avatar in level play.
- Friendlier Level Design
- In our previous low-fi prototype our basic projectiles level, although functionally sound, didn't seem very user friendly. It was a very bland design that didn't seem to draw any of the users in. To combat this our group decided to theme each level from now on. For example, the basic projectiles level went from being simply hit the target to a basketball three-throw shooting game. Other ideas for themes include aliens, wild west, underwater, etc.
- New Reward System
- This goes hand-in-hand with the addition of the Avatar system and the new thematic level design. Our group wanted to figure out a reward system that would encourage the user to play the game more thoroughly apart from the simple desire to get better at physics. The user now unlocks avatar design features after the completion of each level. Furthermore, each reward will correspond to the level's theme. For example, beating the basketball free-throw level described earlier unlocks the headband, jersey, and basketball shorts options in the avatar menu.
- New Calculator and Scratchpad features
- Users complained that the level they played in the low-fi prototype stage was too difficult to do without having a piece of paper and calculator in front of them. Thus, if one of these factors was missing the user would almost certainly not be able to play our game. This was a serious design error since our group wanted the application to be used anywhere, not just at home with study materials present. To allow for more portability we included two new features; a calculator and a scratchpad. The user should now have the tools to solve the problem without ever needing to leave the application.
Unimplemented Design Features
- Avatar Creation
- We decided not to focus on avatar design at this point. Although we anticipate it being a large part of the future application due to its ability to draw the user in and to allow us to incorporate a reward system it doesn't really add to the basic function of teaching users physics. Also we wanted to wait until we had a better standard for level design before we focused on creating avatars that would be placed in the level. Right now for our basketball free-throw game we simply use a video of a real life person shooting so we cannot yet use the avatar in any useful way. However, here is a screenshot of how we imagine the avatar creation screen will look:
- Rewards
- The reason we haven't implemented rewards yet is basically the same as for why we haven't implemented avatars yet. Their inclusion really only adds a cosmetic factor which doesn't help the user learn physics. In the future each reward will be a new design choice in the avatar menu and will be themed to each level.
- Save Modes
- So far the game doesn't keep track of game progress. This didn't seem necessary at this stage of the application because there was no information that needed to be stored. It is a feature that will of course be implemented later so that the user will not have to create an avatar each time or redo old levels to unlock new ones.
Storyboard of Tasks
1.(EASY) Adjust Settings
- For this task the user is asked to change the "units" setting. This will involve the user accessing the main screen, navigating to the settings screen, and then finding/changing the desired option.
2.(MODERATE) Look at a Tutorial
- For this task the user is asked to look at and interact with the "Projectiles Tutorial." This will require the user to find the projectiles subsection and from there locate the tutorials section that will contain the broad "Projectiles Tutorial" The user must then interact with the tutorial to access all the information available; this includes text and diagrams.
3.(HARD) Play a Level
- For this task the user is asked to play "Level 1" of the Projectiles game mode. This will require the user to access the Projectiles subsection and from there find the "Play Games" mode. The user must then open the level and try to play through the first level.
Prototype
Source Code
https://rapidshare.com/files/4082143165/project_cs160v3.zip
Our project is approximately 50 mb, so I have hosted the file on a file server, as I could not upload it to the Wiki.
Demo Video
http://www.youtube.com/watch?v=dIu1amKcavM
Overview of Implemented UI
This first iteration of the prototype primarily focused on building working transitions from screen to screen and generalized screen layouts. Most UI elements are present, although not in their finished form or placement. As a proof-of-concept and pilot-testing version, many features are represented by placeholders or features which cannot yet be fully used or accessed.
For brevity, rather than annotating features to imaged individually, a screenshot of each screen is included, and features are listed by screen.
The following features are implemented in this version of the prototype:
- Title Screen
- Working 'Game Modes' navigation button leading to gameplay topic select
- Placeholder 'Avatars' navigation button
- Working 'Settings' navigation button leading to a basic settings menu
- Settings Menu
- Placeholder radio buttons for switching between imperial and metric measurement modes. The buttons are functional but the feature change is not yet implemented.
- Placeholder radio buttons for turning sound on and off. The buttons are functional but the feature change is not yet implemented.
- Mode Select Menu
- Working 'Projectiles' navigation button, leading to projectile motion game mode
- Placeholder 'Springs' navigation button
- Placeholder 'Pulleys' navigation button
- Working 'Back' navigation button, returns to Title Screen
- 'Projectile Mode' Menu
- Working ‘Play’ navigation button, leads to Level Select Screen
- Working ‘Tutorial’ navigation button, leads directly to a sandbox/tutorial mockup
- Working 'Back' navigation button, leads back to Mode Select Menu
- Level Select Screen
- Working 'Back' navigation button, leads back to Projectiles Menu
- Working 'Level 1' navigation button, leads to mockup of first level UI
- Placeholder navigation buttons for levels 2 and 3
- Level 1 Mockup
- Working 'Back' navigation button, leads back to Level Select Menu
- Placeholder number entry boxes & sliders for Angle and Velocity; can type in numbers with keyboard
- Placeholder diagram/level graphics area, currently contains 'concept demo' videos that are used to demonstrate the application
- Placeholder buttons for the Navigation, Level Description, Calculator, Equation Reference, and Scratchpad popups
- Working 'Shoot' button linked to the angle and velocity boxes and the demonstration videos
- Tutorial Mockup
- Working 'Back' navigation button, leads back to Projectile Mode Menu
- Placeholder number entry boxes & sliders for Angle and Velocity; can type in numbers with keyboard
- Placeholder diagram/graphics area, currently contains placeholder tutorial art
- Placeholder buttons for the Navigation, Equation Reference, and Scratchpad popups
- Placeholder textbox & tutorial text, to be replaced with real tutorial content
Unimplemented Features
Do to the pilot test/concept nature of this prototype, a significant amount of content has been left as placeholders or suggestive mockups.
The following features are only partially implemented or are not actually available in this version of the prototype, by screen:
- General Features
- Decoration, finished screen layouts, aesthetic & graphics finishing & color palette selection (Left out to avoid giving aesthetic impressions, and to give room for design updates)
- Grayed out buttons for non-available UI elements (Left out to save time to focus on more important features)
- Actual physics engine (Left out due to time constraint; engine could not be finished on time so mockups are used instead)
- Scroll-bars for menus such as Tutorial Select and Level Select that may have more options than fit on the screen in the final version. (Left out to save time to focus on more important features)
- Title Screen
- Avatar Mode; button currently is non-functional (Left out to focus on core features; avatars are an 'icing' feature to make the game more friendly)
- Settings Menu
- Actual setting changes based on measurement and sound radio buttons, pending inclusion of actual physics/math package and sounds (Left out due to measurement and sounds not being implemented yet; those features were left out to focus on core features and because the physics engine was not implemented)
- Mode Select Menu
- Spring and Pulley modes (in mode select) (Left out due to lack of physics engine and desire to focus on one aspect of the application for testing purposes, i.e. avoiding 'clutter')
- 'Projectile Mode' Menu
- Tutorial Select Menu; currently tutorial button leads directly to a single mockup sandbox/tutorial;the finished version would have a separate sandbox and multiple tutorials (Left out because currently only one tutorial exists)
- Separate Sandbox mode (Left out because a functional sandbox requires the physics/math package. The tutorial mockup currently also stands in for this feature)
- Level Select Screen
- Level 1 Mockup
- Finished level art/diagram, including measurements, physics engine connection, & shot tracker (Left out due to need for physics/math package)
- Popup 10-Key Pad (for angle/velocity entry) (Left out due to time limitation; can be simulated with Wizard of Oz and other test methods)
- Slider functionality for adjusting angle and velocity (Left out due to time limitation; can be simulated with Wizard of Oz and other test methods)
- Popup Level Description (Left out due to time limitation; can be simulated with Wizard of Oz and other test methods)
- Popup Calculator (Left out due to time limitation; can be simulated with Wizard of Oz and other test methods)
- Popup Scratch-Pad (Left out due to time limitation; can be simulated with Wizard of Oz and other test methods)
- Popup Equation Reference (Left out due to time limitation; can be simulated with Wizard of Oz and other test methods)
- Finished tutorial content (Left out due to time limitation; can be simulated with Wizard of Oz and other test methods)
- Popup Navigation menu (Left out to save time to focus on more important features)
- Tutorial Mockup
- Popup 10-Key Pad (for angle/velocity entry) (Left out due to time limitation; can be simulated with Wizard of Oz and other test methods)
- Slider functionality for adjusting angle and velocity (Left out due to time limitation; can be simulated with Wizard of Oz and other test methods)
- Popup Scratch-Pad (Left out due to time limitation; can be simulated with Wizard of Oz and other test methods)
- Popup Equation Reference (Left out due to time limitation; can be simulated with Wizard of Oz and other test methods)
- Finished tutorial content (Left out due to time limitation; can be simulated with Wizard of Oz and other test methods)
- Popup Navigation menu (Left out to save time to focus on more important features)
Wizard of Oz Usage
For the purposes of pilot testing, the Wizard of Oz technique will be applied to several core features, while some other features are simply left out and suggested by the presence of a placeholder button or other UI element. For the time being, setting of numbers in the angle and velocity boxes through sliders is done using this technique, with the operator entering the numbers through a keyboard. Equations and other tutorial content are also provided on paper, pending development of completed content in the app itself. Similarly, pending integration of the included scratchpad and calculator features, scratch-paper and physical calculators will be provided to the test users. Finally, pending the creation of full level art and animation, measurements are given to testers directly rather than on screen.
Notably, use of the actual 'shoot' button and corresponding videos is handled largely by the application itself, with the videos embedded in the level diagram and animation area.
Prototype Screens
Title Screen
Settings Screen
Game Modes Screen
Projectile Main Menu
Projectile Tutorial Screen
Projectile Level Select Screen
Projectile Level 1 Screen
