Visuele richting in webontwerp

Een van de grote geheimen van design is leren hoe de visuele richting van kijkers te begeleiden; Dit principe wordt vaak over het hoofd gezien door zelfs de meest ervaren ontwerpers, dus vandaag gaan we dieper in op hoe het werkt. Visuele richting regelt de oogbeweging van de gebruiker; dit kan worden bereikt door zorgvuldig uw afbeeldingen te selecteren en door goed geplaatste en uitgelijnde ontwerpelementen.

Het is een vast gegeven dat de standaard oogbeweging op de pagina (in een LTR - van links naar rechts - opmaak) van linksboven naar rechtsonder is, zoals de afbeelding laat zien:

Echter; dit kan niet verder van de waarheid zijn, door de compositie-elementen op een bepaalde manier te rangschikken, kan een ontwerper de beweging van de ogen van de kijker in en rond de lay-out van het ontwerp controleren en dwingen. Het oog beweegt zich bijvoorbeeld langs een werkelijk pad, zoals een effen of stippellijn, of het beweegt zich langs meer subtiele paden, van grote elementen naar kleine elementen, van donkere elementen naar lichtere elementen, van kleur naar niet-kleur, van ongebruikelijke vormen tot gebruikelijke vormen, enz. Afstuderen van grootte, en herhaalde vormen en grootte van verwante elementen leidt subtiel ook het oog.

1. Routebeschrijvingen met afbeeldingen

Afbeeldingen kunnen eenvoudig bepalen hoe uw klanten uw ontwerp bekijken, hieronder zijn enkele expliciete voorbeelden van gerichte afbeeldingen die kunnen worden gebruikt als onderdeel van uw ontwerp of in de inhoud om bezoekers rond de pagina te leiden:

Natuurlijk is het vrij duidelijk in welke richting deze afbeeldingen verwijzen, hoe veel afbeeldingen ook mogen zijn, kijk eens naar deze andere voorbeelden:

2. Het oog leiden

Dit is een van de grootste fouten waar ontwerpers en inhoudeditors mee te maken hebben, in de regel zullen je afbeeldingen nooit naar buiten gericht zijn vanaf je pagina, maar afbeeldingen (vooral gezichten en ogen) moeten naar het midden van je ontwerp kijken.

Bekijk deze voorbeelden van zowel de CNN- als BBC-websites:

In het BBC-voorbeeld kijken de 2 afbeeldingen linksboven weg van het midden van de pagina, wat leidt tot "niet-ziende" belangrijke informatie langs het standaardpad zoals de afbeelding laat zien:

  1. Je begint bovenaan links als de gebruikelijke standaardlocatie
  2. Als je langs het standaardpad loopt, zie je het eerste beeld naar buiten, zodat je zicht automatisch buiten de pagina beweegt
  3. Je ogen beginnen terug te kijken naar het midden van de pagina
  4. Je komt een ander beeld tegen dat naar buiten kijkt waardoor je zicht weer buiten de pagina komt
  5. Eindelijk beginnen je ogen naar het midden van de pagina te bewegen, maar er is een grote "dode hoek" gecreëerd door de plaatsing van de afbeelding en de richting gemarkeerd door de "?"

Vergelijk nu deze volgende "vaste" versie van de BBC-homepage met de oorspronkelijke versie hierboven:

Als je naar deze versie kijkt, zie je dat je oog niet van de pagina af beweegt. De gezichten van de mensen die naar binnen kijken, helpen je in dezelfde richting naar het midden van de pagina te kijken.

3. Formulieren

Bekijk dit voorbeeld met twee manieren om labels uit te lijnen met uw formuliervelden. Dit kan van grote invloed zijn op hoe gemakkelijk het voor gebruikers is om dat formulier in te vullen:

Aan de linkerkant hebben we uitgelijnde labels die sneller en gemakkelijker in te vullen zijn dan links of rechts uitgelijnde labels (aan de rechterkant). De reden is dat top uitgelijnde labels minder oogbewegingen nodig hebben dan links of rechts uitgelijnde labels. Met uitgelijnde labels kunnen gebruikers het formulier in één visuele richting naar beneden verplaatsen in plaats van twee visuele richtingen met links en rechts uitgelijnde labels. Dit maakt het invullen van formulieren sneller en eenvoudiger.

Plaatsing bepaalt niet alleen hoe het oog beweegt, maar draagt ​​er ook aan bij dat een ontwerp gemakkelijker te gebruiken is, zelfs op een onbewust niveau.

4. Ontwerprichting

Het element van richting kan een krachtige invloed hebben op de sfeer van een ontwerp, maar het nemen van een gewetenbeslissing over de dominante richting in een ontwerp kan een merkbaar effect hebben op de atmosfeer van het werk.

Soms dicteert het beeld of de lay-out de dominante richting. Soms kun je er een richting aan opleggen.

De duidelijke horizontale lijnen in de onderstaande ontwerpen geven een gevoel van stilte, stabiliteit, rust en kalmte.

In de tweede groep hieronder versterken de diagonale plaatsing van elementen het gevoel van beweging en actie.

De derde groep heeft een dominante verticale richting die een statische geordende invloed toevoegt aan wat anders willekeurig zou kunnen zijn, geeft ook een gevoel van alertheid en formaliteit.

Dezelfde verandering in karakter is te zien in deze drie foto's. Het onderwerp is hetzelfde in elk, de verandering in directionele nadruk creëert een andere atmosfeer in elk beeld.

De verticale nadruk in de eerste afbeelding geeft een gevoel van ordelijke formaliteit, terwijl de tweede horizontale nadruk kalm en stabiel aanvoelt terwijl de derde diagonale nadruk actief en geanimeerd aanvoelt.

Conclusie

Houd altijd in gedachten hoe u uw publiek wilt laten voelen, stel de stemming in door de richting van uw ontwerp te kiezen en voer dit vervolgens uit door de juiste lay-out van de inhoud en de selectie van de afbeelding te kiezen.

Als het gaat om formulieren of tekstgebaseerde ontwerpen, zal het begrijpen van hoe uw bezoekers hun ogen rond een ontwerp zullen bewegen, de bruikbaarheid van uw werk aanzienlijk verbeteren..