Tutorial Axure voor Ontwerpen van Interactieve Producten

Transcriptie

1 Deze handleiding is gebaseerd op Axure RP Pro 7.0. Een probeer-versie van Axure die 30 dagen werkt kan je downloaden via axure.com/download. Een permanente licentie is te verkrijgen via de docent. Axure is een hulpmiddel voor het maken van prototypes van oa. applicaties en websites. Je kan via de website axure.com/learn snel leren hoe het pakket werkt. Wij hebben als voorbeeld een Nederlandstalige tutorial gemaakt waarin we een eenvoudig prototype maken van een pinautomaat. De pinautomaat zou er bijv. uit kunnen zien als onderstaande afbeelding. Je kan het resultaat, de interactieve demo, hier bekijken en uitproberen. De focus van deze tutorial is het realiseren van de interactie, en niet op vormgeving of ergonomie. Voor het volgen van deze tutorial is geen kennis van Axure vereist. Deze tutorial behandeld echter niet alle mogelijkheden. Via axure.com/learn kan je meer leren als dat nodig is. 1

2 De handleiding bestaat uit tien stappen: 1. Maak het hoofd-display met een welkomsttekst Maak pas en sleuf en realiseer invoer van de pas in de sleuf Invoer PIN code Controle pincode Keuze bedrag Uitvoer van geld Stoppen na uitgifte geld en afbreken mogelijk maken Verkeerde interacties voorkomen Vormgeving interface Exporteren naar HTML Start Bij starten van Axure of bij het maken van een nieuw document worden drie pagina's gemaakt die je in de Sitemap aan de linkerkant ziet: Voor dit prototype gebruiken we maar 1 pagina, dus je mag Page 2 en 3 verwijderen door ze te selecteren en op Delete te drukken. Als je hulplijnen handig vindt bij het tekenen van vormen, kan je dit aanzetten via Arrange > Grid and Guides > Show Grid. Daar vindt je ook instellingen voor het grid. Via Create Guides kan je daar kolommen instellen die je helpen met de layout, bijv. een layout van 960 pixels breed met 12 kolommen. 2

3 Stap 1. Maak het hoofd-display: een Button Shape met een welkomsttekst en de naam "Maintext". We tekenen eerst de Button Shape: klik (met de linker muisknop) in de lijst met Widgets op Button Shape, houd de muisknop ingedrukt en sleep de Button Shape naar het tekengebied. Plaats de Button Shape bovenaan, zodat je genoeg ruimte er onder overhoudt voor het cijfer-panel etc. Door te trekken aan de puntjes kan je de grootte instellen, zie hier onder. Geef 'm ongeveer dezelfde afmetingen als onderstaande voorbeeld: in het grijze vlakje ernaast zie je de positie (x en y) en de afmetingen (w en h). Dubbelklik op de tekst "ACTION" om deze te wijzigen in "Welkom bij IO Bank, voer uw pas in aub.". De achtergrondkleur van de Button Shape maken we lichtblauw via het Fill Color icon in de werkbalk: 3

4 Via de instellingen voor het lettertype boven aan in de werkbalk kan je deze wijzigen: We gebruiken hier een Bold 18 punts Arial font. Eea. ziet er nu zo uit: Als laatste stellen we de naam van dit widget in op "Maintext". Zorg dat het widget is geselecteerd. Type de naam in het veld bij "Widget interactions and notes" aan de rechterkant. Sla je werk op door op Save regelmatig te doen. te klikken. Het is verstandig dit 4

5 Stap 2. Maak de pas en de sleuf voor de pas en realiseer invoer van de pas in de sleuf. We tekenen de pas en de sleuf, dit zijn beide Button Shape's. Plaats de pas helemaal aan de linker kant. Stel de breedte in op 70, pas de achtergrondkleur aan (Fill Color) en verander de tekst in "Pas". Plaats de sleuf rechts onder het hoofd-display, maak deze 20 pixels breder dan de pas, dus 90. Geef de widgets de naam "Pas" en "Sleuf". We gaan nu de interactie van de pas met de sleuf programmeren. Selecteer de pas. Dubbelklik bij "Widget interactions and notes" op "OnClick": De Case Editor verschijnt. Hier kunnen we beschrijven wat er moet gebeuren als er op het widget geklikt wordt. We noemen deze case "Pasinvoer". We gaan de pas verplaatsen, dus kiezen we "Move", "This Widget" en "To": 5

