Koska mobiililaitteet ovat nyt ohittaneet työpöydän suosion, on välttämätöntä, että suunnittelijat suunnittelevat matkapuhelimen mielessä. Mobile-first on suosittu tekniikka, koska on helpompi skaalata mobiili ylöspäin kuin skaalaa alas.

Kuitenkin joskus valinta on otettu käsistäsi. Yleensä suunnittelijat joutuvat sovittamaan nykyiset työpöydän mallit mobiiliin. Ja koska jotkin elementit eivät käänny hyvin, olennaiset suunnittelijat ymmärtävät, mitä erityisiä säätöjä pienen näytön suunnittelussa on. Tässä miten ...

Kiinnitä minimalismi

Minimalismi on ollut suosittu web-suunnittelussa jo vuosia, koska se usein auttaa käytettävyyttä ja näyttää hyvältä. Matkapuhelimissa minimalismi ei kuitenkaan ole esteettinen valinta, koska se perustuu pelkästään käytettävyyteen.

Mukaan Nielsen Norman Group, leikkausominaisuudet ovat välttämättömiä mobiilisuunnittelussa. Joten mitä tämä tarkoittaa suunnittelijoille, kun he yrittävät rakentaa mobiilisivustosta jo perustetusta työpöydästä?

Se tarkoittaa irrottautumista, mikä ei ole välttämätöntä mobiilikäyttökokemukselle. Jos esimerkiksi siirrät sähköisen kaupankäynnin työpöydältä mobiililaitteeseen, säilytä sama määrä mobiilisivustossa näkyviä tuotteita. sillä on vain järkevää, koska ostajat haluavat löytää kaiken mitä verkkokaupalla on tarjota, aivan kuten verkkokauppa haluaa näyttää kaiken, mitä sen on myytävä sivuston kävijöille. Suuri mainos karuselli viimeisimmistä tarjouksista voidaan kuitenkin kohtuudella laskea hieman.

Piilota navigointi

Yksi yleisimmistä ominaisuuksista mobiilisovelluksissa on hampurilaisvalikko, joka on lähes kaikkialla läsnä pieni kuvake, jossa on kolme vaakasuoraa segmenttiä, jotka on kasattu päällekkäin. Tämä on toinen täydellinen tapaus, jossa liikkuvien voimien suunnittelijoiden pienempi näytön koko muuttuu elementtien ympärille, joiden odotetaan näyttävän tietyllä tavalla työpöytiin.

Huolimatta hampurilaisvalikoiman läsnäolosta, se on melko yleistä liikkuvilla näytöillä vain siksi, että tämä on paras ratkaisu, jonka suunnittelijat ovat löytäneet navigointivalikon pienentämisestä työasemilta mobiililaitteisiin.

Tutustu kuuluisaan kokki Bobby Flay n verkkosivuilla hänen ketjun ruokapaikka nimeltä Bobby's Burger Palace. Kuten odotettiin, navigointivalikko on vaakatasossa etusivun yläosassa, mutta kun siirryt sivuston mobiiliversioon, horisontaalinen valikko on poissa. Sen sijaan se on siisti ja siisti hampurilaisvalikko, aivan samassa paikassa näytössä, jossa pitempi horisontaalinen valikko olisi työpöydällä.

Bobbys-Burger-Palace-Desktop-kuvakaappaus
Bobbys-Burger-Palace-Mobile-kuvakaappaus

Walmart käyttää myös hampurilaisvalikkoa työpöydän ja matkapuhelimen välillä.

Walmart näyttää työpöytäsivustollaan "Kaikki osastot" -vetovalikon, joka avaa toisen kerroksen navigointivaihtoehtoja kaikki samalla sivulla. Mobiilisivustolla tämä ominaisuus ei kuitenkaan ole mahdollista pienen näytön koon vuoksi, joten korvaaminen on suunniteltu: toinen navigointivalikoima on hampurilaisvalikossa, ja nämä avaavat yhä useampia navigointivaihtoehtoja jokaisella valinnalla -Voin kuin kääntää kirjan sivuja vasemmalta oikealle.

Walmart-navigointi-Tasot-Desktop-kuvakaappaus
Walmart-Mobile-navigointi-kuvakaappaus

Vaihda yhteen sarakkeeseen

Se, että yksinkertaisempi on vain parempaa, kun kyseessä on mobiilisuunnittelu, teet hyvin asiakkaillesi, jos muistat yhden sarakkeen ulkoasun puhtaammaksi ja helpommaksi niiden käyttäjien toimimiseksi pienemmällä näytöllä. Yhden sarakkeen ulkoasun suuri etu on, että poistat horisontaalisen vierityksen, kuten jos sinulla oli paljon tekstiä sivulta ja halusi lukijasi pyyhkäisemään näytön vasemmalta oikealle ja lukemaan.

Kun otat käyttöön yhden sarakkeen ulkoasun, tehostat käyttäjäkokemusta, kannustat käyttäjiä yksinkertaisesti vierittämään alaspäin tai lukemaan linkin, jota he haluavat nähdä uudella sivulla. Tämä voittaa pakottamalla heidät pyyhkäisemään vasemmalta oikealle, mikä on vaikeampaa tehdä kuin selata alaspäin, varsinkin kun pidät käyttäjän peukalon asennon suhteessa siihen, kuinka heillä on mobiililaite.

The New York Times -lehden työpöydän verkkosivuilla on useita sarakkeita. Se on helppokäyttöinen työpöydällä, kun asiakkaasi käyttäjät voivat siirtää osoitinta vasemmalta oikealle ilman, että ohjauslevyllä tai hiirellä on ongelmia.

nyt

Tietenkin New York Timesin mobiilisivusto ymmärtää, miten asioita on muutettava pienemmillä näytöillä, joten se tuo mukanaan puhtaan ja tehokkaan yhden sarakkeen suunnittelun, joka lisää käyttäjäkokemusta, koska lukijat voivat vain selata helposti lisää sisältöä peukaloillaan .

nyt_mobile

Mobile näkökohdat

Koska mobiili vaikuttaa nykyisiin käyttäjiin, suunnittelijoiden on aina suunniteltava mobiililaitteille. Se ei ole tarpeeksi yksinkertaista suunnitella mobiilisivustoa työpöydän sivuston kanssa ja soittaa mobiililaitteiden suunnitteluun!

Suunnittelu mobiililaitteille tarkoittaa todellakin harkitsevaa erityisiä säätöjä, jotka sinun on tehtävä asiakkaasi sivustolle, kun suunnittelet pienen näytön. Tämä sisältää kaiken, josta puhumme edellä, minimaalisesta suunnittelusta navigointipalkin piilottamiseksi siirtymiseksi yhden sarakkeen ulkoasuun.

Hyväksymällä näitä parhaita käytäntöjä osaamisalueellasi voit luoda sivustoja, jotka sopivat erinomaisesti mobiililaitteille.