Skab Fantastiske Brugeroplevelser: Guide til App-Design

Hvad Udgør Godt Mobilapp-Design?

I en verden, hvor mobilapps er blevet en uundværlig del af vores hverdag, er designet afgørende for en apps succes. En app kan være nok så funktionel og innovativ, men hvis brugeroplevelsen er dårlig, vil den sandsynligvis falde til jorden. God UX (User Experience) er det, der skiller de succesfulde apps fra de mindre succesfulde. Kunder vinde og tabes dagligt på grund af god eller dårlig brugeroplevelsesdesign. Det vigtigste at huske, når man designer en mobilapp, er at sikre, at den er både nyttig og intuitiv. Hvis appen ikke er nyttig, har den ingen praktisk værdi for brugeren, og ingen vil have en grund til at bruge den. Og selv hvis appen er nyttig, men kræver for meget indsats, vil folk ikke gider lære at bruge den. Godt design adresserer begge disse problemer: Det har et klart fokus på brugerens centrale mål og fjerner alle forhindringer fra brugerens vej ved at skabe klarhed i interfacet. Denne artikel vil dykke ned i syv centrale UX-designtips, der er afgørende for at skabe virkelig gode brugeroplevelser på mobile enheder.

Syv Principper for Effektivt App-Design

For at sikre en positiv brugeroplevelse, er der flere kernekomponenter, der skal være på plads. Disse principper fungerer som fundamentet for enhver succesfuld app.

1. Klar og Problemfri Brugerflow

Reducér den indsats, brugerne skal lægge for at opnå det, de ønsker. Brugere har ofte brug for hurtigt at udføre en kernefunktion i en mobilapp: foretage en betaling, tjekke for nye beskeder osv. Fokuser på brugerens centrale mål, og fjern alle forhindringer fra deres vej:

• Opdel komplekse opgaver i mindre, meningsfulde bidder.
• Prioriter handlinger på skærmen. Fremhæv kernehandlingen (som er direkte relateret til brugerens mål) og skjul alle sekundære handlinger.
• Aflast opgaver. Kig efter alt i designet, der kræver brugerindsats (f.eks. at læse tekst, indtaste data, træffe en beslutning), og søg alternativer. Kan du vise et billede i stedet for tekst, genbruge tidligere indtastede data i stedet for at bede brugeren om at skrive mere, eller bruge allerede tilgængelig information til at indstille en smart standardværdi?
• Design for afbrydelser. Uanset hvad du designer, bruges mobile enheder på farten. Tillad brugere at gemme deres tilstand og genoptage brugen af appen senere.
• Undgå at afbryde brugeren. Undgå at afbryde brugere ved at bede dem om at bedømme din app, hvis de lige har downloadet den. Vent i stedet, til de viser sig at være gentagne brugere, og de vil være mere tilbøjelige til at bedømme din app og give mere informeret feedback.

Fokus på brugerens mål er essentielt. Opdel komplekse opgaver i mindre aktiviteter. Disse mindre opgaver kan bedre opfylde brugerens mål. Tag for eksempel Lyft. De ved, at målet for deres brugere er at få en tur et sted hen. Appen overvælder ikke brugeren med for meget information: Den registrerer automatisk brugerens placering baseret på geolokaliseringsdata, og det eneste, brugeren skal gøre, er at vælge et afhentningssted.

Undgå login-mure. Login-mure er sider, der beder brugeren om at logge ind eller registrere sig for at fortsætte. En login-mur vises ofte, når en app startes for første gang, eller når en webside tilgås første gang. Husk, at tvungen registrering for tidligt kan få mere end 85% af brugerne til at forlade produktet. Soundcloud kræver, at deres brugere logger ind for at få adgang til appens indhold. Login-mure støder man ofte på ved betalingsprocesser i butikker. Designere af e-handelswebsteder og -apps tror, at brugere ved at logge ind vil kunne drage fordel af tidligere gemte kontooplysninger og dermed ikke behøver at indtaste oplysninger som deres leveringsadresse og kreditkortnummer. Selv Amazon har dette problem – tjenesten tilbyder ikke en gæstebetalingsmulighed. Registreringsmuligheden kunne sandsynligvis sikkert erstattes af en gæstebetalingsmulighed. Indsaml data langsomt, efterhånden som brugeren bevæger sig gennem betalingsprocessen, og bed om en adgangskode med incitamentet fra en kuponkode efter køb, som Smashing Magazine gør.

2. Usynlig Brugerflade

Gør indholdet til brugerfladen. Indhold er det, der giver værdi i de fleste apps. Uanset om det er et socialt feed, nyhedsopdateringer, en to-do-liste eller noget mere teknisk, som et systemdashboard, er indhold grunden til, at folk er der! Derfor er det kritisk at fokusere på indholdet og fjerne unødvendige elementer, der ikke understøtter brugerens opgaver. I betragtning af deres reducerede opmærksomhedsspændvidde, bør brugerne hurtigt guides til det indhold, de søger. Indhold bør være brugerfladen.

