USERINTERFACE DESIGN & SIMULATION. Fjodor van Slooten

USERINTERFACE DESIGN & SIMULATION Fjodor van Slooten

TODAY USERINTERFACE DESIGN & SIMULATION

-Introduction -Interaction design -Prototyping Userinterfaces with Axure -Practice Workshop

module8.io.utwente.nl/uidessim 12/05/2015

MOD8 Virtual Product Development - USERINTERFACE DESIGN & SIMULATION

2

SCHEDULE

>

1

Date May 6th

Subjects 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

12/05/2015


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 12/05/2015


4

Design a userinterface prototype • Sketch • Setup layout • Flowchart, paper prototype

5/12/2015


Even if it is ‘just a prototype’, you’ll have to design it too!

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.” * Welke deur is afgesloten? • ‘Schets’ van de structuur van de interface • Bevat aannames hoe een gebruiker het zal begrijpen * Johnson and Henderson, 2002, p. 26 12/05/2015


6

Conceptual model • Doe onderzoek naar gangbare mentale modellen en gebruik dat bij het ontwerpen

“Waarom doet u dat?”

“Ik dacht dat dan..”

• Verifieer of het conceptuele model wordt begrepen!

Ontwerper 12/05/2015


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

12/05/2015


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

12/05/2015


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

12/05/2015


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

d.m.v vormgeving de bedieningsmogelijkheden van een product in overeenstemming brengen met de (gewenste) functionaliteit

• Objecten voor manipulatie moeten permanent zichtbaar zijn • Un-do: belangrijk dat de manipulatie direct weer ongedaan kan worden gemaakt

12/05/2015


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

12/05/2015


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 12/05/2015


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

12/05/2015


15

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

12/05/2015


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)

12/05/2015


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)

12/05/2015


19

Prototypes

User-testing

Low-fidelity prototypes • Storyboard • Flow-chart • Paper prototype

Oriëntatie • Analyse gewenste functionaliteit • Oriëntatie gebruiksmogelijkheden

Mid-fidelity prototypes • (lineaire) demo

Verdieping • (Eenvoudige) gebruikstests mogelijk • Nadruk op conceptueel ontwerp

High-fidelity prototypes • Interactieve simulatie • Mock-up • Hardware prototype

Uitwerking • Gedetailleerde gebruikstest • Onderbouwing ontwerpvoorstel • Overtuigen belanghebbenden • Voorserie t.b.v. marktintroductie

12/05/2015


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

12/05/2015


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)

12/05/2015


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

12/05/2015


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 12/05/2015

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

12/05/2015


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

12/05/2015


26

12/05/2015


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”

12/05/2015


28

Dynamic panels Hide, Show, Swap, & Move Content module8.io.utwente.nl/uidessim

axure.com/c/forum/tips-tricks-examples • 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 * 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 Start changing • basic_stopwatch.rp state, repeat every second • clock.rp

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 12/05/2015


32

WORKSHOP #2 “Practice building an interactive prototype with Axure” Use the tutorial to gain experience with Axure

module8.io.utwente.nl/uidessim 12/05/2015


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

12/05/2015


34

QUESTIONS?

12/05/2015


35

USERINTERFACE DESIGN & SIMULATION. Fjodor van Slooten

Recommend Documents