Testovanie použiteľnosti mobilnej aplikácie. Technické vlastnosti displejov a OS mobilných zariadení. Rozvrh tréningov v kalendári

Neuveriteľný nárast popularity mobilných aplikácií a služieb urobil prácu dizajnéra UX náročnejšou a zaujímavejšou. Aplikácie sa stávajú zaujímavejšími, zložitejšími a v súvislosti s tým je ťažšie ich nielen vyvíjať, ale aj testovať. Testovanie aplikácie z pohľadu používateľa je teraz viac ako kedykoľvek predtým míľnikom rozvoj.

Žiaľ, na rozdiel od situácie pri vývoji desktopových aplikácií neexistuje takýto špeciálny nástroj na testovanie a zaznamenávanie testov použiteľnosti mobilných aplikácií. softvér, ako Silverback alebo Camtasia, ktoré môžete „vybaliť z krabice“ a začať testovať.

Aj keď nevyvíjate mobilnú aplikáciu, je pravdepodobné, že väčšina návštevnosti vášho webu pochádza mobilné kanály. Vykonávanie pravidelných testov mobilnej použiteľnosti je praktické jediná cesta zhodnotiť, ako dobre tento kanál funguje pre vašich zákazníkov, nakoľko je pre nich užitočný a pohodlný.

Bude to chcieť trochu „hackovania“. Nie, toto nie je o hackovaní, ale skôr o netriviálnych metódach používania niektorých vecí. Veríme, že existuje jeden taký „hack“, ktorý možno bezpečne nazvať najlepším svojho druhu. Ak chcete otestovať použiteľnosť zariadenia iPhone alebo Android OS, potom riešenie, ktoré vám povieme, je veľmi kvalitné, produktívne a cenovo dostupné.

Trochu histórie: drôty a lepiaca páska

Za starých čias sme pomocou „sánok“ dali smartfón a fotoaparát do polohy, ktorá nám umožnila zaznamenávať, čo sa deje na obrazovke smartfónu, kým ho používateľ používa. Na vytvorenie sánok sme si kúpili niečo (pozri fotografiu nižšie) z akrylu, ktorý sa nám prispôsobil tvaru a ohýbal ho určitým spôsobom.

Na tieto sane sme pripevnili webkameru lepiacou páskou a telefón na opačnú stranu suchým zipsom. Pri pohľade späť môžeme povedať, že zariadenie vyzeralo dosť nemé a vlhké. To nebolo príliš prirodzené a ešte menej pohodlné pre používateľov, ktorí sú zvyknutí držať smartfón súčasne dvoma rukami.

Technicky to nebolo spoľahlivé. Použili sme dve kamery pripojené k tomu istému notebooku (kameru na saniach a vstavanú kameru notebooku), museli sme spustiť dve aplikácie fotoaparátu súčasne. To všetko viedlo k zníženiu výkonu celého systému, často sa vyskytli ťažkosti v práci.

Vyskytlo sa veľa ďalších problémov, ako je odlesky obrazovky a zaostrenie fotoaparátu. Vo všeobecnosti trvalo nastavenie a stabilizácia takéhoto systému v spojení s testovacím prostredím veľa času, ale toto najlepšie riešenie ktoré sme vtedy poznali. Pre používateľov, ktorí podľa scenára mali aplikáciu používať „na záznam“, však táto inštalácia vyzerala veľmi neprirodzene.

Možno modernejším a vhodnejším spôsobom je bezdrôtová komunikácia.

V ideálnom prípade by testovanie hardvéru a softvéru malo byť pre používateľov neviditeľné. Chceme simulovať čo najprirodzenejšie prostredie pre používateľov smartfónov – bez káblov, kamier a iných šikovných pomôcok.

Dizajnérsky tím UX sa musí zamerať na učenie a pochopenie. Nechceme zapotiť inštaláciu a obávať sa výpadkov.

Povedzme si o jednoduchom nastavení, ktoré nám umožňuje dosiahnuť všetky tieto ciele. Umožní to dizajnérskemu tímu UX sústrediť sa na to, na čom skutočne záleží, a používateľom to umožní sústrediť sa na svoje telefóny. Tento systém je maximálne spoľahlivý a dá sa bezpečne používať pri práci, ktorú robíme.

