Hyperlink Design: Nøgle til Optimal Brugeroplevelse?

I en verden, hvor milliarder af websider besøges dagligt, og tusindvis af links passeres, er hyperlinks den usynlige rygrad i vores digitale interaktion. De er portene, der forbinder os med information, underholdning og hinanden. Siden Tim Berners-Lee i sin tid beskrev internettet som intet andet end 'dokumenter og links', har disse klikbare elementer været fundamentale for vores navigation. Men trods deres afgørende rolle er hyperlink design og dets indflydelse på brugeroplevelsen (UX) sjældent et varmt emne i UI/UX-debatter. De er simpelthen 'bare der'. Men er det tid til, at hyperlinjen også udvikler sig?

Interaktion med hyperlinks er sandsynligvis den mest hyppige handling, brugere foretager online. En rapport fra Nielsen fra 2010 anslog, at den gennemsnitlige bruger besøger 2.646 forskellige websider om dagen, hvoraf hver kan have op til 100 hyperlinks. Dette svarer til 88 websider om dagen og næsten 900 links, der ses, hvis ikke klikkes på. Baseret på disse tal kan det estimeres, at brugere i gennemsnit støder på 27.000 links om måneden, eller 324.000 links om året. Det er ikke underligt, at hyperlinks er integrerede i internetoplevelsen.

Ifølge Microsoft er links 'tekst eller en grafik, der indikerer, at den kan klikkes'. De er stadig det primære middel, hvormed brugere navigerer på nettet, bevæger sig inden for et websted eller til eksterne relaterede websteder via klik. Brugbare links betyder, ifølge Justin Mifsud, at brugere kan 'opnå det mål, de har for at være på dit websted… (hvilket) vil positivt påvirke deres oplevelse'. Brugbare hyperlinks er essensen af god brugeroplevelse.

Selvom hyperlinks er centrale for brugeroplevelsen, der forbinder sider, websteder, mennesker og ideer med et enkelt klik, er hyperlink design og dets indvirkning på brugervenligheden ikke et hedt diskussionsemne inden for UI/UX. De er altid der, hvilket måske er grunden til, at webstedsejere og webdesignere ikke fokuserer så meget på linkets brugervenlighed, som de burde. De fleste websteder følger konventionen med blå understregede hyperlinks med større eller mindre overholdelse af de bedste praksisser, der findes i W3C's Web Content Accessibility Guidelines. Men konventionelt hyperlink design har både gode og dårlige implikationer for brugeroplevelsen, især i det konstant udviklende UI-landskab.

Historien om Hyperlinks

Den blå understregede formatering af konventionelle hyperlinks er et levn fra de dage, hvor UI-designere havde meget lidt spillerum for designkreativitet. I de allerførste browserprototyper, såsom Berners-Lees originale WWW Browser Prototype, var skærmen begrænset til 16 farver, og blå var den næstmørkeste farve efter sort. Nogle skærme understøttede kun sort og hvid, hvilket førte til tilføjelsen af understregningen.

Tre årtier senere har den blå understregning stadig et stærkt greb om linkmarkørens visualisering, selvom internetforbrugsvaner, enhedsbrug, grænseflader og selv den måde, vi peger og klikker på, har gennemgået en revolution. Spørgsmålet er, om det er tid til, at hyperlinjen også ændrer sig?

Blå Understregede Hyperlinks: Fordele og Ulemper

Den blå understregning har trods alt holdt stand i årtier. Lad os se nærmere på hvorfor, og hvilke ulemper den også medfører i dagens digitale landskab.

Fordele

Så hvorfor har den blå understregning vist sig at være så langlivet? En ledetråd ligger i det faktum, at ifølge Jakob Nielsen er 'livet for kort til at klikke på ting, du ikke forstår'. Han har ret; links skal øjeblikkeligt kunne genkendes som sådan for at være brugbare. Enkelt sagt mangler links 'affordance'. Det er umuligt at finde ud af deres funktion ud fra deres udseende. Du skal vide det gennem erfaring eller læring. I denne henseende er den måde, de visualiseres på, afgørende for deres succes.

