UX bedste praksis: Sådan designer du scannelige appskærmbilleder

Redesigner HeyDoctors App Store-skærmbilleder

Lad os spille et spil. Vælg en app på din telefon, som du virkelig kan lide. Du er skaberen af ​​denne app og ønsker at rejse penge fra investorer. Du har et minut til at pitch din app til VC'er. Penge er klar til at få fat, men kun hvis du kan overbevise dem om 60 sekunder. Hvordan gør du det? Beskriv du hvad appen gør? Fortæller du, hvordan appen er unik i forhold til sine konkurrenter? Viser du, hvor god brugeroplevelsen er?

Det tager gennemsnitligt 7 sekunder for en bruger i App Store at beslutte sig for, om de vil downloade din app eller ej. En forskningsundersøgelse om downloadbeslutninger, der involverer 25.000 besøgende og 10.000 installationer, vurderede skærmbilleder som den næststørste grund til at installere, hvor vurderingen er i top.

Vi opdagede, at den gennemsnitlige tid, folk bruger på en butiksfortegnelse, er 7 sekunder. Faktum er, at langt de fleste mennesker forlader siden endnu hurtigere. Engagerede brugere hænger lidt længere, men de følger alle den samme proces: tjek ikonet, se de to første skærmbilleder og scan den første linje i appbeskrivelsen. - Peter Fodor, hvorfor 7 sekunder kan skabe eller ødelægge din mobilapp

Screenshots er et spejl af din apps brugerhistorier og afspejler brugerens oplevelse. Jeg studerede de 100 bedste apps og deres skærmbilleder ved hjælp af data indsamlet af de gode mennesker på Incipia. Jeg vil henvise til nøglefindinger fra flere undersøgelser her.

App i fokus: HeyDoctor

HeyDoctor er en app, der giver brugerne mulighed for at få medicinske recepter online uden behov for at besøge en primærlæge. HeyDoctor kan ordinere og genopfylde recepter for medicin lige fra prævention, hårvækst til behandling af urinvejsinfektioner, laboratorierapporter og mere. Du kan også få behandling i tilfælde af primærpleje som acne behandling, UTI, forkølelsessår behandling og mere. HeyDoctors mobilapp er blevet godt modtaget i App Store med 122 anmeldelser, der vurderer det til 4,7 stjerner.

Vi vil redesigne HeyDoctors skærmbilleder og lære om scannelige skærmbilleder.

Ansvarsfraskrivelse

Bemærk, at jeg ikke arbejder hos HeyDoctor, og synspunkter, der er udtrykt i denne casestudie, er strengt mine egne. I modsætning til designere, produktledere og alle, der er ansvarlige for at træffe vigtige beslutninger, der involverer design, der arbejder hos HeyDoctor, har jeg ikke adgang til analyser på brugerbasen og ser muligvis ikke på det komplette billede. Designbeslutninger kan baseres på forretningsmål, ressourceprioritering eller tekniske begrænsninger. Derfor er enhver uopfordret casestudie ikke udtømmende, og jeg antyder bestemt ikke, at HeyDoctor opgiver deres nuværende skærmbilleder og vedtager mit redesign.

Det aktuelle design

Vi skal arbejde på HeyDoctors iOS-app. Sådan ser de eksisterende skærmbilleder ud:

Det følger standardtitlen og undertekstopsætningen, som gør et godt stykke arbejde med at forklare appens brugerhistorier. Vi er ikke interesserede i at redesigne mærket eller brugergrænsefladen, så vi vil prøve at holde dem konsistente i vores redesign.

Brugerhistorier

Før vi graver ind og begynder at foretage visuelle ændringer, skal vi lære, hvad brugerne installerer HeyDoctor til, og hvad de søger efter, når de opdager denne app.

  1. Få recept og genopfyldning. Brugere søger at finde en nem måde at få deres recept og genopfyldning online uden behov for at besøge en læge.
  2. Få behandling for sygdom. Brugere søger, hvordan de får behandling af deres sygdom online.
  3. Tal med en primærlæge. Brugere vil tale med en læge, men de kan sandsynligvis ikke besøge en i øjeblikket på grund af tidsmæssige, økonomiske eller pendlende begrænsninger.
  4. Gør alle disse uden at involvere noget forsikringspapir. Brugere ønsker ikke at involvere deres medicinske forsikring, fordi de enten ikke har en, eller at deres copay er for højt.