6 Om te zorgen dat de pas naar de sleuf beweegt, moeten we in plaats van (0,0) zorgen dat daar de positie van de sleuf komt. Klik daarvoor op "fx" achter de x-positie rechts onderin het scherm: Fx betekent dat we een functie gaan gebruiken voor het bepalen van die positie. We moeten om de positie van de sleuf te kunnen gebruiken, deze toevoegen als een lokale variabele. Klik op Add Local Variable, geef deze de naam "Sleuf", kies acher het = teken voor "Widget" en kies daar weer achter het widget "Sleuf". (we gaan ervan uit dat je de sleuf de naam "Sleuf" gegeven hebt!) Lokale variabelen zijn variabelen die alleen binnen een widget of interactie beschikbaar zijn. Globale variabelen zijn in de hele pagina of applicatie beschikbaar. Nadat je dit gedaan hebt kan je in het gedeelte erboven de positie opvragen. Als er al iets staat in het bovenste gedeelte, verwijder dat dan. Klik daar op Insert Variable or Function en kies de Local Variable "Sleuf": 6

7 Hierna staat er in het tekst veld: Maak hiervan: Hiermee wordt de waarde gelijk aan de waarde van de x-positie van de Sleuf plus 10 (pixels). De pas komt dan in het midden van de sleuf ((90-70)/2). Druk op Ok om de waarde op te slaan. Herhaal deze procedure voor de y-positie: Als je dit ook voor de y-positie hebt ingesteld kan je de Case Editor afsluiten met Ok. Als het goed is ziet de geprogrammeerde Widget interactie van de Pas er zo uit: We gaan dit nu testen. Druk op het Preview icon bovenaan in de werkbalk: Als het goed is wordt nu de pagina in een webbrowser getoond. Als je nu de Pas klikt, zal deze naar de sleuf toe bewegen: op 7

8 Er zijn nog een paar details die eea. mooier maken: De pas moet boven de sleuf komen, zodat het lijkt of deze er in zit. Dit doen we door deze naar de voorgrond te brengen. Klik de Pas aan met de rechter muisknop en kies Order, Bring to Front: De pas moet met een mooie animatie naar de sleuf toe bewegen. Dubbelklik op Move This to... bij de Interactions: En pas de animatie aan naar swing: Eindig met Ok. Sla het document op. Test eea. opnieuw in de browser (je hoeft dan niet weer op het Preview icon te klikken: na een Save kan je ook de browser verversen om de nieuwe versie te zien). 8

9 Tenslotte voegen we een tweede animatie toe die de pas in de gleuf laat verdwijnen. Zorg dat de pas geselecteerd is, dubbelklik bij Interactions op Pasinvoer om de Case Editor te starten. Kies voor Hide, This Widget en een Slide-up animatie van 1000ms (1 sec, dan is de animatie goed zichtbaar): En pas de tekst in het hoofd-display (Maintext) aan met de tekst: "Voer uw PIN code in aub. en druk op OK." Sluit de Case Editor met Ok en test de pagina in de browser. 9

10 Stap 3. Invoer PIN code. De pincode zal worden ingevoerd met cijfertoetsen die worden aangeklikt. Zie de knop hiernaast. Voeg eerst 1 toets van de cijfer toetsen toe. We maken deze helemaal af, en kopiëren hem daarna. Gebruik ook hiervoor de Button Shape. Stel de vormgeving in zoals jij vindt dat een cijfertoets er uit moet zien en maak van de tekst een "1". Geef de knop de naam "BtnPin". Omdat een knop een interactief element is, kan je bij de Interaction Styles bijvoorbeeld aangeven dat de knop moet oplichten als erop gedrukt wordt. De Interaction Style stel je in door de knop met de rechtermuisknop aan te klikken en Interaction Styles te kiezen. Hiernaast zie je hoe bij een MouseDown de Fill Color is ingesteld. Daarmee zal de knop lichtblauw worden als de muisknop wordt ingedrukt. We gaan nu een globale variabele toevoegen waarin de waarde van de ingevoerde pincode terecht komt. Een globale variabele is een variabele die overal in de hele pagina, in alle widgets en interacties, beschikbaar is. Selecteer de cijferknop (BtnPin). Dubbelklik onder Widget Interactions and Notes op OnClick om een Interactie te definiëren voor de BtnPin: Voeg in de Case Editor een regel toe om een variabele een waarde te geven ("Set Variable Value") en noem de Case "Opslag pincode" (zie volgende pagina). 10

