Kun maailma siirtyi pöytätietokoneista mobiililaitteisiin, suunnittelijat keskittyivät yhä enemmän UX: hen. Vaikka käyttöliittymällä on tärkeä rooli mobiiliystävällisten mallien luomisessa, käyttäjäkokemus on nyt tullut yhtä tärkeä, varsinkin kun nyt on enemmän laitteita keskittyä ja käyttökokemus eroaa laitteen tyypistä.

UX on jotain, joka ulottuu grafiikan ja estetiikan rajojen ulkopuolelle. Aivan kuten Rahul Varshney, foster.fm , sanoo:

UI ilman UX: tä on kuin taidemaalari, joka taputtaa maalaa kankaalle ilman ajatusta.

Rahul oli oikeassa tällä analogialla. Sinulla voi olla verkkosivustosi houkutteleva, käyttäjäystävällinen, ainutlaatuinen ja toimiva työpöytäversio, mutta jos et ota mobiilikokemusta huomioon, olet vain maalaamatta ilman mitään ajatuksia.

Joten, mikä erottaa hyvän liikkuvan kokemuksen huonosta? Ei ole kovin vaikeaa erottaa keskeisiä komponentteja, jotka muodostavat erittäin tehokkaan, optimoidun ja käyttäjäkeskeisen suunnittelun. Mutta tässä on muutamia parhaita käytäntöjä, joiden pitäisi opastaa sinua matkan varrella:

1) Älä hylkää matkapuhelinta ensin

Jos verkkosivustosi kohdistuu mobiiliin UX-tiliin, sinun kannattaa rikkoa perinne noudattamalla "mobiililaitteiden ensimmäinen" -strategiaa. Ei ole haittaa tämän tekniikan ymmärtämisessä, kun olet myönteinen, että useimmat käyttäjät pääsevät verkkosivustollesi mobiililaitteen kautta. Aivan kuin codemyviews ehdottaa, että mobiilimainonnan suunnittelu ei ole kapea, sillä todellisuudessa "1,2 miljardia matkapuhelinverkkoa maailmanlaajuisesti" ei näytä laskevan pian (se todennäköisesti lisääntyy lähitulevaisuudessa). Tämä saattaa olla hieman haastava aluksi; mutta jos olet valmis antamaan käyttäjälleen ensin, kannattaa ampua.

Vain siksi, että olet pyrkinyt suunnittelemaan yksinkertaisen, puhtaan tai mobiilikäyttöisen verkkosivuston, ei tarkoita sitä, että sitä ei pidä hienostuneena. Karimrashid.com on täydellinen esimerkki siitä, kuinka yksinkertaisuutta ja hienostuneisuutta voidaan yhdistää luomaan puhdas ja reagoiva, mutta tyylikäs muotoilu.

001

2) Luo nesteen asetteluja

On yksinkertaisesti aivan liian monta mahdollista näytön kokoa siellä valita ja valita, mitkä suunnittelevat. Sinun on luotava asettelu, joka sopeutuu mahdollisimman saumattomasti kaikkiin niihin. Onneksi, nestemäiset asettelut ovat täällä säästämään päivää!

Perusteiden mukaan pikemminkin kuin määrätyillä mittauksilla, nestemäiset asettelut ovat tulleet standardiksi web-ammattilaisten keskuudessa. Ne voivat olla hankalia, mutta varmistamalla, että mahdollisimman monet ihmiset voivat todella käyttää sivustoasi kannattaa vaivaa.

3) Toiminnan tavoite

Mikä on toimivuus? Se, mitä tarjoat vierailijoillesi, tekee asiat valmiiksi ja tekee nopeasti. Web-sivustosi käyttötarkoituksen mukaan kaikki työkalut, kuten lähimmän myymälän sijainti, tuotehaku, tuotearviointi tai valuuttamuunnin, auttavat käyttäjiä suorittamaan aiotut toiminnot ja saavuttamaan tavoitteet paljon nopeammin.

Purina , lemmikkieläinten ruoan tarjoaja, on täydellinen esimerkki siitä, miten web-sivun toimintoja voidaan helpottaa. Kotisivulla on hakukenttä, jossa voit etsiä etsimääsi asiaa. Alla on kaksi erillistä saraketta sellaiselle eläinravinnolle, johon he ovat erikoistuneet. Koko sivusto on helppo navigoida sarakkeiden, painikkeiden, työkalujen ja suunnittelun elementtien avulla, jotka päättävät parasta lemmikkieläinten ruokaa - ja sitten ostavat - tuulta.

002

4) Tunnista käyttäjät

Älä yritä tulla kaikista kaupoista, koska se saattaa maksaa sinulle tyypillinen käyttäjä, eikä kukaan halua sitä. Tarkista ensin, kuka käyttäjät ovat. Selvitä sitten niiden tyypillinen selainkäyttäytyminen. Kun tämä on varattu, selvitä, mikä tekee niistä rasti. Nykyaikaisilla käyttäjillä on kaksi päätyyppiä: ne, jotka selailevat ilman tavoitetta, ja ne, jotka haluavat suorittaa tehtävän. Jokainen näistä ryhmistä tarvitsisi erilaisia ​​"toimintoja" heidän tarpeidensa mukaan.

