Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game...

35
Designing Real-World Interfaces in the Classroom Bill Van Loo Honey Creek Community School Ann Arbor, MI

Transcript of Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game...

Page 1: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Designing Real-World Interfacesin the Classroom

Bill Van LooHoney Creek Community SchoolAnn Arbor, MI

Page 2: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Learn what interfaces are, and how teaching about them can help prepare your students.

Page 3: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Who am I?

Page 4: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Before going into teaching, I worked as a Web developer and interaction designer in Detroit.

http://www.flickr.com/photos/mikemac29/

http://www.flickr.com/photos/mikemac29/
http://www.flickr.com/photos/mikemac29/
Page 5: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

After doing that for 8 years, I became a certified teacher.

Page 6: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

I'm now the Technology Specialist for Honey Creek Community School in Ann Arbor, Michigan.

Page 7: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

BitsandAtoms

are both my friends.

Page 8: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Free,Cheap

and

Open Source

Page 9: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

What is an

interface?

Page 10: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

An interface is the combination of hardware and software, designed to work together as a control.

Page 11: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

My favorite book on interface design.

Page 12: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

3 examples

with

demos

Page 13: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

ScratchGames

Page 14: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Here’s what Scratch looks like.

Page 15: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

4th & 5th grade students were given the opportunity to create a game or interactive story using Scratch.

Page 16: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

ScratchDEMOS

Page 17: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Designing Interactivity with

Processing

Page 18: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Here’s what Processing looks like.

Page 19: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Middle School students were given this Design Brief template for their interactivity projects.

Page 20: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

ProcessingDEMOS

Page 21: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Assistive Technology:One-Button

Games

Page 22: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

For High Point

Page 23: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Step 1:Identify Problems & Opportunities

Page 24: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Your job today is to observe and ask questions to find out what problems and opportunities exist in Hasana’s classroom (C6).

Step 1:Identify Problems & Opportunities

Page 25: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Your job today is to observe and ask questions to find out what problems and opportunities exist in Hasana’s classroom (C6).You will write down your observations on a sheet of paper that you take with you.

Step 1:Identify Problems & Opportunities

Page 26: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Your job today is to observe and ask questions to find out what problems and opportunities exist in Hasana’s classroom (C6).You will write down your observations on a sheet of paper that you take with you.What would be good to notice and carefully observe?

Step 1:Identify Problems & Opportunities

Page 27: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Step 1:Identify Problems & Opportunities

Page 28: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Design Brief:

Step 1:Identify Problems & Opportunities

Page 29: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Design Brief:You will design, build and test a 1-button game for the students in C6.

Step 1:Identify Problems & Opportunities

Page 30: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Design Brief:You will design, build and test a 1-button game for the students in C6.

Requirements:

Step 1:Identify Problems & Opportunities

Page 31: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Design Brief:You will design, build and test a 1-button game for the students in C6.

Requirements:• Your game must use only one button (the space bar) to

be played

Step 1:Identify Problems & Opportunities

Page 32: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Design Brief:You will design, build and test a 1-button game for the students in C6.

Requirements:• Your game must use only one button (the space bar) to

be played• You may use either Keynote or Scratch to create your

game

Step 1:Identify Problems & Opportunities

Page 33: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

Design Brief:You will design, build and test a 1-button game for the students in C6.

Requirements:• Your game must use only one button (the space bar) to

be played• You may use either Keynote or Scratch to create your

game• You must have no more than one word per screen

(words are optional)

Step 1:Identify Problems & Opportunities

Page 34: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

One-Button Game

DEMOS

