UX bevált módszerek: Hogyan készítsünk szkennelhető alkalmazás képernyőképeket

A HeyDoctor App Store képernyőképeinek újratervezése

Játsszunk egy játékot. Válasszon egy alkalmazást a telefonján, amely nagyon tetszik. Ön alkotója ennek az alkalmazásnak, és pénzt szeretne keresni a befektetőktől. Van egy perced arra, hogy az alkalmazást átadd a VC-knek. A pénz megragadható, de csak akkor, ha 60 másodperc alatt meg tudja győzni őket. Hogyan csinálod? Leírja, hogy mit csinál az alkalmazás? Elmondja, hogy az alkalmazás milyen egyedi a versenytársaival összehasonlítva? Megmutatja, mennyire jó a felhasználói élmény?

Átlagosan 7 másodpercbe telik, amíg egy felhasználó az App Store-ban elhatározza, hogy le akarja-e tölteni az alkalmazást. Egy 25 000 látogatót és 10 000 telepítést magában foglaló letöltési döntésekről szóló kutatási tanulmány a képernyőképeket a második legtöbb oka a telepítésnek, az értékelés pedig az első helyet foglalja el.

Felfedeztük, hogy az emberek átlagosan 7 másodpercet töltenek egy áruházi adatlapon. Tény, hogy az emberek döntő többsége még hamarabb elhagyja az oldalt. Az elkötelezett felhasználók még egy kicsit lógnak, de mindannyian ugyanazt a folyamatot követik: ellenőrzik az ikont, megtekintik az első két képernyőképet, és beolvasják az alkalmazás leírásának első sorát.- Peter Fodor, Miért okozhat 7 másodpercet a mobilalkalmazásod?

A képernyőképek tükrözik alkalmazásának felhasználói történeteit, és tükrözik a felhasználói élményt. Tanulmányoztam a top 100 alkalmazást és képernyőképeiket az Incipia jó embereinek összegyűjtött adatainak felhasználásával. Itt hivatkozni fogok több tanulmány legfontosabb megállapításaira.

Fókuszban lévő alkalmazás: HeyDoctor

A HeyDoctor egy olyan alkalmazás, amely lehetővé teszi a felhasználók számára, hogy orvosi rendelvényeket kapjanak online anélkül, hogy fel kellene keresniük az alapellátást kezelő orvost. A HeyDoctor recepteket írhat fel és tölthet fel olyan gyógyszerekre, amelyek a fogamzásgátlástól, a haj növekedésétől a húgyúti fertőzések kezeléséig, a laboratóriumi jelentésekig és egyebekig terjednek. Kezelést kaphat olyan alapellátási esetekben is, mint a pattanások kezelése, UTI, náthás kezelés és még sok más. A HeyDoctor mobilalkalmazását jól fogadták az App Store-ban, 122 vélemény 4,7 csillagra értékelte.

Át fogjuk alakítani a HeyDoctor képernyőképeit, és megismerjük a szkennelhető képernyőképeket.

Jogi nyilatkozat

Felhívjuk figyelmét, hogy nem a HeyDoctornál dolgozom, és az ebben az esettanulmányban kifejtett nézetek szigorúan az én véleményem. Ellentétben a tervezőkkel, a termékmenedzserekkel és a HeyDoctornál dolgozó dizájnnal kapcsolatos kulcsfontosságú döntések meghozataláért, én nem férek hozzá a felhasználói bázis elemzéséhez, és lehet, hogy nem a teljes képet nézem. A tervezési döntések alapulhatnak üzleti célokon, erőforrás-prioritásokon vagy technikai korlátokon alapulva. Ezért minden kéretlen esettanulmány nem teljes körű, és én biztosan nem azt javaslom, hogy HeyDoctor hagyja el jelenlegi képernyőképeiket, és fogadja el az újratervezésemet.

A jelenlegi tervezés

Dolgozni fogunk a HeyDoctor iOS alkalmazásán. Így néznek ki a meglévő képernyőképek:

Ez követi a szokásos cím- és feliratbeállítást, amely jól megmagyarázza az alkalmazás felhasználói történeteit. Nem vagyunk érdekeltek a márka vagy a felhasználói felület újratervezésében, ezért megpróbáljuk őket következetesnek tartani az újratervezés során.

Felhasználói történetek

Mielőtt belevágnánk és megkezdenénk a vizuális változtatásokat, meg kell tanulnunk, hogy a felhasználók mire telepítik a HeyDoctor alkalmazást, és mit keresnek, amikor felfedezik ezt az alkalmazást.

  1. Szerezzen vényeket és újratöltéseket. A felhasználók arra törekszenek, hogy megtalálják az online receptek és utántöltések egyszerű módját anélkül, hogy orvoshoz kellene fordulniuk.
  2. Kezelje betegségét. A felhasználók azt keresik, hogyan lehet online ellátni betegségüket.
  3. Beszéljen az alapellátás orvosával. A felhasználók orvossal akarnak beszélni, de idő, pénzügyi vagy ingázási korlátok miatt valószínűleg nem tudnak ilyet felkeresni.
  4. Mindezt úgy végezze el, hogy semmilyen biztosítási papír nincs benne. A felhasználók nem akarják bevonni az egészségbiztosításukat, mert vagy nincs, vagy túl magas a készpénz.

