8 Golden Säännöt mobiilisuunnittelusta

Mobile Design on suhteellisen uusi mutta tärkeä. Vain kymmenen vuotta sitten, joka suunnittelee työpöydän tietokoneen suunnittelua; Nyt se tarkoittaa myös mobiililaitteiden suunnittelua. Matkapuhelimet auttavat yhä enemmän verkkoliikennettä ja numerot kasvavat vain.

Statken mukaan lokakuussa 2018 meillä oli 3,9 miljardia ainutlaatuista mobiili-internetin käyttäjää ja yli 50 prosenttia kaikista verkkosivujen liikenteestä maailmanlaajuisesti luotiin matkapuhelimien kautta . Suuri web-muotoilu ei ole enää ylellisyyttä vaan jotain välttämättömyyttä.

Hyvän verkkokokemuksen luominen mobiilikäyttäjille vaatii enemmän kuin luodaan Vastaava web-suunnittelu (vaikka ylhäällä Verkkosivuston rakentaja voi auttaa, samoin kuin sivujen ylläpito valinta). Tässä artikkelissa voit löytää perustavanlaatuisten mobiilisivustojen suunnitteluperiaatteet.

01. Rakenna tavoitteellisia kokemuksia

Mobiilikäyttäjät ovat hyvin tavoitteellisia käyttäjiä. Joka kerta kun he käyvät verkkosivuilla, heillä on erityinen tehtävä, jonka he haluavat saavuttaa ja he odottavat saan, mitä he tarvitsevat todella nopeasti. Joten miten voit tehdä sen tapahtua?

Kuva ihanteelliset käyttäjät: Samoin kuin talon rakentaminen, verkkosivuston rakentaminen alkaa vankka säätiö. Ja perustasoinen web-suunnittelu on tietosi käyttäjistä. Käyttäjän tutkimuksen tulisi olla yksi tuotesuunnittelun ensimmäisistä vaiheista. Sinun täytyy selvittää tarkalleen, kuka käyttäjät ovat ja mitä he haluavat saavuttaa. Kun tiedät käyttäjien haluamasi ja tarvitset, voit luoda käyttäjän matkan, jonka tiedät vastaavat odotuksiaan täydellisesti (varmista, että tallennat kaikki havainnot turvallisesti pilvivarasto ). Sitten suoritetaan perusteellisesti Käyttäjän testaus varmistaa, että olet saavuttanut nämä tavoitteet.

Tarkenna kokemusta keskeisen tavoitteen ympärille: Mitä haluat saavuttaa tällä sivustolla? Tämän kysymyksen vastausten löytäminen on toinen tärkeä asia, kun luodaan mobiilin verkkokokemusta. Yritätkö ajaa sitoutumista, tehdä käyttäjiä ostaa tuotteita tai rekisteröityä palveluun? Ilmoita selkeästi tavoite ja ajattele, miten voit leikata vaiheet, käyttäjän on toteutettava se.

02. Mukauta sisältöäsi työskentelemään pienemmässä tilassa

Sisältö on mikä tarjoaa arvoa useimmille verkkosivustoille. Se on ensisijainen syy, miksi ihmiset vierailevat heissä. Mobile Web-suunnittelusta on mahdotonta ottaa työpöydän kokemusta ja kopioida sitä mobiilissa; On tärkeää suunnitella verkkosivustoja, joissa on mobiilikäyttäjät. Tämä tarkoittaa sitä, että meidän on mukautettava sisältöä ja ominaisuuksia käyttäjän näytön koon ja tapojen mukauttamiseksi. Joten mitä vaiheita voit ottaa tämän saavuttamiseksi?

Vältä horisontaalista vieritystä: Käyttäjät ovat tyytyväisiä sivustoihin, jotka vierittävät pystysuoraan, mutta eivät vaakasuoraan. Siksi ei pitäisi olla sivuja, joissa vaakasuora vieritys tarvitaan nähdäksesi sisällön. Kiinteän leveyden elementit ovat yksi niistä yhteisistä syistä, jotka aiheuttavat horisontaalisen rullauksen, joten tarkista, että sinulla ei ole sisältöä, joka vain näyttää hyvin tietyssä näkymän leveydessä.

