Rapid Prototyping Tools and the COGS 121...

RapidPrototypingToolsandtheCOGS121ProjectCogSci121-HCIProgrammingStudio

Wireframing

Low-Fidelity:PaperPrototype

https://www.youtube.com/watch?v=GrV2SZuRPv0

Low-Fidelity:BalsamiqMockups

http://balsamiq.com

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(cogs121@hci.ucsd.edu)

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