Design UX pro mobilní zařízení: Na co dbát při optimalizaci webových stránek pro mobilní použití

12 min.
Nejlepší postupy pro návrh mobilního UX

Jak můžete své webové stránky přizpůsobit mobilnímu použití? Co znamená UX (tzn. uživatelská zkušenost) pro mobilní zařízení? Jaké zásady designu můžete využít? Odpovědi na všechny tyto otázky najdete v našem příspěvku. Podívejme se blíže na osvědčené postupy pro mobilní UX design!

Proč vůbec UX desing pro mobilní zařízení?

Designová hnutí jako Mobile First se již nějakou dobu snaží přesunout náš zájem na mobilní zařízení. Většina profesionálních webových stránek už funguje na mobilních zařízeních dobře. K tomu samozřejmě přispívají i svědomití designéři. Nicméně ti, kdo provozují webové stránky, používají často frameworky jako Bootstrap nebo prefabrikované šablony WordPress. Ty již obvykle v sobě zahrnují responzivní zobrazení. Což vývojářům ušetří neuvěřitelné množství času. 

Použití fameworků jako Bootstrap, WordPress Themes atd. však s sebou nese riziko, že design bude navržen pro počítače - a pak se musí přizpůsobit mobilním zařízením.

Proč se jedná o problém? Návštěvníci, kteří si prohlížejí vaše webové stránky prostřednictvím mobilních zařízení, mají jiné potřeby, které nemusí nutně uspokojit pouze estetický a technický rámec webových stránek.

Design uživatelského prostředí je založen na řešení problémů. Výchozí otázka tedy pokaždé zní: Jaké problémy mohou mít uživatelé a jak je řešit? V souvislosti s mobilními zařízeními byste tedy měli zvážit jednu zásadní otázku: Jaké další potíže nastanou, když navštíví uživatelé vaše webové stránky z mobilního zařízení?

Používání chytrých telefonů v Německu

Podle portálu Statista.com mělo v roce 2020 v Německu 97,5 % domácností jeden nebo více mobilních telefonů.  Z toho plyne podíl 80 % uživatelů mobilního internetu. Z nich 24,1 % využívalo předplacenou smlouvu. Pro rok 2023 se předpokládá nárůst z 66,5 milionu uživatelů chytrých telefonů na 68,6 milionu.

Mnoho z nás používá chytré telefony zejména na cestách. Uživatelský zážitek je silně ovlivněn vnějšími faktory: Kolem nás může být hluk. Můžeme být také v pohybu - interakce s telefonem je méně přesná. Úroveň osvětlení se může rychle měnit mezi velmi jasným a velmi tmavým světlem. Signál může být chvíli dobrý, chvíli špatný, nebo se dokonce úplně ztratit. Návštěvníci vašich stránek mohou mít předplacené tarify, proto se snaží vyhnout stránkám, které v krátké době spotřebují velké množství dat.

Poloha nemusí být tak komfortní, a pak ani uživatelé nejsou tolik uvolnění. Obecně máme méně trpělivosti, protože máme méně času na jednotlivé úkony. Pokud něco nefunguje dostatečně rychle - nebo musíme příliš dlouho čekat na načtení obsahu - máme tendenci proces na smartphonu zrušit a svou pozornost věnovat jiné webové stránce.

Snižuje se i náš zájem číst nebo procházet velké množství textu. Chceme jasně strukturované informace, a to po malých soustech. Za učitých okolností můžeme používat jen jednu ruku.

Důvody pro surfování na internetu pomocí chytrého telefonu jsou velmi odlišné od důvodů užívání počítačů: Na mobilu chceme buď vyhledávat konkrétní informace, nebo se snažíme zabít čas. 

Když na svém smartphonu přecházíme na komerční webové stránky, zajímají nás asi nejvíce základní informace:

  • Jak zní adresa?
  • Jak se tam dostanu?
  • Jaká je otevírací doba?
  • Jak se s vámi mohu spojit?
  • Jaké produkty nabízejí?
  • Jaké jsou ceny?

Zbývá jediná otázka: Jsou vaše webové stránky optimalizované pro mobilní zařízení? Pro lepší shrnutí toho, co to přesně znamená, jsem sepsal nejdůležitější zásady UX pro mobilní design.

Design UX pro mobilní zařízení: 13 zásad, kterými byste se měli rozhodně řídit

1. Obsahy