Zameriame sa na testovanie použiteľnosti na smartfónoch využívajúcich MacBook ako rekordér. Avšak z PC do systém windows funguje tiež.

S príjemným, podľa vášho názoru, dizajnom, pohodlnou funkčnosťou, užitočné možnosti, vydala vydanie produktu, ale... Napriek silnej marketingovej podpore začali používatelia odchádzať ku konkurencii.

Čo sa deje? Dôvodov môže byť viacero. Jedným z najpravdepodobnejších problémov je použiteľnosť vášho mobilná aplikácia. Aby ste predišli takejto situácii, odstráňte všetky nedostatky vopred a pomôže vám kompetentné testovanie použiteľnosti. Postup je nasledovný.

Krok 1. Inštalácia analytického systému do mobilnej aplikácie

Pri vývoji mobilnej aplikácie by ste do nej mali okamžite vložiť: Yandex.Metrika, Google.Analytics, Flurry, Mixpanel. Po nejakom čase, povedzme o mesiac, služba poskytne informácie o tom, kto a hlavne ako používa mobilnú aplikáciu.

Napríklad Flurry analyzuje:

• počet a hlavné charakteristiky používateľov (pohlavie, vek, geografia používania aplikácie)
• frekvencia spúšťania aplikácií
• počet a dĺžka sedení
• navigácia a udalosti v rámci aplikácie (prechody medzi obrazovkami)
• poruchy

Všetky tieto údaje pomôžu pochopiť, akými trajektóriami sa používatelia v rámci aplikácie pohybujú, z ktorých obrazoviek najčastejšie odchádzajú a s čím to môže súvisieť.

Povedzme, že vo väčšine prípadov používateľ opustí aplikáciu vo fáze plnenia košíka. Aké by mohli byť dôvody?

• Návštevník nevie, ako vyplniť hlavné polia v košíku.
• Nevidí niektoré položky v košíku a nerozumie, či boli pridané alebo nie.
• Používateľovi nie je zrejmé, či platba prebehla alebo sa vyskytli nejaké ťažkosti.

Ak chcete otestovať hypotézy o opustení aplikácie, musíte otestovať použiteľnosť aplikácie na rôznych postavách a scenároch.

Krok 2. Vytváranie postáv a scenárov pre prácu v mobilnej aplikácii

Postavy a scenáre sú dobrým nástrojom na opis cieľové publikum aplikácie.

Postava je na jednej strane akási abstrakcia, modelovaný predstaviteľ segmentu publika a na druhej strane veľmi špecifický človek s vlastnými vzormi správania, zvykmi a potrebami. Na ich základe je zostavený užívateľský scenár interakcie s aplikáciou.

V prípade aplikácie online nakupovania môže scenár vyzerať takto:

• spustenie aplikácie
• zadanie vyhľadávacieho dopytu
• výber zaujímavého Výsledky vyhľadávania
• charakterizačná štúdia
• študovať recenzie
• objednať
• dostávať oznámenia o dodacej lehote

Po nainštalovaní analytického systému, vytvorení postáv a scenárov na používanie mobilnej aplikácie je čas prejsť na ...

Krok 3. Vlastné testovanie použiteľnosti

Na otestovanie použiteľnosti mobilnej aplikácie je potrebné nájsť niekoľko ľudí, ktorí najlepšie zodpovedajú popisu postáv, urobiť im zoznam úloh, aby si respondenti v aplikácii prešli potrebné scenáre. Ak aplikácia umožňuje nákup tovaru alebo služieb, musíte používateľom poskytnúť bankovú kartu.

Počas testovania by respondenti mali dostať konkrétne ciele a presne sledovať, ako sa budú realizovať.

V hodnotiacich hárkoch použiteľnosti by sa malo uviesť:

• či bol cieľ dosiahnutý v mobilnej aplikácii
• aké ťažkosti sa vyskytli počas testovania
• koľko času trvalo používateľovi dosiahnuť cieľ

Krok 4. Analýza prijatých údajov

Po testovaní by ste si mali preštudovať hodnotiace hárky a analyzovať, v ktorých fázach práce v mobilnej aplikácii vznikajú ťažkosti.

