Hoe scanbare app-screenshots te ontwerpen

Screenshots van de App Store van HeyDo opnieuw ontwerpen

Laten we een spelletje spelen. Kies een app op je telefoon die je echt leuk vindt. U bent de maker van deze app en wilt geld ophalen van investeerders. Je hebt een minuut om je app naar VC's te pitchen. Geld ligt voor het oprapen, maar alleen als je ze binnen 60 seconden kunt overtuigen. Hoe doe je het? Beschrijf je wat de app doet? Vertel je hoe de app uniek is in vergelijking met zijn concurrenten? Laat je zien hoe goed de gebruikerservaring is?

Het duurt gemiddeld 7 seconden voordat een gebruiker in de App Store een beslissing neemt of hij uw app wil downloaden of niet. Een onderzoek naar downloadbeslissingen met 25.000 bezoekers en 10.000 installaties levert screenshots op als de op één na meest reden om te installeren, waarbij beoordeling op de eerste plaats komt.

We hebben ontdekt dat de gemiddelde tijd die mensen doorbrengen aan een winkelvermelding 7 seconden is. Het feit is dat de overgrote meerderheid van mensen de pagina nog sneller verlaat. Betrokken gebruikers blijven wat langer hangen, maar ze volgen allemaal hetzelfde proces: controleer het pictogram, bekijk de eerste twee screenshots en scan de eerste regel van de app-beschrijving - Peter Fodor, waarom 7 seconden je mobiele app kon maken of breken

Schermafbeeldingen zijn een weerspiegeling van de gebruikersverhalen van uw app en weerspiegelen de gebruikerservaring. Ik bestudeerde de top 100-apps en hun schermafbeeldingen met behulp van de gegevens die zijn verzameld door de goede mensen bij Incipia. Ik verwijs hier naar de belangrijkste bevindingen uit meerdere onderzoeken.

App in beeld: HeyDoctor

HeyDoctor is een app waarmee gebruikers online medische recepten kunnen krijgen zonder dat ze een huisarts hoeven te bezoeken. HeyDoctor kan recepten voorschrijven en bijvullen voor medicijnen, variërend van anticonceptie, haargroei tot behandelingen van urineweginfecties, laboratoriumrapporten en meer. U kunt ook een behandeling krijgen voor gevallen van eerstelijnszorg zoals acne, UTI, koortslipbehandeling en meer. De mobiele app van HeyDoctor is goed ontvangen in de App Store met 122 beoordelingen met een waardering van 4,7 sterren.

We zullen de schermafbeeldingen van HeyDoctor opnieuw ontwerpen en leren over scanbare schermafbeeldingen.

ontkenning

Houd er rekening mee dat ik niet bij HeyDoctor werk en dat de meningen in deze case study strikt van mijzelf zijn. In tegenstelling tot ontwerpers, productmanagers en iedereen die verantwoordelijk is voor het nemen van belangrijke beslissingen waarbij design bij HeyDoctor werkt, heb ik geen toegang tot analyses op basis van zijn gebruikersbestand en kijk ik mogelijk niet naar het volledige plaatje. Ontwerpbeslissingen kunnen worden gebaseerd op bedrijfsdoelstellingen, prioritering van middelen of technische beperkingen. Daarom is elke ongevraagde case study niet uitputtend, en ik suggereer zeker niet dat HeyDoctor hun huidige screenshots verlaat en mijn herontwerp overneemt.

Het huidige ontwerp

We gaan werken aan de iOS-app van HeyDoctor. Dit is hoe de bestaande screenshots eruit zien:

Het volgt de standaardtitel- en ondertitelingsinstelling die de gebruikersverhalen van de app goed uitlegt. We zijn niet geïnteresseerd in het opnieuw ontwerpen van het merk of de gebruikersinterface, dus we zullen proberen ze consistent te houden in ons herontwerp.

Verhalen van gebruikers

Voordat we ingaan en beginnen met het aanbrengen van visuele wijzigingen, moeten we leren waarvoor gebruikers HeyDoctor installeren en waarnaar ze op zoek zijn wanneer ze deze app ontdekken.

  1. Ontvang recepten en vullingen. Gebruikers willen een eenvoudige manier vinden om hun recepten en vullingen online te krijgen zonder een arts te bezoeken.
  2. Krijg behandeling voor ziekte. Gebruikers zoeken online naar een behandeling voor hun ziekte.
  3. Praat met een huisarts. Gebruikers willen met een arts praten, maar ze kunnen er momenteel waarschijnlijk geen bezoeken vanwege tijds-, financiële of woon-werkbeperkingen.
  4. Doe dit allemaal zonder dat u daarvoor verzekeringspapier nodig hebt. Gebruikers willen geen ziektekostenverzekering afsluiten omdat ze er geen hebben of omdat hun copay te hoog is.

