versie 1.1b (6 Maart 2002)
Jesse James Garrett
jjg@jjg.net
Diagrammen zijn een essentieel hulpmiddel voor het communiceren van informatie architectuur en interactief ontwerp in Web ontwikkel teams. Dit document gaat over de overwegingen bij de ontwikkeling van zulke diagrammen, schetsen een basis symboliek voor het weergeven van informatie architectuur en interactief ontwerp concepten in diagrammen, en geeft richtlijnen voor het gebruik van deze elementen.
Een visuele vocabulaire is een aantal symbolen die worden gebruikt om iets te beschrijven (meestal een systeem, struktuur, of proces) . De vocabulaire die hier wordt beschreven kan worden gebruikt door een informatie architect of interactief ontwerper om op een hoog niveau de structuur en/of verloop van de gebruikerservaring van een website te beschrijven.
Deze beschrijvingen, of diagrammen, worden gebruikt door vijf voornaamste publieksgroepen:
Elk van deze publieksgroepen (met uitzondering van sponsors) hebben behoefte aan veel details om hun werk te doen. Het probleem is dat de details die elke publieksgroep vereist enorm verschilt van de details die voor andere vereist zijn, en het grootste deel van deze details zijn irrelevant voor de behoeften van andere publieksgroepen.
De verstandige benadering is om de details in het diagram te beperken tot dat wat zinvol kan worden toegepast door alle publieksgroepen. Het diagram dient daardoor als een "toets" document voor de ontwikkeling van meer gedetailleerde documenten specifiek voor de behoeften van elke publieksgroep.
Enkele andere sleutel vereisten van een visuele vocabulaire voor informatie architectuur en interactief ontwerp omvatten:
Informatie architectuur and interactief ontwerp zijn twee zijden van dezelfde munt(Zie "De Elementen van User Experience" voor definities van deze termen zoals ze hier worden gebruikt ) Diagrammen van hedendaagse sites brengen onvermijdelijk beide zijden met zich mee. Maar voor elk zijn de doelen van het diagram licht verschillend.
In beide gevallen richt het diagram zich op wat we macrostructuur noemen en zorgt voor precies genoeg detail om het de teamleden mogelijk te maken het "verhaal in grote lijnen" te vatten. De taak van de architect is om het geschikte niveau van detail te bepalen om dit doel te bereiken. Het specifieke detail op pagina-niveau, of microstructuur, wordt gedetailleerd weergegeven in andere documenten waarvoor de architect niet in eerste instantie verantwoordelijk voor ontwikkeling hoeft te zijn.
Bij het beschrijven van informatie architectuur moet het diagram de conceptuele structuur en organisatie van de inhoud ("content") benadrukken. Merk op dat conceptuele structuur niet hetzelfde is als navigatie structuur. Het doel van het informatie architectonisch diagram is niet te zorgen voor een volledige navigatie specificatie; dit niveau van detail wordt het best gehouden in andere documenten, waar het minder waarschijnlijk is om te verwarren en af te leiden.
Bij het beschrijven van interactief ontwerp, moet het diagram benadrukken hoe de gebruiker door verschillende taken gaat, en wat de afzonderlijke stappen binnen deze taken zijn. Zoals bij navigatie, moeten interface details niet in het diagram verschijnen - - als je merkt dat je zelf knoppen en velden tekent, overlaadt je waarschijnlijk het diagram met overmatig detail.
Deze vocabulaire is gebaseerd op een eenvoudig conceptueel model dat zowel informatie architectuur als interactief ontwerp omgeeft:
De basis eenheid van gebruikers ervaring op het Web is, natuurlijk , pagina, die we representeren met een eenvoudige rechthoek. Merk op dat de pagina een eenheid van presentatie is, niet (noodzakelijk) een eenheid van implementatie - een pagina in jouw diagram kan corresponderen met meervoudige HTML bestanden (zoals in een frameset interface) of meervoudige eenheden code (zoals in een server- side include of database gestuurde implementatie).
Behalve pagina's zijn er ook bestanden, pakketjes data zonder navigatie eigenschappen.Bestanden worden aan de gebruiker geleverd voor gebruik buiten de Web browser omgeving (zoals audio of video bestanden, zelfstandige documenten zoals PDF's, of programma's. Voor deze, gebruiken we onze oude vriend het document pictogram met het ezelsoor.
Figuur 1a: [links] De
pagina en het bestand
Figuur 1b: [rechts]
Stapeling van pagina's en stapeling van bestanden
Gebruik een stapeling van pagina's om een groep van functioneel identieke pagina's aan te geven, waarvan de navigatie eigenschappen niet van belang zijn voor de macrostructuur van de site. Evenzo vertegenwoordigt een stapeling van bestanden een groep bestanden die identieke navigatie behandeling krijgen en kunnen worden ingedeeld als een enkele eenheid (zoals een collectie downloadbare spellen of een bibliotheek van PDF instructie handleidingen.)
We gebruiken labels pagina's en bestanden om ze te identificeren. Deze hoeven niet in onderlinge verhouding te staan met werkelijke namen zoals HTML <TITLE> elementen of bestandsnamen, maar ze moeten uniek zijn voor elke pagina of bestand in het diagram. Unieke numerieke indentificaties en type namen bieden ook een goede manier om alle pagina's en bestanden in jouw diagram in het oog te houden.
Relaties tussen elementen worden afgebeeld met eenvoudige lijnen of verbindingen. Deze conceptuele relaties zullen zich onvermijdelijk vertalen in navigatie relaties - - maar niet alle navigatie relaties zulllen in het diagram verschijnen.
In het geval van informatie architectuur, worden deze relaties gewoonlijk weerspiegeld door een hierarchische organisatie van pagina's in bomen. Hoewel dit in geen geval vereist is of zelfs (in sommige gevallen) aanbevolen.
Figuur 2a: [links] Een
eenvoudige boomstructuur
Figuur 2b:
[rechts] Dezelfde structuur als in 2a, anders weergegeven in diagram
Als interactief ontwerp in diagrammen wordt weergegeven, moeten onze verbindingen ook richting aangeven om aan te duiden hoe de gebruiker zal bewegen door het systeem naar de voltooiing van een bepaalde taak. Onze verbindingen in pijlen veranderen zal precies doen wat nodig is. We gebruiken de termen stroomafwaarts en stroomopwaarts om te verwijzen naar de positie van de elementen met betrekking tot deze voorwaartse beweging.
Merk op dat deze pijlen niet zijn als de pijlen die een éénrichting straat aanduiden, maar eerder als de pijlen die de weg aanduiden naar de snackbar in het winkelcentrum. De gebruiker wordt niet verboden in de tegenovergestelde richting te bewegen; de pijl geeft alleen de richting aan waarin de gebruiker waarschijnlijk zal willen gaan.
Figuur 3a: [links boven]
Pijl geeft stroomafwaartse beweging aan naar voltooiing van taak
Figuur 3b: [links onder]
Dwarsbalk geeft aan dat stroomopwaartse beweging niet is toegestaan
Figuur 3c: [rechts]
Meervoudige pijlkoppen verduidelijken de richting
Als om een of andere reden we deze opwaartse beweging willen verbieden (zoals in gevallen waar een onomkeerbare actie zoals het verwijderen van een record plaats heeft gevonden), gebruiken we een dwarsbalk (alleen maar een korte loodrechte lijn) aan het tegenovergestelde eind van de pjjl om dit aan te geven.
In sommige gevallen, kan het nodig zijn om een extra pijlkop te plaatsen naast de pagina stroomopwaarts om de richting van de stroom te verduidelijken in een meer complexe architectuur. (Een praktische aantekening: veel diagram toepassingen staan de gebruiker niet toe om pijlen samen te binden op deze manier. Om dit te omzeilen, voegen de vorm bibliotheken (shape libaries) een "lijmpunt" (gluedot) element toe, een onzichtbaar element dat bestaat uit een enkel verbindings punt. Gebruik dit element om pijlen samen te binden).
Verbindingen en pijlen kunnen ook worden gelabeld, maar het gebruik hiervan moet worden beperkt tot gevallen waarin de door de gebruiker genomen aktie moet worden verduidelijkt. Als labels lang en log worden en het diagram rommelig beginnen te maken, verwijs de lezer dan naar een voetnoot of appendix.
In de voorbeelden die door dit hele document worden gegeven, zullen voetnoot of appendix verwijzingen verschijnen als een nummer en letter combinatie tussen haakjes.Nummers verwijzen naar de diagram pagina waarop de verwijzing verschijnt. Letters verwijzen aaar de specifieke opmerking. Bijvoorbeeld, de eerste opmerking op pagina 3 van een diagram zou worden aangeduid met (3a), de tweede (3b), enzovoort.
Figuur 4a: [links] Een overbodig label
Figuur 4b: [midden] Een nuttig label
Figuur 4c: [rechts] Een voetnoot of appendix verwijzing
Een samenvallend geheel (weergegeven door een halve cirkel) wordt gebruikt in gevallen waar een aktie van de gebruiker veelvoudige, tegelijktijdige resultaten (zoals een popup venster dat verschijnt op hetzelfde moment dat een pagina wordt geladen in het hoofdvenster, of een pagina wordt getoond, terwijl een bestand wordt gedownload)
Figuur 5: Een samenvallend geheel
Evenals pijlen, zijn samenvallende gehelen richtinggevend. Stroomopwaartse elementen zijn verbonden met de gebogen zijde; Stroomafwaartse elementen zijn verbonden met de platte zijde;
Informatie architecten verlangen vaak naar steeds grotere vellen papier om hun werk in diagrammen weer te geven. Maar zelfs als groot-formaat output apparaten zoals plotters ruim beschikbaar zouden zijn, zijn sommige architecturen eenvoudigweg te complex om in een enkel, alles-omvattend diagram vast te leggen.
Om het mogelijk te maken onze diagrammen te scheiden in makkelijk in ons op te nemen onderdelen, gebruiken we voortzettings punten (rechthoekige haken) om de hiaten tussen pagina's te overbruggen.
Figuur 6a: [links] Een
"ga naar" punt verwijst de lezer naar een ander diagram
Figuur 6b: [rechts] Een "vervolg
van" punt, gaat verder waar 6a ophield
Een enkel voortzettings punt kan naar behoefte een of meer bronnen of bestemmigen weergeven. De orientatie van de haken (horizontaal of verticaal) heeft geen speciale betekenis; de keuze van orientatie is een kwestie van esthetisch oordeel van de architect.
Het gebied element (een rechthoek met afgeronde hoeken) wordt gebruikt om een groep pagina's te identificeren die een of meer gezamenlijke eigenschappen delen (zoals in een pop-up venster verschijnen, of een unieke ontwerp behandeling hebben). Gebruik labels om deze eigenschappen te identificeren of (zoals met verbindingen), verwijs naar opmerkingen ergens anders in het document als er veel te zeggen valt.
Figuur 7: Een voorbeeld toepassing van een gebied
om een popup venster weer te geven.
Veel architecturen brengen het herhalen van dezelfde basis structuur met zich mee, zoals het wordt toegepast aan een aantal functioneel identieke informatie elementen.Je kunt bijvoorbeeld een produkt catalogus hebben waarin elk produkt een aantal pagina's heeft, die ermee zijn verbonden. Je kunt een voorbeeld van deze structuur voor elk product tekenen, maar waarom je tijd verknoeien? Gebruik in plaats daarvan gewoon een herhalend gebied -- een stapeling van afgeronde rechthoeken.
Figuut 8: Een voorbeeld toepassing van een herhalend gebied
om een herhaalde structuur in een produkt catalogus weer te geven
Merk op dat verbindingen en pijlen feitelijk niet naar de gebieden zelf wijzen. De gebied elementen dienen alleen om de pagina's te omsluiten. Gebieden moeten zorgvuldig worden toegepast - het is heel makkelijk om verwiikkeld te raken in het vatten van alle soorten details met gebied elementen die zich niet verschijnen de gebruikers ervaring ( zoals welke pagina's worden gehost op welke servers) of anders het hoofd doel van het diagram , het communiceren van de macrostructuur , belemmeren.
Sommige interactief ontwerpen vereisen een sequentie van stappen (zoals een login procedure, bijvoorbeeld) die herhaaldelijk verschijnen in verschillende contexten door het hele ontwerp heen. Vaak zijn deze sequenties alleen maar een component van een of meer grotere taken die de gebruiker probeert te volbrengen. (Dit is analoog aan het concept van een subroutine in computer programmeren.)
Zo'n herbruikbare sequentie wordt een stroom, genoemd en wordt gerepresenteerd in een diagram door twee elementen: het stroom gebied die de stroom zelf bevat; en de stroom verwijzing, die dient als een soort "container" (placeholder) voor de stroom in elke context waarin het wordt herhaald. Beide elementen hebben dezelfde basisvorm, een rechthoek met afgeschuinde hoeken (of, als je het liever hebt, een vervormde achthoek).
Figuur 9a: [links] Een
stroom verwijzing dient zowel als "ga naar" punt en "vervolg van" punt
Figuur 9b: [rechts] Het stroom gebied waar naar wordt verwezen
in 9a
Stroom gebieden vereisen ook het gebruik van twee speciale typen vervolg punten: ingangs punten en uitgangs punten. Deze worden buiten het stroom gebied geplaatst, terwijl vervolg punten binnen het stroom gebied aangeven dat de stroom meer diagrammen omvat.
Stroom referenties zelf functioneren heel sterk als vervolg punten. Het doel van beide typen elementen is hetzelfde: de architect de mogelijkheid geven op de diagrammen over de pagina's heen uiteen te rafelen. Het verschil is dat een stroom referentie in beide de "verder naar" en "vervolg van" hoedanigheid kan dienen, terwijl een vervolg punt alleen het een of het ander kan zijn. Als je niet een element nodig hebt, dat beide rollen moet spelen, hoef je waarschijnlijk geen stroom te gebruiken.
Steeds vaker worden informatie architecturen en interactieve ontwerpen dynamisch omgevormd door een systeem als de gebruiker door de site beweegt. Dit omvormen wordt volbracht door middel van voorwaardelijke logica, en de overblijvende elementen van deze vocabulaire zijn specifiek voor voorwaardelijke logische structuren. Hier is een elementair conceptueel model voor toepassing van voorwaardelijke elementen:
In een statische architectuur wordt elk pad weergegeven aan elke gebruiker onder elke omstandigheid, en elk pad leidt altijd tot hetzelfde resultaat. In een dynamische architectuur, bepaalt het systeem welke paden of resultaten worden gepresenteerd aan de gebruiker gebaseerd op evaluatie van een of meer voorwaarden.
Om rommeligheid in onze diagrammen te minimaliseren, worden deze voorwaarden kenmerkend beschreven in een voetnoot of appendix die het diagram begeleiden.
Als een gebruikersactie een van een aantal resultaten kan genereren, moet het systeeem een beslissing maken over welk resultaat wordt gepresenteerd.(Misschien is het meest voorkomende voorbeeld hiervan fout afhandeling bij een formulier submissie) We noemen dit een beslissings punt,en zoals in traditionele stroom schema's, wordt dit weergegeven met een diamant.
Figuur 10: Een voorbeeld toepassing van een beslissings punt
in een logische opeenvolging
Merk op dat pijlen moeten worden gebruikt in samenhang met beslissingspunten om duidelijk te maken of verbonden elementen zich stroomopwaarts of stroomafwaarts van een beslissings punt bevinden.
Een voorwaardelijke verbinding(weergegeven door een onderbroken lijn) wordt gebruikt als een pad wel of niet getoond kan worden aan de gebruiker afhankelijk of aan een of meer voorwaarden is voldaan.
Figuur 11a: [links] Een
voorwaardelijke verbinding
Figuur 11b:
[rechts] Een voorwaardelijke pijl
Er kan bijvoorbeeld een pagina's zijn die gevoelige informatie bevat die alleen toegankelijk moet zijn voor bedrijfs werknemers. De voorwaarde in dit geval zou zijn gebruikers type (werknemer); als aan deze voorwaarde is voldaan, wordt het pad beschikbaar gesteld. Zoniet, dan bestaat het pad niet.
Als het systeem een pad moet selecteren onder een aantal onderling elkaar uitsluitende opties om aan de gebruiker te worden gepresenteerd, gebruiken we een voorwaardelijke vertakking (driehoek). Stroomopwaartse elementen zijn verbonden met een punt van de driehoek; stroomafwaartse elementen zijn verbonden met de tegenovergestelde zijde.
Figuur 12: Een voorwaardelijke vertakking
Het voorbeeld in figuur 12 lijkt veel op het beslissings punt voorbeeld, boven in figuur 10, maar het gedrag hier beschreven is heel anders. In het beslissings punt voorbeeld werd maar één pad (of navigatie element) gepresenteerd aan de gebruiker; waar het pad heen ging was de gebruiker afhankelijk van bepaalde voorwaarden.
In figuur 12 , maakt het systeem een overeenkomstige beslissing, maar het gebeurt voor de gebruikers actie. De voorwaardelijke vertakking geeft aan dat het systeem bepaalt welk pad zal worden gepresenteerd aan de gebruiker. De paden van pagina A naar B, C en D zijn onderling elkaar utsluitend; bij voorbeeld als een pad naar B bestaat, bestaan er geen paden naar C en D.
Zoals bij voorwaardelijke verbindingen en pijlen, kan een voorwaardelijke vertakking de gebruiker voorzien van geen enkel pad (een "leeg" (null) resultaat). Het verschil is hier dat bij een voorwaardelijke vertakking een "leeg" resultaat helemaal niet kan worden toegestaan. En als het wordt toegestaan, is het één van drie of meer mogelijke resultaten. Geef aan in jouw voetnoot of appendix of de vertakking een "leeg" resultaat toestaat.
Het voorwaardelijke schakelaar element (weergegeven met een trapezium) functioneert in veel opzichten als de voorwaardelijke vertakking , met een belangrijk verschil: bij de keuze, zijn de verschillende stroomafwaartse paden niet wederzijds uitsluitend. Elk aantal paden die voldoen aan de voorwaarde(n) kunnen worden gepresenteerd aan de gebruiker.
Figuur 13: Een voorwaardelijke schakelaar
De meest voorkomende toepassing van deze voorwaardelijke keuze wordt in resultaten door een zoekmachine gegenereerd. In dit geval, zou de pagina met zoekresultaten stroomopwaarts van de schakelaar verschijnen; de voorwaarde is het zoekcriterium dat de gebruiker inbrengt; de stroomafwaartse paden zouden leiden naar de geindexeerde inhoud pagina's door de zoekmachine. Zoals bij een voorwaardelijke vertakking, kan de vooorwaardelijke schakelaar een "leeg" resultaat genereren -- in feite komt dit veek gebruikelijker bij een schakelaar dan bij een vertakking.
Sommige voorwaardelijke structuren vereisen dat het systeem meer dan één pad gebaseerd op bepaalde voorwaarden presenteert. We binden in de structuur paden samen met een cluster (weergegeven door een cirkel). Het cluster kan stroomafwaarts verschijnen van hetzij een voorwaardelijke vertakking of een voorwaardelijke schakelaar.
Figure 14: Een cluster
stroomafwaarts van een vertakking
Als een of meer voorwaarden van toepassing zijn op een groep pagina's, worden deze pagina's omgeven met een voorwaardelijk gebied -- een afgeronde rechthoek zoals het standaard gebied, maar met de onderbroken lijn van een voorwaardelijke verbinding.
Figuur 15: Een voorbeeld toepassing van een
voorwaardelijk gebied waar een veilige verbinding vereist is
Voorwaardelijke gebieden worden meest voorkomend toegepast in situaties die verband houden met toestemmingen voor toegang, zoals wanneer een geldige login of versleutelde (encrypted SSL) verbinding vereist is. Anders dan andere typen van gebieden, zijn voorwaardelijke gebieden verbonden aan een resultaat, dat wordt gegenereerd in het geval dat niet aan de voorwaarden wordt voldaan.
Als je wilt zien hoe het hele systeem samenvalt, is hier een voorbeeld diagram van de informatie architectuur en interactief ontwerp van MetaFilter.(Ik was niet betrokken bij de ontwikkeling van deze site; dit diagram was hiervan eenvoudigweg omgekeerd-geconstrueerd)
Scott Larson maakte dit handige "spiekbriefje" voor snelle naslag van de verschillende voorwaardelijke elementen. En voor degenen die zijn geïnteresseerd in het maken van hun eigen vorm biblotheken voor gebruik met een programma anders dan degene beneden, is hier een PDF van alle vormen (met dank aan Ross Olson voor het idee).
Deze vocabulaire representeert noodzakelijkerwijs alleen maar een eerst stap. Als informatie architectuur en interactief ontwerp voor het Web doorgaan zich te ontwikkelen zullen er zich onvermijdelijk situaties voordoen die deze vocabulaire niet aanspreken. Jouw feedback en aanbevelingen voor de volgende revisie van deze vocabulaire zijn welkom.
OmniGraffle voor Mac OS X is de eerste toepassing die wordt verzonden met ingebouwde ondersteuning voor de visuele vocabulaire. OmniGraffle is tegenwoordig voor-geinstalleerd op alle Apple Power Macs en PowerBooks. Het kan ook worden gedownload van de Omni site.
PocketDraw 2.0 voor de PocketPC bevat een ingebouwde visueel vocabulaire pallet voor de informatie architect op weg. Je kun voorbeelden zien op de PocketDraw site of op Mike Lee's weblog.
Andere vorm bibliotheken zijn beschikbaar:
© 2000-2002 Jesse James Garrett
Dit document:
http://www.jjg.net/ia/visvocab/
Meer
IA bronnen: http://www.jjg.net/ia/