Workshop Designing Useful apps

Download Workshop Designing Useful apps

Post on 13-Apr-2017

203 views

Category:

Education

0 download

Embed Size (px)

TRANSCRIPT

<ul><li><p>Designing &amp; prototyping useful apps-I</p><p>Joris Klerkx - Robin De Croon </p><p>http://hci.cs.kuleuven.be joris.klerkx@cs.kuleuven.be</p><p>1</p><p>Human-Computer InteractionDept. Computerwetenschappen</p><p>KU Leuven</p><p>http://hci.cs.kuleuven.bemailto:joris.klerkx@cs.kuleuven.be</p></li><li><p>Our research Toaugmentthehumanintellect(Engelbart,1962)</p><p>2</p></li><li><p>Human-Computer Interaction</p><p>a discipline concerned with the </p><p> design </p><p> evaluation and </p><p> implementation </p><p>of interactive computing systems for human use and with the study of major phenomena surrounding them."</p><p>ACM</p></li><li><p>Today</p><p>Some key aspects of Human-Computer Interaction Designing &amp; Building a useful app: steps Brainstorming &amp; prototyping your own app</p></li><li><p>http://www.web42.com/badday/ </p><p>http://www.web42.com/badday/</p></li><li><p>http://www.interaction-design.org/encyclopedia/usability_evaluation.html</p><p>http://www.interaction-design.org/encyclopedia/usability_evaluation.html</p></li><li><p>Removing friction between users and machines</p></li><li><p>Not so easy</p><p>http://erikduval.wordpress.com/2008/09/10/laptop-fun/http://www.popsci.com/gadgets/article/2013-07/one-laptop-childs-de-evolution</p><p>http://erikduval.wordpress.com/2008/09/10/laptop-fun/http://www.popsci.com/gadgets/article/2013-07/one-laptop-childs-de-evolution</p></li><li><p>But important</p></li><li><p>Also important</p></li><li><p>organisational &amp; social</p><p>CHI</p><p>TASK</p><p>USERTECHNOLOGY</p></li><li><p>Microsoft word</p><p>Evernote</p><p>TASK</p></li><li><p>Autocad</p><p>TASK</p><p>Paint</p></li><li><p>TECHNOLOGY</p></li><li><p>USER</p></li><li><p>USER</p></li><li><p>Usability</p><p>The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments This does not mean you have to create a dry design or something that is only good for novices it all depends on your goals</p></li><li><p>19</p></li><li><p>Building a user interface</p><p>Building a useful app</p><p>=</p></li><li><p>Building a user interface</p><p>Building a useful app</p></li><li><p>http://www.nngroup.com/articles/definition-user-experience/</p></li><li><p>We can fix the interface at the end=&gt; good design is more than just user interface=&gt; having right features, building those features right</p><p>Myth</p></li><li><p>Traditional Design Process</p><p>Image from http://uxdesign.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/</p><p>http://uxdesign.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/</p></li><li><p>You are not the user! </p><p>(if you are the designer)</p></li><li><p>USER-CENTERED DESIGN Image from http://connectedsocialmedia.com/10134/inside-it-user-centered-it/</p><p>http://connectedsocialmedia.com/10134/inside-it-user-centered-it/</p></li><li><p>Know your users Study workflow &amp; habits </p></li><li><p>(image from http://paznow.s3.amazonaws.com/User-Centred-Design.pdf)</p><p>http://paznow.s3.amazonaws.com/User-Centred-Design.pdf</p></li><li><p>Logical analysis is not a good way to predict people's behavior (nor are focus groups or </p><p>surveys): observation is the key</p><p>(Donald A. Norman, 1998)</p></li><li><p>Users cannot tell you what they need (Steve Jobs)</p><p>Study behaviour not opinions</p><p>Dont ask for opinions</p></li><li><p>THE USER IS ALWAYS RIGHT</p><p>If the user does something wrong, it is the fault of the system designer!</p></li><li><p>USER-CENTERED DESIGN Know your users! </p><p>Understand the users mental model</p></li><li><p>Mental Models</p><p>Internal constructions of some aspect of the external world that are manipulated, enabling predictions and inferences to be made (Craik, 1943)</p><p>Both conscious &amp; unconscious</p></li><li><p>A mental model represents what a person thinks is true but isnt necessarily true</p><p>BeliefTruth</p><p>Know</p><p>ledg</p><p>e</p></li><li><p>Wouter Walgrave - http://www.slideshare.net/wouterwalgraeve/mental-models-as-information-radiators </p><p>http://www.slideshare.net/wouterwalgraeve/mental-models-as-information-radiators</p></li><li><p>Important!</p></li><li><p>Very important!</p><p>image from: http://www.wsj.com/articles/SB10001424127887324767004578485061565368992</p></li><li><p>Users &amp; Designers have very different mental models</p></li><li><p>Shopping Cart Expectations</p></li><li><p>Users spend most of their time on websites other than yours </p><p>(Jakobs Law of Web User Experience)</p></li><li><p>http</p><p>://de</p><p>sign</p><p>ingi</p><p>nter</p><p>face</p><p>s.co</p><p>m/p</p><p>atte</p><p>rns/</p></li><li><p>Groupthink or the bandwagon bias</p></li><li><p>Design Process</p></li><li><p>User-centered Design - Rapid Prototyping </p></li><li><p>0%</p><p>0%</p><p>100%</p><p>100%</p><p>OLD</p><p>UX</p></li><li><p>Paper prototypes </p><p>Digital prototypes</p><p>Usable Products</p><p>Fidelity </p><p>http://www.wired.com/design/2013/09/appseed-transforms-your-sketches-into-app-prototypes/?mbid=social12565664</p><p>time</p><p>http://www.wired.com/design/2013/09/appseed-transforms-your-sketches-into-app-prototypes/?mbid=social12565664</p></li><li><p>Prototyping</p></li><li><p>Involve users</p><p>(image from http://paznow.s3.amazonaws.com/User-Centred-Design.pdf)</p><p>http://paznow.s3.amazonaws.com/User-Centred-Design.pdf</p></li><li><p>Where do you start?</p></li><li><p>Step 1: Define purpose</p><p>Define goals of your app Your vision for it. The intended tasks to use it for. </p></li><li><p>Remember!</p><p>Antoine de Saint-Exupry: </p><p> Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.</p></li><li><p>Develop personas</p><p>Fictive users based on real data &amp; facts</p><p>Step 2: User research</p></li><li><p>https://benmelbourne.files.wordpress.com/2011/05/persona-example-2.png</p><p>https://benmelbourne.files.wordpress.com/2011/05/persona-example-2.pnghttp://www.apple.com/nl</p></li><li><p>http://www.usability.gov/how-to-and-tools/methods/personas.html</p><p>Methods</p><p>http://www.usability.gov/how-to-and-tools/methods/personas.html</p></li><li><p>http</p><p>://w</p><p>ww.</p><p>usab</p><p>ility.g</p><p>ov/h</p><p>ow-to</p><p>-and</p><p>-tool</p><p>s/m</p><p>etho</p><p>ds/p</p><p>erso</p><p>nas.</p><p>htm</p><p>l</p><p>http://www.usability.gov/how-to-and-tools/methods/personas.html</p></li><li><p>http://user.com/assets/files/downloads/sample-persona-from-interaction-design-inc.pdf</p><p>http://user.com/assets/files/downloads/sample-persona-from-interaction-design-inc.pdf</p></li><li><p>Persona development</p><p>http://www.usability.gov/how-to-and-tools/methods/personas.html</p><p>Condensed user research</p><p>http://www.usability.gov/how-to-and-tools/methods/personas.html</p></li><li><p>Effective personas Representative of a big user group </p><p> Show user needs and expectations </p><p> Show how an app will be used </p><p> Make universal features and functionalities apparent </p><p> Describe real people with background, goals and values </p><p> Rule of thumb: max. 3 4 personas per project </p><p>http://www.usability.gov/how-to-and-tools/methods/personas.html</p><p>http://www.usability.gov/how-to-and-tools/methods/personas.html</p></li><li><p>https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/personas</p><p>https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/personas</p></li><li><p>http://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-1/</p><p>Step 3: storyboarding</p></li><li><p>http://hci.stanford.edu/courses/cs147/2009/assignm</p><p>ents/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdfhttp://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p></li><li><p>http://hci.stanford.edu/courses/cs147/2009/assignm</p><p>ents/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdfhttp://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p></li><li><p>http://hci.stanford.edu/courses/cs147/2009/assignm</p><p>ents/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdfhttp://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p></li><li><p>http://hci.stanford.edu/courses/cs147/2009/assignm</p><p>ents/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdfhttp://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p></li><li><p>http://hci.stanford.edu/courses/cs147/2009/assignm</p><p>ents/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdfhttp://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p></li><li><p>http://hci.stanford.edu/courses/cs147/2009/assignm</p><p>ents/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdfhttp://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p></li><li><p>http://hci.stanford.edu/courses/cs147/2009/assignm</p><p>ents/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdfhttp://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p></li><li><p>http://hci.stanford.edu/courses/cs147/2009/assignm</p><p>ents/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdfhttp://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p></li><li><p>http://hci.stanford.edu/courses/cs147/2009/assignm</p><p>ents/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p></li><li><p>http://hci.stanford.edu/courses/cs147/2009/assignm</p><p>ents/storyboard_notes.pdf</p><p>http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf</p></li><li><p>http://dl.acm</p><p>.org/citation.cfm?id=163268</p><p>http://dl.acm.org/citation.cfm?id=163268</p><p>http://dl.acm.org/citation.cfm?id=163268http://dl.acm.org/citation.cfm?id=163268</p></li><li><p>1) Form teams2) Define purpose of your app 3) Develop persona(s) 4) Develop storyboard </p></li><li><p>Step 4: (Paper) Prototyping</p></li><li><p>Paper prototype</p><p>http://ww</p><p>w.paperprototyping.com</p><p>/ </p><p>http://www.paperprototyping.com/</p></li><li><p>Sketcheshttp://w</p><p>ww</p><p>.cs.berkeley.edu/~landay/research/publications/SILK</p><p>_CH</p><p>I/jal1bdy.html</p><p>70 secs.</p><p>329 secs.</p><p>http://www.cs.berkeley.edu/~landay/research/publications/SILK_CHI/jal1bdy.html</p></li><li><p>https://medium.com/accurat-studio/sketching-with-data-opens-the-mind-s-eye-92d78554565</p><p>86</p><p>https://medium.com/accurat-studio/sketching-with-data-opens-the-mind-s-eye-92d78554565</p></li><li><p>Sketcheshttp://w</p><p>ww</p><p>.cognetics.com/ui.htm</p><p>l</p><p>http://www.cognetics.com/ui.html</p></li><li><p>Transition Diagram</p><p>http://www.cc.gatech.edu/people/home/dzook/JavaVis.htm</p><p>http://www.cc.gatech.edu/people/home/dzook/JavaVis.htm</p></li><li><p>Paper prototyping http://ww</p><p>w.nngroup.com</p><p>/reports/prototyping/video_stills.html </p><p>http://www.nngroup.com/reports/prototyping/video_stills.html</p></li><li><p>4) Develop paper prototype </p></li><li><p>THANKS!</p></li></ul>