Ibland tittar du på en webbplats som kan vara attraktiv nog, men något saknas. Den har stora färger, fin grafik, perfekt anpassning och smart kopia, men det är bara något lite blött om det. Även om allt ser bra ut, kommer ingenting verkligen igenom på en högre nivå än någonting annat. Denna lösning på detta problem är visuell hierarki.
Designers är ofta intuitiva nog att ge elementen på sidan en tydlig hierarki utan att ens tänka, andra gånger leder avsaknaden av avsikt på detta område till en design som den som beskrivits ovan. Denna artikel kommer att undersöka några av de grundläggande principerna för utformning med en visuell hierarki av information i åtanke.
Principer på arbetsplatsen
Anledningen till att den visuella hierarkin är så viktig är att genom att behärska det, kan du få stor kontroll över hur en besökare läser din sida. I en idealisk värld skulle varje tittare läsa all information på sidan noggrant, så att du får oändlig tid och utrymme för att få ditt meddelande över. Verkligheten är dock att du sannolikt bara har några sekunder att ta tag i någons uppmärksamhet och berätta för dem vad webbplatsen handlar om innan de vänder sig och går någon annanstans.
Genom att skapa en tydlig hierarki med grafik och information kan läsarna nästan inte låta bli att omedvetet följa den väg du har ställt ut för dem. Tekniskt sett kommer ingen två personer att läsa en sida exakt samma sätt, men du kan skapa starka trender mot det sätt du föredrar.
Detta spelar ut över ett antal olika områden och metoder. Visuell hierarki kan upprättas genom ett elements position, storlek, färg och komplexitet i förhållande till de övriga elementen på sidan.
För att strukturera ditt meddelande ordentligt måste du överväga allt från de teckensnitt du använder till mellanslag runt ett visst objekt. Var alltid medveten om vad som drar uppmärksamhet på din sida och se till att det är avsiktligt.
Placera
Position är ett av de mest grundläggande sätten att etablera hierarkin. Tänk på följande exempel:
Odds är när du först tittat på den här bilden, var du inte helt säker på vad som hänt. Dina ögon tippade förmodligen runt lite, letade efter ett distinkt mönster. Kolla nu på det här exemplet, med samma bokstäver.
Plötsligt, trots att meddelandet fortfarande förvrängs av fysiskt utrymme och onödiga former blir det mycket lättare att dechiffrera när vi vänder om ordern. Även om båda meddelandena gjorde att dina ögon vandrade runt bilden, gjorde den andra det mycket lättare att se bokstäverna som kom samman för att bilda ord än de första. Detta beror på att du brukar läsa från vänster till höger. När det finns osäkert visuellt kaos på en sida, är det första sättet att din hjärna försöker organisera informationen i den ordning du fick lära dig att läsa: från vänster till höger, från topp till botten.
Detta är inte tänkt att chocka dig, det är uppenbart att vi läser vänster till höger. Att bli mer medveten om denna tendens hjälper dig att strukturera ditt innehåll på lämpligt sätt. Kom ihåg att denna princip sträcker sig bortom ord i grafiska artiklar på en sida. Om du presenterar dina användare med ett rutnät av objekt, som är ganska lika i storlek, form och färg, kommer de att ha en tendens att läsa rutnätet från vänster till höger om inte annat uppmanas.
Är det inte tråkigt?
Du kanske undrar vad dina mönster skulle vara om du starkt följde z-läsningsprincipen ovan. Svaret är otroligt tråkigt och oordentligt.
Målet är då att kunna ställa upp objekt på en sida på ett mer attraktivt sätt samtidigt som läsaren ignorerar sin undermedvetna tendens att läsa i en z. Detta uppnås genom användning av de andra principerna för visuell hierarki som diskuteras nedan.
Storlek
I designvärlden är storleken definitivt viktig. Genom att variera storleken på objekt på en sida kan du enkelt bryta z-mönster tendensen.
Trots det faktum att den skriftliga frågan är högre än torget, tar kvadratens stora storlek och djärvhet uppmärksamheten före orden. Låt oss ta en titt på den här principen praktiskt tillämpad på webbdesign.
Det här är en extremt enkel sida som använder en tydlig visuell hierarki. Citatet i mitten av sidan är tillräckligt stort för att vara det första objektet som drar uppmärksamheten. Efter detta är logotypen till vänster inte bara det naturliga stället att återställa dina läs tendenser, men det är också nästa största kontrast på sidan. Designern har strukturerat webbplatsen så att om du bara spenderar några sekunder på sidan läser du? Tänk Big. Var Nimble.? följt av? Hobson Dungog + Davis.?
Det här är klassisk manipulering av visuell hierarki på jobbet (observera att viddrymden också är starkt i spel). Det hade varit lätt att installera citatet som ska visas längst upp till vänster följt av logotypen, men layouten skulle inte ha varit lika intressant eller flexibel.
Färg
Enkel användning av färg kan vara ett av de mest visuellt intressanta sätten att skilja på element på en sida och uppmärksamma var du vill ha den. Din hjärnas besatthet med kontrast kommer att få dina ögon att fokusera på föremål som utmärker sig helt enkelt på grund av deras skillnad i färg i förhållande till de omgivande föremålen. Tänk på följande exempel:
Denna designer har utnyttjat flera kontrasterande och kompletterande färgtoner för att skapa visuell hierarki i vad som annars skulle vara ett monotont block av text. De ljusare sektionerna uppmärksammar din uppmärksamhet och gör det enkelt att ta del av stycket utan att egentligen ta sig tid att läsa den.
Kontextet kommer också kraftigt i spel här. Om det här var en tryckdesign, skulle du inte tänka något av den ljusare färgade texten utöver det som var tänkt att ta tag i din uppmärksamhet. Men på webben kommer din hjärna att förvänta sig dessa uppenbart avsiktliga fokusområden för att beteckna något mer signifikant: i detta fall en länk.Och att göra den ljusare texten till länkar är precis vad den här designern har gjort. Trots den otraditionella formateringen som representeras av bristen på ett navigeringsområde kan du snabbt räkna ut hur webbplatsen fungerar på grund av användningen av, du gissade den, visuell hierarki.
Visuell komplexitet
Det sista sättet vi ser på att styra den visuella hierarkin är genom visuell komplexitet och urskiljbara mönster. Principalen här är att om du vill ha något att sticka ut på din sida mer än föremålen runt det, gör det betydligt mer eller mindre komplext. Även om föremålen är av samma storlek och färg, kommer den större komplexiteten att öka visuellt intresse.
Denna princip knyter i starkt med urskiljbara mönster. Som tidigare nämnts försöker din hjärna ständigt att förnuftiga och tvinga ordning på det kaos av pixlar som du ser på skärmen. Det kommer därför att hålla fast vid de områden som inte bara är de mest intressanta på grund av deras komplexitet, utan även de föremål som det kan införa ett välbekant schema på.
Det grundläggande exemplet ovan kan lära oss mycket om hur vi fokuserar vår uppmärksamhet. Det finns två områden av bilden som står mest ut. Det första och mest uppenbara området är de två märkliga formerna i översta raden. Inte bara är de mer visuellt komplexa än föremålen runt dem, de påminner också om något som är bekant: ett par ögon. Trots kaoset omkring dem, uppmärksammar dessa former din uppmärksamhet, eftersom ansikten är bland de mest kända, vänliga eller hotande objekten vi stöter på. Om du vill ställa ett visst område högt i den visuella hierarkin oavsett var den ligger på en sida, kan du inte gå fel med ett ansikte.
Efter att ha blivit uppe på ögonparet är ditt nästa troliga mål de två upprepade trianglarna i bottenrad. Här igen försöker din hjärna ålägga ordning. Det förstår detta område lite mer än de andra på grund av det upprepade elementet. Att använda selektiv repetition i dina mönster är ett utmärkt sätt att lägga till visuellt intresse, koppla bort avlägsna objekt och leda tittaren längs den väg som du vill att de ska gå. För att använda repetition effektivt, implementera bara de variabler som vi just diskuterat (storlek, färg och komplexitet) som grund för det upprepade elementet.
Slutsats
Målet med denna artikel var att göra dig mer medveten om hur man använder begreppen visuell hierarki för att kontrollera framträdandet av objekt på en sida och styra dina tittare i den riktning du vill att de ska gå. Jag hoppas att jag lyckats få dig att medvetet tillämpa en tydlig och avsiktlig hierarki i varje element som du designar.
Använd kommentarerna nedan för att berätta vad du tänkt på artikeln och huruvida du någonsin hade tänkt mycket på din användning av visuella informationshierarkier.