Tavoitteena yhden sarakkeen ulkoasu: Yhden sarakkeen asetteluja auttavat rajoitetun tilan hallintaan pienellä näytöllä ja mahdollistavat myös helpon skaalauksen muotokuvan ja maisematilan välillä.

Varmista, että käyttäjien ei tarvitse puristaa zoom: Vierailijat voivat helposti turhautua, kun heidän on zoomattava tai ulos lukea tekstiä tai nähdä kuvan. Suunnittele mobiilisivustosi niin, että käyttäjät eivät koskaan tarvitse muuttaa kokoa.

Käytä luettavaa fonttikokoa: 11 pistettä on tekstin absoluuttinen vähimmäiskoko. Tämä koko antaa käyttäjille mahdollisuuden lukea tekstiä tyypillisellä katselukohtaisella etäisyydellä zoomausta.

Valitse fontit, jotka asteikolla: Jos verkkosivuston kokemus vaatii lukemista, on parempi käyttää sans-serif -tyyppejä, kuten Helveticaa tai Roboto.

Käytä sormiystävällistä muotoilua: Kun suunnittelet mobiilisivuston, muista kävijät käyttävät sormiaan hiiren nuolen sijasta ja ihmisen sormenpäät ovat suurempia kuin hiiren osoitin. Pyrimme suunnittelemaan sormen ystävällinen käyttöliittymä, jossa jokainen interaktiivinen elementti on tarkoituksenmukaista.

MIT kosketuslaboratoriotutkimus todettiin, että sormenjäljen keskikoko on 8-10 mm , 10 mm x 10 mm hyvä minimi kosketuskoko.

Harkitse myös suhteellista etäisyyttä kosketustavoitteiden välillä. Jos interaktiiviset elementit sijaitsevat liian lähellä toisiaan, mobiilikäyttäjät voivat vahingossa napauttaa väärää painiketta sormellaan. Jos haluat estää sen tapahtumasta, varmista oikein painikkeet ja lisää myös riittävästi tilaa niiden välillä.

Tee tuotekuvat laajennettavissa: Monet tutkimukset ovat osoittaneet, että ihmiset ovat pääasiassa visuaalisia oppijoita. Useimmat ihmiset pystyvät ymmärtämään ja tarttumaan käsitteitä paljon paremmin, kun ne toimitetaan näin, joten kuvien käyttäminen web-suunnittelussa on erinomainen tapa tiivistää avainviestejä nopeasti.

Kuvat ovat tärkeässä roolissa verkkokauppasivustoissa - ihmiset luottavat tuotekuviin päätöksen tekemisen yhteydessä. On välttämätöntä tarjota ainoastaan ​​korkealaatuisia varoja, mutta myös ne laajentavat, jotta käyttäjät voivat helposti nähdä ne yksityiskohtaisesti. Laajenna koko kuvaa sen sijaan, että vain osa sitä.

Ole varovainen kampanjoista ja mainoksista: Kampanjat ja mainokset voivat helposti kiinnittää sisällön. Vaikka mainoksen viesti voi toimia joidenkin kävijöiden osalta, useimmissa tapauksissa käyttäjät ohittavat sen ja siirtyvät arvokkaampiin tietoihin. Tämä ilmiö tunnetaan bannerin sokeudessana.

Yhteystietojen löytäminen on helppo löytää: Mobile-käyttäjät käyvät usein verkkosivustoissa yhteystietojen löytämiseksi. Riippuen kiireellisyydestä, käyttäjät saattavat haluta soittaa yritykselle, täytä yhteydenottolomakkeen tai löytää osoite. Verkkokauppasivustojen verkkosivuilla puhelinnumeron pitäisi olla käytettävissä suoraan aloitusnäytössä.

