Bedste fremgangsmåder til 6 fælles brugergrænseflader
Udseendet og anvendeligheden af visse grænsefladeelementer og funktionalitet er afgørende for succesen på nogen hjemmesider i dagens marked.
Undersøgelser har vist, at selv en deltidsforsinkelse i tankegangen på brugerens side vil svække deres opfattelse og interesse for et websted og i sidste ende reducere hjemmesidenes konverteringsfrekvens.
I visse nicher og brancher kan det være helt acceptabelt at have UI-elementer, som ikke er indlysende i deres brug. Blogging og webudviklingsindustrien er perfekte eksempler.
Men når vi designer brugergrænseflader til ikke-teknologiske kloge målgrupper - hvilket normalt er tilfældet med klientarbejdet - skal vi sikre, at visse brugergrænseelementer ikke går for langt væk fra, hvad brugerne er vant til.
Denne artikel diskuterer nogle bedste praksis og brugervenlighed af seks brugergrænsefladeelementer og konventionerne for hver, så udviklere kan skabe brugeroplevelser, som både er smukke og enkle.
1. Udseende af søgefeltet
På store informationsrige eller produkttunge websites er søgning en konge. Brugere her forbyder normalt konventionelle navigationsstænger til fordel for søgefeltet.
En søgefelt, der ikke er umiddelbart synlig, har en af to effekter: 1) brugeren antager, at der ikke findes nogen søgefunktionalitet, eller 2) brugeren finder søgefunktionen efter en forsinket og muligvis irriterende periode.
Sørg for, at søgefeltet på dit websted er let at se. Mørke baggrunde og fancy grafik vil forringe brugervenlighed , så det er bedst at holde det hvidt eller lysegråt. Sørg også for, at søgefeltet er stort nok i forhold til andre vigtige elementer på siden og dermed opretholde sin position i det visuelle hierarki.
Søgefeltet på Domæne efter IP passer pænt til det visuelle tema på hjemmesiden, er orange og grafisk i overensstemmelse med dens omgivelser. Men hvis en søgefelt på en mere travl hjemmeside blev givet denne behandling, ville det nok være svært at få øje på det.
Designet er ikke en hindring for Domain by IP, fordi hjemmesiden har en funktion: søgning, som er lige midt på siden. Plus, at være i en teknologis niche, dets udviklere har mindre incitament til at holde fast ved konventionen. Men denne grad af kreativitet bør undgås på større websteder , hvis målgrupper måske ikke er så teknisk dygtige.
Eventyr tid , i mellemtiden holder sin søgefelt hvid, bekvemt størrelse og let at finde på siden:
Trods at være på fremmedsprog, har Adventure Time en meget klar søgefelt, selv for engelsktalende brugere. Boksenes størrelse og farve suppleres med forstørrelsesglaset, som er blevet det universelle symbol for online søgning. En bruger, der leder efter denne funktionalitet, har ikke noget problem her.
Dette mønster skal følges i alle projekter rettet mod en forskellig brugergruppe.
Yderligere læsning:
2. Klart markeret sammenklappeligt / udvideligt indhold
Websites nyder godt af sammenfoldelige paneler og drop-down menuer, fordi de giver renere og mindre rystede layouter. Det skjulte indhold i disse grænsefladeelementer kan dog forringe en websteds brugbarhed, hvis deres tilstedeværelse ikke er tydeligt angivet.
Når en bruger klikker på et nøglet link eller en knap, forventer de at blive taget til en ny side. Men når en bruger klikker på et link eller en knap, der har en skjult indholdsindikator, forventer de, at det nye indhold øjeblikkeligt vises (via JavaScript eller AJAX) og har mulighed for at skjule det efterfølgende. Således skal en hjemmeside skelne skelne mellem normale links og links, der afslører nyt indhold via JavaScript .
Sammenklappeligt indhold, f.eks. I sidepaneler og menutræer, kan angives med en pil, trekant eller Windows Stifinder-lignende plus / minusindikator. Panelet, der loggerede brugere ser på CSS Globe tydeligt angiver, at det er sammenklappeligt:
Nedenfor er den samme side, efter at panelet er blevet udvidet for at afsløre en gruppe funktioner:
Med indholdet i panelet, der nu er udvidet, drejes pilen 90 grader, hvilket tyder på, at det samme indhold nu kan skjules eller kollapses. Det samme princip kan anvendes til drop-down eller fly-out menuer, selvom disse ikke ville kræve en roterende pil. Overraskende er denne funktion ofte udeladt selv på professionelt designede hjemmesider.
Yderligere læsning:
3. AJAX Indlæsningsindikator
Når du forbedrer brugeroplevelsen ved at indlæse indhold gennem asynkrone anmodninger, skal du sørge for at informere brugeren om, at en AJAX-anmodning behandles. Uden denne indikator kan brugeren opgive at vente eller undre sig over, hvorfor der ikke er sket noget som følge af deres klik.
Du kan opnå dette på en række måder; en måde er at fremhæve en "Indlæser" eller lignende besked i eller nær det sted, hvor handlingen vil finde sted, som Googles RSS-læser gør:
Øverst på skærmbilledet er gul markeret tekst, som vises, når "Marker alle som læs" knappen er klikket for at fortælle brugeren, at der sker noget.
En anden måde at indikere dette på er med animation eller et roterende timeglas, som ville være kendt for Windows-brugere. En animeret indikator bruges på mange hjemmesider, herunder Twitter , hvor brugere klikker på en "Mere" -knap for at se ældre tweets:
Når knappen er klikket, og afhængigt af hastigheden af klientens forbindelse til serveren vises en velkendt animeret hvirvlende grafik, der fortæller brugeren, at deres anmodning behandles.
AJAX-indlæsningsgrafik er tilgængelig gratis fra en række forskellige hjemmesider, hvoraf mange giver dig mulighed for at tilpasse grafikken med størrelse, farve og andre muligheder.
Denne type visuel indikator er vigtig for asynkrone anmodninger, der ikke giver klient-side spor om, hvilken aktivitet der indlæses.
En AJAX-lignende indikator kan også bruges til at forbedre ikke-AJAX-funktionalitet, der opfører sig som AJAX og tager tid at indlæse. Dette kan omfatte et fotogalleri, der lægger et større billede, når der klikkes på et miniaturebillede.
AJAX-indlæsning af grafik og andre indikatorer øger faktisk ikke en side, men de forbedrer den "opfattede" ladetid , hvilket ofte er lige så værdifuld som at forbedre den faktiske belastningstid.
Yderligere læsning:
4. Placering af Indkøbskurv og Log-In og Registreringsfunktioner
Når brugere scanner en side til "Indkøbskurv" knappen eller "Registrer nu" linket, er det første sted, de ser øverst til højre på siden. Medmindre du har en tvingende grund til at gøre det, skal du holde denne funktionalitet på sit kendte sted, ellers risikerer du at bremse og forstyrre brugeroplevelsen.
Valg og funktioner, der falder ind under denne kategori, inkluderer "Se indkøbsvogn", "Check ud", "Log ind", "Log ud", "Registrer", "Send link", "Glemt adgangskode?" Og endda "Kontakt os. "Denne sidste genstand ville normalt være den sidste i en vandret navigationslinje.
TasteBook indeholder fire sådanne links i øverste højre hjørne af dens layout:
Maui dykker smykker er et andet godt eksempel og indeholder også en indkøbstaske grafisk:
5. Udløbsdatoformat på kreditkortformularer
Når en blanket anmoder om dit kreditkorts udløbsdato, er formatet altid det samme: Måneden repræsenteret af to cifre efterfulgt af året, repræsenteret med to eller fire cifre (f.eks. 03/11 eller 03/2011). Det firecifrede format er, hvordan udløbsdatoen vises på selve kreditkortet.
Den bedste måde at indsamle disse oplysninger på og styrke brugeroplevelsen er at bruge to separate markeringsfelter, en for måneden og den anden for året. Lad brugeren ikke indtaste udløbsdatoen i en enkelt tekstboks, selvom du giver instruktioner.
Her er et godt eksempel fra betalingsside af Maui dykkere smykker:
Og her er et eksempel på et dårligt designet udløbsdatofelt:
Desuden bør månedsvelgeren ikke vise navnene på månederne, men i stedet skal listen nummer 01 til 12. Der er ingen grund til at sænke brugerne ved at få dem til at regne ud, at "08" betyder "August".
6. Nemt identificerbare links
Dette bør aldrig være et problem, men desværre viser nogle hjemmesider ikke klart mellem links og almindelig tekst i hoveddelen.
I de fleste tilfælde er den bedste måde at indikere denne forskel på ved at gøre links en anden farve og understrege dem. I nogle tilfælde er en stærk kontrastfarve alene nok; men kun understreger eller bare ændrer farven lidt er sjældent nok og vil ofte forringe tilgængeligheden.
Cameron.io gør denne forskel godt:
Disse links ville ikke være så synlige, hvis de kun blev understreget, men ikke ændret i farve. Du ville ikke designe en knap, der ikke lignede en knap, så hvorfor lade tekstforbindelser blandes i hovedkroppen? Da de fleste brugere scanner tekst online, skal designerne sikre, at alle links kan identificeres længe før en mus rulles over dem.
Yderligere læsning:
Konklusion
Alle brugergrænsefladeelementer og funktioner, der er diskuteret i denne artikel, er afgørende for brugervenlighed på hjemmesiden og spiller vigtige roller i brugerens opfattelse af dit brand.
Mange små forbedringer kan gøre en stor forskel i opfattet hastighed og kan holde brugerne fra at blive frustrerede eller ubehagelige.
Gør dine brugergrænsefladeelementer enkle og strømlinede, og følg konventioner, hvor det er muligt. Du vil se reducerede afvisningsfrekvenser, bedre konverteringer og en stabil strøm af tilbagevendende trafik.
Skrevet udelukkende til WDD af Louis Lazaris, freelance skribent og webudvikler. Louis løber Imponerende Webs , hvor han stiller artikler og vejledninger om webdesign.
Hvordan kunne nogle af disse eller andre brugergrænsefladeelementer forbedres? Venligst del dine tanker i kommentarerne nedenfor.