Gekissimo.net - Opi ansaitsemaan rahaa webilläsi Internetissä!

Mobiilisivustojen suunnittelu vuonna 2023: kaikki mitä sinun tarvitsee tietää

Seuraava artikkeli auttaa sinua: Mobiilisivustojen suunnittelu vuonna 2023: kaikki mitä sinun tarvitsee tietää

Mobiilisivustojen suunnittelu on välttämätöntä.

Miksi? Koska mobiililaitteet mullistavat yhteydenpitomme ja sen seurauksena yritysten toimintatavan. Itse asiassa suurin osa verkkoliikenteestä nyt tulee mobiilista laitteet.

“Mobileesta ei ole tulossa vain uusi digitaalinen keskus, vaan myös silta fyysiseen maailmaan.” sanoi Thomas Husson, varatoimitusjohtaja ja pääanalyytikko Forrester Researchissa. “Siksi mobiili vaikuttaa enemmän kuin vain digitaaliseen toimintaasi – se muuttaa koko liiketoimintaasi.”

Toisin sanoen tarvitset mobiiliresponsiivisen verkkosivuston.

Mutta mikä on mobiiliystävällinen verkkosivusto? Tässä artikkelissa opit kaiken mobiiliystävällisistä verkkosivustoista ja näet yhdeksän parasta esimerkkiä mobiilisivustojen suunnittelusta. Lisäksi opit selvittämään, onko verkkosivustosi mobiiliystävällinen.

Mennään asiaan.

Mikä on mobiiliystävällinen verkkosivusto?

Yksinkertaisesti sanottuna mobiiliystävällinen verkkosivusto on sivusto, joka on suunniteltu ja optimoitu kädessä pidettäville laitteille, kuten älypuhelimille ja tableteille.

Mobiiliresponsiivinen suunnittelu on prosessi, jossa luodaan verkkosivusto, joka mukautuu sen näytön kokoon, jolla sitä katsotaan.

→ Aloita verkkoliiketoimintasi Shopifyn avulla napsauttamalla tätä

Verkkosivustollamme on mobiiliystävällinen verkkosivusuunnittelu. Verrataan, miltä se näyttää tietokoneella ja mobiililaitteella.

Alla olevasta kuvasta näkyy, että työpöytäsivustolla on runsaasti tilaa, sivuelementit ovat paikoin vierekkäin ja teksti on suhteellisen pientä näytön kokoon verrattuna.

Toisaalta kun katselet verkkosivustoa mobiililaitteella, sivuelementit pinotaan päällekkäin yhdeksi pitkäksi sarakkeeksi, ja jokaisen elementin ympärillä on vähemmän tilaa. Lisäksi painikkeet ovat suurempia, jotta niitä on helppo napauttaa, ja teksti on suurempi suhteessa sivun kokoon, jotta se on helpompi lukea.

“Rikkaat ja interaktiiviset kokemukset, joita olemme tottuneet odottamaan mobiilisovelluksissa, ovat luoneet uusia standardeja ja odotuksia kaikkeen digitaaliseen mediaan, mukaan lukien verkko.” sanoi Raj Aggarwal, mobiilimarkkinointiyhtiö Localyticsin toimitusjohtaja. “Tuloksena on, että verkkosivustot kehittyvät sovellusmaisemmiksi toiminnallisuuksiensa osalta.”

Mobiilisivustojen suunnittelun merkitys

Mennään ajamaan: vuoden 2019 viimeisellä neljänneksellä älypuhelimet olivat vastuussa valtavasta 52,6 prosenttia maailmanlaajuisesta verkkosivustojen liikenteestä.

Tämä tarkoittaa, että mobiililaitteiden käyttö hallitsee nyt pöytätietokoneita.

Lisäksi, mobiilikäyttäjien määrä maailmanlaajuisesti ennustetaan kasvavan 7,41 miljardiin vuoteen 2024 mennessä.

Kuten Cyndie Shaffstall, markkinointiyhtiö Spider Trainersin perustaja, sanoi: “Mobiili ei ole tulevaisuus, se on nyt. Tapaa asiakkaasi heidän valitsemassaan ympäristössä, ei siellä, missä se sinulle sopii.”

Myös mobiililaitteet muuttavat ostotottumuksiaan.

Googlen mukaan 59 prosenttia ostajista sanovat, että mahdollisuus tehdä ostoksia mobiililaitteilla on tärkeää, kun päätetään, miltä jälleenmyyjältä tai brändiltä ostaa.

