Bruke metaforer i webdesign

Ordet metafor er sannsynligvis mest liknet med et skriftstykke, når det brukes som en litterær talesymbol for beskrivende effekt. Men i dag skal vi snakke om en annen type metafor: en visuell vi kan bruke i webdesign.

metafor: en talegrad hvor et uttrykk brukes til å referere til noe som det ikke bokstavelig talt angir for å foreslå en likhet - WolframAlpha

På nettet bruker vi bilder og ikoner mye til å symbolisere forskjellige ting. Når vi besøker en nettside, skanner vi for å prøve å finne det vi trenger så fort som mulig, og bilder brukes til å øke hastigheten på prosessen. Vi kan tolke noe mye raskere med kjent styling og bilder. For eksempel kan vi umiddelbart gjenkjenne en feil når det er noe som et utropstegn, eller en gul eller rød farge. Det er helt ned til kjennskap.

Spesielt i nyere tid har vi begynt å se urbane metaforer i webdesign, ved hjelp av kjente elementer som en bokhylle eller en vegg i et design. Det er imidlertid mange andre metaforer som brukes i webdesign for å bygge bro over gapet mellom faktiske og virtuell liv.


Hva er en metafor?

Den "offisielle" definisjonen av en metafor har ikke endret seg fra det forrige avsnittet: en talegrad hvor et uttrykk brukes til å referere til noe som det ikke bokstavelig talt angir for å foreslå en likhet. Det er veldig sannferdig når vi ser på nettet og bruken av metaforer på den plattformen. Der bruker vi piksler som representanter for ekte verdensobjekter for å bygge bro over en viss fornemmelse mellom det virtuelle og det virkelige livet.

Det finnes flere forskjellige typer metaforer som vi bruker på nettet også: De i en mindre skala som etterligner virkelige objekter som knapper, ikoniske metaforer som kopierer virkelige livsforeninger og bruker dem på nettet, og utvidet dem der en hel design kan dreie seg om en metafor.


Real Life på nettet

En knapp på nettet er faktisk ikke knappen er det? Nei, det er en masse piksler laget for å se ut som en knapp fordi (a) vi har gjort det slik, og (b) våre brukere vil gjenkjenne det og vet at det er noe som skal trykkes (eller, riktig klikket). Vi gjør denne lenken som en knapp fordi vi er vant til å gjenkjenne en knapp som et samspillspunkt i virkeligheten, og vil kunne skille den aktuelle linken fra resten av siden med liten innsats.

Imitere virkelige konvensjoner hjelper oss å samhandle med den virtuelle verden. Det betrar vår brukeropplevelse fordi nettet ikke viser seg å være noe utenlandsk grensesnitt som krever mye lære å samhandle med. Vi vet at knapper er knapper fordi de ser ganske mye ut overalt, de er en visuell cue og brukere samhandler med dem instinktivt.

Det samme gjelder for vinduer, skrivebord og faner i UI-design. Steve Krug, i brukbarhetsboken, gjør meg ikke tenk, bruker famously eksemplet på mappefliker som stor bruk av metaforer i grensesnittdesign.

Jeg har ikke vært i stand til å bevise det (ennå), men jeg har sterkt mistanke om at Leonardo da Vinci fant ut tabbladdelere en gang i slutten av 1500-tallet. Som grensesnitt enheter går, er de tydeligvis et produkt av geni. - Steve Krug

Faner er det klassiske eksempelet på et intuitivt grensesnitt metafor.


ikoner

Litt annerledes enn identiske metaforer er ikoner, akkurat som vi snakket om før. Eksempelvis utropstegn brukes til å representere noen tilstand av betydning eller varsel, så vi bruker det ikonet i samme kontekst på nettet. Vi kan også bruke symbolet på en telefon eller et brev for å betegne kontakt.

For et perfekt eksempel kan vi se på WordPress dashboard. Hvert av menyelementene ned til venstre har en slags metafor, for eksempel trykknappen for å representere innlegg og talebobleen for kommentarer.

Oppfordringen til å bruke slike metaforer er identisk med de i forrige avsnitt: det skaper litt kjennskap - en "link" hvis du vil - til den virkelige verden som hjelper leseren til å tolke og navigere en side med relativ letthet.


