Vývoj mobilních aplikací: jak navrhnout navigaci

Navigace či menu jsou základní ovládací prvky uživatelského rozhraní nejen mobilních aplikací, ale i webových stránek. Vizuální a funkční stránka navigace v mobilní aplikaci tak má zásadní vliv na uživatelský zážitek či použitelnost appky. Pokud se o vývoj mobilních aplikací nebo jejich designování zajímáte, tak zkuste naše tipy, jak navigaci navrhnout.

Navigace v mobilních aplikacích

Úvodní odstavce již naznačily, jak moc je návrh navigace důležitý pro celý vývoj mobilní aplikace, případně tvorbu webu. Zásady dobrého návrhu lze shrnout do několika bodů, navigace by měla být:

• dobře viditelná,
• snadno pochopitelná,
• doplněná vhodnými ikonami,
• neměla by zakrývat obsah aplikace.

S funkčním návrhem i základní podobou navigace, nebo menu, se typicky nevyplatí příliš experimentovat. Designéři proto ve většině případů vycházejí z osvědčených konceptů, které nenarušují uživatelskou zkušenost (UX). Mezi tyto koncepty patří: lišta se záložkami, hamburgerové menu, plovoucí tlačítko, celostránková navigace nebo navigace postavená na gestech.

Lišta se záložkami

Lišta se záložkami neboli tabbar je dnes pravděpodobně nejrozšířenější forma navigace. Vyskytuje se na většině stránek aplikace a je vždy dobře viditelná. Jedná se o univerzální řešení, které se hodí pro nejrůznější typy aplikací.

Její největší předností je zobrazení všech sekcí/funkcí appky na jednom místě. Uživatel tak získává přehled, co vše může s aplikací dělat. V případě, že se pro tuto variantu rozhodnete, tak zvyšujete šanci na to, že uživatel objeví její přidanou hodnotu a naplno docení energii, kterou jste do vývoje mobilní aplikace vložili.

Lišta se záložkami současně slouží k upřesnění toho, kde v aplikaci se právě nacházíte. Díky tomu máte vždy přehled o tom, v jaké fázi procesu jste nebo kam máte kliknout, abyste se posunuli někam dál. Do lišty byste neměli umisťovat více než pět záložek. V opačném případě ztrácíte zmíněnou výhodu v podobě přehlednosti.

Nevýhodou lišty se záložkami, jakožto hlavní navigace aplikace, je pak právě omezený počet položek, který do ní můžete vložit. Měli byste si proto dobře rozmyslet, která část aplikace je natolik důležitá, aby se v ní objevila. Další nevýhodou je prostor, který na spodní či horní části obrazovky zabírá.

Hamburgerové menu

Fenoménem se za posledních několik let stalo takzvané hamburgerové menu, dobře známé zejména z mobilních verzí webových stránek. Nabídka se v tomto případě skrývá pod ikonou připomínající hamburger a zobrazuje se až poté, co uživatel na ikonu klikne.

Hamburgerové menu v sobě může ukrývat takřka libovolný počet záložek a hodí se tedy pro vývoj mobilních aplikací s větším množstvím kategorií – například pro eshopy. Může ovšem přijít vhod i v opačné situaci – tedy ve chvíli, kdy aplikace nemá příliš rozšířenou funkcionalitu a uživatel tak vidí vše podstatné, aniž by musel do menu vstupovat.

Výhodou této podoby navigace je, že ponechává maximální prostor pro obsah a nenarušuje design aplikace. UI/UX designer se tak nemusí v podstatě ničím omezovat. Nevýhodou pak zůstává, že menu nemusí být v důsledku zanořování vždy dostupné ze všech stránek aplikace. Další nevýhodou je nutnost více úkonů pro manipulaci s menu.

Plovoucí navigace

Specifičtější formou navigací mobilních aplikací je plovoucí tlačítko, které současně slouží jako CTA – výzva k akci. Plovoucí menu se v appkách obvykle vyskytuje v kruhové podobě, přičemž typicky slouží ke zdůraznění hlavní funkce aplikace nebo ke zjednodušení nejčastějšího úkonu – plní například funkci tlačítka play, které se zobrazuje i ve výpisu seznamů skladeb v přehrávačích.

Pokud se tak pro plovoucí menu rozhodnete, tak se nevyhnete další prioritizaci funkcionality. Plovoucí navigace mobilních aplikací přitom nemusí nutně sloužit pouze k jednomu úkonu, jakožto i otevření podmenu určité funkce. Například kliknutí na plus v kolečku, které vám dá na výběr, zda chcete přidat textovou, nebo hlasovou poznámku v poznámkovém bloku.

Celostránková navigace

Koncept celostránkové navigace lehce odporuje původním zásadám pro vývoj mobilních aplikací, respektive návrh navigace, uvedeným v předchozích odstavcích. Celostránková navigace plní úlohu domovské stránky, kde zobrazuje obsah nebo funkce seřazené do kategorií.

Může se tak jednat například o zobrazení všech kategorií eshopu nebo seskupené úpravy v nějakém grafickém editoru. Tato varianta navigace nedává prostor pro umístění žádného dalšího obsahu.

Navigace mobilních aplikací postavená na gestech

Gesta byla již od prvního iPhonu nedílnou součástí operačního systému iOS. S příchodem Androidu verze 10 se ovšem rozšířila i do dalších, „nejablečných“ zařízení. Největší výhodou gest je jejich intuitivní používání a s tím i snazší ovládání. Je to v podstatě neviditelná navigace, kterou zvládnete při troše cviku používat, aniž byste přemýšleli nad tím, co vlastně chcete udělat.

Výhodou této podoby navigace je opět maximální prostor pro UI/UX designéra, stejně jako obsah aplikace. Appka také působí modernějším a elegantnějším dojmem. Hrozí zde ovšem riziko nepochopení principu, a proto je vhodné na úvod uživatele seznámit s tím, co které gesto dělá.

Jak navrhnout navigaci pro mobilní aplikaci

V praxi se mnohdy různé typy navigací kombinují v návaznosti na konkrétní využití a možnosti dané stránky. Nebojte se je proto vhodně pospojovat. Lišta se záložkami může například sloužit jako hlavní navigace a hamburgerové menu jako prostor pro rozšíření.

Pokud budete navigace mobilní aplikace sami navrhovat, nebo její podobu specifikovat v rámci zadávací dokumentace pro vývoj mobilních aplikací, tak byste se měli řídit následujícími body:

• vyberte to nejdůležitější, co může vaše aplikace nabídnout,
• dodržujte standardy designu dané platformy (Android typicky zobrazuje lištu s navigací nahoře, zatímco iOS dole),
• zamyslete se nad pořadím položek – první by měla být hlavní (domovská stránka), zbytek pak podle důležitosti sekce v rámci používání aplikace,
• používejte ikony, které jasně říkají, do které části aplikace se uživatel po kliknutí na záložku dostane – ikony je vhodné doplnit i popiskem,
• zvýrazněte záložku, na které se uživatel právě nachází – aby nemusel zmateně proklikávat navigaci.

Zkrátka se na návrh navigace dívejte očima uživatele. Zamyslete se nad tím, jaká forma by vám v dané chvíli nejvíce vyhovovala a ze které nejlépe vyplyne záměr. Pokud máte o vývoj mobilní aplikace nebo její design zájem, tak nás neváhejte kontaktovat. Rádi s vámi probereme váš koncept a postaráme se o celou realizaci.