UX: n parhaat käytännöt: Kuinka suunnitella skannattavia sovelluksen kuvakaappauksia

HeyDoctorin App Storen kuvakaappausten uudistaminen

Pelataan peli. Valitse puhelimellasi sovellus, josta pidät todella. Olet tämän sovelluksen luoja ja haluat kerätä rahaa sijoittajilta. Sinulla on minuutti aikaa viedä sovelluksesi virtuaalikeskuksiin. Raha on napattavissa, mutta vain jos pystyt vakuuttamaan heidät 60 sekunnissa. Miten teet sen? Kuvailetko mitä sovellus tekee? Kerrotko, kuinka sovellus on ainutlaatuinen verrattuna sen kilpailijoihin? Näytätkö kuinka hyvä käyttökokemus on?

Keskimäärin 7 sekuntia kestää, ennen kuin App Storessa oleva käyttäjä päättää, haluatko ladata sovelluksesi vai ei. Latauspäätöksiä koskeva tutkimus, johon osallistui 25 000 kävijää ja 10 000 asennusta, arvioi kuvakaappaukset toiseksi eniten asennettavaksi syyksi, ja luokitus on kärkipaikalla.

Huomasimme, että keskimääräinen aika, jonka ihmiset viettävät myymälälistalle, on 7 sekuntia. Tosiasia on, että suurin osa ihmisistä poistuu sivulta aikaisemmin. Sitoutuneet käyttäjät viipyvät vähän kauemmin, mutta he kaikki seuraavat samaa prosessia: tarkista kuvake, tarkastele kahta ensimmäistä kuvakaappausta ja skannaa sovelluksen kuvauksen ensimmäinen rivi - Peter Fodor, miksi 7 sekuntia voi tehdä tai rikkoa mobiilisovelluksesi

Kuvakaappaukset ovat peili sovelluksesi käyttäjäkertomuksista ja heijastavat sen käyttökokemusta. Tutkin 100 parasta sovellusta ja niiden kuvakaappauksia hyödyntäen Incipian hyvien ihmisten keräämää tietoa. Aion viitata useiden tutkimusten keskeisiin havaintoihin täällä.

Kohdennettu sovellus: HeyDoctor

HeyDoctor on sovellus, jonka avulla käyttäjät voivat saada lääkemääräyksiä verkossa tarvitsematta käydä perusterveydenhuollon lääkärin luona. HeyDoctor voi määrätä ja täyttää lääkemääräyksiä lääkkeille, jotka vaihtelevat ehkäisystä, hiusten kasvusta virtsatieinfektiohoitoihin, laboratorioraportteihin ja muuhun. Voit myös saada hoitoa perusterveydenhuollon tapauksissa, kuten aknen hoito, virtsatieinfektio, kylmähermojen hoito ja paljon muuta. HeyDoctorin mobiilisovellus on otettu hyvin vastaan ​​App Storessa, ja 122 arvostelua on luokitellut sen 4,7 tähdeksi.

Suunnittelemme uudelleen HeyDoctorin kuvakaappaukset ja opimme skannattavista kuvakaappauksista.

Vastuuvapauslauseke

Huomaa, että en työskentele HeyDoctorissa, ja tässä tapaustutkimuksessa esitetyt näkemykset ovat ehdottomasti omat. Toisin kuin suunnittelijat, tuotepäälliköt ja kaikki, jotka ovat vastuussa HeyDoctorin suunnittelutyötä koskevista keskeisistä päätöksistä, minulla ei ole pääsyä analyyseihin sen käyttäjäkunnassa, enkä välttämättä tarkastele kokonaiskuvaa. Suunnittelupäätökset voivat perustua liiketoiminnan tavoitteisiin, resurssien priorisointiin tai teknisiin rajoituksiin. Siksi mikään ei-toivottu tapaustutkimus ei ole tyhjentävä, enkä ehdottomasti ehdota, että HeyDoctor luopuisi nykyisistä kuvakaappauksistaan ​​ja hyväksyisi uudelleensuunnitteluni.

