Hvordan designe søkbare skjermbilder av apper

Omdesign skjermbilder av HeyDoctor's App Store

La oss spille et spill. Velg en app på telefonen du virkelig liker. Du er skaperen av denne appen og ønsker å skaffe penger fra investorer. Du har et minutt til å tone appen din til VC-er. Det er penger å ta tak i, men bare hvis du kan overbevise dem på 60 sekunder. Hvordan gjør du det? Beskriver du hva appen gjør? Forteller du hvordan appen er unik sammenlignet med konkurrentene? Viser du hvor god brukeropplevelse er?

Det tar i gjennomsnitt 7 sekunder for en bruker i App Store å gjøre seg opp en mening om de vil laste ned appen din eller ikke. En forskningsstudie om nedlastingsbeslutninger som involverer 25 000 besøkende og 10 000 installasjoner, rangerte skjermbilder som den nest mest grunnen til å installere, med rangering som er helt topp.

Vi oppdaget at gjennomsnittlig tid folk bruker på en butikkoppføring er 7 sekunder. Faktum er at de aller fleste mennesker forlater siden enda raskere. Engasjerte brukere henger litt lenger, men de følger alle den samme prosessen: sjekk ikonet, se de to første skjermbildene og skann den første linjen i appbeskrivelsen - Peter Fodor, Hvorfor 7 sekunder kan lage eller ødelegge mobilappen din

Skjermbilder er et speil av brukerhistoriene til appen din og gjenspeiler brukeropplevelsen. Jeg studerte de 100 beste appene og skjermbildene deres ved å bruke dataene samlet av de gode menneskene på Incipia. Jeg vil referere til viktige funn fra flere studier her.

App i fokus: HeyDoctor

HeyDoctor er en app som lar brukere få medisinske resepter på nettet uten å måtte besøke en legebehandling i primæromsorgen. HeyDoctor kan forskrive og fylle på resepter for medisiner som spenner fra prevensjon, hårvekst til urinveisinfeksjonsbehandlinger, laboratorierapporter og mer. Du kan også få behandling for primærpleie tilfeller som kviser, UTI, forkjølelsessår og mer. HeyDoctor sin mobilapp er blitt godt mottatt i App Store med 122 anmeldelser som vurderer den til 4,7 stjerner.

Vi skal designe HeyDoctor-skjermdumpene og lære om skannbare skjermdumper.

Ansvarsfraskrivelse

Vær oppmerksom på at jeg ikke jobber på HeyDoctor og synspunkter som kommer til uttrykk i denne casestudien er strengt tatt mine egne. I motsetning til designere, produktledere og alle som er ansvarlige for å ta sentrale beslutninger som involverer design som jobber i HeyDoctor, har jeg ikke tilgang til analyser på brukerbasen og ser kanskje ikke på det fullstendige bildet. Designvedtak kan baseres på forretningsmål, ressursprioritering eller tekniske begrensninger. Derfor er uønsket casestudie ikke uttømmende, og jeg antyder absolutt ikke at HeyDoctor forlater sine nåværende skjermbilder og tar i bruk redesignet mitt.

“Gjør appen din flat” - en fyr. Meme-kreditter: @parasmael

Nåværende design

Vi kommer til å jobbe med HeyDoctor sin iOS-app. Slik ser de eksisterende skjermbildene ut:

Den følger standard tittel og undertitteloppsett som gjør en god jobb med å forklare appens brukerhistorier. Vi er ikke interessert i å redesigne merkevaren eller brukergrensesnittet, så vi vil prøve å holde dem konsistente i vår omdesign.

Brukerhistorier

Før vi graver inn og begynner å gjøre visuelle endringer, må vi lære hva brukere installerer HeyDoctor for og hva de søker etter når de oppdager denne appen.

  1. Få resepter og påfyll. Brukere er ute etter å finne en enkel måte å få resepter og påfyll på nettet uten å måtte besøke lege.
  2. Få behandling for sykdom. Brukere søker hvordan de kan få behandling for sykdommen sin på nettet.
  3. Snakk med en primærlege. Brukere ønsker å snakke med en lege, men de kan sannsynligvis ikke besøke en i øyeblikket på grunn av tid, økonomiske eller pendlebegrensninger.
  4. Gjør alle disse uten å involvere noen forsikringspapirer. Brukere ønsker ikke å involvere medisinsk forsikring fordi de ikke har en eller kopien deres er for høy.

