Hvordan Spoiling Ending forbedrer UX
Storytelling handler om at det ukjente blir kjent. Men designere er ikke fortellere, og destinasjonene de designe bør alltid være klare for brukeren. Ved å sette inn små spoiler i våre UI-design, og ødelegge overraskelsen, designe vi for mye bedre brukeropplevelser.
Det har ofte blitt hevdet av fans av pop-visdom at det er bare to distinkte tomter i hele den vestlige kulturen: en person går på reise, og en fremmed kommer til byen.
En kort flick gjennom bokhylsen din vil motbevise regelen - med mindre du tillater metaforiske reiser, hvor alt passer - men frekvensen som ideen gjentas, og følelsen det ser ut til å gjøre, taler volumer om det ukjentes sentralitet i vestlige ideer om fortelling.
I begge tomter blir en person introdusert til noe nytt og uventet, den eneste varianten er synspunktet som fortellingen snakker om; i begge tilfeller er historien buen det ukjente som blir kjent . Når Clint Eastwood rir inn i en ødelagt by i 1800-tallet Idaho, er vår nysgjerrighet om hans identitet det som driver vårt engasjement. Når vi leser Tolkiens Lord of the Rings trilogi, er vi aldri i tvil om at Frodo til slutt vil gjøre det til Mt Doom, interessen er i det som skjer underveis.
Nøkkelen til fortellingen er at det er et ukjent, og at det ukjente blir kjent.
Designere er ikke story-tellere
Tallrike designere har referert til seg selv som fortellere, men dette er bare en kitsch-måte å referere til kommunikasjon. For å fortelle en historie må vi fostre det ukjente som forberedelse til en stor avsløring, og det store hindret for denne tilnærmingen er at nettopplevelser-og jeg vil hevde at de fleste møter med design er ikke-lineære og åpne.
Design er faktisk langt nærmere poesi. Poesi eksisterer vanligvis i bite-sized biter, og i hvilke temaer blir utforsket som er åpne for tolkning.
Langt fra å bygge en historie, er en designers jobb å avklare så unintrusively som mulig.
Bruke Spoilers i mikrointeraksjoner
Hva er det mest engasjerende elementet i Jaws ? Er det Brody som argumenterer med ordføreren? Er det Quint å fortelle historien om Indianapolis? Er det Hooper's affære med Ellen Brody (ja, virkelig les boken!)? Nei. Det er musikken. Så snart den haien begynner å spille cello, vet vi at den kommer, er ankomst bokstavelig talt heralded. [Forresten er Jaws et interessant eksempel på en film der både en fremmed (haien) kommer til byen, og deretter går en mann på en reise (til sjø).]
Vi kan skape engasjement i design ved å kontinuerlig slippe spoilere, og hinting på hva som kommer, med egen cello musikk. For å gjøre det bruker vi mikrointeraksjoner - enkle brukergrensesnitt, med en trigger og tilbakemelding. Tilbakemeldingsdelen av mikrointeraksjonen er stedet å sette inn spoiler.
Det fungerer ved å forhåndsvise data som i en lineær opplevelse skulle bli introdusert på et senere tidspunkt. Nøkkelen er å bringe data videre.
miniatyrbilder
La oss starte med noe kjent: det klassiske eksempelet på å gi informasjon fremover er miniatyrbildet. En miniatyrbilde er en forhåndsvisning av et større element, en visuell guide til hva du kan forvente på den andre enden av en lenke.
Jacky Winter er et talentbyrå for kunstnere, illustratører og animatorer. Med et variert spekter av talent, er den beste måten å bla gjennom arbeid med tradisjonelle miniatyrbilder.
Miniatyrer må ikke være tradisjonelle. Alexandre Nacache er en kunstdirektør og interaktiv designer hvis nettsted bruker forhåndsvisninger av prosjektelementer, snarere enn reproduksjoner av et design i miniatyr.
Bao er en taiwansk restaurant med tre steder i London. Deres plasseringsillustrasjoner fungerer som miniatyrbilder, og foreslår ikke bare en titt på restauranten, men en mulig opplevelse.
En dag ut er et Glasgow-basert designstudio. Miniatyrbildene på deres side danner en viktig del av kunstens retning og etablerer sin egen merkevare estetikk.
5 minutters lesing
Tilbake på dagen, den eneste måten å vite hvor lenge lesingen av en artikkel som dette ville ta, var å sjekke tiden, lese artikkelen og sjekke tiden igjen.
Basert på opptaket er en av de mest vellykkede brukergrensesnittene de siste årene, den nyttige lille indikatoren som forteller oss hvor lenge en artikkel vil ta for å lese. Populært av nettsteder som Medium, det er ingen øye sporing involvert, eller lesehastighet beregnet, "5 minutters les" estimatet er basert på ordtelling-125 ord er forventes å bli lest om 30 sekunder eller deromkring. Men selv disse grovt generaliserte dataene er tilstrekkelig til at brukerne kan ta informerte beslutninger om deres forpliktelse til et nettsted, en artikkel eller et produkt.
Den monotone av Australian Design Radio er kun ødelagt av den kontrasterende røde som brukes til svingestater. Det eneste elementet som bruker det røde uten samhandling? Spillhodet som inneholder posisjon og total lengde.
Sequoia er et California-basert venture capital firma. Profiler av tech selskaper okkuperer deres destinasjonsside. Hver profil har en nummerert posisjon, og glidebryterens animerte tidtaker trekker oppmerksomheten til akkurat hvor du er i prosessen.
Vimeo har noen av de beste videoene på nettet. De kunne ha vist hvilken informasjon de ønsket - produsent, emne, tittel - når de svømte over miniatyrbildene sine. De valgte varighet.
Cinelli er Italias kuleste sykkelmerke. Deres produktregulator har nummerert "neste" og "forrige" knapper. Piler alene ville være nok til å formidle mening, men designerne brakte data frem med et enkelt tillegg til knappene.
Kvalifiserende data
En av de enkleste måtene å forbedre grensesnittet er å kvalifisere data med en meningsfylt kontekst. Nøkkelen til dette gir ikke for mye informasjon, bare et enkelt sammendrag som kan leses med et øyeblikk.
Hjelp Scout er en kundeservice SaaS. Dashboardet deres viser viktige beregninger som totalt samtaler, noe som ville være meningsløst uten å legge til en pil og en prosentandel som angir om det er en forbedring eller et tilbakeslag.
Bestilling av en billett fra Lyon til Bordeaux gjøres enklere når Trainline viser en linje under reisetiden, for å gi en visuell indikasjon på både varighet og antall endringer.
Kart og Reassurance
Når vi forutser reiser, spesielt en reise inn i det ukjente, demystiserer vi ofte opplevelsen med et kart. I den virkelige verden er et kart veldig mye som et miniatyrbilde av en destinasjon. I brukergrensesnittdesign klargjør kartene vi bruker, informasjonarkitektur.
Etiketter er et av de mest komplekse områdene av informasjonsarkitektur fordi de har en tendens til jargong, ofte selskaps eksklusiv jargong. Hvis du legger til sjargongfri mikrokopi, forhåndsbeskrives målet for brukere, og hjelper dem med å finne veien til riktig informasjon.
Gitter er en ytelsesadministrasjon SaaS, men deres produkter er veldig selskapssentriske. De løser dette problemet ved å signalisere nøkkelfunksjonen til hvert produkt i deres meny.
Thriva hjelper deg med å følge helsen din med blodprøver du kan ta hjemme. De har tre nivåer av produkt som er tydelig forklart i deres meny.
Finansielle transaksjoner er teknisk komplekse. Plaid tilbyr en rekke API-produkter for utviklere. Menyen deres forklarer ikke bare nøkkelfunksjonen til hvert produkt, men forhåndsviser to mulige løsninger basert på produktkombinasjoner.
Nøkkelen til effektiv UI-design er Spoilers
Telling historier er antitese av effektiv design, fordi historier av sin natur, pander til de ukjente elementene i en opplevelse. Design, derimot, søker å eliminere det ukjente ved å klargjøre.
Når vi bringer data videre i et design, gjør vi det vanligvis på en enkel måte. Et enkelt stykke velvalgte data kan klargjøre en hel prosess. Mikrointeraksjoner er den ideelle måten å sette inn disse "spoilere", som gir brukerne mulighet til å skape sin egen erfaring, mens de alltid vet nøyaktig hvor de er innenfor bredere sammenheng.
Ved å avsløre mer enn en lineær historie vil vi engasjere brukere langt mer effektivt, og designe erfaringer som er robuste og morsomme å bruke.