Či už si používatelia cez aplikáciu chcú pozrieť denné menu ich obľúbenej reštaurácie, objednať si taxík alebo len hľadajú nenáročné rozptýlenie, intuitívny a hravý interface je kľúčovým atribútom pre obľúbenosť a dlhodobú používanosť aplikácie.

Mobilné interakcie majú totižto omnoho vyššiu dynamiku ako tie desktopové a každá jedna sekunda, počas ktorej musí používateľ premýšľať ako ďalej, trvá preňho večnosť. Týchto základných 6 pravidiel dizajnu pre aplikácie sa možno mnohým bude zdať ako samozrejmosť, no opakovane si všímame, že ich dizajnéri porušujú.

Na úvod už len posledná veta: mobilné aplikácie neslúžia a nikdy by nemali slúžiť ako náhrada za kvalitný responzívny dizajn webu. Mali by ponúkať o niečo viac.

tvorba mobilnych aplikácií

Jedna aplikácia, jedna funkcia

V roku 2004 bol založený web pre fotografov s názvom Flickr.com s možnosťou rýchleho uploadovania a real-time zdieľania fotografií. Hlavný dôraz sa však kládol na priateľstvá, nástenky a chatovacie miestnosti. Postupom času vývojári odstraňovali všetky tieto nadbytočné funkcie a sústredili sa do detailov len a len na to hlavné – na online organizáciu a zdieľanie fotografií. Postupne sa tak stal Flickr najrozsiahlejšou a najpoužívanejšou online službou pre fotografov.

Flickr nepridával funkcie, odoberal ich. Nerozptyľujte zbytočne používateľov a nepremýšľajte nad tým, čo pridať, ale nad tým, čo je kľúčová funkcia vašej aplikácie a ako ju čo najviac vylepšiť. Veď takmer všetky najúspešnejšie aplikácie riešia z pravidla len jeden veľmi špecifický problém, no riešia ho naozaj dobre.

Používajte mikro-interakcie

Priznajme si to, väčšina našich interakcií je pre nás istým spôsobom hra a zábava. Užitočná aplikácia je super, no užitočná a zábavná aplikácia je omnoho lepšia. Jej používanie nás baví a tým pádom sa ju omnoho rýchlejšie naučíme ovládať. Nie je zaujímavé, že množstvo tabletov a telefónov s ľahkosťou zvládnu ovládať aj malé deti, zatiaľ čo nad desktopami sa často krát rozčuľujú aj dospelí?

Mikro-interakcie fungujú, pretože ľudia majú radi spätnú väzbu. Každú akciu by mala sprevádzať jasne pochopiteľná a hravá reakcia. Akákoľvek interakcia a výmena informácií medzi používateľom a aplikáciou teda musí prebiehať hravou vizuálnou formou.

mikrointerakcie mobilných aplikácií

Jednoduchá pekná animácia "puknutia" srdca doslova ľudí láka pre lajknutie čohokoľvek. Zdroj: dribbble.com

mikrointerakcie

Zabavte používateľov počas čakania peknými animáciami. Zdroj: dribbble.com

Viditeľnosť a ergonómia

Telefóny nie sú ako počítače, ľudia ich využívajú napríklad počas státia v rade, chodenia po ulici, sedenia v autobuse či opaľovania na slnku. Na to všetko treba pri dizajnovaní aplikácie myslieť. Tu sú 3 pravidlá ohľadom viditeľnosti a ergonómie, ktoré by každý mobilný UI mal dodržať:

Veľkosť buttonov – trafiť tlačítko alebo odkaz ťuknutím na displej je omnoho náročnejšie ako klik myšou. Robte preto ovládacie prvky dostatočne veľké a nechajte okolo nich dostatok priestoru, aby ste sa vyhli nechceným interakciám. Aktívna plocha veľká cca 1x1 cm (44dp) je pre pohodlné a presné ťuknutie ideálna.

