Hvordan Spoiling Ending forbedrer UX
Historieberetning handler om, at det ukendte bliver kendt. Men designere er ikke storytellers, og de destinationer, de designer, skal altid være klare for brugeren. Ved at indsætte små spoiler i vores UI-design, og forkæle overraskelsen, designer vi for meget forbedrede brugeroplevelser.
Det er ofte blevet hævdet af fans af pop-visdom, at der er kun to forskellige plot i hele den vestlige kultur: en person går på en rejse, og en fremmed kommer til byen.
Et kort glimt gennem din bogreol vil modbevise reglen - medmindre du tillader metaforiske rejser, hvor alt passer - men den hyppighed, som ideen gentages, og den forstand, det ser ud til at sige, taler mængder om det ukendte i det vestlige ideer om fortælling.
I begge tomter introduceres en person til noget nyt og uventet, den eneste variation er det synspunkt, som fortællingen taler om; i begge tilfælde er historien bue den ukendte bliver den kendte . Når Clint Eastwood rider ind i en ødelagt by i 1800s Idaho, er vores nysgerrighed om hans identitet, hvad der driver vores engagement. Når vi læser Tolkiens Ringenes Ringstrilogi, er vi aldrig i tvivl om, at Frodo i sidste ende vil gøre det til Mt Doom, interessen er i hvad der sker undervejs.
Nøglen til fortælling er, at der er et ukendt, og at det ukendte bliver kendt.
Designere er ikke historiefortællere
Talrige designere har henvist sig til historiefortællere, men det er simpelthen en kitsch-måde at henvise til kommunikation. For at fortælle en historie skal vi fremme det ukendte som forberedelse til en stor åbenbaring, og den største hindring for denne tilgang er, at weboplevelser - og jeg vil argumentere for de fleste møder med design - er ikke-lineære og åbne.
Design er faktisk langt tættere på poesi. Poesi findes typisk i bitstørrelser, og i hvilke temaer undersøges der, der er åbne for fortolkning.
Langt fra at opbygge en historie er en designerens opgave at afklare så uintrygent som muligt.
Brug af Spoilers i mikrointeraktioner
Hvad er det mest engagerende element i Jaws ? Er det Brody, der argumenterer med borgmesteren? Er det Quint fortæller historien om Indianapolis? Er det Hooper's affære med Ellen Brody (ja virkelig læse bogen!)? Nej. Det er musikken. Så snart denne haj begynder at spille celloen, ved vi , at den kommer, er dens ankomst bogstaveligt talt heralderet. [Jaws er i øvrigt et interessant eksempel på en film, hvor både en fremmed (hajen) kommer til byen, og så går en mand på en rejse (til havs).]
Vi kan skabe engagement i design ved løbende at droppe spoilere, der antyder, hvad der kommer, med egen cello-musik. For at gøre det bruger vi mikrointeraktioner - enkle brugerinterface-komponenter med en trigger og feedback. Feedbackparten af mikrointeraktionen er stedet at indsætte din spoiler.
Det virker ved at forhåndsvise data, som i en lineær oplevelse ville blive introduceret på et senere tidspunkt. Nøglen er at bringe data fremad.
Miniaturer
Lad os begynde med noget bekendt: det klassiske eksempel på at frembringe information fremad er miniaturen. En miniature er et eksempel på et større element, en visuel guide til, hvad man kan forvente i den anden ende af et link.
Jacky Winter er et talent bureau for kunstnere, illustratorer og animatorer. Med en bred vifte af talent er den bedste måde at gennemse arbejde på med traditionelle miniaturebilleder.
Miniaturer behøver ikke at være traditionelle. Alexandre Nacache er en kunstdirektør og interaktiv designer, hvis websted bruger forhåndsvisninger af projektelementer, snarere end reproduktioner af et design i miniature.
Bao er en taiwanesisk restaurant med tre steder i london. Deres placeringsillustrationer virker som miniaturebilleder, og foreslår ikke kun et kig på restauranten, men en mulig oplevelse.
En dag ud er et Glasgow-baseret designstudio. Miniaturerne på deres websted udgør en vigtig bestanddel af kunstretningen og etablerer deres eget mærke æstetik.
5 minutters læsning
Tilbage på dagen, den eneste måde at vide, hvor længe læsning af en artikel som dette ville tage, var at tjekke tiden, læse artiklen og tjekke klokken igen.
Baseret på dets optagelse er et af de mest succesfulde UI-elementer i de seneste år den nyttige lille indikator, der fortæller os, hvor længe en artikel vil tage for at læse. Populeret af websteder som Medium, der er ingen øje sporing involveret, eller læserhastighed beregnet, "5 minutters læs" estimat er baseret på ordtælling-125 ord er forventes at blive aflæst om 30 sekunder eller deromkring. Men selv disse groft generaliserede data er tilstrækkelige til at give brugerne mulighed for at træffe informerede beslutninger om deres engagement i et websted, en artikel eller et produkt.
Den monotone af Australsk design radio er kun brudt af den kontrasterende røde, der anvendes til svingestater. Det eneste element, der anvender det røde uden interaktion? Spillehovedet, der indeholder position og total længde.
Sequoia er et Californien-baseret venturekapitalfirma. Profiler af tech virksomheder indtager deres destinationsside. Hver profil har en nummereret position, og skyderens animerede timer gør opmærksom på præcis, hvor du er i gang.
Vimeo indeholder nogle af de bedste videoer på nettet. De kunne have vist alle de oplysninger, de ønskede-producent, emne, titel - når de svingede over deres miniaturebilleder. De valgte varighed.
Cinelli er Italiens fedeste cykelmærke. Deres produktglider indeholder nummererede 'næste' og 'tidligere' knapper. Kun pile ville være nok til at formidle mening, men designerne bragte data frem med en simpel tilføjelse til knapperne.
Kvalificerende data
En af de enkleste måder at forbedre en grænseflade på er at kvalificere data med en meningsfuld sammenhæng. Nøglen til dette er ikke at levere for meget information, bare et simpelt resumé, der kan læses et øjeblik.
Hjælp Scout er en kundeservice SaaS. Deres dashboard viser nøgle beregninger som samlede samtaler, hvilket ville være meningsløst uden at tilføje en pil og en procentdel, der angiver, om det er en forbedring eller et tilbageslag.
At bestille en billet fra Lyon til Bordeaux gøres enklere, når trainline viser en bar under rejsetiden for at give en visuel indikation af både varighed og antallet af ændringer.
Kort og beroligelse
Når vi foregriber rejser, især en rejse ind i det ukendte, demystificerer vi ofte oplevelsen med et kort. I den virkelige verden er et kort meget ligesom en miniaturebillede af en destination. I brugergrænsefladedesign klargør de kort, vi bruger, informationsarkitekturen.
Etiketter er et af de mest komplekse områder af informationsarkitektur, fordi de har tendens til jargon, ofte selskabs eksklusiv jargon. Tilføjelse af jargon-fri mikroskopi forudviser destinationen for brugere og hjælper dem med at finde vej til de rigtige oplysninger.
Gitter er en performance management SaaS, men deres produkter er meget virksomhedsorienterede. De løser dette problem ved at signalere nøglefunktionen for hvert produkt i deres menu.
Thriva hjælper dig med at spore dit helbred med blodprøver du kan tage hjemme. De har tre niveauer af produkt, der er tydeligt forklaret i deres menu.
Finansielle transaktioner er teknisk komplekse. plaid tilbyder en række API-produkter til udviklere. Deres menu forklarer ikke kun nøglefunktionen for hvert produkt, men viser også to mulige løsninger baseret på produktkombinationer.
Nøglen til effektiv UI-design er Spoilers
Fortæller historier er antitese af effektivt design, fordi historier af deres natur panderer til de ukendte elementer i en oplevelse. Design søger derimod at fjerne det ukendte ved at præcisere.
Når vi bringer data frem i et design, gør vi det typisk på en simpel måde. Et enkelt stykke velvalgte data kan klarlægge en hel proces. Mikrointeraktioner er den ideelle måde at indsætte disse "spoilere" på, som giver brugerne mulighed for at skabe deres egen erfaring, mens de altid ved præcis, hvor de er inden for den bredere sammenhæng.
Ved at afsløre mere end en lineær historie ville vi engagere brugerne langt mere effektivt og designe erfaringer, som er robuste og behagelige at bruge.