03. Optimoi skannauksen sisältö

Se on tunnettu tosiasia, että käyttäjät eivät lue verkossa; Ne skannaavat. Kun uusi kävijä lähestyy verkkosivua, ensimmäinen asia, jonka he yrittävät tehdä, on skannata sivua ja jakaa sisällön sulattaviin tietoihin. On mahdollista tehdä tämä tehtävä käyttäjille helpompaa noudattamalla muutamia yksinkertaisia ​​sääntöjä.

Mieti järjestys, jossa annat sisältöä sivulle: Ihmiset lukevat ylhäältä alas. Siksi on tärkeää säilyttää tärkeät tavarat sivun yläosassa ja siirrä lepoa hierarkian mukaan.

Leikkaa sotkua: Priorisoida sisältö käyttäjän käyttöliittymän elementteihin - vähentää häiriöitä poistamalla tarpeettomat toiminnalliset ja koristeelliset elementit. Pyrkimys luoda minimalistinen tyyli, koska teet, että käyttäjä voi keskittyä tehtävään.

Vältä pitkät tekstiryhmät ilman kuvia: Se on erittäin todennäköistä, että kaikki suuret sisällölliset kalat ohitetaan. Käytä otsikkoja, kappaleita tai bullet-pisteitä tekstin hajottamiseksi.

Laita visuaalinen paino tärkeisiin elementteihin: Tee tärkeitä elementtejä, kuten keskeisiä viestejä keskipisteitä, joten kävijät näkevät ne heti. Korosta elementtejä, joissa käytetään eri kokoja, välilyöntiä tai elinvoimaisia ​​värejä.

04. Luo ennustettavissa oleva navigointi

Käyttäjien auttaminen navigoi tulisi olla jokaiselle verkkosivustolle ensisijainen tavoite. Loppujen lopuksi pakottava sisältö on hyödytön, jos ihmiset eivät löydä sitä. Siksi on tärkeää investoida kiinteän navigointijärjestelmän suunnitteluun käyttäen joitain seuraavista vaiheista.

Käytä tuttuja navigointimuotoja: Sivustosi navigointimekanismin luominen on syytä muistaa yksinkertainen sääntö: Älä sijoita pyörää - pyrkii luomaan tuttu kokemus. On aina parempi luottaa navigointimalleihin, että useimmat käyttäjät tuntevat (kuten ylhäältä navigointipalkin tai hampurilaiseen valikosta), eikä luoda oman ainutlaatuisen navigointijärjestelmän (esim. Gesture-pohjainen navigointijärjestelmä). Kun luot tuttua navigointia, autat käyttäjiä luottamaan edelliseen kokemukseensa vuorovaikutuksessa tuotteen kanssa.

Laita rajoitus navigointivaihtoehtojen kokonaismäärään: Älä laita liikaa vaihtoehtoja valikoissa. Laaja valikko voi toimia hyvin työpöydälle, mutta ne eivät sovi mobiilisuunnitteluun. Koska kaikki navigointivaihtoehdot eivät ole käytettävissä näytön näkyvässä alueessa, voit pakottaa mobiilikäyttäjät selaamaan luettelon vaihtoehtoja. Ajattele, miten voit esittää mahdollisimman pienet valikkokohdat. Ihannetapauksessa, valikko, jonka suunnittelet pitäisi olla enintään seitsemän erillistä luokkaa .

Priorisoida navigointivaihtoehdot : Järjestä navigointi käyttäjien toiminnallisuuden avulla. Suosituimmat navigointivaihtoehdot globaalissa valikossa pitäisi mennä yläosaan ja ensisijaiset toiminnot on oltava käytettävissä näytön näkyvässä alueessa.

Kirjoita selkeät tarrat: Jokaisella navigointivaihtoehdolla pitäisi olla selkeä ja tiivis etiketti. Vältä Jargon - Suunnittelun navigointi ei saa sisältää termejä, joita kävijät eivät ymmärrä. Selkeät etiketit antavat vierailijoille mahdollisuuden ennustaa toimiensa tuloksen.

