Najbolje prakse za UX: Kako dizajnirati snimke zaslona aplikacija koje je moguće skenirati

Programiranje

Redizajn zaslona HeyDoctor's App Store

Hajdemo igrati igru. Odaberite aplikaciju na telefonu koja vam se stvarno sviđa. Vi ste tvorac ove aplikacije i želite prikupiti novac od investitora. Imate minutu da svoju aplikaciju prebacite na VC-ove. Novac je za grabež, ali samo ako ga možete uvjeriti u 60 sekundi. Kako to radiš? Opisujete li što aplikacija radi? Kažete li po čemu je aplikacija jedinstvena u usporedbi s konkurentima? Pokazujete li koliko je dobro korisničko iskustvo?

Korisniku u App Storeu treba u prosjeku 7 sekundi da se odluči želi li preuzeti vašu aplikaciju ili ne. Istraživanje o odlukama o preuzimanju koje uključuje 25.000 posjetitelja i 10.000 instalacija ocijenilo je snimke zaslona drugim najvažnijim razlogom za instaliranje, a ocjena je na prvom mjestu.

Otkrili smo da prosječno vrijeme koje ljudi provedu na popisu trgovina iznosi 7 sekundi. Činjenica je da velika većina ljudi napušta stranicu čak i prije. Zaručeni korisnici malo se zadržavaju, ali svi slijede isti postupak: provjerite ikonu, pogledajte prve dvije snimke zaslona i skenirajte prvi redak opisa aplikacije - Peter Fodor, Zašto bi 7 sekundi moglo napraviti ili razbiti vašu mobilnu aplikaciju

Snimke zaslona ogledalo su korisničkih priča vaše aplikacije i odražavaju njezino korisničko iskustvo. Proučavao sam top 100 aplikacija i njihove snimke zaslona koristeći podatke koje su prikupili dobri ljudi iz Incipije. Ovdje ću se pozvati na ključne nalaze iz više studija.

Aplikacija u fokusu: HeyDoctor

HeyDoctor je aplikacija koja omogućava korisnicima da na mreži dobivaju liječničke recepte bez potrebe da posjete liječnika primarne zdravstvene zaštite. HeyDoctor može propisivati ​​i dopunjavati recepte za lijekove koji se kreću od kontrole rađanja, rasta dlačica do liječenja infekcija mokraćnog sustava, laboratorijskih izvještaja i još mnogo toga. Također možete dobiti liječenje za slučajeve primarne zdravstvene zaštite kao što su liječenje akni, UTI, liječenje herpesa i još mnogo toga. Mobilna aplikacija HeyDoctor dobro je prihvaćena u App Storeu sa 122 recenzije ocijenivši je s 4,7 zvjezdica.

Preoblikovat ćemo zaslone zaslona HeyDoctor i naučiti o snimkama zaslona koje je moguće skenirati.

Odricanje

Imajte na umu da ne radim u HeyDoctoru i stavovi izraženi u ovoj studiji slučaja strogo su moji. Za razliku od dizajnera, voditelja proizvoda i svih odgovornih za donošenje ključnih odluka koje uključuju dizajn koji radi u HeyDoctoru, ja nemam pristup analitici na bazi korisnika i možda ne gledam cjelovitu sliku. Odluke o dizajnu mogu se temeljiti na poslovnim ciljevima, određivanju prioriteta resursa ili tehničkim ograničenjima. Stoga bilo koja neželjena studija slučaja nije iscrpna i zasigurno ne sugeriram da HeyDoctor napusti svoje trenutne snimke zaslona i usvoji moj redizajn.

Trenutni dizajn

Radit ćemo na aplikaciji HeyDoctor za iOS. Evo kako izgledaju postojeće snimke zaslona:

Slijedi standardno postavljanje naslova i podnaslova što dobro objašnjava korisničke priče aplikacije. Nismo zainteresirani za redizajn marke ili korisničkog sučelja, pa ćemo ih pokušati održavati dosljednima u našem redizajniranju.

Korisničke priče

Prije nego što kopamo i započnemo s vizualnim promjenama, moramo naučiti za što korisnici instaliraju HeyDoctor i što traže kada otkriju ovu aplikaciju.

  1. Nabavite recepte i dopune. Korisnici žele pronaći jednostavan način za dobivanje svojih recepata i punjenja putem interneta bez potrebe za posjetom liječniku.
  2. Potražite liječenje bolesti. Korisnici traže kako se liječiti od svoje bolesti na mreži.
  3. Razgovarajte s liječnikom primarne zdravstvene zaštite. Korisnici žele razgovarati s liječnikom, no vjerojatno ga trenutno ne mogu posjetiti zbog vremenskih, financijskih ili putnih ograničenja.
  4. Učinite sve to bez ikakvih papira za osiguranje. Korisnici se ne žele uključiti u svoje zdravstveno osiguranje jer ili ga nemaju ili im je pretplata previsoka.

