rapid prototyping tools and the cogs 121...
TRANSCRIPT
RapidPrototypingToolsandtheCOGS121ProjectCogSci121-HCIProgrammingStudio
Wireframing
Low-Fidelity:PaperPrototype
https://www.youtube.com/watch?v=GrV2SZuRPv0
Low-Fidelity:BalsamiqMockups
5
-Wireframing software (web and desktop based)
-Drag and drop elements to easily build wireframes
High-Fidelity:Axure
http://axure.com https://www.axure.com/edu
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
High-Fidelity:Invision
8
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.
COGS121Projects
10
Projects
• Startstoday• Paperprototyping• Low/HighFidelityPrototype
• Requirements• UseatleasttwoDELPHIdatasets• Useweb-basedinteractivevisualizationstools• D3orothers(tobeapproved/bytheTAs)
11
Projects
• Canbeanin-depthvisualizationproject• Fancyinteractivity• Novelvisualizationtechniques
• Orabroadexploration• Explainingaproblem• Advocatingforagroupofpeople• Createacampaign
12
DELPHIdatawillalwayshavetobeatthecenterofit
Project Visualization Examples
• Harvard CS 171 Examples
http://www.cs171.org/2015/fame/
COGS 121 - 2015
SeeW04-Thuslides
FinalProjectReports
ProjectReports
• FinalProjectReportsaredueWedJune7
• Twoparts– 1)ExecutiveSummary(1-2page)– 2)Report(20-25pages)
16
ExecutiveSummary
• 1-2pagessummaryofthewholeproject
• WeplantoprovidesummariestotheDELPHIteamandotherswhoareinterestedinyourprojects.
• Youshoulddescribethekeyproblem(s)yourprojectaddressed,yourdesignideas,howyouimplementedtheprototypes,themostimportantfeatures,evaluationoftheprototypes,andpromisingdirectionsforthefutureoftheproject(notnecessarybyyou).
17
Executivesummary-Format
• TitleofProject• ProjectMembers• KeyProblemsAddressed• DesignIdeas• Implementation• Features• Evaluation• FutureDirections
18
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
ProjectReport-MotivationandBackground
• Whataremotivationsforthiswork?• Thepeopleproblem:thebenefitsthataredesiredintheworldatlarge;forexamplesomeissueofqualityoflife,suchassavedtimeorincreasedsafety.
• Thetechnicalproblem:whydoesn'tthepeopleproblemhaveatrivialsolution?
• Whataretheprevioussolutionsandwhyaretheyinadequate?• Usereferencestopreviouswork,bothinresearch,design,oralsocommerciallyavailableproducts
20
ProjectReport-Design
• Explainyourdesignidea• describeyourprototypes• includeyourwireframes• Discussprosandconsofthedifferentdesigns
• Reportonhowtheideaevolvedovertime• Addatimeline• presentafinaldesignthatyoudecidetoimplement
21
ProjectReport-SystemDevelopment
• Architecture:explainthegeneralideaofthesystemsuchasclient/server,inputs,outputs,sensors,informationflow.• Addatleastoneimage
• Technologyused:describewhatAPIsdidyouuseandwhatotherwebservicesordatasourcesyouhavebeenintegrating
22
ProjectReport-SystemDevelopment
• Features:describethefeaturesthatyoursystemoffersandhowtheyhavebeenimplemented.• Addatleastoneimageperfeature,butdonotmakethemtoobig.
23
ProjectReport-HCIPrinciples
• Discusstheimplementationoftheuserinterfaceonagenerallevel.Whatapproachdidyoutaketoimplementit,howdidyouensureitiseffective?
• DescribehowyouappliedtheHCIprinciplethatyoulearnedinclasswithinyourapplication
• Foreveryfeaturelistwhatprincipledidyouuse,andhow/whyitistherightchoice.Alsodescribehowdoesthisimproveuserexperience.
24
ProjectReport-TestingandEvaluation
• Describeanytestyoudidandhowdidthesystembehave
• Describehowwelldoesthesystemrespondtothegenrealideaandmotivationdescribedatthebeginningofthereport
• Ifyouhaveanynumberorstatisticsonthetesting,describethemandaddthemtothissection
25
ProjectReport-Collaboration
• Describethecollaboration,divisionoflaborandthedifferenttaskthat121groupmemberundertook• Listspecificallywhateachmemberoftheteamcontributedto
26
ProjectReport-ConclusionandFutureWork
• Concludebysummarizingtheworkyouhavebeendoingandreflectingontheapplicabilityofthesystemyoudeveloped
• Thinkaboutthefuturedevelopment(notnecessarybyyou)ofthesystem:wherewillitgo?howwillitbeused?whatshouldbeadded/changed?
27
FinalProjectPresentation
ProjectPresentations
• FinalPresentationwillbeduringFinalsweek– TueJune7,3-7pmCSE1202– 10minpresentation+5minQ&A– 1presenterormultiplepresenters(uptoyou)
• SchedulingFinalPresentations– Ifyouhaveanyconstraintsontime,letusknowasap([email protected])
29
ProjectPresentations
• Followlooselythestructureofthereport• Usevisuals• Describeyourapplicationindetail• Dedicate2-3minofyourpresentationforyourdemo
• Bepreparedtoanswerquestions.
30
Next
• Today:• IntroductionofAssignment#3(AmyFox)• Paperprototypinginclass
• Friday4/29:Discussionstudio• ReviewofAssignment2• QuizonWeek5
31
Next
• Nextweek:• Tuesday:Agileprogramming(andagileprojectmanagementrecap)
• Thursday:• DesignCritique#1:TheElevatorPitch(moreonitonTuesday)
• StartingWeek7:• WeeklyDesignCritiques
32
Assignment#3and Paper-Prototyping
33