11 Klik rechts boven op "Add variable" en voeg vervolgens de variabele toe via het groene plusje. Noem de variabele pincode_invoer en druk op Ok. Selecteer daarna de variabele om hem een waarde te kunnen gaan geven: We gaan nu een trucje doen om de waarde van de variabele pincode_invoer te vermeerderen met de waarde van de knop. De waarde van de knop staat op de knop, en is hetzelfde als de tekst op het widget. We doen dat op deze manier omdat we dan straks alleen maar de knoppen hoeven te kopiëren en de tekst op de knoppen hoeven aan te passen. We hoeven dan niet per knop de hele interactie opnieuw te programmeren. Druk in de Case Editor op fx: Druk op Add Local Variable en laat deze variabele definitie zoals deze is: 11

12 Hiermee krijgt de lokale variabele LVAR1 de waarde van de tekst op het widget (in dit geval "1"). Druk dan op Insert Variable or Function... en kies eerst de variabele pincode_invoer. Druk dan nogmaals op Insert Variable or Function... kies dan LVAR1: In het tekstveld er onder staat nu: Druk op Ok. Testen. Het kan ook handig zijn om te kunnen zien wat de ingevoerde waarde van bijvoorbeeld de pincode is. Voeg daarvoor een Label toe. Plaats het helemaal aan de linkerkant, bijvoorbeeld onder de pas. Geef het Label als Shape Name "DebugPIN" en stel de tekst in: We voegen nu een tweede actie toe aan de cijferknop (BtnPin) waarmee we de ingevoerde pincode in het label "DebugPIN" weergeven. Dit gebruiken we om te testen: hiermee geven we de ingevoerde pincode weer op het scherm en kunnen daarmee zien of de invoer correct verloopt. 12

13 Via de fx-knop stellen we de waarde in op: Sluit af door twee keer op Ok te klikken en test de pagina in de browser. Als het goed is wordt als je op de 1-knop drukt de getoonde pincode vermeerderd met 1. We kunnen nu de gemaakte knop kopiëren, in de gewenste layout plaatsen en de teksten op de toetsen aanpassen: Test de pagina opnieuw. Wordt de pincode goed weergegeven? Met wat je nu geleerd hebt zou je zelf een correctie-toets toe kunnen voegen, die de ingevoerde pincode wist zodat opnieuw begonnen kan worden. Denk eraan dat hiervoor twee acties nodig zijn: het leegmaken van de variabele pincode_invoer en het (opnieuw) weergeven van de waarde in het label DebugPIN. Er mag geen pincode ingevoerd worden als de pas nog niet is ingevoerd. Daarom kan je de pincode wissen (leeg maken) nadat de pas is ingevoerd. De interactie daarvoor kan je toevoegen aan de pas. 13

