Člověk vaši appku nepoužívá v klidu u stolu se dvěma monitory. Stojí v tramvaji, drží se jednou rukou, ovládá ji palcem té druhé, na slunci špatně vidí na displej a za chvíli mu přijde hovor, který ho z appky vykopne. Když to při návrhu nemáte v hlavě, postavíte krásnou appku, kterou se reálně špatně ovládá. A to je ten nejtišší způsob, jak přijít o uživatele: nestěžují si, prostě ji odinstalují.

Mobil není zmenšený web

Nejčastější chyba je vzít desktopový web nebo jeho návrh a jen ho zúžit, dokud se nevejde do telefonu. Vznikne z toho appka plná drobných odkazů, do kterých se nedá trefit, a obsahu nacpaného tak hustě, že se v něm palcem nedá pohnout.

Mobil má svoje vlastní pravidla, protože se používá jinak:

Ovládá se palcem, ne kurzorem. Nemáte přesnost myši. Cíle musí být velké a od sebe, jinak lidé mačkají vedle.
Displej je malý. Vejde se míň. Místo deseti voleb na jednu obrazovku ukažte tři důležité a zbytek schovejte o úroveň níž.
Používá se za pochodu a po kouskách. Sezení trvá pár vteřin, ne půl hodiny. Hlavní akce musí být na dosah hned, ne po třech proklicích.
Pořád něco ruší. Notifikace, hovor, ztráta signálu v podchodu. Appka musí přežít to, že ji člověk uprostřed úkolu opustí a za hodinu se vrátí. Rozdělaný formulář, který se mezitím smaže, je důvod appku zavřít.

Neptejte se „jak tohle vypadá na webu“. Ptejte se „co tady člověk potřebuje udělat jednou rukou ve frontě u pokladny“.

Respektujte platformu, na které appka běží

Apple i Google mají svoje pravidla, jak má appka vypadat a chovat se: Human Interface Guidelines u iOS, Material Design u Androidu. Nejsou to jen estetické příručky. Popisují to, co lidé na daném telefonu znají a očekávají, aniž by o tom přemýšleli.

Uživatel Androidu čeká, že ho gesto nebo systémové tlačítko zpět vrátí o krok. Uživatel iPhonu čeká, že tlačítko sdílení otevře známý systémový panel. Když tyhle zvyklosti porušíte, appka působí cize a člověk se ztrácí, i když je „hezká“.

Sjednoťte to, co je vaše značka. Barvy, logo, tón, ikonografie. Tady chcete, aby appka vypadala na obou systémech jako vy.
Ctěte to, co patří systému. Gesto zpět, sdílení, datum a čas, výběr ze seznamu, oznámení. Tady nevymýšlejte vlastní řešení, jen byste si zadělali na zmatek.

Úplně identický vzhled na iOS i Androidu zní lákavě, ale něco stojí. Buď do appky pustíte cizí prvky, které tam domácím uživatelům nesednou, nebo proti platformě bojujete a platíte to vývojem navíc. Většině týmů se vyplatí držet jednotnou značku a u ovládacích prvků nechat každý systém být sám sebou.

Sáhněte po navigaci, kterou lidé už znají

Navigace je to poslední, na čem chcete být originální. Lidé mají v ruce stovky appek a všechny fungují podobně. Té podobnosti využijte, místo abyste uživatele učili nový systém.

Spodní lišta (tab bar). Tři až pět hlavních sekcí, mezi kterými se přepíná. Skvělé pro appku, kde se člověk pohybuje mezi několika rovnocennými místy (přehled, hledání, profil).
Zanořování (stack / push). Klepnete na položku v seznamu, obrazovka se posune doprava, tlačítko zpět vás vrátí. Základní vzor pro „seznam → detail“.
Spodní panel (bottom sheet). Vysune se odspodu, ukáže volby nebo doplňující obsah a zase zmizí. Je na dosah palce a nevytrhne člověka z kontextu.
Modální okno (modal). Překryje celou obrazovku kvůli jednomu uzavřenému úkolu, třeba přihlášení nebo zadání platby. Používejte střídmě: každé modální okno je přerušení a chce jasné „hotovo“ i „zrušit“.

Pravidlo je jednoduché: hlavní rozcestí dejte do spodní lišty, do hloubky se zanořujte stackem a vyskakovací věci si nechte na krátké, dobře ohraničené úkoly.

Hlídejte dosah palce, velikost cílů a stavy obrazovek

Vezměte si vlastní telefon a držte ho jednou rukou. Palec pohodlně dosáhne na spodní polovinu displeje, na horní rohy skoro vůbec. Proto patří hlavní akce a navigace dolů, kam se dá trefit, a ne nahoru, kam musíte šaškovat s přehmatáváním.

Dělejte cíle dostatečně velké. Apple i Google doporučují tapací plochu zhruba 44 až 48 bodů. Vizuálně může být ikona menší, ale klikatelná oblast kolem ní musí být velká.
Dejte cílům rozestupy. Dvě tlačítka nalepená na sebe znamenají, že lidé budou mačkat to vedlejší. Obzvlášť když je akce nevratná.

A pak je tu věc, na kterou se v návrzích nejčastěji zapomíná: appka nežije jen ve šťastné variantě, kdy je všechno načtené a v pořádku. Navrhněte i ostatní stavy, jinak je za vás v nejhorší chvíli „navrhne“ prázdná bílá obrazovka.

Načítání. Co člověk vidí, než data dorazí? Kostra obsahu působí svižněji než věčně se točící kolečko.
Prázdno. První spuštění, prázdný košík, žádné výsledky hledání. Místo prázdna sem patří věta, co dělat dál.
Chyba. Spadlý internet, server neodpovídá. Řekněte lidskou řečí, co se stalo, a dejte tlačítko „zkusit znovu“. Nikdy nenechte appku jen tiše viset.

Přístupnost na mobilu není navíc, je to standard

Přístupná appka jde používat i člověku, který špatně vidí, neslyší nebo má roztřesené ruce. Obě platformy k tomu mají skvělé nástroje rovnou v systému, takže velkou část máte zadarmo, pokud na ni při návrhu myslíte.

Respektujte velikost písma ze systému. Spousta lidí má v telefonu zvětšené písmo, protože jinak nečtou. Když máte text natvrdo přibitý na pevnou velikost, rozbije se jim layout nebo to prostě nepřečtou.
Počítejte s VoiceOverem a TalkBackem. Čtečky obrazovky předčítají, co je na displeji. Aby fungovaly, musí mít každé tlačítko a ikona srozumitelný popisek, ne jen obrázek.
Držte kontrast a nespoléhejte jen na barvu. Světle šedý text na bílé vypadá draze a venku ho nikdo nepřečte. A „zaškrtnuté je zelené, chyba je červená“ nepomůže člověku, který barvy nerozliší. Přidejte ikonu nebo text.

Než appku pošlete do světa, projděte ji jednou rukou ve zvětšeném písmu a podruhé se zapnutou čtečkou. Co si projdete sami, vás nepřekvapí v recenzích.

Berte to i jako byznys. Přístupnost vám otevírá uživatele, o které byste jinak přišli, obě obchody ji čím dál víc očekávají a v EU se kolem ní utahují pravidla. Appka, která sedne do ruky úplně každému, je prostě lepší appka.