Google Maps er et godt eksempel. Ved sin redesign fjernede Google alle unødvendige paneler og knapper med den begrundelse, at kortet er brugerfladen. Kort-design er et andet mønster, der kan bruges som brugerflade. Kort er en god måde at vise handlingsorienteret indhold på, fordi de lader indhold afsløre sig selv naturligt. Et eksempel på en almindelig tilgang ville være Swiss Airs app. I billetpristabellerne bliver hver række et kollapset harmonika, som kan åbnes efter behov. Flipboard er et andet godt eksempel på kort i en brugerflade. Flipboard er et personligt magasin, der samler indhold fra nyhedsfeeds og sociale medier, hvilket giver dig mulighed for at opdage og dele historier.

3. Åndehuller og Luft

Brug hvidt rum (negativt rum) til at henlede opmærksomheden på vigtigt indhold. Hvidt rum er det tomme område mellem og omkring elementerne i et design og bliver ofte overset. Selvom nogle designere betragter det som spild af værdifuld plads, er det et essentielt element i mobildesign. Jan Tschichold siger: "Hvidt rum skal betragtes som et aktivt element, ikke en passiv baggrund."

Skær støjen væk. Støj overbelaster en brugerflade med for meget information. Hver tilføjet knap, billede og tekstlinje gør skærmen mere kompliceret. Som Antoine de Saint-Exupéry berømt sagde: "Perfektion opnås, når der ikke er mere at tage væk." Fjern alt i et mobildesign, der ikke er absolut nødvendigt, da reduktion af støj vil forbedre forståelsen. En simpel tommelfingerregel er én primær handling pr. skærm. Hver skærm, du designer til appen, bør understøtte én enkelt handling af reel værdi for personen, der bruger den. Dette gør den nemmere at lære, nemmere at bruge og nemmere at tilføje til eller bygge videre på, når det er nødvendigt.

Prioriter indhold. Hvidt rum bidrager i høj grad ikke kun til læsbarhed og indholdsprioritering, men også til det visuelle layout. Derfor kan det forenkle UI og forbedre UX.

4. Simpel Navigation

Navigation bør inspirere brugere til at engagere sig og interagere med det indhold, du leverer. At hjælpe brugere med at navigere bør være en høj prioritet for enhver app. Mobilnavigation skal være opdagelig og tilgængelig og optage lidt skærmplads. Det er dog en udfordring at gøre navigation tilgængelig på mobil på grund af begrænsningerne på den lille skærm og behovet for at prioritere indhold over "chrome" (de visuelle elementer, der ikke er selve indholdet).

Tag et par generelle tommelfingerregler i betragtning, når du designer et navigationssystem til en mobilapp:

• Kend dine brugere. Navigationen skal imødekomme behovene hos flertallet af din apps brugere. Hver målgruppe forventer en bestemt type interaktion med din app, så lad disse forventninger arbejde til din fordel.
• Prioriter navigationsmuligheder. Tildel forskellige prioritetsniveauer (høj, medium, lav) til almindelige brugeropgaver. Giv fremtræden i UI til stier og destinationer med høje prioritetsniveauer og hyppig brug. Brug disse stier til at definere din navigation.
• Gør den synlig. Som Jakob Nielsen siger, er det lettere at genkende noget end at huske det. Minimer brugerens hukommelsesbelastning ved at gøre handlinger og muligheder synlige. Navigationen skal altid være tilgængelig, ikke kun når vi forventer, at brugeren har brug for den.
• Udnyt visuel kommunikation. Ikoner og andre grafiske elementer bør hjælpe brugerne med at forstå menuindstillingerne. Tænk på indkøbskurv-ikonet; det tjener som en identifikator til at afslutte et køb eller se varer. Brugere behøver ikke at tænke over, hvordan de navigerer for at foretage et køb; dette element guider dem til den passende handling.
• Kommuniker den aktuelle placering. "Hvor er jeg?" er et grundlæggende spørgsmål, som brugerne har brug for svar på for effektivt at kunne navigere. Manglende angivelse af den aktuelle placering er et almindeligt problem i mange apps. Tænk på placeringsindikatorer.
• Gør det nemt at interagere. Gør menupunkter store nok til nemt at kunne trykkes på. Elementer, der er for små eller for tæt på hinanden, er en stor kilde til frustration for mobile brugere.
• Mål brugerengagement og fastholdelse. Engagement er det første, du har brug for til dit produkt, fordi det er her, de fleste virksomheder rent faktisk tjener penge. Sørg for at måle appens succes med fastholdelse af brugere over tid.