Jeden z možné príčiny- chyby v . Preťažené rozhranie, zložitá a nezrozumiteľná navigácia, viacstupňový registračný systém – to všetko zmätie používateľa a znemožní mu vykonávať cielené akcie v aplikácii.

Krok 5. Závery a riešenie problémov

Vytváranie zoznamu kritické chyby, musíte zlepšiť použiteľnosť mobilnej aplikácie a potom vykonať kontrolný test a uistiť sa, že aplikácia je oveľa lepšia.

Testovanie použiteľnosti mobilnej aplikácie – Hlavná časť jeho úspechu u cieľového publika. Odporúča sa vykonať audit použiteľnosti vo fáze prototypu aj po vydaní mobilnej aplikácie. A potom párkrát do roka - pre včasné odstránenie chýb a samozrejme, aby sme zostali v trende mobilného vývoja.

Nikto nemá rád surový produkt a v prípade akýchkoľvek problémov s mobilnou aplikáciou nahnevane spomína na pokrivených vývojárov. Pre zákazníka a používateľov nezáleží na tom, koľko úsilia vynaložilo na implementáciu prefíkaného algoritmu ukladania do vyrovnávacej pamäte aplikácie v pozadie. Vo väčšine prípadov naozaj ocenia len vizuálnu časť a prácu s rozhraním.

Pre našich zamestnancov sme vytvorili kontrolný zoznam bežných chýb v použiteľnosti mobilných aplikácií. Tento zoznam sa stal šikovný nástroj na skúšobnú jazdu ďalšieho produktu pred dodaním. Moji kolegovia vývojári sa proti tomu kontrolujú a testeri akceptujú prácu programátorov.

Tak poďme na to.

Práca s obrazovkami

Všetky navigačné prvky na displeji musia mať dostatočnú veľkosť a musia byť umiestnené v optimálnej vzdialenosti od seba (aby používateľ zreteľne trafil tie správne);

Aplikácia by nemala padať, keď je rýchla opakované stlačenie jedno alebo viac tlačidiel súčasne;

Žiadne prázdne obrazovky. Je dôležité, aby používateľ v každej fáze práce s aplikáciou chápal, čo má robiť ďalej a čo sa práve deje.

Pamäťové zdroje

Úniky pamäte sa môžu vyskytnúť počas dlhých období práce vo vnútri aplikácie a na oknách s veľkým počtom obrázkov. Často sa objavuje, ak ukladanie obrázkov do vyrovnávacej pamäte nefunguje správne;

Chyby aplikácie sa môžu objaviť v reakcii na nedostatočnú pamäť na fungovanie operačného systému smartfónu - testujte počas behu na pozadí aj v aktívnom režime;

Systémové chyby pri prenose alebo inštalácii aplikácie na SD kartu sú zjavným, ale bežným problémom;

Technické vlastnosti displejov a operačných systémov mobilných zariadení

Na sietnicových displejoch sa text a ďalšie prvky rozhrania zobrazujú menšie ako na bežných. V súlade s tým, ak obrázky pre sietnicovú obrazovku spadajú do verzie bez sietnice, môžu byť zobrazené jednoducho obrovské;

Malo by byť zabezpečené prispôsobenie aplikácie režimu na šírku a na výšku smartfónu;

Kontrola verzie OS počas inštalácie musí vylúčiť možnosť inštalácie aplikácie na nepodporované mobilné zariadenie;

Je dôležité, aby vizuálne komponenty aplikácie zodpovedali svojmu účelu z hľadiska významu a konceptov platformy (riešenia, ktoré sú optimálne pre jednu platformu, sa môžu ľahko stať nevhodnými pre inú);

Reakcia na vonkajšie podnety

Upozornenia na iné aplikácie, hovory, SMS, MMS;

Nabíjanie zariadenia.

Vybitie, vypnutie alebo vybratie batérie zariadenia;

Čas a podmienky prechodu zariadenia do pohotovostného režimu vrátane ochrany heslom;

Zakázanie a povolenie mobilnej siete, Režim v lietadle, Bluetooth, GPS.

Pripojenie a odpojenie USB kábla, SD karty a iných externých zariadení;

Strata spojenia s proxy alebo serverom;

Lokalizácia

Kontrola správnosti a správnosti prekladu;