Plus, 70 prosenttia älypuhelinten omistajista jotka tekivät ostoksen kaupassa, kääntyivät mobiililaitteidensa puoleen tutkiakseen ostoa etukäteen.

🔥 Empfohlen:  Thrive Quiz Builder Review 2023: Luo viraalisia tietokilpailuja, jotka luovat blogiliikennettä

Lopuksi monet käyttäjät lataavat mobiilisivustoja hitaita ja heikkoja puhelinyhteyksiä käyttäen. Tämän seurauksena brändien on luotava mobiilisivuston ulkoasu, joka latautuu nopeasti.

Kaiken kaikkiaan maailma on nyt mobiilien etusijalla – ja siksi tarvitset mobiiliresponsiivisen verkkosivuston.

8 suunnitteluvinkkiä parhailta mobiilisivustoilta

Tässä osiossa tarkastellaan tarkemmin kahdeksaa mobiilisivustojen suunnitteluvinkkiä, joita voit käyttää. Lisäksi näet tosielämän esimerkkejä joistakin verkon parhaista mobiilisivustoista.

1. Käytä suuria painikkeita

Mobiiliystävällisillä verkkosivustoilla on oltava tarpeeksi suuria painikkeita, jotta käyttäjät voivat napauttaa niitä ilman, että heidän tarvitsee lähentää.

Lisäksi hyperlinkkien välillä on oltava tilaa. Jos linkit on sijoitettu liian lähelle toisiaan, käyttäjät saattavat yrittää napsauttaa linkkiä ja napsauttaa vahingossa toista.

Shopify käyttää suuria painikkeita ja jättää paljon tilaa hyperlinkkien väliin mobiilisivustonsa suunnittelussa.

Shopify-suuret painikkeet

Joten kun suunnittelet mobiiliresponsiivista verkkosivustoasi, pidä välilyönnit mielessä ja varmista, että jokaista hyperlinkkiä voidaan napsauttaa helposti.

2. Tee tekstistä tarpeeksi suuri luettavaksi

Tämä saattaa tuntua hieman itsestään selvältä, mutta se on myös ratkaisevan tärkeää mobiiliystävällisen verkkosivuston suunnittelussa.

Käyttäjien ei pitäisi koskaan joutua lähentämään – tai vierittämään vasemmalle tai oikealle – lukeakseen jotain. Tekstin tulee aina olla riittävän suuri lukeakseen mukavasti.

Alla olevassa esimerkissä osoitteesta Partamerkkinäet, että kaikki näytöllä oleva teksti sopii täydellisesti näytön kokoon.

Beardbrand suuri teksti

Tee tekstistäsi riittävän suuri kaikenkokoisilla näytöillä, jotta käyttäjät voivat helposti lukea sanomasi.

3. Yksinkertaista valikot

Työpöytäsivuston valikoissa on paljon tilaa. Ne voivat kattaa koko palkin näytön yläreunassa, ja niissä on laajat pudotusvalikot ilman, että ne haittaavat käyttökokemusta.

Tämä ei päde mobiililaitteissa – siellä ei vain ole tarpeeksi tilaa.

Mobiiliystävällisillä verkkosivuilla tulisi käyttää yksinkertaisia ​​valikoita, jotka antavat yleiskuvan verkkosivustosta. Käyttäjät voivat sitten hioa etsimäänsä luokkien, suodattimien tai hakuominaisuuden avulla.

Useimmat mobiiliystävälliset verkkosivustot käyttävät hampurilaissymbolia – joka koostuu kahdesta tai kolmesta vaakaviivasta – valikon ilmaisemiseen.

Katsotaanpa hyvää esimerkkiä yhdeltä parhaista mobiilisivustoista, Kylie Skin.

Kun käyttäjät napauttavat kaksirivistä hampurilaisvalikkoa näytön oikeassa yläkulmassa, heille näytetään koko näytön valikko, jossa on suuret painikkeet ja teksti.

KylieSkin Mobile Menu esimerkki

Kun luot mobiiliresponsiivisen verkkosivuston, pidä valikot yksinkertaisina, jotta käyttäjien on helppo löytää etsimänsä.

4. Tarjoa yksinkertainen ja intuitiivinen hakuominaisuus

Verkkosivustosi hakuominaisuus on erityisen tärkeä mobiilikäyttäjille.

