USERINTERFACE DESIGN & SIMULATION. Fjodor van Slooten

Transcriptie

1 USERINTERFACE Fjodor van Slooten

2 TODAY USERINTERFACE -Introduction -Interaction design -Prototyping Userinterfaces with Axure -Practice Workshop DESIGN & SIMULATION module8.io.utwente.nl/uidessim 2

3 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

4 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

5 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

6 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

7 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

8 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

9 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

10 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

11 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

12 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

13 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

14 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

15 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

16 Bediensnelheid Afhankelijk van: Toepassing Omgeving Gebruikers Veiligheid Bedenk in hoeverre bediensnelheid relevant is Bediensnelheid kan conflict zijn voor bediengemak 16

17 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

18 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

19 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

20 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

21 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

22 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

23 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

24 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

25 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

26 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

27 DESIGN & SIMULATION 27

28 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

29 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/

30 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/

31 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/

32 MORE INFO Recommended reading and module8.io.utwente.nl/uidessim Read appendix of this presentation: Hoe geef je de gebruiker houvast? Axure/learn DESIGN & SIMULATION 32

33 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

34 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

35 QUESTIONS? DESIGN & SIMULATION 35