Miten kosketusnäytön vallankumous vaikuttaa UX: hen
Windows 8: n käyttöönotto vaikutti Windows-käyttöliittymän massiiviseen uudistamiseen Windows Phone -liitännän mukaisesti, jotta se olisi kosketussivuilla toimivien ihmisten intuitiivisempi ja että Apple on hienosti sovitettu OSX: n kanssa ajan myötä, mikä tehostaa yhä useammin jakautuvia ominaisuuksia mobiili- ja työpöydän käyttöjärjestelmiin. Vaikka emme vielä näe kosketusnäyttöä Macia, on selvää, että kosketusnäytön vallankumous uhmailee meitä käyttäjiemme kanssa, jotka käyttävät yhä enemmän aikaa mobiililaitteisiin kuin kotikoneisiin.
Tämän vuoksi ja yhä useammin selaaminen älypuhelimissa ja tablet-laitteissa, verkkosivustojen on päätettävä, miten ne mukautuvat ihmisiin, jotka käyttävät sisältöä ilman hiirtä ja näppäimistöä. Vaikka oletusvaste tähän on usein ollut "vain erillinen mobiili käyttöliittymä!", Ratkaisu, joka on aiemmin toiminut aiemmin pienemmillä mobiililaitteilla, kuten puhelimilla, on olemassa hyvin vähän tilaa, jota keskimmäinen ryhmä omistaa suuremman puhelimen ja tablet-näytöt.
Tässä artikkelissa tarkastellaan useita sivustoja, jotka ovat laskeneet sekä epätavanomaiset että tavalliset sivuston mallit, jotta ne olisivat kosketusystävällisempää.
Keskitettyjä verkkosivustoja vs. vastaavia verkkosivustoja
Monet verkkosivustot ovat luoneet tytäryhtiöitä tai -ohjelmia nimenomaan kosketusnäytön käyttäjille, jotta he voivat keskittyä yhteen käyttäjätietoon kerrallaan. Yksi ongelma on se, että koska sivustot ovat erillisiä, ne perustuvat URL-osoitteiden uudelleenohjaukseen, joka voi usein johtaa ongelmiin, kuten käyttäjän lähettämiseen väärälle sivustolle linkistä tai huonosta uudelleenohjauksesta johtuen siitä, että mobiilikäyttäjille on suunnattava uudelleen muotoillut sivut.
Suuri ongelma erillisten verkkosivustojen kanssa mobiilikäyttäjille on kuitenkin se, että usein mobiiliversiolla ei ole ominaisuuksia tai tietoja, joita työpöydän käyttäjä saa; ominaisuudet ja liitännät yksinkertaistetaan usein, nappeja suurennetaan ja vaihtoehdot vähentyvät. Tämä voidaan ratkaista käyttämällä "reagoivaa" muotoilua. Reagoiva verkkosivusto on suunniteltu helppolukuiseksi molemmilla alustoilla menettämättä laatua kummallakin. Tällä on myös se etu, että vain yksi sivusto on suunniteltava, eikä kaksi, mutta tämä johtaa usein kompromisseihin molemmille alustoille.
Perussuunnitteluerot
Kosketusnäytön ja työpöydän välillä on ilmeisiä eroja, joita sinun on harkittava luomalla verkkosivustoasi. Kosketusnäytöllä pyyhkäise sivua alaspäin, mutta työpöydällä siirrät vierityspyörää alaspäin. Apple on yrittänyt korjata tätä yhdistämällä niiden kosketusteknologiat ohjauslevyihin sekä kannettavalle tietokoneelleen että työpöydälle Macilleen, mutta tietokoneiden käyttäjät tai jopa Mac-käyttäjät, jotka käyttävät tavallisia pyörivä pyöriä tai liukusäätimiä selattaessa verkkosivuja, ovat epäedullisessa asemassa.
Painikkeiden on oltava paljon suuremmat mobiililaitteilla, sillä napauttaminen ei ole läheskään yhtä tarkka kuin klikkaus hiirellä, ei ole mitään yllyttävää kuin yrittää napsauttaa linkkiä seuraavalle sivulle ja vahingossa lähettää sivun takaisin tai mainoksen sijaan. Osoittimen puute tarkoittaa myös sitä, että sinulla ei ole hover-tiloja selittää missä linkki menee, mitä sana tarkoittaa tai mitä napsautettavia.
Myös mobiilitulojen tarkkuus on erilainen, koska kosketusnäytöillä voi olla joko resistiivisiä tai kapasitiivisia tuloja, joilla on erilainen herkkyys ja sen jälkeen tarkkuus voi kadota resistiivisillä kosketusnäytöillä. Tämän lisäksi malleissa on oltava kaksi huomattavasti erilaista resoluutiota mobiililaitteille, joilla on kaksi suuntausta.
Näytön suunta ja kuvasuhde
Useilla eri resoluutioilla kuin tavallisilla näytön kooilla, et voi enää ajatella vain standardoitujen näytön tarkkuuksien ja pystysuoran liikkeen suhteen. Teknologiamarkkinoiden nopeat muutokset ovat tuoneet näytön koot, jotka eroavat mallista ja valmistajasta ja kaikki huhut niin sanotuista älykkäistä kelloista, että voimme alkaa nähdä näytöt, jotka eivät enää ole vain neljä rajaa. Mobile-näytöt lisäävät monimutkaisuutta johtuen siitä, että niitä voidaan katsella sekä pysty- että maisema-tilassa kiertämisen kautta.
Vastaus ovat nestemäisiä asetteluja, jotka itsessään sopeutuvat mihinkään tarkkuuteen ja voivat sopeutua sekä pysty- että maisema-analyysiin. Jotkin sivustot käyttävät nestemäistä ulkoasua, joka muuttaa sivuston ulkoasua voimakkaasti hallinnan helpottamiseksi ja näytön koko potentiaalin hyödyntämiseksi sen suuntauksen perusteella.
Hiiret on suunniteltu erityisesti vierityspyöriin, jotta pystyt helposti vierittämään useita käyttäjiä siirtymässä kosketuslevyihin ja kosketusnäyttöihin. Koska Apple on omaksunut uudenlaisen kosketusnäytön muodon, joka on samankaltainen kuin vetää sivua vierittämättä, luovampi käsitys horisontaalinen vieritys ei välttämättä ole kysymys. Useimmat sovellukset käyttävät horisontaalisia vierityksiä työkaluina, ja suurin mahdollinen menestys horisontaalisessa vierittämisessä on sytytyskyky, joten miksi et panna sitä Web-käyttöliittymään? Monilla yksittäisillä sivuilla on vain vaakasuora akseli, mutta niiden on usein käytettävä painikkeita käynnistääkseen vierityksiä, koska käyttäjät eivät välttämättä ymmärrä epätyypillistä muotoa.
Horisontaalinen vieritys voi olla samanlainen kuin vertikaalinen vieritys suunnittelussa, mutta molempien käyttö voi avata kaksosakselisen vierityksen mahdollisuuden, joka ei ehkä toimi selaimessa. Monet käyttäjät haluavat olla ankkuroituina akselille, tietenkin tämä on yleensä x-akseli, joka on staattinen, joten jos käyttäjät eksyvät sivulle, he voivat vain selata ylös ja palata päävalikkoon. Kaksoisakselisilla sivustoilla tämä ei välttämättä ole yhtä yksinkertainen, joten navigointi voi olla tahmeaa käyttämällä HUD-tyyppistä palkkia.
Joten mikä käyttöliittymä sinun pitäisi käyttää sivustossasi?
Ilmeisesti jokainen käyttöliittymä ei ole sopiva kaikentyyppisille verkkosivustoille, joten kysy itseltäsi peruskysymyksiä: Kuka on kohdeyleisösi? Mitä yrität "myydä"? Mitä vaikutelmia haluat antaa? Nuoret käyttävät todennäköisemmin kosketusnäyttöjä kuin vanhemmat väestöryhmät, jotka todennäköisesti käyttävät työpöytää, mutta silti voivat tarvita suurempia painikkeita ja selkeämpi käyttöliittymä. Ei ole mitään järkeä luoda innovatiivisinta UI: ta, joka voidaan kuvitella, jos kukaan ei ymmärrä, miten sitä voidaan käyttää. Muista siis luoda käyttöliittymä, jonka käyttäjä voi tarkastella ja tietää välittömästi.
Radial-valikko
Radiaalinen valikko, joka tunnetaan myös nimellä piirakka, on pyöreä kontekstivalikko, joka käyttää valintatyökalua monisuuntaisen kontekstin sijasta korkeutta tai leveyttä.
Tämä on hieno intuitiivinen muoto, joka estää käyttäjiä menemästä kymmeniin alivalikoihin. Toinen etu on se, että kosketusnäytön käyttäjällä on paremmat mahdollisuudet hallita tavallisia pudotuslistoja, koska suuntaohjaus on tarkempi kuin napautus. Radiaalisten valikoiden käyttö lomakkeissa ja verkkosivustoissa voi merkittävästi parantaa kosketusnäytön käyttäjien kokemusta verkkosivustolla ja ulottua pikkukuvakkeisiin, kuten pelikonsoleihin, ja joskus radial-valikoita käytetään usein, koska se mahdollistaa pelien helposti siirrettävän tietokoneeseen. Koska tällaiset työpöydän käyttäjät eivät häviä, koska säteittäiset valikot voivat yksinkertaistaa pitkiä luetteloita yksinkertaisiin luokkiin, mikä lisää verkkosivuilla käytettävää helppokäyttöisyyttä tai tuottavuutta.
Radiaaliset valikot ovat loistava tapa kerätä kontekstiherkkiä tietoja. Yksi esimerkki tästä on napsauttamalla ruoan kohdalla olevaa ruokalajia ja antamalla mahdollisuus retweetingin, reseptin linkin, ainesosaluettelon tai kuvan tallentamiseen. Sinun on kuitenkin oltava varovainen, että valikko on edelleen käytettävissä ja yksinkertainen, muuten voit helposti ohittaa käyttäjän varsinkin, kun yhdistät symbolit ja sanat samaan säteittäiseen valikkoon. Radial-valikot ovat paljon helpommin käytettäviä, kun ne ovat staattisia eikä dynaamisia, koska ne voivat aiheuttaa vaikeuksia kohteen valintaan, kuten esimerkiksi sivustoihin Phong , tässä tapauksessa erityisesti silloin, kun hiirtä käytetään kohdistimen seurannan ansiosta, se ei ole erityisen intuitiivinen.
Skeuomorphism
Skeuomorfinen muotoilu jäljittelee arjen esineen ulkoasua ja toimivuutta, jotta luodaan intuitiivinen käyttöliittymä, joka on äskettäin poistunut muodista, varsinkin kun Scott Forstall erosi Applestä ja Sir Jony Iven tasainen muotoilu otti iOS: n ja todennäköisesti OS X: n tulevaisuudessa. Skeuomorfismi oli ollut suuri osa Applen pyrkimystä kohti intuitiivisempaa muotoilua, äskettäin Contacts on Mac on suunniteltu todellisen osoitekirjan tai Newsstand ja iBooks iOS on todellinen kirjahyllyjä. Tämä muotoilu on yksi, joka ilmeisestikin hyödyttää käyttöliittymän käyttäjiä, koska meillä ei ole vuorovaikutusta ympäröivän maailman kanssa kohdistimella.
Perehdyttäminen lisää intuitiivisuutta käytettäessä mitä tahansa käyttöliittymää, joka on skeuomorfisuuden kohta, tuomaan ylimääräisen ulottuvuuden pereydyttämiseen liittämällä voimia todellisiin kohteisiin, jotta käyttäjä välittömästi osaa olla vuorovaikutuksessa sen kanssa. Menestyvä skeuomorfinen muotoilu tarkoittaa, että vain katselemalla verkkosivuilla tiedät, mistä kohteesta / sivusta käytetään, jolloin hiiren osoitinpiirustukset ja linkit korostuvat vanhentuneiksi.
Valitse käyttöliittymä
Tämä on molempien yhdistelmä, jossa koko käyttöliittymä muodostaa yksinkertaisen numeron; malli muistuttaa säteittäistä valikkoa, mutta sen sijaan, että saranaan keskeltä, valittaessa siitä, valitsin pyörii yhdeksi valintapisteeksi. Tämä on erittäin tehokasta esimerkiksi musiikissa, jossa valitsimia käytetään usein kappaleen ja ohjaustilavuuden sekoittamiseen. Verkkotunnuksen tapauksessa SHSK'H he käyttävät muokatun soittoäänen tyyppiä valitsemaan haluamansa kappaleen.
Minimalistinen liike
Minimalismi on, jos verkkosivusto on riisuttu takaisin paljaisiin olennaisiin elementteihin. Tämä on hyvä mobiilikäyttäjille, koska se vähentää latausaikoja ja tiedonsiirtoa sekä antaa käyttäjälle pääsyn kaikkiin tarvittaviin tietoihin selkeässä käyttöliittymässä, joka on helpompi käyttää pienempiä resoluutioita varten. Nykyinen minimalismi on mennyt yli irrottautumisen sivustoja paljain perusasiat, ja on muodostanut uuden tyyli tunnetaan tasainen muotoilu. Tämä riippuu siitä, että intuitiota ei enää tarvita suunnittelussa, koska rajapinnat ja niiden käyttö on tullut niin tärkeäksi elämäksi, että muotoilu voi siirtyä enemmän kuin kertoa käyttäjille mitä tehdä, käyttöliittymä voi lopulta olla työkalu eikä kaksinkertaista mentori. Litteä muotoilu on jo pitkään ollut luonteeltaan rohkeita lohkojen värejä, mutta iOS7: n käyttöönotolla kaltevuudet ovat ottaneet paikkansa rajaton, tasomaisen muotoilun maailmassa.
Lopuksi lopetan tämän artikkelin sivustolla, joka tekee asioita hieman eri tavalla. Thibaud on luova kehittäjä, joka on suunnitellut portfoliokannan rakentajan, joka tunnetaan nimellä Pikibox. Verkkosivusto on erittäin ystävällinen, mutta se ei haittaa sen pääsyä työpöydän käyttäjille, pienemmillä kosketusnäytöillä, mutta käyttäjä lähetetään tarkennetulle uudelleenohjaukselle mobiilirajapinnalla.
Yksinkertainen muotoilu toimii erinomaisesti näyttäen koko salkun ammattimaisella tavalla säilyttäen samalla hauskan uuden ilmeen, joka on erittäin intuitiivinen. Tietenkin suuri osa suunnittelusta on käyttäjän käsissä, pystyy muuttamaan navigoinnin sijaintia ja säätämään sitä, miten sitä käytetään spatiaalisesti, mikä jotkut sanoisivat, ei ole täsmälleen suunnittelun valinta. Työpöydän versio tulee neljään tyyliin, ja pyydän teitä pelaamaan heidän kanssaan, ja tee omat johtopäätökset siitä, onko tämä yksinkertaisesti epämääräinen tai erittäin luovuttava.
Mitä kompromisseja olet tehnyt kosketusnäytöksi? Onko se hetki menossa? Kerro meille kommentit.
Esitetty kuva / pikkukuva, kosketa kuvaa kautta Shutterstock.