Skjermbilder eller miniatyrbilder?

Skjermstørrelser har vokst med 72% siden den originale iPhone-en ble lansert med en 3,5-tommers skjerm. Gjennomsnittlig skjermstørrelse på smarttelefoner solgt i USA i 2018 er 5,5 tommer. Skjermene er større enn noen gang, og produktdesignere utvikler seg hele tiden for å benytte seg av denne ekstra tilgjengelige plassen. Man skulle tro at større skjermer vil lokke designere til å sette flere teksttekst på skjermbilder. Men det vi observerer er helt motsatt.

Vi observerte gjennomgående at færre enn 4% av brukerne som leter etter en app, forstørrer portrettskjermbilder, og bare 2% forstørrede landskapsskjermbilder. For spillere er det enda mindre på bare 0,5%. Dette er sannsynligvis fordi spillingen vanligvis er tydelig nok, selv fra miniatyrbilder - Peter Fodor

Mindre enn 4% av folkene som kommer til appsiden din trykker på skjermdumpene.

Designere har begynt å ta hensyn til denne beregningen med mange apper som behandler skjermdumpene sine som miniatyrbilder å kikke på i stedet for noe å tappe inn på. Brukere i 2016 kan forventes å trykke på skjermdumpen for å lese tekst i den. Men med det nye App Store-oppsettet og større skjermer, tapper ikke brukerne på skjermbildene dine lenger.

La oss se på noen redesign av skjermbilder fra 2016 til 2018. Legg merke til hvordan nesten alle av dem har færre ord og større skrifter.

The Magic Number 2

78 av de 100 beste appene har fem skjermbilder, 13 apper har fire skjermbilder, 6 apper har tre skjermbilder og 3 bare har to. Som utvikler vil du tenke å gå for fem skjermbilder fordi mer innhold er bedre, ikke sant? Feil.

Bare 9% av brukerne blar forbi de to første skjermbildene. Landskapsskjermbilder har dårligere resultater på 5%. Dette gjør det viktig å lokke brukeren i de to første skjermbildene. Fortell brukerne dine hva appen din gjør på den første skjermen, og utvid den med dem i de tilsvarende skjermbildene.

Funnene av forskningen vår gjør det klart at du må forklare kjernefordelen med appen din i de første to (iOS10, Google Play) eller tre (iOS11) skjermbilder hvis du bruker portrettbilder. Hvis du virkelig vil bruke et landskapsbilde, har du bare ett - Peter Fodor

La oss undersøke de to første skjermbildene av noen populære apper.

Fremhevede brukergrensesnittelementer

Brukere som ser på skjermbildene dine prøver å måle funksjonaliteten til appen din. Teksttekst hjelper dem å forstå konteksten bak skjermbildene. Designere gjør det enda enklere for brukere ved å fremheve brukergrensesnitt-elementer som tekstteksten prøver å forklare.

La oss se på noen eksempler.

lærdommen

  1. Forklar den viktigste brukerhistorien til appen din i de to første skjermbildene. Bare 9% av brukerne som kommer til appoppføringen din, vil bla forbi de to første skjermbildene.
  2. Øk skriftstørrelsen og kutt ned på tekst. Med større skjermer blir brukerne betinget av å skanne og se på skjermbildet i stedet for å tappe på det og lese. Mindre enn 4% av brukerne trykker på skjermbildene dine for å lese det.
  3. UI-elementer som representerer teksttekst, fremheves. Det gjør det lettere å skanne skjermdumpene og forbedre blikkens evne til skjermbildet.

Nå som vi vet litt om hvordan du kan gjøre skjermbilder mer lesbare, la oss begynne å bruke de viktigste funnene til HeyDoctor-skjermdumpene.

Trinn 1: Oppdater iPhone til de nyere generasjonene

Skjermdumpene til HeyDoctor bruker den eldre generasjonen iPhones. Selv om jeg ikke er noen avtale, liker jeg iPhonene mine som appene mine. Oppdatert og på flekk (beklager).

