Design UX pro mobilní zařízení: Na co byste měli dbát při optimalizaci svých 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 zpříjemnit pro mobilní použití? Co znamená uživatelská zkušenost pro mobilní zařízení? Jaké zásady designu můžete použít? Odpovědi na všechny tyto otázky najdete v tomto příspěvku. Podívejme se blíže na osvědčené postupy pro mobilní UX design!

Proč vůbec navrhovat mobilní UX?

Designová hnutí jako Mobile First se již nějakou dobu snažíme přesunout naši pozornost na mobilní zařízení. Většina profesionálních webových stránek již dobře funguje na mobilních zařízeních. K tomu samozřejmě přispívají i svědomití designéři. Ale i ti, kteří provozují webové stránky, často používají frameworky jako Bootstrap nebo prefabrikované WordPress Themes . Zde je již obvykle integrován responzivní displej. To vývojářům ušetří neuvěřitelné množství času. 

Použití Bootstrapu, WordPress Themes a spol. však s sebou nese riziko, že design je navržen pro desktop - a pak je pouze přizpůsoben pro mobilní zařízení.

Proč je to problém? Návštěvníci, kteří si prohlížejí vaše webové stránky prostřednictvím mobilních zařízení, mají další potřeby, které nemusí být nutně uspokojeny pouze estetickým a technickým přizpůsobením webových stránek.

Návrh uživatelského prostředí je založen na řešení problémů. Výchozí otázka vždy 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 klíčovou otázku: Jaké další problémy vznikají, když uživatelé navštíví 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ů. To znamená 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. Příjem se může měnit mezi dobrým a špatným, nebo se může dokonce úplně zastavit. Návštěvníci vašich stránek mohou mít předplacené tarify, proto se snažte vyhnout stránkám, které v krátké době spotřebují velké množství dat.

Poloha může být méně pohodlná a uživatelé mohou být méně uvolnění. Obecně máme méně trpělivosti, protože máme méně času na jednotlivé úkoly. Pokud něco nefunguje v co nejkratší době - nebo musíme příliš dlouho čekat na načtení obsahu - máme tendenci proces na smartphonu zrušit a věnovat svou krátkou pozornost jiné webové stránce.

Menší je také nutnost číst nebo procházet velké množství textu. Hledáme jasně strukturované informace v malých soustech. Můžeme mít také volnou pouze jednu ruku.

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

Když přecházím na komerční webové stránky ze svého chytrého telefonu, zajímají mě asi nejvíce základní informace:

  • Jaká je adresa?
  • Jak se tam dostanu?
  • Jaká je otevírací doba?
  • Jak se s vámi mohu spojit?
  • Jaké produkty jsou nabízeny?
  • 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 znamená, jsem shrnul nejdůležitější zásady UX pro mobilní design.

Design UX pro mobilní zařízení: 13 zásad, které byste měli okamžitě implementovat

1. obsah

Návštěvníci vašich webových stránek mají různé cíle v závislosti na zařízeních, která používají k přístupu na vaše stránky. Dlouhé texty na mobilních zařízeních často znamenají dlouhé posouvání, abyste našli to, pro co jste přišli. Jako uživatelé mobilních zařízení hledáme rychlé a stručné informace. Ti, kteří navštíví váš obchod na mobilním telefonu, chtějí spíše vědět, jaké produkty nabízíte, než aby se dozvěděli více o vašem zázemí.

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

  • Zcela vynechat obsah: U některých obsahů může být vhodné je zcela skrýt. To může nastat, pokud se jedná o něco, co v telefonu stejně nefunguje. Nebo pokud by objem spotřebovaných dat převýšil přínos pro uživatele.
  • 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 důležité, či nikoli.
  • Změňte uspořádání obsahu: Můžete upravit strukturu obsahu a uspořádat jej jinak na mobilních zařízeních. Výrobky by pak mohly být na prvním místě a zázemí obchodu by mohlo přijít později. Tímto způsobem ušetříte zbytečné posouvání, ale přesto zobrazíte veškerý obsah.

V následujícím příkladu jsem upravil obsah webových stránek 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í

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ů. Jako vodítko se často používá technika 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 uživatelé nemohou dosáhnout. Podle výsledků jeho výzkumu to však není zcela pravda.

