USERINTERFACE Fjodor van Slooten
TODAY USERINTERFACE -Introduction -Interaction design -Prototyping Userinterfaces with Axure -Practice Workshop DESIGN & SIMULATION module8.io.utwente.nl/uidessim 2
SCHEDULE Date Subjects 1 May 6th Create a paper prototype of a Userinterface and perform a heuristic evaluation > 2 May 13th Build an interactive prototype with Axure 1 3 June 3th Build an interactive prototype with Axure 2 4 June 17th Integrate the prototype into a website and conduct online usability tests DESIGN & SIMULATION 3
INTERACTION DESIGN Think, plan, design. then build! What should be tested? What must be demonstrated? To whom? What tasks will be performed (with the prototype) Dynamic vs. static test Level of realism Desired interaction & animation Graphic presentation 4
Design a userinterface prototype Sketch Setup layout Flowchart, paper prototype Even if it is just a prototype, you ll have to design it too! 5/12/2015 5
INTERACTION DESIGN Analyse > synthese: van wat? naar hoe? Gewenste functionaliteit goeddeels bekend Beantwoorden hoe het systeem zal zijn voor gebruikers (= design space ) design space vast leggen: conceptual model Conceptual model: a high-level description of how a system is organized and operates. * Schets van de structuur van de interface Bevat aannames hoe een gebruiker het zal begrijpen Welke deur is afgesloten? * Johnson and Henderson, 2002, p. 26 DESIGN & SIMULATION 6
Conceptual model Doe onderzoek naar gangbare mentale modellen en gebruik dat bij het ontwerpen Verifieer of het conceptuele model wordt begrepen! Waarom doet u dat? Ik dacht dat dan.. Ontwerper vs. Gebruiker 7
Conceptual model Digitaal formulier Bouwstenen van een conceptual model: Metaforen & analogieën Relaties tussen de verschillende onderdelen Terugkerende bedieningsmechanismen Conceptueel model dient gemakkelijk te leren te zijn Relaties: voorgaande stappen blijven zichtbaar Terugkerende bedieningsmechanismen: uitklap lijsten en invoervelden: I 12-5-2015 8
Interaction types Instructing (typing/voice commands, function keys) Conversing (ask input, dialog, menu driven choices) Manipulating (interacting with objects/mouse) Exploring (move through a virtual space) A system can use multiple types 9
Instructing typing commands function keys Selecteren opties met muis Snel en efficiënt Gebruiker heeft training vooraf nodig Geschikt voor frequente en terugkerende functies, zoals: opslaan, verwijderen, kopiëren 10
Conversing Dialoog mogelijk tussen systeem en gebruiker Meestal m.b.v. vragen 2-richting verkeer (i.t.t. instruëren) Search engines, help-functies Soms op basis van speech recognition toegankelijk voor onervaren gebruikers Gesuggereerde intelligentie valt vaak tegen DESIGN & SIMULATION 11
Manipulating Interacting with objects/ mouse Objecten bedienen d.m.v. selecteren, bewegen, openen, etc. Bediening m.b.v. fysieke objecten (muis, blokje, pen, hendel) Stimuleert spelenderwijs ontdekken Manipulatie beter te onthouden dan commando s Ondersteund gevoel I am in control Gebruiker heeft kennis/vermoeden nodig Gebruik affordances als hint voor manipulatie Objecten voor manipulatie moeten permanent zichtbaar zijn d.m.v vormgeving de bedieningsmogelijkheden van een product in overeenstemming brengen met de (gewenste) functionaliteit Un-do: belangrijk dat de manipulatie direct weer ongedaan kan worden gemaakt DESIGN & SIMULATION 12
Exploring Bewegen door (virtuele) ruimte Vaak combinatie VR en realiteit (heads-up display/augmented reality) Ondersteund actief onderzoeken/ontdekken Ervaring mogelijk, voorafgaand aan realisatie Interface vaak complex om te realiseren Vaak gebruikt voor training of verkenning DESIGN & SIMULATION 13
Systeem complexiteit Verkrijg in vroeg stadium enig inzicht: Technologie (keuze) Interactie-concept Menu-structuur Gebruiksvriendelijkheid Kosten Voorbeeld: segment display vs. full color touch screen 14
Directe toegang Maak functionaliteit beschikbaar voor gebruikers met uiteenlopende gebruiksmogelijkheden, zonder dat er speciale aanpassingen nodig zijn ( barrière-vrij ) De gebruiker ordent informatie soms heel anders dan de ontwerper meende 15
Bediensnelheid Afhankelijk van: Toepassing Omgeving Gebruikers Veiligheid Bedenk in hoeverre bediensnelheid relevant is Bediensnelheid kan conflict zijn voor bediengemak 16
80/20-rule 80% van de gebruikshandelingen komt voort uit ca. 20% van de aangeboden functionaliteit 80% van de gebreken komt voort uit 20% van de componenten Hooguit 20% van de functionaliteit wordt het meest intensief gebruikt Houdt daar rekening mee in je ontwerp door die functies zo goed mogelijk aan te bieden Direct access to frequently used function (bijv. short-cuts) DESIGN & SIMULATION 17
Conceptueel model & project opdracht Verken bewust verschillende mogelijke conceptuele modellen Verifieer in hoeverre gebruikers de conceptuele modellen goed kunnen begrijpen (bijv. met paper prototypes en heuristische evaluatie) Maak schatting welke fysieke componenten elk concept (ongeveer) nodig heeft (display, bedienelementen, camera, etc.) Geef in projectverslag of essay een (korte) onderbouwing voor het gekozen conceptuele model Tips: Verfijn op basis van de ervaringen het PvE Bespreek binnen het team welk model het meest gewenst is 12-5-2015 18
PROTOTYPEN hulpmiddel tijdens ontwerpen: Communicatiemiddel (team, opdrachtgever, belanghebbenden) Experimenteerplatform (haalbaarheid, functionaliteit) Testplatform (gebruiksvriendelijkheid) Ontwikkelstrategie (voorkomt kosten van aanpassingen in een laat stadium van ontwikkeling) DESIGN & SIMULATION 19
Prototypes User-testing Low-fidelity prototypes Storyboard Flow-chart Paper prototype Mid-fidelity prototypes (lineaire) demo High-fidelity prototypes Interactieve simulatie Mock-up Hardware prototype Oriëntatie Analyse gewenste functionaliteit Oriëntatie gebruiksmogelijkheden Verdieping (Eenvoudige) gebruikstests mogelijk Nadruk op conceptueel ontwerp Uitwerking Gedetailleerde gebruikstest Onderbouwing ontwerpvoorstel Overtuigen belanghebbenden Voorserie t.b.v. marktintroductie 20
Low-fidelity prototypes Storyboard, flowchart, paperprototype Eerste fase ontwerpproces Eenvoudig & goedkoop Proof-of-principle Lokt reacties uit (ziet er nog-niet-af uit) Genereert input voor PvE&W Niet interactief Niet mogelijk om mee verder te werken 21
Mid-fidelity prototypes (lineaire) demo, simulatie idee- en conceptfase Geringe look & feel Nadruk op functionaliteit en gedrag Voldoende details voor gebruikstest Geeft belanghebbenden indruk van complexiteit Niet volledige look & feel (vergt abstractie vermogen beoordelaars) 22
High-fidelity prototypes Realistische simulatie Presentatie en overdracht aan implementatie-team Goede look & feel Nadruk op functionaliteit en gedrag Kan gebruikt worden bij specificatie voor verdere implementatie Geeft belanghebbenden juiste indruk van complexiteit Vergt veel inspanningen om te realiseren Veranderingen mogelijk, maar vergt ook inspanningen 23
Choose tool & platform Tool: Axure Platform: Web (HTML) Why Axure? Popular tool, flexible, short learning curve, can be used for both apps and websites, is free (for students) Other common tools (not supported in this workshop): Powerpoint, Adobe tools like Flash, Muse & Dreamweaver, plain HTML, Balsamiq Mockups, Mockingbird, InVision, Justinmind, Solidify, SketchFlow Other platforms: Bound to tool, Application (eg. Windowsbased) 24
AXURE INTRO axure.com Use Axure RP to create: interactive prototypes, mockups, wireframes, flowcharts, web designs Share prototypes via your own website, or on Axure Share Permanent license available on BlackBoard: Project Virtual Product Development > Toolbox > User interface design and simulation 25
Learn Axure Easy to learn: Tutorials on axure.com/learn Tutorial in dutch with this workshop Tip: watch the intro video before you start axure.com/learn 26
DESIGN & SIMULATION 27
Design mobile web apps Tutorials: Mobile web app tutorial iphone app template & tutorial Swiping Responsive design with Adaptive views Creating Responsive Prototypes With Adaptive Views In Axure 28
Dynamic panels Hide, Show, Swap, & Move Content You can not group basic elements and animate them as a group* or define interaction on a group Solution: put the elements in a dynamic panel Add one (or more) states, put elements you want to join in a state module8.io.utwente.nl/uidessim axure.com/c/forum/tips-tricks-examples * You can define animations & interactions on individual elements axure.com/learn/dynamic-panels 5/12/2015 29
Swipe navigation A dynamic panel has swipe and drag & drop events Put a page in a dynamic panel to have swipe navigation between pages Example: use OnSwipeLeft to go to a page left of the current page swipe_nav.rp 5/12/2015 30
Use a Timer or stopwatch Have a dynamic panel change it s state timer.rp basic_stopwatch.rp clock.rp Start changing state, repeat every second 5/12/2015 31
MORE INFO Recommended reading and slides @ module8.io.utwente.nl/uidessim Read appendix of this presentation: Hoe geef je de gebruiker houvast? Axure/learn DESIGN & SIMULATION 32
WORKSHOP #2 Practice building an interactive prototype with Axure Use the tutorial to gain experience with Axure DESIGN & SIMULATION module8.io.utwente.nl/uidessim 33
DO [THIS WEEK] Plan your steps and decide which tool to use [plan-van-aanpak] What should be tested? What must be demonstrated? To whom? What tasks will be performed (with the prototype) Dynamic vs. static test Level of realism Desired interaction & animation Graphic presentation Next session: Use Axure to realize interactive prototype for project DESIGN & SIMULATION 34
QUESTIONS? DESIGN & SIMULATION 35