6 Grensesnittdesign prinsipper og tips Hver webdesigner burde vite

God grensesnitt design er som luften vi puster - det er der når du trenger det, og du bruker det uten å tenke. Hvis du noen gang har brukt en dårlig grensesnittdesign, slitt for å komme seg rundt et nettsted, klikket du bort fordi du ikke kunne finne ut hva som foregikk, ikke kunne fullføre en oppgave du hadde i tankene, eller bare vært forvirret, du vet faren for å gå galt i dette området.

Nettsteder er ikke vakre bilder, de er der for å bli brukt og konsumert, så det er ganske viktig at vi som webdesignere bruker en god del tid på å tenke på brukervennlighet. I denne artikkelen vil vi vurdere noen av de store bruksproblemer og mine tips for å være en bedre grensesnittsdesigner.

Dette innlegget er dag 7 i vår webdesignsession. Creative Sessions "Session Day 6Session Day 8"

1 - Analysere målgrupper


Når du legger ut Psdtuts + tar vi hensyn til de ulike måtene folk skal bruke på nettstedet

På et nettsted er det minst tre forskjellige parter involvert - kunden eller eieren av nettstedet, brukerne av nettstedet og designeren eller byggeren av nettstedet. Faktisk ofte er det flere grupper av brukere, noen forskjellige klientrepresentanter og muligens noen få personer på designteamet. Dette er alt hva folk liker å referere til som interessenter (et ord som får meg til å forestille meg en masse mennesker som holder t-bein).

Nå er tingen om interessenter, alle vil vanligvis ha noe annet. Din klient (e) har en agenda - om det er behagelig sjefen, gjør logoen større, og selvfølgelig får meldingen deres over. Brukerne har en agenda - oppgavene de prøver å utføre, informasjonen de prøver å finne. Og selvfølgelig har du en agenda - få designet ditt omtalt på en favoritt CSS-galleri, behagelig sjefen din, passe inn i et raskt design før 17:00 når du drar ut ...

Vel i verden av interessenter, er det alltid viktig å huske at brukerne kommer først. Hvis du vil ha et vellykket nettsted, må du forhandle dine egne planer med kundens behov på en slik måte at brukerne er glade og finner det de trenger. Det er derfor en av de første tingene du gjør i å planlegge et nettsted, er å finne ut hvem målgruppen er.

Målgruppe

Ordmålgruppen synes å innebære at det er en gruppe mennesker som vi retter på for bruk av nettstedet. Virkeligheten er mer som at det er en mengde folk som skal bruke nettstedet, enten vi liker det eller ikke, og det er opp til oss å finne ut hvordan de skal tjene disse menneskene. Så jeg foretrekker å tenke på Audience Classes, det er forskjellige grupper av mennesker som skal bruke et nettsted.

Hver målgruppe vil ha et sett med oppgaver de prøver å utføre og informasjon de er interessert i. Som webdesigner er oppgaven din å finne ut hvem disse klassene av mennesker er, hva de vil og hvordan de skal bruke nettstedet . For å komplisere saker, kan du generelt bryte opp et publikum på flere forskjellige måter, hvorav noen vil være mer nyttige enn andre.

Så for eksempel på Psdtuts + kan du si at vi har disse fire publikumsklassene:

  1. Photoshop og designamatører
  2. Web og grafisk designere
  3. Computer Graphics Artists
  4. Uformell interesse besøkende

Nå er dette sannsynligvis en god målgruppesegmenteringsmetode hvis jeg var interessert i hvilke typer innhold som skal settes på nettstedet - f.eks. burde vi ha flere webdesign opplæringsprogrammer eller flere 3d blanding tutorials? Men når det gjelder brukervennligheten på nettstedet, er det ikke veldig nyttig. En annen måte å bryte opp publikum på er å si at vi har disse gruppene:

  1. Folk på oppdrag for å lære Photoshop
  2. Vanlige lesere bare holder opp sine ferdigheter
  3. Vanlige lesere som ønsker å drepe tid
  4. Vanlige lesere som deltar i samfunnet
  5. Av og til eller uformelle besøkende