6 nejčastějších způsobů držení chytrých 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 však 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é písmo serif s vhodnými řádkovacími mezerami:

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. Společnost Google to vyřešila velmi elegantně. Bez ohledu na to, z jakého zařízení ke Googlu přistupuji, značku Google okamžitě rozpoznám.

Nejlepší postupy pro návrh mobilního UX
Verze Google pro stolní 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 služby Google

Vaše značka by se proto měla na mobilních zařízeních projevit i přes svůj minimalistický design. Pokud má váš web uživatelskou oblast, musí být provedené změny odpovídajícím způsobem přijaty 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 také měly zobrazovat, aby nic nebylo zkreslené nebo zmenšené. Tímto způsobem 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: V závislosti na obsahu obrázku byste měli buď zobrazit pouze jeho část, nebo obrázky pro mobilní zařízení upravit navíc. U webových stránek s mnoha obrázky byste měli integrovat líné načítání nebo použít odpovídající WordPress Plugins . 

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 WordPress Plugins , které vás zcela zbaví úkolu komprimovat vaše obrázky.

Totéž platí pro videa. I zde se přepíná z režimu na šířku na režim na výšku. Videa by také měla být nastavena tak, aby se spouštěla bez zvuku a nespustila se sama. Videa by obecně 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. To zahrnuje čitelný text. Výchozí velikost textu v HTML je 16px. Tato velikost se použije, pokud neurčíte jinak. V závislosti na písmu se však text může zobrazovat větší nebo menší. 

Vše o webové typografii a písmech

Obecně platí, že velikost písma 16px je ideální pro hlavní text a zadávání textu na chytrých telefonech. Další informace o 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 : Zejména proto, že mobilní zařízení se používají i venku, je to obzvláště důležité. 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 stále obtížnější ho přečíst. Rozteče řádků pro stolní počítače a mobilní zařízení se mohou lišit.
  • Centrování : Mým základním pravidlem je nikdy nepoužívat na webových stránkách odůvodnění. Odůvodnění může na první pohled vypadat pěkně, ale zajišťuje, že je tok čtení přerušen. Podobný účinek má i vycentrovaný typ. Textové části na mobilních zařízeních by proto měly být centrovány pouze ve zvláštních případech.
Nejlepší postupy pro návrh mobilního UX
Odůvodnění na ukázkové stránce
Nejlepší postupy pro návrh mobilního UX
Text na ukázkové stránce vycentrovaný vlevo

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 co nejintuitivnější. To znamená, že při vytváření architektury navigace je nejlepší vycházet z existujících struktur. To uživatelům usnadňuje navigaci na vašich webových stránkách. Intuitivní je například procházení webových stránek směrem dolů a nahoru, ale ne nutně doleva nebo doprava.

Vertikální nabídka se v mobilních zařízeních stala hlavní nabídkou. Ale i na ploše se stále častěji setkáváme s vertikální nabídkou namísto horizontální. Nad nebo pod ním je obvykle sekundární nabídka, v případě potřeby poněkud méně nápadná. Alternativně může být umístěna také v dolní části. 

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

Pokud je váš web více než jednostránkový, je obzvláště důležité, aby návštěvníci mohli vždy snadno zjistit, kde se 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šich webových stránek 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 vzájemné uspořádání. Je třeba ponechat dostatek místa, aby se snížilo riziko náhodného klepnutí na nesprávný odkaz nebo tlačítko. Tlačítka jako "Odhlásit", "Smazat", "Odeslat" by měla být také 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. Pokud existuje způsob, jak mohou noví návštěvníci stále 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ěžovali začátek.

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. To platí například v případě, že je místo kontaktního formuláře použit e-mailový klient uživatele. Nebo při integraci pokynů prostřednictvím oblíbené aplikace uživatele. To jim usnadní používání vašich webových stránek, protože mohou k provádění určitých úkolů používat aplikace, které se již naučili.

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

Stejně jako v případě stolních počítačů je i při tvorbě webových stránek nebo e-shopu dobré používat osvědčená řešení, kterým se také říká vzory návrhu uživatelského rozhraní. Některé z těchto vzorů se týkají různých zařízení, jiné jsou specifičtější. Kromě toho se jako dobrý referenční bod osvědčila tato e-kniha od UXPin.

Zejména malé obrazovky nabízejí málo prostoru pro navigaci. Obzvláště nápadné jsou nestrukturované a nepřehledné webové stránky.