Pillanatképek vagy miniatűrök?

A képernyőméretek 72% -kal nőttek azóta, hogy az eredeti iPhone 3,5 hüvelykes képernyővel indult. Az Egyesült Államokban 2018-ban értékesített okostelefonok átlagos képernyőmérete 5,5 hüvelyk. A képernyők nagyobbak, mint valaha, és a terméktervezők folyamatosan fejlődnek, hogy kihasználják ezt a rendelkezésre álló extra helyet. Azt gondolhatnánk, hogy a nagyobb képernyők arra csábítják a tervezőket, hogy több szövegfeliratot tegyenek a képernyőképekre. De amit éppen megfigyelünk, éppen ellenkezőleg.

Folyamatosan megfigyeltük, hogy az alkalmazást kereső felhasználók kevesebb, mint 4% -a nagyítja az álló képeket, és csak 2% a nagyított fekvő képernyőképeket. A játékosok számára ez még kevesebb, csupán 0,5%. Ennek valószínűleg az az oka, hogy a játékmenet általában még a miniatűrökből is elég világos - Fodor Péter

Az alkalmazás oldalára érkezők kevesebb mint 4% -a koppint a képernyőképekre.

A tervezők elkezdték figyelni ezt a mutatót azzal, hogy sok alkalmazás a képernyőképeiket miniatűrként kezeli, hogy bekukkanthasson helyettük. Várható, hogy a felhasználók 2016-ban megérintik a képernyőképet, hogy elolvassák a szöveget. De az új alkalmazásbolt-elrendezéssel és a nagyobb képernyőkkel a felhasználók már nem koppintanak az Ön képernyőképeire.

Nézzünk meg néhány 2016 és 2018 között áttervezett képernyőképet. Figyeljük meg, hogy szinte mindegyikük kevesebb szóval és nagyobb betűtípussal rendelkezik.

A varázsszám 2

A 100 legnépszerűbb alkalmazásból 78-ban öt, 13 alkalmazásban négy, 6 alkalmazásban három és 3ban csak kettő található. Fejlesztőként gondolhatna arra, hogy öt képernyőképet készítsen, mert jobb a több tartalom, igaz? Rossz.

A felhasználók mindössze 9% -a görget az első két képernyőkép mellett. A fekvő képernyőképek 5% -nál rosszabbul teljesítenek. Ezért elengedhetetlen a felhasználó csalogatása az első két képernyőképen. Mondja el a felhasználóknak, hogy mit csinál az alkalmazás az első képernyőn, és bővítse ki a megfelelő képernyőképeken.

Kutatásunk eredményei egyértelművé teszik, hogy portré képeket használva az első két (iOS10, Google Play) vagy három (iOS11) képernyőképen el kell magyaráznia alkalmazásának fő előnyeit. Ha valóban tájképet szeretne használni, akkor csak egy van - Fodor Péter

Vizsgáljuk meg néhány népszerű alkalmazás első két képernyőképét.

Kiemelt felhasználói felület elemei

A képernyőképeidre pillantó felhasználók megpróbálják felmérni az alkalmazás funkcióit. A szöveges feliratok segítenek megérteni a képernyők mögötti kontextust. A tervezők még könnyebbé teszik a felhasználók számára azáltal, hogy kiemelik azokat a felhasználói felület elemeket, amelyeket a szöveges felirat magyarázni próbál.

Nézzünk meg néhány példát.

Tanulmányok

  1. Magyarázza el alkalmazásának legfontosabb felhasználói történetét az első két képernyőképen. Az alkalmazáslistádra érkező felhasználók mindössze 9% -a görget az első két képernyőkép mellett.
  2. Növelje a betűméretet és vágja le a szöveget. Nagyobb kijelzőkkel a felhasználók kondicionálódnak a képernyő beolvasásához és átnézéséhez ahelyett, hogy rákoppintanának és olvasnának. A felhasználók kevesebb mint 4% -a megérinti az Ön képernyőképeit, hogy elolvassa.
  3. Jelölje ki azokat a felhasználói felület elemeket, amelyek a szöveges feliratokat képviselik. Ez megkönnyíti a képernyőképek beolvasását és javítja a képernyőkép áttekinthetőségét.

Most, hogy tudunk egy kicsit arról, hogyan lehet a képernyőképeket olvashatóbbá tenni, kezdjük el alkalmazni a legfontosabb megállapításokat a HeyDoctor képernyőképeire.

1. lépés: Frissítse az iPhone-t az újabb generációkra

A HeyDoctor képernyőképei az iPhone régebbi generációját használják. Bár nem vagyok üzletkötő, szeretem az iPhone -imat, mint az alkalmazásaimat. Frissítve és villámgyorsan (sajnálom).

