UI Design Patterns: Gennemprøvede løsninger på fælles usability problemer

Sonja Hoffmann Senest opdateret den 21.
11 Min.
Designmønstre for brugergrænsefladen
Senest opdateret den 21.

Hvordan skal dit websteds menu struktureres? Hvorfor er det lettere for nogle hjemmeside operatører til at få abonnenter end andre? Hvad får brugerne til at udfylde eller ignorere formularen på dit website? Som designer har jeg behandlet spørgsmål om brugergrænseflade design og web usability - du vil finde svarene i denne artikel.

Hvad er brugergrænsefladedesignmønstre?

Brugergrænseflade (UI) Design Mønstre er biblioteker af usability problemer, der allerede er blevet analyseret og løst. De bør dog ikke vedtages en-til-en. Men de giver et omfattende grundlag for en harmonisk brugeroplevelse. Brugergrænseflademønstre er designet til at lette og fremskynde din arbejdsgang.

Flere tips om UX Design & Web Usability

Som i denne artikel God brugervenlighed hjælper med at guide dine brugere problemfrit gennem dit websted, produkt eller brand.

Formel til brugergrænsefladedesignmønstre

Hvordan kan du vide, hvilke design mønstre er passende for din hjemmeside, og hvordan man bruger dem korrekt? Chris Bank kommenterede i sin e-bog Designmønstre for mobil brugergrænseflade følgende procedure:

  • Problemregistrering: Hvad er brugeren forsøger at opnå på din hjemmeside, og hvilke problemer støder det på? Prøv at formulere problemerne i en enkelt sætning.
  • Løsningstilgang: Har andre designere løst dette problem? Hvis ja, hvordan?
  • Eksempel fra det virkelige liv: Kig på eksempler og gå igennem dem som en bruger. Prøv at analysere, hvad der hjalp dig med at løse en bestemt opgave. Tænk over, hvad der fik dig til at tænke – eller måske endda uafklarede. 
  • Brug: Sammenfat resultaterne af din analyse. Hvordan kan du implementere dem på din hjemmeside for at tilføje værdi til besøgende? Hvilke designmønstre skal du undvære? Hvis du har en stil guide, bør du medtage dine resultater der.

4 kategorier af UI-designmønstre

UI Design Mønstre kan opdeles i fire kategorier, som jeg kort vil præsentere for dig i dette afsnit. Desværre vil jeg ikke være i stand til at dække alle UI design mønstre. Hvis du ønsker at dykke dybere ind i emnet, internettet giver dig næsten ubegrænsede muligheder for at læse videre. Nogle få nyttige ressourcer i forbindelse med brugergrænsefladens designmønstre er:

1. Mest almindelige navigationselementer

Navigation er et af de vigtigste elementer i interaktion for brugeren: det fungerer ikke kun som en indholdsfortegnelse for din side, men også som en vejledning. Det faktum, at det normalt er placeret i toppen eller siden var oprindeligt primært af hierarkiske årsager. Med navigationen viser vi et hurtigt overblik over, hvad han kan gøre på vores hjemmeside, og hvor han er placeret i øjeblikket.

Takket være mange års praksis har vi internaliseret denne viden i en sådan grad, at tendensen til minimalisme ikke behøver at stoppe i navigationen. Design mønstre er derfor ganske tilpasses - eller de selv skal tilpasses til din side til at arbejde.

skærmbillede-www.castoretpollux.com-2020.06.11-18-05-59
Hjemmeside for Castor & Pollux

Castor et Pullex har overholdt UI Mønster regler og stadig skræddersyet dem individuelt til deres side: en navigation, der er placeret i øverste højre skærm og bliver "klæbrig", når du ruller. Logoet, der gentagne gange bringer brugeren tilbage til "den sikre havn" - hjemmesiden.

En hjemmeside, der i sig selv giver en masse interaktion og dermed virker næsten en smule kaotisk, får en behagelig brugervenlighed gennem brug af allerede kendte designløsninger.

"Sticky" navigationer, som beskrevet i ovenstående eksempel, er en vidunderlig opfindelse i webdesign. Ikke alene kan du vise imponerende animationer med dem, de også gøre dit websted hjemmeside besøgende får fra "A til B" hurtigere. Med One Pagers, de også arbejde som en rød tråd: brugeren ved, hvor han er, og hvad han allerede har set.

Det samme gælder for rasp: for små sider, giver de ikke meget mening. På mere komplekse sider kan de dog gøre underværker. De ikke kun hjælpe brugeren til at orientere derhjemme, men også at springe tilbage til ethvert sted i navigation.

