Basisprincipes van prototypebouw met Axure

Inhoud

• Prototyping principes
• Alexandria, het Digital Library Project
• Aan de slag - productiviteit in 30 minuten
• Initiële vereisten en use cases
• Gebruik case-diagrampagina
• Het projectbestand opslaan
• Eerste wireframe-pagina's
• Taakstroomdiagram pagina
• Blader door het stroomdiagram van het pad
• Zoekpad stroomdiagram
• Koppel use cases aan stroomdiagrammen
• Het HTML-prototype genereren

Dit is een bewerkt fragment uit hoofdstuk 3 van Axure RP 6 Prototyping Essentials door Ezra Schwartz.

User experience design is deels kunst, deels vakmanschap; de versmelting van methodologie en patronen met creatieve probleemoplossing. Het prototype speelt een grote rol in het succes van UX-projecten omdat het tegelijkertijd een concrete interactieve preview is van zowel de visie als de actualiteit van de applicatie die wordt ontworpen. Voor de UX-ontwerper biedt Axure de mogelijkheid om simulaties van een rijke interactieve gebruikerservaring te leveren, snel, iteratief en zonder kennis te hebben van programmeren.

Een paar jaar geleden waren de kosten voor het leveren van tijdige interactieve prototypes voor veel bedrijven onbetaalbaar. De meeste UX-ontwerpers zijn geen programmeurs en zijn daarom beperkt tot het produceren van statische wireframes in Visio of vergelijkbare tools. Er moesten geschoolde ontwikkelaars worden ingeschakeld om de statische wireframes om te zetten in interactieve JavaScript-, dynamische HTML- of Flash-simulaties.

Dit was een mini-ontwikkelingsinspanning waarvoor de UX-ontwerper een aanzienlijke hoeveelheid tijd moest investeren om interactiestromen en het gedrag van verschillende widgets aan de ontwikkelaar te communiceren en later te helpen bij het debuggen van de simulatie. Nadat een prototype eenmaal was gecodeerd, weerspiegelde het meestal een verouderde versie van de werkelijke statische wireframes, omdat de draden ondertussen aan een aantal iteratiecycli onderhevig waren.

Met Axure kunnen UX-ontwerpers zeer geavanceerde interactieve prototypes maken zonder dat ze hoeven te weten hoe ze moeten coderen of ontwikkelaars moeten inschakelen om de simulatie te maken. De kloof tussen ons vermogen om ons de ervaring voor te stellen en deze in het prototype te verwoorden, was gedicht. Met deze kracht komt ook een vraag naar methoden, technieken en best practices voor prototyping. Omdat projecten tenslotte zoveel processen hebben, waarom het wiel opnieuw uitvinden?

In dit bericht bespreken we hoe u een solide basis legt voor een Axure-bestand.

Prototyping principes

Ik zou drie eenvoudige, project-agnostische leidende principes voor prototyping willen voorstellen, die u in gedachten kunt houden wanneer u een nieuw UX-project nadert en gedurende de hele inspanning:

• Schat, plan en blijf herevalueren de inspanningen voor prototyping en specificaties. Dit zal een lange weg helpen om u te helpen uw visie, op tijd en binnen uw budget te realiseren, terwijl u uw gezond verstand behoudt.
• Beheers de tools die u gebruikt, inclusief Axure. De tools die we beheersen en de kwaliteit van ons vakmanschap helpen bij het vormgeven van onze deliverables en vergroten op hun beurt het vertrouwen van onze klanten en partners in onze expertise en in de visie die we helpen vormgeven.
• Alleen omdat je het in Axure kunt doen, wil nog niet zeggen dat het moet. Wees strategisch over de hoeveelheid high-fidelity details op laag niveau waartoe u zich verbindt.

In mijn hele boek demonstreer ik de toepassing van deze principes op realistische scenario's met behulp van een demonstratieproject of voorbeeldfragmenten, die u kunt downloaden van www.packtpub.com/support. U zult merken dat, hoewel veel van de ideeën en best practices in de context van Axure worden gepresenteerd, ze in feite tool-agnostisch zijn en u kunnen helpen bij uw werk, zelfs als u andere prototyping-tools gebruikt.

