Share
Som webbdesigners följer vi många designparadigmer och layoutprinciper: galler, vertikal konsistens, F-Layout, Z-Layout, tredjepartsregel, Golden-Ratio och så vidare. Att uppmärksamma dessa principer kommer att producera visuellt tilltalande och funktionell design - låt oss nu titta på enkel uppdelning av en sida i två lika halvor.
Även om detta kanske låter lite dumt och uppenbart i början, kan denna grundläggande layout vara mycket effektiv. Våra ögon tenderar att följa en zigzag-rörelse under skimming via en sida. Om ögat följer en horisontellt rak linje - som i Z-layouten koncentrerar han sig (eller försöker). Eftersom 90% av webbtrafiken som kommer till din webbplats inte betalar detaljerad uppmärksamhet åt din sida, gör din design "skim friendly" kommer definitivt att betala.
Från Yahoo! S ögonspårningsstudier:
Webbanvändare har alltid bråttom. De har andra saker att göra, och bakom sig för att uppskatta skönheten och estetiken på din webbplats är det sista du kan förvänta dig att göra. Även om bra design är av stor betydelse, inspirerar den inte en besökare till att agera - klicka på "Köp nu" eller "Känn mer" -knappen.
Vi kan inte skylla på dem. Minns någonsin när du ville se något upp? Du rusar till det första sökresultatet i Google och sedan snabbt "power" dig genom, eller skumma ganska igenom hela sidan. För det mesta rullar du till och med hela vägen till botten utan att betala någon stor uppmärksamhet. Efter denna fas, om du bestämmer dig för att sidan är värt din tid, bläddrar du tillbaka till toppen och sedan tar den verkliga ansträngningen att läsa och uppmärksamma.
Vad är syftet med den initiala skimming? För att fånga den maximala informationen du kan få om sidan vid en första blick. Om vi på något sätt kodifierar det här skimming-mönstret, borde vi kunna fånga uppmärksamheten hos fler besökare. Från observationer på värmekartor på olika ställen har jag gjort en gemensam tendens.
Du märker att du kan titta på de röda fläckarna utan problem. Otroligt, från vår erfarenhet kan vi säga att våra ögon lätt ska följa raka linjer snarare än vinklade - eftersom vi läser i raka linjer. Observera att jag pratar om den initiala skimming-fasen, inte den del där du uppmärksammar varje detalj på webbplatsen.
När du inte betalar mycket uppmärksamhet, är det här ögonens naturliga tendens - zigzaggen. Om det inte finns element som har större kontrast och vikt som ropar ut på dig, skulle du troligtvis följa ovanstående mönster. Du kommer också märka att det här mönstret liknar F-layouten och att de röda slutpunkterna är där användarna tar en kort paus.
Dessa momenta pausfläckar är där en ögonblicksbild tas av din hjärna. I en zigzag-layout med element som innehåller viktiga informationstyper vid "Pause spots" absorberar hjärnan naturligtvis mer detaljer, eftersom det associerar varje zigzag-slutpunkt som separata enheter.
Design är inte bara hur det ser ut och känns som. Design är hur det fungerar. -Steve Jobs
Du kan (till exempel) använda denna funktion i Half Split-layouten för att effektivt placera dina förhandsgranskningar av arbetsportföljen eller de viktiga funktionerna i din produkt eller tjänst, så att besökarna snabbt märker. Detta uppmuntrar i slutändan dem att stanna mer tid på din webbplats och övertygar dem så att de vidtar åtgärder. Resultatet? Bättre konverteringskurser för dig och en bättre användarupplevelse för dem.
Att göra din design och layout "zig-zag-kompatibel" är väldigt enkel. Det är faktiskt lika enkelt att dela din sida i två lika stora halvor! De lika halvorna fungerar bra, eftersom Zig-Zag-ändpunkterna är justerade mer eller mindre mot mitten av dessa halvor. Används i superposition, de går bra tillsammans. Placera viktiga element i Zig-Zags sidor på den röda ändpunkten. Detta är det grundläggande begreppet bakom Half Split eller 1/2-Layout.
Nyligen jobbade jag på en "Kommer snart" målsida. Jag experimenterade med olika layouter, men ingenting fungerade bra. Jag försökte allt - Grids, Golden ratio, F-Layout. Eureka-ögonblicket kom när jag helt enkelt delade sidan i två lika stora halvor. Lösningen var så enkelt som det! Det såg elegant och snyggt ut och påminde mig om det viktiga faktum att enkel inte nödvändigtvis är dålig. Har du sett den nya Microsoft-logotypen?
Simpelhet är den ultimata formen av sofistikation. -Leonardo Da Vinci
Du kan se hur halvorna ger en bra visuell hierarki. Först märks det "Kommer snart" röda bandet på toppen. Därefter ses logotypen. Nu, efter Zig-Zag som jag nämnde tidigare, slutar besökaren att titta på bildreglaget i den högra halvan och till sist formuläret för inlämning av e-post.
Låt oss nu se hur bra splitlayouten fungerar för en webbsidans portföljsida. Syftet med en gallerysida i en portfölj är att snabbt visa potentiella kunder en arbetsmoment. Det finns massor av alternativ för dem, eftersom denna bransch är ganska mättad just nu. Varför borde de betala dig? Att göra ett bra första intryck kan tippa skalorna i din riktning. Låt oss se vad vi kan göra om det.
Ovanstående layout är uppdelad i två halvor, men den följer inte principen "zig-zag" som jag nämnde tidigare.
Medan det verkar som en bra layout och lätt på ögonen blir det ganska tråkigt efter de två första elementen. Att bryta flödet för att öka visuellt intresse kommer att hjälpa till. Inte bara det; men när du försöker skumma ovanstående layout ska dina ögon se den första bilden och sedan hoppa till texten till det andra objektet. Eftersom dina besökare inte har några avsikter att läsa i denna fas, hoppar de till någon annan punkt, eller lämnar din webbplats helt!
Vad händer om du gjort en enkel ändring så här?
Mycket mer intressant, eller hur? Att bara byta textens positioner och bilden av varje objekt ökar visuellt intresse så att konsistensen inte gör din besökare körd. Du kan också ringa till åtgärdsknappen efter Zig-Zag-mönstret.
Knappen "Kontakta mig" kommer nu att ha större chans att bli märkt och klickas av fler av dina besökare (varför inte köra ett A / B-test för att dubbelkontrollera det?)
Design är en plan för att arrangera element på ett sådant sätt som bäst för att uppnå ett visst syfte. -Charles Eames
Uppdelningen har gått in i rampljuset med Facebook: s nya tidslinjekonstruktion. Lägg märke till hur dina ögon lätt "flyter" från ett inlägg till ett annat.
Apple följer också delad layout. Här är iPad mini-sidan, se hur enkelt det är att associera varje bild som separata funktioner på iPad mini? Det känns bara rätt.
Microsoft har blivit krediterad med att bana många nya sätt med sin senaste rebranding, här följer en split layout på deras Surface info-sida.
Stacey är en minimalistisk skildring av 1/2-Layout.
Jag älskar Quoras hemsida. Kan delningslayouten visa sig enklare?
Consumerbarometer.com tar den till nästa nivå med animeringar och en triangulär variation av Zig-Zag.
Så vad har vi lärt oss?
Den här artikeln är bara en mild påminnelse om att använda grundläggande layouter och grundläggande designmetoder bör aldrig glömmas bort. Det kan faktiskt öka dina konverteringsfrekvenser, om de används korrekt.
Accentsconagua