Share
Visuele hiërarchie is een van de belangrijkste principes achter effectief webontwerp. Dit artikel gaat in op de vraag waarom het ontwikkelen van een visuele hiërarchie cruciaal is op het web, de theorie erachter, en hoe je enkele zeer eenvoudige oefeningen in je eigen ontwerpen kunt gebruiken om deze principes in de praktijk te brengen.
In de kern draait het bij design om visuele communicatie: om een effectieve ontwerper te zijn, moet je je ideeën duidelijk aan kijkers kunnen communiceren of anders hun aandacht kunnen verliezen. Mensen zijn echter wispelturig; als je hen een enorme hoeveelheid informatie geeft, is de kans groot dat 99 van de 100 mensen niet de moeite nemen om het te lezen. Waarom? Omdat de meeste mensen inherent visuele denkers zijn, geen gegevensverwerkers.
Om erachter te komen waarom dit waar is, is het belangrijk om een beetje meer te weten over de manier waarop we dingen zien. Mensen zijn niet wat je 'gelijkekansenbetalers' zou kunnen noemen. In plaats van visuele informatie in te nemen en gelijkmatig te verwerken, organiseren mensen wat ze zien in termen van 'visuele relaties'. Laten we het volgende beeld van twee gewone cirkels beschouwen:
De kans is groot dat u "twee cirkels" niet ziet; In plaats daarvan zag je "één zwarte cirkel en één kleinere rode cirkel".
De reden is vrij eenvoudig: wanneer iemand iets eenvoudigs presenteert als twee cirkels, ziet hij niet alleen twee gewone cirkels, maar vindt hij ook een manier om differentiëren tussen de twee. De ene cirkel kan groter, kleiner of gekleurd zijn of een andere verscheidenheid aan verschillen. Deze verschillen stellen ons in staat onderscheid te maken tussen objecten en ze een unieke betekenis te geven.
Laten we nu naar een complexere afbeelding kijken:
De extra complexiteit versterkt feitelijk onze wens om de objecten te "classificeren" in termen van relaties. Overeenkomsten en verschillen worden het kader waarin we de vormen bekijken. Verschillen in schaal suggereren dat het ene object dichter bij ons staat dan het andere of dat het ene dominanter is dan het andere; Kleurvariaties kunnen erop duiden dat het ene object een unieke persoonlijkheid heeft die het onderscheidt van het andere object. Veel informatie kan in slechts één afbeelding worden geleverd met behulp van enkele zeer elementaire hulpmiddelen.
? Begrijpen dat mensen onze ontwerpen in termen van relaties zullen zien, is cruciaal om een effectievere ontwerper te worden.
Laten we dit voorbeeld terugnemen naar webontwerp; Omdat webontwerp helemaal draait om het communiceren van visuele informatie, is het van cruciaal belang dat mensen onze ontwerpen zien in termen van relaties, om een effectievere ontwerper te worden. Hoewel het misschien lijkt alsof het genoeg is om gewoon informatie uit te delen, als webontwerpers, is het onze taak om die onbewerkte informatie op te splitsen in heerlijke kleine brokken visueel relevante informatie die gemakkelijk in het oog vallen, en nog belangrijker, effectief bij het overbrengen van de boodschap. achter een webpagina.
Er zijn honderd verklaringen voor waarom mensen zien in termen van relaties; Als je het antropologisch zou traceren, zou je kunnen concluderen dat een mentaliteit van jager-verzamelaars mensen op een bepaald moment dwong te erkennen dat het zien van relaties een survivalvaardigheid is.
Kijk, zelfs de prehistorische mens had een gezond respect voor visueel contrast.
Misschien is een meer praktische verklaring dat het gewoon de manier is waarop onze hersenen informatie categoriseren: het groeperen van vergelijkbare visuele elementen en het organiseren ervan in betekenisvolle patronen is net zo inherent aan onze menselijke aard als eten of drinken. Hoe dan ook, feit is dat zelfs in zijn meest elementaire vorm, informatie die is georganiseerd met een hiërarchie in gedachten altijd effectiever zal zijn in communicatie dan ongeorganiseerde informatie..
Beschouw de volgende afbeelding van twee tekstblokken:
In het bovenstaande voorbeeld zien we de meest rudimentaire vorm van een visueel hiërarchiesysteem toegepast op tekst. De informatie in elk van de twee voorbeelden is niet anders, maar hoe deze dramatisch is opgesplitst, verandert de manier waarop de lezer het zal zien en in zich opneemt. Als we het hebben over visuele hiërarchie in termen van typografie, bedoelen we daarmee . De nabijheid, schaal en gelijkenis van de tekstopmaak stelt een lezer in staat om het onderste voorbeeld te ordenen in titels en alinea's. De hiërarchie geeft de titels meer betekenis dan de andere informatie en maakt het gemakkelijker om te scannen.
Oké, dus dit is allemaal vrij eenvoudig, toch? Laten we een duik nemen in enkele diepere voorbeelden van hoe je dit heel kunt toepassen basis- principe voor sommigen heel geavanceerde designs:
Het is goed en wel te begrijpen dat visuele hiërarchie belangrijk is, maar hoe creëert een ontwerper het eigenlijk? De 'gereedschappen' die we zullen bekijken, zijn net zo eenvoudig als de gereedschapset van een timmerman - hamer, spijker, zaag, enz. - Wat u ermee doet, is wat telt!
Objecten die groter zijn, vragen meer aandacht. Grootte gebruiken als hiërarchisch hulpmiddel is een effectieve manier om het oog van een kijker naar een bepaald gedeelte van de pagina te leiden. Omdat grootte een van de krachtigste organisatievormen is, is het belangrijk om te correleren grootte met belang in een ontwerp. De grootste elementen zouden in de meeste gevallen het belangrijkste moeten zijn; de kleinste elementen zouden het minst belangrijk moeten zijn.
Het gebruik van GROOT, vetgedrukt voegt een niveau van orde aan dit anders chaotische ontwerp toe. Het oog zou natuurlijk van grote elementen naar de kleinere elementen moeten gaan.
Kleur is een interessante tool omdat het zowel als een organisatorisch hulpmiddel als als een persoonlijkheidsinstrument kan fungeren. Vetgedrukte, contrasterende kleuren op een bepaald element van een website zullen aandacht vereisen (zoals met knoppen of foutmeldingen of hyperlinks). Wanneer gebruikt als een persoonlijkheid gereedschap kan kleur zich verder uitstrekken tot meer geavanceerde soorten hiërarchieën; Het gebruik van weelderige, geruststellende kleuren kan een emotionele aantrekkingskracht op een pagina hebben. Kleur kan van invloed zijn op alles van een merk van websites (bijvoorbeeld: CocaCola Red) tot symboliek (dwz: koele, ingetogen kleuren). Geavanceerde kleurtoepassingen kunnen zelfs worden gebruikt om informatie binnen een hiërarchie te "classificeren", zoals in het volgende voorbeeld:
De Spectra Viewer-website gebruikt kleuren om verschillende nieuwscategorieën weer te geven, dus het is gemakkelijk om een bepaald type informatie te vinden op basis van de kleurtoets.
Contrast toont relatief belangrijk. Dramatische verschuivingen in tekstformaat of kleur zullen een boodschap overbrengen dat iets anders is en aandacht vereist. Als u van een lichte achtergrondkleur overschakelt naar een donkere achtergrondkleur, kunt u snel de kerninhoud van een pagina van het voettekst scheiden.
Het contrast tussen het lichte, luchtige kopgedeelte en de donkere, aardse voettekst creëert een duidelijke hiërarchie van informatie.
Uitlijning creëert orde tussen elementen. Het kan net zo eenvoudig zijn als het verschil tussen een "inhoudskolom" en een "zijbalkkolom", maar uitlijning kan ook complexere hiërarchische rollen aannemen. Denk bijvoorbeeld aan de kracht van informatie in de rechterbovenhoek van een webpagina. Omdat gebruikers algemeen verwachten dat informatie op dat deel van het scherm wordt gekoppeld aan profielen, accounts, winkelwagentjes, enzovoort, geeft dit op alle plaatsen in dat gebied een gevoel van 'officieel'. Afstemming kan ook interesse opwekken bij gebruik op unieke manieren, zoals in de volgende voorbeelden:
The Stuff Template gebruikt een uniek horizontaal uitlijnsysteem om merk en navigatie te scheiden van de inhoud van blogposts.
De Flex-sjabloon gebruikt een op rasters geïnspireerde lay-out om zowel visuele interesse als een door taxonomie gestuurde visuele hiërarchie te ontwikkelen.
Herhaling kent relatieve betekenis toe aan elementen; Als alle tekst "alinea" grijs is, kan een gebruiker een nieuw blok grijze tekst zien als hij een nieuw blok grijze tekst aanneemt; wanneer diezelfde gebruiker een blauwe link of een zwarte titel tegenkomt, kan hij veilig aannemen dat het anders en uniek is dan de grijze tekst.
De site van Virgin maakt repetitieve elementen zoals alineatekst en breekt vervolgens de herhaling wanneer deze de aandacht wil trekken (zoals de rode citaattekst).
Nabijheid scheidt elementen van elkaar en maakt subhiërarchieën. Binnen een pagina kunnen er widgets zijn die van elkaar zijn gescheiden door spatie; binnen die widgets is er een nieuwe hiërarchie van titel, ondertitel en inhoud. Nabijheid is ook de snelste manier om vergelijkbare inhoud te associëren. In het volgende voorbeeld is het eenvoudig om bepaalde soorten inhoud eenvoudig te vinden op basis van hun nabijheid met elkaar.
De Tuts + -sites doen dit eigenlijk heel goed (niet tooteren met onze eigen hoorn!). De linker "inhoud" kolom is duidelijk gescheiden in de nabijheid van de zijbalk-widgetruimte. Bovendien worden metadata binnen een bepaalde blogpost in de nabijheid van die post en verder van andere posts geplaatst, wat een gevoel van "erbij horen" versterkt..
Het dicht opeen inpakken van elementen in een ruimte maakt het "zwaar" en rommelig aanvoelen; Wanneer elementen te veel uit elkaar worden geplaatst, kunnen ze de relaties met elkaar verliezen. Wanneer een pagina 'precies goed' is ontworpen, zal het oog gemakkelijk herkennen wanneer elementen gerelateerd zijn en wanneer dat niet het geval is.
Door elementen uit te lijnen en veel witruimte op de pagina te behouden, maakt dit ontwerp het gemakkelijker voor mensen om rond te zwerven en de kleine, dicht opeengepakte vakken met inhoud te vinden.
Misschien wel de meest open-ended tool in de Toolbox Hiërarchieën, kan stijl worden gebruikt om een vorm van hiërarchie over te brengen die zowel de andere tools omhelst als overstijgt. Bijvoorbeeld: een vlakke grijze achtergrond zal anders "voelen" dan een asfalt-getextureerde achtergrond. Deze stijl of persoonlijkheid gegeven door de ontwerper zal natuurlijk een rol spelen in hoe verschillende visuele relaties gemaakt worden.
Het is de moeite waard te vermelden dat stijl ook een van de gevaarlijkste gereedschappen is die een ontwerper kan gebruiken. Net als een timmerman die zijn vinger afsnijdt aan een lintzaag, kan een ontwerper mensen gemakkelijk misleiden door bepaalde elementen te benadrukken door middel van stijl. Stel je een zwaar getextureerd, zwaar ontworpen site-element voor dat zoveel aandacht vereist dat het de aandacht afleidt in plaats van te informeren. Ditzelfde idee strekt zich uit tot lettertypen, knoppen, tabbladen en andere elementen. Wees bewust van de impact op een algeheel ontwerp wanneer u ervoor kiest extra elementen en elementen aan een element toe te voegen.
De website van Jeff Finley combineert een groot aantal hulpprogramma's die we hier hebben besproken, maar het gebruik van oorspronkelijk gestileerde elementen boven het standaard UI-veevoeder geeft het hele ontwerpgevoel van een intentionele hiërarchie. Jeff slaagt erin net genoeg stijl toe te voegen om zijn site persoonlijk te laten voelen zonder dat hij overboord gaat.
Goede visuele hiërarchie gaat niet over wilde en gekke graphics of de nieuwste photoshop-filters, maar over het organiseren van informatie op een manier die bruikbaar, toegankelijk en logisch is voor de dagelijkse bezoeker van de site.
Zoals ik in de vorige paragraaf zojuist heb gesuggereerd, is het belangrijk op te merken dat hiërarchie zowel voor goed als slecht kan worden gebruikt. Denk aan alle vervelende Flash-advertenties, pop-upvensters, glitterbanners enz. Waarmee het internet in de loop der jaren te kampen heeft gehad! Hoewel deze advertenties erin slagen de aandacht te trekken, falen ze uiteindelijk de site-eigenaar en de kijker door de visuele hiërarchie binnen een site te doorbreken. Evenzo, als een ontwerper een visuele hiërarchie opbouwt zodat bepaalde belangrijke stukjes informatie bijna niet te vinden zijn, heeft de ontwerper gefaald in zijn taak. Goede visuele hiërarchie gaat niet over wilde en gekke graphics of de nieuwste photoshop-filters, maar over het organiseren van informatie op een manier die bruikbaar, toegankelijk en logisch is voor de dagelijkse bezoeker van de site.
?Ontwerpers kunnen normale chaos creëren; ze kunnen duidelijk ideeën overbrengen door het organiseren en manipuleren van woorden en afbeeldingen .?-Jeffery Veen, The Art and Science of Web Design
Jeffrey Veen schreef die woorden in 2001, maar ze hebben vandaag nog steeds veel macht, waar 'informatie-overload' alledaags lijkt. Als mensen hebben we altijd een scherp gevoel voor visuele organisatie. Als samenleving zijn we de afgelopen decennia echter gebombardeerd met een ware tsunami aan visuele informatie; Dientengevolge zijn mensen tegenwoordig hypergevoelig voor visuele hiërarchie. Dit is met name het geval op het web, waar studies hebben aangetoond dat reguliere websurfers hebben geleerd inhoud 'aangeboren' te 'scannen'; automatisch informatie zoeken die relevant is voor hun interesses en informatie negeren / negeren die dat niet doet.
Daarom is het verplicht om een meester in de visuele hiërarchie te worden, niet verplicht. Aangezien de typische web-surfplatformen uitbreiden van de traditionele monitor naar telefoons, tablets, zelfs televisies, wordt het steeds belangrijker dat we sterke, duidelijke visuele systemen gebruiken om met websurfers te communiceren..
Tot slot wil ik eindigen met een heel eenvoudige oefening. Als voorbeeld gebruiken we een website die u vaak bezoekt, of een project waaraan u recent hebt gewerkt; De oefening gaat als volgt:
In de meeste gevallen bevat het antwoord tinten "nee". Daar zijn veel redenen voor - eisen van klanten, onervaren ontwerpers, ontwerp door commissie - of honderd andere redenen die u waarschijnlijk hebt gelezen. In sommige gevallen kan de ontwerper de kijker misschien willen misleiden (denk aan een "gratis" site die gebruikers probeert te begeleiden naar betaalde inhoud). Wat de reden ook is, het begrijpen van de visuele hiërarchie en proberen het te interpreteren, is een manier om de manier te verbeteren waarop je webontwerp in een heel nieuw licht ziet. Hopelijk helpt het ook om je eigen werk te informeren!
Accentsconagua