Varmista, että interaktiiviset elementit näyttävät interaktiivisilta elementeiltä : Kun suunnittelet painikkeita ja linkkejä, ajattele, miten muotoilu kommunikoi edullisuutta. Miten käyttäjät ymmärtävät elementin interaktiivisena esineenä? Tapa, jolla esine näyttää kertoo käyttäjille, miten sitä käytetään. Visuaaliset elementit, jotka näyttävät linkkeiltä tai painikkeilta, mutta eivät ole vuorovaikutteisia (kuten alleviivattuja sanoja, jotka eivät ole linkkejä tai suorakulmaisia ​​laatikoita, joissa ei ole painikkeita), voivat helposti sekoittaa käyttäjiä.

Kommunikoi nykyinen sijainti: "Missä minä olen?" on perustavanlaatuinen kysymys, johon käyttäjät tarvitsevat vastauksen, jotta voidaan tehokkaasti navigoida. Ilmoitetaan selvästi nykyinen sijainti.

Anna hakutoiminto: Jos suunnittelet monimutkaista sivustoa, jossa on paljon sisältöä tai ominaisuuksia, sinun on varmistettava, että annat hakupalkin helposti navigointiin. Tehostamalla hakutoimintoja tarjoat nopean reitin tietoihin, jotka tulevat liikkuville käyttäjille, jotka tulevat sivustoon, jossa on erityinen kysymys.

Älä piilota valikossa olevaa hakuvaihtoehtoa. Sen pitäisi olla yksi ensimmäisistä asioista kävijät näkevät sivuillasi.

Helpottaa käyttäjien paluuta kotisivulle: Vierailijat odottavat, että kun he napauttavat logoa sivun yläosassa, he palaavat takaisin kotisivulle ja he tulevat turhautumaan, jos se ei toimi.

Pidä käyttäjä yhdessä ikkunassa: Vältä puheluita, jotka lähettävät käyttäjän uuteen ikkunaan. Joissakin käyttäjillä on vaikeuksia vaihtaa ikkunoita mobiiliselaimessa ja ei ehkä löydä edellistä sivua.

05. Vältä luomalla tiesulkuja

Edesblocks aiheuttaa kitkaa ja kitkaa on pahin muuntamisen vihollinen. Onneksi on olemassa yksinkertaisia ​​asioita, joita voit tehdä niitä.

Älä keskeyttää kävijöitä: Suuret ponnahdusikkunat ovat yksi tyypillisimmistä keskeytyksistä verkkokokemuksesta. Pitkästä aikaa tällaiset bannerit oli omistettu promo-viesteille, mutta äskettäin monet sivustot alkoivat käyttää häiritseviä ponnahdusikkunoita saadaksesi luvan käyttää evästeitä (GDPR). Riippumatta siitä, mitä tietoja haluat näyttää kävijöille, varmista, että se ei häiritse yleistä kokemusta.

Älä tee käyttäjät jätä sivustosi: Tunnista paikkoja käyttäjäurheissa, jotka saattavat aiheuttaa käyttäjän katsoa sivuston ulkopuolelta ja antaa sitten sisältöä / ominaisuuksia pitää ne sivustollasi. Verkkokaupan verkkosivustojen promo-koodikenttä on ehkä yleisin esimerkki, joka tekee kävijöistä jättää sivuston yritettäessä löytää kuponki. Se on paljon parempi tarjota joitakin kuponkeja aivan sivustolla tällaisen käyttäytymisen estämiseksi.

Älä pakota käyttäjiä kirjautumaan: Vaativia käyttäjiä rekisteröi ennen kuin he voivat nähdä tietoja tai käyttää verkkopalvelua, on korkea vuorovaikutus kustannus - pakottaminen liian aikaisin voi Käyttäjät voivat luopua sivustosta . Ennen kuin tarjoat henkilökohtaisia ​​tietoja, kävijät haluavat saada tunnetta siitä, mitä sivusto tarjoaa heille.

