Mobile Web Design 10 savjeta za bolju upotrebljivost

Očekuje se da će se mobilno pregledavanje weba pretvoriti u sljedeću veliku internetsku platformu. Sada je lako pregledavati mrežu s gotovo bilo kojeg mjesta pomoću mobilnih uređaja koji se uklapaju u ruku zbog tehnologije. Biti kratki u dobroj implementaciji u upotrebljivosti u mobilnom web dizajnu otežava pregledavanje vašeg puta oko različitih popularnih mobilnih web-mjesta. Dizajniranje za mobilne uređaje mora biti jednostavnije od standardne web-lokacije i više se temelji na zadacima kako bi se posao obavio jer korisnici traže nešto specifično i hitno.

Trebali biste uzeti u obzir kako koristiti najniži mogući prostor za vaše glavne sadržaje i ostati zanimljivi mobilnim korisnicima. Izbjegavajte velike slike i flash animacije jer će usporiti vašu web-lokaciju. Zapamtite da je funkcionalnost važnija od stila za mobilne web-lokacije. Ako vaša web-lokacija nije dobro kodirana i dizajnirana, to bi moglo izgledati bolje na jednom telefonu, najgore na drugom ili još gore, ne prikazujući se uopće. Testirajte, provjerite i provjerite je li kompatibilan sa svim mobilnim uređajima.

Da bi vam pomogao u izradi web-lokacije koja je dostupna ne samo na stolnim ili prijenosnim računalima, nego i na mobilnim uređajima, evo nekoliko stvari koje treba razmotriti na mobilnom web-dizajnu uz primjere slika zajedno s izravnom vezom za inačicu mobilne web-lokacije.

1. Odlučite za razlučivost zaslona

Mobilni svijet sadrži bogatu varijaciju dizajnerskih razmatranja od različitih veličina zaslona i razlučivosti do različitih oblika. Nastojte postići ravnotežu između dovoljne širine zaslona i veličine publike. Saznajte specifikacije trenutnih mobilnih uređaja i iskoristite svoju najbolju prosudbu. Ono što je izazov za razvojne programere za mobilne uređaje jest način na koji se može prikazati na odgovarajući način u nizu veličina zaslona bez potrebe za ponovnim izradom stranica za različite platforme.

Ovdje je popis web rezolucija popularan na mobilnim uređajima od veljače 2011 predstavljen od strane Uxbooth.com s njihovim objavljeni članak, Razmatranja za mobilni web dizajn (2. dio): Dimenzije, autor David Leggett. Autor objašnjava nekoliko točaka o dimenzijama prikaza i rješenjima za dizajn izgleda.

2. Podijelite web stranice na male dijelove

Duge dijelove teksta može biti teško čitati, pa ih stavljanje na nekoliko stranica ograničava pomicanjem u jednom smjeru. Oslobodite se sadržaja niskog prioriteta. Držite se samo jednog stupca teksta koji omata tako da nema horizontalnog pomicanja.

Za primjer u nastavku, verzija web-lokacije CBS News za mobilne uređaje prikazuje samo glavni odjeljak s vijestima i dijeli članke na male dijelove. Dok se Treehugger predstavlja sa svojim nedavnim člancima i najnovijim tweetovima s nekim značajkama pune web stranice. Oba mjesta imaju korisnik klik na tekstualnu vezu da bi pregledao ostatak članka.

CBS News

Grlitelj stabala

3. Pojednostavite dizajn

Jednostavnost odgovara upotrebljivosti. Neka se bez poteškoća kreću po mjestu. Izbjegavajte uključivanje tablica, okvira i drugog oblikovanja. Ako koristite padding, imajte na umu da ga držite na apsolutnom minimumu daleko manje nego što biste koristili za normalnu web stranicu. U usporedbi s stolnim računalima, što više kliknete na veze na mobilnim web-lokacijama, više čekate zbog vremena učitavanja. Uz to morate ukloniti i pojednostaviti web-lokaciju s ravnotežom između sadržaja i navigacije.

U našem primjeru, web-lokacija za mobilnu verziju Best Buy navodi samo najbitnije kategorije proizvoda koje se smanjuju na razini hijerarhije sadržaja. Dok početna stranica usluge YouTube za mobilne uređaje prikazuje samo četiri najnovija videozapisa s naglaskom.

Best Buy

YouTube

4. Mogućnost pregledavanja cijele web-lokacije

