5 UX-principper, du skal overholde for et fantastisk UX-design

Will Grant, en UI / UX-ekspert og en digital produktdesigner, forklarer de 5 principper, du skal følge for at sikre en god brugeroplevelse.

1. Brug ikke mere end to skrifttyper

Kun amatører kalder skrifttyper "skrifttyper", ved du? "Korrekt" designfagfolk kalder dem "skrifttyper" Skrifttyper er filerne på enheden, som softwaren bruger til at gengive skrifttypen. Skrifttyper er malingen på paletten, mens skrifttypen er mesterværket på lærredet.

Uanset alt for ofte tilføjer designere for mange skrifttyper til deres produkter. Du skal sigte mod at bruge maksimalt to skrifttyper: den ene til overskrifter og titler og den anden til kropskopi, der er beregnet til at blive læst.

Brug vægte og kursiv i denne fontfamilie til vægt - i stedet for at skifte til en anden familie. Dette betyder typisk, at du bruger din virksomheds brandtype som overskrift, mens du forlader kontrollerne, dialogerne og kopien i appen (som skal være klart læselig) i et mere bevist, læsbart skrifttype.

Brug af for mange skrifttyper skaber for meget visuel "støj" og øger den indsats, som brugeren har til at gøre for at forstå visningen foran dem. Derudover er der mange specialdesignede brandtypeformer, der ofte laves med stødende visuel påvirkning i tankerne og ikke læsbarhed.

2. Brugere har allerede skrifttyper på deres computere, så brug dem

Ja, din virksomheds brandtype er dejlig. Det er så legende og charmerende, men det tager yderligere tre sekunder at indlæse siden, da skrifttypen skal downloades fra serveren og gengives - og intet vises, før den indlæses - der gør dine brugere skøre.

Det er fint at medtage tilpassede displayfonte til overskrifter og titler; det hjælper med at mærke produktet og tilføjer visuel interesse. Imidlertid er brug af brugerdefinerede skrifttyper til kropskopi generelt en dårlig idé.

Først og fremmest skal disse skrifttyper indlæses et eller andet sted, hvad enten det er Google-skrifttyper, Typekit eller din egen CDN. Det betyder, at der er en overhead i at få fontfilerne ned på brugerens maskine. Indholdstunge sider går ofte i stykker, mens de korrekte skrifttyper downloades og gengives - den frygtede flash af unstyled indhold eller Flash af unstyled tekst (FOUC) (https://da.wikipedia.org/wiki/Flash_of_unstyled_content).

For det andet, hvis du specificerer vilde og vidunderlige kropskopi-skrifttyper, tror du, at du udøver en vis kontrol over slutresultatet, skal du tænke igen. Responsivt design og 1.000'erne af forskellige enheder ude i naturen betyder, at dine sider ser lidt anderledes ud for alle.

Uanset om din bruger er på en telefon eller et skrivebord, Windows eller Mac (eller Linux), har de nogle smukke, meget læsbare skrifttyper, der allerede er installeret og venter på at blive brugt. "System font stack" er en CSS-regel, der fortæller moderne browsere at gengive typen i det system-native skrifttype.

I de fleste tilfælde får brug af systemindfødte skrifttyper sider til at vises hurtigere, og typen ser skarpere og mere læsbar ud.

Font-family:
   æble-systemet
   BlinkMacSystemFont
   Segoe UI
   Roboto
   Oxygen-Sans
   Ubuntu
   Cantarell
   Helvetica Neue
   sans serif

Brug venligst bare systemtypestakken.

Brug typestørrelse til at afbilde informationshierarki

Dette er en enkel, men effektiv metode til at organisere dine synspunkter og gøre dem øjeblikkeligt forståelige for en lang række brugere. Lad os se på et eksempel på, hvordan man ikke gør dette i en forestillet “Kalender” -appbrugergrænseflade:

Ved blot at ændre typestørrelsen med en mærkbar faktor, kan vi først vise brugeren de mest relevante oplysninger:

Skaler de oplysninger, du vil have brugere til at se først, eller at du tror, ​​de finder de mest nyttige, og de kan læse videre for yderligere detaljer. Dette er grunden til, at mange nyheder og faktajournalistik afvikler sig i dette format:

Overskrift, der fortæller dig noget

Undertekst, der tilføjer kontekst og stiller flere spørgsmål

Dette er kropseksemplet, der udvides til historien ved gradvis at tilføje detaljer gennem kopien. Fortsæt med at læse til slutningen for at lære mindre og mindre vigtige detaljer.

Den nøjagtige samme teknik kan bruges i brugergrænsefladedesign med stor effekt.

Bemærk
Pro-tip: Find en balance, og overdriv ikke. Hvis for mange elementer på siden er store, mister de enhver fornemmelse af hierarki og vægt.

Brug en fornuftig standardstørrelse til kropskopi

Dine kunder læser en masse tekst på tværs af din app eller dit websted, så hvor stor skal typen være?

Dage med fast størrelse er længe gået. De fleste browsere på desktop og mobil giver brugerne mulighed for at skalere typen op og ned, skifte til "læsetilstand" og anvende systemdækkende tilgængelighedsindstillinger, som f.eks. Store farver og høj kontrastfarver.

Med det i tankerne er alt, hvad du gør her, at indstille standardtypestørrelsen, der vises, når produktet først åbnes. Ideelt set skal typen være stor nok til at være læsbar, men ikke så stor, at den overvælder brugeren eller optager for meget plads i en overfyldt udsigt.

Kropskopi i 16px, med en 1,5 liniehøjde og "auto" eller "standard" tegnafstand, er normalt et sikkert spil og en god standard for langt de fleste af dine brugere.

Det er normalt unødvendigt at prøve at indstille din egen karakterafstand for kropskopi, fordi browseren vil gøre et bedre job med tekst gengivelse end du kan.

Brug en ellipsis til at indikere, at der er et yderligere trin

Hvis din bruger ser en "Fjern" -knap, hvordan ved de, om de trykker på den:

· Fjern den "ting", de ser på?

· Spørg hvilken “ting” der skal fjernes?

· Spørg dem, om de virkelig ønsker at fjerne "tinget"?

· Fjern alle deres ting med det samme?

Mærk knappen "Fjern ...", og brugeren har en god idé om, at der er et andet trin, før alle deres ting fjernes. De fleste brugere vil heraf udlede, at knappen er den første del af en flerdelsproces, og der vil være et andet trin til at bekræfte eller annullere handlingen. Hvis en kontrol kræver et ekstra trin for at udføre sin handling, skal du inkludere en ellipsis (...) i kontrollen:

Disse små prikker er et godt eksempel på usynligt design: de fleste brugere har aldrig engang bemærket dem, men de giver en subtil meddelelse, som en brugers oplevelse bygger over tid. De kommer ikke i vejen, og de "arbejder bare."

Hvis du nød at læse denne artikel, kan du tjekke 101 UX-principper af Will Grant for at udforske 101 måder at forbedre dine UX-designs på. Følgende i Jakob Nielsens og Don Normans fodspor er 101 UX Principles guide til UX-fagfolk, der dækker alt fra adgangskoder til planlægning af brugerrejsen.