53
User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems Auburn University

User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Embed Size (px)

Citation preview

Page 1: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

User Interface DesignTechniques for Novice Programmers

Computer Gaming

Dr. Cheryl D. Seals

Computer Science & Software Engineering

Interactive SystemsAuburn University

Interactive SystemsAuburn University

Page 2: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Computer Science EducationComputer Science Education

• HCI, AI, Game Design, Usability• Projects

• Educational Gaming and CSDT development Mathematics & Technology Financial Literacy Alice & Lego Programming Project Study of Novice Programmer Techniques for Programming What level of materials for K-12 to keep them engaged?

• NSF IPY Visualization and Ice Sheet Modeling, Google API• NSF BPC PAIRS Web Development to support

educational digital library• Seniors in Second Life application development• iPhone Development• Web Design and Development

Page 3: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

User Interface DesignAuburn University

User Interface DesignAuburn University

www.freewebtemplates.com/

Page 4: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Good Design (our goal!)Good Design (our goal!)

“Every designer wants to build a high-quality interactive system that is admired by colleagues, celebrated by users, circulated widely, and imitated frequently.” (Shneiderman, 1992, p.7)

…and anything goes!…

Page 5: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

The Good…The Good…

Page 6: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

The Bad…The Bad…

Page 7: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Why is this a better design?Why is this a better design?

Page 8: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

The Ugly…The Ugly…

Page 9: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

The Ugly…The Ugly…

Page 10: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

The (really) Ugly…The (really) Ugly…

Page 11: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

What The…???What The…???

Page 12: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Closer to Fine Arts: A Philosophy

Closer to Fine Arts: A Philosophy

…The human user of any system is the focus of the design process. Planning and implementation is done with the user in mind, and the system is made to fit the user, not the other way around….

Bruce WalkerGeorgia Institute of Technology

Page 13: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

The Design of Every Day ThingsThe Design of Every Day Things

“Understanding how to operate a novel device had three major dimensions:

affordances, constraints and

conceptual models”

Donald NormanNielson Norman Group

Page 14: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Developing a Conceptual ModelDeveloping a Conceptual Model

1. Object and Action Analysis

2. Lexicon or Ontology

3. Scenarios

Mental Model = Conceptual Model

Cartoon by Mark Parisi. Used by special permission.

Page 15: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Opportunities for Design Opportunities for Design Ubiquitous computing (mother of them all)• Pervasive computing• Wearable computing• Attentive environments• Transparent computingReal-World User Interfaces • Software Agents• Mobile/wearable computing• Information Visualization• Computer Augmented Environments• Virtual reality

Website/Web Application Design

Page 16: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Web DesignWeb Design

Page 17: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

UID & Web DesignUID & Web Design

This Website is an HCCL & AUCHIL collaborationCreated by Brad Barker, Beau Bowden, Christin Hamilton, Andrea Williams

Page 18: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

UID & Web DesignUID & Web Design

This Website is an HCCL & AUCHIL collaborationCreated by Brad Barker, Beau Bowden, Christin Hamilton, Andrea Williams

Page 19: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

UID & Web DesignUID & Web Design

This Website is an HCCL & AUCHIL collaborationCreated by Lei Zhang, Jamey White, and Kevin Richardson

Page 20: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

UID & Web DesignUID & Web Design

This Website is an HCCL & AUCHIL collaborationCreated by David Thompson, Sean Mahoney, and Michael Salyer

Page 21: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Interface DesignInterface Design

• Rules of interface design – Ben Shneiderman Strive for consistency, informative feedback Design dialogs to yield closure error prevention and simple error handling Support undo and reduce short-term memory load.

• First rule of usability? Don’t listen to users – Jakob Nielson Conducted series of experiments to become familiar with user

population and gathered user task profiles Fun Learning Stagecast Creator. Seals, Rosson, Carroll, Lewis Community Design of Community Simulations. Rosson, Carroll,

Seals Teachers as Simulation Programmers. Rosson, Seals

Page 22: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Universal Design & Auto DesignUniversal Design & Auto Design

We Are Getting OlderI recently watched an elderly lady struggle to

extricate herself from the front seat of a car. "Now there is a huge opportunity," I said to myself, "we live in an aging society, yet we still design for the young and able.

Why not address this huge, important market?" There is a tendency to shy away from designing for the impaired. This is a special-interest group, it is feared, one that will drive away other customers. Wrong. Designs intended to make life easier for the elderly or handicapped can be useful for everyone.

