Visuell retning i webdesign

En av de store hemmelighetene med design er å lære å veilede visuell retning for seerne. Dette prinsippet blir ofte oversett av selv de mest erfarne designerne, så i dag skal vi se nærmere på hvordan det fungerer. Visuell retning styrer brukerens øyebevegelse; Dette kan oppnås ved nøye å velge bilder og ved godt plassert og justerte designelementer.

Det er sterkt fastslått at standard øyebevegelse over hele siden (i en LTR - Venstre til Høyre - layout) er fra øverst til venstre mot nederst til høyre som bildet illustrerer:

Derimot; Dette kan ikke være lenger fra sannheten, ved å arrangere sammensetningselementene på en bestemt måte, kan en designer styre og tvinge bevegelsen til betrakterens øyne i og rundt utformingen av designet. For eksempel vil øyet bevege seg langs en faktisk bane som solid eller prikket linje, eller den vil bevege seg langs mer subtile baner som fra store elementer til små elementer, fra mørke elementer til lettere elementer, fra farge til ikke-farge, fra uvanlige former til vanlige former, etc. Graduering av størrelse, og gjentatte former og størrelser av relaterte elementer fører også øye med øynene.

1. Kontrollere veibeskrivelse med bilder

Bilder kan enkelt kontrollere hvordan kundene dine ser på ditt design, nedenfor er noen eksplisitte eksempler på retningsbilde bilder som enten kan brukes som en del av designet eller i innholdet for å lede besøkende rundt på siden:

Selvfølgelig er det ganske tydelig hvilken retning disse bildene peker på, men mange bilder kan ikke være like klare, ta en titt på disse andre eksemplene:

2. leder øynene

Dette er en av de største feilene som designere og innholdsredaktører faller inn i, som regel ikke gjør bildene dine vendt utover fra siden din, bilder (spesielt ansikter og øyne) skal se mot midten av designen din.

Ta en titt på disse eksemplene fra både CNN og BBC nettsteder:

I BBC-eksemplet ser de to øverste venstrebildene begge bort fra midten av siden, og dette fører til at du ikke ser viktig informasjon langs standardbanen som bildet illustrerer:

1. Du starter øverst til venstre som vanlig standardplassering
2. Flytter langs standardbanen møter du det første bildet som ser utover, slik at visjonen din automatisk beveger seg utenfor siden
3. Øynene dine begynner å se tilbake til midten av siden
4. Du møter et annet bilde som ser utover, noe som gjør at visjonen din igjen beveger seg utenfor siden
5. Til slutt begynner øynene dine å bevege deg mot sidesenteret, men det er et stort "blindpunkt" skapt av bildet plassering og retning markert med "?"

Sammenlign nå denne neste "faste" versjonen av BBC-hjemmesiden til den opprinnelige ovenfor:

Når du ser på denne versjonen, ser du at øyet ikke beveger seg utenfor siden, folkets ansikter ser innover, hjelper deg å se i samme retning mot midten av siden.

3. Skjemaer

Ta en titt på dette eksemplet, og vis 2 måter å justere etiketter med skjemafeltene dine, som i stor grad kan påvirke hvor enkelt det er for brukerne å fylle ut det skjemaet:

Til venstre har vi topplinjede etiketter som er raskere og enklere å fylle ut enn venstre eller høyrejusterte etiketter (til høyre). Dette skyldes at toppjusterte etiketter krever halvparten så mange øyebevegelser enn merket med venstre eller høyre linje. Toppjusterte etiketter tillater også at brukerne beveger seg ned i skjemaet i en visuell retning, i stedet for to visuelle retninger med venstre og høyrejusterte etiketter. Dette gjør det enklere å fylle ut skjemaer.

Plassering styrer ikke bare hvordan øyet beveger seg, men bidrar også til å gjøre et design enklere å bruke, selv om det er ubevisst.

4. Designretning

Orienteringselementet kan ha en kraftig innflytelse på stemningen i et design, men å gjøre en samvittighetsbeslutning om den dominerende retningen i et design kan ha en merkbar effekt på arbeidets atmosfære.

Noen ganger vil bildet eller oppsettet diktere den dominerende retningen. Noen ganger vil det tillate deg å legge en retning på den.

De klare horisontale linjene i underdesignene gir en følelse av stillhet, stabilitet, ro og ro.

I den andre gruppen nedenfor forsterker diagonal plassering av elementene følelsen av bevegelse og handling.

Den tredje gruppen har en dominerende vertikal retning som legger til en statisk ordnet innflytelse på det som ellers vil være tilfeldig, gir også en følelse av våkenhet og formalitet.

Samme karakterendring kan ses på disse tre fotografiene. Emnet er det samme i hverandre, forandringen i retningsvekt skaper en annen atmosfære i hvert bilde.

Den vertikale vekten i det første bildet gir en følelse av ordentlig formalitet den andre horisontale vekten føles rolig og stabil mens den tredje diagonale vekten føles aktiv og animert.

Konklusjon

Vær alltid oppmerksom på hvordan du vil at publikum skal føle seg, sett stemningen ved å velge retningen for designet, og deretter håndheve dette ved å velge riktig innholdsoppsett og bildevalg.

Når det gjelder skjemaer eller tekstbaserte design, vil forståelsen for hvordan de besøkende vil flytte øynene rundt et design, øke brukbarheten til arbeidet ditt sterkt..