Oppdagbarhet og tilbakemelding i webdesign

Nylig Vox, sammen med 99% Invisible, produserte en strålende kortfilm om en dør i tiende etasje på Vox Media-kontoret. Foruten mange andre dører, presenterte den Don Norman: designikon og berømt forfatter av Design of Everyday Things. Formålet med filmen var å markere brukervennligheten til produkter og systemer, noe som tyder på to grunnleggende prinsipper for menneskets sentrert design: funn og tilbakemelding.

synlighet

"Hva gjør jeg?" Når du støter på et objekt, et produkt eller et system av noe slag, bør du forstå hvordan du kan samhandle med den. Manglende oppdagelighet resulterer i at du bare har ingen anelse om hvordan du bruker noe.

Tilbakemelding

"Hva skjedde nå? Når du har utført en handling med objektet ditt eller systemet, bør noe element av tilbakemelding informere deg om hva som skjedde og hvorfor. Uten tilbakemelding er du igjen i mørket.

La oss ta en titt på noen eksempler på grensesnitt og produkter på nettet som viser god bruk av disse ideene.

Vi begynner med funn. Ethvert nettsted, om det er for e-handel, en portefølje, markedsføring, et produkt eller en tjeneste, eller noe annet, vil trenge brukere til å forstå hva som forventes av dem. CodePen's hjemmeside bruker en fengende stroppelinje, etterfulgt av en klar verdi-proposisjon, før du leder øyet ned og gir nye besøkende to klare handlingsplaner.

Det er mange diskusjoner på nettet om effektiviteten av "spøkelses" -knappene (der knappen ikke har noen fylling, bare en grense), fordi de ikke nødvendigvis se som knapper. Dette kan hemme oppdageligheten, men jeg lar deg gjøre ditt eget sinn der.

duolingo.com

Duolingo, alles favoritt språk læringsplattform (rett?) Gjør hjemmesiden deres enda tydeligere for nye brukere. Det er en, veldig åpenbar, veldig klikkbar knapp i midten av skjermen. Og hvis jeg slår det, vet jeg nøyaktig hva jeg gir meg inn i.

Disse to første eksemplene er godt utført "Calls to Action" (CTAs). Som produkteiere ønsker vi at brukerne føler seg tvunget til å handle, men det er ikke nok å lage en knapp stor, rød og skinnende. Utover å være visuelt åpenbart, en CTA trenger å hjelpe brukerne med å forstå hva de tar handlingen for.

www.spotify-valentines.com

Spotifys nylige Valentins kampanje, hvor du kunne sende en kjærlighetsnotat ved hjelp av en spilleliste, var (som alltid) estetisk imponerende. Men veien til handling kan ha vært klarere. Det er åpenbart hva vi vil ha utfallet til å være, men instruksjonen (som fungerer som en CTA) gjør egentlig ikke gjøre hva som helst. I stedet forventes vi å rulle ned, noe som for noen kan føle at de ruller bort fra handlingen de vil ta.

I kontrast her er et eksempel på en veldig oppdagelig handling: den ydmyke spillknappen.

http://valiocon.com/

Med hektar av hvitt plass, trekker dette sirkulære ikonet brukere inn for å handle. Spillikonet er universelt anerkjent, og selve skjemaet antyder retning; et neste skritt. Hit dette og en video vil spille.

BuddyApp, et tema for WordPress 'community-plattform BuddyPress, gir oss to mulige alternativer her, men viser oss tydelig hvilken som helst foretrukket tilmeldingsrute.

tilgjengelighet

All den oppdageligheten vi har diskutert hittil, antar en svært viktig ting: at vi ikke har noen problemer med tilgjengeligheten. Hvis et grensesnitt gjør det vanskelig å finne ut hva som forventes av oss under perfekte forhold, forestill deg hvordan det påvirker de som har visuelle, fysiske eller kognitive funksjonshemminger?

A11y

Jeg kan ikke anbefale nok at du tar en titt på John Hartleys Beginners Guide til Web Accessibility Course. På 2,5 timer er det en alvor omfattende guide til hva tilgjengelighet betyr for Internett og hvordan du kan gjøre det til en del av arbeidsflyten din. 

Github tillater nå brukere å skyve filer til repos direkte gjennom webgrensesnittet. Når det gjelder funnbarhet er denne kommandoen ganske klar. Det er enda en sekundær handlingsplan, klart presentert, hvis vi trenger det.

Når jeg drar filen min inn i vinduet, får jeg en endring av tilstanden som tilbakemelding at handlingen min har blitt anerkjent: stiplede linjer og videre instruksjon.

Til slutt, når jeg har slått filen min, får jeg mer tilbakemelding i form av en fremdriftsrapport for å gi meg beskjed om at filen er på vei, klar til å være forpliktet.

Den stiplede linjen har blitt et konvensjonelt mønster (unnskyld ordspillet) for tilbakemelding, og forteller at brukerne skal slippe hva de drar. Invision er et annet eksempel, men oppdageligheten av en slik handling er ikke helt så åpenbar, i stedet avhengig av en viss ferdighet fra brukeren.

Og Basecamp gjør noe lignende, selv om det ikke er en stiplede linje. Uansett, god tilbakemelding.

animasjon

Bevegelse er den perfekte måten å gi tilbakemelding på; Vi er helt vant til å se handling og reaksjon i den virkelige verden, så hvorfor ikke også på nettet? I lang tid har designere brukt subtile overganger på hover-tilstander (for eksempel) fordi de hjelper brukeren å forstå forbindelsen mellom før og etter. I dag, med animasjon og SVG, kan vi gå utover det. Har du likt noe på Twitter nylig?

Den lille eksplosjonen lar oss uten tvil vite at vår handling førte til at noe skjedde.

I dette eksemplet viser Mode-handelstemaet for WordPress typisk WoCommerce-oppførsel. Når du legger til et produkt i handlekurven, overgår en miniatyrbilde seg fra hovedbildet til vognen øverst til høyre på skjermen. Dette er utmerket visuell tilbakemelding, og la meg vite at jeg har lagt noe i handlekurven, og foreslår hvor jeg kan gå ved siden av å fullføre kjøpet mitt.

FcStore; et annet WooCommerce-tema, tar en mindre bokstavelig tilnærming, men gir meg et enkelt merke for å indikere at jeg har lagt til produktet mitt i handlekurven.

makethisyear.com

Skjemaer er det klassiske eksempelet på situasjoner der brukerne absolutt trenger tilbakemelding. Har skjemaet sendt inn riktig? Har jeg rotet noe opp? Her, gjør dette året, bruk noen personable kopi og en fem-fem-emoji til stor effekt. Klart jeg registrerte meg for nyhetsbrevet mitt.

Det har vært følelsesmessig

Ved å fokusere på funn og tilbakemelding, sikrer du at brukerne kobler seg til nettstedet ditt. Tapp inn i deres atferdsmessige egenskaper, hjelpe dem å forstå og forutsi hva som skjer, og du vil til slutt få dem til å føle seg godt om om produktet ditt. Som to siste referanser for inspirasjon, bør du sjekke ut Aarron Walters bok Designing for Emotion, og Don Normans TED-snakk 3 måter god design gjør deg glad.