Today Finishing coding activity Sketching and Toolkits February 9, 2017 Sketching Toolkits Winter 2017 COMP 4020 2 Announcements Questions? A1/MSI marks are available on UM Learn Feedback is in an attached word file Marking inquiries: Volodymyr (TA): dziubak@cs.umanitoba.ca Winter 2017 COMP 4020 3 Winter 2017 COMP 4020 4 1
Coding Activity Get together with project groups to review results of individual coding Similarities? Differences? Why sketching? Sketching attributes Sketching 10 plus 10 idea generation and refinement Winter 2017 COMP 4020 5 Winter 2017 COMP 4020 6 Why Sketch? Sketching is about design Why Sketch? Create early ideation forces you to visualize how things come together brainstorming: generate abundant ideas without worrying about quality invent and explore concepts Record ideas you develop ideas that you come across archive ideas for later reflection Reflect, share, critique, decide communicate ideas to others invite responses, criticisms, and alternatives; choose ideas worth pursuing Winter 2017 COMP 4020 7 Winter 2017 COMP 4020 8 2
Exploring an idea Getting the Design Right Exploring an idea Getting the Design Right Generate an idea Iterate and develop it Generate an idea Iterate and develop it Winter 2017 COMP 4020 9 But is it the best idea? Winter 2017 COMP 4020 10 Exploring an idea Getting the Design Right Exploring alternatives Getting the Right Design The Problem fixates on first idea local hill climbing issue did you reach local vs. global maxima? a designer that pitched three ideas would probably be fired. I'd say 5 is an entry point for an early formal review (distilled from 100's) if you are pushing one you will be found out, and also fired it is about open mindedness, humility, discovery, and learning. If you aren't authentically dedicated to that approach you are just doing it wrong! Alistair Hamilton VP Design Symbol Technologies Winter 2017 COMP 4020 11 Winter 2017 COMP 4020 12 3
Exploring alternatives Getting the Right Design Elaboration and Reduction Elaborate - generate solutions Reduce - decide on the ones worth pursuing generate many ideas and variations reflect on all ideas choose the ones that look most promising develop them in parallel add new ideas as they come up then iterate your final choice Elaboration opportunity seeking Design process Reduction decision-making Winter 2017 COMP 4020 13 Laseau,P. (1980) Graphic Thinking for Architects & Designers. John Wiley and Sons Winter 2017 COMP 4020 14 The attributes of sketches The attributes of sketches Quick to make Quick Timely provided when needed Winter 2017 COMP 4020 15 Winter 2017 COMP 4020 16 4
Quick Timely The attributes of sketches Quick Timely The attributes of sketches Disposable investment in the process and concept, not the execution if you can t afford to throw it away, it s not a sketch Disposable Plentiful they make sense in a collection or series of ideas meaning & relevance in context Form studies for a digital alarm clock Winter 2017 COMP 4020 17 Image source: Baskinger, M. (2008) Pencils before Pixels. ACM Interactions, March+April, page 32. Winter 2017 COMP 4020 18 Quick Timely Disposable Plentiful The attributes of sketches Clear vocabulary rendering & style indicates it s a sketch, not an implementation Constrained resolution no higher than required to capture its concept Consistency with state refinement of rendering matches the state of concept development Appropriate Degree of Refinement Make the sketch be as refined as the idea: If you have a solid idea, make the sketch look more defined If you have a hazy idea, the sketch will look much rougher and less defined Winter 2017 COMP 4020 19 Winter 2017 COMP 4020 20 5
The attributes of sketches A Sketch is not a Prototype Quick Timely Disposable Plentiful Clear vocabulary Constrained resolution Consistency with state Suggest & explore rather than confirm suggests /provokes what could be A catalyst evokes conversations & discussion Difference is a contrast of purpose (always) a contrast in form (usually, but not always) But it s a continuum sketch prototype Winter 2017 COMP 4020 21 Winter 2017 COMP 4020 22 From Sketches to Prototypes Sketches: early ideation stages of design Prototypes: capturing /detailing the actual design 10 Plus 10 Design Challenge: How can two people connect their mobile devices for information exchange (e.g., photo transfer)? Generate 10 very different ideas. Focus on: The handshake that you and the person perform to indicate that you wish to exchange information Image from Bill Buxton s Book Sketching User Experiences (2007) Morgan Kaufmann Winter 2017 COMP 4020 23 Winter 2017 COMP 4020 24 6
Generate 10 Different Ideas 1. 2 Generate 10 Different Ideas 5 6 3 4 7 8 Winter 2017 COMP 4020 25 Winter 2017 COMP 4020 26 9 Generate 10 Different Ideas 10 Drilling Down Phase After coming up with 10 designs, take the most promising and generate 10 more designs Lets take the last option and explore it further Winter 2017 COMP 4020 27 Winter 2017 COMP 4020 28 7
Drilling down Drilling Down b c a d e Winter 2017 COMP 4020 29 Winter 2017 COMP 4020 30 Interface toolkits What are they? Why are they important? Examples A Brief History Lesson In 1968 Douglas Engelbart presented the Mother of all demos Demo included Productivity applications Hypertext Remote computersupported collaborative work (aka groupware) Winter 2017 COMP 4020 31 Winter 2017 COMP 4020 32 8
After the 1968 Demo Engelbart s visions for productivity tools, hypertext were quickly realized Prototyping Graphical User Interfaces What support is out there to help prototype traditionally GUIs? Not the same for groupware Why not? Winter 2017 COMP 4020 33 Winter 2017 COMP 4020 34 Many GUI Builders Exist Some Tools for Prototyping Webpages Winter 2017 COMP 4020 35 Winter 2017 COMP 4020 36 9
What do Prototyping Tools Provide? Many low-levels details are abstracted away For example, there is no need to program: Appearance/behaviour of basic widgets Layout constraints Event loop What do Prototyping Tools Provide? Implications Less time to prototype More ideas/variants can be explored and tested Lower barrier to entry A wider range of individuals can prototype Winter 2017 COMP 4020 37 Winter 2017 COMP 4020 38 Moving Beyond Traditional GUIs Consider newer technologies and applications. E.g. groupware, vision-based interfaces, physical interfaces To test out ideas and variants, one needs to address issues such as: Sockets, compression, signal processing, concurrency control, etc. Moving Beyond Traditional GUIs Without prototyping tools: Creative efforts go into solving technical constraints Need for technical background increases dramatically Winter 2017 COMP 4020 39 Winter 2017 COMP 4020 40 10
Toolkits Case Study: Groupware Goal: Support prototyping of novel interactions/interfaces General solution: Provide higher-level libraries that abstract away low-level details Image from Carl Gutwin s PhD thesis Winter 2017 COMP 4020 41 Winter 2017 COMP 4020 42 Case Study: Groupware Groupware applications involve: Sockets Concurrency control Awareness support Data compression What Happened to Groupware? From Carl Gutwin s PhD thesis Image adapted from Gaines B (1999) Modeling and forecasting the information science Winter 2017 COMP 4020 43 Winter 2017 COMP 4020 44 11
Toolkit Properties Ideally a toolkit should: Be embedded in commonly used language/platform Remove low-level implementation burdens Minimize details / housekeeping Encapsulate successful design concepts Provide concise API Make simple things achievable with only few lines of code Make complex things possible Groupkit Phidgets Proximity Toolkit AR Toolkit Others??? Example Toolkits Winter 2017 COMP 4020 45 Winter 2017 COMP 4020 46 Now you Learning Outcomes can explain the role of sketch in design can explain the different attributes of a sketch can explain the differences between a sketch and a prototype know how to apply the 10 plus 10 method can explain the importance of toolkits to advancing interactive technology are aware of 5 toolkits and can describe (at a high-level) what they offer Winter 2017 COMP 4020 47 12