Nejlepší postupy pro návrh mobilního UX

Mobilní UX Design: Tipy pro mobilní optimalizaci vašich webových stránek

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č mobilní UX Design?

Designová hnutí, jako je Mobile First , se již nějakou dobu snaží upoutat naši pozornost na mobilní telefony. Mezitím většina profesionálních webových stránek funguje dobře na mobilních zařízeních. K tomu samozřejmě přispívají svědomití designéři. Ale i ti, kteří provozují webové stránky WordPress, často používají rámce, jako je Bootstrap nebo hotové motivy WordPress. Zde je responzivní displej obvykle již integrován. To 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č je to problém? Návštěvníci, kteří si prohlížejí vaše webové stránky WordPress prostřednictvím mobilních zařízení, mají další potřeby, které nemusí být nutně uspokojeny pouze estetickou a technickou úpravou webových stránek WordPress.

Návrh uživatelského prostředí je založen na řešení problémů. Počáteční otázka je vždy: Jaké problémy mohou mít uživatelé a jak je vyřešíme? V souvislosti s mobilními zařízeními byste proto měli zvážit ústřední otázku: Jaké další problémy vznikají, když uživatelé navštíví vaše webové stránky WordPress z mobilního zařízení?

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

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

Mnozí z nás používají naše smartphony zejména na cestách. Uživatelská zkušenost je zde silně ovlivněna vnějšími vlivy: Může být hlasitá kolem nás. Můžeme být také v pohybu - interakce s telefonem je méně přesná. Světelné vlivy se mohou rychle měnit mezi jasným a ponurým. Recepce se může měnit mezi dobrým a špatným nebo dokonce úplně zrušit. Návštěvníci vašich webových stránek WordPress mohou používat předplacené plány, a proto se snaží vyhnout webovým stránkám, které v krátké době spotřebovávají velké množství dat.

Pozice může být méně pohodlná a vaši uživatelé 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 ve velmi krátkém čase - nebo musíme čekat příliš dlouho, než se obsah načte - máme tendenci zrušit proces na smartphonu a věnovat krátkou pozornost jinému webu WordPress.

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?

Vše, co zůstává, je otázka: Je váš web WordPress optimalizován pro mobilní zařízení? Abych lépe shrnul, co to znamená podrobně, shrnul jsem nejdůležitější principy UX pro mobilní design.

Souhlas*
Toto pole slouží k ověření a nemělo by se měnit.

13 principů mobilního UX designu

1. Obsahy

Návštěvníci vašeho webu mají různé cíle v závislosti na tom, která zařízení používají pro přístup k vašemu webu. Dlouhé texty na mobilních zařízeních často znamenají spoustu posouvání, aby se zjistilo, pro co přišli. Jako mobilní uživatelé hledáme především rychlé a stručné informace. Pokud navštívíte svůj obchod na cestách, pravděpodobně budete chtít vědět, které produkty nabízíte, spíše než se dozvědět více o své kariéře.

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: U některých obsahů může být vhodné jej zcela skrýt. To může být případ, pokud je to něco, co na telefonu stejně nefunguje. Nebo pokud by objem spotřebovaných dat překročil výhody pro uživatele.
  • Zkrácení obsahu: Můžete převzít svůj web WordPress ze struktury, ale odpovídajícím způsobem zkrátit dlouhý obsah a například odkaz na podstránku. Tímto způsobem se návštěvníci mohou sami rozhodnout, zda jsou pro ně tyto informace relevantní nebo ne.
  • 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 měly by v ní být také zobrazeny, aby se nic nemuselo zkreslovat nebo měnit. Tímto způsobem se lze vyhnout i zbytečně dlouhému nabíjení. Přechod mezi formátem na šířku a na výšku může být nejobtížnější: V závislosti na obsahu obrázku byste měli buď zobrazit pouze část obrázku, nebo uložit obrázky speciálně pro mobilní zařízení. U webových stránek s velkým množstvím obrázků byste měli integrovat Lazy Load nebo použít vhodné pluginy WordPress. 

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