En anden måde at bruge disse mønstre på er i følgende eksempel:

Skaberne af dette websted har vedtaget viden om den mobile burger menu: på den ene side, for at lette en minimalistisk navigation af deres hjemmeside, som ikke er fremmed for brugeren. På den anden side, at stadig give dit produkt nok plads til at være i forgrunden.

screenshot-demodern.com
Eksempel projekt af Demodern

Noget er kommet ud af tendensen - men mindst lige så nyttigt - er såkaldte ryttere i navigation. De minder om et arkiveringssystem og er hurtigt og intuitivt forstået af brugerne. Også her fungerer de specialarbejdere lige så godt i den slankede version som i den oprindelige version.

I mellemtiden bliver ryttere i stigende grad brugt som modale faner til at vise indhold, der formodes at være indbyrdes forbundne. Som modale faner har de også den fordel, at siderne ikke behøver at være fuldstændig genindlæses for at vise andet indhold. Især i produktsiderne i butikker baseret på WooCommerce vi ser dem ofte, som i følgende eksempler: 

UI Design Patterns: Gennemprøvede løsninger på fælles usability problemer
Visning af Atlanterhavsterrassen

Dernæst et mindre minimalistisk eksempel på sammenligning:

UI Design Patterns: Gennemprøvede løsninger på fælles usability problemer
Eksempel side af Bambus tøj

Ofte UI mønstre er baseret på interaktioner i den virkelige verden. Derfor er det vigtigt aldrig at glemme de fysiske egenskaber og / eller at ændre dem med vilje. Det betyder, at brugeren ikke længere intuitivt kan forstå disse handlinger og deres konsekvenser. For at illustrere dette, har jeg tilpasset ovenstående eksempel én gang:

skærmbillede-bambooclothing.co.uk-2020.06.11-18-33-55_modified

Mappestrukturens fysiske egenskaber findes ikke længere. Fanerne ligner nu malplacerede navigationselementer. Tilhører elementerne er noget tabt - de synes næsten tilfældigt arrangeret.

Knapperne overløb og "Gå til sektion"

For at fuldføre vores liste, overløb menuer og "Spring til sektion" knapper må ikke mangle. Knapperne "Spring til afsnit" er normalt placeret i nederste venstre hjørne. De giver brugeren mulighed for at navigere tilbage til toppen af siden med et enkelt klik. Især med en personsøgere giver Jump to Section Buttons mening: De sparer tid og forhindrer frustration gennem langvarig rulning.

Drop down menuer faktisk har mindre af deres oprindelse i at forbedre anvendeligheden af sider. De er designet til at spare plads og plads til mere indhold i navigation. Desuden ser dit design mere ryddeligt og klarere ud. Drop down menuer er blandt de design mønstre ofte omtales som anti-mønstre - fordi de ikke rigtig gøre det lettere at navigere på websiden. Rullemenuer, men anbefales stadig. Efter alt, er deres funktion kendt og lært. Indikatorer for en rullemenu er ofte den ned peger sildeben mønstre.

UI Design Patterns: Gennemprøvede løsninger på fælles usability problemer
Hjemmeside for Dagens e-mail

Knapper og links jeg bevidst kun adresse kort i denne artikel, da de bør være velkendte for enhver designer. Der er næppe nogen grænser for design og animation af knapper. Deres stil afhænger normalt af det visuelle layout af de oplysninger, der tilbydes. De skal være klart synlige i Den primære farve på siden og placeres på en sådan måde, at de er grupperet med det relevante indhold.

Det samme gælder for links: de behøver ikke længere at blive vist med blåt med en understregning, som de plejede at være. Men deres eksistens skal være klar og frem for alt ensartet. Omfattende viden om knapper, du får Her.

Paginering - deling af indhold på tværs af flere sider - er især vigtigt for e-handel butikker, der tilbyder et større antal produkter. Dette bruges til at tilbyde indhold på flere sider, reducere indlæsningstiden og opdele indholdet i letfordøjelige sektioner. Aviser, såsom FAZ, også bruge paginering til at opdele længere artikler.

skærmbillede-www.faz.net-2020.06.13-15-49-43
Eksempel på FAZ

Også, som er kommet ind i tendensen i de seneste år, såkaldte "fedt sidefod" er nu en af de lærde UI mønstre. Her kan du for eksempel linke til ofte besøgte undersider, gemme dine kontaktoplysninger og vise juridisk indhold, der ikke har mistet noget hierarkisk i den primære navigation. 