14 Stap 4. Controle pincode. We voegen eerst twee knoppen toe onderaan naast het hoofd-display, 1 voor Afbreken/Stoppen en een Ok-knop. Ook voegen we Labels toe die op het scherm worden weergegeven: Noem de linker knop BtnScrn4 en de rechter BtnScrn8 (er komen straks meer knoppen boven). Noem de Labels LblStop en LblOk. Denk ook aan het instellen van de Interaction Style. We zorgen ervoor dat de Labels pas zichtbaar worden als er om een pincode wordt gevraagd. Onder het tekengebied kunnen we Page Interactions instellen. Hier stellen we in dat bij het laden van de pagina de labels verborgen worden. Dubbelklik op OnPageLoad: Noem de Case "Instellen bij laden pagina". Selecteer onder Widgets "Hide" en selecteer beide widgets LblStop en LblOk. Sluit af met Ok. Selecteer nu de pas. Dubbelklik bij Interactions op Pasinvoer en zorg dat de widgets LblStop en LblOk hier weer met "Show" zullen worden weergegeven. Nu kunnen we als op de Ok-knop wordt gedrukt de pincode gaan controleren. Selecteer de Ok-knop (BtnScreen8) en dubbelklik bij Interactions op "OnClick" om de Case Editor te starten. Noem de Case "PinCheck". Druk op de knop Add Condition: In de Condition Builder die dan verschijnt stel je de conditie in zodat gecontroleerd wordt of de waarde van de variabele pincode_invoer gelijk is aan "1234". We gebruiken hier (voor de demo) de waarde "1234" als goede waarde voor de pincode. Druk op Ok om de Condition Builder af te sluiten. De volgende actie die we toevoegen wordt dus alleen uitgevoerd als de conditie waar is (dus als de pincode de goede pincode is). Deze actie is het starten met het kiezen van het te pinnen bedrag. We geven hier alleen de nieuwe tekst weer in het hoofd-display. De rest wordt in de volgende stap uitgelegd. 14

15 De actie die we moeten toevoegen is het weergeven van de tekst "Kies bedrag en druk op Ok.". Dit doen we met een "Set Text" actie: Als de ingevoerde pincode niet juist was, geven we de boodschap "PIN was incorrect. Probeer opnieuw." weer en wordt de variabele pincode_invoer weer leeg gemaakt. Let op: hiervoor voegen we een nieuwe Case toe aan de Ok-knop (Btnscreen8) door met de rechter muisknop op OnClick te klikken: Dit wordt dan automatisch een "else" conditie: Met de conditie "Else If True" zeg je dus dat als de vorige conditie niet waar was, je deze conditie gaat uitvoeren (net als met een if ()... else... statement in Java). In deze case stellen we de Maintext in met de juiste boodschap en maken we de variabele pincode_invoer leeg (dit laatste wordt niet weergegeven hierboven). De totale interactie voor de Ok-knop (BtnScreen8) ziet er dan zo uit: 15

16 Test de pagina voor je verder gaat. 16

17 Stap 5. Keuze bedrag. Voor het mogelijk maken van het kiezen van een vast bedrag voegen we de resterende knoppen en labels toe. Maak voordat je dit doet eerst 1 knop inclusief de interacties, bijvoorbeeld de knop waarmee het bedrag 20 gekozen wordt: Noem deze BtnScreen1 en geef 'm als tekst "20". We gaan deze tekst in een globale variabele stoppen. De tekst wordt later verborgen, want van een pinautomaat zijn de knoppen naast het scherm niet voorzien van tekst. Selecteer de knop BtnScreen1 en dubbelklik bij Interactions op OnClick. Zie afbeelding hier onder. Stel de Case Name in en kies Set Variable Value. Maak via Add variable een nieuwe globale variabele en noem deze "bedrag". Druk op fx, maak een local variable met als waarde 'text on widget' en insert die bij Insert Variable or Function. (Deze procedure is bij stap 3 uitgebreid uitgelegd voor de pincode) Voeg nu aan de actions nog een actie toe die in het hoofd-scherm (Maintext) het gekozen bedrag weergeeft: 17

18 Voeg nu de overige knoppen toe, door deze te kopiëren van BtnScreen1. Geef elke knop als tekst het bijbehorende bedrag. Dus de tweede knop krijgt de tekst "50", de 3e "70", enz. Maak daarna deze tekst onzichtbaar door deze 6 knoppen te selecteren en bij de teksteigenschappen de fontkleur 'geen kleur' te kiezen: Eea. ziet er dan zo uit: 18

19 Geef de twee nieuwe knoppen aan de linkerkant de namen BtnScreen2 en 3, en die aan de rechter kant BtnScreen5 tm. 7. Geef ook alle labels zinvolle namen, bijvoorbeeld het label "20" Lbl20 enz. Zorg ervoor dat alle labels bij de Page Interactions, OnPageLoad verborgen worden. Bij de Ok-knop (BtnScreen8) moeten we nu nog zorgen dat de labels van de bedragen weer zichtbaar worden. Selecteer de knop en dubbelklik op de PinCheck case. Kies Show en selecteer de zes labels Lbl20 tm. Lbl200. Test of het gekozen bedrag wordt weergegeven. 19

