Arkiv over kategorien Webdesign
Når skærmen bliver skæv
Der har gennem mange år været en bevægelse i design af brugergrænseflader til webløsninger. Tendensen har klassisk set bestået i at man tømte sit statistikprogram for informationer, og konkluderede at det stigende salg af fladskærme resulterede i en bevægelse væk fra 800X600 pixel og hen imod 1024X768.
Denne tankegang har været fremherskende lige så længe som jeg kan huske, men bliver i disse tider kraftigt udfordret af nye teknologier. Mere om disse teknologier senere. Ideen om et kanvas hvorpå man kunne stryge sit design kommer naturligvis fra reklameverdenen, hvor et layout i sidste ende skulle sendes til trykkeren, og som derfor havde et ganske bestemt format, og kvalitet. Denne måde at tænke design på har aldrig passet særlig godt til nettet, og det er da også derfor vi har vænnet os til det klassiske “venstrehængte” design, med et ubrugt areal i højre side af skærmen (Her tænker jeg naturligvis på den gode gamle Windows bruger med sin 1024 skærm og et maksimeret vindue - dem er der ca. 75 % af). Der er i midten af dette årti dukket to andre designs op - fuldskærm designet og det midterhængte.
Fuldskærmdesignet har nu egentligt været der i lang tid, men bestod mest i et frit flydende indholdsområde, hvor der blot blev gjort plads til mere tekst. Dette design gav desværre også tekster med linjer så lange at man fik ondt i nakken af at se fra den ene ende til den anden. Det “nye” gamle fuldskærm design tager hensyn til at indhold ikke nødvendigvist skal skalere, men flytter i stedet rubrikker der ellers ville have lagt under skærmfolden, op på siden. Alternativt vises yderligere indhold, der ellers ikke ville være blevet vist (dette bruges ofte til bannerreklamer - så den kunne jeg egentligt godt undvære).
Det midterhængte design er jo egentligt blot en afart af det venstrehægte, og viser blot hvor desperate vi er for at kunne holde fast i en entydig skærmstørrelse. Ved at mindterhænge designet får vi spredt det overskydende skærmareal op i to, hvorved det ikke synes så slemt. Dette skal naturligvis ses i den kontekst at flere og flere får skærme der kører 1280 X 1024 eller 800 (afhængig af om det er 4:3 eller 16:9).
Men der et begyndt at ske noget nyt. Der er dukket nye måder at vise indhold fra Internettet på. Iphone, Nokia N800, tablet pc’er, subnotes, UMPC’er, Blackberrys, UMTS telefoner. Alle disse nye teknologier betyder at vi skal til at være langt mere fleksible med det indhold vi ønsker at vise. Før i tiden kunne man være rimelig sikker på at hvis man skulle vise noget i 1024X768, var der tale om en skærm på ca. 14+ tommer. I dag kan en ultra sub note vise 1208 X 800 på 10,1″. Forestil dig et website med tekststørrelsen låst på 10px blive vist på sådan en skærm. Det er vist kun for folk med særdeles gode øjne eller særdeles gode briller.
Der er ikke længere muligt at designe til nettet med den tanke at man skal ramme en bestemt størrelse. Havde vi blot muligheden for at designe unikt til hvert medietype ville vi kunne kode og ud af det. Problemer er blot at en PC (eller Mac) kan i dag have en høj opløsning på en lille skærm, hvor i før i tiden kunne forvente en stor skærm hvis der var stor oplæsning. De mindre håndholdte skærme svinder vis i bedste fald op på en bredde mellem 600 og 800 pixel, men på blot 3-7″ skærmareal. Vi kan heldigvis lave selvstændige designs til disse enheder, men de ting vi sender til enheden vil ofte være det samme på tværs af agenterne.
Et godt eksempel er overskrifter lavet som grafik. Mange content management systemer har i dag muligheden for at generere overskrifter i grafik, baseret på marketingchefens yndlings font. Der raser debatter på kryds og tværs om hvorvidt det kan accepteret og hvorvidt det kan gøres tilgængeligt for alle. Normalt er der flere muligheder, som f.eks. CSS eller SIFR. Problemet er imidlertid at når vi laver overskrifter om til billeder, kan den agent som viser indholdet ikke skalere det efter brugerens behov. Skal man se tekst på 10,1″ vil man ofte hæve standard skriftstørrelsen med et par pixel (alt efter hvilken browser man beder til). Billederne vil i disse tilfælde bare ikke skalere med op, men vil blive hængende i den originale størrelse som et appendiks i et design der nu blot vil forekomme “skævt”. Man kan godt tage højde for det på tværs af agenter. Når vi bruger håndholdte enheder, kan man falde tilbage på den almindelige tekst, men på UMPC’ere og sub notes er vi ikke så heldige.
Jeg skulle måske her lige vende begrebet “agent” for de af jeg der er en anelse i tvivl om hvad der menes. Når man viser et website, kan man lave et unikt design (stylesheet) til de kendte agenttyper. Der findes en international anerkendt fortegnelse over agenttyper, som veligeholdes af w3. Nuværende agenttyper er: aural,braille ,embossed, handheld, print, projection, screen, tty, tv. Hver agent har sine egne præmisser at arbejde ud fra. En handheld agent vil ofte have en lille skærm, og intet tastatur samt begrænset teknologi. En braille vil i sagens natur ingen skærm have, men i stedet punktskrift o.s.v. Indenfor en agent kan det så igen være mange varianter. Som jeg tidligere har været inde på er der et utal af størrelser og opløsninger indenfor agenten “screen”.
Mange af de nye teknologier identificerer sig netop som agenten “screen” og derfor står vi overfor flere udfordringer end tidligere. Vores opfattelse af design må revideres. Vi ved ikke længere hvordan vores designs bliver behandlet på den anden side, og vi kan forvente det som årene går bliver endnu værre.
Den klassiske fagkamp om “content is king” eller “design first” er slut. Vi må erkende at form, funktion og indhold er en trio der skal spille sammen på godt og ondt. Først når vi indser dette kan vi lave adaptive, tilgængelige og værdiskabende webløsninger der kan tilfredsstille vores brugeres behov.
Action pointing
Action point teorien et udviklet af Geoffrey Brown[1] i 1999, og tager udgangspunkt i, at et website skal fokusere på brugerens mål med at besøge websitet. Ved brug af action point teorien vil brugeren få en mere positiv oplevelse, og derigennem vil websitet med større sandsynlighed blive besøgt igen, frem for at brugeren prøver et konkurrerende website.
Teorien har fire delelementer.
1. Action point
2. Entry point
3. Action path
4. Exit point
Ad 1.
Et action point er et sted på websitet, hvor brugeren har opnået et givent mål. I forbindelse med en butik, vil det være idet en ordre afgives. Et website kan godt have flere forskellige action points, men det understreges, at pointet ligger ved opnåelsen af målet, og ikke på vejen til det. Action points kan hænge sammen med exit points. Ved en loganalyse kan man naturligvis ikke se en hitliste over sider, hvor brugeren har opnået sit mål, men til gengæld kan man analysere top exit pages, og derigennem få et billede af mulige steder, hvor brugeren opnår sit mål, og derfor forlader websitet. Man kan dog ikke pr. definition antage, at en action point og et exit point er det samme. Brugerne kan vælge at forlade websitet af mange andre grunde end et opnået mål. Derfor må kan foretage en vurdering af exit listen, og sammenholde den med de steder, man forventede et action point.
Ad2.
Entry points er områder, hvor brugeren typisk vil tilgå websitet. Optimalt vil man sige, at det er forsiden af websitet, men det vil være utopisk at tro enhver bruger, vil komme denne vej, f.eks. ved at indtaste URL’en i browseren. Det kan være en tilfældig side, fundet på en søgemaskine, et link fra en webside, vedrørende en speciel del at websitet, henvisninger i e-mail kampagner m.m. Man må derfor sikre, sig at de mest sandsynlige entry points vil indeholde henvisninger til action points, for at maksimere chancerne for, at den pågældende side kan fange brugerens interesse, og understøtte det mål brugeren forfulgte da vedkommende tilgik websitet.
Ad 3.
Action paths er de veje, en bruger logisk set kan følge for at nå et mål. Idet langt de fleste websites indeholder global navigation internt på websitet, er der naturligvis et uendeligt antal veje, men i dette tilfælde fokuseres der på de logiske stier, en bruger kan følge i relation til sit mål, og derfor mod et action point. Metoden til at finde disse action paths inkludere ekspertevaluering og loganalyser. Ved ekspertevaluering kan det noteres, at Steve Krug har lavet et diagram over en mulig sti simuleret over en indkøbstur hos en almindelig isenkræmmer. Diagrammet viser nogle af de overvejelser, man kunne tænkes at gøre sig i sin søgen efter et bestemt produkt, mens man vandre op og ned af gangene hos isenkræmmeren[2]. Der er altså brugt en kobling, mellem de overvejelser man gør sig i den fysiske dimension, til dem man gør sig, når man surfer. Denne kobling virker fornuftig, set i lyset af Schanks scenes og scriptlets, som jo netop er mål orienterede. Ved at trække på oplevelser man med stor sandsynlighed har haft tidligere, maksimere man chancerne for, at disse kan benyttes som prototyper i den nye shopping situation.
Målet med at arbejde med action paths er, at minimere vejen fra entry point til action point. Jo kortere man kan gøre denne, jo hurtigere vil man lade brugeren opnå sit mål, ergo vil brugeren få en mere positiv opfattelse af websitet og muligvis benytte løsningen igen, skulle der opstå et nyt behov for at købe lignende produkter.
Specielt i forbindelse med e-mail vil det være muligt at minimere en action path. En mulighed er ”single click purchace”, hvor e-mailen indeholder reklame for et produkt, og ved at klikke på produktet går brugeren direkte til check out området på websitet, med denne ene vare i indkøbskurven. Alternativt kan man on-line helt gå uden om check out og indkøbskurv, som beskrevet på www.amazon.com[3].
Ad4.
Et exit point forekommer ved de sider, brugere forlader websitet. Det er vigtigt at brugeren får sluttet cirklen på en positiv måde, og uden løse tråde i form af tvivl eller uopnåede mål. Exit points kan spores gennem loganalyser, som ud fra en kvantitativ opsummering eksempelvis rangere top 20 exit sider. Man bør dog, som nævnt i ad. 1, tage det forbehold, at analysen ikke altid bør tages bogstaveligt. Det giver imidlertid et billede af, hvor brugere generelt forlader websitet, og i kombination med den rute brugeren har taget, kan man vurdere om der kan ændres på de action paths, der findes, eller om der kan være et interfaceproblem. Ved exitpoint vil der være relevant at tilbyde brugen mulighed for at forfølge nye action points. Idet det tidligere action point her er opnået, har brugeren kun to muligheder: Forlade websitet eller gennemløbe endnu en action path. Det er dog uhensigtsmæssigt at tilbyde det samme action point igen til brugeren, da det indbyder til, at brugeren ”løber i cirkler”, hvilket ikke er en optimal strategi for brugeren. I stedet bør man henvise til andre action points som f.eks. produktopdateringer m.m., som efter et køb kan være valide action points, da de har relation til det tidligere købte produkter. I visse situationer kan det dog være relevant at tilbyde cirkulære action points. Dette er især gældende ved produkt sortimenter som musik og bøger. Her kan man referere til relaterede produkter, og derved skabe en positiv indkøbscirkel. Havde det været en motorsav, ville det højst sandsynligt være mere relevant at tilbyde sikkerhedsudstyr eller værktøj til vedligehold af saven, end andre save. Et eksempel på brugen af sådanne action paths er www.Amazon.com hvor der i relation til en bog, vises hvilke andre bøger andre brugere, som købte bogen, også købte.
[1] Action point teorien se : http://www.actionpointtheory.org/ (Ej længere aktiv)
[2] Krug, Steve. Dont make me think. S. 52-53.
[3] http://www.amazon.com/exec/obidos/tg/browse/-/468480/ref=hp_hp_ls_1_3/104-3300639-5205538
Tilgængelighed og det offeltlige
Lagt op af Bredgaard i Anvendelighed, Tilgængelighed, Webdesign, Webmetode den 30. marts, 2005
Tilgængelighed og det offeltlige
Tænk hvis vi skulle tænke på andre…
Kender du stedet "Dansk Center For Handicappede" (www.dcft.dk)? Der er sådant et sted hvor de kan hjælpe dig med at forbedre dine produkter så de tager hensyn til, at ikke alle har 100% optimale betingelser. De har sågar lavet en undersøgelse hvor en lang række danske CMS producenter fik muligheden for at vise deres værd når det kom til understøttelse af gældende standarder og tilgængelighedsprincipper.
Det er et godt center.
Jeg fik en undren her forleden. Er der egentlig ikke en dansk lov, som påbyder virksomheder at tage hensyn? Jeg sendte Peter fra www.dcft.dk en e-mail, og spurgte. Med fare for brud på brevskriveriets fortrolighed, bringer jeg her hans uredigerede svar:
Der findes ganske rigtigt i Danmark en lov om ligestilling af handicappede. Den hedder Nr BSF 43 "Folketingsbeslutning om ligestilling og ligebehandling af handicappede med andre borgere" og er fra 1993. Læs mere om den på følgende adresse hos Center for ligebehandling af Handicappede http://www.clh.dk/b43.htm Det fremgår af denne beslutning, at "Folketinget henstiller til alle statslige og kommunale myndigheder samt private virksomheder med eller uden offentlig støtte - at efterleve princippet om ligestilling og ligebehandling af handicappede med andre borgere og - at tage hensyn til og skabe muligheder for hensigtsmæssige løsninger under hensyntagen til handicappedes behov i forbindelse med forberedelse af beslutninger, hvor hensyntagen overhovedet kan komme på tale."
Følgende har jeg hentet fra Center for ligebehandling af Handicappede:
Princippet om ligebehandling af handicappede med andre borgere har siden 2. verdenskrig været et grundprincip i dansk handicappolitik. Idealet for et samfund baseret på ligebehandlingstanken er et samfund, som giver lige muligheder for borgere, som har en funktionsnedsættelse med borgere uden funktionsnedsættelse. Idealet om lige muligheder er fastsat i FN´s Standardregler om Lige Muligheder for Handicappede. Idealet om ligebehandling og lige muligheder bygger på et menneskesyn, hvor mennesker opfattes som lige uanset køn, nationalitet, race, handicap etc. Reel ligebehandling opnås ved at rette op på en ulige situation. For mennesker, som har en funktionsnedsættelse, forudsætter ligebehandling kompensation (afhjælpning) for den nedsatte funktionsevne. Kompensation som kan bringe personen på niveau med andre, som ikke har en funktionsnedsættelse, dvs. lige muligheder. Set ud fra det miljørelaterede handicapbegreb, hvor et handicap alene eksisterer, fordi omverdenen er uhensigtsmæssigt indrettet, handler ligebehandling om, at samfundet bør indrettes for alle. Engelsk sprogbrug anvender betegnelsen mainstreaming. I denne forbindelse er begrebet tilgængelighed centralt, da et samfund, indrettet så det er tilgængeligt for alle, også er et samfund, hvor personer, som har en funktionsnedsættelse, kan færdes i og fungere på lige vilkår med personer uden funktionsnedsættelser.
Tager man afsæt i FN"s Standardregler om Lige Muligheder for Handicappede, regel nr. 5, som omhandler begrebet tilgængelighed, står der, at tilgængelighed er altafgørende for opnåelse af lige muligheder i alle områder af samfundet. Der står videre i regel nr. 5 omkring (a) Adgang til de fysiske omgivelser, at "de enkelte lande bør iværksætte foranstaltninger til at fjerne barrierer i de fysiske omgivelser. Disse foranstaltninger bør bestå i at udarbejde standarder og retningslinjer samt at overveje at indføre lovgivning til at sikring af tilgængelighed til forskellige områder i samfundet, for eksempel boliger, bygninger, såvel offentlige som andre transportmidler, gader og andre udendørs omgivelser." Regel nr. 5 beskriver ligeledes vigtigheden af, at personer med funktionsnedsættelser har adgang til oplysning og kommunikation.
Med hensyn til krav om tilgængelighed på netsteder forholder det sig således, at man i 2000 på EU-niveau tog initiativ til en e-Europaplan, som blandt andet indeholder en hensigtserklæring om, at EU-medlemsstaterne skal indføre de såkaldte WAI-retningslinier for tilgængeligt web-design inden udgangen af 2001.
EU-Kommissionen har desuden den 25. september 2001 offentliggjort en meddelelse om den del af eEuropa planen, som handler om at gøre hjemmesider i EU tilgængelige for handicappede. Meddelelsen indeholder et stærkt signal om hvor højt, kommissionen prioriterer arbejdet med at sikre, at handicappede ikke udelukkes fra netsamfundet. Læs meget mere om denne meddelelse på EU websitet: europa.eu.int
Helt specifikt handler det om at overholde de internationale WAI retningslinjer for tilgængeligt webdesign fra World Wide Web Consortium: WCAG 1.0 (Web Content Accessibility Guidelines)og den officielle målsætning indenfor EU er, at hjemmesider bør overholde samtlige prioritet 1 og 2 krav fra retningslinierne WCAG 1.0.
Der findes altså ikke en decideret lov i Danmark, men en meget kraftig hensigtserklæring på området for netsteder.
At tænke sig at et land som Danmark ikke gør mere end lave hensigtserklæringer. Det syntes jeg er ærgeligt.
Syndikering af indhold
At syndikere indhold handler om at dele informationer på tværs af domæner. Der findes flere typer af indholdssyndikering, baseret på ejerforhold, kilde, visualisering og teknologi. For selv at se et eksempel på syndikering kan Danmarks Radio fremhæves med deres gratis nyheds blok.
1: Ejerforhold
Når indhold syndikeres skal der altid defineres et forhold omkring ejerskabet af det pågældende indhold. Er der ikke det, vil ophavsretten altid ligge hos den oprindelige forfatter. Typisk kan syndikering være bundet i et abonnement, hvor modtageren betaler et månedligt beløb for at vise indholdet på eget website. En anden mulighed er at købe ophavsretten med, hvorefter modtager overtager ophavsretten. Er disse ting ikke aftalt inden syndikeringen påbegyndes kan det på sigt få alvorlige konsekvenser.
2: Kilde
Når der først er etableret et ejerforhold, skal kildeforholdet addresseres Dette kan typisk foregå på tre måder. I DR’s eksempel forbliver kilden hos afsender, og visualiseres blot hos modtager. Det har to ulemper. For det første kræves det at afsender er on-line. Går DR ned (usandsynligt, men for eksemplets skyld) vil modtagerens brugere få en fejl i det område hvor indholdet skule have været, og ydermere kan indholdet kun vises på samme måde som afsenderen ønsker det. Der er altså et kraftigt afhængighedsforhold til afsenderen. Den anden mulighed er at modtager gemmer indholdet lokalt på egen server, hvilket både giver fordele og ulemper. Fordelen er at indholdet kan bruges og visualiseres efter forgodtgbefindende i overensstemmelse med ejerforholdet. Ulempen er at hvis afsenderen revidere indholdet, og "publicere" en ny udgave af det, vil modtageren ikke få den nye revision da der her arbejdes med en kopi. Indholdet vil da være forældet (og hvis der benyttes links i indholder vil disse måske også være brudte). Sidste mulighed er indholds-synkronisering. Dette er en udviddelse af mulighed numer to, hvor modtager i et fast tidsinterval forespørger afsenderen om revisioner af syndikeret indhold. Der er mange muligheder med denne metode, men det kræver dog af de to systemet som skal kommunikere sammen er meget integrerede. Idet indholdet kan have fået nye ID’er hos modtager kan det være en teknisk udfordring at finde det indhols som skal opdateres, i hvilke sprogversioner og i hvilke sprog? Det er imidlertid en teknologisk barierre som man kan programmere sig ud af, hvilket dog kan være beskoteligt på kort sigt, man vil sikre indholdets integritet på lang sigt (og således måske ende med at være en besparelse). Der er naturligvis også mulighed for at kombinere de tre former med hinanden. F.eks. Kan modtager hente indholdet "on-demand" og parse det ind som eget indhold (en kombination af metode et og to). Dette vil dog indeholde begrænsningerne fra metode 1 og kræve mere datakraft fra både afsender og modtager (hvormed løsningen bliver mindre skalerbar), men fordelene fra metode to og tre.
3: Visualisering
I eksemplet med Danmarks Radios nyheder er visualiseringen baseret på en tabel og et stylesheet hentet fra DR’s website gennen en URL. Dette bevirker at modtageren ikke kan ændre udseendet på indholdet, med mindre indholdet parses. Gøres dette vil det højst sandsynligt krænke ophavsretten, da en af grundende til at DR tilbyder servicen naturligvist er at brede kandskabet til DR’s nyheder on-line (hvorfor DR logoet også er en del af indholdsblokken). Der er dog andre muligheder. Et kunne være at lade stylesheetet være relativt, og derefter lade modtageren lave sit eget. Der vil dog kræve at modtageren selv kan gøre dette, hvilket man nok ikke satser på hos DR, så de vælger "den simple" metode. Slutteligt kunne man nøjes med at sende "rent" indhold og eventuelt benytte XML til at tagge det med. Det vil åbne op for, at modtager kan arbejde videre med de "rå data" og præsentere dem efter forgodtgefindende og i forskellige sammenhænge. I sådanne tilfælde kræver ophavsmanden ofte at der benyttes kildeangivelse. Et eksempel på en sådan service er InfopaQ’s netavis.
4: Teknologi
Indhold skal naturligvist bæres af et medie. På internet kunne man forestille let sig HTTP (men FTP kunne også bruger i tilfældet med synkronisering). Formatet skulle umiddelbart være til at gætte sig frem til i form af XML. Der kan ydermere tænkes at benytte en DTD til at strukturere XML’en, for at gøre indholdet lettere syndikerbart og lettere for modtageren at arbejde men.
W3C har en del materiale om dette på deres website. Andre teknologier der kan tænkes over er .net applikationer, som natyrligvis også kan benytte f.eks SOAP.
Menu systemets topologi
Lagt op af Bredgaard i Tilgængelighed, Webdesign, Webmetode den 15. juli, 2003
Navigation på Internet kan opdeles i en række elementer som visualisering, modeller, type og metode. I relation til visualisering tales der her om måden hvorpå navigationen etableres. Her kan man skelne mellme tekst og grafik som begge har fordele og ulemper. Grafisk navigation kan igen deles om i knapper, ikoner, tekst eller en kombination af det hele.
|
Ikon (grafik): |
Tekst: |
Kombinationer: |
|
|
|
|
En vigtig detalje vedrørende er indtrykket af navigation er begrebet "klikbarhed". En bruger får ofte denne information visuelt ved hjælp af udseendet eller af effekter. Ved eksemplet med ikonet ses det at der forekommer en "mouse over" effekt, hvor ikonet bliver omkranset af en grå boks, bliver lysere, og får en "alternativ tekst" (gem artikel). Boksen indikerer at her er en knap der kan klikkes på. Den lyse farve fortæller at området er parat til at blive aktiveret, og teksten uddyber den handling ikonet kan udføre når der klikkes. Der er således tre ekstra indikatorer på ikonet som skal hjælpe brugeren til at forstå den handling der ligger bag. I eksemplet med ren tekst (google knappen) er der brugt et klassisk "form element". Dette vil være afhængigt at styresystemet det ses på, men vil på tværs af websites altid have samme metodik og effekt (som dog kan ændres gennem f.eks. stylesheets) Brugeren vil være bekendt med denne type knap, og vil således forstå metoden gennem repetition. Sidste eksempel er den sværeste at forstå. Grafiske knapper signalere ikke umiddelbart klikbarhed, men i eksemplet ovenfor er der brugt supplerende test til at signalere dette. Brugeren vil stadig få muse effekten, men ellers intet. Derfor er det i disse tilfælde en god ide igen at arbejde med mouse over effekter.
De tre eksempler omhandler enkeltelementer indenfor navigation, bedre kendt som "lokal" navigation. Denne type navigation står i relation til "global" navigation, bedre kendt som menusystemer. Menusystemet er som oftest navigationsorienterede, hvorimod lokal navigation også kan være "applikations orienteret" (de udfører handlinger). I eksemplet med ikonet, gennem indhold og i Google eksempler udfører en søgning. Global navigation handler om at tilgå forskellige sektioner af et website. Det er en form for transport mellem informationer eller applikationer.
Global navigation kan som oftest etableret ud fra 4 topologier:
- Kollaps (+/-) menuen
- Faneblad menuen
- Drop down (in/out/up) menuen
- Multimedie menuen
Alle disse menutyper kan findes i en bred vifte af sammenblandinger, men vil altid kunne spores tilbage til disse 4 grundelementer.
Ad1 Kollaps (+/-) menuen:
Kollaps menuen er nok klassikeren over alle klassikere (på Internet) Vi kender den alle og den kommer i flere forskellige udformninger, som dog alle bygger på grundideen om at en række hovedområder kan foldes ud og ind for at vise deres respektive underområde. I eksemplet er der tale om tekst med grafik som punktopdeling. Der er ydermere en definition at besøgte områder, ikke besøgte områder, aktive hovedområder og ditto underområder. Kollaps menuen kan naturligvis etableres på baggrund af alle de ovenforstående knappemetaforer, men tekst udgaven er nok den mest klassiske. Der kan naturligvis også arbejdes med de visuelle effekter i form af mouse over/down/out.
Ad 2 Faneblad menuen:![]()
I dette tilfælde er en af de bedste eksempler på fanebalde taget. MSN Hotmail opererer med faneblade, ikke kun som metafor, men der forsøges aktivt at etablere en fysisk dimension i fanerne, ved hjælp af skygger og foran/bagved relationer alt efter hvilket faneblad der er aktiveret. Slutteligt er der også en visuel (grafisk) sammenhæng mellem den aktive fane og indholder på siden. Indholdet vises i en "beholder" eller boks, som udspringer af fane blader. Et præcis men begrænset form for navigation. Udfordringen med faneblade er at der ikke umiddelbart kan etableres sekundær niveauer med fanebalde uden at miste metaforen. Derfor skal man være meget stringent med indholdet under hvert faneblad, da det efter primær niveauet skal benyttes lokal navigation eller handlingsknapper. 
En mere nutidig, men alligevel langt mere hul udgave af fanebladsmetaforen er seneste layout fra TV2. Her er der ikke etableret en fysisk eller visuel kontekts, men blot en mouse over effekt. Den er yderst brugervenlig, men ikke nær så anvendelig som hotmail. Onde ryster ville sige at grunden til at de er gået fra deres gamle dropdown menu, og over til denne er at de dermed kan aktivere flere pop-up reklamer, da brugeren skal klikke en ekstra gang (1 gang på primærmenuen og 1 gang på sekundærmenuen). TV2 kan så tage det som en opfordring til at fyre den person som godkendte de popup reklamer, og igen komme i gang med at fokusere på deres brugere, og anvendeligheden af deres website (Det er jo indlysende at hvis der kommer et pop up vindue hver gang man klikker på en menupunkt holder man hurtigt op med det - simpel kongnitivt princip).
Ad 3 Drop down (in/out/up) menuen:

