Mobile Web Design 10 nasvetov za boljšo uporabnost

Mobilno brskanje po spletu naj bi se spremenilo v naslednjo večjo internetno platformo. Zdaj je enostavno brskati po omrežju s skoraj kjerkoli, z uporabo mobilnih naprav, ki se zaradi tehnologije prilegajo roki. Biti kratek v dobri uporabi uporabnosti v mobilnem spletnem oblikovanju otežuje brskanje po različnih priljubljenih mobilnih spletnih mestih. Oblikovanje za mobilne naprave mora biti enostavnejše od standardnega spletnega mesta in bolj zasnovano, da opravi nalogo, ker uporabniki iščejo nekaj posebnega in nujnega.

Upoštevajte, kako uporabiti najmanjši razpoložljivi prostor za vaše glavne vsebine in ostati zanimivi za mobilne uporabnike. Izogibajte se velikim slikam in animacijam flash, saj bo to upočasnilo vaše spletno mesto. Ne pozabite, da je funkcionalnost pomembnejša od stila za mobilne spletne strani. Če vaše spletno mesto ni pravilno kodirano in oblikovano, bi lahko izgledalo bolje na enem telefonu, najslabše na drugem ali slabše, ne pa na vseh. Preizkusite, preverite in preverite, ali je združljiva z vsemi mobilnimi napravami.

Za pomoč pri ustvarjanju spletne strani, ki ni dostopna samo na namiznih ali prenosnih računalnikih, temveč tudi na mobilnih napravah, je tukaj nekaj stvari, ki jih je treba upoštevati pri mobilnem spletnem oblikovanju z vzorčnimi slikami in neposredno povezavo z različico mobilnega spletnega mesta..

1. Odločite se za ločljivost zaslona

Svet mobilnih telefonov vsebuje bogato različico dizajnerskih preudarkov od različnih velikosti zaslona in ločljivosti do različnih oblik. Cilj je doseči ravnovesje med zadostno širino zaslona in velikostjo občinstva. Izvedite specifikacije trenutnih mobilnih naprav in uporabite svojo najboljšo presojo. Za mobilne razvijalce je težko doseči, da se prikaže ustrezno v številnih velikostih zaslona, ​​ne da bi morali ponovno ustvariti strani za različne platforme.

Tukaj je seznam spletnih resolucij, priljubljenih na mobilnih napravah od februarja 2011, ki ga je Uxbooth.com predstavil z objavljenim člankom, Premisleki za mobilno spletno oblikovanje (2. del): Dimenzije, avtor David Leggett. Avtor pojasnjuje nekaj točk o dimenzijah zaslona in rešitvah za načrtovanje postavitve.

2. Razdelite spletne strani na majhne dele

Dolgotrajne dele besedila je težko prebrati, zato jih postavite na več strani, tako da se premikate v eno smer. Znebite se vsebine z nizko prioriteto. Držite se enega samega stolpca besedila, ki se ovije, tako da ni horizontalnega drsenja.

Za spodnji primer je različica mobilne spletne strani CBS News prikazana le v glavnem oddelku za novice in novice razčleni na majhne dele. Medtem ko se Treehugger predstavlja s svojimi najnovejšimi članki in najnovejšimi tweeti z nekaterimi značilnostmi celotne spletne strani. Oba spletna mesta uporabniku omogočajo, da kliknejo besedilno povezavo, da si ogledajo preostanek članka.

CBS News

Objemalec dreves

3. Poenostavite načrtovanje

Preprostost ustreza uporabnosti. Naj se premikajo po mestu brez težav. Izogibajte se vključitvi tabel, okvirjev in drugega oblikovanja. Če uporabljate oblazinjenje, ne pozabite, da ostane na minimumu, kar je veliko manj, kot bi ga uporabili za običajno spletno stran. V primerjavi z namiznimi računalniki, bolj ko kliknete povezave na mobilnih spletnih mestih, bolj boste čakali zaradi časa nalaganja. S tem morate odstraniti in poenostaviti spletno mesto z ravnotežjem med vsebino in navigacijo.

Za naš primer spletna stran za mobilno različico Best Buy vsebuje samo najpomembnejše kategorije izdelkov, ki zmanjšujejo raven hierarhije za vsebino. Medtem ko je na začetni spletni strani YouTube prikazana samo štiri najnovejša videoposnetka v središču pozornosti.

Najboljši nakup

YouTube

4. Možnost ogleda celotne spletne strani

