Het woord metafoor wordt waarschijnlijk het meest vergeleken met een stuk schrijven, wanneer het wordt gebruikt als een literaire vorm van spraak voor een beschrijvend effect. Vandaag gaan we echter praten over een ander type metafoor: een visuele die we kunnen gebruiken in webdesign.
metafoor: een beeldspraak waarin een uitdrukking wordt gebruikt om naar iets te verwijzen dat het niet letterlijk aanduidt om een overeenkomst te suggereren - WolframAlpha
Op internet gebruiken we vaak afbeeldingen en pictogrammen om verschillende dingen te symboliseren. Wanneer we een webpagina bezoeken, scannen we om zo snel mogelijk te vinden wat we nodig hebben en worden afbeeldingen gebruikt om dat proces te versnellen. We kunnen iets veel sneller interpreteren met vertrouwde stilering en afbeeldingen. We kunnen bijvoorbeeld meteen een fout herkennen als er iets is zoals een uitroepteken of een gele of rode kleur. Het komt allemaal neer op bekendheid.
Vooral in de afgelopen tijd zijn we begonnen met het zien van stedelijke metaforen in webdesign, met behulp van bekende elementen zoals een boekenplank of een muur binnen een ontwerp. Er zijn echter heel veel andere metaforen die worden gebruikt in webdesign om de kloof tussen te overbruggen werkelijk en virtueel leven.
De "officiële" definitie van een metafoor is niet veranderd ten opzichte van het vorige gedeelte: een beeldspraak waarin een uitdrukking wordt gebruikt om naar iets te verwijzen dat het niet letterlijk aanduidt om een overeenkomst te suggereren. Dat is heel waarheidsgetrouw wanneer we naar het web kijken en het gebruik van metaforen op dat platform. Daar gebruiken we pixels als vertegenwoordigers van objecten uit de echte wereld om een zekere vertrouwdheid tussen virtueel en actueel leven te overbruggen.
Er zijn verschillende soorten metaforen die we ook op het web gebruiken: die op een kleinere schaal die echte objecten zoals knopen nabootsen, iconische metaforen die echte associaties kopiëren en gebruiken op het web, en uitgebreide metaforen waarbij een volledig ontwerp kan rond een metafoor draaien.
Een knop op het web is eigenlijk geen knop, of niet? Nee, het zijn een aantal pixels die zijn gemaakt om op een knop te lijken, omdat (a) we het zo hebben gemaakt en (b) onze gebruikers het herkennen en weten dat het iets is dat moet worden ingedrukt (of, correcter, klik). We laten deze link op een knop lijken, omdat we gewend zijn een knop te herkennen als een interactief punt in het echte leven, en in staat zullen zijn om die specifieke link met weinig moeite van de rest van de pagina te onderscheiden.
Het imiteren van echte conventies helpt ons om te communiceren met de virtuele wereld. Het verbetert onze gebruikerservaring omdat het web geen enkele buitenlandse interface blijkt te zijn waarvoor heel wat leren nodig is om mee te werken. We weten dat knoppen knoppen zijn omdat ze er vrijwel overal hetzelfde uitzien, ze zijn een visuele hint en gebruikers reageren instinctief met hen.
Hetzelfde geldt voor Windows, desktops en tabbladen in UI-ontwerp. Steve Krug gebruikt in zijn usability-boek Do not Make Me Think op beroemde wijze het voorbeeld van maptabs als groot gebruik van metaforen in interfaceontwerp.
Ik heb het (nog) niet kunnen bewijzen, maar ik vermoed sterk dat Leonardo da Vinci ergens in de late vijftiende eeuw tabbladen heeft uitgevonden. Zoals interface-apparaten gaan, ze zijn duidelijk een product van genialiteit. Steve Krug
Tabbladen zijn het klassieke voorbeeld van een intuïtieve interface-metafoor.
Iets anders dan identieke metaforen zijn pictogrammen, net zoals we eerder hebben besproken. Uitroeptekens worden bijvoorbeeld gebruikt om een bepaalde status van belangrijkheid of waarschuwing weer te geven, dus we gebruiken dat pictogram in dezelfde context op internet. We kunnen ook het symbool van een telefoon of een brief gebruiken om aan te geven dat we contact hebben opgenomen.
Voor een perfect voorbeeld kunnen we kijken naar het WordPress-dashboard. Elk van de menu-items aan de linkerkant bevat een soort metafoor, zoals de punaise voor berichten en de tekstballon voor opmerkingen.
De aanmoediging om zo'n metafoor te gebruiken is identiek aan die in het vorige gedeelte: het creëert enige bekendheid - een "link" als je wilt - naar de echte wereld die de lezer helpt om een pagina relatief eenvoudig te interpreteren en te navigeren.
We hebben een korte rondleiding gemaakt door het repliceren van objecten uit het echte leven en door pictogrammen te gebruiken om links te vormen, maar er is nog een ander belangrijk type metafoor: die welke verder gaan dan een enkel element. Het meest sprekende voorbeeld dat ik kan bedenken, is geen website, maar een app. iBooks ziet er niet uit als een normale iPad-app, omdat het bedoeld is om het uiterlijk en het gevoel van een echte boekenkast te imiteren om dat gevoel van vertrouwdheid voor de lezer toe te voegen. Je kijkt naar iBooks en je weet meteen dat het iets met boeken te maken heeft. Als het goed wordt gedaan, kan dit soort websites echt geweldig zijn!
Uitgebreide metaforen komen minder vaak voor dan de andere typen die worden gebruikt op de meeste websiteontwerpen op internet.
Hoewel 'uitgebreide metafoor' de verkeerde terminologie kan zijn, is dit type metafoor nog steeds het breedste type dat u kunt krijgen. Ze bieden een klein venster in uw browser in het echte leven en kunnen een onmiddellijke methode zijn om een eerste indruk te krijgen van waar de website over gaat.
Schriftelijk gebruiken we een metafoor om uit te drukken, uit te leggen en te beschrijven. Metaforen kunnen een handige manier zijn om een idee te verbinden met een idee dat niet letterlijk overeenkomt met (waarbij in de plaats waarschijnlijk een vergelijking zou worden gebruikt), maar waarbij de twee in combinatie kunnen worden gebruikt om elkaar voor te stellen.
Metaforen in webdesign, zoals schrijven, worden gebruikt als een beschrijvend mechanisme door real life-objecten en -ideeën te koppelen aan de pixels in een website. Het lijkt misschien heel klein, en iets dat over het hoofd kan worden gezien, maar web-lezers hebben een kortere aandachtspanne dan lezers, dus tijd is van essentieel belang bij het browsen op een website. En in die omstandigheden worden metaforen nuttig door echte associaties (zoals de kleur rood met gevaar of een vergrootglas met zoeken) te kopiëren en ze op het web te gebruiken, zodat het scannen van een webpagina sneller gaat.
Als ontwerpers kunnen we metaforen gebruiken om de aantrekkingskracht op het ontwerp te vergroten en onze ontwerpen gedenkwaardig te maken. We willen dat gebruikers verbinding maken met de website, en de meeste websites hebben al een vorm van metafoor in gebruik om aan hun doelgroep te voldoen. Websites geven realistische concepten, bedrijven, mensen en objecten weer en de gekozen stijlen verschillen niet van die in het echte leven. Niet alleen zorgen metaforen voor een gevoel van vertrouwdheid tussen pixels op een webpagina en echte zaken, maar ze kunnen ook worden gebruikt om verbinding te maken met een specifiek publiek.
Laten we bijvoorbeeld de CBeebies-startpagina van de BBC nemen. De site is opgebouwd rond een achtergrond met een tuin met bomen en regenbogen, een idealistisch beeld van de wereld dat veel voorkomt in veel kindgerichte media. De metafoor van een online tuin verwelkomt kinderen om de site te gebruiken, terwijl als het zou zijn ontworpen als Microsoft's homepage, het niet zo aantrekkelijk zou zijn voor kinderen om te gebruiken.
Metaforen worden in alle media gebruikt om iets als iets anders uit te drukken, en op websites zijn ze een geweldige manier om vertrouwdheid te communiceren en lezers naar een ontwerp te trekken. Wanneer we dit beschouwen op de schaal van de 4,5 miljard jaar van de wereld, is het web nog steeds een heel nieuw medium, dus het creëren van verbindingen tussen echt en virtueel is een overgangsmaatregel maar een die werkt.
Flourish is een webdesignbureau dat de naam serieus neemt. Met een bloeiperiode gedefinieerd als "groeien of zich ontwikkelen op een gezonde of krachtige manier", wordt het concept van een groeiende boom in verder kale grond en een alomvattend, op de natuur gebaseerd ontwerp gepresenteerd.
De sjabloon "Interior Design" is een ThemeForest-item dat is vormgegeven om een kantoor te vertegenwoordigen, een perfect voorbeeld van een metafoor in het spel.
Launch is een ander ThemeForest-item, maar deze vergelijkt de release van een website met de lancering van een raket, net als veel vergelijkbare ontwerpen.
Mutant Labs, een softwareontwikkelingsbedrijf, neemt het "lab" -gedeelte van hun naam mee naar een wetenschappelijke context omwille van het ontwerp van hun site.