Alexandria, het Digital Library Project

Olifanten en muizen delen gemeenschappelijke voorouders en op dezelfde manier, zij het vreemd vergeleken, delen UX-projecten voor de wereldwijde onderneming het DNA van veel kleinere UX-projecten. Kernactiviteiten zoals ontdekking, gebruikers- en toepassingsonderzoek, het verzamelen van vereisten, iteratief ontwerp en bruikbaarheidstests zijn fundamenteel voor gebruikersgericht ontwerp, ondanks mogelijk grote verschillen in de schaal en complexiteit van de projecten.

Het voorbeeldproject van mijn boek simuleert het ontwerpproces van een digitale bibliotheek, een webapplicatie en een mobiele applicatie, genoemd naar de stad waar de grootste bibliotheek uit de oudheid stond, Alexandrië. De keuze voor dit onderwerp werd ingegeven door de vele mogelijkheden om tal van Axure-functies en -technieken te demonstreren, in de context van een applicatie die conceptueel bekend is bij de meeste lezers.

Natuurlijk zijn er veel manieren om een ​​UX-project te skin en het is duidelijk dat het demoproject een veel vereenvoudigde, geabstraheerde versie is van wat er in werkelijkheid gebeurt, waarbij het proces snelle cycli van iteratief ontwerp omvat terwijl we van het concept naar het gedetailleerde ontwerp gaan. . Toch is het doel om het proces van het ontwikkelen van een interactief prototype en het genereren van functionele UI-specificaties met Axure vanaf de basis te demonstreren.

Elk prototype bevat veel input die de ontwerpaanpak ondersteunt, waaronder:

• Zakelijke vereisten.
• Feedback van gebruikers en belanghebbenden.
• Tussentijdse bruikbaarheidstests om het voorgestelde ontwerp te valideren.

We beginnen het demoproject door enkele hoge eisen en use cases op te nemen, die dienen als de basis van een hoogstaand conceptueel raamwerk voor de wireframing- en prototypefase. Het zal een gelegenheid zijn om te bespreken hoe de diagrammogelijkheden van Axure het wireframing-proces voeden. We zullen overgaan op constructiemethoden die masters en dynamische panelen bevatten, en enkele voorbeelden van iteratie en feedback opnemen die een herwerking van onze oorspronkelijke constructie vereisen.

Terwijl we ingaan op onderwerpen als interacties, widgetbibliotheken, styling en annotaties, helpt het demoproject om, indien van toepassing, verschillende concepten en constructiemethoden te visualiseren. Vanuit een workflowperspectief beginnen we met een zelfstandig RP-bestand, het standaardbestandsformaat van Axure, en bespreken we de samenwerking uitgebreid in hoofdstuk 9, wanneer we het project omzetten in een gedeeld project-RPPRJ-bestand om teamwerkfuncties en workflows te demonstreren. Doorheen kijken we naar verschillende prototyping- en specificatieactiviteiten in de context van het algemene projectplan, ontwikkelingsmethodologieën, inspanningen en het inschatten van middelen.

Aan de slag - productiviteit in 30 minuten

Excuseer de gimmick-header, maar ik wil de waardepropositie van Axure benadrukken als een primaire UX-ontwerptoepassing. Elke tool moet een evenwicht vinden tussen de kosten, de functieset en het gebruiksgemak. Als u software met eigen middelen aanschaft, vraagt ​​u duidelijk: "Als ik tijd en geld in deze nieuwe tool investeer, hoe snel kan ik dan productief zijn en echt werk doen?" In het geval van Axure is het antwoord dagen, vaak uren en minuten, wat het geval zal zijn voor de meeste activiteiten die in dit hoofdstuk worden beschreven.