Kontrast – mnoho dizajnérov je zvyknutých pracovať s nižšími kontrastmi, ktoré sú dobre viditeľné na desktope, no na mobilnej obrazovke počas priameho slnka také už byť nemusia. Že má vaša značka tieto odtiene zakomponované v jej identite? Používateľovi je to jedno, zvýraznite ich.

Umiestnenie prvkov – podľa výskumu z dielne Nielsena Normana sú smartfóny až 49% času ovládané jednou rukou. Pri takomto ovládaní sú najdostupnejšie ovládacie prvky v spodnej a strednej časti obrazovky, nakoľko pri klasickom úchope len málo ľudí dotiahne palcom až na vrhol zariadenia. Dole by ste teda mali uložiť najpoužívanejšie prvky ovládania či navigácie, veľmi obľúbený je aj tzv. "bottom bar".
viditeľnosť mobilných aplikácií

Úchop jednou rukou znamená, že palcom je dostupná len obmedzená časť obrazovky.

viditeľnosť mobilných aplikácií

Skvelý príklad "bottom navigation bar" s najdôležitejšími funkciami pre rýchlejšiu dostupnosť.

Chytré nápovedy

Ľudia nečítajú nápovedy, ľudia proste začnú aplikácie používať dúfajúc, že na ich ovládanie nejako prídu. Zoberte si najnavštevovanejšiu web stránku sveta – Google. Naozaj potrebuje niekto návod na vyhľadávanie na Googli? Stačí len napísať otázku do obrovského poľa v strede obrazovky a Google vám po automatickom doplnení výrazov či opravení chýb okamžite zobrazí relevantné výsledky.

Tvorte vaše aplikácie presne také - jednoduché, možno na pohľad až hlúpe, a netlačte používateľov do učenia sa čohokoľvek. Ľudia majú tisíc dôležitejších vecí, ako učiť sa ovládať nejakú aplikáciu. Používanie hlavnej funkcie musí byť cieľovej skupine jasné v priebehu sekúnd, ak nie milisekúnd.

Vedľajšie funkcie a podfunkcie by mali byť pochopiteľné už zo samotnej navigácie, a to nie len ikonou, ale aj textom pod ňou. Ak už je naozaj nutné používateľovi niečo vysvetliť, je dobré to urobiť ľahko dostupnými a interaktívnymi vizuálnymi nápovedami obsahujúcimi minimum textu.

Nápoveda pre mobilné aplikácie

Dropbox vysvetľuje svoje hlavné funkcie jednoduchou a interaktívnou formou. Zdroj: Dropbox

Gestá a pohyb
Interakcia so zariadením môže ísť aj za hranice obyčajného ťukania či klikania, nakoľko používatelia sú veľmi intuitívni ohľadom rôznych gest a pohybov. Výskumy ukázali, že ak boli používatelia vyzvaní niečo vymazať, pokúsili sa takmer bez výnimky presunúť objekt mimo obrazovky.

Gestá sú už dlho dôležitou súčasťou dobrého mobilného UI. No pretože neobsahuju žiadny viditeľne interaktívny prvok, ktorý by užívateľom dával najavo, že vôbec existujú, mali by ste v prípade použitia netradičných gest opäť použiť vizuálne nápovedy a vyzvať užívateľa, aby ich vyskúšal.

gestá a pohyb

Nezabúdajte všetko testovať

Bez ohľadu na to, ako môžu vaše dizajnové rozhodnutia pôsobiť prirodzene a správne, mali by ste ich vždy otestovať na vašej cieľovej skupine používateľov. Nie všetky gestá, mikrointerakcie či nápovedy musia byť jasné každému, a práve preto je dôležité testovať ich od samého začiatku.

Spôsobov testovania je veľa, od testovania použiteľnosti či eyetrackingu až po použitie first-click a multi-click testov. V Lighting Beetle máme dlhoročné skúsenosti s testovaním a dizajnom mobilných aplikácií a radi vám poradíme, akým smerom sa uberať v prípade tvorby mobilnej aplikácie.