20 Stap 6. Uitvoer van geld. Als nu op de Ok knop gedrukt wordt, hebben we een probleem, de interacties die daar aan hangen zijn nog van het invoeren van de pincode. We kunnen onderscheid maken tussen deze twee fasen in het proces door te kijken naar de variabele bedrag. Heeft deze een waarde (groter dan nul), dan zitten we in de fase voor uitvoer van het geld. We gaan daarom na de fase daarvoor (invoer pin) de variabele bedrag op nul zetten. Selecteer de Ok-knop (BtnScreen8) en voeg bij zowel de PinCheck als de PinFout interacties een actie toe die de globale variabele bedrag op nul zet: Nu kunnen we aan deze knop een nieuwe Case toevoegen die als conditie heeft 'als waarde bedrag > 0'. Is dat het geval, dan zijn we in de fase voor het uitvoeren van het geld beland. Klik op OnClick met de rechter muisknop en kies Add Case: Stel de case in zoals hieronder weergegeven. Druk op Add Condition om de conditie in te stellen. Geef in het hoofd-display de melding "Uitgifte geld...". Sluit de Case Editor. De volgorde van de Cases klopt nu niet. Pas deze aan door de nieuwe Case "Uitgifte geld" naar boven te verplaatsen. Dat kan door deze aan te klikken met de rechter muisknop en Move Case Up te kiezen. Klik de Case nu hij bovenaan staat nogmaals aan met de rechter muisknop en kies "Toggle IF/ELSE IF". Hiermee maak je het complete if-statement kloppend. Zie afbeelding hier onder. 20

21 We kunnen nu een animatie maken van een biljet dat uit een sleuf komt. Kopieer de sleuf van de pasinvoer en noem deze SleufUitgifte. Maak 'm iets breder. Plaats nu een nieuwe Button Shape in deze sleuf en zorg dat die op een bankbiljet lijkt: Geef de nieuwe Button Shape de naam "Biljet". Zorg dat het biljet verborgen wordt als de pagina geladen wordt (bij Page Interactions, OnPageLoad). Selecteer de Ok-knop (BtnScreen8) en dubbelklik op de Case "Uitgifte geld". Voeg daar een actie toe die "Biljet" toont (Show) met een Slide down-animatie van 1000ms. Voeg nog een actie toe die de waarde van het gekozen bedrag op het biljet laat zien. Dat kan door een Set Text te doen, met een waarde (via de fx knop) van de globale variabele bedrag. De actie Uitgifte geld komt er dan bijvoorbeeld zo uit te zien: 21

22 Stap 7. Stoppen na uitgifte geld en afbreken mogelijk maken. We laten nadat de animatie van de gelduitgifte klaar is na een korte wachttijd de interface terugkeren naar de uitgangssituatie. Selecteer de Ok-knop (BtnScreen8) en dubbelklik op de Case "Uitgifte geld". Voeg in de Case Editor een actie toe om te wachten, deze staat helemaal onderaan in de lijst met acties onder het kopje "Miscellaneous". Stel de wachttijd in op 5 seconden: dat is 5000 ms. Om terug te gaan naar de uitgangssituatie kunnen we de pagina weer terugbrengen in de oorspronkelijke staat, door een Reload van de pagina te doen. Dat kan door een link te openen in het huidige window. De actie daarvoor kan je vinden onder Links, Open link: Druk op Ok om de Case op te slaan en test of na 5 seconden de interface terug gaat naar de uitgangssituatie. Als je nadat is teruggegaan naar de uitgangssituatie direct op de Ok-knop drukt, zal je zien dat er direct geld uitgegeven wordt... dat is natuurlijk niet de bedoeling. Dit komt omdat de globale variabelen nog hun waarde hebben. We gaan die dus in de begin situatie een waarde geven. Dat kan bij de Page Interactions: 22