Omogućite posjetiteljima mobilnih mreža vezu za povratak na cijelu web-lokaciju kako bi korisnik pronašao i pregledao drugi sadržaj i značajke koje su dostupne samo verziji web-lokacije za stolna računala. Vaši će gledatelji zasigurno obaviti mnogo vertikalnog pomicanja, pa im pomognite s vezama "Natrag na vrh" kako bi mogli prijeći na vrh stranice.

Primjerice, Ars Technica ima gumb za povezivanje na standardnu ​​web-lokaciju postavljenu na naslov. Dok Shangri-La ima punu web stranicu postavljenu na podnožje.

Ars Technica

Šangri-La

5. Položaj navigacije

Upoznajte svoju publiku i budite svjesni onoga što traže. Saznajte kako će se kretati po svojoj web-lokaciji. Postavite navigacijski izbornik ispod sadržaja ako ciljani mobilni korisnici žele brzo vidjeti promjenu sadržaja. Sadržaj i naslov najprije moraju biti vidljivi da ne bi smetali gledanju sadržaja stranice. Za korisnike koji se žele odmah kretati određenom kategorijom, postavite navigaciju na vrh stranice. U nastavku se nalaze različiti uzorci navigacijskog položaja koji se koriste u mobilnom web dizajnu.

D & G

Političko

Dnevni horoskop

6. Koristite tekstualne veze

Na glavnoj web-lokaciji mogu se koristiti izbornici, prevrtanja ili drugi moderni uređaji, ali mobilni preglednik vjerojatno neće. Budite svjesni da dinamični elementi stranice i grafički linkovi troše resurse, stoga se odlučite za dobro označene tekstualne veze.

Popis osim

Reddit

7. Napravite razliku između odabrane veze

Pomicanjem kursora prema dolje možete pregledati stranicu i istodobno istaknuti veze. Dakle, važno je jasno savjetovati korisnika koji je predmet u fokusu. To se može postići promjenom fonta i boje pozadine linkova i gumba ili jednostavnim dodavanjem neke obloge oko veza kako bi se područje koje se može kliknuti povećati oko 44px za 44px. Geek Squad i Diesel su koristili velike fontove za tekst koji se može kliknuti.

Geek Squad

Dizel

8. Balansirajte veze

Preuzimanje svake stranice troši vrijeme i sistemske resurse, od kojih potonji nedostaju, stoga pokušajte ne prisiljavati posjetitelja web-lokacije da pretražuje mnoštvo stranica kako bi pristupio traženim informacijama. Postignite ravnotežu između broja veza na svakoj stranici i dubine stranice.

Flickr

Cvrkut

9. Smanjite unos teksta za korisnika

Teško je unositi tekst u mobilnim verzijama web-mjesta. Umjesto toga zamijenite radijske gumbe ili popis kako bi se mogli jednostavno odlučiti za ono što im je potrebno. Zapamtite da korisnici mobilnih uređaja nemaju pristup uobičajenim tipkovnicama i mišu. Što je URL kraći, to je bolje jer je monotono unositi duge URL-ove.

Za naš uzorak u nastavku Fedex je koristio kontrolni popis i padajuće izbornike. Dok je Tumblr učinio da odaberete svoj jezik pomoću padajućeg izbornika.

FedEx

tumblr

10. Nema pops ili osvježava

Mobilni preglednici obično ne podržavaju skočne prozore. A ako jesu, imat će vrlo uski prostor. Držite se podalje od toga kako biste izbjegli nepredvidive rezultate. Isto tako, nemojte povremeno osvježavati stranice kako biste izbjegli punjenje memorije s ograničenim brojem uređaja. Neka korisnik osvježi sadržaj.

U suštini

Budite kreativni i primijenite svoj mobilni web dizajn na nov način. Učinite svoj sadržaj dovoljno privlačnim i upotrebljivim. Dajte korisnicima ono što žele, kada to žele. Korisnici ne žele kopati dublje na web-lokaciju samo da bi pronašli ono što traže u mobilnom webu.

Imate li željene mobilne web-lokacije koje su vas zaista inspirirale? Možete li podijeliti neke od savjeta za mobilni web dizajn? Javite nam!

Daljnje čitanje

1. Odgovarajući web dizajn (Alistapart.com)
2. Učinite vašu web lokaciju mobilnom prijateljskom (Thinkvitamin.com)
3. W3C mobileOK Provjera (W3.org)
4. iPhone Simulator