Share
Als webontwerpers volgen we veel ontwerpparadigma's en lay-outprincipes: rasters, verticale consistentie, de F-lay-out, Z-lay-out, regel van derden, de gulden snede enzovoort. Aandacht voor deze principes zorgt voor een visueel aantrekkelijk en functioneel ontwerp - laten we nu kijken naar de eenvoudige indeling van een pagina in twee gelijke helften.
Hoewel dit in het begin misschien een beetje stom en duidelijk klinkt, kan deze fundamentele lay-out erg effectief zijn. Onze ogen hebben de neiging om een zigzagbeweging te volgen terwijl ze door een pagina bladeren. Als het oog een horizontale rechte lijn volgt, zoals in de Z-lay-out, concentreert hij zich (of probeert het). Omdat 90% van het internetverkeer naar uw site geen gedetailleerde aandacht besteedt aan uw pagina, zal uw ontwerp "schimmelvriendelijk" zijn..
Van Eye-trackingstudies van Yahoo!:
Webgebruikers hebben altijd haast. Ze hebben andere dingen te doen, en achterblijven om de schoonheid en esthetiek van uw website te waarderen, is het laatste wat u van hen mag verwachten. Hoewel goed ontwerp van groot belang is, inspireert het een bezoeker niet volledig om actie te ondernemen - om op die knop "Nu kopen" of "Meer weten" te klikken.
We kunnen het hen niet kwalijk nemen. Heb je je ooit herinnerd dat je iets wilde opzoeken? Je haast je naar het eerste zoekresultaat in Google en vervolgens "stroomt" je snel door, of doorzoek je de algemene pagina. Meestal scroll je zelfs helemaal naar de bodem zonder veel aandacht te besteden. Na deze fase, als je besluit dat de pagina je tijd waard is, scroll je terug naar de top en neem je vervolgens de moeite om te lezen en op te letten.
Wat is het doel van het eerste skimmen? Om de maximale informatie te bemachtigen die u in een eerste oogopslag over de pagina kunt krijgen. Als we dit skimmingpatroon op de een of andere manier 'codificeren', zouden we de aandacht van meer bezoekers moeten kunnen trekken. Uit waarnemingen bij heatmaps van verschillende sites, heb ik een gemeenschappelijke tendens uitgewerkt.
U zult merken dat u moeiteloos de rode vlekken kunt bekijken. Vreemd genoeg kunnen we vanuit onze ervaring zeggen dat onze ogen eenvoudig rechte lijnen moeten volgen in plaats van hoekige ogen - omdat we in rechte lijnen lezen. Merk op dat ik het heb over de eerste skimming-fase, niet het gedeelte waar je aandacht besteedt aan elk detail van de site.
Wanneer je niet veel aandacht besteedt, is dit de natuurlijke neiging van je ogen - de zigzag. Tenzij er elementen zijn met een groter contrast en gewicht die naar je schreeuwen, zou je waarschijnlijk het bovenstaande patroon volgen. Je zult ook opmerken dat dit patroon lijkt op de F-layout en dat de rode eindpunten zijn waar gebruikers een korte pauze nemen.
Deze tijdelijke pauze plekken zijn waar een momentopname wordt gemaakt door je hersenen. In een zig-zag lay-out met elementen die belangrijke stukjes informatie bevatten op de "Pauze vlekken", absorbeert het brein van nature meer details, omdat het elk zig-zag eindpunt als afzonderlijke entiteiten associeert.
Design is niet alleen hoe het eruit ziet en voelt. Ontwerp is hoe het werkt. -Steve Jobs
U kunt (bijvoorbeeld) deze functie van de lay-out met halve splitsing gebruiken om uw werkportfoliopreviews of de belangrijke functies van uw product of dienst effectief te plaatsen, zodat bezoekers snel opmerken. Dit moedigt hen uiteindelijk aan om langer op uw site te blijven en overtuigt hen daarom om acties te ondernemen. Het resultaat? Betere conversiepercentages voor u en een betere gebruikerservaring voor hen.
Het is heel eenvoudig om uw ontwerp en lay-out "zig-zag compatibel" te maken. In feite is het net zo eenvoudig als uw pagina in twee gelijke helften te verdelen! De gelijke helften werken goed omdat de zigzag-eindpunten min of meer op het midden van deze helften zijn uitgelijnd. Gebruikt in superpositie, ze gaan goed samen. Plaats elementen van belang op de rode eindpuntposities van de Zig-Zag van uw pagina. Dit is het basisconcept achter de halve split of 1/2-layout.
Onlangs werkte ik aan een bestemmingspagina 'Binnenkort'. Ik experimenteerde met verschillende lay-outs, maar niets werkte goed. Ik heb alles geprobeerd - Grids, Golden ratio, F-Layout. Het Eureka-moment kwam toen ik de pagina eenvoudig in twee gelijke helften verdeelde. De oplossing was zo simpel als dat! Het zag er elegant en netjes uit en herinnerde me aan het belangrijke feit dat simpel niet per se slecht is. Heb je het nieuwe Microsoft-logo gezien??
Eenvoud is de ultieme verfijning. -Leonardo Da Vinci
Je kunt zien hoe de helften een mooie visuele hiërarchie geven. Eerst wordt het rode lint "Coming Soon" aan de bovenkant opgemerkt. Vervolgens wordt het logo gezien. Nu, na de Zig-Zag die ik eerder noemde, eindigt de bezoeker naar de schuifregelaar Afbeelding op de rechterhelft en tenslotte het e-mailinzendingsformulier.
Laten we nu eens kijken hoe goed de gesplitste lay-out werkt voor een Portfolio-pagina van een Web Designer. Het doel van een galerijpagina in een portfolio is om snel potentiële klanten een oeuvre te laten zien. Er zijn veel opties voor hen, omdat deze industrie op dit moment behoorlijk verzadigd is. Waarom zouden ze je betalen? Door een goede eerste indruk te maken, kan de weegschaal in uw richting wijzen. Laten we kijken wat we daaraan kunnen doen.
De lay-out hierboven is verdeeld in twee helften, maar deze volgt niet het 'zig-zag'-principe dat ik eerder noemde.
Hoewel het lijkt een goede lay-out en gemakkelijk voor de ogen, wordt het behoorlijk saai na de eerste twee elementen. Het doorbreken van de stroom om de visuele interesse te vergroten, zal helpen. Niet alleen dat; maar wanneer u probeert de bovenstaande lay-out te doorschijnen, moeten uw ogen de eerste afbeelding zien en vervolgens naar de tekst van het tweede item springen. Omdat uw bezoekers geen intenties hebben om in deze fase te lezen, springen ze op een ander punt of verlaten ze uw site volledig!
Stel dat u een eenvoudige wijziging als deze hebt doorgevoerd?
Veel interessanter, toch? Het eenvoudig verwisselen van de posities van de tekst en het beeld van elk item verhoogt de visuele interesse, zodat de consistentie uw bezoeker niet verveelt. U kunt ook een call-to-action-knop plaatsen volgens het Zig-Zag-patroon.
De knop 'Contact' heeft nu een grotere kans om te worden opgemerkt en door meer van uw bezoekers te worden aangeklikt (waarom zou u geen A / B-test uitvoeren om dat dubbel te controleren?)
Ontwerp is een plan om elementen zo in te richten dat ze het best een bepaald doel bereiken. -Charles Eames
De gesplitste lay-out is in de schijnwerpers gekomen met Facebook's nieuwe tijdlijnontwerp. Merk op hoe je ogen gemakkelijk van de ene naar de andere post "stromen".
Apple volgt ook een gesplitste lay-out. Hier is de iPad mini-pagina, zie hoe eenvoudig het is om elke afbeelding als afzonderlijke functies van de iPad mini te associëren? Het voelt gewoon goed.
Microsoft is gecrediteerd met bestrating veel nieuwe manieren met hun recente rebranding, hier na een gesplitste lay-out op hun Surface info-pagina.
Stacey is een minimalistische weergave van de 1/2-layout.
Ik ben dol op de startpagina van Quora. Kan de gesplitste lay-out eenvoudiger worden aangetoond?
Consumerbarometer.com brengt het naar het volgende niveau met animaties en een driehoekige variatie van de Zig-Zag.
Wat hebben we geleerd??
Dit artikel is slechts een voorzichtige herinnering dat het gebruik van elementaire lay-outs en fundamentele ontwerpmethoden nooit mag worden vergeten. Het kan zelfs uw conversiepercentages verhogen, mits correct gebruikt.
Accentsconagua