Hur Eye Scanning påverkar visuell hierarki i UX Design
Medan årtusenden av konst, från grekiska vaser till italienska kapell, har format vår förståelse för vad skönhet är, är den relativt ny teknik som ligger bakom ögonspårning en ny dynamik för hur vi visuellt uppfattar världen. Mer spännande, denna spännande nya vetenskap hjälper oss att bättre förstå - och bättre utforma - webbplatser som är både effektiva och estetiska.
Webdesign (som bildkonst) följer många av samma regler som mer traditionella konstformer. I den här artikeln kommer vi kortfattat att beskriva betydelsen av visuell organisation och förklara hur resultaten av ögonspårning kan förbättra layouten för webbgränssnitt.
Skapa visuell organisation
Det är ingen överraskning att hur en webbplats ser ut påverkar dess framgång, men det är viktigt att ange orsakerna till det. I sitt papper Kommunicera med visuell hierarki , Luke Wroblewski, författare och chef för produktdesign hos Yahoo!, Förklarar att den visuella presentationen av ett webbgränssnitt är viktigt för:
Vägledning
Ett välgjord gränssnitt kan styra användarna från en åtgärd till nästa utan att känna sig överbærande. Oavsett vad du tycker om deras affärspraxis är det ingen tvekan om att Uber är ett exempel på en otroligt smidig men strukturerad hemsida. Värdetillfällen ligger längst upp i rullningen, följt av en rolig skjutregel för att lära sig om olika bilalternativ och slutar med det logiska nästa steget att hitta ritt i din stad.
Kommunikation
Genom att matcha i motsats till olika delar av informationen kan en användargränssnitt bilda länkar i användarens sinne, kommunicera meddelanden utan att säga något. Titta på den populära designwebbplatsen Abduzeedo : De breda kategorierna finns högst upp, innehållet i mitten och detaljerade kategorier i sidfoten.
Skapar känslomässig inverkan
Gör inte misstaget att tänka på din webbplats är helt enkelt ett mekaniserat verktyg. Webbplatser har potential att skapa känslomässiga kontakter, och om dina inte gör det, kommer dina konkurrenters vilja. Faktum är att folk kan vara mer benägna att förlåta ditt gränssnitt brister om du producerar en positiv emotionellt svar . MailChimp är ett perfekt exempel på en webbplats med ett gränssnitt som är användbart, lätthjärtat och faktiskt roligt att använda.
Det förutsägbara mänskliga ögat
Ibland verkar det att dina ögon har sina egna tankar. År av evolution har gett oss instinkter för att upptäcka föremål och rörelser som vi anser vara viktiga, om någon är sexig promenad över gatan, eller en snygg tecknad björn reklam honung. Medan den relativa vikten vi lägger på vad som är viktigt kan variera från person till person, är den konstanta mekanismerna som de uppför sig på. I stor skala följer de flesta människor samma trender när man tittar på en webbsida.
Av dessa trender finns det två som vi kommer att diskutera i detalj. I en artikel om visuella principer , Alex Bigman, Design Writer for 99Designs, visar hur, för kulturer som läser från vänster till höger, är dessa två mönster det vanligaste - och mest användbara - när man utformar en webbplatss layout.
Den första, F-Pattern, används mest för text (men kan anpassas för andra ändamål). Den andra, Z-mönstret, kan användas för alla visuella layouter. Vi förklarar de olika fördelarna och nackdelarna för varje nedan.
F-Mönster
F-mönstret är synetrenden som framträder på sidor som är tungt belagda med text, typiskt bloggar, nyhetskällor, artiklar etc.
När de möter ett block av ord, kommer de flesta läsare först att skanna en vertikal linje längst ner på textens vänstra sida, vanligtvis söker efter nyckelord eller intressepunkter i styckets första meningar. Så småningom hittar läsaren något de gillar och börjar läsa normalt och bildar horisontella linjer. Slutresultatet är något som ser ut som bokstäverna F eller E.
Jakob Nielson från Nielson Norman Group genomförde en läsbarhetsstudie baserat på 232 användare som skannar tusentals webbplatser. Från sin forskning spelade han upp vad han tror är de praktiska konsekvenserna av F-mönstret:
- Användare kommer sällan att läsa varje ord i din text.
- De två första styckena är de viktigaste och bör innehålla din krok.
- Starta punkter, underrubriker och punktpunkter med lockande sökord.
Som alltid är det övre vänstra hörnet det viktigaste, som det är där alla vänster-till-höger läsningskulturer börjar. Användaren läser vanligtvis horisontellt över rubriken, så här är ett bra ställe för en navigeringsfält och / eller en uppmaning. Då skannar användaren vertikalt ner till vänster, tills de stöter på innehåll som intresserar dem. Slutligen slutar användaren på höger sida av sidan, en bra plats med en uppmaning eller reklam. Låt inte sidfältet överväldiga innehållet.
Men F-mönstret är inte en mall - det är egentligen inte en exakt övning, men mer av en lös guide sammanställd av trenderna hos de flesta användare. Tänk på detta eftersom F-Pattern förlorar dess effektivitet efter de övre raderna av F.
Kickstarter använder en kortlayout för att visa funktionsprojekt och att inte bli visuellt tråkig efter de första 500 pixlarna.
Å andra sidan, iZettle tar en mer konventionell inställning till F-Pattern på deras hemsida. De klarar dock att undvika ett templerat utseende genom att lägga över den primära kopian ("Växa din verksamhet med iZettle") och uppmaning till en stor bakgrundsbild. Vi skulle överväga detta det minsta läget för att anpassa detta läsningsmönster till din gränssnittslayout.
Z-Mönster
Dessutom är Z-mönstret det enklaste och mest universella mönstret, som vanligen används på alla webbsidor som är baserade på text. Läsaren skannar först horisontellt över toppen, pilar ner och tillbaka till vänster och skannar sedan horisontellt igen över botten.
Det är viktigt att förstå den mångsidiga Z-mönstret , eftersom det tar upp kraven på kärnwebbplatsen, såsom hierarki, branding och uppmaningar till handling. Dess skönhet är i sin enkelhet, och en idealisk layout för webbplatser som fokuseras kring en uppmaning. För mer komplext eller överdriven innehåll kan Z-mönstret dock vara för enkelt.
Tror Z-mönstret är rätt för din sida? Här är några bra metoder för att optimera fördelarna:
- Bakgrund - Håll bakgrunden där den tillhör: i bakgrunden. Du vill inte distrahera din läsare.
- Punkt # 1 - Som utgångspunkt är det i allmänhet där du vill placera din logotyp.
- Punkt # 2 - Medan huvudanropet ska komma senare är här ett bra ställe för en sekundär uppmaning, som skiljer en horisontell navigeringsfält. (En fin grafik eller bildreglage hjälper till att separera sidans övre och nedre sida, uppmuntrar läsaren att hålla sig på den förutsägbara sökvägen för Z-mönstret.)
- Punkt # 3 - Det här är ett trevligt ställe att locka uppmärksamhet för andra länkar, eller alternativt leda användarens syn till slutmålet: Punkt # 4.
- Punkt # 4 - Som "mållinje" är det här den perfekta platsen för din huvudsakliga uppmaning.
Det första du vill göra är att prioritera elementen på din sida för dig själv så att du vet de mest och minst viktiga. Därifrån är det bara en enkel fråga om att fördela dem till lämpliga "hot spots".
Dessutom kan Z-mönstret upprepas och förlängas genom hela sidan. Ta en titt på hur Evernote zig-zags nedåt genom call-to-action och försäljningsställen.
Dropbox tar en visuellt enklare inställning till detta zig-zag-mönster genom att göra borta bakgrundsbilder. I stället är mer funktionalitet inbyggd i layouten, eftersom en "Learn More" call-to-action hjälper till att ansluta varje sektion av lindningsmönstret när ditt öga tar sig ner på sidan. Detta hjälper också informerade läsare att klicka till nästa relevant sida utan att behöva läsa hela kopian först.
Sikt i framsynthet
Stor gränssnittsdesign bör vara som en osynlig hand som guidar läsare tillsammans med tankens hastighet. Den viktiga borttagningen från F-Pattern och Z-Pattern trenderna är att du kan placera ditt viktigaste innehåll där läsaren kommer att "snubbla" det naturligt, i motsats till att tvinga dem att titta på dem.
Subtilitet är en stor fördel för alla sidlayouter, och dessa mönster kan göra skillnaden mellan att föreslå någonting till din läsare jämfört med att du skjuter ner dem i halsen.
Utvalda bild, användningar mänsklig ögonbild via Shutterstock.