Utseendet og brukervennligheten til visse grensesnittelementer og funksjonalitet er avgjørende for å lykkes på noen nettsteder i dagens marked.

Studier har vist at selv en splittet forsinkelse i å tenke på brukerens side vil svekke deres oppfatning og interesse for et nettsted og til slutt redusere nettstedets konverteringsfrekvens.

I enkelte nisjer og næringer kan ha UI-elementer som ikke er åpenbare i deres bruk, være helt akseptable. Blogging og webutvikling er perfekte eksempler.

Men når vi utformer brukergrensesnitt for ikke-teknologiske kunnskapsrike publikum - som vanligvis er tilfelle med klientarbeid - må vi sørge for at visse brukergrensesnitt ikke forstyrrer for langt fra hva brukerne er vant til.

Denne artikkelen diskuterer noen beste praksis og bruksegenskaper av seks brukergrensesnittelementer og konvensjonene for hver, slik at utviklere kan skape brukeropplevelser som er både vakre og enkle.

1. Utseende i søkeboksen

På store informasjonsrike eller produkttunge nettsteder er søk king. Brukere her avgir vanligvis konvensjonelle navigasjonsbjelker til fordel for søkeboksen.

En søkeboks som ikke er umiddelbart synlig, har en av to effekter: 1) brukeren vil anta at ingen søkefunksjonalitet er tilgjengelig, eller 2) brukeren finner søkefunksjonen etter en forsinket og muligens irriterende periode.

Sørg for at søkeboksen på nettstedet ditt er lett å se. Mørke bakgrunner og fancy grafikk vil forringe brukervennligheten , slik at den blir hvit eller lysegrå, er best. Sørg også for at søkeboksen er stor nok i forhold til andre viktige elementer på siden, og dermed opprettholde sin posisjon i det visuelle hierarkiet.

Søkeboksen på Domene etter IP passer godt til det visuelle temaet på nettstedet pent, er oransje og grafisk konsistent med omgivelsene. Men hvis en søkeboks på en busier nettside ble gitt denne behandlingen, ville det nok være vanskelig å få øye på det.

Utformingen er ikke en hindring på Domain by IP fordi nettsiden har en funksjon: søk, som ligger midt på siden. I tillegg, i å være i en teknologisk nisje, har utviklerne mindre incentiv til å holde seg til konvensjonen. Men denne graden av kreativitet bør unngås på større nettsteder , hvis målgrupper ikke er så teknisk kunnskapsrike.

Eventyrtid , i mellomtiden holder søkeboksen hvit, praktisk størrelse og lett å finne på siden:

Til tross for at det er på fremmedspråk, har Adventure Time en veldig klar søkeboks, selv for engelsktalende brukere. Boksenes størrelse og farge suppleres med forstørrelsesglassgrafen, som er blitt universalsymbolet for søk på nettet. En bruker som leter etter denne funksjonaliteten, har ikke noe problem her.

Dette mønsteret bør følges i alle prosjekter som er målrettet mot en mangfoldig brukerbase.

Videre lesning:

2. Klart merket sammenleggbart / utvidbart innhold

Nettsteder har fordeler av sammenleggbare paneler og rullegardinmenyer fordi de gir renere og mindre rotete layouter. Det skjulte innholdet i disse grensesnittelementene kan imidlertid forringe et nettsteds brukervennlighet hvis deres tilstedeværelse ikke er tydelig angitt.

Når en bruker klikker på en bare kobling eller knapp, forventer de å bli tatt til en ny side. Men når en bruker klikker en kobling eller en knapp som har en skjult innholdsindikator, forventer de at det nye innholdet vises øyeblikkelig (via JavaScript eller AJAX) og har muligheten til å gjemme det senere. Dermed bør et nettsted skille skarpt mellom normale koblinger og lenker som avslører nytt innhold via JavaScript .

Sammenleggbart innhold, som i sidepaneler og menytrær, kan angis med en pil, trekant eller Windows Explorer-lignende pluss / minusindikator. Panelet som loggede brukere ser på CSS Globe tydelig indikerer at det er sammenleggbart:

Nedenfor er den samme siden etter at panelet har blitt utvidet for å avsløre en gruppe funksjoner:

Med innholdet i panelet nå utvidet, blir pilen rotert 90 grader, noe som tyder på at det samme innholdet nå kan bli skjult eller kollapset. Det samme prinsippet kan brukes til rullegardinmeny eller flyt-ut menyer, selv om disse ikke krever en roterende pil. Overraskende er denne funksjonen ofte utelatt selv på profesjonelt utformede nettsteder.

Videre lesning:

3. AJAX Lastindikator

Når du forbedrer brukeropplevelsen ved å laste inn innhold gjennom asynkrone forespørsler, må du sørge for å informere brukeren om at en AJAX-forespørsel blir behandlet. Uten denne indikatoren kan brukeren gi opp å vente eller lure på hvorfor ingenting har skjedd som svar på deres klikk.

Du kan oppnå dette på en rekke måter; En måte er å markere en «Laster» eller lignende melding i eller nær stedet der handlingen vil skje, som Googles RSS-leser gjør:

Øverst på skjermbildet er gul markert tekst, som vises når "Mark all as read" -knappen klikkes og forteller brukeren at noe skjer.

En annen måte å indikere dette på er med animasjon eller et roterende timeglass, som vil være kjent for Windows-brukere. En animert indikator brukes på mange nettsteder, inkludert Twitter , der brukerne klikker på en "More" -knapp for å vise eldre tweets:

Når knappen er klikket, og avhengig av hastigheten på klientens forbindelse til serveren, vises en kjent animert hvirvlende grafikk som forteller brukeren at forespørselen deres blir behandlet.

AJAX-laste grafikk er tilgjengelig gratis fra en rekke forskjellige nettsteder, hvorav mange lar deg tilpasse grafikken med størrelse, farge og andre alternativer.

Denne typen visuell indikator er viktig for asynkrone forespørsler som ikke gir klient-side ledetråder om hvilken aktivitet som lastes inn.

En AJAX-lignende indikator kan også brukes til å forbedre ikke-AJAX-funksjonalitet som oppfører seg som AJAX og tar tid å laste. Dette kan inneholde et fotogalleri som laster et større bilde når et miniatyrbilde klikkes.

AJAX-lasting av grafikk og andre indikatorer øker ikke en side, men de forbedrer den "oppfattede" ladetiden , noe som ofte er like verdifull som å forbedre den faktiske belastningstiden.

Videre lesning:

4. Plassering av handlekurv og logg inn og registrer funksjoner

Når brukere skanner en side for "Handlekurv" -knappen eller "Registrer nå" -koblingen, er det første stedet de ser øverst til høyre på siden. Med mindre du har en overbevisende grunn til å gjøre det, behold denne funksjonaliteten på sitt kjente sted, ellers risikerer du å bremse ned og forstyrre brukeropplevelsen.

Valg og funksjoner som vil falle under denne kategorien inkluderer "Se handlevogn", "Sjekk ut", "Logg inn", "Logg ut", "Registrer", "Send link", "Glemt passord?" Og til og med "Kontakt oss. "Denne siste gjenstanden vil vanligvis være den siste i en horisontal navigasjonslinje.

TasteBook inneholder fire slike koblinger i øverste høyre hjørne av oppsettet:


Maui dykkere smykker er et annet godt eksempel og inkluderer også en handlekurv grafisk:

5. Utløpsdatoformat på kredittkortformularer

Når et skjema ber om kredittkortets utløpsdato, er formatet alltid det samme: Måneden, representert ved to sifre, etterfulgt av året, representert med to eller fire sifre (f.eks. 03/11 eller 03/2011). Det firesifrede formatet er hvordan utløpsdatoen vises på selve kredittkortet.

Den beste måten å samle inn denne informasjonen og styrke brukeropplevelsen er å bruke to separate utvalgskasser, en for måneden og den andre for året. Ikke la brukeren angi utløpsdato i en enkelt tekstboks, selv om du gir instruksjoner.

Her er et godt eksempel fra betalingsside av Maui dykkere smykker:

Og her er et eksempel på et dårlig utformet utløpsdatofelt:

Månedvelgeren bør dessuten ikke vise navnene på månedene, men i stedet skal listen tallene 01 til 12. Det er ingen grunn til å senke brukerne ved å få dem til å finne ut at "08" betyr "august".

6. Lett identifiserbare lenker

Dette bør aldri være et problem, men dessverre viser det seg at noen nettsteder ikke klart skiller mellom linker og vanlig tekst i hoveddelen.

I de fleste tilfeller er den beste måten å indikere denne forskjellen på, ved å gjøre koblinger til en annen farge og understreke dem. I noen tilfeller er en sterk kontrastfarge alene nok; men bare understreker eller bare endrer fargen litt er sjelden nok og vil ofte svekke tilgjengeligheten.

Cameron.io gjør dette skillet bra:

Disse koblingene ville ikke være så synlige hvis de bare ble understreket, men ikke endret i farge. Du ville ikke designe en knapp som ikke så ut som en knapp, så hvorfor la tekstkoblinger blande seg i hoveddelen? Som de fleste brukere skanner tekst på nettet, bør designere sikre at alle koblinger er identifiserbare lenge før en mus rulles over dem.

Videre lesning:

Konklusjon

Alle brukergrensesnittelementene og funksjonene som er omtalt i denne artikkelen, er avgjørende for brukervennlighet på nettstedet og spiller viktige roller i brukerens oppfatning av ditt merke.

Mange små forbedringer kan gjøre stor forskjell i oppfattet fart, og kan hindre brukerne i å bli frustrert eller ubehagelig.

Gjør brukergrensesnittelementene enkle og strømlinede, og følg konvensjoner der det er mulig. Du vil se reduserte avvisningsfrekvenser, bedre konverteringer og en jevn flyt av returtrafikk.


Skrevet utelukkende for WDD av Louis Lazaris, frilansskribent og webutvikler. Louis løper Imponerende Webs , hvor han legger inn artikler og opplæringsprogrammer på webdesign.

Hvordan kan noen av disse eller andre brukergrensesnittelementer bli forbedret? Vennligst del dine tanker i kommentarene nedenfor.