Schermafbeeldingen of miniaturen?

Schermafmetingen zijn met 72% gegroeid sinds de originele iPhone met het 3,5-inch scherm werd gelanceerd. De gemiddelde schermgrootte van smartphones die in 2018 in de VS worden verkocht, is 5,5 inch. Schermen zijn groter dan ooit en productontwerpers evolueren voortdurend om gebruik te maken van deze extra beschikbare ruimte. Je zou denken dat grotere schermen ontwerpers zouden verleiden om meer tekstbijschriften op screenshots te plaatsen. Maar wat we waarnemen is precies het tegenovergestelde.

We hebben consequent geconstateerd dat minder dan 4% van de gebruikers die op zoek zijn naar een app, portretafbeeldingen vergroten en slechts 2% vergrote landschapsafbeeldingen. Voor gamers is het zelfs minder met slechts 0,5%. Dit komt waarschijnlijk omdat de gameplay meestal duidelijk genoeg is, zelfs vanuit miniaturen - Peter Fodor

Minder dan 4% van de mensen die naar uw app-pagina komen, tikt op uw schermafbeeldingen.

Ontwerpers zijn begonnen aan deze statistiek aandacht te schenken met veel apps die hun schermafbeeldingen als miniaturen beschouwen om naar te kijken in plaats van iets om aan te boren. Van gebruikers in 2016 wordt verwacht dat ze op de screenshot tikken om de tekst erin te lezen. Maar met de nieuwe app store-lay-out en grotere schermen, tikken gebruikers niet meer op uw screenshots.

Laten we eens kijken naar een aantal nieuwe screenshots van 2016 tot 2018. Merk op dat bijna elk van hen minder woorden en grotere lettertypen heeft.

Het magische getal 2

78 van de top 100-apps hebben vijf screenshots, 13 apps hebben vier screenshots, 6 apps hebben drie screenshots en 3 hebben er slechts twee. Als ontwikkelaar zou je denken aan vijf screenshots omdat meer inhoud beter is, toch? Fout.

Slechts 9% van de gebruikers scrolt voorbij de eerste twee screenshots. Landschapsschermafbeeldingen presteren slechter met 5%. Dit maakt het noodzakelijk om de gebruiker in de eerste twee screenshots zelf te lokken. Vertel uw gebruikers wat uw app doet in het eerste scherm en breid dit uit in de bijbehorende screenshots.

De bevindingen van ons onderzoek maken duidelijk dat u het belangrijkste voordeel van uw app in de eerste twee (iOS10, Google Play) of drie (iOS11) screenshots MOET uitleggen als u portretfoto's gebruikt. Als je echt een landschapsafbeelding wilt gebruiken, heb je er maar één - Peter Fodor

Laten we de eerste twee screenshots van enkele populaire apps bekijken.

Gemarkeerde UI-elementen

Gebruikers die naar uw schermafbeeldingen kijken, proberen de functionaliteiten van uw app te meten. Tekstbijschriften helpen hen de context achter de schermen te begrijpen. Ontwerpers maken het gebruikers nog eenvoudiger door UI-elementen te markeren die het tekstbijschrift probeert uit te leggen.

Laten we enkele voorbeelden bekijken.

learnings

  1. Leg het belangrijkste gebruikersverhaal van uw app uit in de eerste twee screenshots. Slechts 9% van de gebruikers die naar uw app-lijst komen, scrolt voorbij de eerste twee screenshots.
  2. Vergroot de lettergrootte en verklein de tekst. Met grotere schermen worden gebruikers geconditioneerd om te scannen en de screenshot te bekijken in plaats van erop te tikken en te lezen. Minder dan 4% van de gebruikers zal op uw schermafbeeldingen tikken om het te lezen.
  3. Markeer UI-elementen die tekstbijschriften vertegenwoordigen. Het maakt het scannen van de schermafbeeldingen eenvoudiger en verbetert het uiterlijk van uw screenshot.

Nu we een beetje weten hoe we screenshots leesbaarder kunnen maken, gaan we onze belangrijkste bevindingen toepassen op de screenshots van HeyDoctor.

Stap 1: update de iPhone naar de nieuwere generaties

De schermafbeeldingen van HeyDoctor maken gebruik van de oudere generatie iPhones. Hoewel het geen dealbreaker is, vind ik mijn iPhones leuk, net als mijn apps. Bijgewerkt en op fleek (sorry).

