Eddy Boeve
Eddy Boeve op 28 september 2015

20 Ultieme Tips voor Axure RP: Tip 1 - Flows

Axure RP is een prachtige rapid prototyping tool, misschien wel de beste in de wereld. Maar het gebruik kost zeker in het begin nogal wat tijd om alle handigheden onder de knie te krijgen. En sommigen leer je alleen van de meer ervaren Axure gebruikers. Wij gaan je de komende tijd helpen door in enkele blogposts 20 superhandige tips te geven. Hier komt alvast de eerste: maak flows!

Tip 1: Gebruik flows

Alvorens je aan je pagina-ontwerp begint, moet je denken aan de klantreis (customer journey) en welke pagina’s daar een rol in spelen: de zogenaamde flow.
De ultieme notatiemethode daarvoor is de flowchart, en Axure heeft daar een speciale library voor gemaakt met de de meest gebruikte symbolen daarin. Klik op “Select Libraries” en selecteer “Flow” in de Widgets pane aan de linkerkant. Daar vindt je gebruikelijke en meest gebruikte flowchart symbolen.Je kunt die net als elke andere widget uit een library op een pagina slepen. Maar voor elk project een “Flow pagina” aan, waar je je flow gaat tekenen.

 

De verschillende flows

Je hebt afhankelijk van het product dat je gaat prototypen, verschillende flows nodig.

A. Sitemap

Bij relatief eenvoudige websites is de meest gebruikte flow een sitemap: alle pagina’s van de site in een hiërarchisch diagram, zoals:

Deze kun je eenvoudig maken met de in de flow-librarie aangeboden widgets. Sleep de elementen die je nodig hebt op een lege pagina. Flow-widgets kun je net zo vormgeven als andere widgets, met één belangrijk verschil: de flow-widgets hebben hoeken en zijdes die gevoelig zijn voor de flowtekentool van Axure, die je selecteert bij “Selection Mode” in de bovenbalk:

Als je daarmee de elementen op je flowpagina verbindt, zie je dat de getekende lijntjes “klikken” aan de flow-widgets (rode rechthoekjes lichten op als de klik gemaakt is). Daarna kun je de elementen verplaatsen, maar blijven de lijnen “plakken” aan de elementen. Reuze handig!

Om het af te maken, laat je de gekozen pagina er ook nog uitzien als een flow, zodat je dat in een demo van jouw prototype meteen duidelijk is. Rechterklik op de voor de flow gekozen pagina levert een menu op waar je Diagram Type ➔ Flow kunt kiezen. Nu zet Axure voor je pagina het flow-ikoon in plaats van het paginasymbool.

B. Flows

Het tweede soort diagram is een flow. Die worden gebruikt om bijvoorbeeld een use-case of customer journey weer te geven. Je gebruikt dezelfde onderdelen van Axure, maar wellicht wel andere symbolen. Zo wordt bijvoorbeeld vaak het “wybertje” gebruikt om beslispunten aan te geven:

Je zult als organisatie moeten afspreken welke symbolen je gebruikt voor welke onderdelen in jouw flows. Zie hier een overzicht van veelgebruikte symbolen bij andere organisaties:

Automatisch pagina’s in sitemap zetten

Je kunt ook eerst alle pagina’s aanmaken die je nodig hebt, en dan in hetzelfde rechter-muisklik menu van een pagina (of meestal een set van pagina’s onder een andere pagina of folder met pagina’s) “Generate flow” kiezen. Dan kun je vervolgens nog kiezen uit “Standard” (van boven naar beneden) en “Right hanging” (zoals het woord zegt). Dan wordt op de plek waar je staat de flow ingevoegd.

Mooi hieraan is dat de pagina gekoppeld is aan het symbool in de flowchart: de naam is hetzelfde (ook als je paginanaam veranderd blijft dat zo!) en je kunt klikken in het prototype op het paginablokje om naar de betreffende pagina te gaan. Dan krijg je dus een handige inhoudsopgave van je prototype.

Nb. Dit gedrag kun je ook bij flow-widgets verkrijgen door met de rechtmuisknop op een element te keizen voor “Reference Page” en de bijbehorende pagina te kiezen.

Pas op: Je kunt de “gewone” elementen uit andere libraries (zoals de standaard) prima gebruiken in flows, maar die hebben dus niet de “rode hengsels” aan de zijkant om lijnen aan te koppelen. Dus blijven de lijnen niet plakken als je de flow-widgets verplaatst. Dit is in versie 8 van Axure opgelost: alle widgets kunnen daarin als flow-element dienen.

Samenvatting flows

  1. Neem flows op in je prototype.
  2. Gebruik daarvoor de flow library in Axure met de standaard flow-widgets.
  3. Neem een aparte pagina voor je flow en markeer die als zodanig.
  4. Gebruik de flow om bij een prototype meteen naar de betreffende pagina(‘s) te klikken.
  5. Maak een afspraak binnen de organisatie welke symbolen voor wat gebruikt wordt.

Lees nu: Tip 2 – Gebruik Styles


Wil je een training voor het hele ontwerp team, en deze en vele andere tips in 1 dag onder de knie krijgen? Kijk dan eens hier: Axure RP Pro incompany trainingspagina.