Bij veel projecten zal Axure in eerste instantie worden gebruikt om te ontwikkelen een visioen prototype, of een proof of concept(POC) - een hifi, gepolijst en klikbaar prototype. Het is vooral een verkoopinstrument dat een belangrijke rol speelt bij het bijeenbrengen van het topmanagement om grote investeringen in de volgende generatie van een softwareproduct te ondersteunen, of om investeerders te overtuigen om op een nieuwe onderneming te wedden. De belangrijkste kenmerken van de POC zijn:

• Niet teveel belast met gedetailleerde zakelijke, functionele of technische vereisten.
• Zeer interactieve simulatie die nieuwe kenmerken van de voorgestelde benadering van innovatieve gebruikerservaring belicht.
• Zeer gepolijste uitvoering met branding en visueel ontwerp.

De POC verwoordt het uiterlijk en het gedrag van de nieuwe software. Het presenteert zijn ’look and feel’ in de beste van alle mogelijke werelden. Hoe dichter het daadwerkelijke product bij de visie komt, hoe beter we het hebben gedaan als UX-architecten. Het is een kans om ‘out of the box’ te denken, waarbij u in gedachten houdt dat er wel degelijk een box bestaat in de vorm van budgettaire en technische beperkingen.

Laten we daarom aannemen dat u enkele van de eerste projecttaken al heeft voltooid, waaronder:

• Strategiesessies met verschillende stakeholders in het bedrijf.
• Contextuele interviews met eindgebruikers.
• Het vaststellen van een basislijn door het uitvoeren van bruikbaarheidsonderzoeken van de bestaande applicatie.
• Beoordeling van concurrerende en aanverwante toepassingen.
• Analyse van de inhoud van de site.
• Ontwikkeling van de taxonomie en wereldwijde navigatie.
• Een lijst hebben met de belangrijkste functies en gebruikersstromen.
• Persona's ontwikkelen en een matrix van gebruikersrollen en hun belangrijkste taken.
• Zakelijke vereisten op hoog niveau hebben.

Met dit solide begrip van het product en de beoogde gebruikers, bent u klaar om Axure in te duiken en uw creatieve energie te ontketenen. In dit bericht leer je hoe je Axure kunt gebruiken om:

• Maak use-case-diagrammen.
• Maak interactie-stroomdiagrammen.

Initiële vereisten en use cases

Op basis van ontdekkingsactiviteiten die tot nu toe zijn uitgevoerd, hebt u een lijst met vereisten op hoog niveau die een kernset van richtlijnen bieden en het productaanbod definiëren. Bij sommige projecten wordt u de lijst met zakelijke vereisten overhandigd, en bij andere projecten kunt u een sleutelrol spelen bij de ontwikkeling ervan. Hoe dan ook, de vereisten mogen de gebruikerservaring niet definiëren. Onze bijdrage als UX-ontwerpers is eerder om de vereisten te vertalen naar een uitstekende praktische gebruikerservaring.

Laten we de eerste reeks vereisten eens nader bekijken:

1. Vanaf de startpagina zou de gebruiker dat moeten kunnen bladeren of zoeken de bibliotheek.
2. De gebruiker zou meer informatie over een titel moeten kunnen krijgen zonder de startpagina te verlaten.
3. Elke titel moet een speciale pagina hebben met volledige details, evenals preview-mogelijkheden.
4. De gebruiker moet vanaf elke pagina in de bibliotheek kunnen zoeken met behulp van een gemakkelijk Google-zoekvak of een Geavanceerd zoekfunctie.
5. Zoeken resultaten wordt weergegeven in een lijst met overeenkomende titels.
6. De gebruiker moet meer informatie over een titel krijgen zonder het scherm met zoekresultaten te verlaten.
7. Vanuit het scherm met zoekresultaten moet de gebruiker toegang hebben tot alle titels detail- bladzijde.
8. Als er geen overeenkomende titels worden gevonden, geef de gebruiker dan een relevant kennisgeving.