Podobně jako u vzorů návrhu uživatelského rozhraní je vhodné orientovat se na již existující webové stránky a úspěšné webové aplikace a analyzovat je:

  • Kde se obvykle nachází jídelní lístek?
  • Jak to vypadá?
  • Co se stane, když ji stisknu? 

Měli byste však být kritičtí, abyste nekopírovali žádné chyby nebo "špatné" prvky UX. 

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

9. formuláře

Dlouhé formuláře mohou být únavné a rychle se mohou zdát nepřehledné. Obecně platí, že byste měli formuláře na mobilních zařízeních používat pouze v případě potřeby. Při integraci formulářů byste měli dbát na to, abyste požadovali pouze tolik údajů, kolik je skutečně nutné, a abyste uživateli poskytli příslušnou klávesnici. Toho dosáhnete použitím vhodných typů formulářů HTML. Tímto způsobem se prohlížeči sdělí, jaký je vstup. K dispozici je i příslušná klávesnice.

Případně můžete integrovat automatické vyplňování nebo navrhování obsahu. Nebo místo zdlouhavé registrace použijte 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 Pinterestu.

10. zpětná vazba

Vzhledem k tomu, že mobilní zařízení používáme rukama, máme tendenci očekávat skutečnou zpětnou vazbu: zpětnou vazbu založenou na skutečných objektech. Může to být například tlačítko, které se po stisknutí zobrazí jako stisknuté.

Pokud tento typ zpětné vazby neodpovídá vašemu konceptu, je stále důležité poskytnout určitou zpětnou vazbu. Komu se nestalo, že by mnohokrát za sebou stiskl odkaz nebo tlačítko a nebyl si jistý, jestli to prostě nefunguje, nebo jestli je připojení k internetu pryč. Tomu je třeba se vyhnout. Existují k tomu běžné triky, například načítání animací. Důležité je, aby uživatel:uvnitř věděl, že jeho interakce fungovala a že se něco stane.

11. zpracování chyb

Dochází k chybám. Omylem stisknete špatný odkaz a ocitnete se na špatné webové stránce. Nebo odešlete něco, co ještě nebylo připraveno. Je důležité, aby chyby neměly žádné (nebo co nejmenší) negativní důsledky. K tomu slouží funkce Zpět a tlačítka Zpět. Tlačítko Domů je zde také nesmírně důležité: je kotvou, pokud se uživatelé ztratí. Aby vždy věděli, jak se vrátit na domovskou stránku.

12. rychlost

Problémem na mobilních zařízeních může být také doba načítání vašich webových stránek. Zejména pokud chcete přistupovat z nestabilních sítí, neměla by být čekací doba tak dlouhá, aby návštěvníky odradila.

13 Přístupnost

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

Přístupnost na adrese WordPress je důležitou součástí při vytváření webových stránek. Jak moc je ale WordPress dostupný? Proč je přístupnost tak 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í určen právě vám.

Přístupnost je multiplatformní téma, které konečně získává stále větší význam. Základní myšlenka a poslání: 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 přístupu k webu a jeho používání.

Pokud ignorujete otázku přístupnosti, již dnes vylučujete 20 procent světové populace z možnosti používat vaše webové stránky. Zanedbávání přístupnosti zkrátka není pro vaši firmu dobré. Ale co je důležitější, je to hrozné pro vytvoření spravedlivějšího a férovějšího světa.

Nástroje pro testování UX

V závislosti na tom, jak jsou vaše webové stránky vytvořeny, můžete mít možnost upravovat mobilní zobrazení přímo. Zpravidla je nutné provést několik ručních úprav CSS. Pro testování je vhodných několik 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 prohlížeči 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 by proto nemělo chybět. Protože by bylo velmi nákladné mít doma každé zařízení, existují tzv. emulátory.
  • Emulátory : Tento software poskytuje sám výrobce operačního systému. Tam můžete vyvíjet a zobrazovat 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

Zavedením těchto tipů můžete zlepšit své mobilní prostředí a přilákat více zákazníků. A možná vám příklady a osvědčené postupy pomohou rozvinout nové nápady pro vaše webové stránky. Mobilní design je bohužel na webových stránkách stále často zanedbáván, což má negativní dopad na míru konverze mobilních uživatelů.

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

Vaše otázky o mobilním 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 návrh 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 *.