CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016...
Transcript of CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016...
![Page 1: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/1.jpg)
HumanComputerInteractionLaboratory
CMSC434Introduction to Human-Computer Interaction
Week 01 | Lecture 01 | Jan 28, 2016
Design Activity & Class Intro
Jon Froehlich
@jonfroehlich
COMPUTER SCIENCEUNIVERSITY OF MARYLAND
![Page 2: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/2.jpg)
Source: https://twitter.com/ftrain/status/542174768121004032
![Page 3: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/3.jpg)
Design Activity: Smart Ring
• You work at one of the most innovative tech companies in the world: Orange. At
Orange, you’ve been tasked with coming up with the next revolution in wearable
technology: ‘smart rings.’
• Your task:
– Write down as many ideas as possible for uses of the smart ring
– Think about:
• How does the user interact with the ring?
• Does it have a display? If so, what kind? What other output is possible with a ring?
• How big is the ring?
• How is it charged?
• What are some design challenges unique to rings?
– Exchange with your partner
– Now select two of your favorite ideas and sketch out the ring design and use scenario.
![Page 4: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/4.jpg)
Activity Reflections
• How many people drew more than one thing?
• How many people drew contextual things (e.g., beyond just the ring + hand)
• How many people just drew the ring?
• How many people included annotations?
![Page 5: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/5.jpg)
Source: https://twitter.com/PimVerlaan
![Page 6: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/6.jpg)
Source: https://twitter.com/PimVerlaan
![Page 7: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/7.jpg)
![Page 8: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/8.jpg)
ACCESSIBILITY SUSTAINABILITY
HEALTH
SMART CITIES
Design TheoryBehavior Change (CHI’13)Eco-Feedback (CHI’10)
Eco-Feedback PrototypesWater (CHI’12)PhD Dissertation (UW’11)Electricity (Pervasive’11)Transit / UbiGreen (CHI’09)
Building Resource SensingHydroSense (UbiComp’09, Pervasive’11)WATTr (UbiComp’10)Electricity Usage (Pervasive’12)GasSense (Pervasive’10)
Sustainable TransportationBikeshare (UrbanSense’08, IJCAI’09)UbiGreen (CHI’09)
Wearables for HealthBodyVis (IDC’13, CHI’15)
Social Fabric Fitness (CHI’14)UbiFit (CHI’08, UbiComp’08)
Accessible CitiesBusStop (ASSETS’14, TACCESS’15)
Sidewalk (ASSETS’12, CHI’13, HCOMP’13, UIST’14, CHI’16)
Touchscreen AccessibilityGames (ASSETS’13)
Older Adults (CHI’13)Barrier Pointing (ASSETS’07)
Wearables for AccessibilityGlassEar (CHI’15)
HandSight (ACVR’14, ASSETS’15)
Automated BuildingThermographyFormative Study (CHI’15)UAV Feasibility Study (UbiComp’14)
Transit Prediction & AnalysisPublic Transport (ICDM’10, PMC’12)
Route Prediction (SAE’08)
PHYSICAL
COMPUTING /
MAKER TOOLS
About Me
Construction KitsPixel (IDC’14)MakerShoe (IDC’15)
Ambient MediaAtmoSPHERE (CHI’15)
![Page 9: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/9.jpg)
AccessibilityProject Sidewalk
![Page 10: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/10.jpg)
AccessibilityProject Sidewalk Our Approach: Use Google Street View (GSV) as a massive data source for
scalably finding and characterizing street-level accessibility
![Page 11: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/11.jpg)
University of Maryland: Help make our sidewalks more accessible for wheelchair users with Google Maps
Kotaro Hara
Timer: 00:07:00 of 3 hours
10 3 hours
Labeling Interface
![Page 12: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/12.jpg)
E-Textiles/WearablesHow can we use e-textiles to support new learning experiences, social interactions, health and wellness, etc.?
![Page 13: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/13.jpg)
![Page 14: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/14.jpg)
![Page 15: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/15.jpg)
![Page 16: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/16.jpg)
FABRIC MOUSE TOUCHPADBy Peter Enns & Chris Imbriano, Spring 2014
![Page 17: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/17.jpg)
![Page 18: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/18.jpg)
MUSICAL SPAGHETTI MADNESSBy Richard Johnson, Spring 2014
![Page 19: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/19.jpg)
![Page 20: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/20.jpg)
HCIL HackerspaceFounded in 2012
![Page 21: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/21.jpg)
BenShneiderman BenBederson JonFroehlichJenGolbeckLeahFindlater
MarshiniChetty
JennyPreece
AllisonDruin MonaLeighGuha TammyClegg JuneAhn EvanGolub TimClausner KentNorman
IraChinoy
KariKraus
AnneRose CatherinePlaisant
computer
science
hcil
JessicaVitak
NiklasElmqvist NicholasDiakopoulosYlaTausczik
![Page 22: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/22.jpg)
Human-Computer Interaction Lab
![Page 23: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/23.jpg)
AV Williams
Computer Science Building
Hornbake Library, South
iSchool Building
is on the 2nd floor
![Page 24: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/24.jpg)
![Page 25: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/25.jpg)
TA: Matt MaurielloTA Experience: many classes including CMSC434 three times
PhD Dissertation Topic: How can we develop crowdsourcing, computer vision, and thermal cameras to
scalably audit built infrastructure?
![Page 26: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/26.jpg)
REQUIRED MATERIALS
SketchbookAvailable at most book/art stores
including @ Stamp. ~$10-15
LaptopMac or Windows
Pens/Pencils
Bring the following to each lecture
![Page 27: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/27.jpg)
TEACHING PHILOSOPHY
Source: http://fitandaliveat105.com.au/wp-content/uploads/2014/12/learn-by-doing.jpg
![Page 28: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/28.jpg)
How We’ll Learn
Learn by Doing• Individual assignments
• Team (project) assignments
• In-class activities
• Design critiques
Other Methods• Lecture
• Some assigned readings/videos
• Quizzes/exams (helps reinforce learning)
![Page 29: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/29.jpg)
Source: Spaceballs, 1987
![Page 30: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/30.jpg)
! WARNING
HIGH
WORKLOAD
AHEAD
![Page 31: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/31.jpg)
! WARNING
HIGH
WORKLOAD
AHEAD
But I believe in every activity/assignment I give you!
![Page 32: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/32.jpg)
! WARNING“This class is certainly a fun, interesting course to take .. it
will keep you quite busy and you can easily fall behind if
you don't stay on top of your workload.”-CMSC434 Student
“Course was actually intensive in terms of workload, but
we learned more…”-CMSC434 Student
“Overall, the course was a lot of work (as you warned us
in the beginning of the semester), but I learned a lot.
One of the best CS courses I've taken at UMD.”-CMSC434 Student
![Page 33: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/33.jpg)
! WARNING“This class is certainly a fun, interesting course to take .. it
will keep you quite busy and you can easily fall behind if
you don't stay on top of your workload.”-CMSC434 Student
“Course was actually intensive in terms of workload, but
we learned more…”-CMSC434 Student
“Overall, the course was a lot of work (as you warned us
in the beginning of the semester), but I learned a lot.
One of the best CS courses I've taken at UMD.”-CMSC434 Student
ACHIEVEMENT UNLOCKEDCMSC434 Metacomment
![Page 34: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/34.jpg)
Workload was appropriate.
- CMSC434 Student
![Page 35: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/35.jpg)
Really appreciated the process of learning how to
brainstorm, sketch, plan, and build. Will be useful in
many future endeavors…
- CMSC434 Student
![Page 36: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/36.jpg)
- CMSC434 Student
“The professor tries very hard to make the classroom into
a friendly, interactive community where every student is
engaged in learning from the material, the professor, and
each other; and I think he has overwhelmingly
succeeded.”
![Page 37: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/37.jpg)
I would have prefered a programming unit in this
class to show us how we can use today's
technologies to connect to what he said in class.
- CMSC434 Student
![Page 38: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/38.jpg)
Design
Build
Evaluate
Iterative Design
Human-Centered Design
![Page 39: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/39.jpg)
Major Changes this Semester
• Less writing. I’ve cut writing down by ~30-40%. This is huge.
• Alternative deliverables. Videos. Demos. Critiques.
• More programming. You’re 3rd and 4th year CS students. This is the fun stuff!
• More time for interactive prototype. Previous semesters were given roughly 18
days to implement their group project prototype. I’ve doubled this.
• We will provide (more) examples of good solutions. We will do our best to
provide more examples of ‘good’ solutions to group project.
This class is constantly changing—a live embodiment of the human-centered, iterative design process
![Page 40: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/40.jpg)
Assessment
Grade Breakdown Overall Percentage
Class Participation 5%
Quizzes 5%
Midterm 10%
Individual
Assignments
35%
Team Assignments 45%
![Page 41: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/41.jpg)
Source: https://twitter.com/mheadd/status/664956334027206656
*
![Page 42: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/42.jpg)
Project Theme: Social Justice
• Poverty
• Immigration
• War
• Censorship
• Police violence
• Militarization of police
• Income (in)equality
• Racism/bigotry
• Bullying
• 2016 US Presidential Elections
• Discrimination
• Migrant crisis in Europe
• Gender inequality
• LGBTQ issues
![Page 43: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/43.jpg)
Group Project Process and Deliverables
• IA03: Project Pitch. Pitch two social justice projects. Class votes on favorite projects. Matt and I auto-assign groups based on votes. Most people get their top 2 favorites.
• TA01: Group Collaboration Plan. 1-page doc. Forces you to think about how you are going to coordinate work, exchange numbers/emails, etc.
• TA02: Formative Research & Proposal. Be inspired. Research your area. Research existing applications.
• TA03: Sketches & Storyboards + Critique. Develop paper sketches and storyboards of your application. Iterate based on critique.
• TA04: Mid-Fi Prototype + User Testing. Develop mid-fi prototype using a rapid prototyping tool. Evaluate with user testing.
• TA05: Interactive Prototype 1 + Critique. Develop an initial interactive prototype. Iterate based on critique
• TA06: Interactive Prototype 2 + User Testing. Iterate on initial interactive prototype. Iterate based on user testing.
• TA07: Interactive Prototype 3 + Demo/Video. Iterate again. Develop final interactive prototype. Demo to class and to Matt/Jon.
Except for IA03, all project work is in groups.
![Page 44: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/44.jpg)
Group Project Process and Deliverables
Formative Inquiry
IA03: Project Pitch + Vote
TA01: Group Collaboration Plan
TA02: Formative Research & Proposal
Focus on iteration + peer feedback + user testing
Formative Design
TA03: Sketches & Storyboards + Critique
TA04: Mid-Fi Prototype + User Testing
Formative Design & Implementation
TA05: Interactive Prototype 1 + Critique
TA06: Interactive Prototype 2 + User Testing
TA07: Interactive Prototype 3 + Demo/Video
![Page 45: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/45.jpg)
Group Project Process and Deliverables
• IA03: Project Pitch. Pitch two social justice projects. Class votes on favorite projects. Matt and I auto-assign groups based on votes. Most people get their top 2 favorites. This is assigned today! See website.
• TA01: Group Collaboration Plan. 1-page doc. Forces you to think about how you are going to coordinate work, exchange numbers/emails, etc.
• TA02: Formative Research & Proposal. Be inspired. Research your area. Research existing applications.
• TA03: Sketches & Storyboards + Critique. Develop paper sketches and storyboards of your application. Iterate based on critique.
• TA04: Mid-Fi Prototype + User Testing. Develop mid-fi prototype using a rapid prototyping tool. Evaluate with user testing.
• TA05: Interactive Prototype 1 + Critique. Develop an initial interactive prototype. Iterate based on critique
• TA06: Interactive Prototype 2 + User Testing. Iterate on initial interactive prototype. Iterate based on user testing.
• TA07: Interactive Prototype 3 + Demo/Video. Iterate again. Develop final interactive prototype. Demo to class and to Matt/Jon.
Except for IA03, all project work is in groups.
![Page 46: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/46.jpg)
Example: Lexi Conversion
![Page 47: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/47.jpg)
Sketches & Storyboard
![Page 48: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/48.jpg)
Paper Prototype + User Testing
![Page 49: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/49.jpg)
Mid-Fi Prototype
![Page 50: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/50.jpg)
TA07: Interactive Prototype 3 Demo + Video
![Page 51: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/51.jpg)
TA07: Interactive Prototype 3 Demo + Video
![Page 52: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/52.jpg)
Icon from http://thenounproject.com/term/trophy/412/
The class will vote on the best interactive
prototype as well as best final video. The
winning team will get an award.
![Page 54: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/54.jpg)
Hall of Fame Hall of Shame
Start submitting these today (ASAP) and I’ll choose one for each lecture to discuss.
![Page 55: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/55.jpg)
![Page 56: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/56.jpg)
![Page 57: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/57.jpg)
Hall of Fame Hall of Shame
![Page 58: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/58.jpg)
Why is Gmail Undo a Fame?
Effective interfaces are visually apparent and forgiving,
instilling in their users a sense of control. Effective interfaces
do not concern the user with the inner workings of the
system. Work is carefully and continuously saved, with full
option for the user to undo any activity at any time.
Bruce "Tog" Tognazzini
Usability Consultant Nielsen Norman Group
Worked at Apple, Sun, WebMD
Author
![Page 59: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/59.jpg)
![Page 60: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/60.jpg)
Hall of Fame/Shame
• Video deliverable. You must upload your HoF/S video to YouTube. You can use a dummy account. On Canvas, you will submit a link to this video along with a paragraph summarizing the submission. Matt and I will choose our fav submissions to use in class.
• Video length. Outside of extreme circumstances, all videos should be ~30-60 seconds
• Content. There are two major pieces.
1. Screen recording clearly shows HoF/S interaction.
2. Use IxD principles learned in class to critique interaction and provide rationale for your HoF/S submission
• Accessibility. The recording should be accessible—so should have both captions and a voiceover.
• Personal example. Your submission must be a personal example not one found on the various HoF/S websites
Helps you constantly analyze the world and think about design.
![Page 61: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/61.jpg)
Dark Palette
![Page 62: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/62.jpg)
Light Palette
![Page 63: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/63.jpg)
Light Palette
![Page 64: CMSC434 Week 01 | Lecture 01 | Jan 28, 2016 Jon Froehlich · Week 01 | Lecture 01 | Jan 28, 2016 Design Activity & Class Intro Jon Froehlich @jonfroehlich ... iterative design process.](https://reader035.fdocuments.net/reader035/viewer/2022062921/5f02f10f7e708231d406c56e/html5/thumbnails/64.jpg)
Light Palette