Ser på det på denne måten ser du at forskjellige publikumtyper kommer til Psdtuts + med et annet mål i tankene. Fra denne sammenbrudd kan vi utlede at folk i kategori 1 og 2 mest sannsynlig vil slå vårt Plus-system, kategori 1 og 4 vil være interessert i Flickr-gruppen, og så videre. Deretter vil du estimere forskjellige målgruppestørrelser og du får en ide om hva som er mest og minst viktig på nettstedet.

Prioritering av brukeroppgaver

Når du har identifisert sett av brukere, funnet ut hva de vil gjøre på nettstedet og omtrent hvor stort og viktig de forskjellige settene er, kan du utarbeide prioriteringer for de forskjellige brukeroppgaver. Det er viktig at klient / eiermål kommer inn i spill her, da de vil vektlegge viktigheten av ulike brukergrupper.

Så tilbake til vårt Psdtuts + -eksempel, er en av de viktigste brukeroppgaverene påmelding til Plus-systemet fordi det er det som betaler for nettstedet, så selv om "People on a mission for learning Photoshop" ikke er så stor en publikumgruppe som "Vanlige lesere som ønsker å drepe tid" og "Vanlige lesere som deltar i samfunnet", er de viktigere likevel. Derfor gir vi noe av vårt beste skjermrom (øverst til høyre i sidefeltet) til en boks om å bli med i Plus.

"Vanlige lesere som deltar i samfunnet" på den annen side er ganske stor gruppe men skjer også med å være en gruppe mennesker som begge er kjent med nettstedet og villig til å gjøre litt mer arbeid, slik at noe som Flickr-gruppen kan sitte lavt på sidepanelet hvor det er tilgjengelig, men ikke umiddelbart opplagt.

Delinstinkt, delanalyse, del felles sans

På slutten av dagen å finne ut publikumsgrupper, hva de vil og vil gjøre er en blanding av instinkt, analyse og sunn fornuft. Jeg føler meg ofte som jeg lager utdannede gjetninger, mens jeg er sikker på prosjekter med stort budsjett, kan du gjennomføre undersøkelser og være litt mer sikker. Jeg tror uansett dine ferdigheter og budsjettnivå, selv om det er en god vane å skrive ut en kort analyse av de ulike gruppene. Ofte tvinger det deg til å se relasjoner og problemer du kanskje ikke tenker på ellers.

Du kan da presentere analysen din til klienten. I de fleste tilfeller bør du finne at de kan fortelle deg ting om publikumgruppene du aldri ville ha kjent ellers. Og jo mer du vet om brukerne, desto bedre kan du designe et nettsted for dem.


2 - Du kan lære mye ved å se på folk


Det er ganske fascinerende (og irriterende) å se hva folk faktisk gjør på et nettsted

Den beste måten å vite hvordan folk skal bruke et nettsted, er å se dem gjøre det. Dette kalles brukertesting og i lang tid var jeg under inntrykk av at det var noe bare store, fancy interaktive organer måtte gjøre. Sikker på å gjøre formell brukertesting er sannsynligvis noe som er utenfor budsjettet til de fleste webdesignprosjektene, men det er ganske mange ting du kan gjøre selv om du bare er en fyr som sitter i en kjeller som tar webprosjekter over eLance.

Brukertesting er bra for deg som webdesigner

Det første du må gjenkjenne er at når du utfører noen form for brukertesting, kommer det til å gjøre deg til en bedre webdesigner. Du får se nøyaktig hvordan folk bruker webdesignene dine, og det er en god sjanse for at du blir overrasket over hvordan de gjør det. Ting du synes er åpenbare ofte, er ikke tekst du trodde forklarte noe - får ikke engang å lese, og generelt bruker brukere ting de ikke skulle gjøre. Selv om den eneste brukeren tester du noen gang, er å spørre noen venner om å bruke et nettsted mens du ser dem, vil du allerede være bedre for det, uavhengig av selve prosjektet.

Det er riktig brukertesting