Den genkendelighed af blå understregede hyperlinks forklarer i høj grad dens levetid som designelement, selvom den er en relikvie fra en enklere tid. Nielsen, hvis synspunkter på linkvisualisering har udviklet sig gennem årene, bemærker, at 'konsistens er nøglen til at lære brugere, hvad linkfarver betyder'. Blå har historisk set givet den konsistens, hvilket har cementeret den psykologiske association af blå med klikbarhed.

Blå hyperlinks omgår problemer med tilgængelighed for dem, der lider af de mest almindelige former for farveblindhed – 8% af mandlige brugere og 0,4% af kvindelige brugere. Selvom brugere har problemer med at se farver, kommer den understregede del af det konventionelle hyperlink i spil: hvis du ikke opfatter den blå farve, opfatter du stadig understregningen.

Understregningen har også andre fordele. Ifølge en undersøgelse fra 2003 fra Hamborgs Universitet fungerer understregede links som en slags underoverskrift i teksten, der guider brugere til vigtig information, når de skimmer. Understregningen gør det også lettere at finde links og øge klikraterne, selvom de ikke fremhæves på anden vis.

Ulemper

Indtil videre ser det godt ud for den blå understregning, ikke sandt? Men den blå understregnings negative indvirkning på brugervenligheden er også overbevisende. For det første er blå ikke et universalmiddel mod tilgængelighedsproblemer; ældre brugere har faktisk større besvær med at opfatte blå, ifølge en undersøgelse af Karyn Graves. Hun påpeger også, at 'øjet gradvist bliver mindre følsomt over for farven blå sammenlignet med andre farver over tid, og evnen til at fokusere på blå falder med alderen'. Efterhånden som den online befolkning ældes, vil websteder, der er rettet mod fuld tilgængelighed, begynde at få en fordel.

Understregningens forstyrrende karakter er fantastisk for skimmere, men har vist sig at hæmme læsbarheden på et mere generelt niveau. Ikke alene forstyrrer understregningen den naturlige strøm af blikket over tekst (ifølge Hamborg-undersøgelsen), men den skærer også i de lavthængende bogstaver og gør dem sværere at tyde. Denne negative indvirkning på læsbarheden fik Google til at droppe den understregede link i 2014, med henvisning til et ønske om at 'forbedre læsbarheden og skabe et generelt renere udseende'. Googles beslutning passer bestemt ind i den bredere tendens til grænseflademninimalisme og fladt design, som passer dårligt sammen med den blå understregede hyperlink.

En anden stor ændring, der er i strid med den blå understregede hyperlink, er enhedsbrug. Da den blå understregede hyperlink blev født, kunne ingen have forestillet sig de kraftfulde minicomputere, vi alle ville bære i vores lommer inden for en generation. Touchscreens og wearables har revolutioneret den måde, vi interagerer med enheder på, og hyperlinjen begynder at virke mere end en smule klodset på mobile enheder. De er svære at klikke på, falder ofte uden for tommelfingerzonen, og at jonglere med flere sider er et mareridt.

Anthony T. skriver i Smashing Magazine, at brugere ikke skal tænke over, hvordan de trykker på et mål som et link: 'hvis brugeren skal fjerne sin opmærksomhed fra at bruge din applikation til den måde, de bevæger, orienterer eller buer deres finger for at trykke på et mål, forringer det deres oplevelse af applikationen.' Udfordringen for designere er at finde ud af, hvordan man laver links, der er finger-størrelse og finger-venlige uden at bringe den samlede brugervenlighed i fare.

Den blå understregede link har måske historiens vægt på sin side, men som Nielsen Norman Groups Hoa Loranger påpeger, 'kan signifikatorer udvikle sig over tid, efterhånden som webbrugere får mere eksponering for forskellige interaktionssignaler og lærer disse nye signaler.' For designere og UX'ere, der ønsker at eksperimentere med linkvisualisering, er der nogle levedygtige alternativer derude, hver med sine egne brugervenlighedsfordele og -ulemper at tage højde for.

