Utilizarea metaforelor în Web Design

Metafora cuvântului este probabil cea mai asemănătoare cu o piesă de scriere, atunci când este folosită ca o figură literară de vorbire pentru efect descriptiv. Cu toate acestea, astăzi, vom vorbi despre un metaforic diferit: unul vizual pe care îl putem folosi în designul web.

metaforă: o figură de vorbire în care o expresie este folosită pentru a se referi la ceva ce nu denotă literalmente pentru a sugera o asemănare - WolframAlpha

Pe web, folosim foarte mult imagini și icoane pentru a simboliza lucruri diferite. Când vizităm o pagină web, scanăm pentru a încerca să găsim ceea ce avem nevoie cât mai repede posibil și imaginile sunt folosite pentru a accelera acest proces. Putem interpreta ceva mult mai rapid cu stil familiar și imagini. De exemplu, putem recunoaște instantaneu o eroare atunci când există un semn de exclamare sau o culoare galbenă sau roșie. Totul e la o familiaritate.

Mai ales în ultima vreme, am început să vedem metafore urbane care apar în designul web, folosind elemente familiare cum ar fi un raft de bibliotecă sau un perete în cadrul unui design. Cu toate acestea, există o mulțime de alte metafore care sunt utilizate în designul web pentru a reduce decalajul dintre real și virtual viaţă.


Ce este o metaforă?

Definiția "oficială" a unei metafore nu sa schimbat de la secțiunea anterioară: o figură de vorbire în care o expresie este folosită pentru a se referi la ceva pe care nu o denotă literal pentru a sugera o asemănare. Acest lucru este foarte adevărat atunci când ne uităm la web și la utilizarea metaforelor pe acea platformă. Acolo, folosim pixeli ca reprezentanți ai obiectelor din lumea reală pentru a înălța un sentiment de familiaritate între viața reală și cea reală.

Există mai multe tipuri de metafore pe care le folosim și pe web: acelea pe o scară mai mică, care imită obiecte din viața reală cum ar fi butoane, metafore iconice care copiază asociațiile de viață reală și le folosesc pe web și cele extinse, se poate învârti în jurul unei metafore.


Viața reală pe Web

Un buton de pe web nu este de fapt butonul este? Nu, este vorba de o grămadă de pixeli făcuți să arate ca un buton deoarece (a) am reușit acest lucru și (b) utilizatorii noștri o vor recunoaște și vor ști că este ceva ce trebuie apăsat (sau, mai corect, apăsat). Facem acest link să arate ca un buton deoarece suntem obișnuiți să recunoaștem un buton drept un punct de interacțiune în viața reală și vom putea deosebi acel link special de restul paginii cu puțin efort.

Imitarea convențiilor de viață reală ne ajută să interacționăm cu lumea virtuală. Aceasta îmbunătățește experiența utilizatorilor, deoarece webul nu se dovedește a fi o interfață străină care necesită o mulțime de învățare pentru a interacționa. Știm că butoanele sunt butoane pentru că arată aproape la fel peste tot, sunt a viziune vizuală iar utilizatorii interacționează cu ei instinctiv.

Același lucru este valabil și pentru ferestre, desktopuri și tab-uri în design-ul UI. Steve Krug, în cartea de utilizare a acestuia nu mă face să cred că folosește exemplul fișierelor de foldere ca o mare utilizare a metaforelor în designul de interfață.

Nu am reușit să dovedesc (încă), dar bănuiesc cu tărie că Leonardo da Vinci a inventat divizoare de tab-uri cândva la sfârșitul secolului al IV-lea. Ca dispozitive de interfață, ele sunt în mod clar un produs de geniu. - Steve Krug

Tab-urile reprezintă exemplul clasic al unei metafore de interfață intuitivă.


icoane

Puțin diferite de metafore identice sunt icoane, așa cum am vorbit mai devreme. De exemplu, semnele de exclamare sunt folosite pentru a reprezenta o anumită stare de importanță sau alertă, astfel încât să folosim acea pictogramă în același context pe web. De asemenea, este posibil să folosim simbolul unui telefon sau o literă pentru a indica contactarea.

Pentru un exemplu perfect, ne putem uita la tabloul de bord WordPress. Fiecare dintre elementele de meniu din partea stângă are un fel de metaforă, cum ar fi un push-pin pentru a reprezenta postările și balonul de vorbire pentru comentarii.

Încurajarea utilizării unei astfel de metafore este identică cu cea din secțiunea anterioară: creează o anumită familiaritate - un "link" dacă vrei - cu lumea reală care ajută cititorul să interpreteze și să navigheze într-o pagină cu ușurință.