Ei ole vaikea arvailla The Body Shop -sivuston käyttäjien väestötietoja, koska se jättää vihjeitä koko sivulle. Koska The Body Shop on keskittynyt "luonnollisiin raaka-aineisiin" ja yhteiskunnalliseen aktivismiin, monokromaattiset vihreät vaihtelut, luonnollisten ainesosien liukusäädin, "vihreä" valokuvan valinta sekä hyvät kaupat, lupaukset ja muut sosiaaliset tapahtumat ovat ymmärrettävää hyvin kehittynyt suunnittelukonsepti.

5) Tutki aina kehittäjän kirjastoja ja ohjeita

Käytettävän alustan pohjalta on välttämätöntä antaa käyttöliittymän ohjeet tarkkaan. Jotkut alustat mahdollistavat enemmän joustavuutta kuin toiset. Kumpi tahansa tapaus, jotkin brändin tai "allekirjoitusten" tärkeimmät komponentit olisi säilytettävä.

Applen sovelluskehittäjälle pitäisi tarkastella iOS Human Interface Guidelines ja noudattamaan Apple-standardeja, kun kyse on perusasiakirjojen, suunnittelustrategioiden, UI-elementtien, kuvakkeiden / kuvamallien jne. suunnittelusta. Android-kehittäjän pitäisi oppia kaiken tyyppisten Android-sovellusten komponenteista, tyylistä, käytettävyydestä ja ulkoasusta. avulla Android-kehittäjien opas .

6) Tee kaikki sisältö kaikkien käyttäjien saataville

Jotkut suunnittelijat haluavat vain piilottaa osan mobiilikäyttäjistä sen sijaan, että tekisivät kaiken sisällönsa nestemäisten ulkoasujen parissa. Joskus se johtuu siitä, että ulkoasu on hankala, tai tuntuu, että mobiilisuunnittelussa on vain liikaa sisältöä. Tämä on väärä lähestymistapa.

Käyttäjien käyttäjille sivuston tai sovelluksen "riisuttu" versio ei ole vain epäoikeudenmukainen mobiilikäyttäjille, mutta voi vakavasti loukata ja menettää asiakkaita. Sinun on ehkä yksinkertaistettava ulkoasua äärirajoilla, siirrä jotain sisältöä muihin näyttöihin vähentääkseen sekavuutta tai yritä järjestellä sitä paremmin. mutta sen täytyy olla siellä .

Vertaa työpöydän versiota BBC-sivusto mobiiliversioon. Vaikka se onkin yksinkertaisempi, se laittaa kaikenlaisia ​​tietoja koko näytön päälle. Mobiiliversio päinvastoin pudottaa osan kuvista (jotka ovat edelleen itse artikkeleissa), mutta pitää kaikki otsikot yksinkertaisesti yksinkertaistaen kokemusta puhelimen kokoisella näytöllä.

003

7) Suunnittelu kosketukseen

On myös hyvä muistaa, että mobiililaitteen käyttäjä käyttää sormeja tarkkuusystävällisten hiiren osoittimien sijaan. Suunnittelun on oltava helppo liikkua sormilla kaiken kokoisia ja muotoisia, kun otetaan huomioon, että kaikki mobiililaitteet ovat nyt kosketusnäyttöä. Käyttäjän ei tarvitse puristaa liikaa tai zoomata napauttamalla jotain tai täyttämällä lomaketta tai napauttamalla painiketta. Epäonnistuneet kosketukset ovat myös hyvin yleisiä pienissä laitteissa, jotka on otettava huomioon suunnittelussa, jossa on tarpeeksi suuria kosketustuloja tai eleitä työn tekemiseen.

Tässä on a kosketa taulukkoa mennessä Peter-Paul Koch se voi auttaa. Huomaa, miten kosketustilaisuudet (ja muut toiminnot) voivat vaihdella selaimen yhteensopivuudesta ja laitteesta riippuen.

8) Käytä pakkaustyökaluja

Nykyisin käytettävissä olevien työkalujen määrä suunnittelijan työskentelyn vähentämiseksi on vaikeampaa. Löydät käsikirjoituskompressorit, kuten HTML-kompressori tai gzip joka automaattisesti poistaa tarpeettomia kommentteja, valkoista tilaa tai koodia. CSS minifier ja CSS-kompressori ja joitain muita työkaluja, joiden avulla voit yhdistää CSS-koodin ja parantaa suorituskykyä. Kuvan pakkaaminen on myös yhtä tärkeää; jotkin, jotka vähentävät .jpeg- ja .png-tiedostojen kokoa säilyttäen samalla laadun ehjänä EWWW-kuvan optimoija , smush.it , optipng , ja jpegtran .

Tässä on esimerkki erittäin reagoivasta salkun suunnittelusta RyJohnson . Verkkosivusto on täynnä upeita kuvia, jotka eivät poikkea työpöydän versiosta. Tämän nopean lastauksen salaisuus on epäilemättä kuvan optimointi.

004