Mobile Web Design 10 tipov na lepšiu použiteľnosť

Očakáva sa, že prehliadanie webových stránok pre mobilné zariadenia sa stane ďalšou hlavnou internetovou platformou Teraz je ľahké prehliadať sieť od takmer kdekoľvek pomocou mobilných zariadení, ktoré sa hodia do ruky kvôli technológii. Skrátenie dobrého nasadenia v mobilnom dizajne webových stránok znemožňuje prehliadanie si rôznych populárnych mobilných webových stránok. Navrhovanie pre mobilné zariadenia musí byť jednoduchšie ako jeho štandardné webové stránky a viac úloh pre prácu, pretože užívatelia hľadajú niečo konkrétne a naliehavé.

Mali by ste brať do úvahy, ako používať najmenší dostupný priestor pre váš hlavný obsah a zostať zaujímavý pre používateľov mobilných zariadení. Vyhnite sa veľkým obrazom a animáciám s bleskom, pretože spomaľujú vaše stránky. Pamätajte si, že funkčnosť je dôležitejšia ako štýl pre mobilné webové stránky. Ak vaše webové stránky nie sú kódované a navrhnuté správne, mohlo by to vyzerať lepšie na jednom telefóne, najhoršie na inom alebo horšie, ktoré sa nezobrazuje vôbec. Otestujte, overte a skontrolujte, či je kompatibilný so všetkými mobilnými zariadeniami.

Ak chcete pomôcť pri vytváraní webových stránok, ktoré sú dostupné nielen na stolných počítačoch alebo prenosných počítačoch, ale aj na mobilných zariadeniach, nájdete tu niekoľko vecí, ktoré je potrebné zvážiť v mobilnom dizajne webových stránok pomocou vzorových obrázkov spolu s priamym odkazom verzie mobilných webových stránok.

1. Rozhodnite sa o rozlíšení obrazovky

Mobilný svet obsahuje bohatú variabilitu dizajnových úvah z rôznych veľkostí obrazoviek a rozlíšenie rôznych tvarov. Snažte sa dosiahnuť rovnováhu medzi dostatočnou šírkou obrazovky a veľkosťou publika. Zistite špecifikácie aktuálnych mobilných zariadení a používajte svoj najlepší úsudok. Čo je pre vývojárov mobilných zariadení náročné, je spôsob, ako ich zobraziť vhodne v rôznych veľkostiach obrazovky bez toho, aby ste museli znovu vytvárať stránky pre rôzne platformy.

Tu je zoznam webových rozlíšení, ktoré sú populárne na mobilných zariadeniach od februára 2011, ktoré uverejnil Uxbooth.com s ich uverejneným článkom, Dôležité informácie pre mobilný webový dizajn (časť 2): Rozmery, David Leggett. Autor vysvetľuje niekoľko bodov týkajúcich sa rozmerov displeja a riešení pre dizajn rozloženia.

2. Rozdeľte webové stránky na malé časti

Dlhé časti textu môžu byť ťažko čitateľné, takže ich umiestnenie na niekoľkých stranách obmedzuje posúvanie na jeden smer. Zbavte sa obsahu s nízkou prioritou. Držte sa jedného stĺpca textu, ktorý obopína, takže neexistuje horizontálne posúvanie.

V nižšie uvedenom príklade verzia mobilnej webovej stránky CBS News uvádza iba hlavnú sekciu správ a rozdeľuje novinové články na malé časti. Zatiaľ čo Treehugger predstavuje svoje najnovšie články a najnovšie tweety s niektorými funkciami celej webovej stránky. Na oboch stránkach má používateľ kliknutím na textový odkaz zobraziť zvyšok článku.

CBS News

Objímač stromov

3. Zjednodušte dizajn

Jednoduchosť sa rovná použiteľnosti. Nechajte sa s nimi pohybovať bez problémov. Vyhnite sa zahrnutie tabuliek, rámcov a ďalšieho formátovania. Ak používate polstrovanie, nezabudnite si udržiavať to absolútne minimum oveľa menej, než by ste použili na bežnú webovú stránku. V porovnaní s desktopovými počítačmi, čím viac kliknete na odkazy na webových stránkach pre mobilné zariadenia, tým viac budete čakať z dôvodu času načítania. S tým musíte zbaviť a zjednodušiť svoje webové stránky s rovnováhou medzi obsahom a navigáciou.

Napríklad webová stránka Best Buy pre mobilné verzie obsahuje len najdôležitejšie kategórie produktov, ktoré znižujú úroveň hierarchie obsahu. Domovská stránka YouTube pre mobilné zariadenia zobrazuje iba štyri najnovšie videoklipy.

Najlepšia kúpa

YouTube

4. Možnosť zobrazenia celej webovej stránky