Omogočite povezavo za mobilne obiskovalce, da se preklopijo nazaj na celotno spletno mesto, tako da uporabnik najde in si ogleda drugo vsebino in funkcije, ki so dostopne samo za namizno različico spletnega mesta. Vaši gledalci bodo zagotovo naredili veliko navpičnega pomikanja, zato jim pomagajte pri povezavah »Nazaj na vrh«, da bodo lahko skočili na vrh strani.

Na primer, Ars Technica ima svoj gumb za povezavo na standardno spletno stran, ki se nahaja na naslovu. Medtem ko imajo Shangri-La polno spletno stran, ki je postavljena na nogo.

Ars Technica

Shangri la

5. Namestitev navigacije

Spoznajte svoje občinstvo in se zavedajte, kaj iščejo. Ugotovite, kako bodo želeli krmariti po vašem spletnem mestu. Postavite navigacijski meni pod vsebino, če želeni mobilni uporabniki hitro vidijo spreminjanje vsebine. Vsebina in naslov morata biti najprej vidna, da ne bosta videla vsebine strani. Za uporabnike, ki želijo krmariti po določeni kategoriji takoj, postavite navigacijo na vrh strani. Spodaj so prikazani različni vzorci navigacije, ki se uporabljajo v mobilnem spletnem oblikovanju.

D&G

Politico

Dnevni horoskop

6. Uporabite besedilne povezave

Na vaši glavni spletni strani lahko uporabljate izbrane menije, rolloverje ali druge modne pripomočke, vendar mobilni brskalnik verjetno ne bo. Zavedajte se, da dinamični elementi strani in grafične povezave porabijo sredstva, zato se odločite za dobro označene besedilne povezave.

Seznam poleg

Reddit

7. Razlikujte izbrano povezavo

Če premaknete kurzor navzdol, se bo stran pomaknila navzgor in povezave naenkrat označene. Zato je pomembno, da uporabniku jasno svetujete, kateri element je v središču pozornosti. To lahko storite tako, da spremenite pisavo in barvo ozadja povezav in gumbov ali pa preprosto dodate nekaj oblazinjenja okoli povezav, tako da bo območje, ki ga je mogoče klikniti, večje od 44px za 44px. Geek Squad in Diesel sta uporabila velike pisave za besedilo, ki ga je mogoče klikniti.

Geek Squad

Diesel

8. Uravnotežite povezave

Vsak prenos strani porabi čas in sistemske vire, pri čemer slednji manjkajo, zato poskusite obiskovalcu spletnega mesta ne prisiliti, da se prebere po številnih straneh, da bi dostopal do iskanih informacij. Naredite ravnovesje med številom povezav na vsaki strani in globino spletnega mesta.

Flickr

Twitter

9. Zmanjšajte vnos besedila uporabnika

Težko je vnašati besedilo v mobilnih različicah spletnih mest. Namesto tega jih zamenjajte z radijskimi gumbi ali seznamom, da se lahko z lahkoto odločijo za to, kar potrebujejo. Ne pozabite, da uporabniki mobilnih telefonov nimajo dostopa do običajne tipkovnice in miške. Krajši je URL, bolje je zato, ker je enoličen za vnašanje dolgih URL-jev.

Za naš vzorec spodaj je Fedex uporabil kontrolni seznam in spustne menije. Medtem ko je Tumblr naredil, da izberete svoj jezik s spustnim menijem.

Fedex

Tumblr

10. Ne pops ali osveži

Brskalniki za mobilne naprave običajno ne podpirajo pojavnih oken. In če bi to storili, bi imeli zelo ozek prostor, da bi ga spustili. Izogibajte se uporabi njih, da se izognete nepredvidljivim rezultatom. Tudi strani se ne občasno osvežujejo, da se naprava ne bi polnila z omejenim pomnilnikom. Naj uporabnik osveži vsebino.

Na kratko

Bodite ustvarjalni in uporabite mobilno spletno oblikovanje na nov način. Naj bo vaša vsebina dovolj prepričljiva in uporabna. Dajte svojim uporabnikom, kar želijo, ko jih želijo. Uporabniki ne želijo kopati globlje do spletnega mesta samo zato, da bi našli tisto, kar iščejo v mobilnem spletu.

Ali imate želene mobilne strani, ki so vas resnično navdihnile? Ali lahko delite nekaj svojih nasvetov za oblikovanje mobilnega spleta? Sporočite nam!

Nadaljnje branje

1. Odzivno spletno oblikovanje (alistapart.com)
2. Naredite svojo stran Mobile Friendly (thinkvitamin.com)
3. W3C mobileOK Checker (w3.org)
4. iPhone Simulator