Mobiilne veebidisain 10 nõuet paremaks kasutatavuseks

Mobiilse veebi sirvimise eeldatavasti kujuneb järgmine suurem internetiplatvorm. Nüüd on lihtne võrku sirvida peaaegu kõikjal, kasutades tehnoloogia abil käes olevaid mobiilseadmeid. Lühike hea kasutatavuse rakendamine mobiilse veebidisaini puhul raskendab erinevate populaarsete mobiilsete veebisaitide sirvimist. Mobiilseadmete projekteerimine peab olema lihtsam kui selle standardne veebisait ja rohkem ülesannetel põhinev, et saada tööd, sest kasutajad otsivad midagi konkreetset ja kiiret.

Peaksite arvestama, kuidas kasutada oma peamise sisu jaoks kõige väiksemat vaba ruumi ja jääb mobiilikasutajatele huvitavaks. Vältige suuri pilte ja flash animatsiooni, kuna see aeglustab teie saiti. Pidage meeles, et mobiilsete veebisaitide funktsioon on olulisem kui stiil. Kui teie veebisait ei ole kodeeritud ja kujundatud korralikult, võib see ühel telefonil parem, halvimal juhul teisel või halvemal juhul, kui seda üldse ei kuvata. Kontrollige, kontrollige ja kontrollige, kas see ühildub kõigi mobiilseadmetega.

Et aidata teil luua veebisaiti, mis on ligipääsetav mitte ainult laua- või sülearvutitele, vaid ka mobiilseadmetele, on siin mõned asjad, mida mobiilse veebidisaini puhul tuleb kaaluda koos näidiskujutistega koos mobiilse veebisaidi versiooniga.

1. Otsustage ekraani eraldusvõime

Mobiilmaailm sisaldab erinevaid disaini kaalutlusi erinevatelt ekraanisuurustelt ja eraldusvõimelt erinevatesse kuju. Eesmärk on leida tasakaal piisava ekraani laiuse ja publiku suuruse vahel. Uurige praeguste mobiilseadmete spetsifikatsioone ja kasutage oma parimat hinnangut. Mis on mobiilsete arendajate jaoks väljakutse, on viis, kuidas saada sobivalt kuvada erinevaid ekraani suurusi ilma erinevate platvormide lehtede taastamiseta.

Siin on nimekiri mobiilseadmetes populaarsetest veebi resolutsioonidest alates 2011. aasta veebruarist, mille Uxbooth.com esitas oma avaldatud artikliga, Mobiilse veebidisaini (2. osa) kaalutlused: mõõtmed, David Leggett. Autor selgitab mõningaid punkte ekraani mõõtmetest ja lahendustest kujunduse kujundamisel.

2. Jagage veebilehti väikesteks osadeks

Pikad tekstiosad võivad olla raskesti loetavad, nii et nende paigutamine mitmele leheküljele piirab kerimise ühte suunda. Vabane madala prioriteediga sisust. Püsi ühte teksti, mis mähib, veergu, nii et ei ole horisontaalset kerimist.

Alltoodud näite puhul näitab CBS News mobiilse veebisaidi versioon ainult suuremat uudiste osa ja katkestab uudiste artiklid väikesteks osadeks. Kuigi Treehugger esitleb end oma viimaste artiklite ja viimaste tweets'idega koos mõne veebisaidi omadustega. Mõlemad saidid klõpsavad teksti ülejäänud lingile, et vaadata ülejäänud artiklit.

CBS News

Puu kallistaja

3. Lihtsustage disaini

Lihtsus võrdub kasutatavusega. Las nad liiguvad saidi ümber ilma raskusteta. Vältige tabelite, raamide ja muu vorminduse lisamist. Kui kasutate polsterdamist, pidage meeles, et hoiate selle absoluutse miinimumini palju vähem kui tavalise veebilehe jaoks. Võrreldes lauaarvutitega, seda rohkem klõpsate mobiilsete veebisaitide linkidel, seda rohkem ootate laadimisaja tõttu. Sellega peate oma veebisaidi sisu ja navigatsiooni vahelise tasakaalu abil maha lohistama.

Meie näite puhul on Best Buy'i mobiiliversiooni veebisaidil loetletud ainult kõige olulisemad tootekategooriad, mis vähendavad sisu hierarhia taset. Kui YouTube'i mobiilsidevõrgu avalehel kuvatakse ainult neli viimast tähelepanu keskpunkti videot.

Parim ost

Youtube

4. Võimalus vaadata kogu veebisaiti