Fordele og Ulemper ved Blå Understregede Links

Alternative Visualiseringsteknikker for Hyperlinks

Med den stigende kompleksitet i webdesign er der opstået alternativer til den traditionelle blå understregning. Disse har hver deres fordele og ulemper.

Farve

Vi ved, at blå resulterer i flere klik, men hvilken slags blå skal UI-designere præcist bruge? For et par år siden blev Gmail-brugere split-testet med 40 forskellige linkfarver på den blå-grønne skala: jo blåere links, jo flere klik fik de, hvorimod links mod den grønne ende af spektret afskrækkede klik.

Selvom dette sandsynligvis blot skyldes brugerforventninger – blå betyder links, grøn betyder… hvad nu?, kan disse forventninger måske overvindes ved at lege med baggrundsfarver. Graves-undersøgelsen fandt, at baggrundsfarve havde en betydelig indvirkning på læsbarheden: grøn tekst på gul baggrund var hurtigst at læse, hvorimod rød på grøn var langsomst, mens mørk tekst på lyse baggrunde var meget mere læsbar end lys tekst på mørk. Lyse farver er 'ekstra iøjnefaldende og distraherende' for øjet, bemærkede Graves, og gør det svært at læse flydende. En af Graves' brugere hævdede, at de lyse blå links 'trak øjnene væk fra teksten'. Godt for klik, dårligt for indhold.

Overordnet set synes der at være en voksende konsensus om, at linkfarve betyder meget mindre end konsistens, hvor indflydelsesrige personer som Jakob Nielsen bemærker, at 'nuancer af blå giver det stærkeste signal for links, men andre farver fungerer næsten lige så godt.' Denne erkendelse giver designere frihed til at skabe hyperlinks i tråd med branding og overordnet produktdesign, snarere end at blive tvunget til at inkludere blå links på websteder, hvor æstetikken simpelthen ikke understøtter blåtonede elementer.

• Godt for: Designere, der forsøger at skabe større brandkohærens.
• Dårligt for: Websteder, der er afhængige af klikrater, da enhver farve, der ikke er blå, sandsynligvis vil få færre af dem.

Fremhævning og Dekoration

Fremhævning eller skygge omkring et hyperlink har sine fordele – der er ringe indvirkning på tekststilen, ingen ekstra pixels er nødvendige, og du kan endda overlappe links, hvis det er nødvendigt (selvom dette ikke er tilrådeligt af hverken æstetiske eller brugervenlighedsmæssige grunde). Ulempen ved fremhævning er, at det komplicerer designets farvepalet og, ligesom andre dekorative teknikker som fed skrift, reducerer dine muligheder, hvis du har brug for at understrege en bestemt sætning.

Desuden er der noget ved fremhævning, der bare virker klodset. Dette kan være grunden til, at blandt de websteder, der blev nævnt i 2015 Webby Awards Best Visual Design (Aesthetic)-kategorien, var der ikke et eneste, der brugte fremhævede links.

Designer Andy Rutledge påpeger, at fremhævning ikke er den eneste metode til 'linkdekoration', idet han foreslår linkmærkningsteknikker såsom 'forskellige kanttyper/-positioner/-konfigurationer, baggrundsfarver/-billeder og endda mindre tilrådelige dekorationer som en streg igennem'. Kantdekoration og et lejlighedsvist ikon er én ting, men en streg igennem vil kun kompromittere både læsbarhed og brugervenlighed.

• Godt for: Designere, der søger iøjnefaldende nyheder.
• Dårligt for: Mindre kyndige webbrugere, og selv kyndige, der måske undrer sig over, hvad der foregår med alle disse streger igennem.

Vis ved Hover / Links on Demand

