Mobiiliresponsiivisuus toteutettu oikealla tavalla – Käyttäjäkokemuksen näkökulma

toukokuu 18, 2018

Nykyään käyttäjät katselevat verkkosisältöä tai tekevät verkkotapahtumia eri laitteilla kannettavista tietokoneista tabletteihin ja matkapuhelimiin. Lisäksi mobiiliekosysteemi (mobiililaitteet ja niihin asennettavat käyttöjärjestelmät) kasvaa nopeasti. Siksi on ehdottoman tärkeää, että verkkosivustot, joita yritykset rakentavat asiakkaiden kohdentamiseksi, ovat mobiilioptimoituja.

Mobiiliresponsiivinen tai mobiilisivusto

Kaksi tapaa optimoida verkkosivustosi mobiililaitteille:

  • Mobiiliresponsiivinen – Käytä mobiiliresponsiivista lähestymistapaa työpöytäsivustolla: mobiiliresponsiivisella suunnittelulla varustettu verkkosivusto mahdollistaa saman verkkosivuston katselun eri laitteilla mukauttamalla asettelua ja/tai sisältöä kyseisen laitteen näytön koon mukaan.
  • Mobiilisivusto – Rakenna erillinen mobiilisivusto, jossa huomioidaan kaikki eri mobiilialustojen näkökohdat. Yleensä mobiilisivustolla on eri URL-osoite kuin pääpöytäsivustolla.

Mobiilisivustolähestymistavan käyttäminen voi olla kallista rakentaa ja ylläpitää, koska se edellyttää erilaisen verkkosivuston, eri URL-osoitteiden ja erilaisten luomista SEO tehdä työtä.

Mobiiliresponsiivisen lähestymistavan käyttö on nykyään trendi, koska verkkosivustojen kehitysteknologian nykypäivän edistyessä on entistä helpompaa ja kustannustehokkaampaa rakentaa verkkosivustoja mobiiliresponsiivisella ulkoasulla sen sijaan, että rakentaisit erilliset verkkosivustot mobiililaitteille.

Käyttäjän näkökulmasta on helpompi muistaa yksi URL-osoite yhden verkkosivuston käynnistämiseksi ja saman verkkosivuston sisällön eri asettelujen tarkastelemiseksi näytön koosta riippuen.

Verkkosivuja tarkastellaan pöytätietokoneilla, kannettavilla tietokoneilla, tableteilla tai matkapuhelimilla/älypuhelimilla. Pöytätietokoneiden näytöt voivat olla eri kuvasuhteilla (näytön leveyden ja korkeuden suhde), jotka vaihtelevat vakionäytön 4:3:sta laajakuvanäyttöjen 16:9:ään.

näyttö

Tabletteja on myös erikokoisia, 7 tuumasta, kuten Amazon Fire 7, 12+ tuumaan, kuten iPad Pro, 8 tuuman (iPad Mini 4) ja 10 tuuman (Samsung Galaxy Tab A) läpi.

Mobiiliresponsiivisen suunnittelun ansiosta verkkosisältö mukautuu näihin eri kokoihin tai kuvasuhteisiin, jotta käyttäjät voivat saada saumattoman kokemuksen vaihtaessaan laitteesta toiseen.

kuva

Jos verkkosivustosi on mobiilioptimoitu, käyttäjälläsi tai asiakkaallasi on seuraava kokemus katsellessaan responsiivista verkkosivustoa matkapuhelimellasi:

  • Verkkosisältö muuttuu dynaamisesti mobiililaitteen koon mukaan, esim. tekstin koko muuttuu niin, että käyttäjä voi lukea tiedot mukavasti.
  • Navigointi on tiivistetty siten, että valikko voi ilmestyä painikkeesta. Esim. Yksinkertaistettu navigointi, joka on "peukalo"ystävällinen suurilla kosketuspisteillä, erityisesti kriittisten yhteystietojen osalta
  • Kaikki kuvat on optimoitu niin, että ne hahmonnetaan mahdollisimman nopeasti laitteella.
  • Sisältö näkyy oikeilla täytteillä ja välilyönneillä.
  • Kaikki työpöytäsivustolla saatavilla olevat ominaisuudet näkyvät oikein laitteella ja niitä voidaan käyttää onnistuneesti mobiililaitteella.
  • Verkkosisältö on vähentänyt grafiikkaa niin, että kriittiset tiedot tuotteista ja palveluista näkyvät käyttäjäystävällisessä käyttöliittymässä.
  • Ei tarvitse kirjoittaa, ellei se ole välttämätöntä.