Käyttäjän virtauksen luominen vähiten muuntamisen esteillä mobiilisivustojen pitäisi mahdollistaa kävijöiden tutkia sisältöä tarvitsematta rekisteröityä. Verkkokaupan verkkosivustoille on tärkeää antaa käyttäjille ostaa vieraana.

Tee helposti siirtyminen toiseen laitteeseen jatkaa matkaa: Älä pidä mobiilia itsenäisinä kokemuksina. Tyypillisellä käyttäjällä on useita laitteita, kuten työpöydälle, matkapuhelimelle ja tablet-laitteelle ja odottaa olevan saumaton kokemus kaikissa näissä laitteissa käytettäessä tuotteesi. Esimerkiksi monet ihmiset käyttävät mobiililaitteita vain tuotehakuun ja siirtymällä sitten työpöydälle muuntaa. Käyttäjät odottavat jatkamaan matkaa siitä, mistä he pysähtyivät matkapuhelimeen.

Seuraavassa on muutamia asioita, joita voit tehdä synkronoida käyttäjän nykyisen edistyksen:

• Synkronoi haluamallasi, suosikkeilla ja kori käyttäjätilille.
• Tarjoa helppo tapa tallentaa tai jakaa tietoja laitteiden kautta rekisteröimättömille käyttäjille (kuten vaihtoehto lähettääksesi linkin sähköpostitse).

06. Suunnittele tehokkaita lomakkeita

Lomakkeen merkintä on yksi yleisimmistä tehtävistä verkossa. On vaikea kuvitella mitään kokemusta, joka ei vaadi käyttäjiä täyttämään jonkinlaista muotoa. Koska se on niin kaikkialla läsnä oleva käytäntö, kyky täyttää lomake kivuton on ratkaisevan tärkeää, jotta käyttäjä kytkeytyy. Seuraavassa on muutamia vinkkejä, jotka voivat auttaa sinua pitämään kitkaa minimiin:

Pienennä lomakkeita: Yleisesti ottaen vähemmän tietoja käyttäjän on tarjottava, sitä enemmän he nauttivat web-kokemuksestasi. Nämä osoittimet auttavat sinua vähentämään näppäimistöjä ja panosten käyttäjien on tehtävä:

• Minimoida kenttien kokonaismäärä. Pidä aina muotoja mahdollisimman lyhyinä ja yksinkertaisina poistamalla tarpeettomat kentät. Kysy vain, mitä sinun tarvitsee tietää.
• Käytä Auto-Oikea, Auto-aktivoitus ja automaattinen täydellinen, jotta voit vähentää käyttäjävirheen mahdollisuutta.
• Vältä pudotuskenttiä. Dropdowns piilota vaihtoehdot ja tämä luo ylimääräistä vuorovaikutuskustannuksia - Käyttäjien on napauta kahdesti valitaksesi oikean vaihtoehdon. Jos käytät pudotuskenttää valikoimaan vaihtoehtoja, harkitse sen vaihtamista radiopainikkeilla.
• Siirry automaattisesti seuraavaan kenttään, kun käyttäjä painaa palaa.
• Pienennä lomakevirheitä reaaliaikaisella inline-validoinnilla.
• Käytä olemassa olevia tietoja maksimoidaksesi mukavuuden. Voit esimerkiksi täyttää joitain kenttiä, kuten lähetysosoitteita tai laskutustietoja rekisteröityneille käyttäjille.
• Ajattele tarjoamalla vaihtoehtoisia syöttömekanismeja. Harkitse, mitä laitteen ominaisuuksia voidaan hyödyntää paremman käyttökokemuksen tarjoamiseksi. Esimerkiksi sen sijaan, että pyydät käyttäjiä kirjoittamaan luottokortin yksityiskohtia, antavat mahdollisuuden käyttää laitteen kameraa skannaamaan kortin ja integroimaan järjestelmiä, kuten Apple Pay ja Google Pay, jotta maksu mahdollistaa yhteen hankkeeseen.

