Share
Visuell hierarki är en av de viktigaste principerna bakom effektiv webbdesign. Denna artikel kommer att undersöka varför att utveckla en visuell hierarki är avgörande på webben, teorin bakom den och hur du kan använda några mycket grundläggande övningar i dina egna mönster för att sätta dessa principer i bruk.
I sin kärna handlar design om visuell kommunikation: För att vara en effektiv designer måste du tydligt kommunicera dina idéer till tittare eller annars förlora sin uppmärksamhet. Människor är dock ojämna; om du ger dem ett massivt informationsblock, är risken att 99 av 100 personer inte kommer att bry sig om att läsa den. Varför? Eftersom de flesta människor i sig är visuella tänkare, inte dataprocessorer.
För att ta reda på varför detta är sant är det viktigt att förstå lite om hur vi ser saker. Människor är inte vad du skulle kalla "lika möjligheter se-ers". Snarare än att ta in visuell information och bearbeta den jämnt, organiserar människor vad de ser när det gäller "visuella relationer". Låt oss överväga följande bild av två vanliga cirklar:
Chansen är att du inte ser "två cirklar"; Istället såg du "en svart cirkel och en mindre röd cirkel".
Anledningen är ganska enkel: När den presenteras med något så enkelt som två cirklar, kommer en person inte bara att se två vanliga cirklar, de kommer hitta ett sätt att skilja mellan de två. En cirkel kan vara större, eller mindre, eller färgad, eller någon annan variation av skillnader. Dessa skillnader gör att vi kan skilja mellan objekt och ge dem unika betydelser.
Låt oss nu titta på en mer komplex bild:
Den tillförda komplexiteten förverkligar faktiskt vår önskan om att "klassificera" objekten i relationer. Likheter och skillnader blir den ram som vi ser formerna igenom. Skillnader i skala föreslår att ett objekt är närmare oss än en annan eller att en är mer dominerande än den andra; Färgvariationer kan föreslå att ett objekt har en unik personlighet som skiljer den från det andra objektet. Mycket information kan levereras på bara en enda bild med hjälp av några mycket rudimentära verktyg.
? Att förstå att människor ser vår design när det gäller relationer är avgörande för att bli en effektivare designer.
Låt oss ta tillbaka detta exempel till webbdesign; Eftersom webbdesign handlar om att kommunicera visuell information är det viktigt att förstå att människor ser vår design när det gäller relationer är en viktigare formgivare. Medan det verkar som om det bara räcker med att skäla ut information, som webbdesigners, är vår uppgift att bryta ner den råa informationen i läckra små bitar av visuellt relevant information som är lätt i ögonen, och viktigare, effektiv för att kommunicera meddelandet bakom en webbsida.
Det finns hundra förklaringar för varför människor ser i förhållande till varandra. Om du skulle spåra den antropologiskt kan du kanske dra slutsatsen att en jägaresamlare mentalitet tvingade människor på ett ställe att erkänna att se relationer är en överlevnadskunskap.
Se, även förhistorisk man hade en hälsosam respekt för visuell kontrast.
Kanske är en mer praktisk förklaring att det bara är sättet att våra hjärnor kategoriserar information: att gruppera liknande visuella element och organisera det i meningsfulla mönster är lika naturligt för vår mänskliga natur som att äta eller dricka. Hur som helst är faktumet att även i sin mest grundläggande form är information som är organiserad med en hierarki i åtanke alltid effektivare för att kommunicera än oorganiserad information.
Tänk på följande bild på två textblock:
I exemplet ovan ser vi den mest rudimentära formen av ett visuellt hierarkisystem som tillämpas på text. Informationen i vart och ett av de två exemplen är inte annorlunda, men hur det har blivit uppbrott förändras dramatiskt hur läsarens kommer att se det och ta det in. När vi pratar om visuell hierarki när det gäller typografi så menar vi det här . Textformateringens närhet, skala och likhet gör det möjligt för en läsare att organisera det lägre exemplet i titlar och stycken. Hierarkin ger titlarna mer mening än den andra informationen, och gör det enklare att skanna.
Okej, så här är alla ganska grundläggande grejer, eller hur? Låt oss ta ett dyk i några djupare exempel på hur du kan ansöka så mycket grundläggande princip till några mycket sofistikerad mönster:
Att förstå att den visuella hierarkin är viktig är allt bra och bra, men hur skapar en designer det egentligen? De verktyg som vi ska titta på är lika enkla som snickeriets verktygssats - hammare, spik, såg osv. Det är vad du gör med dem är det som räknas!
Objekt som är större kräver mer uppmärksamhet. Att använda storlek som ett hierarkiskt verktyg är ett effektivt sätt att styra betraktarens öga mot en viss del av sidan. Eftersom storlek är en av de mest kraftfulla formerna av organisation, är det viktigt att korrelera storlek med betydelse i en design. De största elementen borde vara de viktigaste i de flesta fall; de minsta elementen borde vara minst viktiga.
Användningen av BIG, fetstil lägger en orderordning till denna annars kaotiska design. Ögat bör naturligtvis gå från stora element ner till de mindre elementen.
Färg är ett intressant verktyg eftersom det kan fungera som både ett organisationsverktyg och ett personlighetsverktyg. Djärva, kontrasterande färger på ett visst element på en webbplats kommer att kräva uppmärksamhet (t.ex. med knappar eller felmeddelanden eller hyperlänkar). När den används som en personlighet verktyg, kan färg sträcka sig utöver mer sofistikerade typer av hierarki; Att använda frodiga, tröstande färger kan ge en känslomässig tilltal till en sida. Färg kan påverka allt från ett webbplatser märke (dvs: CocaCola Red) till symbolism (dvs: coola, dämpade färger). Avancerade färgansökningar kan till och med användas för att "klassificera" information inom en hierarki, som i följande exempel:
Spectra Viewer-webbplatsen använder färger för att representera olika nyhetskategorier, så det är lätt att hitta en viss typ av information baserat på färgnyckeln.
Kontrast visar relativt viktigt. Dramatiska skift i textstorlek eller färg kommer att ge ett meddelande om att något är annorlunda och kräver uppmärksamhet. Att byta från en ljus bakgrundsfärg till en mörk bakgrundsfärg kan snabbt separera kärninnehållet på en sida från sidfoten.
Kontrasten mellan ljuset, den luftiga rubriken och den mörka jordiska foten skapar en tydlig hierarki av information.
Anpassning skapar ordning mellan element. Det kan vara lika enkelt som skillnaden mellan en "innehållskolumn" och en "sidospärrkolumn", men inriktning kan också ta på sig mer komplexa hierarkiska roller. Tänk på exempelvis kraften i information placerad i högra höger på en webbsida. Eftersom användarna generellt förväntar sig information i den delen av skärmen som ska associeras med profiler, konton, kundvagnar, etc. ger det allt som finns i det området en känsla av "tjänstemannen". Anpassning kan också provocera intresse om det används på unika sätt, såsom i följande exempel:
Stuffmallen använder ett unikt horisontellt anpassningssystem för att skilja varumärke och navigering från innehållet i blogginlägget.
Flex Template använder en rutin inspirerad layout för att utveckla visuellt intresse samt en taxonomisk driven visuell hierarki.
Repetition tilldelar relativ betydelse för element; Om alla "stycken" -texterna är gråa, när en användare ser ett nytt block med grå text kan han anta att det är en annan grundläggande paragraf; när samma användare möter en blå länk eller en svart titel kan han säkert anta att det är annorlunda och unikt från den grå texten.
Virgin-webbplatsen skapar repetitiva element som stycketext och bryter sedan upprepningen när den vill dra uppmärksamhet (som den röda citattexten).
Närhet separerar element från varandra och skapar underhierarkier. Inom en sida kan det finnas widgets som är separerade från varandra i rymden; Inom dessa widgets finns en ny hierarki med titel, text och innehåll. Närhet är också det snabbaste sättet att associera liknande innehåll. I det följande exemplet är det enkelt att hitta vissa typer av innehåll helt enkelt baserat på deras närhet till varandra.
Tuts + -platserna gör det egentligen så bra (inte för att vi ska ha ett eget horn!). Vänster "innehåll" -kolumnen är tydligt åtskild i närheten av sidospårens widgetutrymme. Dessutom är metadata inom ett visst blogginlägg placerat i närheten av det inlägget och vidare från andra inlägg, förstärkning av en känsla av "tillhörighet".
Denselt packningselement in i ett utrymme gör att den känns "tung" och rörig; När elementen är åtskilda för mycket, kan de förlora relationerna till varandra. När en sida är utformad "precis rätt", kommer ögat lätt att känna igen när element är relaterade och när de inte är.
Genom att skilja ut element och hålla gott om blankutrymme på sidan gör den här konstruktionen det enklare för människor att ströva runt och hitta de små, tätt packade rutorna med innehåll.
Kanske kan det mest öppna verktyget i hierarkistverktygslådan användas för att ge en form av hierarki som både omfattar och överskrider de andra verktygen. Till exempel: en platt grå bakgrund kommer att "känna" annorlunda än en asfaltstrukturerad bakgrund. Den här stilen eller personligheten som ges av designer kommer naturligtvis att spela en roll i hur olika visuella relationer görs.
Det är värt att nämna att stilen är ett av de farligaste verktygen som en designer kan använda. Precis som en snickare skär fingeren på en bandsåg, kan en designer lätt vilseleda människor genom att överbelasta vissa element genom stil. Föreställ dig ett starkt strukturerat, kraftigt utformat sidelement som kräver så mycket uppmärksamhet att det distraherar istället för att informera. Samma idé sträcker sig till teckensnitt, knappar, flikar och andra element. Var försiktig med effekten på en övergripande design när du väljer att lägga till extra stil och polera till ett element.
Jeff Finleys webbplats gör ett bra jobb med att kombinera många av de verktyg som vi diskuterade här, men hans användning av ursprungligen stylade element över det vanliga användargränssnittet är det som ger hela designen av avsiktlig hierarki. Jeff lyckas lägga till tillräckligt mycket stil för att få sin webbplats att känna sig personlig utan att det går överbord.
En bra visuell hierarki handlar inte om vild och galen grafik eller de senaste Photoshop-filerna. Det handlar om att organisera information på ett sätt som är användbart, tillgängligt och logiskt för den dagliga besökaren.
Som jag just föreslog i det sista avsnittet är det viktigt att notera att hierarkin kan användas både bra och ont. Tänk på alla irriterande Flash-annonser, popup-fönster, glitterbanderoller etc. som webben har plågats med under åren! Medan dessa annonser lyckas fånga uppmärksamhet, misslyckas de slutligen webbplatsägaren och betraktaren genom att bryta den visuella hierarkin inom en webbplats. På samma sätt, om en designer bygger en visuell hierarki så att vissa viktiga uppgifter är nästan omöjliga att hitta, kommer konstruktören att misslyckas vid sin uppgift. En bra visuell hierarki handlar inte om vild och galen grafik eller de senaste Photoshop-filerna. Det handlar om att organisera information på ett sätt som är användbart, tillgängligt och logiskt för den dagliga besökaren.
?Designers kan skapa normalitet ur kaos; de kan tydligt kommunicera idéer genom att organisera och manipulera ord och bilder. ?-Jeffery Veen, Konst och Vetenskap för webbdesign
Jeffrey Veen skrev dessa ord 2001, men de har fortfarande mycket makt idag där "information överbelastning" verkar vara vanligt. Som människor har vi alltid haft en skön känsla för visuell organisation. Men som ett samhälle har vi blivit förskräckta med en verklig tsunami med visuell information under de senaste par decennierna. Som ett resultat är människor numera hyperkänsliga för visuell hierarki. Detta är speciellt fallet på webben där studier har visat att vanliga surfare har lärt sig att "skanna" innehållet på egen hand. söker automatiskt information som är relevant för deras intressen och kasserar / bortse från information som inte gör det.
På grund av detta blir det en ledare för visuell hierarki inte frivillig, det är obligatoriskt. Eftersom de typiska websurfplattformarna expanderar från den traditionella bildskärmen till telefoner, tabletter och även tv-apparater, blir det allt viktigare att vi använder starka, tydliga visuella system för att kommunicera med surfare.
Avslutningsvis vill jag avsluta med en mycket enkel övning. Som exempel använder vi en webbplats som du ofta brukar, eller ett projekt som du nyligen har arbetat med. Övningen går så här:
I de flesta fall kommer svaret att innehålla nyanser av "nej". Det finns många anledningar till detta - kundens krav, oerfaren designers, design-by-committee - eller hundra andra skäl som du noga har läst. Heck, i vissa fall kan designern vill vilseleda tittaren (betrakta en "fri" webbplats som försöker styra användarna till betalt innehåll). Oavsett orsaken, förstå den visuella hierarkin och försöka tolka den är ett sätt att förbättra hur du ser webbdesign i ett helt nytt ljus. Förhoppningsvis hjälper det också med att informera ditt eget arbete!
Accentsconagua