23 Dubbelklik daar op "Instellen bij laden pagina" om de Case Editor te openen. Voeg daar de actie "Set Variable Value" toe, kies de variabele bedrag en geef deze de waarde "0" (nul). Stel op dezelfde manier de variabele pincode_invoer in met een lege waarde (niets invullen bij value): Hiermee zou als het goed is een verkeerde uitgangssituatie moeten worden voorkomen. Als je dit test zie je dat het nog mogelijk is om op de Ok-knop te drukken: je krijgt dan de melding dat de pincode incorrect is. We gaan dit probleem in de volgende stap oplossen. Tot nu toe hebben we niets gedaan met de knop Afbreken/Stoppen. Een simpele invulling hiervan is dat wordt teruggegaan naar de uitgangssituatie. Dit hebben we net gedaan als afsluiting na de uitgifte van het geld. Voeg nu dezelfde Reload-actie toe aan de knop voor het Afbreken/Stoppen. Selecteer de knop (BtnScreen4) en dubbelklik op OnClick bij de Widget Interactions en voeg een Reload-actie toe net als hierboven. 23

24 Stap 8. Verkeerde interacties voorkomen. Zoals in de vorige stap is gemerkt kan het voorkomen dat ergens op geklikt kan worden terwijl dat (nog) niet de bedoeling is. We hebben dat al deels opgelost door te zorgen dat variabelen bij het starten een goede waarde hebben en waardes worden gecontroleerd. Het aanklikken van widgets die eigenlijk nog niet gebruikt mogen worden kan je daar echter niet mee voorkomen. Een oplossing hiervoor is om zo'n widget bij het starten op disabled zetten, en het pas te enabelen als het widget gebruikt mag worden. We doen dit voor de Ok-knop (BtnScreen8): Klik dit widget aan met de rechter muisknop en kies Disabled: Vervolgens zorgen we dat de knop weer enabled wordt na invoer van de pas: Selecteer de pas. Dubbelklik op Pasinvoer bij de Interactions. Kies bij de actions onder Widgets, Enable/Disable voor "Enable" en kies aan de rechterkant de knop BtnScreen8. 24

25 Stap 9. Vormgeving interface. We voegen nog een kader toe waarmee we iets duidelijker maken dat de interface een geheel vormt. Ook voegen we een logo toe. Teken een Rectangle om de hele automaat heen en zet deze in de achtergrond via het rechter muisknop menu: Order, Send to Back. Verzorg de opmaak van dit kader door bijvoorbeeld achtergrond kleur, rand en afronding van de hoeken in te stellen. Je kan bijvoorbeeld een kleurverloop gebruiken als Fill Color zoals hiernaast afgebeeld. Via de uitgebreide eigenschappen onder Widget Properties and Style rechts onderin kan je bijv. ook nog de Corner Radius instellen om het kader afgeronde hoeken te geven. Zie de schermafbeelding op de volgende pagina. 25

26 We voegen nog een plaatje toe als logo van de automaat. Sleep een Image naar de plek waar je het wil hebben. Dubbelklik om het bestand te openen waarin het plaatje staat. Daarna wordt gevraagd of je autosize wil gebruiken. Kies je Yes, dan wordt de afbeelding in zijn originele grootte in de pagina gezet. Kies je Nee, dan blijft de afbeelding zo groot als die was, en wordt het plaatje geschaald. Een voorbeeld van het eindresultaat: 26

27 Stap 10. Exporteren naar HTML. Via Publish, Generate HTML Files kan je de gemaakte pagina als HTML file opslaan. Hierna kan je de pagina(s) bijvoorbeeld op een website publiceren (je moet dan de hele map met gegenereerde bestanden uploaden). Ook kan dit handig zijn om de pagina op deze manier aan gebruikers of testers aan te bieden. De pagina met de pinautomaat kan je vervolgens terugvinden in home.html. Mocht je deze pagina scherm vullend willen weergeven dan kan dat met de F11 toets van de browser. Als je verder wil met de HTML-code kan je alle widgets gemakkelijk terugvinden in de HTML code, de namen van de widgets zijn namelijk terug te vinden als commentaar en hebben het HTML attribuut data-label: 27