www.newmobility.comwww.newmobility.com/review_article.cfm?id=977&action=browse

Page 23: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Background: Simulations/Construction Kits

Background: Simulations/Construction Kits

• Allow users to create interesting simulations, but the user is limited to preprogrammed behavior SimCity [www.simcity.com] Pinball Construction Set [Electronic Arts] Star Wars Droid Works [Lucas Learning] ActivChemistry [Salamander interactive]

• We want to provide the rich game-like feeling of a construction kit for ease of creation, but allow user the power to specialize simulation

Page 24: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Programming in AgentSheetsProgramming in AgentSheets

• Agentsheets main interface is a simulation microworld where objects interact.

• Users program by direct manipulation: dragging condition and action templates to the rule window.

Conditions Actions

Rule WindowInterface

Page 25: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Programming in SimBuilder

SimBuilder main interface is a simulation microworld where objects interact.

Users program by direct manipulation: dragging or combining scripts in the workspace to make them active. Dragging a rule from the scripting window, expands it to a full sized script.

Page 26: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Programming Studies of Alice 3D (Strickland, Seals)

Programming Studies of Alice 3D (Strickland, Seals)

Consider the Minimalist Model• Minimalist instructional model emphasizes rapid

start-up and meaningful tasks

• “…uses the learner’s self-initiated efforts to find meaning in the activities of learning” (Carroll, 1990)

• Works well when there is no instructor present

• Turns errors into learning situations

Page 27: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Description of ResearchDescription of Research

Alice 3D has an included tutorial implemented in training wheels technique

1. Review the current instructional system tutorial

2. Develop a minimalist instructional tutorial

3. Utilize non-computer experts to help evaluate both training methods

Page 28: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Description of the Work, cont.Description of the Work, cont.

• Software is free 3D authoring tool Mature Easy to use by novices Programmers build

interactive worlds

• Can run on any computer

• Easy to utilize tutorials

Page 29: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Alice 3D Training SessionAlice 3D Training Session

Page 30: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Alice 3D Training Session,cont.

Alice 3D Training Session,cont.

Version3Version2

Page 31: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

MethodologyMethodology

• Compare two tutorials A 40-page included system tutorial AU created 16-page minimalist tutorial

• Two populations Youth (late elementary to middle school) Young adults (college students) Exposed to only one tutorial

(i.e. Between-groups method)

• Sessions timed

• Errors logged

Page 32: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Tutorial EvaluationTutorial Evaluation

• Pre-activity questionnaire User high-level background Computer User Experience (CUE)

• Paired computers The participant with Alice 3D The observer with Remote Assistance and SnagIt

• Post-activity survey Guage user acceptance of software Investigate whether training communicated basic

programming concepts with knowledge test

Page 33: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Analytical Exploration and Experimental Assessment, cont.

Analytical Exploration and Experimental Assessment, cont.

• Expectations System tutorial participants

• Would understand the system better• Would take longer to complete the tutorial• Youth would be bored

Minimalist tutorial participants• Have little understanding of the environment • Would finish the tutorial quickly • Both age groups would do well • Able to create new objects and methods immediately

Page 34: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Virtual CommunitiesVirtual Communities

Community Sims

tapped in@SRI

squeakland.org

Page 35: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Virtual CommunitiesVirtual Communities

TeachAlabama

squeakland.org

Page 36: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Virtual Community:Teach Alabama

Virtual Community:Teach Alabama

This Website is an HCCL & AUCHIL collaborationCreated by Andrea William, Kinnis Gosha, and Wanda Eugene

Page 37: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

SimBuilder Science Cary Woods Elementary School

Computer Science Education Research:

SimBuilder Science Cary Woods Elementary School

Computer Science Education Research: • Project at Cary Woods started in 2006

• Study of Novice Programmer Techniques for Programming

• What level of materials are appropriate for 4th, 5th and 6th grade to keep them engaged? Have existing tutorials appropriate for their teachers Redesign after semester to have more kid friendly instructional

manuals

• Research in Computer Supported Collaborative Work and Virtual Teacher Community (teachalabama.net)

Page 38: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Auburn University & Auburn City Schools Broadening Participation in Computing

Auburn University & Auburn City Schools Broadening Participation in Computing

Why Game Design?Mentoring, Recruiting, Retention,Outreach, Research

Page 39: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

The NeedThe Need

• Among the Top 10 fastest growing jobs through 2014

• 20,000 American graduates with degrees in computing

• Impact America’s position in global economy

Page 40: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Projected Job OutlookFrom Bureau Labor Statistics

