Hoe Spoiling the Ending UX verbetert
Verhalen vertellen gaat over het onbekende worden. Maar ontwerpers zijn geen verhalenvertellers en de bestemmingen die ze ontwerpen moeten altijd duidelijk zijn voor de gebruiker. Door kleine spoilers in onze UI-ontwerpen te plaatsen en de verrassing te bederven, ontwerpen we voor veel betere gebruikerservaringen.
Het is vaak beweerd door fans van pop-wijsheid die er zijn slechts twee verschillende plots in de hele westerse cultuur: iemand gaat op reis en een vreemdeling komt naar de stad.
Een korte blik door je boekenkast zal de regel weerleggen - tenzij je metaforische reizen toestaat, waarin alles past - maar de frequentie waarmee het idee wordt herhaald, en de betekenis die het lijkt te geven, spreekt boekdelen over de centrale plaats van het onbekende in het Westen ideeën van het verhaal.
In beide plots wordt iemand geïntroduceerd aan iets nieuws en onverwachts, de enige variatie is het gezichtspunt waaruit het verhaal spreekt; in beide gevallen is het verhaal de onbekende die het bekende wordt . Wanneer Clint Eastwood in de jaren 1800 Idaho een afgebroken stad oprijdt, is onze nieuwsgierigheid naar zijn identiteit onze drijfveer. Als we de trilogie van Lord of the Rings van Tolkien lezen, twijfelen we nooit dat Frodo uiteindelijk de reis naar Mt Doom zal maken, de interesse ligt in wat er onderweg gebeurt.
De sleutel tot het vertellen van verhalen is dat er een onbekende is en dat het onbekende bekend zal worden.
Ontwerpers zijn geen verhalenvertellers
Talloze ontwerpers hebben zichzelf als verhalenvertellers genoemd, maar dit is gewoon een kitsch manier om te verwijzen naar communicatie. Om een verhaal te vertellen, moeten we het onbekende koesteren ter voorbereiding op een grote onthulling, en het belangrijkste obstakel voor deze benadering is dat webervaringen - en ik zou de meeste ontmoetingen met design beargumenteren - niet-lineair en open zijn.
Design is namelijk veel dichter bij poëzie. Poëzie bestaat typisch in hapklare brokken, en waarin thema's worden onderzocht die open staan voor interpretatie.
Verre van het construeren van een verhaal, is het de taak van een ontwerper om zo onopvallend mogelijk op te helderen.
Spoilers gebruiken in micro-interacties
Wat is het meest boeiende element in Jaws ? Is het Brody ruzie maken met de burgemeester? Is het Quint die het verhaal van de Indianapolis vertelt? Is het Hoopers affaire met Ellen Brody (ja echt, lees het boek!)? Nee. Het is de muziek. Zodra die haai de cello begint te spelen, weten we dat hij eraan komt, zijn aankomst wordt letterlijk aangekondigd. [Overigens is Jaws een interessant voorbeeld van een film waarin zowel een vreemdeling (de haai) naar de stad komt, en dan gaat een man op reis (naar zee).]
We kunnen engagement in design creëren door voortdurend spoilers te laten vallen, te suggereren wat er gaat komen, met cello-muziek van onszelf. Om dit te doen, gebruiken we microinteractie-eenvoudige UI-componenten, met een trigger en feedback. Het feedbackgedeelte van de micro-interactie is de plaats om uw spoiler in te voegen.
Het werkt door een voorbeeld te bekijken van gegevens die in een lineaire ervaring in een later stadium zouden worden geïntroduceerd. De sleutel is om gegevens naar voren te brengen.
thumbnails
Laten we beginnen met iets bekends: het klassieke voorbeeld van het naar voren brengen van informatie is de thumbnail. Een miniatuur is een voorbeeld van een groter element, een visuele gids voor wat u aan het andere eind van een koppeling kunt verwachten.
Jacky Winter is een talentbureau voor artiesten, illustratoren en animators. Met een breed scala aan talenten is de beste manier om door het werk te bladeren, met traditionele miniaturen.
Thumbnails hoeven niet traditioneel te zijn. Alexandre Nacache is een art director en interactieve ontwerper wiens site gebruik maakt van previews van projectelementen, in plaats van reproducties van een ontwerp in miniatuur.
Bao is een Taiwanees restaurant met drie locaties in Londen. Hun locatie-illustraties werken als miniaturen, wat niet alleen een blik op het restaurant suggereert, maar ook een mogelijke ervaring.
Een dagje uit is een in Glasgow gevestigde ontwerpstudio. De miniaturen op hun site vormen een belangrijk onderdeel van de richting van de kunst en bepalen hun eigen merkesthetiek.
De 5 minuten lezen
Vroeger was de enige manier om te weten hoe lang het lezen van een artikel als dit zou duren, was om de tijd te controleren, het artikel te lezen en de tijd opnieuw te controleren.
Op basis van zijn populariteit is een van de meest succesvolle UI-elementen van de afgelopen jaren de handige kleine indicator die ons vertelt hoe lang een artikel zal duren om te lezen. Gepopulariseerd door sites zoals Medium, is er geen eye-tracking bij betrokken of is de leessnelheid berekend, de "5 minuten gelezen" schatting is gebaseerd op het aantal woorden - 125 woorden is zal naar verwachting binnen 30 seconden worden gelezen of daaromtrent. Maar zelfs deze grof gegenereerde gegevens zijn voldoende om gebruikers weloverwogen beslissingen te laten nemen over hun inzet voor een site, artikel of product.
De monotone van Australian Design Radio wordt alleen verbroken door het contrasterende rood dat wordt gebruikt voor zweeftoestanden. Het enige element dat het rood gebruikt zonder interactie? De afspeelkop met positie en totale lengte.
sequoila is een in Californië gevestigd durfkapitaalbedrijf. Profielen van technische bedrijven nemen hun bestemmingspagina in beslag. Elk profiel heeft een genummerde positie en de bewegende timer van de schuifregelaar vestigt de aandacht op waar u zich precies bevindt.
Vimeo bevat enkele van de beste video's op internet. Ze konden alle gewenste informatie laten weergeven (producer, onderwerp, titel) als ze over hun miniaturen zweefden. Ze kozen voor duur.
Cinelli is het coolste fietsmerk van Italië. Hun productslider heeft de nummering 'volgende' en 'vorige' knoppen. Alleen pijlen zouden voldoende zijn om betekenis over te brengen, maar de ontwerpers brachten gegevens naar voren met een eenvoudige toevoeging aan de knoppen.
Kwalificerende gegevens
Een van de eenvoudigste manieren om een interface te verbeteren, is om gegevens te kwalificeren met een zinvolle context. De sleutel hiervoor is niet te veel informatie leveren, alleen een eenvoudige samenvatting die in één oogopslag te lezen is.
Help Scout is een klantenservice SaaS. Op hun dashboard worden belangrijke statistieken weergegeven, zoals totale gesprekken, wat zinloos zou zijn zonder de toevoeging van een pijl en een percentage dat aangeeft of dat een verbetering of een tegenvaller is.
Een ticket van Lyon naar Bordeaux reserveren is eenvoudiger wanneer Trainline geeft een balk weer onder de reistijd, om een visuele indicatie te geven van zowel de duur als het aantal wijzigingen.
Kaarten en geruststelling
Wanneer we anticiperen op reizen, vooral een reis naar het onbekende, demystificeren we de ervaring vaak met een kaart. In de echte wereld lijkt een kaart veel op een miniatuur van een bestemming. In het ontwerp van de gebruikersinterface verduidelijken de kaarten die we gebruiken de informatiearchitectuur.
Labels zijn een van de meest complexe gebieden van de informatiearchitectuur, omdat ze neigen naar jargon, vaak een exclusief bedrijfjargon. Het toevoegen van een jargonvrije microcopy geeft een voorvertoning van de bestemming voor gebruikers en helpt hen de weg naar de juiste informatie te vinden.
traliewerk is een Performance Management SaaS, maar hun producten zijn erg bedrijfsgericht. Ze lossen dit probleem op door de hoofdfunctie van elk product in hun menu te signaleren.
Thriva helpt u uw gezondheid te volgen met bloedtesten die u thuis kunt doen. Ze hebben drie productniveaus die duidelijk worden uitgelegd in hun menu.
Financiële transacties zijn technisch complex. Plaid biedt een verscheidenheid aan API-producten voor ontwikkelaars. Hun menu geeft niet alleen de belangrijkste functie van elk product weer, maar geeft voorbeelden van twee mogelijke oplossingen op basis van productcombinaties.
De sleutel tot effectieve UI-ontwerp is Spoilers
Het vertellen van verhalen is de antithese van effectief ontwerp, omdat verhalen van nature in een ervaring doorgaan naar de onbekende elementen. Ontwerp daarentegen probeert het onbekende te elimineren door te verduidelijken.
Wanneer we gegevens in een ontwerp naar voren brengen, doen we dat meestal op een eenvoudige manier. Een enkel stuk goed geselecteerde gegevens kan een volledig proces verduidelijken. Micro-interacties zijn de ideale manier om deze 'spoilers' in te voegen, die gebruikers in staat stellen hun eigen ervaring te creëren, terwijl ze altijd exact weten waar ze zich bevinden binnen de bredere context.
Door meer dan een lineair verhaal te onthullen, betrekken we gebruikers veel effectiever en ontwerpen we ervaringen die robuust en plezierig in gebruik zijn.