Návštěvníci vašeho webu sledují různý cíl - podle toho, které zařízení použili k přístupu na vaše stránky. Dlouhé texty na mobilních zařízeních často znamenají dlouhé rolování, než naleznete to, co jste chtěli. Jako uživatelé mobilních zařízení hledáme rychlé a stručné informace. Ten, kdo navštíví váš e-shop přes mobil, chce spíše vědět, jaké produkty nabízíte, než se něco dozvědět o vašem zázemí.

Obsah je proto třeba přizpůsobit. V chytrém telefonu a tabletu panuje jiná hierarchie než v počítači. Existuje několik možností:

  • Zcela vynechat obsah: Někdy je vhodné některé obsahy zcela skrýt. Tato situace nastává, pokud se jedná o něco, co v telefonu stejně nefunguje. Nebo pokud by objem spotřebovaných dat převýšil uživatelův přínos.
  • Zkrácení obsahu : Můžete převzít strukturu webu, ale dlouhý obsah odpovídajícím způsobem zkrátit a odkázat například na podstránku. Návštěvníci se tak mohou sami rozhodnout, zda jsou pro ně tyto informace relevantní, či nikoli.
  • Změňte uspořádání obsahu: Můžete upravit strukturu obsahu a uspořádat jej na mobilních zařízeních jinak. Produkty by pak mohly být na prvním místě a zázemí e-shopu by mohlo přijít později. Tímto způsobem zkrátíte předlouhé rolování a přesto zobrazíte veškerý obsah.

V následujícím příkladu jsem upravil obsah webových stránek jedné restaurace (vlevo) tak, aby byl přívětivější. Text jsem zkrátil a odkázal na podstránku s CTA (vpravo). Upravil jsem také typografii, ale o tom až později.

Nejlepší postupy pro návrh mobilního UX
Původní mobilní verze ukázkového webu
Nejlepší postupy pro návrh mobilního UX
Optimalizovaná mobilní verze ukázkového webu

2. Rozvržení stránky

Steven Hoober ve svém článku Design pro prsty, dotyk a lidi uvádí výsledky svého rozsáhlého výzkumu používání chytrých telefonů. Za vodítko považuje techniku palce. Zde záleží na poloměru, který palec dokáže vytvořit na obrazovce. Často se uvádí, že horní rohy jsou absolutně tabuizované oblasti, do kterých se uživatelé nedostanou. Podle výsledků jeho výzkumu to ale není tak docela pravda.

6 nejčastějších způsobů, jak se drží chytrý telefon:

Nejlepší postupy pro návrh mobilního UX
Jak lidé nejraději drží své smartphony

Výsledkem je následující optimální rozdělení prvků pro smartphony:

Nejlepší postupy pro návrh mobilního UX
Nejlepší uspořádání pro primární, sekundární a terciární obsah

Výsledek: Nejdůležitější informace by měly být na mobilních zařízeních umístěny uprostřed obrazovky.

3. Minimalismus

Minimalistický přístup k designu není nikdy špatný. Zejména na menších zařízeních se totiž cítíme stísněně a zmateně kvůli příliš velkému množství obsahu a příliš malému množství bílého místa. Není jasné, kde se která informace skrývá a jak se k ní dostaneme.

Mobilní verze Streetartnews je strukturovaná a přehledná. Na obsahových stránkách jsou pouze nejnutnější prvky a dobře čitelný font Serif s vhodnými mezerami mezi řádky:

Nejlepší postupy pro návrh mobilního UX
Vizuální hierarchie je v mobilním prostředí o to důležitější.
Nejlepší postupy pro návrh mobilního UX
Větší rozestupy mezi řádky jsou na mobilních zařízeních lépe čitelné.

4. Konzistence

Je důležité, aby vaše webové stránky byly konzistentní na všech platformách. Google to vyřešil velmi elegantně. Bez ohledu na to, z jakého zařízení se připojím na Google, okamžitě rozpoznám, že se jedná právě o něj.

Nejlepší postupy pro návrh mobilního UX
Verze Google pro počítače
Nejlepší postupy pro návrh mobilního UX
A takto vypadá Google na tabletu.
Nejlepší postupy pro návrh mobilního UX
Mobilní verze od Google

Vaše značka by se proto měla na mobilních zařízeních projevit i přes minimalistický design. Pokud má váš web uživatelskou oblast, je nutné, abyste provedené změny přijali odpovídajícím způsobem na všech zařízeních.

5. Média