Projected Job OutlookFrom Bureau Labor Statistics

Occupation

Employment Change

(in thousands)

2004-2014

Number Percent

Computer Software Engineers, applications 222 48Computer Systems Analysts 153 31Computer Software Engineers, systems software 146 33Network & Computer Systems Administrators 146 43Network systems and data communications analysts

126 55

http://stats.bls.gov/news.release/ooh.t01.htm (retrieved Aug. 31, 2007)

Page 41: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

The PerceptionThe Perception

• Scientists are boring.• Scientists are uncool.• Scientists are geniuses. • Scientists are only white men.

Page 42: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

The Ripple EffectThe Ripple Effect

• A small pebble dropped in still water causes change.

• Excite the youngest

• Interest the oldest

• Watch college enrollment increase

Page 43: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Student MotivationStudent Motivation

• Today’s student...• wants to share

knowledge• interconnects working,

learning, & play• anticipates the next

level of change (Whitehead, 2003)

Page 44: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

After School Computer ClubAfter School Computer Club

• Use Carnegie Mellon’s free Alice 3D software (www.alice.org)

• Create a digital stimulation of a story

• Explore different literary genres

Page 45: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Screen to TurfScreen to Turf

• Integrate programming & robotics

• Lego Mindstorms NXT

• Pilot at CWES

• 5th Grade Venture Pull-Out students

Page 46: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Game to Teach & Game to Learn : Benefits for CS EducationGame to Teach & Game to Learn : Benefits for CS Education

• Gaming is NOT a panacea or Holy Grail• Will NOT solve the problems of CS education, such as dwindling enrollments,

incorrect perception that there are few jobs because of outsourcing• But can offer more interesting challenges• May be attractive to students intrigued by games

NCSU reported that 80% of their students became majors because they wanted to create computer games -R. Michael Young Center for Digital Entertainment

• Full Time occupation (Game Development) ElectronicArts (30-50% college hires), Microsoft, Sony, Nintendo,

SecondLife, LucasArts… Gaming and All CS/IT have lots of job opportunities

• Very new field of study Standard theory, practice & terminology still being formulated

Page 47: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Things Necessary in training Great Problem Solvers = Great Gamers

Things Necessary in training Great Problem Solvers = Great Gamers

• Game vs. Play• Need Strong Programmers with the following

background Data Structures/Algorithms/Artificial Intelligence Graphics Networks/Parallel Processing Strong Science: Physics Strong Math: Discrete,3D Math vectors/matrices, etc. Introduction to Game Design (2D & 3D) Problem Solving Skills Team work in teams > 2 Work on larger code bases

Page 48: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Intro to Game DesignIntro to Game Design

• Intro with Visual Programming with RoboCode, Alice 3D, AgentSheets, AgentCubes, SimBuilder, GameMaker NL

• Game AI• Game Design Engine

3D Game Studio • for 2D & 3D creation with C++

• Graphics Design for Character & Scene Development Maya and Blender Open GL (from Graphics class) Cg Game Theory & Multiple Project Components

• Apply Software Engineering & HCI Techniques• Loads of programming

Page 49: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Gaming and CS ED ResearchGaming and CS ED Research

• Does the medium of game creation cause students to spend more time on their assignments? Spark a Spirit of Competition?

• Will it inspire them to learn more about computer science and the merits of being a proficient programmer & designer?

• Will it attract more students to Major, Minor or achieve a certificate in Gaming Technology?

• Will the students that take this type of course be prepared and competitive in the workforce, because of competitive incentives in class

• What type of games do girls like to play? Does gender influence gaming, Etc…

Page 50: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Game ProjectsGame Projects

• Gaming for Education: Culturally Situated Design Tools Games to support CS Games to support High School AP CS Games to support K-12 mathematical

concepts Games for Senior Citizens

Page 51: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Educational GamesEducational Games

• Gaming for Education: Language Learning Mathematics(Basic Math, Algebra & Geometry) Financial Literacy

Page 52: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Gaming in Computer & Information Sciences

Gaming in Computer & Information Sciences

• Games can give students incentives to spend more effort into assignments

• Increases spirit of competition• Apply all your computing knowledge• Gaming assignments, classes and affinity groups• Games are a familiar medium for many students• Possibility of attracting more students to Major• Job Security • Games can be used for training

Page 53: User Interface Design Techniques for Novice Programmers Computer Gaming Dr. Cheryl D. Seals Computer Science & Software Engineering Interactive Systems

Questions?Questions?