Optimalizace grafiky a obrázků pro vaše webové stránky WordPress je jednoduchým a důležitým krokem ke zlepšení doby načítání. Ukážeme vám šest populárních pluginů WordPress, které vás zcela zbaví komprese vašich obrázků .

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 ideální pro texty těla a zadávání textu na smartphonech. Další informace o typografii na webu naleznete v našem článku "Jak najít perfektní písmo pro vaše webové stránky" a v blogovém příspěvku "Velikosti písma pro každé zařízení" od UX Matters.

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: Právě proto, že mobilní zařízení se používají i venku, je to obzvláště důležité. To platí i pro zbytek vašeho webu. Dobrý kontrast mezi prvky usnadňuje prohlížení vašich webových stránek. ContrastChecker.com analyzuje vaše volby barev a informuje vás, zda kombinované barvy mají dostatečný kontrast.
  • 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 trochu dále a učinit klíčová slova tučnými. V důsledku toho mohou uživatelé skenovat text ještě rychleji a stále si s sebou vzít relevantní informace. Některá písma jsou obecně špatná pro malé obrazovky, protože při změně měřítka ztrácejí čitelnost. Dokonce i světlá písma, která vypadají elegantně na ploše, mohou být na smartphonu méně čitelná.

Souhlas*
Toto pole slouží k ověření a nemělo by se měnit.

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.

Jako primární nabídka převládá na mobilních zařízeních svislá nabídka. Ale i na ploše stále častěji vidíme vertikální nabídku namísto horizontální. Nad nebo pod je obvykle, v případě potřeby o něco méně nápadné, sekundární menu. Alternativně to může být také umístěno ve spodní části. 

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í.

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

Interaktivní prvky by měly být zobrazeny větší. Tímto způsobem návštěvníci vašeho webu vědí, co mohou na vašem webu dělat. A jsou schopni kliknout na to, co chtějí. Svou roli hraje i vzájemné uspořádání. Musí být ponecháno dostatek místa, aby se snížilo riziko náhodného klepnutí na nesprávný odkaz nebo tlačítko. Tlačítka jako "Odhlásit se", "Smazat", "Odeslat" by měla být také umístěna ve vzdálenosti od druhé výzvy k akci, aby nedošlo k 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.

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í

Pokud jde o stolní počítače, má smysl při vytváření webových stránek nebo obchodu s elektronickým obchodem používat osvědčená řešení, nazývaná také návrhové vzory uživatelského rozhraní. Některé z těchto vzorů jsou napříč zařízeními, jiné specifičtější. Kromě toho se tato e-kniha od UXPin ukázala jako dobrý průvodce.

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é formy mohou být vyčerpávající a rychle se zdají být matoucí. Obecně platí, že formuláře na mobilních zařízeních byste měli používat pouze v případě potřeby. Při integraci formulářů byste se měli ujistit, že se dotazujete pouze na tolik dat, kolik je skutečně nutné, a poskytnout uživatelům příslušnou klávesnici. To lze provést pomocí vhodných typů formulářů HTML. To říká prohlížeči, jaký vstup to je. K dispozici je 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 zpětné vazby nezapadá do vašeho konceptu, je stále důležité poskytnout nějakou zpětnou vazbu. Kdo nestiskl mnohokrát za sebou odkaz nebo tlačítko a nebyl si jistý, zda to prostě nefunguje nebo je připojení k internetu pryč. Tomu je třeba se vyhnout. Existují běžné triky, jako je načítání animací. Je důležité, aby uživatelé věděli, že jejich interakce fungovala a že se něco 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ý web

Přístupnost (nebo přístupnost) ve WordPressu je důležitou součástí při vytváření webových stránek. Ale jak přístupný je WordPress vlastně? Proč je přístupnost tak důležitá? A jak se vaše webové stránky stanou přístupnými všem? Pokud si tyto otázky kladete také vy, je pro vás náš Průvodce usnadněním přístupu .

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: Běžné prohlížeče umožňují kontrolovat vaše webové stránky pomocí takzvaných vývojářských nástrojů. Zde můžete také zkontrolovat své webové stránky v různých velikostech zařízení. Dalšími dobrý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 o mobilním UX designu

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é máte otázky ohledně Mobile UX Design for Sonja? Těšíme se na váš komentář. Zajímáte se o webdesign a vývoj? Pak sledujte Raidboxes na Twitteru, Facebooku,LinkedIn nebo prostřednictvím našeho newsletteru.

Líbil se vám tento článek?

Svou recenzí nám pomůžete zlepšit náš obsah.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.