Straipsnis

Mobili svetainių dizainas 2021 m .: viskas, ką reikia žinoti

Mobiliųjų svetainių dizainas yra būtinas.

Kodėl? Nes mobilieji įrenginiai daro perversmą mūsų ryšio būdui ir dėl to verslui. Tiesą sakant, didžioji dalis interneto srauto dabar ateina iš mobiliojo ryšio prietaisų.

„Mobilus tampa ne tik nauju skaitmeniniu centru, bet ir tiltu į fizinį pasaulį“, - tarė Thomas Hussonas , „Forrester Research“ viceprezidentas ir pagrindinis analitikas. „Štai kodėl mobilusis ryšys paveiks ne tik jūsų skaitmenines operacijas, bet ir pakeis visą jūsų verslą.“



Kitaip tariant, jums reikia mobiliųjų svetainių.

Bet kas yra mobiliesiems skirta svetainė? Šiame straipsnyje sužinosite viską apie mobiliesiems pritaikytas svetaines ir pamatysite devynis geriausius mobiliesiems skirtų svetainių dizaino pavyzdžius. Be to, sužinosite, kaip sužinoti, ar jūsų svetainė pritaikyta mobiliesiems.

Priimkime tai.

Nelaukite, kol kažkas tai padarys. Pasamdyk save ir pradėk šaukti kadrus.

Pradėkite nemokamai

Kas yra tinkama mobiliesiems svetainė?

Paprasčiau tariant, mobiliesiems skirta svetainė yra svetainė, sukurta ir optimizuota rankiniams prietaisams, pavyzdžiui, išmaniesiems telefonams ir planšetiniams kompiuteriams.

Ir mobilusis reaguojantis dizainas yra interneto svetainės kūrimas kuris prisitaiko prie žiūrimo ekrano dydžio.

Čia, „Oberlo“, mes turime mobiliesiems pritaikytą interneto svetainių dizainą. Palyginkime, kaip tai atrodo staliniame ir mobiliajame įrenginiuose.

geriausias būdas pritraukti stebėtojus instagrame

Žemiau esančiame paveikslėlyje matote, kad darbalaukio svetainėje yra daug vietos, puslapio elementai išdėstyti vienas šalia kito ir tekstas yra palyginti mažas, palyginti su ekrano dydžiu.

„Oberlo“ darbalaukio svetainė

Kita vertus, kai žiūrite svetainę mobiliajame telefone, puslapio elementai yra sukrauti vienas ant kito viename ilgame stulpelyje, o aplink kiekvieną elementą yra mažiau vietos. Be to, mygtukai yra didesni, kad būtų lengva juos paliesti, o tekstas yra didesnis, palyginti su puslapio dydžiu, kad būtų lengviau skaityti.

„Oberlo Mobile“ svetainės dizainas

„Turininga ir interaktyvi patirtis, kurios galime tikėtis naudodamiesi programomis mobiliesiems, sukūrė naujus standartus ir lūkesčius visoms skaitmeninėms laikmenoms, įskaitant internetą“, - pasakė Radžis Aggarwalas , Mobiliosios rinkodaros bendrovės „Localytics“ generalinis direktorius. „Rezultatas yra tai, kad svetainės tobulėja ir tampa panašesnės į savo programas.“

Mobiliųjų svetainių dizaino svarba

Pažvelkime į priekį: paskutinį 2019 m. Ketvirtį išmanieji telefonai buvo atsakingi už nemenką 52,6 proc. Pasaulinio interneto srauto .

Tai reiškia, kad mobiliųjų įrenginių naudojimas dabar dominuoja staliniuose kompiuteriuose.

Daugiau, mobiliojo ryšio vartotojų skaičius tikimasi, kad 2021 m. visame pasaulyje išaugs iki 3,8 mlrd.

Kaip Cyndie Shaffstall , rinkodaros kompanijos „Spider Trainers“ įkūrėjas, sakė: „Mobilus ne ateitis, o dabar. Susipažinkite su savo klientais pasirinktoje aplinkoje, o ne ten, kur jums patogu “.

Mobilieji įrenginiai taip pat keičia apsipirkimo įpročius.

Pasak „Google“, 59 procentai pirkėjų pasakyti, kad gali apsipirkti savo mobiliuosiuose įrenginiuose yra svarbus sprendžiant, iš kurio mažmenininko ar prekės ženklo pirkti.

Daugiau, 70 procentų išmaniųjų telefonų savininkų parduotuvėje įsigiję pirkėjai, prieš tai naudodamiesi savo mobiliaisiais įrenginiais, ištyrė pirkinį.