Aktive metaforer

Vi har tatt en kort gjennomgang av replikerende virkelige objekter og bruker ikoner til å danne linker, men det er en viktigere type metafor: de som strekker seg utover et enkelt element. Det mest slående eksempelet jeg kan tenke på, er ikke et nettsted, men en app. iBooks ser ikke ut som en vanlig iPad-app fordi det er ment å etterligne utseendet på en ekte bokhylle for å legge til den følelsen av kjennskap til leseren. Du ser på iBooks, og du vet umiddelbart at det har noe å gjøre med bøker. Hvis det gjøres bra, kan disse typer nettsteder vise seg å være veldig fantastisk!

Utvidede metaforer er mindre vanlige at de andre typene som brukes på flertallet av webdesigner rundt på nettet.

Selv om "utvidet metafor" kan være feil terminologi, er denne typen metafor fortsatt den bredeste typen du kan få. De tilbyr et lite vindu i nettleseren din i det virkelige livet, og kan være en umiddelbar metode for å skape et første inntrykk av hva nettstedet handler om.


Monmarthe WordPress-temaet.

Hvorfor bruke en metafor?

Vi bruker skriftlig en metafor for å uttrykke, forklare og beskrive. Metaforer kan være en nyttig måte å knytte en ide til med at den ikke bokstavelig talt ligner på (der en sannsynlighet vil være brukt i stedet), men hvor de to kan brukes sammen for å representere hverandre.

Metaforer i webdesign, som skrive, brukes som en beskrivende mekanisme ved å koble virkelige objekter og ideer til pikslene på et nettsted. Det kan virke svært lite, og noe som kan overses, men nettlesere har et kortere oppmerksomhetsområde enn skrivelesere, så tiden er av essensen når du surfer på et nettsted. Og under slike omstendigheter blir metaforer nyttige ved å kopiere virkelige livsforeninger (som fargen rød med fare eller et forstørrelsesglass med søk) og bruke dem på nettet, slik at prosessen med å skanne en nettside blir spurt opp.


Tiltrekning

Som designere kan vi utnytte metaforer for å øke attraksjonen til designet, og gjøre våre design minneverdige. Vi vil at brukerne skal koble til nettsiden, og allerede, de fleste nettsteder har noen form for metaforer i bruk for å passe til målgruppen. Nettsteder reflekterer virkelige begreper, selskaper, mennesker og objekter, og de valgte stilene er ikke forskjellige fra de i virkeligheten. Ikke bare gjør metaforer en følelse av kjennskap mellom piksler på en nettside og virkelige saker, men de kan også brukes til å koble til et bestemt publikum.

La oss ta BBC's CBeebies hjemmeside for eksempel. Nettstedet er bygget rundt en bakgrunn som skildrer en hage med trær og regnbue, et idealistisk bilde av verden som er vanlig gjennom mange barnorienterte medier. Metaforen til en Internett hage hilser barn velkommen til å bruke nettstedet, men hvis det ble utformet som Microsofts hjemmeside, ville det ikke være så attraktivt for barn å bruke.


Konklusjon

Metaforer brukes over alle medier for å uttrykke noe som noe annet, og på nettsteder er de en flott måte å kommunisere kjennskap til og tiltrekke leserne til et design. Når vi vurderer dette i omfanget av verdens 4,5 milliarder år, er nettet fortsatt et helt nytt medium, slik at det å skape koblinger mellom ekte og virtuelt er en overgangsmåling, men en som virker.


Metaforer i aksjon

Flourish

Flourish er et webdesignbyrå som tar navnet på alvor. Med blomst definert som "vokse eller utvikle seg på en sunn eller sterk måte", presenteres konseptet av et voksende tre i ellers ufruktbart land og en allsidig naturbasert design.

Interiørdesign XHTML-mal

"Interior Design" -malen er et ThemeForest-element utformet for å representere et kontor, et perfekt eksempel på en metafor i spill.

Launch

Lansering er et annet ThemeForest-element, men dette likner utgivelsen av et nettsted til lanseringen av et rakett, som mange lignende design.

Mutant Labs

Mutant Labs, et programvareutviklingsselskap, tar "lab" -delen av navnet sitt til en vitenskapelig kontekst for deres nettsteds design..