Prototyping Interact Sys
Prototyping Interact Sys CS 6452
Popular in Course
Popular in ComputerScienence
This 0 page Class Notes was uploaded by Alayna Veum on Monday November 2, 2015. The Class Notes belongs to CS 6452 at Georgia Institute of Technology - Main Campus taught by Warren Edwards in Fall. Since its upload, it has received 16 views. For similar materials see /class/234056/cs-6452-georgia-institute-of-technology-main-campus in ComputerScienence at Georgia Institute of Technology - Main Campus.
Reviews for Prototyping Interact Sys
Report this Material
What is Karma?
Karma is the currency of StudySoup.
You can buy or earn more Karma at anytime and redeem it for class notes, study guides, flashcards, and more!
Date Created: 11/02/15
Welcome to CS6452 Georgia Tech 4 Keith Edwards lteithccgatechedu 00 OOOOO E OOOOQU Some Preliminaries Georgia Tech i 010 0130 Q30 CDC 0 Georgia A Tech L Q Nuts and Bolts O This is only the second time this class has been taught O This is the second required class in the HCC PhD program D Designed to ensure a basic level of competency in building medium scale programs 9 Best thought of as the second part of CS4452 which is CS l 3 l 5 Q In HCC terms should give you the skills needed to do your computation portfolio requirement 0 This semester allowing CS students for the first time as an experiment more on this later Georgia A Tech L Q Setting Expectations 0 What does Prototyping Interactive Systems mean anyway 0 The course title has caused a lot of confusion D Not about using prototyping tools eg Director 0 Not about evaluating prototypes take the HCI class for this 0 Instead about the rapid creation of interactive systems through programming 0 Emphasis on scripting languages and common technical idioms that are useful across a breadth of CS 0 Covers both theory and practice of pragmatic systems building Georgia Tech l Programming and Prototyping 0 What does programming have to do with prototypes D It s the nal and most time consuming stage of the prototyping lifecycle O Gives you the most high delity approximation of a real system 0 Useful for communicating with endusers other developers etc 0 How is prototype programming different than other programming 0 Focus on rapid creation of basic functionality appearance behavior 0 Less on dealing with errors boundary conditions performance etc Georgia Tech J Theory and Practice 0 Last year IOO practice 0 This year 5050 balance 0 We ll read and discuss papers on alternative approaches while developing the project Georgia Tech What Do We Mean By Practice 3 0 Software development with a focus on breadth not depth 0 Skills to produce highfidelity interactive prototypes 0 Skills to produce code that makes an argument demonstration of concepts 0 HCC skills to complete the computation portfolio requirement 0 Skills in talking and writing about code 0 Pragmatic development 0 Scripting languages Jython 0 Integration with nonscripting languages Java 0 Multifile development m Command line tools 0 GUls networking threads databases web services security What Do We Mean By Theory Georgia Tech l Understanding why things work the way they do Understanding competing architectures and approaches 0 Eg clientserver versus peertopeer D Eg different models for GUI programming Not just building systems for you to evaluate but understanding the design choices embedded in systems and what those implications are for HCC Georgia A Tech L This Semester s Experiment 0 The theory aspects are likely to be useful to everyone 0 How to develop a practical project that is useful to everyone 0 This semester different projects 0 HCC HCI mediumsized project focused around basic computer science concepts 0 Likely 20003000 lines of code 0 Basic GUI networking database web services 0 Topics covered in lectures D CS largesized project focused around more advanced concepts 0 Likely 2000030000 lines of code 0 Advanced GUI networking security 0 Much more selfguidance required 0 Goal projects appropriate to the skill levels taking the class My Goals for this Class Gegg jj HCC and HCI students l 0 Hone your programming chops to the point where a mediumsized project say 5000 lines of code is not a terrifying prospect ll Learn how to decompose a problem into manageable chunks m Learn enough of the idioms of programming to be able to do more than just simple straightline programs 0 lmpart a few meta skills in the process D Communicating about software 0 Communicating through software D How to appropriate read steal others code and adapt it G Basic software project management 0 Basic understanding of a range of systems architectural choices My Goals for This Class Gagg Ik CS Students l 0 Onesemester coverage of a broad range of CS topics that may not be familiar to you I GUI toolkit internals animation and advanced techniques m Peertopeer networking 0 Security and cryptography Q 0 Experience with scripting languages to the point where a largesized project say 50000 lines of code is not a terrifying prospect 0 Practice bridging scripting and nonscripting languages 0 Communication skills around software 0 Basic understanding of a range of systems architectural choices Q COED CCOOiC 00 COCOOOQ U Georgia Tech Course Structure Georgia A Tech Q Course Structure 0 Course is structured as a set of modules 0 Each module covers a subject area in CS B Modules align with topics needed to complete a part of the project 0 Readings cover advanced topics related to each module 0 Each module is roughly 23 weeks but we ll adapt as needed 0 Roughly 0 First half of class is lecture mostly focused on practical concepts in Second half is either paper discussion or problem solvinglab 0 Occasional invited guest lectures on topics of interest 0 Everybody works individually but we ll share experiences 0 Short inclass presentations toward the end of each module 0 Describe the architecture of a portion of your prototype how you solved a problem what design choices were available etc Georgia A Tech Q Modules Asynchronous Programming 0 Eventbased programming callbacks polling Distributed Applications 0 Idioms of networking clientserver peertopeer Web Services ii XML SOAP using web services in practice integration with Java code IV Data Management D Logging instrumentation data storage and querying databases V Advanced Topics in TBD but candidates include security hardware research in prototyping Georgia A Tech Q The Project O This is a project class 0 We will do one project that lasts the duration of the semester D HCC HCI IMChat program probany 20003000 lines of code 0 CS P2P Social Networking Tool probany 2000030000 lines of code D Singleperson teams 0 Assumes Jython knowledge at about the level of CS4452 0 Good mastery of control flow variables scoping 0 Basic objectoriented programming concepts G How to use JES or another development environment Exams 0 Four exams this semester D Roughly one per module 0 Noncumulative 0 Combination of simple answer and essay 0 Drawn from readings and inclass discussions Georgia Tech J Grading Criteria Georgia A Tech L Q taught in class Project Implementation how functional is your prototype How well does it work How well does it demonstrate the concepts 40 nclass examinations roughly one per module 30 Class participation and attendance 20 lnclass presentations O Today s Class 0 Outline for the remainder of today s class D D What is prototyping Why prototype The kinds of prototyping The first project assignment Practicum getting started Georgia Tech J Georgia Tech l What is Prototyping O The creation of artifacts that can be used to 0 Assess the utility and usability of a proposed system through evaluation ll Communicate design alternatives with various stakeholders 0 The customer 0 Engineersbuilders 0 Management 0 Ideally a prototype should be quick enough to build to allow easy experimentation O have fidelity appropriate to demonstrate the desired concepts Georgia Tech 1 Why Prototype 0 In two words risk mitigation 0 From an evaluation perspective allows you to get feedback on designs before there s a huge investment in it 0 From a design perspective allows you to quickly experiment with alternatives cheaply Tech Georgia 4 An Example 0 When interfaces go bad Em VIHEADMEMHI LEI I 0 What s wrong with this An Example 0 When interfaces go bad Flename l Euirent Diretnryf3quotsF39Fl ElF H DHE BK l Er ur39n llFiEADMEWHI V Cancel l In H equot 0 What s wrong with this in The From eld is editable but doesn t do anything in Let s you change the le extension without warning Q Is modal 0 Could this have been saved by prototyping Georgia Tech l Another Example 0 Not just restricted to applications If you are seated in an exit row and you cannot understand this card or cannot see well enough to follow these instructions please tell a crew member Georgia Tech t One more 0 Alarm Clock a la Terry Gilliam s Brazil Georgia Tech J r Georgia A Tech L Kinds of Prototypes S 0 There are a range of prototyping techniques for a range of goals 0 Ideally m Start with lightweight prototypes to communicate the big picture 0 Move to more realistic ones as risk factors are mitigated and you need to communicate about the details 0 Fidelity in prototyping w Fidelity is the level of detail in a prototype D Lowfidelity many details missing maybe sketchy apperance 0 Highfidelity prototype looks like the nal system on the surface Georgia Tech l Lowfidelity Prototyping 0 The lowest of the lo paper prototyping D If you ve ever designed a Ul this is probably something you ve done informally 0 Capture overall layout 0 Storyboards m From the lm and animation arts 0 Capture behavior not just appearance 0 Goal keep the designimplementevaluate cycle as tight as possible 0 These techniques do it by keeping the implementation phase small Example Simple Paper Prototype E Get image of iPaq Cut out screen area Make lots of copies 99quot Fill in copies as needed 9 Can be turned into storyboard O Annotate controls with numbers 0 Numbers lead to other sheets Georgia Tech amp I Timplmta 1 Dim1 Carib923 39 i Fraii39iw Drwi lf i 13333 or Wr El PHI1m E1 itsHug mu IE 5 3quot pi 59man T6 K9954 1 7 7 W 7 hadb y an LL 4 A yd L A Few More Examples Georg39 Ia Tech W 710 r co 3 Developing and Evaluating Gegrr gg ry Low delity Prototypes l 0 Basic tools of the trade 0 Sketch large window areas on paper 0 Put different screen regions anything that changes on cards 0 Overlay cards on paper 0 The copier is your friend U Can easily produce many design alternatives 0 EvaluationzYou can run your paper prototype in The designer simuates the computer in front of a user D Need to be ready for any user action dropdown menus etc Georgia Tech l High delity Prototyping Once again a range of practices that give you higher delity in exchange for higher implementation time Toolbased approaches GUI builders Codebased approaches Downsides 0 Cost is the obvious one 0 Also 0 Warp perceptions of the customer elict more comments on color fonts etc 0 Attending to details can lose the big picture Georgia Tech J Toolbased Prototyping 0 Examples Director Flash the Web 0 Pros U Faster than writing code 0 Easier to incorporate changes 0 Often more reliable hit the back button rather than program crash 0 Cons D No easy way to transition to a nished product 0 May not allow access to the full range of features available to the nished product eg may not be able to prototype networking or certain platformspecific features Example Director rnml ixlzms WHdilw Help Georgia Tech iii 1 i ma Dirg ar Mum Mm Innm Mi llniv a iaeap Eu l C15 Merrillm Cum Cut Members Pasha Sigmun DEALERS Clear Cast anburi Duphmm Sulcu All Find Edzl 2451 MtuL JEr Ekil i f il CJM M 39lbl li H 314 w SDI ESL pr 21quot 1 mom I EUVERHIJEH F DIE El 0 g 555 3 r5 l 39 39 l hapmwlnpn lw THID mnrua El 909 F lift1M1 lvapn s si unw JU K J ut 39 i Ifianr c 4 39Eun l Hun m Warm Thu Iquot 1 2 3 4 a i7 11 n 1 n m 1 LI 10w Wafer I39ll1 manJar leuw thiHrIn VTlldlnlgn r39 rf llxm J MLLzly 3U Trial AZJI 54JI39H rmam Eur 66 F th GII l39 E41 rmrm WU la A a r r ilF i aweu m1nnhn WIDE LEI 5 1th PEST PM I nitrici LI39J I IP P mm lm39 u mimicma wm any 39 TinJ L i md n 1r qu I39mre khan lm tcl l L TIAIIF JI wand1 NJ Enema Flam MI C l l l LII mm with L Ebert4 39Ilf EII39IZE Ll O39Miv ul l ril l39 L urJI Illhawk kl mnuml Viz t gslllrul39 I39llm 3 I4 i uimgl magum U39Ji In tIrqul nz r r 39 r q r 4 0 Timeline editing Palettes 0f graPhiCal Widgets etc39 i 0 Emits a le that can be executed on any program that has the required runtime engine 3OCHMOC M 5 i i air o o amp Example OmniGraffle 0 Drag graphics that depict GUI elements onto canvases 0 Canvases can be linked I Example Click on elementA on canvas 3 goes to canvas 4 0 Can emit an interactive set of web pages 0 Mac only unfortunater C C O C C C 0000 Georgla o o o Tech 039 E E quot 1 i i Un39irleri 39 e 0 Utiliti 77 i w s cils Inspect 1 Layerl Meni 1 f6 jectsselected ii ii E39 Alert Dialog T There are unsaved changes W iat would you like to do Don39t Save cancel Save IA 10096 3 ExamplezWeb Prototyping 0 Webbased version of lofi prototype shown earlier 0 Controls simply link to another page 0 Allows finetuning of text graphic size after behavior has been tested on paper 0 Can be done by hand or by web development tools Tech Georgia A Internet Explnrer 3l p r39h V 39l I l l J zj39 image lib Entrapment iii L 395 CSL Oasis 352121 F39mjeuzttr Central 11quot pr I aiI39I l lIl39lnng l39 PowerPoint Viewer lullEl l I ails IFDEIEIEEI39 t Display sink at rnadiscun lf39lg IJCEI39ails FiannaEl Tquot Weiser Commans 3522303 i Display 5in at tan 39H39igl l Hatail gun ggl it F39mie cr Central Hiew Tnuls ii 1 l El Georgia A Tech L Q GUI Builders 0 A special class of tool for creating GUI systems D Draganddrop widgets from a palette w Emit code that you then editzfill in the blanks 0 Pros 0 Facilitate reasonably good transition to the nal product w What you get looks exactly like what the finished product will look like 0 Cons G Still have to know a lot about programming D AND have to know about programming peculiarities in the GUI builder itself can be very opaque Georgia Tech Example BX Pro wann HIESImhudIIm ll gm mew 5mm Qp ons Eamon mam Maybe we xme aegis Celtrig IIIIL deanprion Ifrom tile H 39mpvnxpm m izlxmssnryfwmfmmhh MNquot j I i39 mm m ncsmmsjmh chum mm X Toolkit Warning Cmnat roman string 11TA 0NTOP In type In I 4 J E DEIDREVIE l a E wueunmma a m tm u E tnnade umn 13 Enu m cnu pastime L nLALn wr ii39 r 3mm Winnrim 7 39 7 ggl i Ea Imam J mnusu j Wnu m CI in 0 Drag and drop graphical widgets onto a screen canvas 0 Set properties of widgets 0 Fill in C code for behavior i Georgia Tech l Codebased Prototypes O This is what we ll be focusing on after this week 0 Many approaches m Production languages Java C etc D Scripting languages Jython PythonVisual BasicAppleScriptTCL 0 There is often a fuzzy line between code and the use of tools 0 Can often drop down to code to augment behavior 0 Pros 0 Very high fidelity 0 True interactivity 0 Good transition to final system 0 Cons 0 Cost learning curve Georgia Tech l Evaluating HiFi Prototypes 0 Some hi prototypes are hi enough that standard HClstyle analyses work ne 0 But what if you don t have all the necessary behaviors implemented 0 Answer fake it 0 Wizard of Oz technique 0 You are the person behind the curtain 0 Provide simulation of missing implementation details as necessary in Especially important for features that are hard to implement 0 Eg speech or handwriting recognition activity sensing intelligent interfaces etc l Georgia Tech 1 l Example2WoZ I W i I at l 39139 a 63 fl 39 l Wizard behind the curtain Unsuspecting User 0 Wizard watches human input and explicitly controls the computer This Week s Assignment Georgia A Tech L Q 0 Create a lofi paper or web prototype of the UI for the project 0 This prototype will serve as the basis for the interactive Ul we will create in the first module 0 Prototyping as a design tool not an evaluation tool 0 Requirements D Q Should show every screenwindow that is reachable in the UI Identify all graphical elements Identify transitions between elements Should be sufficiently detailed that you could run a user through it by playing computer 0 Submit to TA or me if we don t have one by next Monday Georgia Tech x Requirements for IM GUI 0 Provide list of all online users D Allow selection of one or optionally more users Provide some control to initiate a chat 0 Requested users should receive an invitation window D Allow them to accept or reject the invitation to chat 0 For each chat a user is engaged in one chat window 0 Text area that shows chat transcript of all parties in Area to enter your text 6 Provide some control for disconnection 0 Other members of chat should receive noti cation upon disconnect of another chat member Requirements for Social Networking Tool GUI 2 Georgia Tech L Provide list of all onine usersgrouped into friends and others 0 Support the following operations on users start chat send a le through draganddropview an info page browse shared les set friend status Chat functionality 9 Users get an invitation window allows them to acceptreject chat or block user 0 One chat window per chat with transcript area text entry area disconnection control 6 Peer chat members get notified upon disconnect of another member File sharing functionality 6 Two ways to share les explicit send and browsing 0 Send via draganddrop to user Peer receives con rmation allowing them to acceptreject or block 0 Accepted les appear in an lnbox window accessible from Ul Controls to manage delete sort les inlnbox 0 Browse another user s shared les with noti cation to that user Social networking functions 5 Visualization of degreesof separation 9 Physical location placement on map Housekeeping functions 0 Set my icon info page shared les directory availability status co 000 000 Georgia coo Tech 0 Practicum 392 Getting set up for development 0 Install Java if you don t already have it 0 Macs comes with OS X 0 Windows Linux httpjavasuncomj25e 50downoadjsp 0 I ll be usingJava 50 you re welcome to use earlier versions at your own risk 0 Either the full Java Software Development Kit JDK orJava Runtime Environment JRE should be suf cient 0 Downloading Jython m httpwwwjythonorg O Jython 2 l or 22al I Should run on any platform that supports Java 2 or later Georgia A Tech L Q Practicum cont d 0 Development environment D I m agnostic about which if any development environment you use Cl JES simple singlewindow environment for Jython 0 httpcowebccgatechedumediaCompplan94 0 Eclipse much more complicated but more real 0 httpwvwvecipseorg 0 JEdit 0 httpwvwvjeditorg used with some success last time 0 Others 0 You re more than welcome to use a simple text editor and command line Jython 0 If you re unsure what to use or new to programming my suggestion is to use JEdit Readings for Next Class Georgia Tech l Low vs High Fidelity Prototyping Debate Jim Rudd Ken Stern Scott Isensee Sketching nterfacesToward a More Human Interface Design James Landay Brad Myers DENIM Finding aTighter Fit Between Tools and Practice forWeb Site Designers James Lin Mark NewmanJason HongJames Landay Please read and be prepared to discuss
Are you sure you want to buy this material for
You're already Subscribed!
Looks like you've already subscribed to StudySoup, you won't need to purchase another subscription to get this material. To access this material simply click 'View Full Document'