Jei to nepakanka, „Google“ algoritmas paieškos rezultatuose teikia pirmenybę mobiliesiems pritaikytoms svetainėms.

2020 m. Kovo mėn. „Google“ sakė , „Kad būtų paprasčiau, visų svetainių indeksavimą pirmiausia pradėsime mobiliesiems“.

Jei įdomu, ką tai reiškia, „Google“ kūrėjai pasisako John Mueller paaiškina :

„Šiuo metu„ Google “žiūri į stalinio kompiuterio svetainės versiją ir tada nustato, kaip ji reitinguos svetainę mobiliesiems pagal tą informaciją. Kai šis atnaujinimas bus išleistas, įvyks priešingai. „Google“ pradės žiūrėti į jūsų svetainę mobiliesiems ir nuo to reitinguos kompiuterio svetainę. “

Oficialus atnaujinimas pradės veikti 2020 m. Rugsėjo mėn., Tačiau 70 procentų svetainių Paieškos rezultatuose rodomi elementai jau yra reitinguojami remiantis šiuo mobiliųjų įrenginių indeksavimo algoritmu.

„Google“ statistika

Galiausiai, daugelis vartotojų mobilias svetaines įkelia naudodami lėtus, silpnus telefono ryšius. Todėl prekės ženklai turi sukurti mobiliųjų svetainių dizainą, kurie būtų greitai įkeliami.

Apskritai, pasaulis pirmiausia yra mobilusis - ir todėl jums reikia mobiliesiems pritaikytos svetainės.

8 geriausių mobiliųjų svetainių dizaino patarimai

Šiame skyriuje atidžiau išnagrinėsime aštuonis mobiliųjų svetainių dizaino patarimus, kuriuos galite naudoti. Be to, pamatysite realių pavyzdžių iš geriausių interneto svetainių mobiliesiems.

1. Naudokite didelius mygtukus

Mobiliesiems pritaikytose svetainėse turi būti pakankamai dideli mygtukai, kad vartotojai galėtų juos paliesti nepriartindami.

Be to, tarp hipersaitų turi būti vietos. Jei nuorodos dedamos per arti vienas kito, vartotojai gali bandyti spustelėti nuorodą ir netyčia spustelėti kitą.

„Shopify“ naudoja didelius mygtukus ir sukuria daug vietos tarp hipersaitų kurdamas savo svetainę mobiliesiems.

„Shopify“ dideli mygtukai

Taigi, kurdami mobiliesiems pritaikytą svetainę, nepamirškite tarpų ir įsitikinkite, kad kiekvieną hipersaitą galima lengvai spustelėti.

2. Padarykite, kad tekstas būtų pakankamai didelis skaityti

Tai gali atrodyti šiek tiek akivaizdu, tačiau ji taip pat labai svarbi kuriant mobiliesiems skirtas svetaines.

Vartotojams niekada nereikėtų artinti ar slinkti kairėn ar dešinėn, kad galėtų ką nors perskaityti. Tekstas visada turėtų būti pakankamai didelis, kad jį būtų galima patogiai perskaityti.

Žemiau pateiktame pavyzdyje iš Barzdas , matote, kad visas rodomas tekstas puikiai atitinka ekrano dydį.

„Beardbrand“ didelis tekstas

Padarykite savo tekstą pakankamai dideliu visų dydžių ekranuose, kad vartotojai galėtų lengvai perskaityti tai, ką jūs turite pasakyti.

3. Supaprastinkite meniu

Stalinių svetainių meniu turi daug vietos. Jie gali užimti visą juostą ekrano viršuje ir turėti daugybę išskleidžiamųjų parinkčių, netrukdydami vartotojo patirčiai.

Tai nėra mobiliuosiuose įrenginiuose - tiesiog nėra pakankamai vietos.

Mobiliesiems pritaikytose svetainėse turėtų būti naudojami paprasti meniu, pateikiantys svetainės apžvalgą. Tada vartotojai gali naudoti kategorijas, filtrus ar paieškos funkciją, kad patobulintų tai, ko ieško.

Daugelyje mobiliesiems pritaikytų svetainių meniu nurodomas hamburgerio simbolis - susidedantis iš dviejų ar trijų horizontalių linijų.

Pažiūrėkime gerą pavyzdį iš vienos geriausių svetainių mobiliesiems, Kylie Skin .

Vartotojams palietus dviejų eilučių mėsainių meniu viršutiniame dešiniajame ekrano kampe, jiems bus rodomas viso ekrano meniu su dideliais mygtukais ir tekstu.