Goede vereisten kunnen gemakkelijk worden opgesplitst in korte en ondubbelzinnige zinnen met een syntaxis die de gebruiker, een gebruikersactie en het resultaat van de interactie omvat. Met andere woorden, elk van deze zinnen wordt een use case. Use case methodologie valt buiten het bestek van dit boek, maar er is een schat aan informatie over dit onderwerp beschikbaar.

De vereisten op hoog niveau waarmee we zijn begonnen, leiden tot de volgende gebruiksscenario's:

• Browsen items van de bibliotheek.
• Zoeken de bibliotheek voor specifieke item (s) met Eenvoudig zoeken.
• Zoeken de bibliotheek voor specifieke item (s) met Geavanceerd zoeken.
• Bekijken Zoekresultaten.
• Bekijken onderdeel details.

Axure is een geïntegreerd wireframing-, prototyping- en specificatiesysteem. Het betekent dat we kunnen beginnen met het ontwikkelen van het specificatiedocument parallel aan de inspanningen voor wireframing en prototyping. Diagrammen zijn een goed voorbeeld van belangrijke documentatie die in Axure kan worden gemaakt en in het Word-specificatiedocument kan worden gegenereerd.

Gebruik case-diagrampagina

Wanneer u Axure start, wordt het geopend met een leeg nieuw bestand met een startpagina en drie geneste broers en zussen (zie de volgende schermafbeelding, A). Ik raad aan om de structuur- en stroompagina's, zoals gebruiksscenario's en stroomdiagrammen, in een sectie boven de wireframe-pagina's te bewaren. Merk op dat de volgorde van pagina's in de Sitemap paneel is de volgorde waarin die pagina's verschijnen, het HTML-prototype en de inhoudsopgave met Word-specificaties.

Door de structuur- en stroompagina's eerst te plaatsen, bepaalt u het logische verhaal dat abstracties op hoog niveau biedt, zoals gebruikersstromen, voordat u naar de daadwerkelijke wireframes en interactie gaat. Dit zal goed werken in vroege beoordelingsvergaderingen, zoals u het prototype beschrijft. Bovendien zullen lezers van de UX-specificatie in een later stadium een ​​duidelijk beeld kunnen vormen van de toepassing door de voortgang van de pagina te volgen.

In de Sitemap voeg een Nieuwe broer of zus pagina boven de Huis pagina (B) zoals weergegeven in de volgende schermafbeelding:

Dubbelklik op deze nieuwe pagina om deze als een tabblad in het Draadframe tabblad. Hernoem vervolgens de nieuwe pagina Gebruik Gevallen. (zoals weergegeven in de volgende schermafbeelding, A). Axure biedt een methode om onderscheid te maken tussen wireframe-pagina's en diagram-pagina's: Klik met de rechtermuisknop en selecteer het Stromen optie (B) van de Diagramtype contextueel menu. Merk op dat het paginapictogram (C) is gewijzigd, waardoor het gemakkelijker is om onderscheid te maken tussen draadframe- en stroompagina's:

Wireframe- en Flow-pagina's zijn in alle aspecten identiek, behalve het pictogram links van hun naam.

Selecteer vervolgens het Stromen widgetbibliotheek (zie de volgende schermafbeelding, A) in het Widgets paneel. Sleep het Acteur widget (B) naar de pagina. Dit stokje is de standaardweergave van gebruikers in UML en de meeste diagrammethodologieën. Sleep een Ovaal widget en label het Bladeren door pad (C). De ellips is de UML-notatie voor een use-case.Ga door met het toevoegen en labelen van ellipswidgets als dat nodig is:

Om het use case-diagram compleet te maken, willen we de actor-widget verbinden met de use-cases en de widgets netjes op de pagina ordenen voor een gepolijste presentatie. Begin met de lay-out en organiseer de cases in een verticale volgorde die een logische opeenvolging van mogelijkheden volgt.

Dit is een geweldige kans om vertrouwd te raken met de drie selectiemodi van Axure, die het verplaatsen en rangschikken van widgets op draadframe- en stroompagina's vergemakkelijken. U kunt de Selectie Modus op de werkbalk van Axure. (Zie de volgende schermafbeelding, A voor de Windows-versie en B voor de Max-versie.)

