Idag ska vi diskutera vikten av att avsiktligt rikta användarens uppmärksamhet åt sidans delar meriterar det mest. Vi diskuterar hur människor är benägna att läsa en sida och hur vi kan böja den tendensen till vår egen vilja.
Vi tar också en titt på en fantastisk produkt som gör det möjligt för dig att få en snabb snapshot av hur en typisk användare kommer att se dina mönster så att du kan börja förbättra dina layouter direkt.
Förutsägande användarens ögonrörelser
Att skapa en medveten och avsiktlig visuell hierarki är något som jag ständigt diskuterar om Design Shack. Att kunna strukturera en sida så att användaren får information om hur du vill att dom ska vara en stor nyckel till att bli en framgångsrik grafisk formgivare.
Varje gång du skapar något, borde du ständigt analysera var och hur du riktar användarens uppmärksamhet. Om du försummar detta steg kan resultatet vara att en vanlig användare tar en ganska oönskad sökväg som du oavsiktligt har ställt in. Till exempel kan något i din sidfotare fånga en användares uppmärksamhet framför allt och sedan leda bort den från sidan, vilket gör att personen förlorar uppmärksamhet och fortsätter ganska snabbt.
Ju mer du gör medvetna beslut att överväga visuell hierarki desto bättre kommer du att bli att hantera denna princip. Du lär dig att instinktivt fatta beslut som maximerar budskapet du försöker förmedla och uppmuntra åtgärder vid behov.
I slutändan är dock intuition en knepig sak. Att bara "känna det" är inte alltid det säkraste insatsen, särskilt om det här konceptet är nytt för dig. Så hur kan du vara säker på att din design ses som du tänker?
Tips: Du är en opålitlig källa
Det första steget i att överväga hur en användare kan läsa din design är att analysera hur du själv läser den. En övning som jag vanligtvis engagerar i är att stirra utanför min bildskärm i några sekunder för att rensa mig och sedan se tillbaka på designen och låt mina ögon vandra var de vill. Tänk noggrant på vad i designen tar tag i din uppmärksamhet och varför. Detta kommer att ge dig en anständig uppfattning om vilka element människor kommer att tendera att gravida mot.
Trots det faktum att jag tror att du bör utföra uppgiften flera gånger under hela designprocessen för varje sidlayoutprojekt som du går in på är den otroliga sanningen att detta experiment är kraftigt äventyrad av dig designer.
När jag målar ett rum ser jag bara misstag
När du tittar på något som du personligen skapat har du nästan ingen chans att faktiskt titta på det som alla andra gör. Detta är aldrig mer uppenbart för mig än när jag målar ett rum i mitt hus.
När jag är färdig med rummet, går jag tillbaka och tittar på för att undersöka mitt arbete. Det är oundvikligen det här ögonblicket när jag blir väldigt avskräckt. Mina ögon ser inte ett snyggt målade rum utan hoppa i stället från plats till plats och inriktar sig på de platser där jag vet att jag gjorde det minsta av misstag: den punkten där väggfärgen blöt något över till taket eller där trimmen har en liten dropp.
Det är egentligen inte så att jag är en hemsk målare, jag är bara mer benägen att se de små misstag eftersom jag vet att de är där. När någon annan går in i rummet ser de ett fint målade rum och måste söka outtröttligt för att hitta de misstag som jag inte kan ignorera.
Snabbspolning några veckor och jag har blivit van vid det målade rummet. När jag går in ser jag inte runt och upptäcker misstagen, jag ser faktiskt knappt kvaliteten på arbetet eller färgen på färgen. Istället är det helt enkelt en subtil förändring i humör eller känsla när jag går in i rummet. Detta är självklart det slutliga målet för projektet, jag var bara oförmögen att uppleva det ordentligt tills jag hade lossnat från arbetet.
Tillbaka till webbdesign
Skräck inte, det finns faktiskt en punkt på den långvariga historien. Precis som jag med det målade rummet kan du inte se och analysera en design som du skapar. Även om du är stolt över arbetet och inte hittar något fel med det, kommer dina ögon fortfarande att titta på dina favoritkomponenter: den logotypen som du tillbringade timmar perfektion, den textur som du är så stolt över att ha skapat från början eller rubriken som du noggrant har skapat med pixel perfekt kerning.
Ditt personliga engagemang gör dig till ett elakt exempel på hur en användare kommer att läsa en design. Så vad är alternativet då?
Testmetoder
Det bästa sättet att se hur en vanlig användare kommer att se en design är att få några personer framför den. Om du arbetar på ett kontor, kommer du att frestas att fråga folket runt dig, men designers brukar bruka titta på en design på annat sätt, så om inte din målgrupp är, behöver du fortfarande en yttre åsikt.
Självklart är det bästa sättet att gå om någonting som det här är att bygga en fokusgrupp, ställa in något ögonspårningssystem / hårdvara och köra så många test som du kan för att se hur människor svarar på designen. Då samlar du in data, genomsnittsar det, skapar några värmekartor och bam, du har en perfekt bild av hur någon kommer att läsa din design.
Du vill att jag ska göra vad !?
Jag kan redan se vad du tänker. Det här är lite löjligt är det inte? Om du inte utformar en ny hemsida för ett multi-miljarder dollarföretag, finns det inget sätt att du har tid, budget eller resurser att följa ovanstående råd om varje projekt. Det enda förslaget om att göra det är helt skrattsamt!
Den goda nyheten är att du kan uppnå liknande resultat utan all krångel. Eftersom människor tenderar att fokusera på vissa saker kan vi använda programvara för att förutsäga med en rättvis exakt precision hur en person kan läsa designen. Så i princip läser några smarta människor en applikation hur man ser en sida som en människa och sedan visar du din design till ansökan för att få feedback.
Möt Feng-Gui
Jag har letat efter en anständig lösning för simulerad ögonspårning ett tag utan framgång. Då hörde jag Paul Boag nämna en produkt som verkligen tycktes vara det jag letade efter: Feng-Gui.
Feng-Gui tillåter har en imponerande serie verktyg som syftar till att hjälpa dig att analysera din design från en perfekt objektiv synvinkel. Om du hittills har varit lite skrämmad av hela denna diskussion, oroa dig inte, de här verktygen är så lätta att alla kan använda dem.
Analysera en design
För att se ett exempel på vilken typ av information du kan hämta från produkter som Feng-Gui, låt oss ta en titt på Apples hemsida. När allt kommer att hända, ska det vara det fantastiska Apples designteam. Här är sidan i sitt nuvarande sate:
När vi har en skärmdump kan vi ladda upp filen till Feng-Gui-instrumentpanelen som visas nedan. Det finns några grundläggande kontroller för att justera parametrarna och ett verktyg för att välja vissa delar av bilden och beteckna dem som unika "områden". Skottet nedan är klart att gå, vi behöver bara slå på "Analysera" -knappen.
Värmekartan
När du klickar på Analysera-knappen tar Feng-Gui av och gör sak. På bara en minut eller två har du några extremt hjälpsamma resurser till ditt förfogande. Den första och verkligen en av de mest användbara är en bra gammal värmekarta. Detta gör det omedelbart uppenbart vilka delar av din design som få mest uppmärksamhet.
En titt på vårt provprojekt ovan och vi kan omedelbart dra några värdefulla slutsatser. Först av allt, rubriken som meddelar iPhone 4S vinner definitivt uppmärksamhetsstriden. Det här gör perfekt förnuft som vi alla har lärt oss att instinktivt gravta mot stora rubriker som en viktig informationskälla.
En annan stor contender är ett område till höger om hjälten skott av de tre iPhones. Detta har en mycket värdefull insikt. Det område som är markerat är inte så mycket själva iPhone men bilden på telefonen: ansiktet på en liten flicka. Kom alltid ihåg att ansikten är magiska när det gäller att ta tag i användarens uppmärksamhet. Vi kan helt enkelt inte hjälpa det, när det finns ett ansikte på en sida, dras våra ögon rätt till det.
Lägg märke till hur hierarkin verkar vara i form. Vi ser att majoriteten av vår uppmärksamhet riktas mot rubriken, detta flyttas sedan lite till hjälteproduktskottet och dras ner ytterligare av en färgstark bild av en iPod Touch i sidfoten. Den här sidan verkar verkligen läsa bra från topp till botten.
Vi kan se samma information på ett annat sätt genom att klicka på fliken Opacitet. Här har allt blivit svart och blekt tillbaka i enlighet med värmekortvärdena. Denna uppfattning ger dig en perfekt bild av vad en användare kan absorbera efter en snabb titt på sidan (vilket är vanligtvis allt du får).
The Gaze Plot
Som jag har antydt flera gånger redan är det inte bara viktigt att veta vad användaren ser men vilken ordning de ser den informationen i. Detta hjälper dig att konstruera sidan på ett sätt som maximerar förståelsen och behållandet av viktiga delar.
Feng-Gui tillhandahåller detta behov i form av en galetplot. Detta visar programmets bästa gissning på hur en användare kan läsa sidan. Resultatet ser ganska galet ut, vilket är bra, eftersom våra ögonrörelser tenderar att vara ganska sporadiska när man läser en sida.
Det är viktigt att notera att din naturliga lutning är att läsa en sida i ett "z" -mönster: från vänster till höger, från topp till botten. Men som designers kan vi bryta denna naturliga lutning. Observera hur i det ovanstående exemplet är den första fokuspunkten högst upp till höger på sidan. Det är definitivt en märkbar fram och tillbaka mönster men som dina ögon försöker återgå till det som är naturligt. Enligt Feng-Gui varar varje fokuspunkt på denna bild "för omkring 200 ms under läsning av språklig text och 350 ms under visning av en scen". Även om det verkar som om allt detta ögonaktivitet skulle ta ett tag i verkligheten händer det inom några sekunder!
Tänk på dessa resultat vi kan återigen berätta att Apple-sidan är ganska bra. Vi börjar med rubriken, hoppa till produkthjältarna, titta ner på sidfoten och börja sedan läsa det finare utskriften på sidan. Detta är en perfekt logisk progression, vilket tyder på att Feng-Gui utför ganska solidt.
Hjälper det verkligen?
För många designers kommer allt detta att verka som en meningslös övning. Efter många års yrkesdesigner kunde många av oss ha kommit fram till liknande slutsatser på egen hand. Men jag uppmanar dig att inte rabatt värdet av produkter som den här.
Till att börja med är inte alla konstruktörer byggda för att tänka så här. Arbeta ögonspårningssimulatorer i ditt vanliga arbetsflöde hjälper dig att komma ihåg att kritiskt analysera en design för att se om den uppfyller dina mål. Dessutom, även om du har teorin ner, är det väldigt trevligt att se en objektiv synvinkel. Programvaran kommer aldrig att bli lika bra som en fokusgrupp på femtio användare, men det är definitivt ett bra alternativ för dem som är korta i tid och pengar.
Slutligen, oavsett om du behöver ett verktyg eller inte, så att du kan se vad en användare ser kan du satsa på att din klient inte är så utbildad (annars varför skulle de behöva dig?). Detta gör värmekartor, blickbilder och liknande otroligt användbara verktyg för att bygga klientrapporter som motiverar dina designbeslut. Beväpnad med dessa ser du oändligt mer professionell i en presentation! Du kan till och med kombinera en sådan rapport som ett tillval för premium-tillägg för att öka vinsten.
Slutsats
Sammanfattningsvis är sidlayouten mycket mer involverad än att bara ordna elementen på ett sätt som ser bra ut.Det handlar om att avsiktligt strukturera ett meddelande och användarupplevelse som uppfyller en uppsättning fastställda mål. Alltför ofta håller konstruktörer fast element i var de verkar passa med nolltänkande om hur det kan störa informationsflödet på sidan.
Verktyg som Feng-Gui är en stor hjälp i din strävan att lära dig att strukturera dina mönster på ett logiskt och effektivt sätt. Har du provat någon annan liknande tjänst? Hur jämför det? Låt oss veta i kommentarerna!
Bildkrediter: Micky, karpacious, City University Interaction Lab