Sidefoden fungerer derefter delvist som en anden struktureret indholdsfortegnelse på siden. Men det kan også stå som en slags teaser for mere information. Når brugeren har rullet gennem din side, kan sidefoden stadig tilbyde ham relevant indhold – såsom interessante artikler, links til sociale medier & co. – der holder dem beskæftiget med dit produkt.

2. Input & Output: Kontakt og abonner formularer

Ud over retningslinjerne for databeskyttelse er det også værd at fokusere på brugernes behov. Især på mobile enheder kan en inputformular hurtigt føre til frustration: Den allerede lille skærm, det fysiske miljø under brug, det tidsmæssige aspekt samt en mulig ustabil forbindelse kan hurtigt repræsentere en nervøs tåretest. Heldigvis er der nogle design mønstre, der allerede har behandlet disse spørgsmål.

Tip:

Som generelt på nettet gælder følgende: så kort som muligt, så længe det er nødvendigt. Undersøgelser har vist, at tilføje ubrugelige spørgsmål er et sammenbrud i deltagelse og kan potentielt koste en masse penge.

I det følgende har jeg oprettet en fiktiv form for at vise dig de vigtigste principper:

Form
Principper for inputformularer
  1. Test af sporing af øjne har konstateret, at vi behandler oplysninger hurtigere, når de er arrangeret fra top til bund, i stedet for fra venstre mod højre. Det er derfor tilrådeligt at placere overskriften over formularfeltet og kun oprette én kolonne.
  2. Det er nyttigt at give brugeren et eksempel input i forudbestemt pladsholdere - så de nødvendige oplysninger visualiseres på forhånd. Du bør undgå sønderlemmede talposter, fordi de kun komplicerer inputtet. De bør også programmeres til at være tolerante over for rum.
  3. Fejlhåndtering er et vigtigt og komplekst emne. Den Asterisk og den røde afgrænsede input felt har vist sig her som UI mønstre. Ideelt set bør felterne være selvforklarende. Ikke desto mindre bør du altid forvente noget ikke arbejde. Derfor tilbyder forskellige hjælpemuligheder. Der er flere muligheder for dette: en info-knap, som giver mulighed for hjælp, når svævende. Eller dukker op små modals, hvis formularen ikke er lykkedes at indsende.
  4. Det er et godt sted at give feedback, så snart du skriver. I tilfælde af adgangskoder, har det også vist sig at give brugeren en kvalitativ vurdering af, hvor sikker adgangskoden han har valgt. 
  5. Den flertrinsform har flere psykologiske fordele. I første omgang er det klarere og mindre skræmmende. Hvis brugeren så også vises ved hjælp af en indikator (her lastning bar), hvor han er i form, han ved præcis, hvad der kommer. Det er mindre sandsynligt, at holde op for tidligt. Personlige oplysninger bør altid blive bedt om i slutningen af formularen. Efter alt, hvis dit websted besøgende allerede har udfyldt formularen i vid udstrækning, vil det være vanskeligere for ham at opgive den tid, der allerede er investeret uden resultat. Det er også tilrådeligt blot at bede om oplysninger, der rent faktisk er nødvendige, og også at begrunde anmodningen. Hvis du beder dine brugere om at tilmelde sig noget, er det tilrådeligt at angive en fordel for dem - "Få altid de bedste tilbud først". I det sidste trin skal du give et lille overblik over, hvad der sker næste gang – og hvad brugeren kan forvente og hvornår.

Derudover bør dine formularer omfatte automatisk påfyldning (via data, der er gemt i browseren) og genkendelse af oplysninger (f.eks. tilføjelse af byen efter indtastning af et postnummer). Hvor, især i tilfælde af WordPress mange formularer, der allerede er medtaget som standard. 

Hvis det er muligt, bør du undgå eller i det mindste holde brugen af Captchas på et minimum. Højt af denne undersøgelse captchas kan forårsage 30 procent mindre interaktion med formularen.

3. Strukturering af dit indhold

Som en hjemmeside operatør, bør du især undersøge, hvordan indholdet af dit websted er struktureret: Har de hjælpe dine besøgende med at finde vej gennem dit websted? Er dit indhold let tilgængeligt, og kan du forstå deres hierarki? 

Spørgsmålet om nem tilgængelighed appellerer især til brugere, der ser dit websted under ændrede forhold. For eksempel hos personer med farvesyn og synshandicap. Hvis du ønsker at dykke dybere ned i emnet tilgængelighed og tilgængelighed, kan du finde flere oplysninger her: 

