Mobile Web Design 10 Vinkkejä käytettävyyden parantamiseksi

Matkaviestinverkkojen selaamisen odotetaan kääntyvän seuraavaksi suureksi Internet-alustaksi. Nyt on helppo selata verkkoa lähes miltei missä tahansa käyttämällä mobiililaitteita, jotka sopivat käteen teknologian takia. Lyhyt hyvä käytettävyys mobiiliverkkosuunnittelussa vaikeuttaa selaamista eri suosittujen mobiilisivustojen ympärille. Mobiililaitteiden suunnittelun on oltava yksinkertaisempi kuin sen tavallinen sivusto ja tehtäväpohjainen, jotta työ saadaan aikaan, koska käyttäjät etsivät jotain erityistä ja kiireellistä.

Sinun tulisi ottaa huomioon, miten pääsisältöäsi varten käytetään mahdollisimman vähän vapaata tilaa ja että se pysyy mielenkiintoisena mobiilikäyttäjille. Vältä suuria kuvia ja flash-animaatioita, koska se hidastaa sivustoasi. Muista, että mobiilisivustojen toiminnallisuus on tärkeämpää kuin tyyli. Jos sivustosi ei ole koodattu ja muotoiltu kunnolla, se voisi näyttää paremmalta yhdellä puhelimella, pahimmillaan toisella tai huonompi, eikä näytä ollenkaan. Testaa, tarkista ja tarkista, onko se yhteensopiva kaikkien mobiililaitteiden kanssa.

Voit auttaa sinua luomaan verkkosivustoja, jotka eivät ole pelkästään työpöydällä tai kannettavilla tietokoneilla, vaan myös mobiililaitteilla, ja tässä on muutamia asioita, jotka on otettava huomioon mobiiliverkkosuunnittelussa, jossa on otoskuvia yhdessä mobiilisivuston version suoran linkin kanssa.

1. Valitse näytön tarkkuus

Mobiilimaailmassa on runsaasti muotoilunäkökohtia erilaisista näytön kooista ja erottelukyvystä erilaisiin muotoihin. Tavoitteena on löytää tasapaino riittävän näytön leveyden ja yleisön koon välillä. Selvitä nykyisten mobiililaitteiden tiedot ja käytä parasta tuomiota. Mobiilikehittäjille haastava tapa on saada se näyttämään asianmukaisesti eri näytön koossa ilman, että tarvitsemme uudestaan ​​sivuja eri alustoille.

Tässä on luettelo mobiililaitteissa suosituista web-päätöslauselmista helmikuusta 2011 alkaen, jotka Uxbooth.com esitti julkaisemallaan artikkelilla, Mobiilin Web-suunnittelun näkökohdat (osa 2): Mitat, David Leggett. Kirjoittaja kertoo muutamia kohtia kuvien mitoista ja ratkaisuista ulkoasun suunnittelussa.

2. hajota verkkosivut pieniksi osiksi

Pitkät tekstiosat voivat olla vaikeasti luettavissa, joten niiden sijoittaminen useille sivuille rajoittaa vierittämistä yhteen suuntaan. Päästä eroon alhaisen prioriteetin sisällöstä. Pidä kiinni yhdestä sarakkeesta, joka käärii, joten ei ole vaakasuoraa vieritystä.

Alla olevassa esimerkissä CBS News -verkkosivuston versio näyttää vain suurimman uutisosion ja rikkoo uutisartikkelit pieniksi osiksi. Vaikka Treehugger esittelee itsensä uusimpien artikkeleidensa ja uusimpien tweettiensä kanssa, joissa on joitakin täyden sivuston ominaisuuksia. Molemmilla sivustoilla on käyttäjä napsauttamalla tekstilinkkiä, jotta hän voi tarkastella muuta artikkelia.

CBS News

Puunhalaaja

3. Yksinkertaista suunnittelua

Yksinkertaisuus vastaa käytettävyyttä. Anna heidän liikkua paikan päällä ilman vaikeuksia. Vältä taulukoiden, kehysten ja muun muotoilun sisällyttämistä. Jos käytät pehmustusta, muista pitää se ehdottomasti vähäisempänä paljon vähemmän kuin normaalille verkkosivulle. Mitä enemmän pöytätietokoneisiin verrattuna, napsautat mobiilisivustojen linkkejä, sitä enemmän odotat latausajan takia. Sen avulla sinun on poistettava ja yksinkertaistettava sivustoasi sisällön ja navigoinnin välillä.

Esimerkiksi Best Buyin mobiiliversio-sivustossa luetellaan vain tärkeimmät tuoteryhmät, jotka leikkaavat sisällön hierarkian tasoa. YouTube-mobiili-aloitussivulla on vain neljä viimeisintä valokeilaa.

Best Buy

YouTube

4. Voit tarkastella koko verkkosivustoa