Snimke zaslona ili sličice?

Veličine zaslona porasle su za 72% od kada je originalni iPhone predstavljen s 3,5-inčnim zaslonom. Prosječna veličina zaslona pametnih telefona prodanih u SAD-u 2018. godine je 5,5 inča. Zasloni su veći nego ikad, a dizajneri proizvoda neprestano se razvijaju kako bi iskoristili ovaj dodatni raspoloživi prostor. Moglo bi se pomisliti da bi veći zasloni potaknuli dizajnere da na snimke zaslona stave više natpisa. Ali ono što promatramo je upravo suprotno.

Neprestano smo primijetili da manje od 4% korisnika koji traže aplikaciju povećavaju portretne snimke zaslona, ​​a samo 2% povećavaju pejzažne snimke zaslona. Za igrače je to još manje, sa samo 0,5%. To je vjerojatno zato što je igranje igre obično dovoljno jasno čak i sa sličica - Peter Fodor

Manje od 4% ljudi koji dolaze na stranicu vaše aplikacije tapkaju vaše snimke zaslona.

Dizajneri su počeli obraćati pažnju na ovu metriku s puno aplikacija koje svoje snimke zaslona tretiraju kao sličice u koje treba zaviriti, umjesto u nešto što treba dodirnuti. Moglo bi se očekivati ​​da će korisnici 2016. dodirnuti snimku zaslona kako bi čitali tekst na njoj. No s novim izgledom trgovine aplikacija i većim zaslonima, korisnici više ne tapkaju na vašim snimkama zaslona.

Pogledajmo neke redizajne snimki zaslona od 2016. do 2018. Primijetite kako gotovo svaki od njih ima manje riječi i veće fontove.

Čarobni broj 2

78 od top 100 aplikacija ima pet snimki zaslona, ​​13 aplikacija ima četiri snimke zaslona, ​​6 aplikacija ima tri snimke zaslona, ​​a 3 samo dvije. Kao programer, pomislili biste odabrati pet snimki zaslona jer je više sadržaja bolje, zar ne? Pogrešno.

Samo 9% korisnika pomiče se kroz prve dvije snimke zaslona. Snimke zaslona pejzaža imaju lošiju izvedbu od 5%. Zbog toga je neophodno namamiti korisnika u prva dva snimka zaslona. Recite svojim korisnicima što vaša aplikacija radi na prvom zaslonu i proširite to na odgovarajućim snimkama zaslona.

Nalazi našeg istraživanja jasno pokazuju da MORATE objasniti osnovnu prednost svoje aplikacije na prva dva (iOS10, Google Play) ili tri (iOS11) snimka zaslona ako koristite portretne slike. Ako stvarno želite koristiti pejzažnu sliku, na raspolaganju vam je samo jedna - Peter Fodor

Ispitajmo prve dvije snimke zaslona nekih popularnih aplikacija.

Istaknuti elementi korisničkog sučelja

Korisnici koji gledaju vaše snimke zaslona pokušavaju procijeniti funkcionalnosti vaše aplikacije. Tekstualni opisi pomažu im da razumiju kontekst iza ekrana. Dizajneri olakšavaju korisnicima isticanjem elemenata korisničkog sučelja koje tekst opis pokušava objasniti.

Pogledajmo neke primjere.

Učenja

  1. Objasnite najvažniju korisničku priču svoje aplikacije u prva dva snimka zaslona. Samo 9% korisnika koji dolaze na vaš popis aplikacija pomaknut će se pored prve dvije snimke zaslona.
  2. Povećajte veličinu fonta i smanjite tekst. S većim zaslonima korisnici se uvjetuju da skeniraju i pogledaju snimak zaslona, ​​umjesto da ga tapkaju i čitaju. Manje od 4% korisnika dodirnut će vaše snimke zaslona kako bi ih pročitali.
  3. Istaknite elemente korisničkog sučelja koji predstavljaju natpise teksta. Olakšava skeniranje snimki zaslona i poboljšava mogućnost gledanja zaslona.

Sad kad znamo malo o tome kako snimke zaslona učiniti čitljivijima, krenimo s primjenom naših ključnih nalaza na zaslone zaslona HeyDoctor.

1. korak: Ažurirajte iPhone na novije generacije

Snimke zaslona HeyDoctora koriste starije generacije iPhonea. Iako nisam prekidač dogovora, moji iPhonei se sviđaju kao i moje aplikacije. Ažurirano i na fleek (oprostite).