Objasnenie zhody všetkých označení s formulármi a tlačidlami, na ktoré sa vzťahujú;

Kontrola špecifík internacionalizácie, oddeľovače v číslach, formáty dátumu. Napríklad sme zvyknutí na dátum vo formáte DD.MM.RR, kým pre Američanov všeobecne akceptovaný MM.DD.RR.

Spätná väzba

Rýchlosť odozvy prvkov rozhrania by mala byť dostatočne veľká, dokonca aj nanajvýš slabé zariadenia zo všetkého, čo vaša aplikácia podporuje;

V každom okamihu čakania by sa mal zobraziť indikátor načítania obsahu alebo zodpovedajúca správa o požadovanom čase;

Oznámenia s chybou v prístupe k mobilnej sieti, Bluetooth, GPS by sa mali zobrazovať správne;

Varovné správy by mali byť používateľovi zrejmé, ak sa pokúša vymazať dôležité informácie;

Oznámenia o ukončení hry alebo procesu by sa mali vždy zobrazovať správne;

Dôležitá je synchronizácia upozornení (zvukov a vibrácií aplikácie) s ostatnými udalosťami, ktoré sa zobrazujú na obrazovke.

Aktualizácie

Musí podporovať rovnakú verziu operačného systému ako predošlá verzia aplikácie - ak aktualizovaná verzia používa novú funkcionalitu operačného systému, potom to musíte urobiť vyzlečená verzia aplikácie pre predchádzajúce podporované verzie OS.

Po nainštalovaní aktualizovanej verzie musia byť všetky používateľské údaje v aplikácii uložené.

Uveďme si jednoduchý príklad z praxe firmy – aplikácia TRENDMEON Lifestyle. V pôvodnej verzii aplikácie sa pri prvom spustení aplikácie stiahla celá databáza zliav naraz a následne sa zobrazila lokálne.

Čoskoro sa však objavil problém - ak mal používateľ pomalé internetové pripojenie, databáza zliav sa načítala pomaly. Používatelia to vnímali ako poruchu. Mysleli si, že sa aplikácia zasekla a ukončili ju. Po prvých negatívnych recenziách sme zmenili algoritmus zobrazovania zliav (teraz nie je načítaná celá databáza naraz), čím sme skrátili čakaciu dobu pri prvej návšteve na 1 sekundu. Okrem toho upozorňujeme používateľa na možné oneskorenia pri prvom vstupe do aplikácie.

Príkladov maličkostí, ktoré sa v našej praxi ukázali ako kľúčové, bolo veľa. Budeme radi, ak náš zovšeobecnený zoznam tých hlavných pomôže ďalším spoločnostiam pri vývoji ich vlastných mobilných aplikácií. Pozývame vás, aby ste sa podelili o svoje skúsenosti v komentároch.

Navigácia v mobilných verziách stránok a aplikácií by mala byť vizuálna, zrozumiteľná a navyše zaberať minimum miesta na obrazovke. V skutočnosti by mal dopĺňať a niekedy aj nahrádzať vyhľadávacie nástroje a existuje na to niekoľko dôvodov:

1. Používatelia niekedy nevedia, čo by na vašej stránke chceli nájsť, takže vaším cieľom je pomôcť im to zistiť vymedzením ich vyhľadávania, ako sú kategórie produktov.
2. formulovať správne Vyhľadávací dopyt- nie takto jednoduchá úloha, ako sa môže zdať a ľudia od prírody sú tiež leniví. Oveľa efektívnejšie by bolo ponúknuť ich riešenia na kľúč ako navigačné odkazy.
3. Napokon, vyhľadávací panel na webovej lokalite často nefunguje tak dobre, ako by používatelia očakávali.

Na mobilné zariadenia ach, správna navigácia je ešte dôležitejšia: zaberá významnú časť obrazovky a priťahuje veľa viac pozornosti než na pracovnej ploche. Z dôvodu nedostatku miesta môže byť rýchle vyhľadávanie ťažký panel vyhľadávania a odkazy na ponuku v hornej časti stránky potrebné informácie. Nenúťte používateľov posúvať, venujte pozornosť týmto prvkom – mali by byť viditeľné na prvý pohľad, no zároveň by nemali porušovať: prioritu obsahu pred rozhraním.

