Indholdsfortegnelse
I dag er en virksomheds eller organisations webtilstedeværelse meget mere end blot en samling websider eller en cool app. Den fungerer i bund og grund som en erstatning for den primære interaktion mellem forbrugere og skaberne. Derfor er det så vigtigt at sikre, at interaktionen med dit publikum og målmarked forløber så gnidningsløst som muligt.
Det er her, brugergrænsefladerne kommer ind i billedet.
UI-design er processen med at skabe grænseflader i software eller computerudstyr med fokus på udseende og stil. Det endelige mål er at skabe design, som brugerne vil finde let at bruge.Derfor er et godt UI-design ikke kun vigtigt for at give brugerne et godt førstehåndsindtryk, men også for at konvertere potentielle kundeemner til kunder og efterfølgende fastholde disse kunder.
Det kan virke skræmmende i starten. Du skal dog ikke være bekymret! Vi har samlet og sammensat en liste over de 7 vigtigste ting, du skal huske, når du skaber brugergrænseflader. Disse designtips, som stammer direkte fra forskning inden for Human-Computer Interaction (HCI), har vist sig at være effektive for hundredvis af designere på tværs af mange industriområder.
Med disse enkle og ligetil designtips kan du endelig sætte dine brugere i centrum!
Designtip nr. 1: Kend og forstå dine brugere
Du skal først og fremmest vide, hvem dine brugere er. Du skal kende dem som din egen bukselomme. Hvad betyder det?
Det betyder, at du skal forstå alle de demografiske data, som dine analyseværktøjer kan trække ud af. Det er naturligvis en sikkerhed, men vigtigere er det at vide, hvad brugerne har brug for, og hvordan du kan hjælpe dem med at nå deres mål.Før de begynder at designe en grænseflade, skal designere grundigt forstå, hvad deres rolle er i at hjælpe brugerne med at opnå det, de har brug for, og sikre, at brugerne når deres mål på den mest effektive måde. Attributter for deres centrale demografi såsom alder, køn, type indhold, der forbruges, tid brugt på webstedet er alle afgørende datadrevne oplysninger, der vil bestemmeden bedste måde at designe en brugergrænseflade til disse slutbrugere på.
Begynd derfor at indsamle og analysere data, og tøv ikke med at kontakte dine brugere direkte for at finde ud af, hvordan du kan prioritere dit design for dem.
Designtip nr. 2: Definer, hvordan brugerne vil interagere med den valgte grænseflade
Når du kender dine brugere, skal du vælge den platform, du skal designe en grænseflade til. Er det en telefon eller en bærbar computer? Eller en stationær computer? Eller måske endda et Apple Watch? Uanset hvad det er, skal du være sikker på det, før du går i gang med at designe noget som helst.
Når det er klart, skal du definere, hvordan brugerne rent faktisk vil bruge grænsefladen. Foretrækker dine brugere at bruge berøringsteknikker mere end at skrive? Bruger de normalt stemmekommandoer?
Tag for eksempel Tinder, hvor brugergrænsefladen er fokuseret på generel brugervenlighed ved at gøre det muligt blot at stryge til højre eller venstre på de viste profiler.
Men selv det kan gå galt nogle gange...
Det er naturligvis vigtigt at vide, hvordan du ønsker, at brugerne skal bruge grænsefladen.
Brugerne interagerer med websteder og apps på to grundlæggende måder: direkte (ved at interagere med produktets brugerfladeelementer) og indirekte (ved at interagere med brugerfladeelementer uden for produktet).Hvad er direkte interaktioner?
- Tryk på en knap
- Strygning på en skærm
- Trække emner med fingrene
Hvad er indirekte interaktioner?
- Brug af tastaturkommandoer/genveje
- Pegning og klik med en mus eller en stylus
- Indtastning i et formularfelt eller dokument
Her er målet at fokusere på, hvem brugerne er, hvilke enheder de bruger, og hvordan de interagerer med disse enheder. Du ville ikke have swiping-funktioner, hvis dine slutbrugere er seniorer med begrænsede tekniske evner. På samme måde bør du ikke glemme at indarbejde tastaturgenveje, hvis du designer til programmører eller tekstforfattere, som er meget afhængige af dem for at reducere tidsforbruget.
Designtip nr. 3: Kommunikér klart og tydeligt og sæt forventninger
Enhver interaktion på en app eller et websted har et resultat. En konsekvens af handlingen, om du vil. Afhængigt af hvad knappen er, kan et klik på en knap føre til, at du foretager en finansiel transaktion, deler din placering eller laver en morsom kommentar til din vens Facebook-billede. Mulighederne er uendelige.
Derfor er det vigtigt at kommunikere til brugerne, hvad hver enkelt komponent i brugergrænsefladen præcist gør, og hvad den efterfølgende virkning vil være.
Du kan gøre det på følgende måder:
- Fremhæv den knap, der svarer til det, brugeren helst vil have, f.eks. "Køb nu"-knappen på e-handelswebsteder.
- Brug symboler, f.eks. en papirkurv til at slette noget eller en diskette til at gemme et objekt
- Brug farver. Rød gør opmærksom på noget vigtigt eller på at stoppe, mens grøn betyder "af sted".
- Skriv en klar tekst til knapperne. Beskriv, hvad knappen skal gøre på en enkel og kortfattet måde.
- Giv advarsler eller spørg om bekræftelse, og sætninger som "Er du sikker?" hjælper langt!
Twitters brugergrænseflade er et eksempel på et simpelt brugervenligt design, hvor brugerne tiltrækkes af "Tweet"-knappen
Designtip #4: Placering og størrelse af elementer
Jo tættere eller større et element er, jo hurtigere kan brugeren nå frem til det for at klikke eller trykke på det. Det er ret enkelt: Hvis det er let at se og stort, vil folk hurtigt kunne nå det.
Dette er blot en forenklet version af Fitts' lov, et princip for interaktion mellem menneske og computer (HCI), der siger, at: "Tiden til at nå et mål er en funktion af afstanden til og størrelsen af målet."Derfor skal designere gøre "klikmål" store og placere dem på en effektiv måde, hvor de er bedst egnet. De skal også sørge for, at de mest almindelige handlinger som køb, lagring og deling er store og fremtrædende på siden. En lillebitte "Køb nu"-knap, før du ser produktet, ville ikke give nogen som helst mening. Disse designtips understreger, at man skal vide, hvad der er vigtigt, og hvor det skal placeres.
Disse principper for brugergrænsefladedesign er afgørende, fordi brugerne nu overvældes af information og skal guides gennem processen ved hjælp af disse teknikker. Det er også meget vigtigt med typografi, lister og menuer, hvor utilstrækkelig plads kan få brugerne til at klikke på de forkerte knapper.
Hav altid din interaktionsmodel i baghovedet. Hvis brugerne scroller lodret, skal du indarbejde det i din brugerdesignfilosofi for at kunne give effektive signaler og elementer.
Denne brugergrænseflade, der er oprettet med Vectornator, illustrerer effektiv brug af knappernes placering, størrelse og farve til at lede brugerne.
Designtip nr. 5: Gør din grænseflade let at lære
Hvad er bedre end at designe noget, som brugerne lærer efter blot én gang at have brugt det? Hvis du er designer, praktisk talt ingenting.
Jo enklere noget er, jo nemmere er det at lære og huske det på kort sigt. Man skal ikke være videnskabsmand for at regne det ud, men alligevel er der så mange grænsefladedesigns, der ikke formår at klare dette. Så prøv altid at bryde det indhold/den information, du giver brugeren, ned i små og fordøjelige bidder, som vil have en større genkaldelsesværdi. Du kan gøre dette ved at eksperimentere med dingrænseflade for at finde den mest effektive og effektive designiteration.
Tinders brugergrænseflade er et perfekt eksempel på en brugerflade, der er nem at lære.
Vi kender alle følelsen af at åbne Microsoft Word eller Excel og se de mange værktøjer, der er tilgængelige for os, men kun ender med at skrive eller indtaste data og kun bruge nogle få af disse værktøjer og teknikker. På trods af deres popularitet er Word og Excel ikke gode til at designe en god brugergrænseflade, hvilket ofte gør brugerne overvældet over, hvilke værktøjer de skal finde hvor.
Dette førte til noget, der er kendt som progressiv afsløring. Det er, når avancerede funktioner er gemt væk på sekundære grænseflader. Det betyder, at kun de mest nyttige værktøjer er let tilgængelige og nemme at få adgang til, hvilket øger enkelheden. Dette ses ofte på hjemmesider, hvor en kortfattet tekst introducerer et produkt eller en funktion, hvorefter den leder brugerne via et link videre til en side, hvor de kanLæs mere. Dette er en bedste praksis for mobildesign, hvor brugernavigation altid er en presserende udfordring for designere.
Designtip nr. 6: Udnyt dine data
Flotte designs er ikke alt. Uanset hvor æstetisk tiltalende din brugergrænseflade er, vil dine kunstneriske designtalenter være spildt, hvis de ikke optimeres ved hjælp af data.Selvfølgelig er brugertest, forskning og undersøgelser utrolig vigtige for at træffe beslutninger om brugergrænsefladedesign, men data indsamlet efter lanceringen af et nyt produkt eller nye funktioner er uvurderlige. Du har nemlig troværdige oplysninger om, hvor effektiv din designstrategi er. Er det let for brugerne at navigere fra startskærmen til produktsiden? Hvor mange konverteringer er duEr salget steget efter gennemførelsen af et nyt design?
Der er ingen mangel på værktøjer derude, som hjælper dig med at overvåge de handlinger, som brugerne foretager på dit websted, deres adfærdsmønstre, sessionstider, trafikkilder m.m. Disse indsigter er uvurderlige og kan ikke ignoreres.
Så opret analyser på dit websted og begynd at spore disse målinger regelmæssigt og brug denne viden til at designe bedre!
Designtip nr. 7: Giv feedback
Mennesker elsker fra naturens side at få feedback. Hvor rasende har du været, når dit fly bliver forsinket, og flyselskabet ikke fortæller dig noget, eller når du ikke kan spore din ordre og ikke ved, hvornår den kommer frem?
Digitale grænseflader fungerer på samme måde. Brugerne vil gerne vide, hvad der foregår, og hvad status er. Ville det ikke være irriterende for dig ikke at vide, hvorfor siden ikke indlæses, og om du skal trykke på opdatering, genstarte enheden eller bare gøre noget helt andet?Hold brugerne interesserede og afhængige med opdateringer om, hvad der sker. Brug indlæsningsikoner, giv tidsangivelser om, hvor lang tid noget kan tage, f.eks. "5 minutter til download er færdig" eller animationer, når der trykkes på en knap!
Tag dit UI-design til det næste niveau
Med disse designtips er du nu godt rustet til at skabe fantastiske brugergrænseflader, som dine brugere vil elske!
Vectornator er et grafisk designprogram, der hjælper dig med at komme i gang med din UI-skabelsesproces. Det er et vektorbaseret designværktøj, der passer til virksomheder, designere, studerende og begyndere og gør det muligt for dem at lave kraftfulde grænseflader til enhver applikation. Download Vectornator nu på din Apple-enhed og anvend vores inspirerende designtips
Du er velkommen til at stille spørgsmål, give feedback og dele dine idéer eller designtips med os! Vi er altid glade for at komme i kontakt med medlemmer af vores fællesskab.
Hvis du nyder at bruge Vectornator, så giv appen en bedømmelse og del din anmeldelse. Tak fordi du er en del af vores fællesskab! ❤️