1. Selecteer doorsneden modus (C): Dit is de standaardmodus van Axure. Wanneer u met uw muis over het draadframe klikt en sleept, worden alle widgets die deel uitmaken van uw selectiegebied, geselecteerd, zelfs als ze er slechts gedeeltelijk in waren opgenomen.
2. Selecteer Ingesloten modus (D): In deze modus worden alleen widgets geselecteerd die volledig in uw selectie zijn opgenomen.
3. Connector-modus (E): Deze modus is het meest effectief wanneer u met Flow-widgets werkt, omdat het verbindingslijnen genereert die u kunt gebruiken om de verschillende flow-widgets in uw diagrammen aan te sluiten.

Persoonlijk geef ik de voorkeur aan de Selecteer Ingesloten modus boven de standaard Selecteer doorsneden modus, omdat het precisie biedt door alleen items op te nemen die volledig onder mijn selectie vallen, en andere weg te laten die zich in de buurt bevinden:

Om widgets op een pagina te ordenen, gebruikt u de tools in het Voorwerp werkbalk. De volgende schermafbeelding toont de tools op de Mac-versie; de identieke tools zijn op de Windows-versie:

• Groepeer en degroepeer objecten (A).
• Ga vooruit of achteruit, boven of onder (B).
• Lijn objecten links, rechts en midden en boven, onder en midden uit (C).
• Verdeel objecten horizontaal en verticaal (D).
• Vergrendel en ontgrendel objecten (E).

Selecteer een groep widgets op de use case-pagina, zoals geïllustreerd in de volgende schermafbeelding, en gebruik de Uitlijnen (A) en Verdeel (B) opties op de werkbalk om de zaken op de pagina in evenwicht te brengen:

Met alle use cases verticaal uitgelijnd en gelijkmatig verdeeld, groepeert u ze samen met de optie Groep op de werkbalk. Selecteer deze groep en selecteer de Actor-widget terwijl u de Shift-toets ingedrukt houdt. Gebruik de optie Midden uitlijnen om de acteur naar de use-cases te laten kijken.

Schakel vervolgens over naar het Connector modus en teken lijnen uit de Acteur widgets voor elk van de use-cases. Je zou moeten eindigen met een pagina die er ongeveer zo uitziet als de volgende schermafbeelding:

Het projectbestand opslaan

Om de grap over de verkiezingen in Chicago te parafraseren: sla uw werk vroeg en vaak op. In mijn ervaring is Axure erg stabiel, maar lang geleden ontwikkelde ik het instinct om mijn werk regelmatig op te slaan. Naast het standaard opslaan, raad ik een strategie aan om iteratief ontwerpwerk te ondersteunen: Gebruik de Opslaan als opdracht aan het einde van elke dag om een ​​archief met dagelijkse versies van uw RP-bestand te maken. Het is ook een goed idee om de Opslaan als commando voordat u ingrijpende wijzigingen aanbrengt in belangrijke wireframes.

Dit is waarom: Uw Axure-bestand zal snel evolueren en een enorme hoeveelheid details bevatten, aangezien u zich richt op steeds fijnere vereisten. Ideeën die er aanvankelijk veelbelovend uitzagen, zullen niet zo goed werken als u dacht. Feedback van belanghebbenden en gebruikers vereist meer wijzigingen, waarbij u soms moet terugkeren naar de vorige versie.

Het is dan in uw beste belang om een ​​lopende geschiedenis van uw Axure-dossier bij te houden. Wanneer u aan een stand-alone bestand (.RP) werkt, betekent dit dat u verantwoordelijk bent voor het beheer van de revisiegeschiedenis. Ik heb het hier niet alleen over het maken van een back-up van uw bestand, wat een gegeven is.

