Het principe van nabijheid in webdesign
Onlangs heb ik een oud designboek die ik al een tijdje niet had aangeraakt, en het herinnerde me aan een ontwerpprincipe dat velen van ons waarschijnlijk alleen onbewust of helemaal niet in de praktijk brengen.
Het boek gaat over ontwerpen voor afdrukken, maar ik dacht dat het een geweldig onderwerp zou zijn om te bespreken in de context van webdesign.
Het nabijheidsprincipe vereist dat verwante items visueel worden gegroepeerd, waardoor er minder rommel ontstaat en een meer georganiseerde lay-out wordt bereikt. Items die geen verband houden met elkaar moeten verder uit elkaar worden geplaatst, om hun gebrek aan relatie te benadrukken.
Ik zal details en enkele manieren bespreken waarop dit effectief kan worden geïmplementeerd, maar deze definitie zou moeten volstaan voor wat we in dit artikel zullen bespreken.
Het juiste gebruik van nabijheid, in combinatie met andere ontwerpprincipes, heeft een grote invloed op de gebruikerservaring en, uiteindelijk, op het algehele succes van een website.
Wees niet bang voor witte ruimte
De eerste stap om het principe van nabijheid op de juiste manier te implementeren, is het begrijpen van het belang van witte ruimte in design.
Gebrek aan witte ruimte is een veel voorkomend probleem bij amateurontwerpen. Design is een middel om informatie te communiceren, en wanneer amateurs proberen een boodschap door design te brengen, is hun natuurlijke neiging om de inhoud gelijkmatig te verspreiden om de ruimte te vullen, zonder veel aandacht te schenken aan het potentieel van goed georganiseerde witte ruimte.
Witte ruimte kan het gedrag van de gebruiker net zo veel, zo niet meer, beïnvloeden dan de daadwerkelijke inhoud op de pagina. Witte ruimte leidt de ogen van de gebruiker in de beoogde richting, creëert contrast en maakt een blijvende indruk.
Hoewel de website van W3Avenue hierboven een aanzienlijke hoeveelheid inhoud bevat (met artikelen in verschillende categorieën, zoals elk ontwerpblog) en een reeks zijbalkadvertenties, overweldigt dit de gebruiker niet visueel.
De royale ruimte in de kop en op de juiste manier verdeelde items in de inhoud en zijbalkgebieden dragen bij aan deze schone en georganiseerde look. W3Avenue doet niets bijzonder unieks met zijn inhoud, maar het ontwerp draagt waarschijnlijk bij aan de sterk verkeer het komt in een korte tijdsperiode .
Wees dus niet onzeker over lege ruimte in je ontwerp. Het op de juiste manier gebruiken van witruimte is de eerste stap in de implementatie van het principe van nabijheid en daarmee een ontwerp visueel aantrekkelijker maken.
Visueel gerelateerde elementen groeperen
Witte ruimte is echter slechts een onderdeel van het implementeren van nabijheid. Een ontwerp kan veel witruimte bevatten, maar als items niet correct gegroepeerd zijn , heeft de witruimte weinig effect, zoals geïllustreerd door de twee visitekaartjes hieronder:
De kaart aan de linkerkant is niet rommelig; het heeft wat witte ruimte. Maar de elementen zijn niet logisch gegroepeerd, dus het effect is zwak.
De lezer wordt gedwongen de kaart meerdere keren te scannen. De kaart aan de rechterkant heeft echter een aangenamer visueel effect. De lezer hoeft er alleen maar naar te kijken om de informatie op te nemen (meer hierover later).
De groepering van elementen op de kaart aan de rechterkant is ook logischer . In de eerste set elementen zien we de bedrijfsnaam in groot lettertype met de locatie eronder. De tweede set vertelt ons hoe we informatie over de aangeboden diensten (zoals telefoonnummer en website-adres) kunnen krijgen.
Dit voorbeeld illustreert het belang van nabijheid bij het ontwerpen van afdrukken en een soortgelijk idee kan worden gebruikt voor elementen in webontwerp, zoals weergegeven in de onderstaande schermafbeelding.
Hoewel de website van Arora Designs niet complex of informatie-zwaar is, is het gebruik van witte ruimte en visuele scheiding van gegroepeerde elementen effectief. Hierbij moet worden opgemerkt dat "witruimte" niet wit hoeft te zijn; het kan elke lege ruimte tussen elementen zijn, ongeacht de kleur.
In het geval van Arora Designs heeft de witte ruimte hetzelfde doel, namelijk het visueel scheiden van de koptekst, navigatie en inhoudsgebieden.
Visuele hiërarchie maken
Het effectief gebruiken van witruimte en het groeperen van gerelateerde elementen zijn van cruciaal belang om uw website een duidelijke visuele hiërarchie te geven. Uiteraard vormen de architectuur en informatiestroom van de website de basis voor effectieve nabijheid .
De hiërarchie komt tot uiting in de manier waarop elementen worden gegroepeerd en onderverdeeld.
Deze hiërarchie helpt de gebruiker te begrijpen waar ze zijn geweest en waar ze naartoe willen en helpt zo het doel van de website te communiceren. Een lijst is een goed voorbeeld van een element dat de potentie heeft om visuele hiërarchie over te brengen, zoals aangetoond in de afbeelding hieronder:
Door simpelweg naar de twee bovenstaande lijsten te kijken, zonder de inhoud zelfs maar te bekijken, ziet u dat de lijst aan de linkerkant een duidelijke visuele hiërarchie heeft, die de relaties tussen items toont (ingesprongen items zijn subcategorieën van de primaire items).
Deze hiërarchie zou niet mogelijk zijn zonder witte ruimte (inclusief macro en micro witte ruimte). De lijst aan de rechterkant is slechts een willekeurige groep elementen zonder schijnbare relatie of hiërarchie.
Het implementeren van dit principe op een website met zoiets eenvoudigs als een HTML-lijst is eenvoudig. De uitdaging is om dit principe als leidraad te gebruiken bij de bouw van de website, van de planning en wireframing tot en met het ontwerp.
Lay-outs die gemakkelijk te scannen en te lezen zijn
Inhoud die is georganiseerd in een hiërarchie en die logisch is gegroepeerd, is gemakkelijker te lezen en te scannen .
Koppen moeten bijvoorbeeld de gebruiker toestaan te scannen door duidelijke hoofdpunten aan te geven. Vanzelfsprekend moet de inhoud vanaf het begin worden gepland om een passende visuele hiërarchie weer te geven; de bovenstaande lijst met de ingesprongen items is een slecht voorbeeld, omdat de inhoud niet overeenkomt met de visuele hiërarchie.
Een website die nabijheid gebruikt in zijn architectuur en ontwerp, overweldigt de gebruiker niet met informatie.
Dus, hoewel het relatief eenvoudig is om de principes van nabijheid te implementeren op websites die licht van inhoud zijn, is nabijheid op een veel rijkere website veel belangrijker.
Nieuwswebsites zijn goede case-studies van dit principe. Hieronder is een vergelijking van de Los Angeles Times en de Globe en Mail .
Over het algemeen heeft de website van LA Times een aantrekkelijk ontwerp, voornamelijk vanwege de kleurkeuze en typografie. Maar het heeft ook een schone en overzichtelijke uitstraling, vooral in het kopgedeelte.
Het logo is groot en onderscheidt zich door een effectieve bijdrage aan de branding van de website. Het object dat zich het dichtst bij het logo bevindt, is de horizontale navigatiebalk hieronder. Omdat de navigatiebalk donker is, staat deze in contrast met het logo.
De tekstlinks boven het logo zijn netjes gerangschikt, met veel ruimte tussen de twee secties. Het links uitlijnen van de inhoud in de kop draagt ook bij aan de schone uitstraling.
Elk stukje informatie in de header van de LA Times is gegroepeerd met verwante items, behalve het logo, dat alleen staat. Niets in de kop verwart je of doet je afvragen waar het thuishoort.
Hoe zit het met de Globe en Mail-website, hieronder weergegeven?
De Globe and Mail-website heeft een complexe header-sectie die het principe van nabijheid niet implementeert.
De enige significante hoeveelheid witte ruimte is in het midden, naast het logo, dat niets tot stand brengt. Er verschijnen twee advertenties in de kop, die bijdragen aan de rommel. De advertenties kunnen om financiële redenen noodzakelijk zijn, dus de problemen zijn begrijpelijk.
Het grootste probleem is het rommelige gedeelte boven de grote banneradvertentie. Er is geen duidelijk onderscheid tussen elementen in die sectie.
Drie gestippelde verticale lijnen proberen het gebied in vier secties te scheiden, maar het eerste scheidingsteken is niet logisch. In feite zou die sectie waarschijnlijk uitnodigender zijn als die gestippelde scheidingstekens zijn verwijderd.
Rasters helpen met nabijheid
Een manier om items te groeperen en de witte ruimte op de juiste manier te gebruiken, is om te beginnen met een raster .
Van een vluchtige blik op zowel de LA Times- als de Globe- en Mail-website, lijkt alleen de LA Times zijn ontwerp gebaseerd te hebben op een grid, of op zijn minst op grid-gebaseerde principes te hebben gebruikt in de planningsfase. De website van Globe en Mail toont weinig bewijs van een grid-indeling.
Een op rasters gebaseerde lay-out, met de juiste rugmaten, biedt ruimte tussen de secties, en in veel gevallen dwingt het de ontwerper om principes van nabijheid te implementeren zonder er zelfs maar aan te denken.
Hieronder staan schermafbeeldingen van twee websites die de 960 rastersysteem . Ze zijn allebei vrij eenvoudig (dus niet inhoudszwaar als de nieuwswebsites hierboven besproken), maar ze laten zien dat roosters pagina-elementen ademruimte geven, waardoor elke sectie zijn eigen visuele thuis krijgt.
Leid gebruikers het goede pad af
Een ander groot voordeel van nabijheid is dat het gebruikers helpt een website te navigeren zonder onnodige vertragingen of obstakels. Wanneer de primaire navigatie duidelijk wordt gescheiden van de andere elementen op de pagina, wordt deze direct gevonden en is de kans kleiner dat deze wordt vergeten.
Een goede visuele hiërarchie door middel van nabijheid helpt gebruikers dieper in uw website te duiken zonder zich zorgen te hoeven maken over waar ze zijn geweest of waar ze naartoe gaan.
Ze voelen zich altijd op hun gemak en komen snel en efficiënt bij de belangrijkste delen van uw website.
Webontwerpers met weinig of geen ervaring in printontwerp kunnen veel baat hebben bij de principes die printontwerpers al jaren voor de webboom in de praktijk brengen.
Nabijheid is niet het enige ontwerpprincipe dat een site helpt om bruikbaarder en visueel aantrekkelijker te zijn, maar het is een belangrijke factor om te overwegen voor veel van de redenen die zojuist zijn besproken.
Verder lezen
- Design Basics: The Proximity Principle
- Hoe CRAP is uw websiteontwerp?
- Groeperen gebruiken in lay-outs van webpagina's
Dit bericht is exclusief geschreven voor Webdesigner Depot door Louis Lazaris, een freelance schrijver en webontwikkelaar. Louis rent Indrukwekkende webs , waar hij artikelen en tutorials over webdesign plaatst. Je kunt Louis volgen op Twitter of neem contact op met hem via zijn website .