Menutypen var ekstremt populær i slutningen af 90′erne, men er på tilbagetog i dag. Da den dukkede op var den en velsignelse for designere som var stillet overfor ekstremt store informationsarkitekturer, da menu typen tillod en næsten uendeligt antal underniveauer og var meget let at udvidde på. Det gav anledning til nogle meget voluminøse løsninger, hvor næsten al information kunne findes gennem det globale navigationssystem. Ulempen viste sig senere, idet menusystemets force også var dens akilleshæl. Den enorme informationsarkitektur der kunne komprimeres ned i systemet var uoverskueligt for brugeren, og idet brugeren klikkede, forsvandt menusystemet. Det var (og er) umuligt at huske alle de områder de forskellige primærmenuer giver adgang til, så i dag bliver den kun bruge sammen ned redundante sekundærmenuer, og kun i ét niveau. (se f.eks. http://www.navision.dk )
Ad 4 Multimedie menuen:
Denne menutype er sjælden, da den som oftest er væsentlig mere krævende at lave og væsentlig sværere for brugeren at anvende. Dog giver den mulighed for at lave en spændende og anderledes menusystem, som i sig selv kan være et trækplaster på et website. Den ses oftest i forbindelse med kampagnesites eller multinationale sites som trækker på oplevelsen og branding som de primære elementer. I sådanne tilfælde kan menusystemet ikke være traditionelt, da den vil trække ned på den overordnede oplevelse af løsningen. ( se f.eks. http://www.nike.com, http://www.jamesbond.com/ eller http://www.coca-cola.com ).
Når det kommer til valg af navigationsprincipper, er der to muligheder som udgangspunkt (og den forkerte vælges som oftest). Man kan enten analysere sine behov, og sine mål, derefter lave en model og slutteligt sit design. Eller man kan lave et grafisk design, og klemme informationsarkitekturen ind i denne. Langt de fleste CMS er i dag designet til at kunne håndtere vilkårlige navigationssystemet, og udvidde disse ad.hoc. Det er imidlertid mere frugtbart at låse sin navigation til et minimum, og derefter lave et strammere design omkring denne. http://www.jamesbond.com/ kan fremhæves som en mere end almindelig flot multimediemenu, som trækker på en meget stram udgave af menutype 3. Dette kommer til at virke fantastisk flot, da informationsarkitektur og navigationsarkitektur samarbejder flot, og er skåret helt ind til benet. Man kan så klage over mange andre ting i løsningen, men det lader vi ligge for nu.
Husk til slut på:
- Global navigation er til for at transportere brugeren
- Fyld ikke for mange punkter på, da det bliver uanvendeligt
- Vælg din menu type omhyggeligt og ud fra virksomhedens mål
- Hvis menutyperne kombineres skal der være en meget god grund til det
- Sørg for at tilbyde brugeren alle de effekter som kan uddybe menusystemet (mouse over/down/out + alt tekst)
- Blot fordi menuen er i orden, skal brugeren til stadighed have hjælpeværktøjer som sidelokation, søgning, indeks og sitemap
- Forbered din informationsarkitektur grundigt, lav så en navigationsarkitektur for til sidst at lave selve menusystemet og designet
- Lad være med at tilføje menupunkter ad.hoc. siden hen med mindre der er en god grund til det.



