8 způsobů, jak optimalizovat vaše stránky pro mobily
Když se svět přesunul z stolních počítačů na mobilní zařízení, návrháři se ještě více zaměřili na UX. Přestože uživatelské rozhraní hraje důležitou roli při vytváření návrhů přátelských pro mobilní zařízení, zkušenost uživatelů se nyní stala stejně důležitou, zejména proto, že nyní máme více zařízení, na něž se soustředíme, a zkušenosti uživatelů se liší od typu zařízení.
UX je něco, co přesahuje hranice grafiky a estetiky. Stejně jako Rahul Varshney, spoluzakladatel foster.fm , říká:
Uživatelské rozhraní bez UX je jako malíř, který slaví barvu na plátno bez myšlenky.
Rahul měl s touto analogií pravdu. Můžete mít nejpřitažlivější, uživatelsky přívětivější, jedinečnou a funkční verzi vašeho webu pro stolní počítače, ale pokud nezohledňujete mobilní zážitek, jen jste malování bez jakéhokoli myšlení.
Takže, co odděluje dobrý mobilní zážitek od špatného mobilního zážitku? Není to příliš obtížné oddělit klíčové komponenty, které tvoří vysoce efektivní, optimalizovaný a uživatelsky zaměřený design. Zde je však několik nejlepších postupů, které by vás měly řídit po cestě:
1) Nejprve nepřiřadte mobilní zařízení
Pokud je vaše webové stránky zaměřené na mobilní telefony UX, možná budete chtít tuto tradici přerušit podle strategie "mobilní první". Neexistuje žádná újma při používání této techniky, pokud máte pocit, že většina vašich uživatelů bude mít přístup k vašim webovým stránkám prostřednictvím mobilního zařízení. Stejně jako kódové zobrazení naznačuje, že mobilní webový design není výklenkem, ve skutečnosti existují "1,2 miliardy uživatelů mobilních webů po celém světě" a zdá se, že se jejich počet v poslední době nezmění (pravděpodobně se v blízké budoucnosti zvýší). To může být nejprve trochu náročné; ale pokud jste ochotni dát svého uživatele jako první, stojí za to střílet.
Jen proto, že jste se zaměřili na navrhování jednoduché, čisté nebo mobilní webové stránky, neznamená, že by nemělo být sofistikované. Karimrashid.com je dokonalým příkladem toho, jak lze jednoduchost a sofistikování promíchat do vytváření čistého a citlivého, ale elegantního designu.
2) Vytvořte rozložení tekutin
Existuje prostě příliš mnoho možných velikostí obrazovky, které si můžete vybrat a vybrat, které z nich budete navrhnout. Budete muset vytvořit rozvržení, které se přizpůsobí co nejlépe všem. Naštěstí jsou zde tekuté rozvržení, abyste zachránili den!
Na základě procent, spíše než definitních měření, jako jsou pixely, se tekuté rozložení stalo standardem mezi profesionály webu. Mohou být složité, ale ujistěte se, že tolik lidí, kolik je to možné, může skutečně využít vaše stránky, stojí za to.
3) Zaměřte se na funkčnost
Co je to funkce? To je to, co nabízíte svým návštěvníkům, abyste mohli dělat věci a udělali rychle. Na základě účelu vašeho webu by měly všechny nástroje, jako jsou nejbližší prodejny, vyhledávání produktů, recenze produktů nebo převodníky měny, pomáhat uživatelům provádět zamýšlené "funkce" a dosažení cílů mnohem rychleji.
Purina , poskytovatel krmiv pro domácí zvířata, je dokonalým příkladem toho, jak usnadnit "fungování" na webové stránce. Domovská stránka obsahuje vyhledávací pole, ve kterém můžete hledat věc, kterou hledáte. Níže jsou dva oddělené sloupce pro druh zvířecího jídla, se kterým se specializují. Celá webová stránka se snadno pohybuje pomocí sloupků, knoflíků, nástrojů a konstrukčních prvků, které rozhodují o tom, jaký druh krmiv pro zvířata - a pak kupují - vítr.
4) Určete své uživatele
Nepokoušejte se stát se konektorem všech obchodů, protože vás může stát typickým uživatelem a nikdo to nechce. Nejprve zjistěte, kdo jsou vaši uživatelé. Pak zjistěte jejich typické chování při prohlížení webových stránek. Jakmile je odloženo stranou, zjistěte, co z nich dělá. Moderní uživatelé mají dva hlavní typy: ti, kteří prohlížejí bez cíle a ti, kteří chtějí vykonat úkol. Každá z těchto skupin by na základě jejich potřeb vyžadovala různé "funkce".
Není těžké odhadnout demografické údaje uživatelů webové stránky The Body Shop, protože zanechává rady na celé stránce. Vzhledem k tomu, že společnost The Body Shop je vysoce zaměřena na "přírodní ingredience" a sociální aktivismus, pochopitelně jsou monochromatické zelené variace, posuvník přírodních složek, "zelený" výběr obrazů, zprávy o spravedlivém obchodu, slibů a dalších společenských akcích dobře vyvinutý designový koncept.
5) Vždy se podívejte do vývojářských knihoven a pokynů
Na základě platformy, kterou budete používat, je důležité, abyste pokyny UI blížili. Některé platformy umožňují větší flexibilitu než ostatní. Ať je tomu tak, některé klíčové složky značky nebo "podpisy" by měly zůstat.
Vývojář aplikace Apple by se měl podívat na Pokyny k rozhraní lidského rozhraní iOS a postupujte podle standardů společnosti Apple, pokud jde o návrh základů, designových strategií, prvků rozhraní UI, návrhu ikon / obrázků apod. Vývojář Androidu by se měl naučit vše o součástech, stylu, použitelnosti a uspořádání typických aplikací pro Android s pomocí Průvodce vývojáři Android .
6) Udělat veškerý obsah všem uživatelům
Někteří návrháři namísto toho, aby celý jejich obsah pracoval v tekutých rozloženích, se rozhodnou jen skrýt některé z mobilních uživatelů. Někdy je to proto, že rozvržení je obtížné, nebo mají pocit, že je příliš velký obsah pro mobilní uspořádání. To je špatný přístup.
Poskytování uživatelům "zbavené" verze vašeho webu nebo aplikace je nejen nepoctivé vůči mobilním uživatelům, ale může se stát vážným zájmem a ztrácí zákazníky. Možná budete muset zjednodušit rozvržení až do extrému, přesunout nějaký obsah na jiné obrazovky, abyste omezili nepořádek, nebo zkuste to lépe organizovat; ale musí to být tam .
Porovnejte verzi pro stolní počítače BBC stránky do mobilní verze. Zatímco je to jednodušší, než bylo dřívější, stále se na obrazovce zobrazují všechny druhy informací. Mobilní verze naopak ukládá některé obrázky (které jsou stále k dispozici v samotných článcích), ale drží všechny titulky, čímž dramaticky zjednodušuje zážitek na obrazovce telefonu.
7) Návrh na dotyk
Je také užitečné mít na paměti skutečnost, že uživatel mobilních zařízení bude používat prsty místo přesných ukazatelů myši. Váš návrh by měl být snadný pro navigaci prsty všech velikostí a tvarů, protože všechny mobilní zařízení jsou nyní dotykovým displejem. Uživatel by neměl muset přitahovat příliš mnoho nebo přiblížit klepnutím na něco nebo vyplnit formulář nebo klepnout na tlačítko. Nepřesné kohouty jsou také velmi běžné na malých zařízeních, které by měly být v návrhu zohledněny s dostatečně velkými dotykovými vstupy nebo gestami, aby se práce dělala.
Tady je a touch table podle Peter-Paul Koch to by mohlo pomoci. Všimněte si, jak se události dotyku (a další akce) mohou lišit v závislosti na kompatibilitě prohlížeče a zařízení.
8) Používejte kompresní nástroje
Množství nástrojů, které jsou dnes k dispozici k tomu, aby návrhářova práce nebylo méně zatěžující, je nepřekonatelné. Najdete zde skriptové kompresory jako např HTML kompresor nebo Gzip komprese, která automaticky odstraní nepotřebné komentáře, prázdné místo nebo kód. CSS minifier a Kompresor CSS a další nástroje, které vám umožní spojit kód CSS a zlepšit výkon. Komprese obrazu je stejně důležitá; některé, které sníží velikost vašich souborů .jpeg a .png a zároveň zachovávají kvalitu neporušenou EWWW Image Optimizer , smush.it , optiPNG , a jpegtran .
Zde je příklad vysoce citlivého návrhu portfolia RyJohnson . Webová stránka je plná nádherných obrázků, které se neliší od verze pro stolní počítače. Tajemství rychlého načítání je bezpochyby optimalizace obrazu.