Selv designere, der er bekendt med alle disse regler, ender stadig med at skabe menuer, der er forvirrende, svære at manipulere eller simpelthen svære at finde. Navigations-UI-mønstre er en genvej til god brugervenlighed. Lad os se på nogle eksempler:

• Toggle Menu (Hamburger Menu): Det er fristende at stole på menukontroller for at forenkle en mobil brugerflade – især på en lille skærm. Men at skjule kritiske dele af en applikation bag disse menuer kan hæmme brugen. Skjult navigation reducerer engagement, sænker udforskning og forvirrer folk. At eksponere menupunkter på en mere synlig måde øger engagement og tilfredshed.
• Tab Bar: Tab bars og navigationsbjælker er velegnede til apps med relativt få navigationsmuligheder. Mønsteret er adopteret på både iOS og Android. Tabs er fantastiske, fordi de viser alle større navigationsmuligheder fremadrettet, og med et enkelt tryk kan brugeren øjeblikkeligt gå fra én visning til en anden. Til denne type navigation anbefales det kraftigt at bruge labels til navigationsmuligheder. Gør ikke navigation til et gættespil.
• Segmenteret Kontrol: Hvis der kun er et par destinationer, kan du bruge segmenteret kontrol. Ligesom med en tab bar er alle muligheder synlige på én gang og kan tilgås med et enkelt tryk.
• Fuldskærmsnavigation: Det lyder måske modstridende med det, jeg sagde om at spare skærmplads, men fuldskærmsnavigation kan være et godt valg. Grundlæggende er det en side (normalt hjemmesiden), der viser alle navigationsmuligheder. Selvom du ikke kan vise noget indhold, er fuldskærmsnavigationsmønsteret godt for enkelhed og sammenhæng. Når brugeren har besluttet, hvor de vil hen, kan du dedikere hele skærmpladsen til indholdet. Denne type navigation fungerer godt i opgavebaserede websteder og apps, hvor brugere er fokuseret på at udføre en meget specifik opgave (f.eks. check-in til et fly eller ændring af indstillingerne på deres telefon) eller hvor de begrænser sig til én gren af navigationshierarkiet under en enkelt session (f.eks. hvis de er interesserede i en bestemt service eller et produkt). Denne type navigation er god, når du har et hierarkisk trænavigation – for eksempel, når du har en menu med syv primære muligheder, og hver mulighed indeholder lag af underkategorier.
• Søgefelt: Hvis søgning er en nøglefunktion i din app, skal den være foran brugerne. Skjul den ikke. Enten vis den øverst på skærmen, eller hav en synlig reference (et forstørrelsesglasikon), der aktiverer søgetilstand.

5. Enhåndsbetjening

Tilpas dit design til store skærme. Med udgivelsen af iPhone 6 og 6 Plus er det blevet klart, at skærmstørrelserne vil fortsætte med at udvide sig. Her er tre grundlæggende måder, folk holder deres telefon på:

Ifølge forskning af Steven Hoober bruger 85% af brugerne deres telefon med én hånd. Følgende varmekort viser tommelfingerzonerne for hver iPhone-skærmstørrelse siden 2007. Du kan se, at jo større skærmen er, jo mindre af skærmen er let tilgængelig.

Tilpas dit design for at forbedre brugeroplevelsen. Sørg for, at din app nemt (og fuldt ud) kan bruges på en stor skærm (som en iPhone 6 eller 7) med én hånd. Placer top-niveau menuen, ofte brugte kontroller og almindelige handlingspunkter i den grønne zone på skærmen, som er komfortabelt nået med en tommelfinger. Placer destruktive handlinger (som slet og fjern) i den svært tilgængelige røde zone, fordi du ikke ønsker, at brugerne utilsigtet trykker på dem.

6. Hastighedsopfattelse

Lad være med at få brugere til at vente på indhold. Selvom en øjeblikkelig respons er bedst, er der tidspunkter, hvor din app ikke vil kunne opfylde standardretningslinjerne for hastighed. En langsom respons kan skyldes en dårlig internetforbindelse, eller en operation kan tage lang tid (f.eks. installation af en opdatering til operativsystemet). Gør appen så hurtig og responsiv som muligt.