Voor het beheren van de geschiedenis van revisies is een techniek of beter gezegd een gedrag dat voor mij werkt vrij eenvoudig en gemakkelijk te implementeren: sla het bestand aan het einde van elke werkdag op. Gebruik dan Opslaan als om het bestand op te slaan in een archiefmap en de datum aan de bestandsnaam toe te voegen. Open de volgende dag het bestand vanuit de huidige directory. Met deze methode kunt u altijd eerdere items herstellen of terugvinden en deze indien nodig weer aan het huidige bestand toevoegen.

Eerste wireframe-pagina's

Met de eerste gebruiksscenario's, gaan we verder met het maken van relevante wireframe-pagina's. De pagina's die meteen in je opkomen zijn:

• Startpagina.
• Pagina met zoekresultaten.
• Item Details Pagina.

Zoals je misschien hebt opgemerkt, opent Axure bij het opstarten een nieuw document dat lijkt op een MS Office-applicatie, zoals Word of PowerPoint. Je zult zien in de Sitemap paneel dat Axure plaatst een Huis pagina en drie geneste pagina's. Dit is de standaardinstelling voor elk nieuw Axure-bestand.

Hernoem de niet-beschrijving Pagina 1 en Pagina 2 labels van de geneste pagina's (zie de volgende schermafbeelding, A) naar iets meer betekenis, en verwijder Pagina 3. Jouw Sitemap paneel zou er ongeveer zo uit moeten zien als de volgende schermafbeelding, (B):

U kunt de volgorde van de pagina's wijzigen door de pijlen omhoog en omlaag (C) te gebruiken, en hun nestniveau wijzigen door de pijlen voor inspringen en uitspringen (C) te gebruiken.

Taakstroomdiagram pagina

Een prototype wordt op maat gemaakt om de gebruikerservaring te visualiseren en te demonstreren. Voordat we de demonstratie kunnen ontwikkelen, moeten we echt de belangrijkste gebruikerstaken vastleggen die tenslotte de reden zijn voor het bestaan ​​van de applicatie. Aangezien de reikwijdte van dit boek onze bespreking van het onderwerp beperkt tot de context van Axure, zal ik me concentreren op het aspect van het maken van taakstroomdiagrammen.
Taakstroomdiagrammen zijn een model, een abstractie van de Ping-Pong-uitwisseling die de interactie tussen gebruiker en systeem vormt. Deze diagrammen spelen ook een belangrijke rol bij:

• De volgorde en logica van elke taak valideren met zakelijke en technische belanghebbenden.
• Het ontwikkelen van een overeenkomst over welke stromen en delen van stromen moeten worden geprototypeerd en tot welk niveau van getrouwheid.

De diagrammen moeten worden gevormd door een expliciete context, die wordt bepaald door een combinatie van invoer, waaronder:

• Wat het systeem weet over de gegeven gebruiker.
• De opties die het systeem de gebruiker biedt.
• De acties van de gebruiker.

Hoewel er geen vaste normen zijn voor UX-stroomdiagrammen, moet u er rekening mee houden dat duidelijkheid, precisie en organisatie u kunnen helpen tijdens gezamenlijke sessies met belanghebbenden.

Axure biedt een one-stop-shop voor het maken van zowel stroomdiagrammen als de wireframes die eraan zijn gekoppeld. De mogelijkheid om een ​​enkele applicatie te gebruiken voor het modelleren, simuleren en documenteren van de gebruikerservaring, geeft ons een krachtige werkomgeving.

Twee hoofdstromen die meteen in de context van Alexandrië opkomen, zijn browsen en zoeken. Bij de eerste optie kan de gebruiker door titels op de startpagina bladeren en inzoomen voor meer details. Met het andere pad kan de gebruiker zoeken naar een reeks titels of naar een specifieke titel. Overeenkomsten worden weergegeven in de lijst met zoekresultaten en de gebruiker kan inzoomen op de details van een gewenste titel. Beide paden kunnen dus eindigen op dezelfde itemdetailpagina.