Hvis der er én ting, du aldrig bør gøre, siger Hoa Loranger, er det at få 'brugere til at stole på 'mouse-overs' for at afgøre, om en tekst er klikbar'. Links, der kun bliver synlige ved hover, eller når brugeren trykker på en bestemt tast, når de vil se en sides links, er gode for minimalistiske designfanatikere og dem, der ønsker uberørt tekst for enhver pris, men det kommer til en høj pris. 'Folk behandler klik som valuta', siger Loranger, 'og de bruger den ikke letsindigt'.

• Godt for: Engagerede minimalister.
• Dårligt for: Brugere.

Symboler

Historisk set har UI-designere endda eksperimenteret med at tilføje symboler til et ord eller en sætning mellem tekstlinjer – en pegende hånd eller en pil er de mest almindelige. Graves afviser disse teknikker og understreger, at de 'ikke giver endepunkter til links, forstyrrer sideformateringen eller spilder skærmplads, samtidig med at de er forvirrende'.

• Godt for: Designere, der elsker SVG-filer.
• Dårligt for: Brugere med små skærmenheder.

Mobile-First Design

Efterhånden som flere designere prioriterer mobil-first, begynder nye konventioner og bedste praksisser omkring hyperlinks at opstå, såsom at reducere det samlede antal touch-mål (inklusive hyperlinks) og 'padding' omkring hvert link for at matche den gennemsnitlige fingerstørrelse, så brugere har større chance for at ramme deres målområde første gang.

Sitepoint råder indholds- og UI-designere til at 'være omhyggelige med deres formulering' og bestræbe sig på at placere hyperlinks med en rimelig afstand fra hinanden, med mobile brugere i tankerne. Og naturligvis vil eventuelle on-hover-ændringer, der er indbygget i web-UI'er, simpelthen ikke ske på mobile enheder. Når man designer mobil-first, skal et link manifestere sin klikbarhed med det samme. Disse nye mobilvenlige linkkonventioner kan meget vel være et glimt ind i fremtiden for hyperlinkvisualisering.

• Godt for: De 1,4 milliarder mennesker, der køber touchskærmsenheder hvert år.
• Dårligt for: Indholdsproducenter (der skal tænke mere over plads og design).

Retningslinjer for Brugervenlige Hyperlinks

Uanset hvordan hyperlinks visualiseres, er der nogle grundlæggende designprincipper, der bør anvendes over hele linjen for at sikre brugervenlighed:

• Hyperlink meningsfuld tekst: At linke til en 'klik her'-etiket er dårligt for SEO og dårligt for brugere, som implicit tvinges til at lede efter mere information om, hvad de præcist klikker på. Brugere er forsigtige med spyware. Lad dem vide, hvor linket vil føre dem hen.
• Undgå blå tekst uden link: Selvom dine links ikke er blå, er farven så stærkt forbundet med klikbarhed, at enhver blå tekst sandsynligvis vil opmuntre brugere til at klikke. Hvis den blå tekst ikke er klikbar, resulterer dette i frustration.
• Gør links tydelige: Brugere bør ikke skulle interagere med grænsefladen for at finde links.
• Vælg et hyperlink design og hold dig til det: Der bør ikke være variation i den måde, links visualiseres på tværs af webstedet. Konsistens er altafgørende.
• Besøgte links: Lad brugere vide, hvilke links de har klikket på, ved at tone farven ned til en 'slidt' nuance, eller rød-forskyd farven, som Google søgning gør fra lyseblå til lilla-agtig farve.
• Mouse-over: Links bør ændre stil ved mouse-over, hvilket understreger for brugere, at de er klikbare. Dette er dog primært relevant for desktop-brugere.
• Padding: Tilføjelse af 'padding' til et link gør det lettere for mobilbrugere at trykke i linkets generelle nærhed og stadig komme derhen, hvor de vil.

Konklusion: Hyperlinkets Fremtid

Det ser ud til, at hyperlink design er i limbo. Mens det blå understregede hyperlink åbenlyst er et levn fra enklere dage og ser forældet ud, føler brugere en dybt rodfæstet forbindelse mellem den blå understregning og klikbarhed; alt andet klikkes simpelthen ikke lige så ofte som en blå understregning.