Pakkuge oma mobiilikasutajatele lingile, et minna tagasi oma täielikku veebisaiti, et kasutaja saaks leida ja vaadata muud sisu ja funktsioone, mis on ligipääsetavad ainult saidi töölaua versioonile. Teie vaatajad teevad kindlasti palju vertikaalset kerimist, et aidata neil välja lülitada lingid „Tagasi üles”, et nad saaksid hüpata lehe ülaosale.

Näiteks on Ars Technica lingilüliti pealkirjale paigutatud standardsele veebisaidile. Kuigi Shangri-La on oma veebisaidi täieliku linki allkirjastatud.

Ars Technica

Shangri-La

5. Navigeerimiskoht

Tutvuge oma publikuga ja teadke, mida nad otsivad. Uuri, kuidas nad soovivad saidil navigeerida. Kui teie sihitud mobiilikasutajad tahavad sisu kiiresti muuta, paigutage oma navigatsioonimenüü sisu alla. Sisu ja pealkiri peavad olema kõigepealt nähtavad, et saaksid lehe sisu vaadata. Kasutajatele, kes soovivad kohe teatud kategooriaga navigeerida, asetage navigeerimine lehe ülaosas. Allpool on toodud mitmesugused navigatsioonipaigutuse näidised, mida kasutatakse mobiilse veebi disainis.

D&G

Poliitika

Igapäevane horoskoop

6. Kasutage tekstilinke

Teie peamine veebisait võib kasutada whizzy-out-out menüüsid, rollovers'eid või muid väljamõeldud vidinaid, kuid mobiilibrauser tõenäoliselt mitte. Pea meeles, et dünaamilised leheküljeelemendid ja graafilised lingid tarbivad ressursse, seega vali hästi märgistatud tekstilinkid.

Nimekiri

Reddit

7. Tehke vahet valitud linki vahel

Kursori liigutamine alla liigutab lehte ja tõstab lingid esile korraga. Niisiis on oluline, et kasutajale selgitataks, milline element on fookuses. Seda saab teha linkide ja nuppude fondi ja taustavärvi muutmise teel või lihtsalt lisades lingid ümber, et muuta klõpsatav ala 44px võrra suuremaks umbes 44px. Geek Squad ja Diesel kasutasid klõpsatava teksti jaoks suuri kirju.

Geek Squad

Diisel

8. Tasakaalu lingid

Iga lehekülje allalaadimine kulutab aega ja süsteemiressursse, millest viimased on puudulikud, nii et proovige mitte sundida saidi külastajat digg'i läbi paljude lehekülgede, et saada soovitud teavet. Looge tasakaal iga lehekülje linkide arvu ja saidi sügavuse vahel.

Flickr

Twitter

9. Vähendage kasutaja tekstisisestust

Veebilehtede mobiilversioonides on raske sisestada teksti. Asendage raadionuppude või nimekirjaga, et nad saaksid kergesti valida, mida nad vajavad. Pidage meeles, et mobiilikasutajatel pole juurdepääsu tavalisele klaviatuurile ja hiirele. Mida lühem on URL, seda parem on see, et pikkade URLide sisestamine on monotoonne.

Allpool toodud proovi jaoks kasutas Fedex kontrollnimekirja ja rippmenüüd. Kuigi Tumblr valis teie keele rippmenüüst.

Fedex

Tumblr

10. Ei hüppab või värskendab

Mobiilibrauserid ei toeta hüpikaknaid tavaliselt. Ja kui nad seda teeksid, oleks neil väga kitsas ruum. Eemaldage nende kasutamine ettearvamatute tulemuste vältimiseks. Samuti ei ole perioodiliselt perioodiliselt värskendavaid lehti, et vältida seadme piiratud mälu täitmist. Laske kasutajal sisu värskendada.

A Nutshell

Looge loominguline ja rakendage oma mobiilse veebi disaini uuel viisil. Tee oma sisu piisavalt kaalukaks ja kasutatavaks. Andke oma kasutajatele, mida nad tahavad, kui nad seda tahavad. Kasutajad ei taha veebilehte sügavamalt kaevata, et leida, mida nad otsivad mobiilivõrgus.

Kas teil on eelistatud mobiilseid saite, mis teid tõesti inspireerisid? Kas saate jagada mõningaid oma mobiilse veebidisaini nõuandeid? Anna meile teada!

Lisalugemist

1. Tundlik veebidisain (alistapart.com)
2. Tee oma veebisait sõbralikuks (thinkvitamin.com)
3. W3C mobiilikontroller (w3.org)
4. iPhone Simulator