Mobiiliresponsiivisen web-suunnittelun edut verkkosivustollesi käyttäjän näkökulmasta:

  • Käyttäjäsi voivat jakaa sisältöäsi ja linkittää siihen käyttämällä yhtä URL-osoitetta.
  • Käyttäjäsi löytävät verkkosivustosi helpommin hakutuloksistaan.
  • On pienempi riski, että käyttäjäsi kohtaavat yleisiä virheitä, jotka vaikuttavat mobiilisivustoihin. Näitä voivat olla:
  1. Sisältö, jota ei voi toistaa (videoita ei voi toistaa matkapuhelimilla)
    video-ei-saatavilla
  2. Virheelliset uudelleenohjaukset, jos jokainen käyttäjä ohjataan työpöydän URL-osoitteeseen mobiiliversion URL-osoitteen sijaan. esimerkki
  3. Linkit, jotka eivät toimi mobiililaitteella, johtavat 404-virheen käyttökokemukseen.
    kuva1
    kuvia
  4. On pienempi riski, että käyttäjäsi odottavat pitkään sivun latautumista mobiililaitteella, koska uudelleenohjausta mobiilisivustolle ei tarvita.

Mobiiliresponsiivisen verkkosivuston parhaat käyttöliittymäkäytännöt:

Saadaksesi asiakkaasi kokemaan parhaan käyttökokemuksen mobiiliresponsiivisella verkkosivustollasi, sivusto tulee ottaa käyttöön ottaen huomioon seuraavat parhaat käytännöt:

Joustava

Mobiiliresponsiivinen muotoilu mahdollistaa sisällön mukauttamisen laitteeseen. Käyttäjä ei kuitenkaan välttämättä nauti hyvästä kokemuksesta verkkosivuston sivun katselussa mobiililaitteella, jos se jatkuu ja jatkuu. Siksi mobiiliresponsiivisesta suunnittelusta tulee tehdä joustava niin, että sisältö voidaan priorisoida ja piilottaa paremman mobiilikokemuksen saavuttamiseksi.

Responsiiviset kuvat

Hyvä responsiivinen muotoilu sisältää myös kuvien tekemisen responsiivisiksi. Jos kuvat eivät reagoi, käyttäjät näkevät suuren kuvan, mutta eivät näe yksityiskohtia oikein. Tällaisten taideongelmavirheiden korjaamiseksi responsiivisen suunnittelun tulisi käyttää erilaisia rajattuja kuvia eri laitteisiin kohdistettaessa.
kuvia
kuvat mobiilissa

Hyvän responsiivisen suunnittelun tulisi myös huomioida pienempiä kuvia pienemmille laitteille.
reagoiva

Minimalismi ratkaisee

Mobiiliresponsiivisessa suunnittelussa tulee olla minimalismin ominaisuuksia. Mobiililaitteella katsottuna verkkosivustolla ei saa olla vain tarpeettomia ominaisuuksia tai elementtejä, vaan sen tulisi rajoittua tasaisiin kuvioihin ja tekstuureihin sekä rajoitettuihin tai yksivärisiin väreihin.

kuvan leveys

Standardoi napsautettavat alueet/painikkeet

Hyvän käyttökokemuksen takaamiseksi painikkeiden ja linkkien tulee olla riittävän suuria, jotta ne voivat napsauttaa sormella hiiren napsautuksen sijaan.
railscarma mobiili

Ajattele typografiaa

Mobiiliresponsiivisen suunnittelusi pitäisi tehdä sisällöstäsi helppolukuista ja aidosti optimoitua laitteen koon mukaan. Typografiaa tulisi käyttää hierarkian näyttämiseen tai käyttäjän kiinnostuksen herättämiseen. Oikean kokoisten otsikoiden käyttäminen voi auttaa luomaan sivuille suurenmoisen hierarkian, ja oikea fonttikoko nykyaikaisten laitteiden näyttökokojen mukaan voi kaikki luoda erittäin kiinnostavan kokemuksen käyttäjillesi.

Kun ostosten teko ja sosiaalinen media mobiilin kautta ovat lisääntymässä, mobiiliresponsiivinen suunnittelu, jos se otetaan tehokkaasti käyttöön, verkkosivustollasi voi vaikuttaa käyttäjäkokemukseen ja sitoutumiseen, mikä luo mahdollisia liidejä tai asiakkaita yrityksellesi. Lisäksi mobiiliresponsiiviset verkkosivustot tarjoavat paremmat sijoitukset hakutuloksissa. Lisäksi mobiiliresponsiivisten verkkosivustojen rakentaminen ja ylläpito tarjoaa nykyään paremman tuoton sijoitukselle kuin koskaan aikaisemmin, koska digitaalisen markkinoinnin tuottopotentiaali on valtava. Näistä syistä älä tuhlaa aikaa! Sijoita yrityksesi mobiiliresponsiivisiin verkkosivustoihin nyt!

Carmatec on Digital Transformation Partner, joka toteuttaa monia projekteja, joiden pääpaino on käyttöliittymäsuunnittelussa. Voit nähdä projektiportfoliomme osoitteessa https://www.carmatec.com/portfolio/

fiFinnish