Rapid Prototyping Tools and the COGS 121...
Transcript of Rapid Prototyping Tools and the COGS 121...
![Page 1: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/1.jpg)
RapidPrototypingToolsandtheCOGS121ProjectCogSci121-HCIProgrammingStudio
![Page 2: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/2.jpg)
Wireframing
![Page 3: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/3.jpg)
Low-Fidelity:PaperPrototype
https://www.youtube.com/watch?v=GrV2SZuRPv0
![Page 5: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/5.jpg)
Low-Fidelity:BalsamiqMockups
5
-Wireframing software (web and desktop based)
-Drag and drop elements to easily build wireframes
![Page 6: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/6.jpg)
High-Fidelity:Axure
http://axure.com https://www.axure.com/edu
![Page 7: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/7.jpg)
High-Fidelity:Axure
7
-Wireframing and mockup software (desktop based)
-Drag and drop elements to build
-Add interactivity and deploy to browser
Demo - http://d7v15s.axshare.com/#p=home
![Page 8: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/8.jpg)
High-Fidelity:Invision
8
![Page 9: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/9.jpg)
High-Fidelity:Invision
•Easytolearn/use(frommembersofindustry)
•Mustbeusedwithphotoshoporotherphotoeditor.
•Uploadyourdesignsandaddhotspotstotransformyoursta]cscreensintoclickable,interac]veprototypes
•Accountsarefree,buttheremayalsobeupgradedStudentAccountsavailablewithmorefeatures.
http://www.invisionapp.com/education
• 1 hour webinar introductions + good tutorials within the web page.
![Page 10: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/10.jpg)
COGS121Projects
10
![Page 11: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/11.jpg)
Projects
• Startstoday• Paperprototyping• Low/HighFidelityPrototype
• Requirements• UseatleasttwoDELPHIdatasets• Useweb-basedinteractivevisualizationstools• D3orothers(tobeapproved/bytheTAs)
11
![Page 12: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/12.jpg)
Projects
• Canbeanin-depthvisualizationproject• Fancyinteractivity• Novelvisualizationtechniques
• Orabroadexploration• Explainingaproblem• Advocatingforagroupofpeople• Createacampaign
12
DELPHIdatawillalwayshavetobeatthecenterofit
![Page 13: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/13.jpg)
Project Visualization Examples
• Harvard CS 171 Examples
http://www.cs171.org/2015/fame/
![Page 14: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/14.jpg)
COGS 121 - 2015
SeeW04-Thuslides
![Page 15: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/15.jpg)
FinalProjectReports
![Page 16: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/16.jpg)
ProjectReports
• FinalProjectReportsaredueWedJune7
• Twoparts– 1)ExecutiveSummary(1-2page)– 2)Report(20-25pages)
16
![Page 17: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/17.jpg)
ExecutiveSummary
• 1-2pagessummaryofthewholeproject
• WeplantoprovidesummariestotheDELPHIteamandotherswhoareinterestedinyourprojects.
• Youshoulddescribethekeyproblem(s)yourprojectaddressed,yourdesignideas,howyouimplementedtheprototypes,themostimportantfeatures,evaluationoftheprototypes,andpromisingdirectionsforthefutureoftheproject(notnecessarybyyou).
17
![Page 18: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/18.jpg)
Executivesummary-Format
• TitleofProject• ProjectMembers• KeyProblemsAddressed• DesignIdeas• Implementation• Features• Evaluation• FutureDirections
18
![Page 19: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/19.jpg)
ProjectReportFormat
• 1.Introduction(1page)• 2.MotivationandBackground(1-2pages)• 3.Design(2-3pages)• 4.SystemDevelopment(6-10pages)
• 4.1.Architecture• 4.2.TechnologyUsed• 4.3.Features
• 5.HCIPrincipleandtheirapplication(2-3pages)• 6.TestingandEvaluation(1-2pages)• 7.Collaboration(1page)
• 121groupcollaborationandsinglecontributions• 8.ConclusionandFutureWork(1page) 19
![Page 20: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/20.jpg)
ProjectReport-MotivationandBackground
• Whataremotivationsforthiswork?• Thepeopleproblem:thebenefitsthataredesiredintheworldatlarge;forexamplesomeissueofqualityoflife,suchassavedtimeorincreasedsafety.
• Thetechnicalproblem:whydoesn'tthepeopleproblemhaveatrivialsolution?
• Whataretheprevioussolutionsandwhyaretheyinadequate?• Usereferencestopreviouswork,bothinresearch,design,oralsocommerciallyavailableproducts
20
![Page 21: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/21.jpg)
ProjectReport-Design
• Explainyourdesignidea• describeyourprototypes• includeyourwireframes• Discussprosandconsofthedifferentdesigns
• Reportonhowtheideaevolvedovertime• Addatimeline• presentafinaldesignthatyoudecidetoimplement
21
![Page 22: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/22.jpg)
ProjectReport-SystemDevelopment
• Architecture:explainthegeneralideaofthesystemsuchasclient/server,inputs,outputs,sensors,informationflow.• Addatleastoneimage
• Technologyused:describewhatAPIsdidyouuseandwhatotherwebservicesordatasourcesyouhavebeenintegrating
22
![Page 23: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/23.jpg)
ProjectReport-SystemDevelopment
• Features:describethefeaturesthatyoursystemoffersandhowtheyhavebeenimplemented.• Addatleastoneimageperfeature,butdonotmakethemtoobig.
23
![Page 24: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/24.jpg)
ProjectReport-HCIPrinciples
• Discusstheimplementationoftheuserinterfaceonagenerallevel.Whatapproachdidyoutaketoimplementit,howdidyouensureitiseffective?
• DescribehowyouappliedtheHCIprinciplethatyoulearnedinclasswithinyourapplication
• Foreveryfeaturelistwhatprincipledidyouuse,andhow/whyitistherightchoice.Alsodescribehowdoesthisimproveuserexperience.
24
![Page 25: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/25.jpg)
ProjectReport-TestingandEvaluation
• Describeanytestyoudidandhowdidthesystembehave
• Describehowwelldoesthesystemrespondtothegenrealideaandmotivationdescribedatthebeginningofthereport
• Ifyouhaveanynumberorstatisticsonthetesting,describethemandaddthemtothissection
25
![Page 26: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/26.jpg)
ProjectReport-Collaboration
• Describethecollaboration,divisionoflaborandthedifferenttaskthat121groupmemberundertook• Listspecificallywhateachmemberoftheteamcontributedto
26
![Page 27: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/27.jpg)
ProjectReport-ConclusionandFutureWork
• Concludebysummarizingtheworkyouhavebeendoingandreflectingontheapplicabilityofthesystemyoudeveloped
• Thinkaboutthefuturedevelopment(notnecessarybyyou)ofthesystem:wherewillitgo?howwillitbeused?whatshouldbeadded/changed?
27
![Page 28: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/28.jpg)
FinalProjectPresentation
![Page 29: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/29.jpg)
ProjectPresentations
• FinalPresentationwillbeduringFinalsweek– TueJune7,3-7pmCSE1202– 10minpresentation+5minQ&A– 1presenterormultiplepresenters(uptoyou)
• SchedulingFinalPresentations– Ifyouhaveanyconstraintsontime,letusknowasap([email protected])
29
![Page 30: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/30.jpg)
ProjectPresentations
• Followlooselythestructureofthereport• Usevisuals• Describeyourapplicationindetail• Dedicate2-3minofyourpresentationforyourdemo
• Bepreparedtoanswerquestions.
30
![Page 31: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/31.jpg)
Next
• Today:• IntroductionofAssignment#3(AmyFox)• Paperprototypinginclass
• Friday4/29:Discussionstudio• ReviewofAssignment2• QuizonWeek5
31
![Page 32: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/32.jpg)
Next
• Nextweek:• Tuesday:Agileprogramming(andagileprojectmanagementrecap)
• Thursday:• DesignCritique#1:TheElevatorPitch(moreonitonTuesday)
• StartingWeek7:• WeeklyDesignCritiques
32
![Page 33: Rapid Prototyping Tools and the COGS 121 Projectcogs121.ucsd.edu/data/uploads/lecture-slides/cogs121_w5_thu.pdfRapid Prototyping Tools and the COGS 121 Project CogSci 121 - HCI Programming](https://reader034.fdocuments.net/reader034/viewer/2022042305/5ed1070389fc566a0112e2d8/html5/thumbnails/33.jpg)
Assignment#3and Paper-Prototyping
33