Toto je jeden z hlavných problémov súčasnosti. mobilné rozhrania: Ako zviditeľniť navigáciu a jednoducho ju používať bez odvádzania pozornosti od obsahu. Zvážte kľúčové princípy budovanie navigácie mobilných stránok a aplikácií na konkrétnych príkladoch.

Horná navigačná lišta

Hornú navigačnú lištu zdedili mobilné stránky z desktopových zariadení. Tento prúžok v hornej časti obrazovky, ktorý obsahuje hlavné navigačné odkazy, je populárny a dosť efektívny nástroj, ale má dve významné nedostatky. Po prvé je to dobré len vtedy, keď je na stránke relatívne málo ďalších navigačných prvkov a po druhé zaberá príliš cenné miesto v hornej časti obrazovky.

Tu je napríklad, ako vyzerajú hlavné stránky mobilnej verzie webu a aplikácie BBC Google Play aplikácie:

Upozorňujeme, že Google Play dokázalo umiestniť viac položiek do navigačného panela pomocou „kolotoča“

Panel kariet

Panel kariet je najbližším príbuzným horného navigačného panela a často sa používa v aplikáciách. Dá sa umiestniť hore
stránka (väčšinou Android) a spodná (IOS).

Panely kariet sa zvyčajne nachádzajú vo väčšine mobilných aplikácií a majú rovnaké nevýhody ako navigačný panel. Zásadný rozdiel je v tom, že lišta kariet je pevná, t. j. vždy viditeľná na obrazovke, aj keď používateľ roluje po stránke nadol, zatiaľ čo navigačná lišta sa spravidla jednoducho posúva spolu s obsahom stránky. Aj keď sa niekedy používa takzvaná „pevná navigácia“, keď navigačná lišta zostane v hornej časti obrazovky alebo sa tam automaticky zobrazí, keď používateľ začne posúvať stránku nahor.

Príkladom môže byť páska Facebook novinky na mobilné platformy. Facebook na iPhone (vľavo) a Androide (vpravo) používa panel kariet na základnú navigáciu v aplikácii. Karty sú usporiadané podľa oficiálnych údajových pokynov operačné systémy: v spodnej časti na iPhone a v hornej časti stránky na Androide. Súčasne sú podpísané aj navigačné ikony na IOS:

Ak je ich viac ako päť, je ťažké ich všetky umiestniť na panel pri zachovaní optimálneho stavu dotyková obrazovka veľkosť. Samozrejme, môžete použiť „kolotoč“, ako v príklade s Google Play – teda rozdeliť položky navigácie do kategórií, no nie vždy je to vhodné. Používateľ nemôže vždy uhádnuť, aké položky sa za nimi skrývajú ďalší prvok kolotočov a nebude ich vždy kontrolovať.

Príklad - stará verzia Aplikácie Weather Channel: Tu je lišta kariet implementovaná tak, že nie je hneď jasné, že každá karta v spodnej časti pod sebou skrýva niekoľko ďalších. A o to ťažšie je uhádnuť, ktoré položky sú tam obsiahnuté:

Ak sa rozhodnete použiť navigačnú lištu alebo lištu kariet, mali by byť hlavným prvkom rozhrania, no stále je tu určitý priestor pre ďalšie nástroje, ako napríklad vyhľadávacie pole.

Ak má vaša lokalita 4 až 5 hlavných možností navigácie, môže mať zmysel, aby boli stále viditeľné, najmä ak vedú na často používané stránky a možnosti. Nezabudnite však, že navigácia by mala byť relevantná pre kontext aplikácie. Ak sú teda ďalšie požadované prvky- napríklad ikona košíka, vstup do účtu atď., potom je potrebné brať do úvahy aj to, aby rozhranie vo všeobecnosti nezaberalo príliš veľa miesta.

Napríklad stránka s výsledkami vyhľadávania na lokalite AutoZone vyzerá takto:

Navigačná lišta síce obsahuje iba štyri hlavné položky (Obchod, Poradenstvo pri oprave, Objednávka a Nájsť predajňu), no okrem nich sa na stránke zobrazuje ešte niekoľko prvkov rozhrania (logo, nákupný košík, vyhľadávací panel, karty s výsledkami vyhľadávania, atď.), takže celkovo zaberajú asi tretinu obrazovky.