Hvis du vil utføre formell brukertesting, er en av de enkleste og minst kostbare metodene å bruke Jakob Neilsens Heuristiske Evaluering. Til tross for det skremmende navnet, får dette i utgangspunktet et sett med marsvin til å bruke et nettsted og deretter evaluere dem mot en rekke spesielle kriterier kalt heuristikk. Setningen av heuristikk som oftest brukes er Neilsens sett med 10 Usability Heuristics, og den faktiske prosessen med hvordan du utfører testingen, forklares av Neilsen i en rimelig lettforståelig artikkel.

Den ryddige tingen om Heuristisk evaluering er at du ikke trenger mange folk til å teste. Faktisk skal 5 personer finne rundt 75% av alle bruksproblemer, mens dobling til 10 bare gir deg opptil 85%. Jeg antar at de 5 menneskene må være rimelig varierte, men fordi ideen er at forskjellige mennesker vil ha en tendens til å finne forskjellige problemer.

Ifølge en case studie, den "fordel-kostnad ratio for et heuristisk evalueringsprosjekt på 48: Kostnaden ved å bruke metoden var rundt $ 10 500 og de forventede fordelene var ca $ 500 000" (Neilsen 1994) - det høres ganske utrolig ut, selv om jeg vet at jeg ikke har jobbet med mange prosjekter der jeg kunne ha svingt en ekstra 10 grand forbi klienten.

Og det er grovt brukertesting

Bare fordi du ikke har en kul $ 10.500 å kaste rundt, betyr ikke at du ikke kan dra nytte av brukertesting skjønt! På slutten av dagen, alt du trenger er noen få mennesker (blant annet venner) som du kan få til å bruke 10 minutter med. Først må du organisere noe for å teste dem på. Dette kan være alt fra papir og penn wireframes til Photoshop mockups til et halvt arbeidende nettsted. Deretter skal du finne ut noen ideer om hva du leter etter, hvilke oppgaver en person skal forsøke på nettstedet og gjøre det klart i ditt eget sinn hva du forventer å se.

Legg nå marsvinen din, skriv dem så de forstår hva de prøver å oppnå - dvs. "Du prøver å kjøpe en billett til Fiji, og du er kommet til denne siden ...", og deretter vise dem settet med JPEG eller biter av papir eller bare beinstedet. Hvis det ikke er noe som faktisk er funksjonelt (dvs. et sett med JPG eller papirer) da du Lag funksjonaliteten - enten ved å forklare hva som skjer når de "klikker" et sted eller ved å bytte til neste skjerm de ser.

Personlig tror jeg at JPG er best fordi du kan se hvor personens mus beveger seg, de ser noe som nærmer seg hva de egentlig ser, men samtidig trenger du ikke å ha gått og bygget et fullt nettsted.

Mens du tester, bør du ikke si for mye, husk at du er observere! På slutten bruker du et par par minutter og spør dem om eventuelle spørsmål du har "Hvorfor pokker klarte du deg der du dimwit?" og lage noen notater du trenger "Merk deg selv, gjør den knappen mye større".

Og det er det! Du trenger ikke en hvit labrock, du trenger ikke spesielt utstyr, du trenger egentlig ikke noe ... unntatt noen venner eller folk du kan bestikke - hvem er ikke webdesignere selv.

Tredjeparts betalte tjenester

Etter å ha skrevet alt dette skjedde det til meg at det kan være noen relativt billige tredjepartstjenester som kan gi brukertesting. Sikkert nok, det er et selskap som heter UserTesting.com som vil gi deg en video og et skriftlig sammendrag av en ekte person som bruker nettstedet ditt fra $ 19 for en enkelt tester helt opp til 100 testere for $ 1,699. Jeg kan ikke si hvor objektivt disse menneskene er, men jeg må si å bruke $ 100 for å få 5 personer til å løpe gjennom et nettsted, er ikke så ille for et lite mellomstort prosjekt. Hvis ingenting annet sikkert det høres imponerende når du forteller kunden din, skal du organisere et sett med brukertesting!