„KylieSkin Mobile Menu“ pavyzdys

Kurdami mobiliesiems pritaikytą svetainę, palikite savo meniu paprastus, kad vartotojams būtų lengviau rasti tai, ko jie ieško.

4. Pateikite paprastą ir intuityvią paieškos funkciją

Jūsų svetainės paieškos funkcija ypač svarbi mobiliojo ryšio vartotojams.

Kaip minėta pirmiau, supaprastinti meniu gali palengvinti naršymą mobiliajame telefone. Tačiau vartotojai taip pat gali apsunkinti konkretaus elemento paiešką.

Kad vartotojams būtų lengviau rasti tai, ko jie nori, įdėkite paieškos funkciją priekyje ir centre.

„Shopify“ vartotojas Gymshark paieškos funkciją įdeda į viršutinę puslapio juostą. Taip pat yra intuityvi filtravimo funkcija, kad vartotojams būtų lengviau rasti tam tikrų tipų produktus.

„Gymshark“ paieškos ir filtravimo funkcijos

Pagrindinis išsinešimas? Sukurkite paprastą ir veiksmingą paieškos funkciją savo mobiliųjų svetainių dizaino dalyje.

5. Palengvinkite susisiekimą

Jei klientas ieško jūsų kontaktinės informacijos, jam gali kilti problemų - tai reiškia, kad greičiausiai jau šiek tiek nusivylė. Negalima įžeisti traumos, nes sunku su jumis susisiekti.

kaip susikurti savo geografinį žymėjimą

Ypač kai 84 proc. Vartotojų apsvarstyti klientų aptarnavimas būti pagrindiniu veiksniu sprendžiant, ar pirkti.

Klientų aptarnavimo stat

Štai dar vienas puikus „Shopify“ vartotojo mobiliųjų svetainių dizaino pavyzdys Bremontas . Šis prabangių laikrodžių prekės ženklas ekrano apačioje, dešinėje, uždeda pokalbio piktogramą, todėl svetainės lankytojai gali greitai ir lengvai susisiekti su atstovu.

„Bremont“ kontaktų parinktys

Jei negalite pasiūlyti tiesioginio pokalbio visą parą, apsvarstykite galimybę susieti su „Facebook“ pokalbių botas arba tiesiog pateikite kontaktinę formą, kurią vartotojai gali pasiekti naudodamiesi jūsų meniu esančia nuoroda „Susisiekite“.

6. Sukurkite paprastas formas

Vartotojai gali būti labiau linkę užpildyti ilgą formą kompiuteryje, nes ekranas yra didesnis ir jį lengviau įvesti klaviatūra.

Mobiliuosiuose įrenginiuose formos turi būti trumpesnės su dideliais teksto laukais ir mygtukais.

Pavyzdžiui, jei prašote vartotojų užsiregistruoti prie jūsų adresų sąrašo, neturėtumėte paprašyti daugiau nei vardo ir el. Pašto adreso.

Jei reikia įtraukti daugiau klausimų, atsakykite į juos greitai ir lengvai.

Šiame „Shopify“ vartotojo mobiliųjų svetainių dizaino pavyzdyje „QuadLock“ , galite pamatyti didelius laukus su paprastais formos reikalavimais. Yra net išskleidžiamasis meniu, kuris padeda vartotojams pateikti informaciją apie jų užklausą.

„QuadLock“ kontaktinė forma

Trumpai tariant, įsitikinkite, kad jūsų formos yra trumpos ir mielos.

7. Sukurkite dėmesį patraukiančius raginimus veikti

Į raginimas veikti - taip pat žinomas kaip raginimas veikti - tai vaizdas, reklamjuostė ar teksto dalis, kuri tiesiogine prasme ragina vartotojus imtis tam tikrų veiksmų.

Pavyzdžiui, galite paraginti vartotojus užsiregistruoti jūsų pašto adresų sąrašas , sužinokite daugiau apie pasiūlymą arba įsigykite produktą.

Ši rinkodaros taktika vaidina esminį vaidmenį kuriant interneto svetaines mobiliesiems.

Tačiau gali būti sudėtinga sukurti patrauklius raginimus veikti taip ribotoje ekrano erdvėje, kad galėtumėte žaisti.

Šiame mobiliųjų svetainių pavyzdyje iš „Shopify“ vartotojo Prabangūs plaukai , galite pamatyti dvi reklamines juostas su raginimais veikti. Pirmasis reklamuoja naują produktą su nemokama dovana, o antrasis ragina vartotojus sužinoti daugiau apie prekės ženklo nemokamą pristatymą ir 90 dienų mainų politiką.

