SketchingInteractiveSystems withSketchlet

sketchlet.sf.net
eljkoObrenovi obren.info/

Agenda
RoleofSketchinginInteractionDesign SketchingInteractiveSystemswithSketchlet
Video

Details from Taccola's Notebook (from first half of C15) Several sketches of ships are shown exhibiting different types of protective shields, and one with a "grappler." (Figure: From McGee, 2004; Detail of Munich, Bayerishe Staatsbibliothek. Codex Latinus Monacensis 197 Part 2, fol. 52)

QuintessentialActivityofDesign

FromaMaterialistto ExperientialPerspectiveofDesign
Wearedeludingourselvesifwethinkthat theproducts thatwedesignarethe "things"thatwesell,ratherthanthe individual,socialandculturalexperience thattheyengender,andthevalue and impact thattheyhave. BillBuxton

AbstractViewonSketching
SketchingUserExperiences [Buxton2007]:
Sketchesimplementedas video,interactiveslideshow,runningsystem

Sketchproperties:
Clearvocabulary,distinctgesture,ambiguous, minimaldetailsandappropriaterefinement, suggestandexploreratherthanconfirm, quicklyandtimely,inexpensive disposable,plentiful

Engineering

Stop further development

Prototyping iterative, incremental weeks, months Sketching

explorative, heuristic, trial-and-error hours, days

Continue with engineering

Sketchlet between sketching and prototyping

Sketchlet
FreeHandGesturing EndUserProgramming I/OServices + HackingTechniques =

Sketchifying

Exercises

Exercises:FlipBookAnimation
1. Defineaflipbookanimationthat,in5frames, illustratesworkingofasandclock 2. Defineaflipbookanimationthatillustrates walkingofaman 3. TakeanimageofacartoonfromtheInternet (suchasfromhttp://www.dilbert.com/),and turnitintoaflipbookanimation

Exercise:PropertiesAnimation
1. Createpropertiesanimationthatillustratesa ballrollingfromlefttotherightandback
Tip:animatetwoproperties,positionxand rotation.Usepulseforeveranimation

2. Createapropertiesanimationthatchanges (pulses)thetransparencyofanimage

Exercise:Variables
Createtwoactiveregionssothatrotationofone activeregionrotatestheanotheractiveregion
Createtwoactiveregions Createavariablerot Connecttherotationofthefirstactiveregiontothe variablerotsothatuserrotatingtheactiveregion updatesthevariablewiththeregionorientation Usevariablerottosetpropertyrotation ofanotheractiveregions

Exercise:PageTransitions
Defineaprojecttoillustrateworkingofacoffeemachine
Screen1:selectionofthreedrinksbymouseclicks Screen2:showsaninformationwhichdrinkisbeingprepared, andafter5secondsautomaticallytransfersbacktoScreen1

Variations:
EnableselectionofdrinksinScreen1bykeyboard Defineonemorepagewithinformationthatadrinkisnot available.ChangeScreen1totransittothispagewhenauser selectedoneofthreedrinks.Thepageshouldalsohavea buttonthatenablesausertogoesbacktoScreen1. Enableselectionofdrinksbyspeech,usingaspeechrecognizer I/Oserviceandonvariableupdatespageactions.

Exercise:ScreenCapturing
OpenaWebbrowserwithaYouTubevideo, anddefineapagewhereweshowthisvideo overtheimageoftheroom.
Tip:FindanimageoftheroomontheInternet, andcopyandpasteitasbackgroundimageofthe page.Useperspectivetransformationsofthe regiontoalignacapturedmovieontheimageof thewall.

Exercise:Widgets
Definetwoactiveregions,onewithanimage, andotherwiththehorizontalscrollbarwidget. Defineinteractionsothatscrollbarisusedto definethetransparencyoftheimage.

Exercise:Timers
Defineatimerthatanimatesvariablexfrom 0to500.Createaregionwithanimageinit, andusethevariablextochangeregions'x position. Variation:
Extendthetimertochangethevalueofthe variableafrom0to360 Usevariableatocontroltheypositionothe regionbyformula=200+sin(a)*100

Exercise:TrajectoriesandTimers
Defineanactiveregionininanovalshape, anddefinetrajectoryandassociatedtimer thatshowshowtheregionfallsfromatable andbouncesonthefloor.

Exercise:FormulasandSpreadsheets
Createavariablea Createavariableb,andsetthatitsvalueequalsvalue ofthevariableamultipliedby3 Openinternalspreadsheetspanel,andsetthefield A1totakevaluefromvariablea SetB1asasumofvariablebandfieldA1 Defineanactiveregion,andconnectthevariableato itspositionxsothatdraggingtheregionupdatesthe variable.Setthetextpropertyoftheregiontobetake fromthefieldB1.

Exercise:KeyboardEvents
Defineavariableheight,andsetitsvalueto100 Defineanactiveregion,andsetitsheightpropertytobetaken fromthevariableheight Openpagekeyboardeventspanelanddefine:
OnpressingthekeyA, incrementthevariableheightby10 OnpressingthekeyB, decrementthevariableheightby10

Variation:
definethatvariableheightisincremented/decremented everyhalfasecondwhenauserisholdingkeysAorB

Exercise:Macros
Createtwopages,andonasecondpagedefineanentry macrothatdoesthefollowing:
Updatesvariablexto0 Pausesexecutionfor2seconds Updatesvariablexto100 Pausesexecutionfor3seconds Makeatransitiontofirstpage

Variation:
Onthesecondpage,createanactiveregionandsetitstext propertyandhorizontalpositiontobetakenfromavariablex.

Exercise:FaceDetector
StartafacedetectorI/Oservice,andcreatean activeregionwherehorizontalandvertical positionoftheregionaretakenfromtheface detector,sothatmovementsofthefacemove theactionregiononthescreen.

Exercise:Speech
StartthetexttospeechI/Oservice,and defineanaudiobook,withthreeimagesin threeregions,anddefinetheinteractionof thatwhenausermovesamouseoveran image,thetexttospeechservicepronounces whatitis.

Exercise:Wii
StartaWiiI/Oserviceanddefineanactive regionwhoserotationisdefinebytheWiiX axisaccelerator.

Exercise:VNCandiPhone
StartaVNCclientonyoumobiledevice,and connectittothemachineonwhichSketchlet isrunningontheport5950.