16. 07. 2019
Když Luke Wroblewski přišel v roce 2009 s myšlenkou “Mobile First!”, byl první iPhone sotva 2 roky na světě. Navrhovat web nejprve pro mobily byla inovativní myšlenka pro vývojáře i designery. Dnes už je Mobile First nezbytností, se kterou musíte počítat.
Počet uživatelů, kteří se připojují k internetu výhradně z mobilních zařízení a tabletů neustále přibývá. 53 % Čechů používá mobil minimálně stejně často jako počítač. Ve světě je toto číslo ještě větší, celé dvě třetiny Spojených států se připojují k internetu výhradně z mobilů. O popularitě smartphonů nemůže být pochyb.
Mobile First je způsob navrhování uživatelského rozhraní webu, který jde v ruku v ruce s trendem. Upřednostňuje uživatelské rozhraní navržené přímo pro mobilní zařízení a upozaďuje klasický postup webdesignu, kdy se nejprve navrhne desktopová verze webu, a teprve poté se optimalizuje pro mobily. Navrhování pro malé displeje totiž umožňuje soustředit se na to, co je klíčové a má své opodstatnění i v technologické rovině online aplikace. Přečtěte si 6 bodů Modrého ducha na Mobile First design pro váš web.
Vývojem webu Desktop First a následným vytvářením responzivní verze pro mobily často dochází k narušení vizuální i funkční integrity. Představte si, že chcete stavět moderní nízkoenergetický dům. Postavíte nejprve klasické obydlí s kamny na uhlí, které pak budete složitě předělávat na nízkoenergetické, nebo stavbu rovnou navrhnete se solárními panely a kamna zcela vynecháte? S vývojem webu je to stejné. Mobile First je postup, který už od začátku počítá s jednotnou funkcionalitou na všech zařízeních.
Váš web by měl vypadat a fungovat stejně, ať už na mobilu, tabletu, notebooku nebo stolním počítači. Například, máte-li na desktopu stránku s přihlášením k uživatelskému účtu, musí být tato stránka lehce dostupná i z mobilního zařízení a uživatel by ji neměl sáhodlouze hledat. Jistě, některé prvky se pozmění vlivem jiného rozhraní, avšak celková tonalita napříč zařízeními musí zůstat stejná.
Nic nečiní zrychlování tak podstatným, jako následující výrok Googlu: „Průměrný čas k plnému načtení mobilní stránky činí 22 vteřin, avšak 53 % návštěvníků stránku opustí, pokud načtení trvá déle než 3 vteřiny.“ Projděme si několik rad, co udělat, aby se váš web načítal rychleji:
Přesměrování zpomaluje načítání. Serveru nějaký čas trvá, než nalezne a načte originální požadovanou stránku a každá vteřina navíc zvyšuje riziko opuštění webu.
Větším obrázkům trvá déle, než se načtou. Abyste proces urychlili, používejte komprimované obrázky v měřítku pro mobily. Pokud můžete, snižte počet obrázků na webu na minimum.
Celkový dojem rozhoduje, jestli si návštěvník přečte vaše sdělení, nebo ne. Nastavte nadpisy, rozestupy, zvýraznění, řádkování, zarovnání i odsazení grafiky.
Accelerated Mobile Pages (AMP) jsou variantou vedle klasicky optimalizovaných HTML stránek. Využívají redukovaný a co nejjednodušší kód a další parametry, a proto se v prohlížečích rychleji načítají.
Potřebujete redesign webu? Modrý duch oblékne vaší online prezentaci do nového kabátu!
Mobilní uživatelé chtějí navigaci, která bude jednoduchá a přehledná. Oblíbené je hamburger menu, charakterizované několika horizontálními liniemi nad sebou, které po rozkliku rozbalí větší nabídku. Naopak, protinázor tvrdí tvrdí, že uživatelé nebudou používat to, co nevidí. Co se skrývá za ikonou menu je tajemství a někteří lidé, zejména starší generace, nemusí vůbec rozpoznat, co ikona znamená nebo kde menu najdou. Klíčem k řešení je porozumět vaší cílové skupině a jejímu obvyklému chování na internetu. Vytvořte dvě varianty menu, například hamburger a sekvenční menu, a prožeňte je A/B testováním ať víte, s kterou navigací se vaší cílové skupině lépe pracuje.
„Čistému“ rozvržení (layoutu) dává přednost většina uživatelů, ale co to v praxi znamená? Jedná se o jeden z největších trendů v mobilním designu. Jednoduchý čistý layout je charakterizován tzv. negativním prostorem, který podtrhne informaci, která je důležitá, například registrační formulář. Jedná se o místo, které je záměrně prázdné, aby dalo vyniknout tomu, co je skutečně důležité.
Mobile First řešení se soustředí na to nejdůležitější, proč uživatel přišel, a nestrhává jeho pozornost jinam. Návštěvník díky tomu snadněji provede akci, kterou chcete, například dokončí objednávku. Proto je vhodné Mobile First přístup aplikovat i u zařízení s větší obrazovkou, avšak při zjednodušování dávejte pozor, abyste uživateli přehnaným redukováním informací spíše nezkomplikovali celý proces. Šest formulářů, každý na samostatné stránce, může být větší trn v patě, než jeden rozklikávacím drop-down. Myslete na to, že chcete uživateli usnadnit život, ne ho odradit.
Nenuťte uživatele zoomovat. Jako ideální rozměr se uvádí šířka mezi 47 až 50 pixely. Tlačítka by měla být tak velká, aby na ně šlo pohodlně kliknout jedním prstem bez obav, že dojde k překlepu. Například tlačítko “zpět" hned vedle tlačítka “potvrdit" dokáže uživatele velmi potrápit při dokončování objednávky. Představte si, že vyplníte celý registrační formulář, a pak se ukliknete a musíte začít znovu. Nejeden uživatel raději odejte, než by celý proces absolvovat napodruhé.
Od toho nejpodstatnějšího k méně podstatnému. Protože mobilní zobrazení neumožňuje rozsáhle větvená menu ani komplikovaný layout, ale spíše jednoduché scrollovací zobrazení odshora dolů, je nutné v tomto duchu skládat i obsah. Proto strukturujte informace lineárně, v logické návaznosti tak, jak jdou za sebou, aby uživatele navedly tam, kam potřebuje.
Praktický
Inspirující
Zábavný
Nic moc