Du bør huske på at du bare kan virkelig bruke en tjeneste som dette med en faktisk fungerende nettside. Hvis du prøver å gjøre testing på Photoshop mockup-scenen eller på papir- og penn-wireframe-scenen, vil du få noen problemer!

Post Launch Analysis Tools

I dag og år er det mange statistiske verktøy du kan bruke til å teste hvordan folk bruker et nettsted. Her er noen verktøy for å analysere:

  1. Klikk analyse - CrazyEgg, Google Analytics Site Overlay, ClickHeat
    Med disse tjenestene kan du se heatmaps der folk klikker. Den eneste jeg virkelig har brukt er den i Google Analytics (klikk på Innhold> Overlegg av nettsted i sidemenyen). Disse er ganske ryddige for å se omtrent hvor de fleste går på en gitt side, men selvfølgelig vet du ikke mye annet om hva brukerne gjør eller prøver å oppnå, så det er egentlig bare halvparten av historien.
  2. Bananalyse -De fleste gode analysepakker
    Å finne ut hvilke stier brukere bruker gjennom et nettsted, kan bestemmes av statspakker som Google Analytics. Mellom å sette opp mål, trakter og hendelser, spore utgangssider, så vel som bare å bla gjennom innhold og se på navigasjonsbaner, er det virkelig mer informasjon enn du kan riste en pinne på. Personlig finner jeg det litt overveldende noen ganger og bruker egentlig bare mål og trakter, men jeg antar det er bedre å ha mer enn du trenger enn å være trengende.
  3. Split Testing - De fleste gode analysepakker
    Split testing er når du skifter mellom to forskjellige versjoner av en side for å se hvordan hver enkelt konverterer. Det er en ganske praktisk teknikk for å finne ut hvordan du optimaliserer salgs- og landingssider, men du kan bruke det på stort sett alle typer grensesnittdesign.

3 - "Ikke få meg til å tenke" ... for mye


Hva en tittel! Hva en bok!

Ikke få meg til å tenke er tittelen på en berømt bok av brukervennlighetskunnskap Steve Krug, og ganske mye oppsummerer brukervennlighet i den ene setningen. Et brukbart design bør ikke involvere tanker, det bør være åpenbart hva du skal gjøre og når du skal gjøre det. I boken forklarer Krug at folk bruker nettsteder på en helt annen måte til hvordan vi vil tro at de gjør det (noe som blir klart når du gjør litt brukertesting!), Og at det er viktig å vite dette slik at du kan designe dem på riktig måte. Ved å ikke overkomplisere tekst, designe for skanning, akseptere at folk ikke kommer til å lese dine lange instruksjoner, og så videre, kan du jobbe med virkeligheten av brukervaner og atferd for å produsere mer brukbare design.

Du lurer kanskje på hvorfor jeg la til "... for mye" til denne overskriften. Vel, jeg må innrømme at det bugser meg at nettsidene til brukbarhetseksperter som Steve Krug og Jakob Neilsen er bare så jævla, enkle å se. Jeg antar at jeg forstår hvorfor de gjør det, men jeg bryr meg ikke om at brukerne tenker litt hvis det betyr å gi en bedre visuell innvirkning. Jeg antar jeg er mer av en 37Signals brukervennlighet enn en Jakob Neilsen hengivner.


4 - Navigasjon og Orientering


Adobe.com gjør en god jobb med sin breadcrumb sti for å holde deg informert om hvor heck du er i deres gigantiske nettsted.

Jeg tror ikke jeg kunne skrive en artikkel om grensesnittdesign uten å berøre emnet for å komme seg rundt et nettsted. Kardinalreglene for navigasjon er:

  1. Brukere bør alltid kunne trene hvor de er på et nettsted
    Dette kalles orientering og du kan oppnå et godt resultat gjennom fremhevede menyelementer, breadcrumb stier og overskrifter. Å kunne orientere deg på et nettsted er nøkkelen til å gjøre det forståelig og brukbart. I den virkelige verden er den fysiske ekvivalenten av orientering gateskilt, de forteller deg hvor du er akkurat nå.
  2. Navigasjonen bør forbli konsistent
    Det er ikke noe mer forvirrende enn å ha en menylinje flytte et annet sted, forandre seg dramatisk eller bare forsvinne. Et nettsteds navigering er et av de viktigste verktøyene besøkende bruker til å forstå et nettsted. I den virkelige verden er den fysiske ekvivalenten av navigasjon et kart, det lar deg finne ut hvor du kan gå.

