Hur Spoiling Ending Förbättrar UX
Storytelling handlar om att det okända blir känt. Men designers är inte berättare, och de destinationer de designar ska alltid vara tydliga för användaren. Genom att införa små spoilers i våra UI-design, och fördärva överraskningen, designar vi för mycket förbättrade användarupplevelser.
Det har ofta hävdats av fans av pop-visdom att det finns bara två distinkta tomter i hela västkulturen: en person går på en resa och en främling kommer till stan.
En kort flick genom din bokhylla kommer att motbevisa regeln - om du inte tillåter metaforiska resor, där allt passar - men hur ofta tanken upprepas, och den mening som det verkar göra, talar volymer om det okända i det västra idéer av berättelse.
I båda delarna introduceras en person till något nytt och oväntat, den enda variationen är den synvinkel som talan talar om. i båda fallen är berättelsen båge det okända som blir känt . När Clint Eastwood åker till en trasig stad på 1800-talet Idaho är vår nyfikenhet om hans identitet vad som driver vårt engagemang. När vi läser Tolkiens Lord of the Rings trilogi, är vi aldrig i tvivel om att Frodo så småningom kommer att göra det till Mt Doom, intresset ligger i vad som händer under vägen.
Nyckeln till berättande är att det finns ett okänt, och att det okända kommer att bli känt.
Designers är inte story-tellers
Många designers har hänvisat till sig själva som berättare, men det här är helt enkelt ett kitsch-sätt att hänvisa till kommunikation. För att berätta en historia måste vi främja det okända för att förbereda oss för en stor uppenbarelse, och det största hindret för detta tillvägagångssätt är att webbupplevelser-och jag skulle argumentera för de flesta möten med design-är icke-linjära och öppna.
Design är faktiskt långt närmare poesin. Poesi existerar vanligtvis i bitar av bitar, och i vilka teman utforskas som är öppna för tolkning.
Långt från att bygga en historia, är en designers jobb att klargöra så ointrusivt som möjligt.
Använda Spoilers i mikrointeraktioner
Vad är det mest engagerande elementet i Jaws ? Är det Brody som argumenterar med borgmästaren? Är det Quint som berättar om Indianapoliss historia? Är det Hooper affärer med Ellen Brody (ja, läs boken!)? Nej. Det är musiken. Så snart den hajen börjar spela cello vet vi att den kommer, kommer ankomsten bokstavligen till sin början. [Jaws är för övrigt ett intressant exempel på en film där både en främling (hajen) kommer till stan och sedan går en man på resan (till sjöss).]
Vi kan skapa engagemang i design genom att kontinuerligt släppa bort spoilers, vilket tyder på vad som händer, med egen cello musik. För att göra det använder vi mikrointeraktioner - enkla användargränssnittskomponenter, med en trigger och feedback. Återkopplingsdelen av mikrointeraktionen är platsen för att införa din spoiler.
Det fungerar genom att förhandsgranska data som i en linjär erfarenhet skulle införas senare. Nyckeln är att ta fram data framåt.
miniatyrer
Låt oss börja med något som är bekant: det klassiska exemplet att föra information framåt är miniatyren. En miniatyrbild är en förhandsgranskning av ett större element, en visuell guide till vad man kan förvänta sig i den andra änden av en länk.
Jacky Winter är en talangbyrå för artister, illustratörer och animatörer. Med ett varierat utbud av talanger är det bästa sättet att surfa på arbete med traditionella miniatyrbilder.
Miniatyrbilder behöver inte vara traditionella. Alexandre Nacache är en konstdirektör och interaktiv designer vars webbplats använder förhandsvisningar av projektelement, snarare än reproduktioner av en design i miniatyr.
Bao är en taiwansk restaurang med tre platser i London. Deras platsillustrationer fungerar som miniatyrbilder, vilket tyder på inte bara en titt på restaurangen, utan en möjlig upplevelse.
En dag ute är en Glasgow-baserad designstudio. Miniatyrbilderna på deras webbplats utgör en viktig del av konstriktningen och etablerar sin egen varumärkesestetik.
5 minuters läsning
Tillbaka till dagen, det enda sättet att veta hur länge behandlingen av en artikel som denna skulle ta var att kolla tiden, läsa artikeln och kolla tiden igen.
Baserat på upptagningen är ett av de mest framgångsrika användargränssnittselementen under de senaste åren den hjälpsamma lilla indikatorn som berättar hur länge en artikel kommer att ta för att läsa. Populäriserad av webbplatser som Medium, det finns ingen ögonspårning involverad eller beräknad läshastighet. Beräkningen av 5 minuters läsning är baserad på ordräkning-125 ord är förväntas läsas på 30 sekunder eller därutöver. Men även dessa grovt generella data är tillräckliga för att användare ska kunna fatta välgrundade beslut om sitt engagemang för en webbplats, artikel eller produkt.
Den monotone av Australian Design Radio bryts endast av det kontrasterande rödet som används för svävarstillstånd. Det enda elementet som använder rött utan interaktion? Spelhuvudet som har position och total längd.
Sequoia är ett Kalifornien-baserat riskkapitalbolag. Profiler av tekniska företag upptar sin målsida. Varje profil har en numrerad position, och skjutreglaget animerade timern gör uppmärksamheten på exakt var du är på gång.
Vimeo har några av de bästa videon på webben. De kunde ha visat någon information som de önskade-producent, ämne, titel - när de svängde över sina miniatyrbilder. De valde varaktighet.
Cinelli är Italiens coolaste cykelmärke. Deras produktreglage har numrerade "nästa" och "tidigare" knappar. Enbart pilar skulle vara tillräckliga för att förmedla mening, men designarna tog fram data med ett enkelt tillägg till knapparna.
Kvalificerande data
Ett av de enklaste sätten att förbättra gränssnittet är att kvalificera data med ett meningsfullt sammanhang. Nyckeln till detta levererar inte för mycket information, bara en enkel sammanfattning som kan läsas snabbt.
Hjälp Scout är en kundservice SaaS. Deras instrumentpanel visar viktiga mätvärden som totalt samtal, vilket skulle vara meningslöst utan att en pil och en procent läggs till, vilket indikerar om det är en förbättring eller ett bakslag.
Att boka en biljett från Lyon till Bordeaux görs enklare när trainline visar en stapel under resan, för att ge en visuell indikation av både varaktighet och antalet förändringar.
Kartor och försäkran
När vi förutser resor, speciellt en resa till det okända, avlägsnar vi ofta upplevelsen med en karta. I den verkliga världen är en karta väldigt som en miniatyrbild av en destination. I användargränssnittet designar de kartor vi använder för att förtydliga informationsarkitekturen.
Etiketter är en av de mest komplexa områdena informationsarkitektur eftersom de tenderar att vara jargong, ofta företagsexklusiv jargong. Genom att lägga till jargongfri mikroskopi förhandsgranskas användarens destination och hjälper dem att hitta vägen till rätt information.
Gitter är en prestationshantering SaaS, men deras produkter är mycket företagscentrerade. De löser detta problem genom att signalera nyckelfunktionen för varje produkt i deras meny.
Thriva hjälper dig att följa din hälsa med blodprov som du kan ta hemma. De har tre nivåer av produkt som tydligt förklaras i deras meny.
Finansiella transaktioner är tekniskt komplexa. Pläd erbjuder en mängd olika API-produkter för utvecklare. Deras meny förklarar inte bara nyckelfunktionen för varje produkt utan förhandsgranskar två potentiella lösningar baserade på produktkombinationer.
Nyckeln till effektiv UI-design är Spoilers
Att berätta historier är motsatsen till effektiv design, eftersom berättelser av sin natur panderar de okända elementen i en upplevelse. Design, däremot, syftar till att eliminera det okända genom att förtydliga.
När vi tar fram data i en design gör vi det vanligtvis på ett enkelt sätt. En enda del av väl valda data kan klargöra en hel process. Mikrointeraktioner är det perfekta sättet att infoga dessa "spoilers", vilket ger användarna möjlighet att skapa sin egen erfarenhet, samtidigt som de alltid vet exakt var de ligger inom det bredare sammanhanget.
Genom att avslöja mer än en linjär historia skulle vi engagera användarna mycket mer effektivt och utforma erfarenheter som är robusta och roliga att använda.