Nykyinen muotoilu

Työskentelemme HeyDoctorin iOS-sovelluksen parissa. Näin nykyiset kuvakaappaukset näyttävät:

Se noudattaa standardinimikkeitä ja tekstityksiä, mikä tekee hyvää työtä selittäessään sovelluksen käyttäjätarinoita. Emme ole kiinnostuneita uudistamaan tuotemerkkiä tai käyttöliittymää, joten yritämme pitää ne johdonmukaisina uudelleensuunnittelussa.

Käyttäjien tarinat

Ennen kuin aloitamme visuaalisten muutosten tekemisen, meidän on opittava, mitä käyttäjät asentavat HeyDoctorin ja mitä he etsivät, kun he löytävät tämän sovelluksen.

  1. Hanki reseptit ja täyttö. Käyttäjät haluavat löytää helpon tavan saada reseptit ja täyttö verkossa ilman tarvetta käydä lääkärin luona.
  2. Hanki sairauden hoito. Käyttäjät etsivät, miten saada sairautensa hoitoa verkossa.
  3. Keskustele perusterveydenhuollon lääkärin kanssa. Käyttäjät haluavat puhua lääkärin kanssa, mutta he eivät todennäköisesti pääse käymään tällä hetkellä ajan, taloudellisten tai työmatkoista johtuvien rajoitusten vuoksi.
  4. Tee kaikki nämä tekemättä mitään vakuutusasiakirjoja. Käyttäjät eivät halua ottaa mukaan sairausvakuutustaan, koska joko heillä ei ole sellaista tai niiden kopiointi on liian korkea.

Kuvakaappauksia tai pikkukuvia?

Näytön koot ovat kasvaneet 72% sen jälkeen, kun alkuperäinen iPhone julkaistiin 3,5 tuuman näytöllä. Yhdysvalloissa vuonna 2018 myytyjen älypuhelinten keskimääräinen näytön koko on 5,5 tuumaa. Näytöt ovat suurempia kuin koskaan, ja tuotesuunnittelijat kehittyvät jatkuvasti hyödyntääkseen tätä ylimääräistä käytettävissä olevaa tilaa. Luulisi, että isommat näytöt houkuttelisivat suunnittelijoita lisäämään kuvakaappauksiin enemmän tekstityksiä. Mutta mitä havaitsemme, on aivan päinvastoin.

Olemme jatkuvasti havainneet, että alle 4% sovellusta etsivistä käyttäjistä suurentaa muotokuvakaappauksia ja vain 2% suurennettuja maisemakaappauksia. Pelaajille se on vielä vähemmän vain 0,5%. Tämä johtuu todennäköisesti siitä, että pelattavuus on yleensä riittävän selkeä jopa pikkukuvista - Peter Fodor

Alle 4% sovellussivullesi tulevista ihmisistä napauttaa kuvakaappauksiasi.

Suunnittelijat ovat alkaneet kiinnittää huomiota tähän mittariin monilla sovelluksilla, jotka käsittelevät kuvakaappauksia pikkukuvina, joita pitää kurkistaa sen sijaan, että jotain hyödynnettäisiin. Vuoden 2016 käyttäjien voidaan odottaa napauttavan kuvakaappausta lukeakseen siinä olevaa tekstiä. Mutta uuden sovelluskaupan asettelun ja suurempien näyttöjen ansiosta käyttäjät eivät enää napauta kuvakaappauksiasi.

Katsotaanpa joitain kuvakaappauksia, jotka suunnitellaan uudelleen vuosina 2016-2018. Huomaa, kuinka melkein jokaisella niistä on vähemmän sanoja ja isompia fontteja.

Maaginen numero 2

100 suosituimmasta sovelluksesta 78 on viisi kuvakaappausta, 13 sovelluksessa on neljä kuvakaappausta, 6 sovelluksessa on kolme kuvakaappausta ja kolmessa vain kaksi. Kehittäjänä luulisi mennä viiteen kuvakaappaukseen, koska enemmän sisältöä on parempi, eikö? Väärä.