Anna vastaava näppäimistö: Mobile-käyttäjät arvostavat verkkosivustoja, jotka tarjoavat asianmukaisen näppäimistön kentälle. Tämä ominaisuus estää heitä tarvitsevan ylimääräisiä toimia. Esimerkiksi, kun käyttäjien on syötettävä puhelinnumero, sivustosi pitäisi näyttää numeerinen 0 - 9 näppäimistö.

Aseta HTML-syöttötyypit näyttämään oikean näppäimistön. Tässä on seitsemän syöttötyyppiä, jotka liittyvät muotoiluun:

• Syöttötyyppi = "Teksti" Näyttää mobiililaitteen normaalin näppäimistön.
• Syöttötyyppi = "Sähköposti" Näyttää normaalin näppäimistön ja "@" ja ".com".
• Syöttötyyppi = "TEL" Näyttää numeerisen 0 - 9-näppäimistön.
• Syöttötyyppi = "numero" Näyttää näppäimistön numeroilla ja symboleilla.
• Syöttötyyppi = "Date" Näyttää mobiililaitteen päivämääränvalitsimen.
• INPUT TYPE = "DATETIME" Näyttää mobiililaitteen päivämäärän ja kellonajan valitsimen.
• Syöttötyyppi = "kuukausi" Näyttää mobiililaitteen kuukauden ja vuoden valitsimen.

Anna käyttäjien muokata sijaintikenttä: Monet sivustot tunnistavat käyttäjän sijainnin automaattisesti ja käyttämällä näitä tietoja antamaan asiaankuuluvan sisällön. On tärkeää, että käyttäjät voivat muuttaa sijaintia, koska joissakin tapauksissa käyttäjät saattavat haluta nähdä tuloksia eri paikasta.

07. Pyri luomaan johdonmukainen kokemus

Johdonmukaisuus on yksi käyttäjäkokemuksen keskeisistä pilareista. Johdonmukainen muotoilu on helppokäyttöinen muotoilu - keskittymällä johdonmukaisen suunnittelun luomiseen, luodaan intuitiivinen muotoilu. Pyrimme aina tekemään verkkosivusto sekä sisäisesti että ulkoisesti yhdenmukaiseksi.

Sisäinen johdonmukaisuus: Luo johdonmukainen piirustusominaisuus ja käytä sitä verkkosivustosi sivuille. Fontit, painikkeet, linkit, kuvakkeet ja kaikki muut UI-elementit on oltava johdonmukaisia ​​verkkosivustolla, jotta se pysyy visuaalisena johdonmukaisuuden säilyttämiseksi.

Ulkoinen johdonmukaisuus: Varmista, että design näyttää osana suurempaa tuoteperhe. Esimerkiksi, jos sinulla on mobiilisovellus, mobiilisivustosi olisi välitettävä tunteen tuntemusta käyttäjille, jotka käyttävät sitä.

08. Rakenna paras mobiilisivustosi

Kaikki tässä mainitut kohdat voidaan pitää teollisuuden parhaita käytäntöjä. Mutta vain siksi, että jotain kutsutaan "parhaaksi käytännöksi", ei tarkoita sitä, että se on optimaalinen ratkaisu sivustollesi. Siksi on aina tärkeää testata suunnittelupäälläsi. Tee käytettävyys testaamalla pakollinen osa suunnitteluprosessia ja parantaa kokemusta säännöllisesti.

Tämä artikkeli julkaistiin alun perin 317 netto , maailman myydyin aikakauslehti web-suunnittelijoille ja kehittäjille. Osta numero 317 tai Tilaa Net .

Aiheeseen liittyvät artikkelit:

• 6 trendejä, jotka vaihtelevat mobiililaitteiden suunnittelu
• 10 vinkkejä parempaan liikkuviin UX-muotoisiin
• Kuinka suunnitella käyttäjäystävällisiä mobiililiitäntöjä