Kuten edellä mainittiin, yksinkertaistetut valikot voivat helpottaa mobiiliselailua. Ne voivat kuitenkin myös vaikeuttaa käyttäjien löytämistä tietyn kohteen.

Jotta käyttäjien olisi vaivatonta löytää haluamansa, aseta hakutoiminto eteen ja keskelle.

🔥 Empfohlen:  Yleisimmät tulosprosentin optimoinnin virheet & CRO:n parhaat käytännöt

Shopify-käyttäjä Gymshark sijoittaa hakutoiminnon sivun yläpalkkiin. Mukana on myös intuitiivinen suodatintoiminto, joka helpottaa tietyntyyppisten tuotteiden löytämistä.

Gymsharkin haku- ja suodatinominaisuudet

Avaimen take away? Tee yksinkertainen ja tehokas hakuominaisuus osa mobiilisivustosi suunnittelua.

5. Tee yhteydenotosta helppoa

Jos asiakas etsii yhteystietojasi, hän on saattanut joutua vaikeuksiin – mikä tarkoittaa, että hän on todennäköisesti jo hieman turhautunut. Älä loukkaa vammoja vaikeuttamalla yhteydenottoa.

Varsinkin kun 84 prosenttia kuluttajista pitää asiakaspalvelua keskeisenä tekijänä ostopäätöksessä.

Tässä on toinen loistava esimerkki mobiilisivustojen suunnittelusta Shopify-käyttäjältä Bremont. Tämä luksuskellobrändi sijoittaa chat-kuvakkeen näytön oikeaan alakulmaan, mikä tekee verkkosivuston vierailijoille nopean ja helpon yhteydenoton edustajaan.

Bremontin yhteydenottovaihtoehdot

Jos et voi tarjota live-chatia ympäri vuorokauden, harkitse Facebook-chatbotin linkittämistä tai anna vain yhteydenottolomake, johon käyttäjät pääsevät valikossasi olevan “Ota yhteyttä” -linkin kautta.

6. Luo yksinkertaisia ​​lomakkeita

Käyttäjät saattavat olla taipuvaisempia täyttämään pitkän lomakkeen tietokoneella, koska näyttö on suurempi ja näppäimistöllä kirjoittaminen on helpompaa.

Mobiililaitteissa lomakkeiden on oltava lyhyempiä, ja niissä on suuria tekstikenttiä ja painikkeita.

Jos esimerkiksi pyydät käyttäjiä liittymään postituslistallesi, sinun ei pitäisi kysyä muuta kuin etunimeä ja sähköpostiosoitetta.

Jos tarvitset lisää kysymyksiä, tee niistä nopea ja helppo vastata.

Tässä Shopify-käyttäjän mobiilisivuston suunnitteluesimerkissä QuadLock, näet suuria kenttiä yksinkertaisilla muotovaatimuksilla. Siellä on jopa pudotusvalikko, joka auttaa käyttäjiä antamaan tietoja kyselystään.

QuadLockin yhteydenottolomake

Lyhyesti sanottuna, varmista, että lomakkeesi ovat lyhyitä ja makeita.

7. Luo huomiota herättäviä toimintakehotuksia

Toimintakehotus – joka tunnetaan myös nimellä CTA – on kuva, banneri tai tekstinpätkä, joka kirjaimellisesti kehottaa käyttäjiä ryhtymään jonkinlaiseen toimintoon.

Voit esimerkiksi kehottaa käyttäjiä rekisteröitymään postituslistallesi, saamaan lisätietoja tarjouksesta tai ostamaan tuotteen.

Tällä markkinointitaktiikalla on olennainen rooli mobiilisivustojen suunnittelussa.

Voi kuitenkin olla haastavaa luoda houkuttelevia toimintakehotuksia näin rajoitetulla näyttötilalla.

Tässä mobiilisivustoesimerkissä Shopify-käyttäjältä Ylelliset hiukset, näet kaksi banneria, joissa on toimintakehotuksia. Ensimmäinen mainostaa uutta tuotetta, jonka mukana tulee ilmainen lahja, ja toinen kehottaa käyttäjiä oppimaan lisää brändin ilmaisesta toimituksesta ja 90 päivän vaihtokäytännöistä.

Luxy Hair -kehotukset toimintaan