Vain 9% käyttäjistä vierittää kahden ensimmäisen kuvakaappauksen ohi. Maisemakaappaukset toimivat huonommin 5%: lla. Tämän vuoksi on välttämätöntä houkutella käyttäjä itse kahdessa ensimmäisessä kuvakaappauksessa. Kerro käyttäjillesi, mitä sovelluksesi tekee ensimmäisessä näytössä, ja laajenna vastaavissa kuvakaappauksissa.

Tutkimuksemme tulokset tekevät selväksi, että joudut selittämään sovelluksesi keskeiset edut kahdessa ensimmäisessä (iOS10, Google Play) tai kolmessa (iOS11) kuvakaappauksessa, jos käytät muotokuvia. Jos haluat todella käyttää maisemakuvaa, sinulla on vain yksi - Peter Fodor

Tarkastellaan joitain suosittuja sovelluksia kahdesta ensimmäisestä kuvakaappauksesta.

Korostetut käyttöliittymän elementit

Käyttäjät, jotka vilkaisevat kuvakaappauksiasi, yrittävät mitata sovelluksesi toimintoja. Tekstitys auttaa heitä ymmärtämään ruudun takana olevan kontekstin. Suunnittelijat tekevät siitä vieläkin helpompaa käyttäjille korostamalla käyttöliittymän elementtejä, joita tekstiteksti yrittää selittää.

Katsotaanpa joitain esimerkkejä.

Oppimista

  1. Selitä sovelluksesi tärkein käyttäjäkertomus kahdessa ensimmäisessä kuvakaappauksessa. Vain 9% sovelluksesi tietoihin saapuvista käyttäjistä vierittää kahden ensimmäisen kuvakaappauksen ohi.
  2. Suurenna kirjasinkokoa ja leikkaa tekstiä. Suuremmilla näytöillä käyttäjät saavat edellytykset skannata ja vilkaista kuvakaappausta sen sijaan, että napauttaisivat sitä ja lukisivat. Alle 4% käyttäjistä napauttaa kuvakaappauksiasi lukeaksesi sen.
  3. Korosta käyttöliittymäelementit, jotka edustavat tekstityksiä. Se tekee kuvakaappausten skannaamisesta helpompaa ja parantaa kuvakaappauksenne katse-kykyä.

Nyt kun tiedämme vähän siitä, miten kuvakaappaukset ovat helpommin luettavissa, aloitetaan tärkeimpien havaintojemme soveltaminen HeyDoctorin kuvakaappauksiin.

Vaihe 1: Päivitä iPhone uusille sukupolville

HeyDoctorin kuvakaappauksissa käytetään vanhempaa iPhone-sukupolvea. Vaikka en ole kaupan katkaisija, pidän iPhoneista kuten sovelluksistani. Päivitetty ja fleek (sorry).

Vaihe 2: Leikkaa tekstiä ja tee siitä luettavampi

Yritämme tehdä kuvateksteistä hieman luettavampia ilmoittamalla käyttäjätarinat ytimekkäässä muodossa. Poistamme myös tekstityksen ja kuvaukset suurempien nimien mukauttamiseksi.

Kolmas kuvakaappaus näyttää sovelluksen asetussivun, kun sen kuvateksti puhuu siitä, miten sovellus ei vaadi vakuutusta. Korvataan se osuvammalla näytöllä. Aion korvata sen ensimmäisellä näytöllä, jonka näet, kun yrität saada reseptiä sovelluksessa, mikä epäsuorasti viittaa siihen, että et tarvitse vakuutusta aloittaaksesi.

Vaihe 3: Korosta asiaankuuluvat käyttöliittymän elementit

Kuten edellä opimme, asiaankuuluvien käyttöliittymän elementtien korostaminen, jotka viittaavat tekstityksiin, tekevät niistä katseltavampia ja luettavampia. Se auttaa myös käyttäjää skannaamaan kuvakaappauksen helpommin.