Den beste måten å forstå hvorfor navigering og orientering er så viktig er å forestille seg om du plutselig ble transportert til en ekstern utenlandsk by og fortalte å komme et sted, fangsten var at det ikke var noen trafikkskilt, og med jevne mellomrom ville kartet omorganisere seg, forsvinne og vises igjen. Smerten er mindre på et nettsted, men bare fordi ett museklikk får deg ut av det!

Det er mange andre konvensjoner og ideer om hva som gjør en god navigasjon / orientering - men alt annet er underlagt disse to reglene.


5 - Gjør problemene dine


Selv om mer om webutvikling enn design, har 37signals boken noen interessante avsnitt om å jobbe med dine egne problemer. Og best av alt boken er gratis å lese online.

Ingen problem er klarere enn ditt eget. Dette er en av grunnene til at nye entreprenører alltid anbefales å starte bedrifter som løser sitt eget problem. Webdesignere kan også dra nytte av å løse problemer de selv har opplevd. Det er noe om å oppleve smerteens førstehånd som gjør det klart nøyaktig hvordan ting kan bli bedre.

Siden det er lite sannsynlig, får du bare velge å jobbe på nettsteder du har direkte erfaring med, en bedre metode er å få erfaring med nettstedene du jobber med. Du kan gjøre dette med enten:

  1. Bruk gjeldende nettsted (hvis en finnes) for klienten din
  2. Bruke konkurrentens nettsteder som gjør lignende ting

Det viktige å merke seg er at når jeg sier "bruk", mener jeg ikke at du bare klikker rundt i et par sekunder og merker av dette fra oppgavelisten din. jeg mener egentlig bruk et nettsted. Skriv ut noen typiske oppgaver (for eksempel "Jeg trenger å kontakte salgskontoret i Delaware", "Jeg vil gjøre en bestilling") og deretter utføre dem helt. Når du virkelig forstår de oppgavene og problemene en bruker vil møte på et nettsted, vil du kunne designe en mye bedre løsning.


6 - Konvensjoner er både kjente og enkle


Ikoner er et utmerket eksempel på konvensjoner. Se på ikonene over og se hvor mange som automatisk gjør at du tenker på noe oppgave eller handling. Forresten er disse ikonene tilgjengelige i en Creative Commons-lisens via Webappers

Det har vært godt over et tiår siden nettet ble vanlig og i den tiden er det mange ting om hvordan nettsteder ser ut og arbeider som er blitt generelt akseptert. For eksempel når du klikker på en knapp som sier "Hjem" du forventer å gå til startsiden, forventer du ikke å gå til en side som viser en persons hus. Det høres opplagt og dumt ut, men da er det hva konvensjonene er.

Som en følge av vårt tidligere tips "Ikke få meg til å tenke", bruker godkjente standarder akkurat det, brukerne trenger ikke å tenke. Hvis du plasserer navigasjonsfeltet i fotfoten på hver side, skal du få brukerne til å bli forvirret, irritert og forlate. Hvis du bruker vanlige ikoner for uvanlige formål, må du ikke merke etikettene på riktig måte, unnlater å gi "Er du sikker?" bekreftelser for irreversible handlinger, og så videre, risikerer du å fremmedgjøre brukerne dine, og det er det siste du vil gjøre.

Sikker på at det er tider når du kanskje ikke følger konvensjonelle metoder, men du bør ha god grunn til å gjøre det, og gjøre alt du kan for å gjøre det klart hva du gjør.

Dette innlegget er dag 7 i vår webdesignsession. Creative Sessions "Session Day 6Session Day 8"