Trinn 2: Kutt ned på tekst og gjør den mer lesbar

Vi vil prøve å gjøre tekstene litt mer leselige ved å angi brukerhistoriene i et kortfattet format. Vi vil også gjøre unna undertittelen og beskrivelsene for å imøtekomme de større titlene.

Det tredje skjermbildet viser appens innstillingsside mens bildeteksten snakker om hvordan appen ikke krever forsikring. La oss erstatte det med en mer relevant skjerm. Jeg kommer til å erstatte den med den første skjermen du ser når du prøver å få resept i appen, noe som indirekte innebærer at du ikke trenger en forsikring for å komme i gang.

Trinn 3: Uthev relevant UI-elementer

Som vi lærte ovenfor, ved å markere relevante brukergrensesnittelementer som refererer til bildetekstene, blir de mer blanke og lesbare. Det hjelper også brukeren å skanne skjermdumpen lettere.

Chat UI

La oss se hvordan Tinder fremhever chat-brukergrensesnittet deres:

Den bruker på en smart måte profilbilder og chatbobler med merkeelementer som farger for å etterligne den virkelige chat-brukergrensesnittet.

La oss prøve å gjøre noe lignende:

La oss sette inn denne eiendelen i skjermdumpen:

Jeg prøvde å integrere HeyDokters merke i chatboblene. Jeg følte ikke behov for å ta med profilbilder fordi leger som du snakker med i appen ikke har et profilbilde.

Kort og drop Shadow

La oss se på hvordan Uber fremhever deres UI-elementer.

Jeg elsker denne minimale måten å fremheve UI-elementer med kort og skygger. Vi kommer til å bruke denne stilen for å understreke noen elementer i skjermdumpene våre.

Jeg bestemte meg for å skifte bildetekst under telefonen slik at brukeren ser det uthevede brukergrensesnittelementet før de leste bildeteksten.

Trinn 4: Kosmetiske endringer

Vi har gjort flere endringer i skjermbildene våre for å optimalisere for skannbarhet. La oss nå få det til å se bedre ut. God visuell design kan være en utrolig lokking for brukere, og den bør ikke ignoreres når du designer nye skjermbilder.

Legg til perspektivskjermer

Isometriske skjermer ser moderne og polerte ut. Du kan se isometriske telefoner nesten overalt fra Apples perfekt gjengitte produktreklame til høyt polerte mockups på Dribble (sprøtt å tro at Dribble opprinnelig ble startet som et nettsted for å dele lave nivåer WIP design prototyper!)

Jeg la et par perspektiver fra skjermene tilgjengelig for oss.

Jeg vil velge den første perspektivmodellen og dele den opp i to skjermbilder fordi vi bare har 3 skjermbilder for øyeblikket og vi kan legge til opptil 5 i App Store.

Jeg la en overskrift til den første siden - “Din personlige lege”. Lett å lese, oppsummerer hva appen gjør, og kortfattet.

Endre bakgrunnsgradient

Kontrasten mellom bakgrunnen og forgrunnen er litt for hard for meg akkurat nå. La oss endre den til en lysere nyanse av blått.

Vi lager en gradient med de nye fargene vi velger.

La oss se hvordan dette ser ut på skjermbildene våre.

Perfekt!

Jeg kommer til å legge til noen rygger rett under teksten, slik at den fungerer som en skille mellom teksten og telefonen.

Jeg var i stand til å hage en kul isometrisk vektor fra nettet. La oss bruke den til å lage det siste skjermbildet.

Endelige design

Før

Etter

Konklusjon

Alt i alt laget vi i overkant av fire små, iterative tweaks. Men det endelige resultatet er skjermbilder som er enkle å se over og føle seg moderne. Dessuten krevde ingen av disse justeringene en medfødt kunstnerisk ferdighet. Å studere en håndfull apper i App Store hjalp oss å vite hvilke problemer vi skulle se etter.

Takk for at du leste! Dette var et morsomt helgeprosjekt for meg, og jeg likte å skrive om det her. Forhåpentligvis ga dette innlegget deg et innblikk i tilstanden til skjermbilder i app store. Gi gjerne tilbakemelding eller still spørsmål du har i kommentarfeltet nedenfor.