Anna linkki, jonka avulla kävijät voivat siirtyä takaisin koko sivustoosi, jotta käyttäjä voi etsiä ja katsella muuta sisältöä ja ominaisuuksia, jotka ovat vain sivuston työpöydän version käytettävissä. Katsojat tekevät varmasti paljon pystysuuntaista vieritystä, joten auta heitä selaamalla ylöspäin -linkkejä, jotta he voivat siirtyä sivun yläreunaan.

Esimerkiksi Ars Technicalla on linkkipainike otsikkoon sijoitetulle vakiosivustolle. Vaikka Shangri-La on täyden verkkosivustonsa linkki alatunnisteeseen.

Ars Technica

Shangri-La

5. Navigointipaikka

Tutustu yleisöön ja ole tietoinen siitä, mitä he etsivät. Selvitä, miten he haluavat navigoida sivustossasi. Sijoita navigointivalikko sisällön alle, jos kohdistetut mobiilikäyttäjät haluavat nähdä sisällön muuttamisen nopeasti. Sisällön ja otsikon on oltava näkyvissä, jotta sivun sisältöä ei katsota. Käyttäjille, jotka haluavat navigoida tietyssä luokassa heti, sijoita navigointi sivun yläreunaan. Alla on useita mobiilisivuston suunnittelussa käytettäviä navigointinäytön näytteitä.

D & G

Poliittis

päivän horoskooppi

6. Käytä tekstilinkkejä

Pääsivustossasi voi käyttää whizzy-out-out-valikoita, rolloversia tai muita fancy gadgetryjä, mutta mobiili-selain ei todennäköisesti ole. Huomaa, että dynaamiset sivuelementit ja graafiset linkit kuluttavat resursseja, joten valitse hyvin merkittyjä tekstilinkkejä.

Luettelon lisäksi

Reddit

7. Tee ero valitun linkin välillä

Kohdistimen siirtäminen alaspäin selaa sivua ja korostaa linkit kerralla. Niinpä on tärkeää, että käyttäjälle annetaan selkeä neuvoja siitä, mikä kohde on keskittynyt. Tämä voidaan tehdä muuttamalla linkkien ja painikkeiden kirjasinta ja taustaväriä tai lisäämällä linkkejä linkkien ympärille, jolloin napsautettava alue on noin 44px 44px. Geek Squad ja Diesel käyttivät suuria fontteja napsautettavaan tekstiin.

Geek Squad

diesel-

8. Tasapainolinkit

Jokainen sivun lataus kuluttaa aikaa ja järjestelmäresursseja, joista jälkimmäinen on pulaa, joten yritä olla pakottamatta sivuston kävijää diggiin useiden sivujen kautta, jotta pääset haluttuun tietoon. Löydä tasapaino kunkin sivun linkkien määrän ja sivuston syvyyden välillä.

Flickr

Viserrys

9. Vähennä käyttäjän tekstinsyöttöä

Web-sivustojen mobiiliversioihin on vaikea syöttää tekstiä. Korvaa radiopainikkeilla tai luettelolla, jotta he voivat valita, mitä he tarvitsevat helposti. Muista, että matkapuhelinten käyttäjillä ei ole pääsyä tavalliseen näppäimistöön ja hiireen. Mitä lyhyempi URL-osoite on, sitä parempi on, että pitkien URL-osoitteiden kirjoittaminen on yksitoikkoista.

Alla olevassa näytteessä Fedex käytti tarkistuslistaa ja pudotusvalikkoja. Vaikka Tumblr valitsi kielesi pudotusvalikosta.

Fedex

Tumblr

10. Ei ponnahtaa tai virkistää

Mobiiliselaimet eivät yleensä tue ponnahdusikkunoita. Ja jos he tekisivät, heillä olisi hyvin kapea tila, jotta se voisi tulla. Pysy kaukana niiden käytöstä välttääksesi arvaamattomia tuloksia. Sillä ei myöskään ole säännöllisesti päivittyviä sivuja, jotta laite ei täytä rajoitettua muistia. Anna käyttäjän päivittää sisältö.

Pähkinänkuoressa

Luo luova ja asenna mobiilisovelluksesi uudella tavalla. Tee sisältösi pakottavaksi ja käyttökelpoiseksi. Anna käyttäjille, mitä he haluavat, kun he haluavat. Käyttäjät eivät halua kaivaa syvemmälle sivustoon vain etsimään, mitä he etsivät mobiiliverkossa.

Onko sinulla suosituimpia mobiilisivustoja, jotka todella inspiroivat sinua? Voitko jakaa joitakin mobiilisovelluksen vinkkejäsi? Kerro meille!

Lue lisää

1. Reagoiva Web-suunnittelu (Alistapart.com)
2. Tee sivustostasi ystävällinen (Thinkvitamin.com)
3. W3C mobileOK -tarkistaja (W3.org)
4. iPhone Simulator