Kuten web-suunnittelijat Yritämme jatkuvasti luoda upean UX-kokemuksen ja auttaa käyttäjiä saavuttamaan tavoitteensa. Päivittäisessä työssä käytämme monenlaisia ​​yhteisiä malleja ja trendejä. Kokemukseni mukaan olen nähnyt, kuinka nuo mallit ja trendit voivat helposti ohjata asiakkaita ja suunnittelijoita / kehittäjiä väärään suuntaan. Ei ole mikään salaisuus, että silloin tällöin me kaikki menemme hieman raiteilta asioilla, jotka näyttävät näkevän uskomaton . Myönnän, että olen pudonnut noihin ansoihin monta kertaa, olen päättänyt luoda jotain visuaalisesti houkuttelevaa ja uhrannut sen käytettävyyden. Miksi tein sen? Oletin tämän hetken Vau tapahtuisi ja se houkuttelisi maagisesti käyttäjää. Toivoin tämän vaikutuksen Vau se aiheuttaisi pitkän vaikutuksen. Juhlallinen hetki tuli, kun huomasin, että käyttäjilläni oli vaikeuksia ymmärtää luomaani käyttöliittymää ja josta olin erittäin ylpeä. Joskus opit vaikeita tapoja.

Olen oppinut, että välttääksemme erittäin kuopallisen matkan käyttäjille, meidän on aina kysyttävä itseltämme, mikä on luomamme käyttöliittymän kiiltävän pinnan alla. On syytä lopettaa, ennen kuin pidät kaikista malleista tai trendeistä ja mietit niiden tarjoamaa arvoa. Kuten Kate Rutter loistavasti sanoi, 'ruma, mutta hyödyllinen trumpetti kaunis, mutta merkityksetön'.

Älkää ymmärtäkö minua väärin - en ehdottaa, ettemme tekisi asioita kauniiksi, ehdotan, että keskitymme tekemään asioista kauniita ja puettavia. Avain mallien ja suuntausten kanssa on löytää tasapaino hyvältä näyttävän ja sen takana olevan arvon välillä.

Tässä artikkelissa luetellaan useita yleisiä UX-virheitä, jotka näen joka päivä. Vaikka kaikki eivät ole niin sanottuja huonoja, ne voivat olla vaarallisia, ellei niitä toteuteta varoen. Jaan myös vähän tietoa siitä, miten voit parantaa käytettävyyttä näiden trendien toteuttamisessa tai jopa ehdottaa kiertotapaa. Tarkasteltaessa luetteloa ei ole mitään muuta lisättävää.

Yleinen virhe # 1: Suuret, kiinteät otsikot

Näemme yhä enemmän isoja ja korkeita otsikoita - kirjanmerkillä merkittyjä lohkoja ja valikoita, jotka ovat kiinteästi sijoitettuja ja vievät suuren ja merkittävän osan katseluikkunasta. Ne tarttuvat alkuun ja estävät usein niiden alapuolella olevan sisällön. Olen nähnyt otsikot korkean tuotannon verkkosivustoilla, jotka ovat yli 150 pikseliä korkeita, mutta onko niiden takana todellista arvoa? Saatan pakottaa sitä hieman, mutta suuret kiinteät otsikot muistuttavat minua pelottavista ja nyt vanhoista HTML-kehyksistä. Huh huh!

Kiinteillä elementeillä voi olla todellisia etuja , mutta ole varovainen, kun käsittelet heitä - on pidettävä mielessä useita tärkeitä asioita. Kun otat käyttöön kiinteitä otsikoita, pidä mielessä muutama yleinen virhe, joita haluat välttää mahdollisimman paljon:

Liian iso ollakseen mukava

Jos päätös suunnitella iso, kiinteä otsikko on jo tehty, suorita joitain testejä saadaksesi selville, onko 'iso' 'liian suuri'. Varmista, ettet mene yli laidan ja laita paljon sisältöä otsikkoon, mikä johtaa liian korkeaan elementtiin. Kun otsikko on paikallaan, selaamisen tulisi olla nopeaa ja kätevää käyttäjille. Jos olet epävarma otsikon todellisesta koosta, yritä tehdä siitä pienempi uhraamatta liikaa visuaaliseen vetoomukseen ja brändäykseen. Hyvän tasapainon löytämättä jättäminen voi johtaa klaustrofobiseen kokemukseen käyttäjillesi ja jättää hyvin vähän tilaa ydinsisällölle.