2. lépés: Csökkentse a szöveget, és tegye érthetőbbé

Megpróbálunk egy kicsit olvashatóbbá tenni a feliratokat azáltal, hogy a felhasználói történeteket tömör formátumban közöljük. Megszüntetjük az alcímet és a leírásokat is a nagyobb címek beillesztése érdekében.

A harmadik képernyőkép az alkalmazás beállítási oldalát mutatja, miközben a felirat arról beszél, hogy az alkalmazáshoz nincs szükség biztosítási kötvényre. Cseréljük le egy relevánsabb képernyőre. Lecserélem az első képernyőre, amelyet megjelenít, amikor megpróbálja receptet kapni az alkalmazásban, közvetett módon arra utalva, hogy a kezdéshez nincs szüksége biztosításra.

3. lépés: Jelölje ki a releváns felhasználói felület elemeket

Mint fentebb megtudtuk, a feliratokra hivatkozó releváns felhasználói felület elemek kiemelése szemléletesebbé és olvashatóbbá teszi őket. Ez segít a felhasználónak a képernyőkép könnyebb beolvasásában is.

Chat felhasználói felület

Nézzük meg, hogyan emeli ki a Tinder a csevegés felhasználói felületét:

Ügyesen használja a profilképeket és a csevegőbuborékokat márkaelemekkel, például színekkel, hogy utánozza valódi chat-kezelőfelületét.

Próbálkozzunk valami hasonlóval:

Helyezzük be ezt az eszközt a képernyőképbe:

Megpróbáltam integrálni HeyDoctor márkáját a chat buborékokba. Nem éreztem szükségét profilképek beillesztésére, mert az orvosoknak, akikkel beszélsz az alkalmazásban, nincs profilképük.

Kártyák és árnyék

Vessünk egy pillantást arra, hogy az Uber hogyan emeli ki felhasználói felületének elemeit.

Imádom ezt a minimális módot a felhasználói felület elemeinek kiemelésére kártyákkal és árnyékokkal. Ezt a stílust fogjuk használni, hogy a képernyőképeinken kiemeljünk néhány elemet.

Úgy döntöttem, hogy feliratokat helyezek át a telefon alá, így a felhasználó meglátja a kijelölt felhasználói felület elemet, mielőtt elolvassa a feliratot.

4. lépés: Kozmetikai változások

A szkennelhetőség optimalizálása érdekében többször módosítottuk a képernyőképeket. Most tegyük jobbá. A jó látványterv hihetetlen csalogató lehet a felhasználók számára, és nem szabad figyelmen kívül hagyni a képernyőképek újratervezése közben.

Adja hozzá a Perspektíva képernyőket

Az izometrikus képernyők modernnek és csiszoltnak tűnnek. Szinte mindenhol láthatunk izometrikus telefonokat, az Apple tökéletesen renderelt termékreklámjaitól kezdve a Dribble erősen csiszolt makettjein (őrült azt gondolni, hogy a Dribble-t eredetileg olyan webhelyként indították, amely alacsony szintű WIP-dizájn prototípusokat oszt meg!)

Néhány perspektívát készítettem a rendelkezésünkre álló képernyőkről.

Az első perspektivikus makettet választom, és két képernyőképre osztom, mert jelenleg csak 3 képernyőképünk van, és legfeljebb 5-et adhatunk hozzá az App Store-ban.

Az első oldalra feliratot adtam - „A személyes orvosod”. Könnyen olvasható, összefoglalja, hogy mit csinál az alkalmazás, és tömör.

Háttér színátmenet módosítása

A háttér és az előtér kontrasztja egy kicsit túl kemény számomra. Változtassuk világosabb kék árnyalatra.

Színátmenetet fogunk készíteni az általunk választott új színekkel.

Nézzük meg, hogyan néz ki ez a képernyőképeinken.

Hozzá fogok tenni néhány gerincet közvetlenül a szöveg alá, hogy megkülönböztető szerepet töltsön be a szöveg és a telefon között.

Elkaphattam egy hűvös izometrikus vektort az internetről. Használjuk az utolsó képernyőkép elkészítéséhez.

Végleges tervek

Előtt

Után

Következtetés

Összességében alig több mint négy apró, ismétlődő módosítást hajtottunk végre. De a végeredmény olyan képernyőkép, amelyet könnyű átpillantani és modernnek érezni. Sőt, ezeknek a módosításoknak egyikéhez sem volt szükség veleszületett művészi képességekre. Néhány alkalmazás tanulmányozása az App Store-ban segített abban, hogy megtudjuk, milyen problémákra kell figyelnünk.

Köszönöm, hogy elolvasta! Ez egy szórakoztató hétvégi projekt volt számomra, és szívesen írtam róla itt. Remélhetőleg ez a bejegyzés betekintést engedett a képernyőképek állapotába az App Store-ban. Nyugodtan adjon visszajelzést vagy tegyen fel kérdéseket az alábbi megjegyzések részben.