Metafoarele active

Am făcut o scurtă vizită despre replicarea obiectelor din viața reală și folosirea icoanelor pentru a forma legături, dar există un tip mai important de metaforă: cele care se extind dincolo de un singur element. Cel mai frapant exemplu pe care îl pot gândi nu este un site web, ci o aplicație. iBooks nu arata ca o aplicatie obisnuita pentru iPad, deoarece este menita sa imite aspectul unei biblioteci reale pentru a adauga acel sentiment de familiaritate pentru cititor. Te uiți la iBooks și imediat știi că are legătură cu cărțile. Dacă se face bine, aceste tipuri de site-uri web se pot dovedi a fi chiar minunate!

Metaforele extinse sunt mai puțin frecvente decât celelalte tipuri care sunt folosite pe majoritatea desenelor de pe site-uri web.

Deși "metaforele extinse" ar putea fi terminologia greșită, acest tip de metaforă este încă cel mai larg tip pe care îl puteți obține. Acestea oferă o fereastră mică în browser-ul tău în viața reală și pot fi o metodă instantanee de a crea o primă impresie despre ce anume are site-ul web.


Tema Monmarthe WordPress.

De ce să folosiți o metaforă?

În scris, folosim o metaforă pentru a exprima, explica și descrie. Metaforele pot fi o modalitate utilă de a conecta o idee cu o idee care nu este similară cu cea a lui (unde o similă ar fi probabil utilizată în schimb), dar unde cele două pot fi folosite împreună pentru a se reprezenta.

Metaforele în designul web, cum ar fi scrisul, sunt folosite ca un mecanism descriptiv prin legarea obiectelor și a ideilor din viața reală de pixeli într-un site web. Poate părea foarte mic și ceva care poate fi trecut cu vederea, dar cititorii de pe web au o perioadă de atenție mai scurtă decât cititorii de imprimare, astfel încât timpul este esențial atunci când navigați pe un site web. Și, în aceste condiții, metaforele devin utile prin copierea asociațiilor de viață reală (cum ar fi culoarea roșie cu pericol sau o lupă cu căutarea) și folosirea lor pe web, astfel încât procesul de scanare a unei pagini Web este accelerat.


Atracţie

În calitate de designeri, putem valorifica metaforele pentru a spori atractivitatea designului și pentru a face design-urile noastre memorabile. Vrem ca utilizatorii să se conecteze la site-ul web și, deja, cele mai multe site-uri web au o formă de metafore în uz pentru a se potrivi publicului țintă. Site-urile web reflectă concepte, companii, persoane și obiecte din viața reală, iar stilurile alese nu diferă de cele din viața reală. Nu numai metaforele creează un sentiment de familiaritate între pixeli pe o pagină web și chestiuni legate de viața reală, dar pot fi de asemenea folosite pentru a se conecta la o anumită audiență.

Să luăm de exemplu pagina de pornire a BBC's CBeebies. Site-ul este construit în jurul unui fundal care ilustrează o grădină cu copaci și curcubeu, o imagine idealistă a lumii care este comună în întreaga multitudine de medii orientate spre copii. Metafora unei grădini online îi salută pe copii să folosească site-ul, în timp ce dacă ar fi proiectat ca pagina de pornire a Microsoft, nu ar fi atât de atractivă pentru copii să folosească.


Concluzie

Metaforele sunt folosite în toate mass-media pentru a exprima ceva ca pe altceva și, pe site-urile web, sunt o modalitate foarte bună de a comunica familiaritatea și de a atrage cititorii într-un design. Când luăm în considerare acest lucru în scara lumii de 4,5 miliarde de ani, web-ul este încă un mediu foarte nou, astfel încât crearea de legături între real și virtual este o măsură tranzitorie, dar una care funcționează.


Metaforele în acțiune

Înflori

Flourish este o agenție de web design care ia numele în serios. Cu o înflorire definită ca "să crească sau să se dezvolte într-un mod sănătos sau energic", este prezentat conceptul de copac aflat în creștere în terenuri altfel goale și un design bazat pe natură.

Design interior XHTML Template

Șablonul "Design interior" este un obiect ThemeForest, care reprezintă un birou, un exemplu perfect de metaforă în joc.

Lansa

Lansarea este un alt obiect ThemeForest, dar acesta se aseamănă cu lansarea unui site web la lansarea unei rachete, la fel ca multe desene sau modele similare.

Mutant Labs

Mutant Labs, o companie de dezvoltare de software, preia partea "lab" a numelui lor într-un context științific, de dragul designului site-ului.