Poskytnite odkaz pre svojich návštevníkov mobilných telefónov, aby ste sa vrátili späť na svoju plnú webovú lokalitu, aby si používateľ mohol nájsť a pozrieť si ďalší obsah a funkcie, ktoré sú prístupné iba pre verziu pre stolné počítače. Vaši diváci budú určite robiť veľa vertikálneho rolovania, takže im pomôžte s odkazmi "Späť na začiatok", aby mohli preskočiť na začiatok stránky.

Ako príklad uvádza Ars Technica tlačidlo prepojenia so štandardnou webovou stránkou umiestnenou v záhlaví. Zatiaľ čo Shangri-La majú svoje plné webové stránky umiestnené na zápätí.

Ars Technica

Shangri-La

5. Navigačné umiestnenie

Spoznajte svoje publikum a uvedomte si, čo hľadajú. Zistite, ako budú chcieť navigovať na vašich stránkach. Umiestite navigačné menu pod obsah, ak si vaši zacielení mobilní používatelia budú chcieť rýchlo zmeniť obsah. Obsah a nadpis musí byť viditeľný ako prvý, aby sa nedostal k zobrazovaniu obsahu stránky. Pre používateľov, ktorí chcú ihneď prejsť do určitej kategórie, umiestnite navigáciu v hornej časti stránky. Nižšie sú uvedené rôzne vzorky navigačného umiestnenia, ktoré sa používajú v mobilnom webe.

D & G

politicko

Denný horoskop

6. Použite textové odkazy

Vaša hlavná webová stránka môže používať šmykľavé menu, prevrátenia alebo iné fantazie, ale mobilný prehliadač pravdepodobne nebude. Uvedomte si, že dynamické elementy stránok a grafické odkazy využívajú zdroje, preto sa rozhodnite pre dobre označené textové odkazy.

Zoznam mimo

reddit

7. Vytvorte rozdiel medzi vybratým odkazom

Posunutím kurzora nadol sa posunie stránka a všetky odkazy sa zvýraznia naraz. Takže je dôležité jasne poradiť používateľovi, čo je zaostrené. Môžete to urobiť zmenou farby písma a pozadia odkazov a tlačidiel alebo jednoduchým pridaním niektorých políčok okolo odkazov, aby sa plocha s kliknutiami zväčšila o 44 x 44 pixlov. Geek Squad a Diesel použili veľké písma na text s možnosťou kliknutia.

Geek Squad

motorová nafta

8. Vyvážte odkazy

Každá stažená stránka spotrebováva časové a systémové zdroje, z ktorých posledné sú nedostatočné, a preto sa snažte nevynútiť návštevníkov stránok, aby prekopávali množstvo stránok, aby získali prístup k požadovaným informáciám. Vyrovnajte rovnováhu medzi počtom odkazov na každej stránke a hĺbkou stránky.

flickr

cvrlikání

9. Znížte zadávanie textu používateľa

Je ťažké zadávať text v mobilných verziách webových stránok. Nahraďte ich pomocou prepínačov alebo zoznamu, aby sa mohli jednoducho rozhodnúť pre to, čo potrebujú. Pamätajte, že mobilní používatelia nemajú prístup ku konvenčnej klávesnici a myši. Čím je adresa URL kratšia, tým lepšie je to, že je jednootónové zadávať dlhé adresy URL.

Pre našu vzorku nižšie využil Fedex kontrolný zoznam a rozbaľovacie ponuky. Zatiaľ čo si Tumblr vybral svoj jazyk pomocou rozbaľovacej ponuky.

Fedex

tumblr

10. Žiadne objekty alebo aktualizácie

Mobilné prehliadače zvyčajne nepodporujú kontextové okná. A keby tak urobili, mali by mať veľmi malý priestor na to, aby sa dostali do popredia. Nepoužívajte ich, aby ste sa vyhli nepredvídateľným výsledkom. Rovnako nemáte periodicky obnovované stránky, aby ste sa vyhli vyplneniu obmedzenej pamäte zariadenia. Umožnite užívateľovi obnoviť obsah.

Stručne

Získajte kreatívu a používajte svoj dizajn mobilného webu novým spôsobom. Urobte svoj obsah dostatočne presvedčivý a použiteľný. Dajte svojim používateľom to, čo chcú, keď to chcú. Používatelia nechcú na stránky hlbšie hľadať, aby zistili, čo hľadajú v mobilnom webe.

Máte nejaké preferované stránky pre mobilné zariadenia, ktoré vás naozaj inšpirovali? Môžete zdieľať niektoré z vašich tipov pre návrh webových stránok pre mobilné zariadenia? Dajte nám vedieť!

Ďalšie čítanie

1. Zodpovedný dizajn webu (Alistapart.com)
2. Urobte svoj web mobilný (Thinkvitamin.com)
3. Kontrola W3C mobileOK (W3.org)
4. iPhone Simulátor