Share
Visuell hierarki er et av de viktigste prinsippene bak effektiv webdesign. Denne artikkelen vil undersøke hvorfor å utvikle et visuelt hierarki er avgjørende på nettet, teorien bak det, og hvordan du kan bruke noen svært grunnleggende øvelser i dine egne design for å sette disse prinsippene i praksis.
Kjernen handler det om visuell kommunikasjon: For å være en effektiv designer må du klart kommunisere dine ideer til seerne, eller ellers miste oppmerksomheten deres. Folk er dårlige skjønt; hvis du gir dem en massiv blokk med informasjon, er sjansen at 99 av 100 personer ikke vil plage å lese det. Hvorfor? Fordi de fleste er iboende visuelle tenkere, ikke dataprosessorer.
For å finne ut hvorfor dette er sant, er det viktig å forstå litt om hvordan vi ser ting. Folk er ikke det du vil kalle "like mulighet seere". I stedet for å ta inn visuell informasjon og behandle den jevnt, organiserer folk hva de ser når det gjelder "visuelle relasjoner". La oss tenke på følgende bilde av to vanlige sirkler:
Sjansene er at du ikke ser "to sirkler"; I stedet så du "en svart sirkel og en mindre rød sirkel".
Årsaken er ganske enkel: Når du presenterer noe så enkelt som to sirkler, vil en person ikke bare se to vanlige sirkler, de vil finne en måte å differensiere mellom de to. En sirkel kan være større, eller mindre, eller farget, eller noe annet mangfold av forskjeller. Disse forskjellene tillater oss å skille mellom objekter og gi dem unike betydninger.
La oss se på et mer komplisert bilde:
Den ekstra kompleksiteten styrker faktisk vårt ønske om å "klassifisere" objektene i forhold til forhold. Likheter og forskjeller blir rammen vi ser på figurene gjennom. Skalaforskjeller antyder at ett objekt er nærmere oss enn en annen eller at den ene er mer dominerende enn den andre; Variasjoner i farge kan tyde på at ett objekt har en unik personlighet som skiller den fra det andre objektet. Mye informasjon kan leveres på bare ett enkelt bilde ved å bruke noen svært rudimentære verktøy.
? Å forstå at folk vil se våre design i forhold til relasjoner, er avgjørende for å bli en mer effektiv designer.
La oss ta dette eksempelet tilbake til webdesign; Fordi webdesign handler om å kommunisere visuell informasjon, er det viktig å forstå at folk ser våre design når det gjelder relasjoner, for å bli en mer effektiv designer. Selv om det virker som om det er nok å bare skille ut informasjon, som webdesignere, er vår oppgave å bryte ned den rå informasjonen i deilige, små biter av visuelt relevant informasjon som er lett på øynene, og enda viktigere, effektiv til å kommunisere meldingen bak en nettside.
Det er hundre forklaringer på hvorfor folk ser i forhold til forhold; Hvis du skulle spore den antropologisk tilbake, kan du konkludere med at en jæger-samler mentalitet tvang mennesker på et tidspunkt å innse at å se forhold er en overlevelse ferdighet.
Se, selv forhistorisk mann hadde en sunn respekt for visuell kontrast.
Kanskje en mer praktisk forklaring er at det er rett og slett måten vår hjerne kategoriserer informasjon: gruppering av lignende visuelle elementer og organisering av det til meningsfulle mønstre er så naturlig for vår menneskelige natur som å spise eller drikke. Uansett er faktum at selv om det er mest grunnleggende form, vil informasjon som er organisert med et hierarki i tankene alltid være mer effektivt for å kommunisere enn uorganisert informasjon.
Vurder følgende bilde av to tekstblokker:
I eksemplet ovenfor ser vi den mest rudimentære formen for et visuelt hierarkisystem som brukes på tekst. Informasjonen i hvert av de to eksemplene er ikke noe annerledes, men hvordan det har blitt brutt opp, endrer seg dramatisk slik at leseren vil se den og ta den inn. Når vi snakker om visuell hierarki når det gjelder typografi, er dette det vi mener . Nærheten, skalaen og likheten av tekstformatering tillater en leser å organisere det nedre eksemplet i titler og avsnitt. Hierarkiet gir titlene mer mening enn den andre informasjonen, og gjør det lettere å skanne.
Ok, så dette er alt ganske grunnleggende ting, ikke sant? La oss ta et dykk inn i noen dypere eksempler på hvordan du kan søke så mye grunnleggende prinsipp til noen veldig sofistikert design:
Å forstå at det visuelle hierarkiet er viktig er alt bra og bra, men hvordan lager en designer det egentlig? "Verktøyene" som vi ser på, er like enkle som tømrerens verktøysett - hammer, spiker, sag, osv. - Det er det du gjør med dem, er det som teller!
Objekter som er større krever mer oppmerksomhet. Bruk av størrelse som et hierarkisk verktøy er en effektiv måte å veilede en seers øye på en bestemt del av siden. Fordi størrelse er en av de mektigste organisasjonsformene, er det viktig å korrelere størrelse med betydning i et design. De største elementene skal være de viktigste i de fleste tilfeller; de minste elementene skal være minst viktige.
Bruken av BIG, fet skrift legger et ordningsnivå til denne ellers kaotiske designen. Øyet bør naturlig bevege seg fra store elementer ned til de mindre elementene.
Farge er et interessant verktøy fordi det kan fungere som både et organisatorisk verktøy og et personlighetsverktøy. Fet, kontrasterende farger på et bestemt element i et nettsted vil kreve oppmerksomhet (for eksempel med knapper eller feilmeldinger eller hyperkoblinger). Når den brukes som en personlighet verktøy, farge kan strekke seg utover mer sofistikerte typer hierarki; Ved å bruke frodige, trøstende farger kan du få en følelsesmessig appell til en side. Farge kan påvirke alt fra en nettside merkevare (dvs.: CocaCola Red) til symbolikk (dvs. kule, demperte farger). Avanserte farger kan til og med brukes til å "klassifisere" informasjon innenfor et hierarki, som i følgende eksempel:
Spectra Viewer-siden bruker farger til å representere ulike nyhetskategorier, så det er enkelt å finne en bestemt type informasjon basert på fargekoden.
Kontrast viser relativt viktig. Dramatiske skift i tekststørrelse eller farge vil gi en melding om at noe er annerledes og krever oppmerksomhet. Hvis du skifter fra en lys bakgrunnsfarge til en mørk bakgrunnsfarge, kan du raskt skille kjernen i en side fra bunnteksten.
Kontrasten mellom lyse, luftige overskriftsseksjoner og mørke, jordiske bunntekst skaper et tydelig informasjonshierarki.
Justering skaper rekkefølge mellom elementer. Det kan være så enkelt som forskjellen mellom en "innholdskolonne" og en "sidebar-kolonne", men justering kan også ta på seg mer komplekse hierarkiske roller. Tenk for eksempel kraften til informasjon plassert øverst til høyre på en nettside. Fordi brukere generelt regner med informasjon i den delen av skjermen som skal knyttes til profiler, kontoer, handlekurver osv., Gir det alt i det området en følelse av "offisiell". Justering kan også provosere interesse hvis den brukes på unike måter, som i de følgende eksemplene:
Mappemalen bruker et unikt horisontalt justeringssystem for å skille merke og navigasjon fra blogginnlegg.
Flex Template bruker et rutenett inspirert layout for å utvikle visuell interesse, samt et taksonomisk drevet visuelt hierarki.
Repetisjon tilordner relativ betydning til elementene; Hvis alle "avsnitt" -teksten er grå, kan en bruker se en ny blokk med grå tekst, antar at det er et annet grunnleggende avsnitt; når den samme brukeren møter en blå lenke eller en svart tittel, kan han sikkert anta at den er forskjellig og unik fra den grå teksten.
Virgin-siden oppretter repeterende elementer som teksttekst, og bryter deretter gjentakelsen når den vil trekke oppmerksomhet (som den røde sitatteksten).
Nærhet skiller elementer fra hverandre og skaper underhierarkier. Innenfor en side kan det være widgets som er adskilt fra hverandre av rom; I disse widgetene er det et nytt tittel-, undertekst- og innholdshierarki. Nærhet er også den raskeste måten å knytte lignende innhold. I følgende eksempel er det enkelt å finne bestemte typer innhold, bare basert på deres nærhet til hverandre.
Tuts + nettstedene gjør det egentlig veldig bra (ikke å toot vårt eget horn!). Den venstre "innhold" -kolonnen er tydelig atskilt i nærheten av sidelinjemodulplasseringen. Videre er metadata innenfor et bestemt blogginnlegg plassert i nærheten av det innlegget og videre fra andre innlegg, forsterkende en følelse av "tilhørende".
Denselt pakningselementer i et mellomrom gjør det til å føle seg "tungt" og rotete; Når elementer er plassert for mye, kan de miste forholdet til hverandre. Når en side er designet "akkurat", vil øyet lett gjenkjenne når elementene er relaterte og når de ikke er.
Ved å plassere elementer og holde masse hvite plass på siden, gjør dette designet det enklere for folk å streife rundt og finne de små, tett pakket boksene med innhold.
Kanskje det mest åpenbare verktøyet i Hierarkists Toolbox, kan stilen brukes til å gi en form for hierarki som både omfavner og overgår de andre verktøyene. For eksempel: En flat grå bakgrunn vil "føle seg" annerledes enn en asfaltstrukturert bakgrunn. Denne stilen eller personligheten gitt av designeren vil selvsagt spille en rolle i hvordan forskjellige visuelle forhold utføres.
Det er verdt å nevne at stilen også er et av de farligste verktøyene som en designer kan bruke. Akkurat som en snekker kutte fingeren på en bandsåg, kan en designer enkelt lure folk ved å overbelaste visse elementer gjennom stil. Tenk deg et tungt strukturert, tungt designet nettstedselement som krever så mye oppmerksomhet at det distraherer i stedet for å informere. Den samme ideen strekker seg til skrifttyper, knapper, faner og andre elementer. Vær hensynsfull med effekten på en generell design når du velger å legge til ekstra stil og polere til et element.
Jeff Finleys nettsted gjør en god jobb med å kombinere mange av verktøyene vi diskuterte her, men bruken av originalt utformede elementer over standard UI-fôr er det som gir hele designfølelsen av forsettlig hierarki. Jeff klarer å legge til akkurat nok stil for å få nettstedet til å føles personlig uten at det går over bord.
God visuell hierarki handler ikke om vill og gal grafikk eller de nyeste Photoshop filtre. Det handler om å organisere informasjon på en måte som er brukbar, tilgjengelig og logisk til den daglige besøkende.
Som jeg bare foreslo i det siste avsnittet, er det viktig å merke seg at hierarkiet kan brukes til både godt og ondt. Tenk på alle de irriterende Flash-annonsene, popup-vinduene, glitterbannene, etc. at nettet har blitt plaget med gjennom årene! Selv om disse annonsene lykkes med å gripe oppmerksomhet, svikter de til slutt nettstedseieren og betrakteren ved å bryte det visuelle hierarkiet innenfor et nettsted. Tilsvarende, hvis en designer bygger et visuelt hierarki slik at visse viktige opplysninger er nesten umulige å finne, har designeren mislyktes i sin oppgave. God visuell hierarki handler ikke om vill og gal grafikk eller de nyeste Photoshop filtre. Det handler om å organisere informasjon på en måte som er brukbar, tilgjengelig og logisk til den daglige besøkende.
?Designere kan skape normalhet ut av kaos; de kan tydelig kommunisere ideer gjennom organisering og manipulering av ord og bilder. ?-Jeffery Veen, The Art and Science of Web Design
Jeffrey Veen skrev disse ordene i 2001, men de har fortsatt mye makt i dag hvor "overbelastning av informasjon" synes å være vanlig. Som folk har vi alltid hatt en god følelse for visuell organisasjon. Men som et samfunn har vi blitt barraged med en sann tsunami med visuell informasjon de siste par tiårene; Som et resultat er folk i dag hyperfølsomme for det visuelle hierarkiet. Dette er spesielt tilfelle på nettet der studier har bevist at vanlige surfere har lært å "skanne" innhold innat; automatisk søker informasjon som er relevant for deres interesser og kaster bort / ignorerer informasjon som ikke gjør det.
På grunn av dette, blir en mester av visuell hierarki er ikke valgfritt, det er obligatorisk. Ettersom de typiske web surfing plattformene utvides fra den tradisjonelle skjermen til telefoner, tabletter, til og med fjernsyn, blir det stadig viktigere at vi bruker sterke, klare visuelle systemer for å kommunisere med web surfere.
Til slutt vil jeg gjerne avslutte med en veldig enkel øvelse. Som eksempel bruker vi et nettsted som du ofte, eller et prosjekt som du har jobbet med nylig; Øvelsen går slik:
I de fleste tilfeller vil svaret inkludere nyanser av "nei". Det er mange grunner til dette - kundens krav, uerfarne designere, design-by-committee - eller hundre andre grunner som du sikkert har lest. Heck, i noen tilfeller kan designeren ønsker å villede betrakteren (se et "gratis" nettsted som prøver å veilede brukere til betalt innhold). Uansett årsak, forståelse av visuelt hierarki og å prøve å tolke det, er en måte å forbedre måten du ser på webdesign i et helt nytt lys. Forhåpentligvis hjelper det med å informere ditt eget arbeid også!
Accentsconagua