Skærmbilleder eller miniaturer?

Skærmstørrelser er vokset med 72% siden den originale iPhone blev lanceret med 3,5-tommers skærm. Den gennemsnitlige skærmstørrelse på smartphones, der sælges i USA i 2018, er 5,5 tommer. Skærme er større end nogensinde, og produktdesignere udvikler sig konstant for at gøre brug af denne ekstra tilgængelige plads. Man skulle tro, at større skærme ville lokke designere til at lægge flere teksttekster på skærmbilleder. Men det, vi observerer, er tværtimod.

Vi observerede konsekvent, at færre end 4% af brugerne, der var på udkig efter en app, forstørrede stående skærmbilleder og kun 2% forstørrede landskabsskærmbilleder. For spillere er det endnu mindre på kun 0,5%. Dette skyldes sandsynligvis, at gameplayet normalt er klart nok selv fra miniaturer - Peter Fodor

Mindre end 4% af de mennesker, der kommer til din app-side, trykker på dine skærmbilleder.

Designere er begyndt at være opmærksomme på denne måling med en masse apps, der behandler deres skærmbilleder som miniaturer at kigge på i stedet for noget at tappe ind i. Brugere i 2016 kunne forventes at trykke på skærmbilledet for at læse tekst i det. Men med det nye appbutiks layout og større skærme tapper brugerne ikke længere på dine skærmbilleder.

Lad os se på nogle redesign af skærmbilleder fra 2016 til 2018. Bemærk, at næsten hver eneste af dem har færre ord og større skrifttyper.

Det magiske nummer 2

78 af de 100 bedste apps har fem skærmbilleder, 13 apps har fire skærmbilleder, 6 apps har tre skærmbilleder og 3 har kun to. Som udvikler ville du tænke dig at gå til fem skærmbilleder, fordi mere indhold er bedre, ikke? Forkert.

Kun 9% af brugerne ruller forbi de første to skærmbilleder. Landskabsskærmbilleder fungerer dårligere med 5%. Dette gør det bydende nødvendigt at lokke brugeren i de første to skærmbilleder selv. Fortæl dine brugere, hvad din app gør på den første skærm, og udvid det i de tilsvarende skærmbilleder.

Resultaterne af vores forskning gør det klart, at du SKAL forklare kernefordelen ved din app i de første to (iOS10, Google Play) eller tre (iOS11) skærmbilleder, hvis du bruger portrætbilleder. Hvis du virkelig vil bruge et landskabsbillede, har du kun et - Peter Fodor

Lad os undersøge de to første skærmbilleder af nogle populære apps.

Fremhævede UI-elementer

Brugere, der kigger på dine skærmbilleder, prøver at måle funktionerne i din app. Teksttekster hjælper dem med at forstå sammenhængen bag skærmene. Designere gør det endnu nemmere for brugerne ved at fremhæve UI-elementer, som tekstteksten forsøger at forklare.

Lad os se på nogle eksempler.

Læring

  1. Forklar den vigtigste brugerhistorie i din app i de to første skærmbilleder. Kun 9% af brugerne, der kommer til din appfortegnelse, ruller forbi de to første skærmbilleder.
  2. Forøg skriftstørrelsen og skar ned på tekst. Med større skærme bliver brugerne betinget af at scanne og kigge på skærmbilledet i stedet for at trykke på det og læse. Mindre end 4% af brugerne trykker på dine skærmbilleder for at læse det.
  3. Fremhæv UI-elementer, der repræsenterer teksttekster. Det gør det nemmere at scanne skærmbillederne og forbedrer skærmbilledets blikevne.

Nu hvor vi ved lidt om, hvordan man gør skærmbilleder mere læsbare, lad os begynde at anvende vores nøgleresultater på HeyDoctors skærmbilleder.

Trin 1: Opdater iPhone til de nyere generationer

HeyDoctors skærmbilleder bruger den ældre generation af iPhones. Selvom det ikke er en deal breaker, kan jeg godt lide mine iPhones som mine apps. Opdateret og på fleek (undskyld).