Obrázky by měly mít vhodnou velikost a v této velikosti by se měly i zobrazovat, aby nic nebylo zkreslené nebo zmenšené. Takto lze také zabránit zbytečně dlouhému načítání. Nejobtížnější může být přechod mezi formátem na šířku a na výšku: Podle obsahu obrázku byste měli buď zobrazit pouze jednu jeho část, nebo obrázky pro mobilní zařízení upravit extra. U webových stránek s mnoha obrázky byste měli integrovat tzv. líné načítání nebo použít odpovídající plugin WordPress. 

Optimalizace WordPress obrázků: 6 pluginů pro kompresi obrázků

Optimalizace grafiky a obrázků pro webové stránky WordPress je snadným a důležitým krokem ke zlepšení doby načítání. Ukážeme vám šest populárních pluginů WordPress, díky nimž už nikdy nebudete muset komprimovat vaše obrázky.

Totéž platí pro videa. I zde se přepíná ze šířky na výšku. Videa by se měla nastavit tak, aby se spouštěla beze zvuku a nespouštěla se sama. Obecně platí, že by videa měla být optimalizována pro web, ale pro mobilní zařízení je to obzvlášť důležité.

6. Typografie

Důležitější než vzhled webových stránek je vždy jejich funkčnost. Ta zahrnuje čitelný text. Výchozí velikost textu v HTML je 16px. Tato velikost je automaticky použita, neurčíte-li jinak. S ohledem na typ písma však může text působit jako větší nebo menší. 

Vše o webové typografii a písmech

Obecně platí, že velikost písma 16px je pro hlavní text a zadávání textu na chytrých telefonech ideální. Další informace k typografii na webu najdete v našem článku "Jak najít ideální písmo pro svůj web"a v příspěvku na blogu UX Matters "Velikost písma pro každé zařízení".

Aby však byla typografie čitelnější, je třeba zvážit několik dalších věcí:

  • Kontrast mezi barvou písma a pozadím : Kontrast je obzvláště důležitý hlavně proto, že se mobilní zařízení používají i venku. To platí i pro zbytek vašich webových stránek. Dobrý kontrast mezi jednotlivými prvky usnadňuje prohlížení webových stránek. ContrastChecker.com analyzuje výběr barev a zjistí, zda jsou kombinované barvy dostatečně kontrastní.
  • Rozestupy : Pokud je text příliš blízko u sebe, je obtížnější ho přečíst. Mezery mezi řádky se u počítačů a mobilních zařízení mohou lišit.
  • Centrování : Mým základním pravidlem je nikdy na webových stránkách nepoužívat zarovnání do bloku. Zarovnání do bloku může na první pohled vypadat pěkně, ale dojde k přerušení toku čtení. Podobný efekt má i do středu zarovnaný nadpis. Úseky textu by proto měly být na mobilních zařízeních centrovány pouze ve zvláštních případech.
Nejlepší postupy pro návrh mobilního UX
Zarovnání do bloku na ukázkové stránce
Nejlepší postupy pro návrh mobilního UX
Text zarovnaný doleva na ukázkové stránce

Zde je opět příklad z EggShopu: Aby byl text (vlevo) čitelnější, zvětšil jsem velikost písma na 16px a nastavil výšku řádku na 1,7 (vpravo). Text jsem také vycentroval vlevo a zmenšil některé mezery směrem nahoru, resp. odstranil dvojitý nadpis. Ve verzi pro stolní počítače dává dvojitý titulek smysl. Na mobilních zařízeních vytváří pouze nežádoucí bílé znaky a duplicity. 

Můžete jít ještě o něco dál a klíčová slova zvýraznit tučně. Uživatelé tak mohou text procházet ještě rychleji a stále si z něj odnášet důležité informace. Některá písma jsou obecně velmi nevhodná pro malé obrazovky, protože při zmenšení ztrácejí čitelnost. Dokonce i světlá písma, která na stolním počítači vypadají elegantně, mohou být na smartphonu hůře čitelná.

Navigace na vašich webových stránkách by měla být maximálně intuitivní.To znamená, že při vytváření architektury navigace je nejlepší vycházet z již existujících struktur. Uživatelům tím usnadníte navigaci na svém webu. Intuitivní je například procházení webových stránek směrem dolů a nahoru, ale ne nutně doleva nebo doprava.

V mobilních zařízeních se jako  nejlepší prosadilo vertikální menu. Ovšem i na ploše se stále častěji setkáváme s nabídkou vertikální namísto horizontální. Nad nebo pod ní se obvykle nachází sekundární nabídka, která je v případě potřeby méně nápadná. Případně může být umístěna i na spodním okraji. 