• Skeleton Screens (Skeletskærme): Lad folk vide, at tingene vil tage tid, ved at bruge en statusindikator. Når det er sagt, mens intentionen bag en statusindikator er god, kan resultatet være dårligt. Som Luke Wroblewski nævner, "Statusindikatorer kalder per definition opmærksomhed på det faktum, at nogen skal vente. Det er som at se uret tikke ned – når du gør det, ser tiden ud til at gå langsommere." Der er et godt alternativ til statusindikatorer: skeletskærme. Disse containere er essentielt en midlertidigt blank version af siden, hvori information gradvist indlæses. I stedet for at vise en indlæsningsindikator, brug en skeletskærm til at fokusere på den faktiske fremgang og skabe forventning til det, der kommer. Dette skaber en fornemmelse af, at tingene sker øjeblikkeligt, da information gradvist vises på skærmen, og folk ser, at applikationen handler, mens de venter. Husk, at opfattelse kan være lige så vigtig som rå hastighed. Hvis en app giver brugerne noget interessant at se på, mens de venter, vil de være mindre opmærksomme på ventetiden. For at sikre, at folk ikke keder sig, mens de venter på, at noget skal ske, tilbyd en distraktion.
• Baggrundsoperationer: Gør ting i baggrunden for at få umiddelbare handlinger til at virke hurtige. Operationer, der er pakket ind i baggrundsoperationer, har to fordele: De er usynlige for brugeren, og de sker, før brugeren beder om dem. Et godt eksempel på denne teknik er processen med at uploade billeder i Instagram. Appen uploader billeder tidligt. Så snart brugeren vælger et billede at dele, begynder appen at uploade; og når brugeren er klar til at trykke på "Del"-knappen, er uploaden fuldført, og brugeren kan dele sit billede øjeblikkeligt.

7. Velrettede Push-notifikationer

Tænk dig om, før du sender en besked. Hver dag bliver brugere bombarderet med ubrugelige notifikationer, der distraherer dem fra deres daglige aktiviteter, og det bliver direkte irriterende. Irriterende notifikationer er den primære årsag til, at folk afinstallerer mobilapps (ifølge 71% af de adspurgte i en undersøgelse).

Her er fire principper at huske, når du udformer brugercentrerede notifikationer:

• Mobil handler om at få hver besked til at tælle: Den mest almindelige fejl, du kan begå, når du sender push-notifikationer, og den mest skadelige på lang sigt, er at sende brugerne flere notifikationer, end de kan håndtere. Overvæld ikke brugere med push-beskeder, ellers kan de ende med at slette din app helt.
• Push-værdi: Når en bruger begynder at bruge din app, vil de ikke have noget imod at modtage notifikationer, så længe den værdi, de får, er tilstrækkeligt større end afbrydelsen. Send ikke push-notifikationer blot for at "engagere brugere". For eksempel sender Facebook rutinemæssigt notifikationer, der inviterer brugere til at forbinde sig med tilfældigt foreslåede personer eller til at "Finde flere af dine venner på Facebook". Dette er et dårligt forsøg på at dirigere brugere tilbage til appen. Desuden afbryder det brugere med irrelevante alarmer. Personalisering af indhold for at inspirere og glæde er kritisk. Netflix bruger omhyggeligt visningsdata til at præsentere anbefalinger, der føles skræddersyede.
• Timing af dine notifikationer: At tilpasse dine notifikationer til brugere handler ikke kun om, hvad du siger, men også hvornår du siger det. Send ikke push-notifikationer på mærkelige tidspunkter. En dårligt timet notifikation sendt mellem kl. 00:00 og 06:00 risikerer at vække eller forstyrre brugere. Selvfølgelig kunne brugere altid deaktivere notifikationer, mens de sover, men det er ikke en god løsning. En reel løsning ville være at sende notifikationer på tidspunkter, der ville være mest bekvemme for brugerne, medmindre det er kritisk at informere dem om noget med det samme. Ifølge comScore er et godt tidspunkt for push-notifikationer mellem kl. 18:00 og 22:00. Send altid push-notifikationer i henhold til brugerens tidszone.
• Diversificer din kommunikation: Den mest effektive mobile kommunikationsstrategi er at bruge forskellige beskedtyper: push-notifikationer, e-mail, in-app-notifikationer og feed-opdateringer. Diversificer din kommunikation – dine beskeder bør arbejde sammen i perfekt harmoni for at skabe en fantastisk brugeroplevelse.

De 7 Principper for App-Design Opsat

Følgende principper definerer, i prioriteret rækkefølge, de mest vitale elementer i en god brugeroplevelse for app-brugere. Uanset om du udvikler apps til mobil eller web, er disse regler, du altid bør have i tankerne:

Konklusion

Som med ethvert andet designelement er de tips, der er delt her, kun en start. Sørg for at blande og matche disse ideer med dine egne for de bedste resultater. Husk, at design ikke kun er for designere – det er for brugerne. Betragt din app som et stadigt udviklende projekt, og brug data fra analyser og brugerfeedback til konstant at forbedre oplevelsen.

Hvis du vil læse andre artikler, der ligner Skab Fantastiske Brugeroplevelser: Guide til App-Design, kan du besøge kategorien Teknologi.