Skryté menu (sendvič a ďalšie možnosti)

Sendvičové menu alebo hamburgerové menu navigačné menu, obsahujúci niekoľko položiek alebo dokonca niekoľko podmenu a rozbalí sa až vtedy, keď naň používateľ klikne. V zloženom stave zaberá minimum miesta a to je jeho výhoda aj nevýhoda, keďže daný prvok navigácia je menej nápadná ako bežné menu.

Príkladom použitia sendvičového menu je webová stránka USA Today. Tu sa aplikuje na hlavné možnosti navigácie. Otvára sa kliknutím na ikonu vľavo hornom rohu obrazovka:

Ďalšou možnosťou skrytej navigácie je, že ponuka sa zobrazí iba vtedy, keď používateľ prejde prstom po obrazovke. Napríklad v aplikácii Sephora na interné stránky Menu je možné vyvolať potiahnutím prstom zľava doprava:

Samotné tlačidlo menu však nie je viditeľné, takže mnohým používateľom táto funkcia pravdepodobne unikne a obmedzia sa len na viditeľné tlačidlá.

Vo všeobecnosti, ako je uvedené vyššie, skryté menu má oproti nim jednu veľkú výhodu navigačná lišta- Zaberá minimum miesta. Majte to však na pamäti najviac odkazy na navigáciu v čase budú skryté. Na ich použitie musí používateľ cielene prejsť do menu a vybrať si jednu z položiek, na čo ešte nie je celkom zvyknutý, napriek tomu, že hamburgerové menu sú už v mobilných verziách stránok celkom bežné. V tomto ohľade stojí za to dokončiť používanie navigačného systému dodatočné nástroje- napríklad krížové odkazy.

Navigačný uzol

Ide o názov stránky (zvyčajne hlavnej stránky webu), ktorá obsahuje všetky kľúčové navigačné prvky. Toto je uzlový bod, križovatka všetkých ciest, kam sa užívateľ vracia vždy, keď potrebuje prejsť na iný úsek.

Nevýhodou tohto prístupu je, že domovskej stránke musíte to úplne podriadiť potrebám navigácie a prinútiť používateľa urobiť krok navyše (návrat na hlavnú stránku) pri pohybe po stránke.

Ide predovšetkým o stránky a aplikácie, ktoré slúžia nie na prezeranie obsahu, ale na dosiahnutie veľmi konkrétne úlohy– napríklad odbavenie na let alebo zmeny cestovného mobilnej komunikácie. V takýchto prípadoch používateľ zriedka vykoná viac ako jednu úlohu za návštevu, takže vracanie sa na hlavnú stránku a výber inej navigačnej vetvy ho nebude obťažovať.

Názorným príkladom je mobilná verzia Webová stránka United Airlines. Na domovskej stránke sú umiestnené kľúčové navigačné prvky a na tých vnútorných v hornej časti stránky je tlačidlo „Domov“ na návrat k hlavnému. Okrem toho používatelia zriedka vykonávajú dva typy akcií (napríklad nákup letenky a registráciu na let) počas jednej návštevy. Väčšina z nich teda toto tlačidlo potrebovať nebude.

závery

Do mobilná navigácia jednoduché a pohodlné nie je také jednoduché kvôli obmedzeniam spojeným s malou veľkosťou obrazovky. Môžete sa pokúsiť vyriešiť tento problém rôznymi spôsobmi, ale takmer vždy narazíte na problémy s použiteľnosťou.

Základom je vybrať si také riešenia, ktorých nedostatky sa najmenej prejavia konkrétne na vašom webe:

1. Sendvičové menu bude prekážať veľké množstvo navigačné odkazy, ktoré sa však stanú viditeľnými, až keď používateľ vyvolá menu. Tento prístup je relevantný pre stránky zamerané hlavne na prezeranie obsahu.
2. Navigačný panel a panel kariet zaberajú určitý priestor na obrazovke, ale fungujú dobre, keď je na výber málo možností.
3. Na stránkach zameraných na riešenie konkrétnych problémov môžete použiť úvodná stránka ako navigačné centrum.