Trin 2: Skær ned på tekst og gør den mere læselig

Vi vil prøve at gøre billedteksterne lidt mere læselige ved at angive brugerhistorierne i et kortfattet format. Vi fjerner også undertekster og beskrivelser for at imødekomme de større titler.

Det tredje skærmbillede viser appens indstillingsside, mens billedteksten taler om, hvordan appen ikke kræver en forsikringspolice. Lad os erstatte det med en mere relevant skærm. Jeg skal erstatte det med den første skærm, du ser, når du prøver at få recept i appen, hvilket indirekte antyder, at du ikke har brug for en forsikring for at komme i gang.

Trin 3: Fremhæv relevante UI-elementer

Som vi har lært ovenfor, fremhæver relevante UI-elementer, der refererer til billedteksterne, dem mere synlige og læselige. Det hjælper også brugeren med at scanne skærmbilledet lettere.

Chat UI

Lad os se, hvordan Tinder fremhæver deres brugergrænseflade:

Det bruger klogt profilbilleder og chatbobler med brandelementer som farver til at efterligne sin ægte chat-brugergrænseflade.

Lad os prøve at gøre noget lignende:

Lad os indsætte dette aktiv i skærmbilledet:

Jeg forsøgte at integrere HeyDoctor's brand i chatboblerne. Jeg følte ikke behovet for at inkludere profilbilleder, fordi læger, som du taler med i appen, ikke har et profilbillede.

Kort og skygge

Lad os se på, hvordan Uber fremhæver deres UI-elementer.

Jeg elsker denne minimale måde at fremhæve UI-elementer med kort og dropskygger på. Vi skal bruge denne stil til at fremhæve nogle elementer i vores skærmbilleder.

Jeg besluttede at skifte billedtekst under telefonen, så brugeren ser det fremhævede UI-element, før de læser billedteksten.

Trin 4: Kosmetiske ændringer

Vi har foretaget flere ændringer i vores skærmbilleder for at optimere til scannbarhed. Lad os nu få det til at se bedre ud. Godt visuelt design kan være en utrolig lokke for brugerne, og det bør ikke ignoreres, når skærmbilleder redesignes.

Tilføj perspektivskærme

Isometriske skærme ser moderne og polerede ud. Du kan se isometriske telefoner næsten overalt fra Apples perfekt gengivne produktreklamer til højpolerede mockups på Dribble (vanvittigt at tro, at Dribble oprindeligt blev startet som et websted for at dele WIP-designprototyper på lavt niveau!)

Jeg stillede et par perspektiver fra skærmene til rådighed for os.

Jeg vælger den første perspektivmodel og deler den i to skærmbilleder, fordi vi kun har 3 skærmbilleder i øjeblikket, og vi kan tilføje op til 5 i App Store.

Jeg tilføjede en billedtekst til den første side - "Din personlige læge". Let at læse, opsummerer hvad appen gør og kortfattet.

Skift baggrundshældning

Kontrasten mellem baggrunden og forgrunden er lidt for hård for mig lige nu. Lad os ændre det til en lysere blå nuance.

Vi laver en gradient med de nye farver, vi vælger.

Lad os se, hvordan dette ser ud i vores skærmbilleder.

Jeg vil tilføje nogle kamme lige under teksten, så den fungerer som en differentiator mellem teksten og telefonen.

Jeg var i stand til at fange en kølig isometrisk vektor fra internettet. Lad os bruge det til at lave det sidste skærmbillede.

Endelige design

Før

Efter

Konklusion

Alt i alt lavede vi lidt over fire små iterative justeringer. Men det endelige resultat er skærmbilleder, der er lette at se over og føle sig moderne. Desuden krævede ingen af ​​disse justeringer en medfødt kunstnerisk færdighed. At studere en håndfuld apps i App Store hjalp os med at vide, hvilke problemer vi skulle se efter.

Tak for læsningen! Dette var et sjovt weekendprojekt for mig, og jeg nød at skrive om det her. Forhåbentlig gav dette indlæg dig et indblik i tilstanden af ​​skærmbilleder i appbutikken. Du er velkommen til at give feedback eller stille spørgsmål, du har i kommentarfeltet nedenfor.