Viime vuonna olen työskennellyt projektissa, jossa asiakas vaati kiinteää navigointia työpöydän versiossa. Silloinkin kun palkki ei ollut erityisen korkea, pelkäsin, että jotkut käyttäjät saattavat tuntea klaustrofobisen olonsa lukittuaan. Ratkaisuni oli yksinkertainen - antamalla siirtymispalkille hieman läpinäkyvyyttä CSS: n avulla, käyttäjät näkivät palkin läpi, mikä teki sisältöalueesta suuremman. Tässä on vähän CSS-koodia, miksi et yritä nähdä, toimiiko se myös sinulle?

.header { opacity: 0.9; }

Tämän esimerkin sain selville siellä, kun törmäsin äskettäin Roger Federerin ATP-profiilisivu .

Sen kiinteä otsikko on noin 110 kuvapistettä pitkä, ja kun vierität alas, näkyviin tulee alinavigointi, joka tekee otsikosta 160 kuvapisteen korkean. Se on yli 30% MacBook Pron koko sivun korkeudesta telakan ollessa auki.

Ei korjaa ongelmaa mobiililaitteella

Toki monet käyttäjät käyttävät melko suurta näyttöä ja kiinteät valikot voivat olla etu suurissa resoluutioissa, mutta entä pienemmät resoluutiot ja mobiilimaailma? Muista, että merkittävä osa käyttäjistäsi käyttää pientä tarkkuutta omaavaa laitetta, joten mobiililaitteille vaihtoehto position: fixed luultavasti ei paras ratkaisu. Onneksi, reagoivia tekniikoita antaa meille mahdollisuuden suunnitella erilainen ratkaisu ja pitää kiinni kiinteästä otsikosta vain suurille resoluutioille. Lähestymistapa 'ensin matkapuhelimella' antaa meille monia vastauksia - se alkaa mobiilitarkkuudella, vain olennaisella sisällöllä, ja jatkuu sieltä.

Kahvi poliisin kanssa sillä on myös kiinteä otsikko, mutta pienempi - alle 80 pikseliä.

Voidaan sanoa, että se on hyvä ratkaisu suurissa resoluutioissa, koska se mahdollistaa helpon ja nopean navigoinnin. Pienillä tarkkuuksilla otsikko on kiinteä ja vie huomattavan määrän tilaa laitteen näytöllä. Suosittelen, ettet käytä kiinteää otsikkoa matkapuhelimessa, vaan käytä kiinteää hampurilaiskuvaketta, joka voi avata valikon napauttamalla. Vaikka tämä malli ei ratkaise universaalia ongelmaa, se vapauttaa paljon tilaa. Älypuhelimissa ja tableteissa tila voi olla erittäin kallis.

Yleinen virhe # 2: Ohut kirjasimet

Ohut kirjasimet näyttävät olevan kaikkialla - lukuisia alkuperäisiä mobiilisovelluksia ja moderneja verkkosivustoja. Näyttötekniikan kehittyessä ja a renderointi parannettu, monet suunnittelijat valitsevat käyttävänsä hienoja tai ohuita kirjasimia. Ne ovat tyylikkäitä, tuoreita ja uusia. Ohut fontit voivat kuitenkin vaikuttaa luettavuuteen ja niistä voi tulla suuri ongelma. Muista, että kaikki eivät tarkastele verkkosivustoasi näytöllä, joka renderöi fontin niin kuin pitäisi. Esimerkiksi olen huomannut, että ohut tyyppi on hyvin vaikea lukea iPhonellani ja iPadillani verkkokalvonäytöllä. Ennen kuin ajattelemme, mikä kirjasinlaji näyttää ja miltä tuntuu, otetaan askel taaksepäin sekunnin ajan.

Niistä Apple Human Interface Guides :

Ennen kaikkea tekstin on oltava luettavissa. Jos käyttäjät eivät pysty lukemaan sovelluksesi sanoja, ei ole väliä kuinka kaunis typografiasi on.

Apple viittaa mobiilisovelluksiin, mutta samaa periaatetta voidaan soveltaa kaikkiin verkkosivustoihin. Kuten Colm Roche sanoi, luettavuus ≠ valinnainen , mutta välttämätön hyvän käytettävyyden kannalta. Ei ole mitään järkeä laittaa sisältöä verkkosivustolle, jos suurin osa käyttäjistäsi tuskin lukee sitä, luuletko?

Tässä ovat yleisimmät virheet, joista haluat olla tietoinen ennen kirjasintyyppien asettamista ruokavalioon:

Käytä ohutta typografiaa, koska Kyllä

Kuten minkä tahansa trendin kohdalla, on vaarallista tehdä tai käyttää jotain, koska muut tekevät sen. Fonttien ei pitäisi vain näyttää hyvältä. Ensinnäkin niiden tulisi olla luettavissa ja askelta hyvään käytettävyyteen. Ohut tyypin käyttö vain siksi, että se näyttää hyvältä, on taaksepäin. Tässä erinomaisessa keskustelussa Täydellisempi typografia , Tim Brown puhuu makeasta paikasta, jossa typografia laulaa. Tämä makea paikka on yhdistelmä kokoa, painoa ja väriä, kun asetat perustan verkkosivustollesi.

Varmista, että löydät hyvän fontin sisällön rungolle, joka osuu kyseiseen makeaan kohtaan, suorittamalla muutama testi eri ympäristöissä. Mikä johtaa meidät seuraavaan virheeseen, jota kannattaa välttää:

Suurten laitteiden luettavuuden testaaminen epäonnistui

Ohut tyyppi saattaa näyttää hyvältä näytöltäsi, eikä sinulla ole vaikeuksia sen lukemisessa, mutta pidä se mielessä et ole käyttäjäsi . Investoi käytettävyystestaukseen saadaksesi selville, ovatko todelliset käyttäjät tyytyväisiä tärkeimpien laitteiden typografiaan: pöytätietokoneet, kannettavat tietokoneet, tabletit ja älypuhelimet. Kun teet enemmän mobiilitestauksia, anna osallistujiesi käyttää verkkosivustoasi mobiililaitteilla päivänvalossa - todellisilla käyttäjilläsi ei ole aina ihanteellisia olosuhteita liikkua verkkosivustollasi. Jos joudut lukemaan jotain mobiililaitteesta aurinkoisena päivänä, tiedät todennäköisesti kuinka vaikeaa se on. Jos päätät käyttää ohutta kirjasintyyppiä verkkosivustollasi, on helppo tapa mukauttaa se mobiilikäyttäjille. Tässä on ratkaisu, jonka näin äskettäin verkkosivustolla:

Tammi se tekee hyvää työtä sopeutuen käyttäjien tarpeisiin - työpöydän tarkkuudella, sen H1-otsikko on hyvin ohut. Koska otsikko on suuri ja sillä on hyvä värikontrasti, epäilen, että luettavuus ei kärsi. Matkapuhelimissa, joissa otsikkokoko on huomattavasti pienempi, paino on hieman paksumpi, mikä helpottaa luettavuutta. He ovat selvästikin kohdanneet luettavuusongelmia, kun on kyse ohuista kirjasimista pienikokoisina, ja ottaneet käyttöön suuremman fontin painon mediakyselyt . Hänen ratkaisunsa oli yksinkertainen, mutta erittäin tehokas.

Yleinen virhe # 3: Matala kontrasti

Pienestä kontrastista on tullut trendi käyttöliittymäsuunnittelussa viime vuosina. Olemme jo puhuneet kirjasimista, jotka luovat matalan kontrastin, mutta on olemassa yksi isompi ansa, johon voisit pudota: ohuen kirjasimen ja matalan värikontrastin yhdistelmä saa käyttäjät naarmuun päänsä ja miettimään. Olemme menettäneet mielemme? . Tietysti kaikki pienet kontrastit eivät ole huonoja, se voi jopa lisätä visuaalista houkuttelevuutta, jos suunnittelet huolellisesti. Mutta kaikkien UX-virheiden tapauksessa on tärkeää, ettet liioittele sitä ja ajattele käytettävyyttä.

Pari suurta virhettä, jotka haluat välttää kontrastia käsiteltäessä, ovat:

Matala värikontrasti kehon sisällössä

Vaikka vähäinen värikontrasti ei ole yksinomaan huono, sillä voi olla huono vaikutus verkkosivustosi käytettävyyteen ja se voi vaikeuttaa joidenkin käyttäjien lukemista. Jos tämä artikkeli innostaa sinua lisäämään värikontrastia ainakin yhdessä asiassa, tee siitä esineeksi rungon sisältö. Se on luultavasti vähiten suotuisa alue kokeilla.

Cool Springs Taloudellinen käyttää sisällön runkotekstissä ohutta Helvetican muunnosta. Ja vaikka se näyttää tyylikkäältä ja vaikuttaa esteettisesti käyttäjille, sitä on vaikea lukea monilla alustoilla.

Tein pikatestin verkkokalvonäytöllä varustetulla MacBook Prolla sekä verkkokalvonäytöllä varustetulla iPhonella ja iPadilla. Kuvakaappaus on peräisin MacBook Prostani, mikä paljastaa kontrasti- ja luettavuusongelmia. Minulla oli vaikea lukea verkkosivuston tekstiä kaikilla laitteillani.

Älä testaa kontrastia

Harkitse hieman käyttäjän testaamista ongelmien välttämiseksi tien päässä. Itse kuulen jo joidenkin asiakkaiden ja kollegoideni sanovan 'Bojan, käyttäjätestit ovat aikaa vieviä ja kalliita'. Ne voivat olla, mutta verkkosivustosi kontrastin testaaminen on liian kauan. Aloita kehon sisällöstä ja jatka sitten ylöspäin. On mukava työkalu nimeltä Colorable, jolla voit asettaa oikean tekstikontrastin WCAG: n esteettömyysohjeiden mukaisesti. Kun tiedät, että käytät oikeaa kontrastia, säädä muita värejä verkkosivustollasi ja suorita pikatestit varmistaaksesi, että useimmilla käyttäjilläsi on kivuton kokemus. Epäilen matalan kontrastin aiheuttavan kapinaa, mutta se voi turhauttaa monia käyttäjiäsi.

Yleinen virhe # 4: Siirtymismääräraha

Toinen suuntaus, jota näemme viime aikoina paljon, on siirtymään joutuminen. Tämän trendin toteuttavat verkkosivustot hallitsevat vieritä (yleensä JavaScriptillä) ja ohittaa verkkoselaimen perustoiminnon. Käyttäjä ei voi enää hallita sivun vieritystä eikä voi ennustaa sen käyttäytymistä, mikä voi helposti johtaa sekaannukseen ja turhautumiseen. Se on riskialtis koe, joka voi vahingoittaa käytettävyyttä, joten suosittelen hyvin varovasti.

Jos olet vakuuttunut tämän toteuttamisesta, sinun on yritettävä välttää seuraava virhe:

Käytä tätä trendiä vain siksi, että se on suosittu

Jotkut verkkosivustot voivat päästä eroon hallitsemalla vierityksen, mutta se ei takaa, että myös verkkosivustosi voi. Suuntauksia ja malleja ei voida sokeasti seurata ja toteuttaa. Esimerkiksi näemme, että monet suunnittelijat seuraavat, mitä Apple tekee verkkosivustollaan ja sivuilta toiselle vieritystoiminnolla, parallaksivaikutuksilla ja korkean resoluution kuvilla useista laitteista. Applella on omat syyt, omat käyttäjät, käsitteet ja ainutlaatuinen sisältö. Ja koska jokaisella verkkosivustolla on ainutlaatuisia ongelmia, sinulla on oltava myös räätälöityjä ratkaisuja näihin ongelmiin.

Älä testaa todellisten käyttäjien kanssa

Testaa verkkosivustosi prototyypit omien käyttäjien kanssa, jotta vältät ongelmia lainaamalla ideoita tai malleja. Yksinkertainen käytettävyystestaus paljastaa, onko hallitun vierityksen toteuttaminen mahdollista vai ei. Tämän testaaminen antaa varmasti vastauksen moniin kysymyksiin ja antaa vihjeitä siitä, miten voit parantaa ideaasi. Ilman testausta sinulla ei ole mitään tapaa tietää, mihin suuntaan mennä, ja oletuksiin perustuvien verkkosivustojen kehittäminen maksaa usein liian paljon myöhemmin.

Tumblr käyttää tätä verkkosivustollaan. Vaikka niiden toteutus voi olla myös riskialtista, näyttää siltä, ​​että he ymmärtävät yleisönsä, heidän sisällönsä ja konseptinsa tukevat sitä ja että he ovat tyydyttäneet monia käyttäjien tarpeita. Kun käyttäjä yrittää mennä alaspäin, verkkosivusto ohjaa vieritystä, mutta käyttäjä siirtyy sitten verkkosivuston seuraavaan osioon. Sisältö on jaettu moniin osioihin tai lohkoihin, jotka on helppo erottaa ja suuret osoitinpisteet on asetettu sen oikealle puolelle näkymä . Tämän seurauksena Koti se tuntuu suurelta autolta, jonka hallitset, pikemminkin kuin kokeellinen verkkosivusto, jolla on oma mielensä.

Yleinen virhe # 5: Ei tehokasta karusellia

Karusellit ovat hyvin yleisiä verkossa, ja ne ovat olleet pitkään. Vaikka ne ovat tehokkaita, ne voivat myös olla painajaisia, ellei niitä suunnitella ja kehitetä huolellisesti. Käyttäjien painajainen voi olla se, että heillä on vaikeuksia ymmärtää sitä. Painajainen voi olla se, että käyttäjät eivät näe tärkeää sisältöä joissakin diat karusellin.

Karusellit ilman tärkeää sisältöä: ei tehokkain tapa käyttää tilaa verkkosivustollasi Tweet

Monilla karusellilla, joita olen katsonut, on samanlaisia ​​haittoja. Jotkut niistä ovat:

Todellisen arvon puute käyttäjille

Mikä on todellinen arvo, jota karuselli tarjoaa käyttäjillesi? Tehty oikein, karusellin tulisi olla yhteydessä käyttäjiin ja auttaa heitä saavuttamaan tavoitteensa nopeasti ja kivuttomasti. Monta kertaa näen karuselleja, jotka eivät välttämättä tuota lisäarvoa, mutta näyttävät olevan yksinkertaisia ​​koristeita. Tässä on nopea tietovisa, jonka voit tehdä: ota post-it ja kirjoita kolme etua, joita karuselli voi tarjota käyttäjälle. Jos et ajattele kolmea, on hyvä mahdollisuus, että karusellisi tarvitsee enemmän työtä.

Liian monta tai liian vähän dioja karusellilla

Monilla dioilla voi olla kielteinen vaikutus käyttäjiin, ja he voivat yksinkertaisesti jättää karusellin huomiotta. Käytettävyysguru Jakob Nielsen ehdottaa seuraavaa:

Sisällytä viisi tai vähemmän dioja karuselliin, koska käyttäjät eivät todennäköisesti muodosta yhteyttä muihin. Vaikka yli viisi saattaa olla liikaa, alle kolme voi osoittaa, että parempaa ratkaisua suositellaan hyvin. Yksi karusellin tiloista on se, että tarvitset paljon sisältöä, joka on täytetty hyvin pieneen tilaan, mutta vain kahdella dialla, miksi ei näytetä molempia samanaikaisesti ja unohtaa liukuminen yhteen tai toiseen kerrallaan?

Nuolet Edellinen Y Seuraava ja dian osoittimet eivät ole niin ilmeisiä ja / tai käytettävissä.

Varmista, että asetat arvokasta sisältöäsi saataville. Tärkeää tietoa karusellista voidaan piilottaa, jos sen nuolet Seuraava Y Edellinen ne eivät ole ilmeisiä ja liian suuria mukavaan napsautukseen. Voi, älä unohda hanaa - matkapuhelimesi käyttäjät kiittävät sinua siitä.

Joskus karusellissa ei ole nuolia, ja pisteindikaattorit ovat linkkejä hyppyjen välillä. Muista, että sinun on annettava a napauta aluetta tee siitä mukava, napsautettava ja suuri (suosittelen vähintään 35x35 kuvapistettä). Muuten pienet kohteet johtavat erittäin turhauttavaan kohdentamiseen ja käyttäjät lähtevät verkkosivustoltasi.

NET: n verkkosivusto Long Forest -säätiö otsikossa on karuselli kuvia. Omistaa automaattinen toisto ja dioissa on viisi valokuvaa. Nuolet Edellinen Y Seuraava Ne ovat pieniä ja läpinäkyviä, minkä vuoksi niitä on vaikea nähdä ja napsauttaa tai napauttaa. Käytettävällä dialla ei ole indikaattoreita eikä tarroja, jotka osoittavat valokuvan. Kuvat eivät ole linkkejä ja toimivat vain koristeina. Vaikka karusellilla voi olla jotain arvokasta yhteyttä yhteyden muodostamiseen käyttäjään, se jättää varmasti paljon toivomisen varaa.

johtopäätös

Olen luetellut yleisimmät UX-virheet joissakin nykyisissä verkkotrendeissä. Jos olet toteuttanut tai aiot toteuttaa jotain niistä, toivon vilpittömästi, että tämä artikkeli on ollut hyödyllinen sinulle. Käytä [UX-suunnittelijana] parasta harkintasi ja älä pelkää improvisoida, mutta muista aina pitää käyttäjät mielessäsi.

Aloita keskustelu alla. Haluaisin todella lukea kokemuksistasi, näkemyksistäsi tai ehdotuksistasi, miten tehdä asiat paremmin.