Stap 2: Verminder tekst en maak deze leesbaarder

We zullen proberen de bijschriften een beetje leesbaarder te maken door de gebruikersverhalen in een beknopt formaat te vermelden. We zullen ook de ondertiteling en beschrijvingen afschaffen om de grotere titels te huisvesten.

De derde screenshot toont de instellingenpagina van de app terwijl het bijschrift gaat over hoe de app geen verzekeringspolis vereist. Laten we het vervangen door een relevanter scherm. Ik ga het vervangen door het eerste scherm dat je ziet als je een recept in de app probeert te krijgen, wat indirect betekent dat je geen verzekering nodig hebt om te beginnen.

Stap 3: Markeer relevante UI-elementen

Zoals we hierboven hebben geleerd, maakt het markeren van relevante UI-elementen die naar de bijschriften verwijzen, ze beter zichtbaar en leesbaar. Het helpt de gebruiker ook om de screenshot gemakkelijker te scannen.

Chat UI

Laten we eens kijken hoe Tinder hun chat-UI benadrukt:

Het gebruikt slim profielfoto's en chatbellen met merkelementen zoals kleuren om de echte chat-gebruikersinterface na te bootsen.

Laten we proberen iets soortgelijks te doen:

Laten we dit item in de screenshot invoegen:

Ik probeerde het merk van HeyDoctor te integreren in de chatbellen. Ik had geen behoefte aan het toevoegen van profielfoto's omdat artsen waarmee je in de app praat geen profielfoto hebben.

Kaarten en slagschaduw

Laten we eens kijken hoe Uber hun UI-elementen benadrukt.

Ik ben dol op deze minimale manier om UI-elementen te markeren met kaarten en slagschaduwen. We gaan deze stijl gebruiken om enkele elementen in onze screenshots te benadrukken.

Ik besloot bijschriften onder de telefoon te plaatsen, zodat de gebruiker het gemarkeerde UI-element ziet voordat hij het bijschrift leest.

Stap 4: Cosmetische veranderingen

We hebben meerdere wijzigingen aangebracht in onze screenshots om te optimaliseren voor scanbaarheid. Laten we het nu beter laten lijken. Goed visueel ontwerp kan een ongelooflijke verlokking zijn voor gebruikers en het mag niet worden genegeerd bij het opnieuw ontwerpen van screenshots.

Perspectiefschermen toevoegen

Isometrische schermen zien er modern en gepolijst uit. Je kunt bijna overal isometrische telefoons zien, van de perfect gerenommeerde productreclames van Apple tot zeer gepolijste modellen op Dribble (gek om te denken dat Dribble oorspronkelijk is gestart als een website om prototypes van laag niveau WIP-ontwerp te delen!)

Ik heb een aantal perspectieven gemaakt vanuit de schermen die ons ter beschikking stonden.

Ik zal het eerste perspectiefmodel kiezen en het in twee schermafbeeldingen splitsen, omdat we momenteel slechts 3 schermafbeeldingen hebben en we er maximaal 5 in de App Store kunnen toevoegen.

Ik heb een bijschrift toegevoegd aan de eerste pagina - "Uw persoonlijke arts". Gemakkelijk te lezen, een samenvatting van wat de app doet en beknopt.

Verloop achtergrondverloop

Het contrast tussen de achtergrond en de voorgrond is nu iets te hard voor mij. Laten we het veranderen in een lichtere blauwtint.

We zullen een verloop maken met de nieuwe kleuren die we kiezen.

Laten we eens kijken hoe dit eruit ziet in onze screenshots.

Perfect!

Ik ga wat ribbels toevoegen net onder de tekst, dus het fungeert als een onderscheid tussen de tekst en de telefoon.

Ik was in staat om een ​​coole isometrische vector van het web te halen. Laten we het gebruiken om de laatste screenshot te maken.

Definitieve ontwerpen

Voordat

Na

Gevolgtrekking

Al met al hebben we iets meer dan vier kleine, iteratieve aanpassingen gemaakt. Maar het eindresultaat zijn screenshots die gemakkelijk te bekijken zijn en modern aanvoelen. Bovendien vereiste geen van deze tweaks een aangeboren artistieke vaardigheid. Het bestuderen van een handvol apps in de App Store hielp ons om te weten welke problemen we moesten zoeken.

Bedankt voor het lezen! Dit was een leuk weekendproject voor mij en ik vond het leuk om hier over te schrijven. Hopelijk heeft dit bericht je inzicht gegeven in de status van screenshots in de app store. U kunt feedback geven of vragen stellen in het opmerkingenveld hieronder.