Hvis du har en blog eller et online magasin, kan du kende problemet: Du har en masse interessant indhold, som du gerne vil tilbyde så jævnt som muligt. Et passende designmønster er den såkaldte "artikelliste". Her kategoriserer du dit indhold og viser kun et lille uddrag ad gangen. Dette giver dig mulighed for at vise mange emner på et øjeblik uden at oversvømme dine brugere med oplysninger. Et godt eksempel viser her RAIDBOXES:

RAIDBOXES WP unboxed
Visning af WordPress Magasin wp unboxed

Denne division giver brugeren mulighed for at flyve over hele indholdet i henhold til områder af interesse og dermed finde hurtigere, hvad der interesserer ham.

For at give dig mulighed for at tilbyde bestemt indhold uden distraktion, kan du bruge modal kasser. Disse ligger over resten af din side og giver brugeren mulighed for kun at fokusere på dens indhold. Det kan være nødvendigt og vigtigt. Bemærk dog, at disse modals også er mere af en anti-mønster: i princippet, de blokerer brugeren fra ethvert spillerum, så længe modal er åben.

Modal bokse kan dog hjælpe dine besøgende med at forstå dit indhold bedre. Men modal kasser, der er for almindelige eller tilsyneladende uretfærdigt udløst kan hurtigt forårsage frustration og en følelse af hjælpeløshed.

Lightbox og fullscreen mode hører også til denne kategori. På den ene side giver de brugeren mulighed for at se nærmere på det valgte indhold. På den anden side gør de enhver anden interaktion umulig. Derfor er det altid vigtigt at tilbyde mindst ét forsvindingssted. Særligt kendt her er at klikke på et X i øverste højre del af billedet eller klikke uden for boksen for at lukke den igen.

Lysbilledshow er også en populær måde at vise billeder på. Der skelnes mellem automatisk afspilning og manuelt navigerede lysbilledshow. Gallerier vises ofte som miniaturebilleder og forstørres derefter ved hjælp af lysbilledshow og/eller lysbokse.

Her skal du handle primært efter funktionen: Hvilken slags billeder repræsenterer du? Skal de være tilgængelige som fuld skærm? Og hvad er vigtigst: dit indhold som helhed eller de enkelte billeder? Er det værd at ty til andre muligheder - såsom et forstørrelsesglas, der forstørrer dine billeder, når svævende? Sidstnævnte er især populær i e-handel.

Skærmbillede af brugergrænsefladedesignmønstre for unsplash
Miniaturevisning på unsplash.com

unsplash.com bruger en blanding af billedgalleri og lysbokse. Billederne vises dog ikke som miniaturer. Hvorfor? Unsplash er en platform, der kun tilbyder billeder til download. Det betyder, at brugerne skal være i stand til at vælge for eller mod billedet ret ved første øjekast. For at kunne træffe denne beslutning skal billedopløsningen være forholdsvis god. Miniaturer ville være for lille til det. Og hvis du klikker på hvert billede enkeltvis eller navigerer gennem et lysbilledshow, vil det minimere sidens effektivitet mange gange.

Gennem hele implementerings- og designprocessen må du aldrig tabe spørgsmålet om værdi/værdi og betydning af syne.

4. Spil sociale kanaler

Dette gælder for mønstre, der hjælper med at guide dine brugere til dine sociale mediekanaler og/eller gøre social interaktion lettere for dem. Detaljerede eksempler på dette kan findes Her Læse.

Konklusion

Endelig kan jeg anbefale to hoved tilgange. Først skal du besøge og analysere så mange hjemmesider som muligt for at samle inspiration: Hvordan har andre designere løst visse problemer eller ikke løst dem? Hvad frustrerer mig, når jeg surfer på nettet? Hvornår blev jeg sidst positivt overrasket – og hvorfor? 

For det andet, altid huske, at du ikke er brugeren. Besøgende på dit websted tænker overraskende anderledes end dig. Du kender måske ikke dit produkt endnu. Derfor udføre flere tests gentagne gange for at vurdere, hvad usability på dit websted faktisk er.

Hvilke spørgsmål har du til Sonja om UI Patterns?

Brug kommentarfunktionen. Du ønsker at blive informeret om nye stillinger og tips om webdesign og udvikling? Så følg os på KvidreFacebook eller via vores Nyhedsbrev.

Efter at have studeret spildesign og kreativ skrivning i grønne Auckland, Sonja Hoffmann har specialiseret sig i web- og appdesign og dets udvikling. Hendes fokus er på gamification og udforske brugernes motivation og dens erfaringer, kombineret med en passion og nysgerrighed for teknologiske tendenser.

Lignende artikler

Kommentarer til denne artikel

Skriv en kommentar

Din e-mailadresse vil ikke blive offentliggjort. Obligatoriske felter er * Markeret