Chat-käyttöliittymä

Katsotaanpa, kuinka Tinder korostaa heidän chat-käyttöliittymäänsä:

Se käyttää taitavasti profiilikuvia ja chat-kuplia brändin elementteillä, kuten väreillä, matkiakseen sen todellista chat-käyttöliittymää.

Yritetään tehdä jotain vastaavaa:

Lisätään tämä sisältö kuvakaappaukseen:

Yritin integroida HeyDoctorin tuotemerkki chat-kupliin. En tuntenut tarvetta sisällyttää profiilikuvia, koska lääkärillä, jolle puhut sovelluksessa, ei ole profiilikuvaa.

Kortit ja Drop Shadow

Katsotaanpa, kuinka Uber korostaa heidän käyttöliittymänsä elementtejä.

Rakastan tätä vähäistä tapaa korostaa käyttöliittymän elementtejä korteilla ja varjoilla. Aiomme käyttää tätä tyyliä korostamaan joitain elementtejä kuvakaappauksissamme.

Päätin siirtää tekstitykset puhelimen alle, jotta käyttäjä näkee korostetun käyttöliittymäelementin ennen kuin hän lukee kuvatekstin.

Vaihe 4: Kosmeettiset muutokset

Olemme tehneet useita muutoksia kuvakaappauksiimme skannattavuuden optimoimiseksi. Tehkäämme nyt se näyttämään paremmalta. Hyvä visuaalinen muotoilu voi olla uskomaton houkutus käyttäjille, eikä sitä pidä jättää huomioimatta kuvakaappauksia suunniteltaessa.

Lisää perspektiivinäytöt

Isometriset näytöt näyttävät moderneilta ja kiillotetuilta. Näet isometriset puhelimet melkein kaikkialla Applen täydellisesti renderoiduista tuotemainoksista Dribblen erittäin kiillotettuihin malliin (hullu ajatella, että Dribble aloitettiin alun perin verkkosivustona jakamaan matalan tason WIP-suunnitteluprototyyppejä!)

Tein pari näkökulmaa käytettävissä olevista näytöistä.

Valitsen ensimmäisen perspektiivimallin ja jaan sen kahteen kuvakaappaukseen, koska meillä on tällä hetkellä vain 3 kuvakaappausta ja voimme lisätä enintään 5 App Storeen.

Lisäsin ensimmäiselle sivulle kuvatekstin - "Henkilökohtainen lääkäri". Helppo lukea, yhteenveto sovelluksen toiminnasta ja tiivis.

Vaihda taustan kaltevuus

Kontrasti taustan ja etualan välillä on minulle hieman liian kova juuri nyt. Vaihdetaan se vaaleammaksi siniseksi.

Teemme kaltevuuden valitsemillamme uusilla väreillä.

Katsotaanpa, miten tämä näyttää kuvakaappauksissamme.

Aion lisätä joitain harjanteita aivan tekstin alle, jotta se toimii erottelijana tekstin ja puhelimen välillä.

Pystyin tarttumaan viileän isometrisen vektorin verkosta. Käytetään sitä viimeisen kuvakaappauksen tekemiseen.

Lopulliset mallit

Ennen

Jälkeen

Johtopäätös

Kaiken kaikkiaan teimme hieman yli neljä pientä iteratiivista muutosta. Mutta lopputulos on kuvakaappauksia, jotka on helppo katsoa ja tuntea modernina. Lisäksi mikään näistä muutoksista ei edellyttänyt luontaista taiteellista taitoa. Kourallisten sovellusten tutkiminen App Storesta auttoi meitä tietämään, mitä asioita etsimme.

Kiitos lukemisesta! Tämä oli hauska viikonloppuprojekti minulle ja nautin siitä kirjoittaa täällä. Toivottavasti tämä viesti antoi sinulle käsityksen kuvakaappausten tilasta App Storessa. Voit vapaasti antaa palautetta tai kysyä kysymyksiä, jotka sinulla on alla olevissa kommenttiosioissa.