Sekundární nabídky mohou být třeba nastavení jazyka nebo odkazy na sociální sítě. Pokud je potřeba třetí menu, umístí se jako rozklikávací nabídka. Může jít například o přihlášení nebo odhlášení.

Pokud má váš web více než jednu stránku, je moc důležité, aby vaši návštěvníci mohli vždy snadno zjistit, kde se právě nacházejí.

CTA a odkazy

Nejlepší postupy pro návrh mobilního UX
Pravidlo palce (Zdroj: UX Matters)

Interaktivní prvky by se měly zobrazovat větší. Návštěvníci vašeho webu tak budou vědět, co mohou na vašich stránkách dělat. A mohou kliknout na to, co chtějí. Svou roli hraje i uspořádání. Je třeba ponechat dostatek místa, aby se snížilo riziko, že náhodně klepnete na nesprávný odkaz nebo tlačítko. Také tlačítka jako "Odhlásit", "Smazat", "Odeslat" by měla být umístěna v dostatečné vzdálenosti od ostatních call-to-action, aby nedošlo k jejich náhodnému spuštění.

Nejlepší postupy pro návrh mobilního UX
Air Inuit zobrazuje interakce velmi přehledně a uživatelsky přívětivě.

Skrytá interakce

Je zcela běžné umožnit interakci více cestami. Ponecháte-li novým uživatelům jasnou možnost, jak používat vaše stránky. To vám umožní nabídnout zkratky vracejícím se uživatelům, aniž byste jim ztížili vstup.

Odkazy

Pokud chcete na své webové stránky přidat více funkcí, je rozumné využít stávající systémy - namísto programování nových. Což platí třeba i v případě, že je místo kontaktního formuláře použit e-mailový klient uživatele. Nebo když začleníte navigační pokyny pomocí oblíbené uživatelské aplikace. To jim usnadní používání vašich webových stránek, protože při provádění určitých úkonů mohou používat aplikace, s nimiž se již naučili pracovat.

8. Vzory návrhů uživatelského rozhraní

Stejně jako u počítačů je i při tvorbě webových stránek nebo e-shopu dobré sáhnout po osvědčených řešeních, kterým se říká UI Design Patterns. Některé z těchto vzorů zahrnují různá zařízení, jiné jsou specifičtější. K tomu se jako dobré vodítko osvědčila e-kniha od UXPin.

Zejména malé obrazovky nabízejí málo prostoru pro navigaci. Nestrukturované a nepřehledné webové stránky pak opravdu bijí do očí.

U vzorů UI designu se doporučuje orientovat se na již existující webové stránky a úspěšné webové aplikace a tyhle analyzovat:

  • Kde se obvykle nachází menu?
  • Jak to vypadá?
  • Co se stane, když na to kliknu? 

Zůstaňte ovšem kritičtí, abyste nekopírovali i chyby nebo "špatné" prvky UX. 

Nejlepší postupy pro návrh mobilního UX
Crustac.fr zvolil UI vzor Burger Menu, aby byla navigace intuitivní pro všechny.

9. Formuláře

Dlouhé formuláře mohou být únavné a brzy působí nepřehledně. Obecně platí, že byste měli formuláře na mobilních zařízeních používat pouze, není-li vyhnutí. Pokud začleníte formuláře, dbejte na to, abyste požadovali jen tolik údajů, kolik je skutečně nutné, a abyste uživateli poskytli dostatečnou klávesnici. Dosáhnete toho tak, že použijete vhodné typy formulářů HTML. Takto se prohlížeč dozví, o jaký input se jedná. K dispozici pak bude i příslušná klávesnice.

Případně můžete integrovat automatické vyplňování či navrhování obsahu. Nebo použijte namísto zdlouhavé registrace přihlášení přes sociální sítě.

Nejlepší postupy pro návrh mobilního UX
Sociální přihlášení (také nazývané jednotné přihlášení) na Pinterest.

10. Zpětná vazba

Vzhledem k tomu, že mobilní zařízení používáme rukama, máme tendenci očekávat skutečný feedback: zpětnou vazbu opírající se o reálné objekty. Může to být například tlačítko, které se po stisknutí zobrazí jako stisknuté.

Pokud tento druh feedbacku neodpovídá vašemu konceptu, je přesto důležité nějakou zpětnou vazbu poskytnout. Komu se ještě nepřihodilo, že mnohokrát za sebou stiskl odkaz nebo tlačítko a nebyl si jistý, jestli to jen prostě nefunguje, nebo jestli je najednou bez připojení. Tomu je třeba se vyhnout. Tady existuje řada triků, například načítání animací. Důležité je, aby uživatel věděl, že jeho interakce fungovala a něco se stane.

