10 tips for å lage en mer brukbar web
Enten det er din portefølje, en blogg, et markedsføringsnettsted eller en samling av spill, ønsker vi alle å tiltrekke besøkende til vår nettside og for å sikre at de har en hyggelig opplevelse.
Brukervennlighet måler nivået av brukerens erfaring og kan karakteriseres av hvor lett en gitt oppgave kan fullføres; om det er gjort med forkunnskap, eller ved at brukeren lærer en ny måte å samhandle på. Jeg tror at Jakob Nielson antagelig forklarte det beste da han sa:
"Brukbarhet er en kvalitetsattributt som vurderer hvor enkelt brukergrensesnittene skal brukes. Ordet "brukbarhet" refererer også til metoder for å forbedre brukervennligheten under designprosessen. "
I denne artikkelen håper jeg å gi deg noen form for en brukbar sjekkliste som dekker emner fra formdesign til enkle navigerings tips som du kan søke på et hvilket som helst webprosjekt.
1. Opprette aktiv navigering
La brukeren få vite hvilken del av nettstedet de er i, eller hvilken kategori de navigerer gjennom, kan gi et stort bruksområde for å øke til et hvilket som helst nettsted. Aktiv navigering er en av de anvendelighetskonseptene som er nesten automatiske på dette punktet. Og vi har alle våre egne måter å skape den på.
Den ideelle situasjonen for å opprette aktiv navigering er å gjøre det server-side, fordi det massivt kutter ned på mengden HTML og CSS som trengs. Hvis det ikke er et alternativ å generere en aktiv tilstandsserver-side, manipulerer kroppsdelementet ditt Å stile hvert navigasjonselement direkte er også et godt valg.
Som et tredje alternativ kan du enkelt opprett aktiv navigasjon med JavaScript .
Din aktive navigasjonsstatus skal alltid være forskjellig fra svingestatusen din.
2. Klikkbare etiketter og knapper
Når du tar deg tid til å merke et skjema riktig, kan en bruker klikke på en label for å aktivere det tilknyttede skjemaelementet, og det er en veldig enkel måte å vise den på. Dette er et flott stykke funksjonalitet bygget rett inn i HTML. Dessverre, svært få brukere vet om denne naturlige perlen av brukergrensesnitt.
Å la brukeren få vite en etikett er klikkbar, tar bare en linje eller to av CSS (avhengig av hvordan du skriver den) for å endre markøren fra standard tekstinnlegg til en mer klikkbar og vennlig peker.
Nå er alle godt klar over at sende knapper er klikkbare. Jeg har alltid trodd det var rart at dette - åpenbart klikkbare - elementet ikke bruker samme markør som en lenke. Så jeg liker å bruke denne delen av CSS til knapper også:
label, button, input[type="submit"]{cursor:pointer;}3. Koble din logo
Ikke å knytte en logo til hjemmesiden din er en av de mer frustrerende tingene jeg har kommet over på nettet. Jeg forstår ikke hvorfor noen ville ikke dette. Det er så enkelt, og nå er det trygt å si at brukerne forventer det.
Å knytte logoen din er så vanlig i dag at mange nettsteder finner at det å ha en link som er merket "Hjem", ikke er nyttig lenger, siden brukerne bare klikker på logoen for å navigere til hjemmesiden.
Nettsteder som Facebook, spore brukerklikk ved å legge til "ref" -parameteren for hvert navigasjonselement. Nedenfor er et eksempel på hvordan Facebook knytter deres logo:
4. Øke hitområdet på en lenke
For omtrent et år siden skrev Ryan Singer fra 37Signals en artikkel om hvordan de polstret koblingsmål for bedre mousing i Basecamp. Dette er et annet lite brukervennlige triks som du kan bruke ved ganske enkelt å legge til noen polstring rundt koblinger for å gjøre det klikkbare området større.
Dette er et flott tillegg til et hvilket som helst nettsted, og det kan bidra til å forhindre feil på en kobling, som ofte kan være litt frustrerende. Det hjelper også mye i mobilnettdesign, hvor brukerne klikker med fingrene og virkelig trenger det ekstra store treffområdet på en kobling.
5. Legge til fokus for å danne felt
Bruk av fokus til et skjemafelt er en økende trend i UI-design. Det lar brukeren vite at det de bare gjorde forårsaket noe å skje (gjorde det fornuftig?). Det er en rask og enkel måte å overføre nyttig, diskret informasjon til brukeren. Sier noe som: "Hei! Du har nettopp klikket her. "Kan være veldig nyttig.
6. Gir en nyttig 404 side
Å gjøre brukeren til å føle seg komfortabel er svært viktig, og det er ikke den beste måten å oppnå det på å vise en stor Apache-feilmelding på skjermen. En nyttig 404-side kan gå langt, og den trenger ikke å inneholde tallene "4" eller "0", da de ikke er veldig nyttige for alle andre enn utvikleren. Dessuten trenger ingen virkelig å vite feilkoden for alt som skjer bak kulissene. Brukere vil bare at et nettsted skal fungere slik de forventer det.
På av sjansen finner en bruker seg selv på en "Side ikke funnet", det er mye mer nyttig å lede dem et sted der de kanskje kan finne informasjonen de leter etter, ved å gi noen unnskyldende tekst, en søkeboks, eller foreslå noen mulige destinasjoner. Men prøv å ikke sette skylden på brukeren for å lande på en feil URL.
Blogussion skrev en flott artikkel om skaper en informativ 404 side som viser noen veldig gode tips og til og med noen kode for de WordPress-brukerne blant oss.
7. Bruk språk for å skape et uformelt miljø
Skrive på nettet er et stort tema akkurat nå. Det er som om vi går ned i en gigantisk sjekkliste som omhandler problemer: HTML, CSS, progressiv forbedring, tilgjengelighet, skriving på nettet og de altomfattende "Webstandarder".
Vi hører mye om å skrive på nettet, og det ser ut til å fortsette å skifte. Fra dagene til Steve Krug forteller oss om å kutte innholdet vårt i halvparten for å bruke punktlister når det er mulig.
Nå skal vi skrive som om vi snakker med en venn, og alt går tilbake til at brukeren føler at de er i et komfortabelt miljø. Når du holder kopien på nettstedet ditt uformelt, får det en bruker til å føle seg mindre stresset, så selv når de møter noe forvirrende, kan de fortsatt føle en følelse av avslapping og informalitet når de søker etter svaret.
8. Bruk linjehøyde for lesbarhet
Linjehøyde er en av de tingene som direkte kan arves fra fysiske medier, som bøker og aviser. Disse kildene har eksistert i hundrevis av år og har hatt god tid til å mestre lesbarhet og linjehøyde. Så neste gang du sitter fast på dette, vær ikke redd for å knekke åpne en lærebok og sjekk den ut.
Dette er et aspekt av webdesign som lett kan overses og enkelt misbrukt. Jeg starter vanligvis med en linjehøyde på ca. 1.4em og justerer den derfra, basert på design og innhold.
9. Bruk av hvitt mellomrom til gruppeelementer
Gruppering av elementer sammen er en av de enkleste måtene å vise tilknytning til. Du kan gjøre det med bilder, grenser, eller bare ren gammel hvit plass. Ved å bruke hvitt mellomrom til gruppevareelementer oppstår naturlige sammenhenger mellom beslektede elementer som, selv når de leses raskt, lett kan hentes av brukeren.
Som øyet skanner en side, vil en bruker naturligvis lese overskriftene først. Dette skjer mye med topp 10 lister (:: ahem: :). Forhåpentligvis er innholdet interessant nok til å hente litt oppmerksomhet og lokke brukeren til å lese litt nærmere. Du skyver brukere i riktig retning ved å designe innholdet på en måte slik at ting som er relatert, faktisk ser ut som de er relaterte.
10. Å være tilgjengelig
Ved å være tilgjengelig betyr jeg ikke seksjon 508 og ADA-overholdelse. Tilgjengelighet betyr i dette tilfellet at det er der for brukerne når de har et problem (responsivitet).
Hvis brukervennlighet handler om å prøve å sikre at brukerne ikke blir frustrert og forlater, er responsiviteten din siste forsvarslinje mot å miste den brukeren til en av de millioner av konkurrenter som er et kort klikk unna.
I siste omgang kan du gjøre alle testene du vil ha, og følg alt brukervennlige råd som du kan få hendene på, men alle er forskjellige. Brukere vil bli forvirret og tapt og til slutt trenger litt hjelp. Hvor lenge du lar en bruker forvirre, kan være forskjellen mellom noen som kommer tilbake og noen som ikke vil.
Når man snakker om tilgjengelighet, er mange mennesker vant til en samtale om synshemmede, men tilgjengeligheten strekker seg langt utover det. For eksempel må du gjøre nettstedet ditt tilgjengelig for brukere med begrensninger for båndbredde (oppringt nettverk, celle service, sakte nettverk) og eldre nettlesere (noen selskaper vil ikke la ansatte oppgradere nettlesere).
Hvis vi gjør vårt beste for å gjøre våre nettsider så tilgjengelige som mulig og svare raskt på spørsmål, kan vi opprette en samlet opplevelse som vil la brukeren hele tiden ha lyst til mer.
Kundeservice er viktig ... selv på en blogg.
Skrevet utelukkende for WDD av Tim Wright , webdesigner / utvikler og blogger. Du kan finne flere av hans skriving på CSSKarma eller følg tim på twitter .
Følger du alle disse prinsippene på nettstedene dine? Hvordan kan vi skape en bedre og mer brukbar web? Vi vil gjerne høre dine kommentarer ...