Korak 2: Smanjite tekst i učinite ga čitljivijim

Pokušat ćemo učiniti naslove malo čitljivijima iznošenjem korisničkih priča u sažetom formatu. Također ćemo ukloniti titlove i opise kako bismo mogli smjestiti veće naslove.

Treća snimka zaslona prikazuje stranicu s postavkama aplikacije, dok njen naslov govori o tome kako aplikacija ne zahtijeva policu osiguranja. Zamijenimo ga relevantnijim zaslonom. Zamijenit ću ga prvim zaslonom koji vidite kada pokušate dobiti recept u aplikaciji, neizravno implicirajući da vam za početak nije potrebno osiguranje.

Korak 3: Istaknite relevantne elemente korisničkog sučelja

Kao što smo gore naučili, isticanje relevantnih elemenata korisničkog sučelja koji se odnose na opise čini ih preglednijima i čitljivijima. Također pomaže korisniku da lakše skenira snimku zaslona.

Korisničko sučelje za chat

Pogledajmo kako Tinder ističe njihovo korisničko sučelje za chat:

Vešto koristi slike profila i oblačiće za chat s elementima robne marke poput boja kako bi oponašao svoje stvarno korisničko sučelje za chat.

Pokušajmo učiniti nešto slično:

Umetnimo ovaj materijal u snimku zaslona:

Pokušao sam integrirati brend HeyDoctor u mjehuriće za chat. Nisam osjetio potrebu za uključivanjem slika profila jer liječnici s kojima razgovarate u aplikaciji nemaju sliku profila.

Karte i pad sjene

Pogledajmo kako Uber ističe svoje elemente korisničkog sučelja.

Volim ovaj minimalni način isticanja elemenata korisničkog sučelja pomoću karata i sjena. Ovim ćemo stilom naglasiti neke elemente na našim snimkama zaslona.

Odlučio sam prebaciti naslove ispod telefona kako bi korisnik vidio istaknuti element korisničkog sučelja prije nego što pročita naslov.

Korak 4: Kozmetičke promjene

Napravili smo više izmjena na našim snimkama zaslona kako bismo optimizirali mogućnost skeniranja. Sada neka izgleda bolje. Dobar vizualni dizajn može biti nevjerojatan mamac za korisnike i ne bi ga se trebalo zanemariti tijekom redizajniranja snimaka zaslona.

Dodajte zaslone perspektive

Izometrični zasloni izgledaju moderno i uglađeno. Gotovo svugdje možete vidjeti izometrične telefone, od Appleova savršeno prikazanih reklama za proizvode do visoko ulaštenih maketa na Dribbleu (ludost kad pomislim da je Dribble prvotno pokrenut kao web stranica za dijeljenje prototipova WIP dizajna na niskoj razini!)

Napravio sam nekoliko perspektiva s ekrana koji su nam bili dostupni.

Odabrat ću prvu perspektivnu maketu i podijeliti je na dvije snimke zaslona jer trenutno imamo samo 3 snimke zaslona, ​​a možemo dodati do 5 u App Store.

Na prvu sam stranicu dodao naslov - "Vaš osobni liječnik". Jednostavno za čitanje, sažima ono što aplikacija radi i sažeto.

Promijenite gradijent pozadine

Trenutno mi je kontrast između pozadine i prednjeg plana malo preoštar. Promijenimo je u svjetliju nijansu plave boje.

Napravit ćemo gradijent s novim bojama koje odaberemo.

Pogledajmo kako ovo izgleda na našim snimkama zaslona.

Dodat ću neke grebene odmah ispod teksta kako bi djelovao kao razlika između teksta i telefona.

Uspio sam ugrabiti kul izometrijski vektor s weba. Iskoristimo ga za izradu zadnjeg snimka zaslona.

Završni projekti

Prije

Nakon

Zaključak

Sve u svemu, napravili smo nešto više od četiri mala, ponavljajuća podešavanja. Ali konačni rezultat su snimke zaslona koje je lako pogledati i osjećati se moderno. Štoviše, niti jedan od ovih ugađanja nije zahtijevao urođenu umjetničku vještinu. Proučavanje pregršt aplikacija u App Storeu pomoglo nam je znati koje probleme treba potražiti.

Hvala na čitanju! Ovo je za mene bio zabavan vikend projekt i uživao sam pisati o njemu ovdje. Nadamo se da vam je ovaj post dao uvid u stanje snimaka zaslona u trgovini aplikacija. Slobodno pošaljite bilo kakve povratne informacije ili postavite bilo kakva pitanja koja imate u odjeljku za komentare u nastavku.