11. Zpracování chyb

Chyby se stávají. Omylem stisknete špatný odkaz a ocitnete se na špatné webové stránce. Nebo odešlete něco, co jste ještě nedodělali. Důležité je, aby chyby neměly žádný (nebo co nejmenší) negativní dopad. K tomu slouží funkce Vrátit změny a tlačítka Zpět. Tlačítko Domů je také nesmírně důležité: je takovou jistotou, pokud se uživatelé ztratí. Aby člověk věděl, jak se vrátí na domovskou stránku.

12. Rychlost

Také doba načítání vašich webových stránek může na mobilních zařízeních způsobit problémy. Zejména pokud chce člověk přistupovat z nestabilních sítí, neměla by čekací doba být dlouhá, aby návštěvníky neodradila.

13. Accessibility

WordPress Accessibility: Jak vytvořit přístupné webové stránky

Accessibility neboli přístupnost webu je na WordPress důležitým komponentem při tvorbě webových stránek. Jak dobře je ale WordPress přístupný? Proč je to vůbec důležité? A jak můžete své webové stránky zpřístupnit všem? Pokud si kladete tyto otázky, je náš průvodce přístupností webu určen právě vám.

Přístupnost je multiplatformním tématem, které konečně získává na významu. Její základní myšlenkou a posláním je, že web musí být přístupný všem lidem. To je důležité zejména pro osoby s takovým postižením, které může ovlivnit způsob jejich přístupu k webu a jeho užívání.

Pokud ignorujete otázku přístupnosti, vylučujete dnes asi 20 procent světové populace z možnosti používat vaše webové stránky. Stručně řečeno: pro vaši společnost není dobré zanedbávat příslušnost. Ale co je ještě důležitější: tohle opomíjení je hrozné při vytváření spravedlivějšího a férovějšího světa.

Nástroje pro testování UX

S ohledem na to, jak jsou vaše webové stránky vytvořeny, můžete upravovat mobilní zobrazení přímo. Zpravidla je nutné provést několik ručních úprav CSS. K testování se hodí více možností:

  • Kontrolní nástroje v prohlížeči: Oblíbené prohlížeče nabízejí možnost kontroly webových stránek pomocí takzvaných nástrojů pro vývojáře. Tam si také můžete zkontrolovat své webové stránky v různých velikostech zařízení. Dalšími vhodnými nástroji pro testování webových stránek jsou Responsinator a BrowserStack Responsive.
Nejlepší postupy pro návrh mobilního UX
Nástroje pro vývojáře v Google Chrome
  • V zařízení : Nejefektivnější způsob zobrazení vašich webových stránek je v samotném zařízení. Testování na vlastním mobilním telefonu nebo tabletu byste proto neměli opomíjet. Protože by ale bylo velmi nákladné mít doma všechna zařízení, existují tzv. emulátory.
  • Emulátory : Tento software poskytuje sám výrobce operačního systému. Tady můžete jednak vyvíjet, jednak si zobrazit výsledky přímo v prohlížeči - přizpůsobené velikosti zařízení a příslušnému operačnímu systému, jako je Android nebo iOS.

Závěr: Osvědčené postupy pro mobilní design

Budete-li se řídit našimi tipy, můžete zlepšit své mobilní prostředí a přilákat tak více zákazníků. A možná vám uvedené příklady a osvědčené postupy pomohou rozvinout nové nápady pro vaše webové stránky. Bohužel je mobilní design na webových stránkách často zanedbáván, což se projevuje negativním dopadem na míru konverze mobilních uživatelů.

Pro další informace o mobilním UX designu vřele doporučuji Základy webu od Google a tento článek pro lepší UX design pro mobilní zařízení.

Vaše otázky k mobilnímu UX designu

Jaké otázky máte na Sonju ohledně mobilního UX designu? Těšíme se na váš komentář. Zajímáte se o design a vývoj webových stránek? Pak sledujte stránky RAIDBOXES na Twitteru a Facebooku, LinkedIn nebo prostřednictvím našeho newsletteru.

Po studiu designu počítačových her a kreativního psaní v zeleném Aucklandu se Sonja specializovala na design webových aplikací a jeho vývoj. Zaměřuje se na gamifikaci a výzkum motivace uživatelů a jejích zkušeností, a s velkou vášní a zvědavostí na technologické trendy.

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *.