Parhaat käytännöt 6 yleiselle käyttöliittymän elementille
Tiettyjen käyttöliittymän elementtien ja toimivuuden ulkonäkö ja käytettävyys ovat ratkaisevia kaikkien nykyisten markkinoiden verkkosivujen onnistumiselle.
Tutkimukset ovat osoittaneet, että jopa sekunnin viivästyminen käyttäjän ajattelussa heikentää heidän käsitystään ja kiinnostustaan verkkosivustolle ja lopulta alentaa verkkosivuston muuntokurssia.
Tietyissä markkinarakoissa ja toimialoilla, joilla on käyttöliittymän elementtejä, jotka eivät ole itsestään selvillä, voivat olla täysin hyväksyttäviä. Bloggaaminen ja web-kehitystoiminta ovat täydellisiä esimerkkejä.
Mutta kun suunnittelemme käyttöliittymiä ei-tech-osaaville yleisöille - mikä on yleensä tapaus asiakkaiden työtä - meidän on varmistettava, että tietyt UI-elementit eivät kulje liian kaukana siitä, mitä käyttäjät ovat tottuneet.
Tässä artikkelissa käsitellään kuutta käyttöliittymäelementtiä ja käyttötapoja koskevat käyttökokemukset ja käyttökelpoisuuspiirteet , jotta kehittäjät voivat luoda käyttäjäkokemuksia, jotka ovat sekä kauniita että yksinkertaisia.
1. Hakukentän ulkonäkö
Suuret, tietotekniset tai tuotekuvaiset verkkosivustot haussa ovat kuninkaita. Käyttäjät yleensä hylkäävät tavanomaiset navigointipalkit hakukenttään.
Hakukenttään, joka ei ole välittömästi näkyvissä, on yksi kahdesta vaikutuksesta: 1) käyttäjä ei ota käyttöön mitään hakutoimintoa tai 2) käyttäjä löytää hakutoiminnon viivästyneen ja mahdollisesti ärsyttävän ajan jälkeen.
Varmista, että sivustosi hakukenttä on helppo nähdä. Tummat taustat ja hieno grafiikka heikentävät käytettävyyttä , joten pitää se valkoisena tai vaaleanharmaana parhaiten. Varmista myös, että hakukenttä on riittävän suuri suhteessa sivun muihin tärkeisiin elementteihin, säilyttäen sen sijainnin visuaalisessa hierarkiassa.
Hakukenttä on Verkkotunnus IP: llä sopii verkkosivuston visuaaliseen teemaan hienosti, on oranssia ja graafisesti yhdenmukaista ympäristöönsä. Mutta jos tätä hoitoa saatiin hakukenttään vilkkaammalla verkkosivustolla, se olisi todennäköisesti vaikea havaita.
Suunnittelu ei ole esteenä Domain by IP: lle, koska sivustolla on yksi toiminto: haku, joka on aivan sivun keskellä. Lisäksi, koska se on teknologiakysymyksessä, sen kehittäjillä on vähemmän kannustin pitää kiinni yleissopimuksesta. Mutta tämä luovuuden taso olisi vältettävä suurilla verkkosivustoilla , joiden kohdeyleisö ei ehkä ole niin teknisesti tyytyväinen.
Seikkailuaika sillä välin sen hakulaatikko on valkoinen, kätevä koko ja helppo löytää sivulta:
Vaikka se on vieraalla kielellä, Adventure Timeilla on hyvin selkeä hakukenttä, jopa englanninkielisille käyttäjille. Laatikon kokoa ja väriä täydentää suurennuslasikuvio, josta on tullut online-haun yleinen symboli. Käyttäjä, joka etsii tätä toimintoa, ei ole ongelma tässä.
Tätä mallia olisi noudatettava kaikissa projekteissa, jotka kohdistuvat monipuoliseen käyttäjäkuntaan.
Lue lisää:
2. selvästi merkitty kokoontaitettava / laajennettava sisältö
Sivustot hyötyvät kokoontaitettavista paneeleista ja pudotusvalikoista, koska ne tekevät puhtaampia ja vähemmän rasittavia asetteluja. Näiden rajapintoelementtien piilotettu sisältö voi kuitenkin heikentää sivuston käytettävyyttä, jos niiden läsnäoloa ei ole selvästi osoitettu.
Kun käyttäjä napsauttaa paljain linkin tai -painikkeen, he odottavat siirtyvän uuteen sivuun. Mutta kun käyttäjä napsauttaa linkkiä tai -painiketta, jolla on piilotettu sisältöindikaattori, he odottavat, että uusi sisältö näytetään välittömästi (JavaScriptin tai AJAX: n kautta) ja hän voi piilottaa sen myöhemmin. Siten verkkosivustolla tulisi jyrkästi erottaa normaalit linkit ja linkit, jotka paljastavat uuden sisällön JavaScriptin kautta .
Yhteensopiva sisältö, kuten sivupaneeleissa ja valikkopuissa, voidaan osoittaa nuolella, kolmiolla tai Windows Explorerin kaltaisella plus / miinusindikaattorilla. Paneeli, jonka sisään kirjautuneet käyttäjät näkevät CSS Globe osoittaa selvästi, että se on kokoontaitettavissa:
Alla on sama sivu sen jälkeen, kun paneeli on laajennettu paljastamaan toimintojen joukon:
Kun paneelin sisältö laajenee nyt, nuoli pyöritetään 90 astetta, mikä viittaa siihen, että sama sisältö voidaan nyt piilottaa tai pilata. Tätä samaa periaatetta voidaan soveltaa myös pudotusvalikkoihin tai lentokoneiden valikkoihin, vaikka ne eivät vaatisi pyörivää nuolta. Yllättäen tämä ominaisuus jätetään usein myös ammattimaisesti suunnitelluilla verkkosivustoilla.
Lue lisää:
3. AJAX-latausilmaisin
Kun parannat käyttökokemusta lataamalla sisältöä asynkronisilla pyynnöillä, ilmoittakaa käyttäjälle, että AJAX-pyyntö käsitellään. Ilman tätä indikaattoria käyttäjä voi luopua odottamaan tai ihmetellä, miksi mitään ei ole tapahtunut vastauksena heidän napsautukseensa.
Voit tehdä tämän monella tavalla; yksi tapa on korostaa latausta tai vastaavaa viestiä sen sijainnin lähellä tai lähellä sitä, missä toiminta tapahtuu, kuten Googlen RSS-lukija tekee:
Kuvaruudun yläosassa on keltainen korostettu teksti, joka näkyy, kun napsautetaan "Merkitse kaikki luettuina" -painiketta ja kerro käyttäjälle, että jotain tapahtuu.
Toinen tapa osoittaa tämä on animaatio tai kiertävä tuntilasi, joka olisi tuttua Windows-käyttäjille. Animoitua indikaattoria käytetään useilla verkkosivustoilla, mukaan lukien Viserrys , jossa käyttäjät klikkaavat "Lisää" -painiketta katselemaan vanhempia tweettejä:
Kun painiketta painetaan, ja riippuen asiakkaan yhteyden nopeudesta palvelimelle, ilmestyy tuttu animoitu pyörteinen grafiikka, joka kertoo käyttäjälle, että heidän pyyntönsä käsitellään.
AJAX-latausgrafiikka on saatavana ilmaiseksi useista eri verkkosivustoista, joista monet mahdollistavat grafiikan kokoa, kokoa, väriä ja muita vaihtoehtoja.
Tällainen visuaalinen indikaattori on tärkeä asynkronisille pyynnöille, jotka eivät tarjoa asiakaspuolisia vihjeitä siitä, mikä toiminta latautuu.
AJAX: n kaltaista indikaattoria voidaan käyttää myös AJAX-toimintojen käyttämättömien AJAX-toimintojen tehostamiseen ja lataamiseen kuluvan ajan. Tämä voi sisältää valokuvagallerian, joka lataa suuremman kuvan, kun pikkukuvia napsautetaan.
AJAX-latausgrafiikka ja muut indikaattorit eivät itse asiassa nopeuta sivua, mutta ne parantavat "tuntemaa" latausaikaa , joka on usein yhtä arvokasta kuin varsinaisen latausaikan parantaminen.
Lue lisää:
4. Ostoskorin sijainti ja kirjautumis- ja rekisteritoiminnot
Kun käyttäjät tekevät sivun "Ostoskori" -painiketta tai "Rekisteröi nyt" -linkkiä, sivun oikeassa yläkulmassa on ensimmäinen tarkasteltava paikka. Ellei sinulla ole pakottavia syitä tähän, pidä tämä toiminto tuttuasi paikkaan tai muuten riski hidastaa ja häiritä käyttökokemusta.
Vaihtoehtoja ja toimintoja, jotka kuuluvat tähän luokkaan, ovat "View cart", "Check out", "Kirjaudu sisään", "Log out", "Register", "Lähetä linkki", "Unohditko salasanasi?" Ja jopa "Ota yhteyttä. "Tämä viimeinen kohde olisi tavallisesti viimeinen horisontaalisessa navigointipalkissa.
TasteBook sisältää neljä tällaista linkkiä sen oikeassa yläkulmassa:
Maui Divers korut on toinen hyvä esimerkki ja sisältää myös ostoskärryn graafisen:
5. Loppumispäivän muotoilu luottokorttimuotoilla
Kun lomake pyytää luottokortin vanhentumispäivää, muoto on aina sama: kuukausi, jota edustaa kaksi numeroa, jota seuraa vuosi, jota edustaa kaksi tai neljä numeroa (esim. 03/11 tai 03/2011). Nelinumeroinen muoto on, miten luottokortilla näkyy vanhentumispäivä.
Paras tapa siis kerätä nämä tiedot ja vahvistaa käyttäjäkokemusta on käyttää kahta erillistä valintaruutua, yksi kuukausi ja toinen vuodeksi. Älä anna käyttäjän syöttää vanhentumispäivää yhdellä tekstilaatikolla, vaikka annat ohjeita.
Tässä on hyvä esimerkki maksusivu Maui Divers korut:
Ja tässä on esimerkki huonosti suunnitellusta vanhentumispäiväkentästä:
Lisäksi kuukausivaihtoehdon ei pitäisi näyttää kuukausien nimet, vaan sen sijaan pitäisi luetella numerot 01 - 12. Ei ole mitään syytä hidastaa käyttäjiä tekemällä heistä selville, että "08" tarkoittaa "elokuu".
6. helposti tunnistettavissa olevat linkit
Tämä ei tule koskaan olla ongelma, mutta valitettavasti jotkin verkkosivustot eivät vieläkään selvästi eroa linkkien ja säännöllisen tekstin välillä pääosassa.
Useimmissa tapauksissa paras tapa ilmaista tämä ero on tehdä linkit eri väristä ja korostaa niitä. Joissakin tapauksissa riittää voimakas kontrastiväri; mutta vain alleviivaamalla tai pelkästään väriä vaihtamalla hieman harvoin riittää ja usein heikentää saavutettavuutta.
Cameron.io tekee tämän eron hyvin:
Nämä linkit eivät olisi yhtä näkyviä, jos ne olisivat vain alleviivattuja mutta eivät muuttuneet väreillä. Et suunnittele painiketta, joka ei näyttänyt napinpitäjältä, joten miksi annettaisiin tekstiyhteyksien sekoittuminen päärunkoon? Koska useimmat käyttäjät tekevät tekstiä verkossa, suunnittelijoiden olisi varmistettava, että kaikki linkit ovat tunnistettavissa jo kauan ennen kuin hiiri rullataan niiden päälle.
Lue lisää:
johtopäätös
Kaikki tässä artikkelissa käsitellyt käyttöliittymäelementit ja -toiminnot ovat ratkaisevia sivuston käytettävyyden kannalta ja niillä on tärkeä rooli käyttäjien käsityksessä brändissänne.
Monet pienet lisälaitteet voivat tehdä suuria eroja havaitussa nopeudessa ja voivat pitää käyttäjät turhautuneina tai epämukavina.
Tee käyttöliittymän elementit yksinkertaisiksi ja virtaviivaksi ja noudatat mahdollisuuksien mukaan yleissopimuksia. Näet poistettujen poistumisprosenttien määrää, parempia tuloksia ja paluuta liikennettä jatkuvasti.
Kirjoittanut yksinomaan WDD Louis Lazaris, freelance-kirjailija ja web-kehittäjä. Louis juoksee Vaikuttavat webs , jossa hän lähettää artikkeleita ja tutoriaaleja web-suunnittelussa.
Kuinka jotkin näistä tai muista käyttöliittymän elementeistä voitaisiin parantaa? Jaa ajatuksesi alla oleviin kommentteihin.