Kun luot toimintakehotuksia mobiiliystävälliselle verkkosivustollesi, erotu niistä asettamalla ne sivun yläosaan, jossa käyttäjät voivat nähdä ne ilman vierittämistä alaspäin.

8. Vältä ponnahdusikkunoita

Todettakoon: useimmat ihmiset vihaavat ponnahdusikkunoita. Itse asiassa, jos etsit Googlea “Vihaan ponnahdusikkunoita”, löydät lähes 48 miljoonaa tulosta.

Ei ihme, että Google otti käyttöön Algoritmin muutos vuonna 2017 joka rankaisee verkkosivustoja, jotka tarjoavat tietyntyyppisiä ponnahdusikkunoita mobiililaitteissa.

🔥 Empfohlen:  15 parasta pankkia Marylandissa vuonna 2023

Hakusi sijoituksesi heikkenee näinä päivinä, jos:

  • Näytä ponnahdusikkuna, joka kattaa pääsisällön
  • Näytä erillinen välimainos, joka käyttäjän on hylättävä ennen kuin hän voi käyttää pääsisältöä.
  • Tee sivun yläosasta erillisen välimainoksen kaltainen ja aseta alkuperäinen sisältö sen alle.

Ponnahdusikkunat, jotka ovat ikäviä

Joidenkin ponnahdusikkunoiden ei kuitenkaan pitäisi vaikuttaa sijoituksiisi negatiivisesti, kuten

  • Välimainokset, joita käytetään lakisääteisten velvoitteiden täyttämiseen, kuten iän vahvistamiseen, evästeiden hyväksymiseen tai GDPR:ään.
  • Kirjautumisikkunat pääset käyttämään yksityistä sisältöä, kuten sähköpostia tai maksumuurin takana olevaa sisältöä.
  • Pienet bannerit, jotka on helppo hylätä ja jotka “käyttävät kohtuullisen määrän näyttötilaa”, kuten Chromen ja Safarin käyttämät sovellusasennusbannerit.

Ponnahdusikkunat, jotka ovat kunnossa

Pohjimmiltaan mobiili-ponnahdusikkunat turhauttavat käyttäjiä ja voivat vahingoittaa hakusi sijoitusta, joten käytä niitä vain, kun se on ehdottoman välttämätöntä.

Kuinka selvittää, onko sinulla mobiiliystävällinen verkkosivusto

Jos mietit, onko verkkosivustosi mobiiliystävällinen, vie vain hetken selvittääksesi sen Googlen mobiiliystävällinen testityökalu – Syötä vain linkki verkkosivustollesi ja napsauta “Testaa URL-osoite”.

Tämä työkalu arvioi, kuinka mobiiliystävällinen verkkosivustosi on, ja antaa sinulle yksityiskohtaisen erittelyn siitä, mitä voit tehdä parantaaksesi sitä.

Googlen mobiiliystävällisyystesti

Yhteenveto: Mobiilisivustojen suunnittelu vuonna 2023

Mobiiliystävällinen verkkosivusto on sellainen, joka on suunniteltu toimimaan hyvin älypuhelimissa ja tableteissa. Ja nyt, kun maailma on mobiiliensimmäinen, myös verkkosivustosi pitäisi olla.

Yhteenvetona, tässä on kahdeksan mobiilisivuston suunnitteluvinkkiä:

  1. Tee painikkeista tarpeeksi suuria, jotta ihmiset voivat napauttaa niitä.
  2. Varmista, että teksti on tarpeeksi suuri luettavaksi ilman, että käyttäjien tarvitsee lähentää.
  3. Yksinkertaista valikkoa, jotta se on helppo navigoida pienellä näytöllä.
  4. Sijoita hakutoiminto eteen ja keskelle ja anna käyttäjien suodattaa hakutuloksia.
  5. Tee käyttäjien ottamisesta sinuun vaivatonta yhteyttä.
  6. Luo lomakkeita, jotka ovat yksinkertaisia ​​ja nopeita käyttää.
  7. Sijoita toimintakehotukset sivun yläosaan, jotta ne näkyvät.
  8. Vältä turhauttamasta käyttäjiä ponnahdusikkunoilla, elleivät ne ole ehdottoman tarpeellisia.

Mitä mieltä olet mobiilisivustojen suunnittelusta? Olemmeko jättäneet huomiotta hyviä mobiiliverkkosuunnittelun parhaita käytäntöjä? Kerro meille alla olevissa kommenteissa!

Haluatko oppia lisää?