Share
Å designe effektive og vennlige brukergrensesnittmeldinger er en kunstform i seg selv. Mens designere bruker mye tid på å lage mesteparten av hovedbrukergrensesnittet, kan utformingen av meldinger virke som en ettertanke. Tilbakemelding er faktisk lim mellom bruker og grensesnitt; uten det kan brukerne bli forvirret.
Før vi går videre, bør vi kanskje se på eksempler på virkelige eksempler på tilbakemeldinger fra UI:
Den vanligste feilmeldingen du vil støte på, er 404-siden ikke funnet meldingen. Dette skjer når en bruker ved et uhell har skrevet feil URL, eller den forrige nettadressen er ikke lenger tilgjengelig.
Nettstedet nedetid meldinger oppstår når serveren bokstavelig talt går ned, noen ganger uventet:
Det er tilfeller når det er planlagt:
Disse meldingene er utformet for å varsle brukeren om et resultat etter at de har utført en handling:
I dette tilfellet forteller Versions brukeren at nedlastingen sin har startet, og den finnes i nedlastingsmappen sin:
En vanlig boksemelding på toppen av siden som påminner brukerne om å bekrefte e-postadressen deres:
Zootool bruker en hel side for å fortelle brukeren å verifisere e-postene sine før de tillater at de fortsetter:
Og denne takker brukerne for å verifisere:
Formmeldinger blir ofte møtt også. De vanligste eksemplene oppleves under validering, som oppstår når en bruker sender inn et skjema, hvorpå et skript sjekker for å se om det har oppstått feil:
Det kan være noen kreativ bruk av skjemameldinger, de kan ikke nødvendigvis bare vises for feil. De kan brukes som en fin guide som hjelper brukeren til å fylle ut et skjema:
Dette er et eksempel på en melding som vises etter at et skjema er fullført:
Linjene mellom web og innfødte applikasjoner blir stadig uskarpe. Massevis av webapplikasjoner er utviklet for å oppføre seg som en opprinnelig applikasjon. For eksempel har 750words.com en growl-lignende popup-melding når du bruker en hurtigtast for å lagre en oppføring:
Du kan også designe meldinger til å vises i godt posisjonerte områder for å oppmuntre brukere til å utføre flere handlinger. Twitter.com informerer brukerne om at de har oppdateringer:
Utforming av meldinger for mobilgrensesnittene er en annen utfordring på grunn av den småformede faktoren; meldinger må være åpenbare.
Igjen, hvis tidsbestemt bra, kan en melding utformes for å fungere som et tips:
Den kan også brukes som en form for oppmuntring til brukeren for å fullføre en oppgave:
Vi må sette oss i skoene til brukerne våre. Hva vil du at de skal føle når de besøker nettstedet ditt eller bruker søknaden din? Du vil at de skal føle at de kan stole på deg, og det ville være en ekstra bonus hvis de faktisk kunne føle seg glade mens du brukte nettstedet ditt. Hvis det ikke er nok å tenke på å designe dine meldinger, kan det føre til mye frustrasjon og skuffelse.
De fleste brukerne besøker et nettsted eller bruker et program for å fullføre et definert mål. For å finne ut mer om et selskap, å kjøpe et produkt, å utføre en oppgave ved hjelp av et program, etc. For eksempel, tenk deg selv som en bruker som prøver å kjøpe noe på et nettsted. Kan du forestille deg hvordan brukeren ville føle seg hvis ingenting skjedde etter å ha klikket "legg i handlekurven"? Det må være passende skilt som angir hvor en handling har gått galt:
Et annet scenario vil være en bruker som prøver å fullføre en viktig oppgave på nettstedet ditt. Kanskje brukeren kan prøve å betale leie gjennom et elektronisk finansielt nettsted du har ansvaret for. Kan du forestille deg frykt, frustrasjon og bekymring hvis nettstedet slutter å fungere plutselig midt i en finansiell transaksjon?
Feilmeldingen ovenfor mislykkes i å identifisere kilden til feilen - potensielt frustrerende for brukeren som prøver å fullføre en transaksjon.
La oss vurdere noen gode metoder der tilbakemeldinger og meldinger er opptatt.
Denne Dealotto-meldingen er en god demonstrasjon av å være enkel, men spesifikk:
Ingen vil savne disse valideringsfeilene ved denne registreringsskjemaet på Vimeo:
37signaler opprettet denne kunstneriske ser blanke skifermeldingen for å gi brukerne en ide om hva de skal gjøre når de ikke har noen gjenstander:
Har du noen gang møtt et grensesnitt som prøver å få hver tommers oppmerksomhet? Den bruker alle UI-konferanser tilgjengelig, modale vinduer, inline-meldinger, meldinger øverst på siden, for å prøve å få deg til å gjøre noe.
Å være for åpenbar eller uopphørlig kan resultere i motsatt effekt; brukeren gir opp på grensesnittet.
Dette modalvinduet ble vist når du prøvde å lese en nyhetsartikel for Huffington Post for første gang. Det kan være forvirrende for brukere som kanskje har trodd at Twitter var nødvendig for å lese artikkelen.
Når du viser en melding, enten det er en feil eller et varsel, vil det alltid være nyttig å gi flere tips eller hjelp til brukeren. Dette gjelder spesielt i forbindelse med feil på nettstedet, mange ganger er de uunngåelige, men vi kan gjøre opplevelsen så smertefri som mulig.
Vimeo gir nyttige hjelpelinjer til andre seksjoner, komplett med en hjelpelink nederst:
Små hjelpeikoner i skjemaet ditt kan være utrolig hjelpsomme:
Denne hjelpverktøystipset går litt lenger, inkludert en lenke som brukeren kan klikke på for å få mer informasjon:
Invisionapp gir et nyttig tips mens du viser lastebildet:
Å designe gode tilbakemeldingsmeldinger handler om forventning. Dette inkluderer å forutse:
Kicksend la merke til at noen av brukerne ikke bekreftet e-postene sine. De analyserte dataene sine og fant ut at de ganske enkelt skrev feil e-postadresser ved vanlige feilfeil. Derfor utformet de et jquery-plugin, mailcheck.js for å sjekke om vanlige feilmeldinger når brukere fyller ut sine e-postadresser. Med en så enkel kontroll reduserte de bekreftelses-e-posten med 50%:
Fab.com forventet at noen av brukerne ville kansellere sine kontoer. Her prøver de å lagre en tapt sak ved å gi denne meldingen når du prøver å avbryte en konto:
Noen ganger kan man forutse scenarier som en livredder:
Eller det kan være hjelp å hente et potensielt tapt salg:
Det handler om de små detaljene. Denne påloggingsskjermen fra Gmail forventer at du kanskje har glemt at du har endret passordet ditt:
Mer inspirasjon fra Gmail; Jeg er sikker på at dette har vært nyttig for utallige mennesker ved å enkelt forutse en vanlig brukerfeil som å glemme å legge ved filer:
Fremdriftsindikatorer er en viktig form for UI-meldinger. Foursquare utformet en subtil melding for å informere brukerne om at de får plassering og finne interessante steder mens dataene laster. Dette oppnår et todelt mål.
.
TeuxDeux forventer at synkronisering er viktig for en oppgaveliste og advarer en bruker om at internettforbindelsen går tapt med et humoristisk varsel:
Det er mange andre eksempler på hvordan du kan forutse og bygge "forsvar" for brukergrensesnittet ditt.
Vi nevnte tidligere at det er viktig å tenke på vegne av brukeren. Minimering av frustrasjonen er avgjørende, og vi kan til og med ta det et skritt videre. Mange brukere står overfor en skjerm for lange timer. Ved å vise empati eller sprøyte litt humor, blir det et frustrerende eller verdslig scenario til en potensielt morsom.
Denne ødelagte roboten får deg til å smile, rett?
For ytterligere gode eksempler på 404 sider, kan du se denne Pinterest-samlingen. Bortsett fra feil kan selv enkle meldinger få deg til å smile under en lang dag:
Mange av oss kjemper med innboks null, men det er kanskje verdt innsatsen for Gmail:
Denne meldingen fra Buffer bruker litt smig og humor for å få flere registreringer:
En annen varslingsmelding som sannsynligvis gir et smil til ansiktet ditt gjennom smart copywriting:
Dette utmerkede dekk fra Aaron Walter, ledende designer fra Mailchimp, er en god grunn til emosjonell design for de som er interessert i å lære mer.
Jeg håper dette går ned på å lage meldinger for brukergrensesnittet ditt var nyttig. Jeg har tatt med flere ressurser nedenfor for videre lesing og leting. Det er ingen svart eller hvitt i å designe meldinger, men det tar mye empati, erfaring og selvfølgelig tilbakemelding fra brukerne selv.
Ikke vær redd for å gå gjennom en rekke iterasjoner for å få følelsen av dine meldinger riktig. Spør folk om tilbakemelding, start fra å kommunisere den tilsiktede meldingen til brukeren, og hvis det fungerer, kan du kanskje legge litt humor eller følelser for å forbedre den generelle opplevelsen. Prøv alltid å være nyttig!
Ta gjerne spørsmål i kommentarfeltet. Tilbakemelding er alltid velkommen for å hjelpe oss med å skrive enda bedre artikler for deg på Webdesigntuts+.
Accentsconagua