Laten we een paar pagina's met taakstroomdiagrammen maken, een voor het modelleren van het bladerpad en de andere voor zoeken. In de Sitemap voeg de twee broers en zussen toe onder de Use Case-diagrampagina. Label de pagina's en gebruik de Diagramtype menu om hun pictogram te wijzigen om ze als stroompagina's te markeren.

Blader door het stroomdiagram van het pad

Voer de volgende stappen uit om het diagram samen te stellen:

1. Dubbelklik om het Bladeren door pad pagina in de Wireframes paneel.
2. Van de Widgets sleept u over het Acteur widget.
3. Nu komt het coole gedeelte: van de Sitemap deelvenster slepen over de startpagina - het is het toegangspunt tot deze stroom. Merk op dat de widget zijn label erft van de bovenliggende pagina op de Sitemap paneel. Let ook op het documentpictogram in de linkerbovenhoek van de widget (zie de volgende schermafbeelding, A). Dit betekent dat wanneer u het HTML-prototype genereert, u door op deze widget te klikken naar de daadwerkelijke startpagina gaat.
4. Van de Sitemap sleept u over het onderdeel details bladzijde.
5. Selecteer de vormen en gebruik Midden uitlijnen en Verdeel horizontaal om de presentatie op te schonen.
6. Veranderen naar Connector-modus om connectoren van de Actor-widget naar de startpagina en van daaruit naar de pagina Itemdetails te tekenen. Gebruik de Pijlstijl opties om richtingspijlpunten aan de connectoren toe te voegen.
7. Om een ​​interactielabel aan de pijl toe te voegen, voegt u een woordenlijst toe met behulp van de Wireframe-bibliotheekwidgets en hebt u zojuist uw eerste stroomdiagram in Axure voltooid. Het moet er ongeveer zo uitzien als in de volgende schermafbeelding:

Zoekpad stroomdiagram

De initiële vereisten vragen om twee zoekfuncties:

• Eenvoudig zoeken.
• Geavanceerd zoeken.

Beide methoden leiden de gebruiker door een soortgelijk pad: Als er overeenkomsten worden gevonden, worden deze weergegeven in het Zoekresultaten pagina (zie de volgende schermafbeelding, A) en de gebruiker kan doorklikken naar het onderdeel details pagina (B). Als er geen overeenkomsten worden gevonden, kan de gebruiker een nieuwe zoekopdracht uitvoeren.

Terwijl u het zoekpad voltooit, realiseert u zich dat dit een belangrijk risico met zich meebrengt. Als gebruikers een eenvoudige of een geavanceerde zoekopdracht uitvoeren, maar niet vinden wat ze zoeken, bestaat de mogelijkheid dat de gebruikers de stroom (C) verlaten en naar een andere site gaan. De rechtvaardiging voor het aanbieden van krachtige, eenvoudige en geavanceerde zoekfuncties moet worden gekoppeld aan het strategische belang van Zoeken in de toepassing. Dit is een voorbeeld van strategisch inzicht dat de zakelijke waarde onderstreept van het ontwikkelen van ondersteunende diagrammen voor het prototype:

Koppel use cases aan stroomdiagrammen

Naast de mogelijkheid om diagrammen en wireframes te maken en op te slaan binnen dezelfde applicatie, kunt u Axure-diagrammen en wireframes koppelen om een ​​naadloze overgang van het ene naar het andere te creëren:

1. Open de Gebruik cases pagina in de Draadframe paneel.
2. Klik met de rechtermuisknop op het Bladeren door pad use case en selecteer het Referentiepagina bewerken optie (zie de volgende schermafbeelding, A) van de Bewerk stroomvorm submenu.
3. De Referentiepagina pop-up (B) toont alle pagina's in het Sitemap paneel.
4. Selecteer de Bladeren door pad pagina om de use case aan de pagina te koppelen en de pop-up te sluiten.
5. Let op het referentiepaginapictogram (D) dat nu in de linkerbovenhoek van de use case verschijnt. Het gedrag van de widget is veranderd: voordat hij aan een referentiepagina wordt gekoppeld, kunt u door erop te dubbelklikken het label van de widget bewerken. Door erop te dubbelklikken, verwijst het naar een andere pagina in de sitemap om het Referentiepagina pop-up. Dit komt doordat de titel van de widget de titel van de pagina waarnaar wordt verwezen, erft en niet langer bewerkbaar is:

Het HTML-prototype genereren

Het is nu tijd om uw eerste HTML-prototype te genereren om het werk dat u tot nu toe heeft voltooid te beoordelen. Naarmate uw prototype vordert, zult u merken dat u vrij vaak voorvertoningen genereert om te valideren dat de HTML-uitvoer werkt zoals u het bedoeld had.

Toegang tot de functie voor het genereren van HTML-prototypen wordt bereikt via het werkbalkpictogram of via het Genereer menu. De Genereer een prototype dialoogvenster (zie de volgende schermafbeelding (A) voor de Windows-versie en (B) voor de Mac-versie), kunt u verschillende instellingen specificeren die van invloed zijn op de uitvoer. Op dit vroege punt wilt u echter beginnen met de Algemeen sectie (C) en laat Axure weten waar het HTML-prototype moet worden uitgevoerd.

Gebruik ofwel de standaardwaarde van Axure voor de doelmap, een map met de naam "Axure Prototypes" in uw map Documenten of bewaar al uw projectwerk in dezelfde map, zoals beschreven in Hoofdstuk 2. Dit maakt het gemakkelijker om al uw projectspullen terug te vinden, vooral wanneer u uw werk wilt vervoeren of een back-up wilt maken.

Firefox is de aanbevolen browser, maar u kunt uw keuze specificeren in het Openen met sectie (D). Elke keer dat u het HTML-prototype genereert, wordt een nieuw browsertabblad geopend. Het is een goed idee om een ​​bladwijzer voor de pagina te maken nadat u het prototype voor het eerst hebt gegenereerd, en vanaf dat moment de Niet open doen optie om de wildgroei van geopende tabbladen in de browser te verminderen. Genereer en vernieuw de pagina:

Druk op de Voorlopig ontwerp pictogram om het HTML-prototype te genereren. Het scherm is opgedeeld in twee secties:

• Aan de linkerkant een paneel met twee tabbladen: het Sitemap en Paginanotities. De Sitemap tabblad (zie de volgende schermafbeelding, A) is standaard geselecteerd.
• Het hoofdgedeelte dat het diagram of het draadframe weergeeft; de bovenste pagina in het Sitemap is de standaard.

In ons voorbeeld is de Gebruik cases pagina (B) is geselecteerd in de Sitemap paneel en weergegeven in het hoofdgedeelte van het scherm. Terwijl u uw muis over het Bladeren door pad use case (C), merk op dat de cursor verandert en een actieve link aangeeft, die bij een klik de referentie laadt Bladeren door paddiagram pagina (D). U kunt ook op het pictogram in de rechterbenedenhoek van de use case (E) klikken om de pagina waarnaar wordt verwezen in een nieuw tabblad te openen. In ons voorbeeld is de Bladeren Paddiagram toont het Huis en onderdeel details bladzijde. De vakken in het diagram zijn gemaakt door over de daadwerkelijke pagina's van het Sitemap.

Nu, in het HTML-prototype, hebben deze vakken ook een koppelingspictogram (F), en klikken op het vak van het pictogram leidt naar de wireframe-pagina waarnaar wordt verwezen:

Om samen te vatten wat we tot nu toe hebben behandeld:

• Use case-diagrammen maken.
• Taakstroomdiagrammen maken.
• Verwijzen naar en koppelen van stroom- en draadframepagina's vanuit diagrammen.
• Een HTML-prototype genereren.

Zelfs een Axure-beginner kan de activiteiten die we hierboven behandelden in ongeveer 30 minuten voltooien en een zinvol stuk werk creëren. Terwijl u doorgaat met het bouwen van het prototype, zullen de onderliggende use-cases en de taakstroom altijd beschikbaar zijn voor bevestiging en validatie.