„Luxy Hair“ raginimai veikti

Kurdami savo mobiliesiems pritaikytos svetainės raginimus veikti, juos išskirkite padėdami juos virš matomos ribos, kur vartotojai gali juos pamatyti neslenkdami žemyn.

8. Venkite iššokančiųjų langų

Pripažinkime: dauguma žmonių nekenčia iššokančiųjų langų. Tiesą sakant, jei „Google“ nekenčiu iššokančių skelbimų, rasite beveik 48 milijonus rezultatų.

Nenuostabu, kad „Google“ išleido algoritmo pakeitimas 2017 m baudžia svetaines, kurios teikia tam tikrų tipų iššokančiuosius langus mobiliuosiuose įrenginiuose.

Šiomis dienomis greičiausiai nukentės jūsų paieškos reitingai, jei:

  • Rodyti iššokantįjį langą, kuris apima pagrindinį turinį
  • Pateikite atskirą tarpinį skelbimą, kurį vartotojas turi atsisakyti, kad galėtų pasiekti pagrindinį turinį.
  • Padarykite, kad puslapio viršus būtų panašus į atskirą tarpinį skelbimą, ir įdėkite originalų turinį po juo.

Iššokantys iššokantys langai

Be to, kai kurie iššokančiųjų langų tipai neturėtų neigiamai paveikti jūsų reitingų, pvz.,

  • Tarpinio puslapio skelbimai, naudojami teisiniams įsipareigojimams vykdyti, pvz., Amžiaus tikrinimas, slapukų sutikimas ar GDPR .
  • Prisijungimo langai, kad pasiektumėte privatų turinį, pvz., El. Paštą arba turinį, esantį už „paywall“.
  • Mažos reklamjuostės, kurias galima lengvai atmesti ir kurios „naudoja pakankamai vietos ekrane“, pvz., Programos diegimo reklamjuostės, kurias naudoja „Chrome“ ir „Safari“.

Gerai pasirodantys iššokantys langai

Esmė: iššokantys mobilieji langai kelia nemalonumų vartotojams ir gali pakenkti jūsų paieškos reitingai , todėl naudokite juos tik tada, kai tai yra absoliučiai būtina.

Kaip sužinoti, ar turite mobiliesiems pritaikytą svetainę

Jei įdomu, ar jūsų svetainė pritaikyta mobiliesiems, tai užtruksite šiek tiek laiko, kol su tuo sužinosite „Google“ pritaikytas mobiliesiems testavimo įrankis - tiesiog įveskite nuorodą į savo svetainę ir spustelėkite „Test URL“.

Šis įrankis įvertins, ar jūsų svetainė yra pritaikyta mobiliesiems, ir išsamiai apibūdinsite, ką galite padaryti, kad ją patobulintumėte.

„Google“ ir aposs Test mobiliesiems testas

Santrauka: Mobili svetainių dizainas 2021 m

Mobiliesiems pritaikyta svetainė yra sukurta taip, kad gerai veiktų išmaniuosiuose telefonuose ir planšetiniuose kompiuteriuose. Dabar, kai pasaulis pirmiausia yra mobilusis, turėtų būti ir jūsų svetainė.

Apibendrinant, pateikiame aštuonis mobiliųjų svetainių dizaino patarimus:

  1. Padarykite mygtukus pakankamai didelius, kad žmonės galėtų juos paliesti.
  2. Įsitikinkite, kad tekstas yra pakankamai didelis, kad jį būtų galima skaityti vartotojams nereikalaujant priartinti.
  3. Supaprastinkite meniu, kad būtų lengva naršyti mažame ekrane.
  4. Padėkite paieškos funkciją priekyje ir centre ir leiskite vartotojams filtruoti paieškos rezultatus.
  5. Padarykite, kad vartotojai nesunkiai susisiektų su jumis.
  6. Kurkite paprastas ir greitai naudojamas formas.
  7. Raginimus veikti padėkite virš matomos ribos, kad jie būtų ryškūs.
  8. Venkite nenuvilti naudotojų iššokančiaisiais langais, nebent tai tikrai būtina.

Kokios jūsų mintys apie svetainių mobiliesiems dizainą? Ar mes praleidome kokią nors puikią mobiliųjų telefonų dizaino gerąją patirtį? Praneškite mums toliau pateiktose pastabose!

Norite sužinoti daugiau?



^