Prinsippet om nærhet i webdesign
Nylig tok jeg opp en gammel design bok at jeg ikke hadde rørt om en stund, og det minnet meg om et designprinsipp som mange av oss praktiserer, sannsynligvis bare ubevisst, om i det hele tatt.
Boken handler om å designe for utskrift, men jeg trodde det ville gjøre et godt emne å diskutere i sammenheng med webdesign.
Nærhetsprinsippet krever at relaterte elementer skal grupperes visuelt, skape mindre rot og lage en mer organisert layout. Elementer som ikke er relatert til hverandre, skal plasseres lenger fra hverandre for å understreke deres mangel på forhold.
Jeg vil diskutere detaljer og noen måter som dette kan implementeres effektivt, men denne definisjonen bør være nok for hva vi skal diskutere i denne artikkelen.
Korrekt bruk av nærhet, sammen med andre designprinsipper, har stor innvirkning på brukeropplevelsen og til slutt en nettsides overordnede suksess.
Ikke vær redd for hvitt plass
Det første skrittet for å implementere nærhetsprinsippet er å forstå betydningen av hvitt rom i design.
Mangel på hvitt plass er et vanlig problem i amatørdesign. Design er et middel til å formidle informasjon, og når amatører forsøker å formidle en melding gjennom design, er deres naturlige tilbøyelighet å spre innholdet jevnt for å fylle rommet uten å tenke på potensialet for velorganisert hvitt rom.
Hvit plass kan påvirke brukerens oppførsel så mye, om ikke mer enn det faktiske innholdet på siden. Hvit plass styrer brukerens øyne i den tilsiktede retningen, skaper kontrast og gir et varig inntrykk.
Selv om W3Avenues nettsted ovenfor inneholder en betydelig mengde innhold (med artikler under mange kategorier, som alle designblogger) og en rekke sidebarannonser, overstyrer den ikke brukeren visuelt.
Det sjenerøse rommet i toppteksten og passende fordelte elementer i innholds- og sidebarene bidrar til dette rene og organiserte utseende. W3Avenue gjør ikke noe spesielt unikt med innholdet, men utformingen bidrar sannsynligvis til sterk trafikk det kommer i en kort tidsperiode .
Så vær ikke usikker på tom plass i designen din. Riktig bruk av hvitt rom er det første trinnet i å implementere nærhetsprinsippet og dermed gjøre et design mer visuelt tiltalende.
Visuell gruppe relaterte elementer
Hvite rom er imidlertid bare en del av å implementere nærhet. Et design kan ha mye hvitt mellomrom, men hvis det ikke er gruppert riktig elementer, vil det hvite rommet få liten effekt, som illustrert av de to visittkortene nedenfor:
Kortet til venstre er ikke rotete; den har litt hvit plass. Men elementene er ikke logisk gruppert, så effekten er svak.
Leseren er tvunget til å skanne kortet flere ganger. Kortet til høyre har imidlertid en mer behagelig visuell effekt. Leseren må bare se på den for å ta inn informasjonen (mer om dette senere).
Gruppering av elementer i kortet til høyre er også mer logisk . I det første settet av elementer ser vi firmanavnet i stor skrift med plasseringen under den. Det andre settet forteller oss hvordan du får informasjon om tjenestene som tilbys (dvs. telefonnummer og nettsideadresse).
Dette eksemplet illustrerer betydningen av nærhet i trykkdesign, og en lignende ide kan brukes til elementer i webdesign, som vist på skjermbildet nedenfor.
Selv om Arora Designs hjemmeside ikke er komplisert eller informasjons-tung, er bruken av hvit plass og visuell separasjon av grupperte elementer effektive. Det skal noteres her at "hvit plass" ikke må være hvit; Det kan være tomt mellomrom mellom elementer, uavhengig av farge.
I tilfelle av Arora Designs, selv om det hvite rommet har farge, tjener det samme formål med å visuelt skille topptekstene, navigasjons- og innholdsområdene.
Opprette visuelt hierarki
Å bruke hvit plass effektivt og gruppering av relaterte elementer er avgjørende for å gi nettstedet ditt et klart visuelt hierarki. Selvfølgelig er nettstedets arkitektur og informasjonsflyt grunnlaget for effektiv nærhet .
Hierarki formidles ved hvordan elementene er gruppert og undergruppert.
Dette hierarkiet hjelper brukeren å forstå hvor de har vært og hvor de vil gå, og bidrar dermed til å formidle formålet med nettstedet. En liste er et godt eksempel på et element som har potensial til å kommunisere visuelt hierarki, som vist på bildet nedenfor:
Bare ved å se på de to listene ovenfor, uten at du selv undersøker innholdet, ser du at listen til venstre har et klart visuelt hierarki, og viser sammenhengen mellom elementer (innrykkede elementer er underkategorier av de primære elementene).
Dette hierarkiet ville ikke være mulig uten hvitt mellomrom (inkludert makro og mikro hvit plass). Listen til høyre er bare en tilfeldig gruppering av elementer uten tilsynelatende forhold eller hierarki.
Implementering av dette prinsippet på et nettsted med noe så enkelt som en HTML-liste er enkelt. Utfordringen er å bruke dette prinsippet som en ledende faktor i nettstedets konstruksjon fra planleggings- og wireframing-scenen til designen.
Layouter som er enkle å skanne og lese
Innhold som er organisert i et hierarki og logisk gruppert er lettere å lese og skanne .
Overskrifter, for eksempel, skal tillate brukeren å skanne ved å tydelig angi hovedpunkter. Unødvendig å si, innhold bør planlegges fra get-go for å gjenspeile et passende visuelt hierarki; Listen over med de innrykkede elementene er et dårlig eksempel, fordi innholdet ikke stemmer overens med det visuelle hierarkiet.
Et nettsted som bruker nærhet i arkitektur og design, overstyrer ikke brukeren med informasjon.
Så selv om det er relativt enkelt å implementere nærhetsprinsippene på nettsteder som er lette på innhold, er nærhet mye viktigere på innholdsrike nettsteder.
Nyhetssider er gode casestudier av dette prinsippet. Nedenfor er en sammenligning av Los Angeles Times og Globe og Mail .
Samlet sett har LA Times nettsiden en behagelig design, hovedsakelig på grunn av fargevalg og typografi. Men det har også et rent og ryddig utseende, spesielt i header-delen.
Logoen er stor og skiller seg ut, og bidrar effektivt til nettstedets merkevarebygging. Objektet nærmest logoen er den horisontale navigasjonsfeltet nedenfor. Fordi navigeringsfeltet er mørkt, står det i motsetning til logoen.
Tekstlinkene over logoen er pent innredet, med god plass mellom de to seksjonene. Venstre justering av innholdet i overskriften bidrar også til det rene utseendet.
All informasjon i LA Times-overskriften er gruppert med relaterte elementer, bortsett fra logoen, som står alene. Ingenting i overskriften forvirrer deg eller gjør deg lurer på hvor den tilhører.
Hva med Globe and Mail nettsted, vist nedenfor?
Globe og Mail-nettstedet har en kompleks header-seksjon som ikke overholder nærhetsprinsippet.
Den eneste signifikante mengden hvit plass er i midten, ved siden av logoen, som ikke gir noe. To annonser vises i overskriften, og bidrar til rotet. Annonsene kan være nødvendige av økonomiske grunner, så problemene er forståelige.
Det største problemet er den rotete delen over den store bannerannonsen. Det er ingen klar forskjell mellom elementer i den delen.
Tre stiplede vertikale linjer forsøker å skille området i fire seksjoner, men den første separatoren gir ingen mening. Faktisk vil den delen trolig se mer innbydende dersom de stiplede separatorene ble fjernet.
Grids hjelp med nærhet
En måte å gruppere elementer og bruke hvit plass på riktig måte er å starte med et rutenett .
Fra et oversiktlig blikk på både LA Times og Globe and Mail-nettstedene, synes bare LA Times å ha basert sin design på et rutenett, eller i det minste brukt gridbaserte prinsipper i planleggingsstadiet. Globe and Mails nettsted viser lite bevis på et gridformat.
Et rutenettbasert layout med passende ristestørrelser gir mulighet for god plass mellom seksjoner, og i mange tilfeller tvinger det designeren til å implementere nærhetsprinsipper uten å tenke på det selv.
Nedenfor er skjermbilder fra to nettsteder som har ansatt 960 grid system . De er begge ganske enkle (dvs. ikke innholdsrike som nyhetsnettstedene som er diskutert ovenfor), men de viser at gridene gir sideelementer puste rom, noe som gir hver seksjon sitt eget visuelle hjem.
Lede brukere ned den rette veien
En annen stor fordel ved nærhet er at den hjelper brukerne med å navigere på et nettsted uten unødvendige forsinkelser eller hindringer. Når primærnavigasjonen er tydelig skilt fra de andre elementene på siden, vil den bli funnet umiddelbart og er mindre sannsynlig å bli glemt.
Riktig visuelt hierarki ved hjelp av nærhet hjelper brukerne å dybere seg dypere inn på nettstedet ditt uten å bekymre deg for hvor de har vært eller hvor de skal.
De vil alltid føle seg komfortable, og de kommer til de viktigste delene av nettstedet ditt raskt og effektivt.
Webdesignere med liten eller ingen erfaring i utskriftsdesign kan ha stor nytte av prinsippene som utskriftdesignere har satt i bruk siden år før webboomen.
Nærhet er ikke det eneste designprinsippet som vil hjelpe et nettsted å være mer brukbart og visuelt tiltalende, men det er en viktig faktor å vurdere for mange av årsakene som diskuteres.
Videre lesning
- Design Grunnleggende: Nærhetsprinsippet
- Hvordan CRAP er ditt nettsteddesign?
- Bruke gruppering i websideoppsett
Dette innlegget ble skrevet utelukkende for Webdesigner Depot av Louis Lazaris, frilansskribent og webutvikler. Louis løper Imponerende Webs , hvor han legger inn artikler og opplæringsprogrammer på webdesign. Du kan følge Louis på Twitter eller ta kontakt med ham gjennom hans nettside .