Page 35: Designing Real-World Interfaces · Design Brief: You will design, build and test a 1-button game for the students in C6. Requirements: • Your game must use only one button (the

For a complete list of links I referenced, please go to:billvanloo.com/teaching/

E-mail me at:[email protected]

Thank You!

mailto:[email protected]
mailto:[email protected]

The Web Browser Button Game Click to play Click to play.

The Web Browser Button Game Click to play Click to play.

C6 - Functions

C6 - Functions

APPENDIX C6 SIGNATURE AUTHORITY GUIDE (RIGHT ... - · PDF fileHIGHWAY OCCUPANCY PERMIT OPERATIONS MANUAL Appendix C6 – Signature Authority Guide PUB 282 (7 -17) C6-1 APPENDIX C6

APPENDIX C6 SIGNATURE AUTHORITY GUIDE (RIGHT ... - · PDF fileHIGHWAY OCCUPANCY PERMIT OPERATIONS MANUAL Appendix C6 – Signature Authority Guide PUB 282 (7 -17) C6-1 APPENDIX C6

Syllabus - Macmillan Young Learners · • Making a cut-out and using it in a communicative game C1 C5 C6 C7 C8 • Creating a secret message C1 C3 C5 C6 C7 C8 ... Syllabus Quest_TB3_ENG.indd

Syllabus - Macmillan Young Learners · • Making a cut-out and using it in a communicative game C1 C5 C6 C7 C8 • Creating a secret message C1 C3 C5 C6 C7 C8 ... Syllabus Quest_TB3_ENG.indd

LED Matrix Game Development Kit - cs.colostate.educs453/yr2013/MeggyJavaInfo/... · - LED Matrix Game Development Kit - ... but if you wish to do so, ... 14 C1,C2,C4,C5,C6 0.1 uF

LED Matrix Game Development Kit - cs.colostate.educs453/yr2013/MeggyJavaInfo/... · - LED Matrix Game Development Kit - ... but if you wish to do so, ... 14 C1,C2,C4,C5,C6 0.1 uF

P3ProSwing ProGolf Manual Manual.pdf · game will be listed as username_date_time_type of match. lick on your game and then the Join Game button. Clicking the Create Game button will

P3ProSwing ProGolf Manual Manual.pdf · game will be listed as username_date_time_type of match. lick on your game and then the Join Game button. Clicking the Create Game button will

J.J&JEFF - Konami · operation is critical to your success in fighting g RUN Button Starts and pauses the game. Also used with the SELECT Button to reset the game. Turbo Switches

J.J&JEFF - Konami · operation is critical to your success in fighting g RUN Button Starts and pauses the game. Also used with the SELECT Button to reset the game. Turbo Switches

Subsection c6

Subsection c6

PORTFOLIO 2020 - brastronic.com.br › wp-content › uploads › 2018 › 10 › catalog… · mobile APP Cloud services Internet H6 Multi Axis C6 SMART C6 I/O C6 Safety C6 IPC Box

PORTFOLIO 2020 - brastronic.com.br › wp-content › uploads › 2018 › 10 › catalog… · mobile APP Cloud services Internet H6 Multi Axis C6 SMART C6 I/O C6 Safety C6 IPC Box

Button Blender : Remixing Input to Improve Video Game ...skane/pubs/chi13ea-buttonblender.pdf · remixing it to varying effect, and replaying it to a running game process. Button

Button Blender : Remixing Input to Improve Video Game ...skane/pubs/chi13ea-buttonblender.pdf · remixing it to varying effect, and replaying it to a running game process. Button

C6 METALLOGRAPHY

C6 METALLOGRAPHY

AMONG US REAL LIFE GAME - EMERGENCY MEETING BUTTON

AMONG US REAL LIFE GAME - EMERGENCY MEETING BUTTON

Chapter c6

Chapter c6

C6 - Parsing

C6 - Parsing

CITROËN C6 - RTCWmapsrtcwmaps.com/c6.pdf for further information. Below is a selection of C6 accessories: * MP3 player not included. UNLIMITED STYLE. THE C6 HAS A WIDE VARIETY OF

CITROËN C6 - RTCWmapsrtcwmaps.com/c6.pdf for further information. Below is a selection of C6 accessories: * MP3 player not included. UNLIMITED STYLE. THE C6 HAS A WIDE VARIETY OF

ARCADE GAME - Amazon S3 · ARCADE GAME. MAGNET MAGIC! Bits snap together with magnets. The magnets are ... VIDEO GAME CONTROLLER ELEVATOR BUTTON GAME SHOW BUZZER p4 POWER i3 BUTTON

ARCADE GAME - Amazon S3 · ARCADE GAME. MAGNET MAGIC! Bits snap together with magnets. The magnets are ... VIDEO GAME CONTROLLER ELEVATOR BUTTON GAME SHOW BUZZER p4 POWER i3 BUTTON

Bulldlng Quallty Since 1976€¦ · C6 Ford C6 C6 Ford C6 Ultra-Comp 7" Torque Converters These very specialized converters work well in many comp eliminator applications. 283, 327,

Bulldlng Quallty Since 1976€¦ · C6 Ford C6 C6 Ford C6 Ultra-Comp 7" Torque Converters These very specialized converters work well in many comp eliminator applications. 283, 327,

Velasquez C6

Velasquez C6

storage.googleapis.com · Mack the Knife [C6] [Dm] [G7] [C6] [Am] [Dm] [G7] [C6] (stop) Well the [C6] shark has pretty [Dm] teeth dear And he [G7] keeps them pearly [C6] white Just

storage.googleapis.com · Mack the Knife [C6] [Dm] [G7] [C6] [Am] [Dm] [G7] [C6] (stop) Well the [C6] shark has pretty [Dm] teeth dear And he [G7] keeps them pearly [C6] white Just

Classic Videogames, Retro-gaming, and Game Collectors - Digital … · 2010-12-06 · X(stop) PO'ed CONTROLS Left Shift Button Right Shift Button C Button B Button A Button Play/Pause

Classic Videogames, Retro-gaming, and Game Collectors - Digital … · 2010-12-06 · X(stop) PO'ed CONTROLS Left Shift Button Right Shift Button C Button B Button A Button Play/Pause