Men alternativerne til linkvisualisering, såsom farvevariation og dekoration, kommer med deres egne problemer – læsbarhed, klikbarhed og kontekstuel forståelse påvirkes alle af hyperlink design. Enhver designer, der afviger fra den blå understregede konvention, vil sandsynligvis ønske at køre en hel del split-tests for at se, om brugere forstår og værdsætter variationen fra normen.

I sidste ende kan det være mobil-first design, der afgør hyperlinkets fremtid, da designere i stigende grad søger måder at gøre touch-mål mere tilgængelige på. De næste 30 år er måske ikke helt så forudsigelige for hyperlinjen som de seneste tre årtier.

Ofte Stillede Spørgsmål (FAQ)

Hvorfor er 'klik her' dårligt som linktekst?

At bruge 'klik her' som linktekst er problematisk af flere årsager. For det første er det ikke beskrivende; brugere ved ikke, hvor linket fører dem hen, hvilket kan skabe usikkerhed og mistillid (f.eks. frygt for spyware). For det andet er det dårligt for søgemaskineoptimering (SEO), da søgemaskiner bruger linktekst til at forstå indholdet af den side, der linkes til. En meningsfuld linktekst hjælper søgemaskiner med at indeksere dit indhold mere effektivt. Endelig er 'klik her' forældet i smartphone-æraen, hvor brugere 'tapper' eller 'trykker' snarere end 'klikker'.

Hvordan forbedrer jeg hyperlink UX med bedre linktekster?

For at forbedre brugeroplevelsen med links bør du kassere 'klik her' og i stedet bruge meningsfuld og beskrivende tekst. Her er nogle tips:

• Hold det blåt (hvis passende): Blå er stadig den mest genkendelige farve for links, og den udløser en automatisk forståelse af, at teksten er et link.
• Brug substantiver og verber: Beskriv destinationen klart. I stedet for 'klik her', brug 'Download Adobe Reader' eller 'Læs tips til bedre hyperlink UX'.
• Placer links strategisk: Placer links i slutningen af sætninger, hvor det er muligt. Dette giver brugeren mulighed for at læse den fulde information, før de beslutter at handle.
• Vær specifik: Jo mere specifik linkteksten er om destinationen, jo bedre. 'Læs hele artiklen' er mindre effektivt end 'Læs om de nyeste iPhone-modeller'.

Hvad er et godt visuelt signal for links og knapper?

Godt visuelt signal for interaktive elementer handler om at gøre dem øjeblikkeligt genkendelige og klikbare. Selvom traditionelle signaler som blå understregning for links og 3D-effekter for knapper stadig er stærke, er moderne design (f.eks. 'flat design') også udbredt. Nøglen er affordance – at udseendet antyder funktionen. For links er det vigtigt, at de skiller sig ud fra almindelig tekst, enten gennem farve, understregning, fed skrift eller en kombination. For knapper bør de have en form (f.eks. rektangulær med afrundede hjørner) og visuelle signaler (f.eks. subtile skygger eller farveændringer ved hover), der indikerer interaktivitet. Konsistens i designet er afgørende på tværs af hele webstedet.

Er der forskel på links og knapper?

Historisk set var der en klar forskel: links blev brugt til navigation mellem sider, mens knapper blev brugt til at udføre en handling (f.eks. sende en formular, starte en applikation). I dag er skellet blevet mere udvisket. Websites tilbyder flere og flere interaktive funktioner, hvilket har ført til, at links nogle gange bruges til kommandoer, og knapper til navigation. Selvom deres funktioner kan overlappe, er den primære forskel ofte deres visuelle fremtoning og den forventede interaktion. Links er typisk inline-tekst, der fører til mere information, mens knapper ofte er mere fremtrædende, bokselementer, der initierer en direkte handling eller proces.

Hvis du vil læse andre artikler, der ligner Hyperlink Design: Nøgle til Optimal Brugeroplevelse?, kan du besøge kategorien Mobil.