Programování
29. června 2020 5 minut čtení

Co je „mobile-first design“

Mobile-first design vychází z potřeby uzpůsobit produkt (web, aplikaci…) primárně pro nejmenší obrazovky. Celý proces vývoje proto začíná návrhem a prototypováním pro mobilní zařízení. Pokud tedy například webový designér pracuje v souladu s přístupem mobile-first na návrhu webu, tak nezačíná návrhem pro desktopy, ale prvním výstupem bude návrh layoutu pro mobilní zařízení, od kterého se postupuje k větším obrazovkám. Proč tomu tak je?

Nejde o žádnou novinku a tímto směrem se začal vývoj ubírat už před deseti lety, kdy tehdejší CEO Googlu, Eric Schmidt, oznámil na konferenci Mobile World Congress 2010, že se společnost hodlá při návrhu a vývoji svých produktů více zaměřit na uživatele mobilních zařízení. Byl to jasný signál od globálního technologického lídra, kudy se bude v následujících letech vývoj ubírat. 

To, že šlo o správné rozhodnutí, dokládají statistiky, podle nichž se stává mobil primární platformou pro přístup na internet. Podle odhadů World Advertising Research Center (WARC) přistupuje k internetu výhradně přes svůj telefon 51 % uživatelů mobilních zařízení, jejichž celkový počet se globálně pohybuje okolo 3,9 miliardy. Do roku 2025 by mělo jít o 3,7 miliardy lidí, kteří budou primárně využívat telefon k přístupu na internet, tedy bezmála tři čtvrtiny uživatelů. K rozmachu přispívá také rozvoj páté generace sítí, 5G, jejíž nástup výrazně zvýší přenosovou rychlost – stahování bude rychlejší, streamování plynulejší a pro běžné smrtelníky bude potřeba mít stolní počítač nebo notebook stále menší.

Malá obrazovka, velké věci

Nutnost soustředit se hlavně na mobilní zařízení ovlivňuje aplikace, weby i software ve všech aspektech – obrazovka mobilního telefonu nabízí přece jen omezený prostor, a proto je zapotřebí dokázat poskládat všechny prvky tak, aby tvořily přehledný celek a současně nebyly omezeny žádné funkce. Vznikají tak aplikace a weby, které musejí upřednostnit to, co je pro uživatele zásadní, nabídnout maximální uživatelskou zkušenost a nerezignovat na žádné důležité aspekty a funkce.

Pro pochopení mobile-first designu si zopakujeme některé pojmy z produktového designu: 

Responzivní web design (RWD) je metoda webového designu, která umožňuje, aby se web automaticky přizpůsoboval různým zařízením. Obsah se díky tomu uživatelům zobrazuje tak, aby se nemuseli obtěžovat zoomováním, posouváním a scrollováním.

Postupné vylepšování (progressive enhancement) a pozvolná degradace (graceful degradation) jsou dva koncepty, které byly ve vývoji přítomny ještě před tím, než se začal prosazovat responzivní design. Jde rovněž o to, aby se výsledný produkt zobrazoval na různých zařízeních co nejlépe. K tomu účelu vyhovují jednotlivé verze produktu vždy konkrétnímu typu zařízení.

  • Postupné vylepšování znamená, že v první fázi vývoje se buduje aplikace/web pro relativně nižší prohlížeč (jako ten, který je v mobilním zařízení). Tato verze zahrnuje základní funkce. Následuje vyšší verze pro tablety a PC, kam jsou přidány další prvky a náročnější efekty a funkce.
  • Pozvolná degradace je vlastně opačný proces – začíná se vývojem pokročilé verze, tedy například jako první vzniká produkt pro počítače, který vývojáři postupně „osekávají“, aby byl vhodný pro „nižší“ zařízení.

Zjevnou nevýhodou je nutnost redukovat funkce, a na mobilech proto mohou některé aplikace nebo weby působit jako nekompletní. Na druhou stranu vývojáři mohou lépe využít unikátní funkce vyšších platforem, a proto je postupné vylepšování stále dominantním přístupem k vývoji.

Když si to poskládáte dohromady, tak je vlastně mobile-first jedním z pravidel progresivního vylepšování – začíná se vývojem pro mobilní zařízení, která mají více omezení, a postupně se funkce a schopnosti produktu rozšiřují, aby vznikla tabletová nebo desktopová verze.

Tipy pro mobile-first design

Mobile-first tedy zjednodušeně znamená maximální přívětivost k malým obrazovkám v kombinaci se správnou hierarchií informací.

Čímž se dostáváme k tomu, že i zde platí, že obsah je zcela klíčový. Uživatel musí dostat přesně to, co hledá, a nic víc. Cokoliv navíc totiž může rozptylovat a negativně ovlivnit uživatelskou zkušenost. U mobilních zařízení se vývojáři vždycky musejí vypořádat s malou obrazovkou a veškerý obsah prezentovat ve vizuální hierarchii, která upřednostní to, co je nejdůležitější. Na první pohled a při prvním použití se musí uživatel okamžitě zorientovat.

Druhým předpokladem úspěšného mobile-first designu je intuitivní navigace. K mobile-first designu neodmyslitelně patří například „hamburger menu“. Tento navigační prvek je pro uživatele snadno rozpoznatelný a použitelný. Nicméně podle Nielsen/Norman Group navigační prvky, jako je hamburger menu, snižují možnost, že někdo obsah skrytý na podstránce najde, o 21 %. Vývojáři se proto v poslední době začínají přiklánět k tzv. kombinované navigaci. Ta pomocí viditelných ovládacích prvků (například tlačítek) umožňuje, aby měl uživatel okamžitě k dispozici nejdůležitější možnosti, přičemž ty méně podstatné jsou schované například ve zmíněném hamburger menu.

A na závěr: KISS aneb „Keep it simple, stupid“. Dobrý mobilní design musí být jednoduchý. Uživatele by neměly obtěžovat nadbytečné elementy, jako jsou reklamy, pop-up okna a další obsah, který je nezajímá, obzvláště ne na mobilech. Vývojáři musejí mít na paměti, že uživatelská zkušenost je zásadní pro úspěch, a že jakmile uživatele jednou odradí, vracet se zpátky rozhodně nebude, protože konkurence je obrovská a je z čeho vybírat.

 

Číst další články na téma Programování