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

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.

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.

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:

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

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:

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.

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. 

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

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.

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

7. Navigace

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

CTA a odkazy

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

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í

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? 

Měli byste však postupovat kriticky, abyste nekopírovali chyby nebo "špatné" prvky UX. 

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

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

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.

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