En av de stora hemligheterna i designen är att lära sig att vägleda visuell riktning för tittarna. Denna princip är ofta förbisedd av till och med de mest erfarna designersna, så idag ska vi se en djupare titt på hur det fungerar. Visuell riktning styr kontrollen av användarens ögonrörelse. Detta kan uppnås genom att noga välja dina bilder och genom välplacerade och inriktade designelement.
Det är väldigt uppenbart att standard ögonrörelse hela sidan (i en LTR - vänster till höger - layout) är från vänster till höger längst ner till höger som bilden visar:
Dock; Detta kan inte längre vara från sanningen, genom att arrangera kompositionens element på ett visst sätt, kan en designer styra och tvinga betraktarens ögon i och runt utformningen av designen. Till exempel kommer ögat att röra sig längs en verklig väg, såsom en fast eller streckad linje, eller den kommer att röra sig längs mer subtila vägar, såsom från stora element till små element, från mörka element till ljusare element, från färg till icke-färg, från ovanliga former till vanliga former etc. Graduering av storlek, och upprepade former och storlekar av besläktade element leder också subtivt till ögat.
Bilder kan enkelt styra hur dina kunder ser din design, nedan är några exempel på riktiga bilder som antingen kan användas som en del av din design eller i innehållet för att vägleda besökare runt sidan:
Självklart är det ganska uppenbart vilken riktning dessa bilder pekar på, men många bilder kanske inte lika tydliga, ta en titt på dessa andra exempel:
Detta är ett av de största misstag som designers och innehållsredaktörer faller i, som regel, får aldrig dina bilder att vända utåt från din sida, bilder (särskilt ansikten och ögonen) ska se ut mot mitten av ditt design.
Ta en titt på dessa exempel från både CNN och BBC webbplatser:
I BBC-exemplet ser båda två vänstra bilderna bort från mitten av sidan, vilket leder till att man inte ser viktig information längs standardvägen som bilden visar:
Jämför nu den här nästa "fasta" versionen av BBC-hemsidan till den ursprungliga ovan:
Om du tittar på den här versionen kommer du att märka att ditt öga inte rör sig utanför sidan, folkens ansikten ser inåt hjälper dig att se i samma riktning mot mitten av sidan.
Ta en titt på det här exemplet med 2 sätt att anpassa etiketter med dina formulärfält vilket kan påverka hur lätt det är för användare att fylla i det formuläret:
Till vänster har vi etiketter på topplinjen som är snabbare och enklare att fylla i än vänster eller högerlinjerade etiketter (till höger). Detta beror på att etiketter med högsta inriktning kräver halva så många ögonrörelser än vänster eller högerlinjerade etiketter. Toppjusterade etiketter tillåter även användarna att flytta ner formuläret i en visuell riktning, i stället för två visuella riktningar med vänster och högerlinjerade etiketter. Detta gör att formuläret fylls snabbare och enklare.
Placering kontrollerar inte bara hur ögat rör sig, men bidrar till att göra en design lättare att använda, även om det är undermedvetet.
Orienteringselementet kan ha ett kraftfullt inflytande på stämningen i en design, men ett samvetsbeslut om den dominerande riktningen i en design kan ha en märkbar effekt på arbetets atmosfär.
Ibland dikterar bilden eller layouten den dominerande riktningen. Ibland kommer det att tillåta dig att införa en riktning på den.
De tydliga horisontella linjerna i nedanstående mönster ger en känsla av stillhet, stabilitet, lugn och lugn.
I den andra gruppen nedan förstärker den diagonala placeringen av elementen känslan av rörelse och handling.
Den tredje gruppen har en dominerande vertikal riktning som lägger till ett statiskt ordnat inflytande över vad som annars skulle vara slumpmässigt, ger också en känsla av vakenhet och formalitet.
Samma karaktärförändring kan ses i dessa tre fotografier. Ämnet är detsamma i var och en, förändringen i riktningsperspektiv skapar en annan atmosfär i varje bild.
Den vertikala betoningen i den första bilden ger en känsla av ordnad formalitet den andra horisontella betoningen känns lugn och stabil medan den tredje diagonala betoningen känns aktiv och animerad.
Tänk alltid på hur du vill att din publik ska känna, ställa in stämningen genom att välja riktningen för din design och genomdriva det genom att välja rätt innehållslayout och bildval.
När det gäller formulär eller textbaserade mönster, förstår du hur dina besökare kommer att flytta ögonen runt en design, kommer att förbättra användbarheten av ditt arbete..