Princippet om nærhed i webdesign

For nylig har jeg hentet en gamle design bog at jeg ikke havde rørt i et stykke tid, og det mindede mig om et designprincip, som mange af os praktiserer nok kun underbevidst, hvis overhovedet.

Bogen handler om at designe for print, men jeg troede, det ville gøre et godt emne at diskutere i forbindelse med webdesign.

Nærhedsprincippet kræver, at relaterede emner grupperes visuelt, hvilket skaber mindre rod og skaber et mere organiseret layout. Varer uden tilknytning til hinanden bør placeres længere fra hinanden for at understrege deres mangel på forhold.

Jeg vil diskutere detaljer og nogle måder, hvorpå dette kan implementeres effektivt, men denne definition skal være tilstrækkelig til, hvad vi vil diskutere i denne artikel.

Korrekt brug af nærhed sammen med andre designprincipper har stor indflydelse på brugeroplevelsen og i sidste ende en hjemmesides samlede succes.

Fryg ikke White Space

Det første skridt til korrekt gennemførelse af nærhedsprincippet er at forstå betydningen af hvidt rum i design.

Mangel på hvidt rum er et almindeligt problem i amatørdesign. Design er et middel til at formidle information, og når amatører forsøger at formidle en besked gennem design, er deres naturlige tilbøjelighed at udbrede indholdet jævnt for at fylde rummet uden at tænke på det velorganiserede hvide rums potentiale.

Hvidt rum kan påvirke brugerens adfærd så meget, hvis ikke mere end det faktiske indhold på siden. Hvidt rum styrer brugerens øjne i den tilsigtede retning, skaber kontrast og giver et varigt indtryk.

Selvom W3Avenue's hjemmeside ovenfor indeholder en betydelig mængde indhold (med artikler under mange kategorier, som enhver designblog) og en række sidebarannoncer, overstyrer den ikke brugeren visuelt.

Det generøse rum i overskriften og passende mellemrum i indholds- og sidebjælkeområderne bidrager til dette rene og organiserede look. W3Avenue gør ikke noget særligt unikt med dets indhold, men dets design bidrager sandsynligvis til stærk trafik det kommer i en kort periode .

Så vær ikke usikker på tom plads i dit design. Korrekt brug af hvidt rum er det første skridt i at implementere nærhedsprincippet og dermed gøre et design mere visuelt tiltalende.

Visuel gruppe relaterede elementer

Hvidt rum er dog kun en del af nærhedsforløbet. Et design kan have meget hvidt mellemrum, men hvis elementer ikke er grupperet korrekt , vil det hvide rum have ringe effekt, som illustreret af de to visitkort nedenfor:

Kortet til venstre er ikke rodet; den har noget hvidt rum. Men elementerne er ikke logisk grupperet, så effekten er svag.

Læseren er tvunget til at scanne kortet flere gange. Kortet til højre har dog en mere tiltalende visuel effekt. Læseren skal blot se på det for at indhente oplysningerne (mere om dette senere).

Gruppering af elementer i kortet til højre er også mere logisk . I det første sæt af elementer ser vi firmanavnet i stor skrift med placeringen under den. Det andet sæt fortæller os, hvordan man får oplysninger om de leverede ydelser (dvs. telefonnummer og hjemmesideadresse).

Dette eksempel illustrerer betydningen af nærhed i printdesign, og en lignende idé kan bruges til elementer i webdesign, som vist på skærmbilledet nedenfor.

Selvom Arora Designs hjemmeside ikke er kompleks eller informationstunge, er brugen af hvidt rum og visuel adskillelse af grupperede elementer effektive. Det skal bemærkes her, at "hvidt rum" ikke behøver at være hvidt; Det kan være ethvert tomt mellemrum, uanset farve.

I tilfælde af Arora Designs, selvom det hvide rum har farve, tjener det samme formål med at visuelt adskille hoved-, navigations- og indholdsområder.

Oprettelse af visuelt hierarki

Brug af hvidt rum effektivt og gruppering af relaterede elementer er afgørende for at give dit websted et klart visuelt hierarki. Webstedets arkitektur og informationsstrøm er naturligvis grundlaget for effektiv nærhed .

Hierarki er formidlet af den måde, hvorpå elementer grupperes og undergrupperes.

Dette hierarki hjælper brugeren med at forstå, hvor de har været, og hvor de vil hen og hjælper således med at formidle formålet med hjemmesiden. En liste er et godt eksempel på et element, der har potentiale til at kommunikere visuelt hierarki, som vist på billedet nedenfor:

Bare ved at kigge på de to lister ovenfor uden at undersøge indholdet, kan du se, at listen til venstre har et klart visuelt hierarki, der viser relationerne mellem elementer (indrykte elementer er underkategorier af de primære elementer).

Dette hierarki ville ikke være muligt uden hvidt rum (herunder makro og mikro hvidt rum). Listen til højre er blot en tilfældig gruppering af elementer uden tilsyneladende forhold eller hierarki.

Implementering af dette princip på en hjemmeside med noget så enkelt som en HTML-liste er let. Udfordringen er at bruge dette princip som en ledende faktor i hjemmesidenes konstruktion fra planlægning og wireframing til design.

Layouter, der er nemme at scanne og læse

Indhold, der er organiseret i et hierarki og logisk grupperet, er lettere at læse og scanne .

Overskrifter skal f.eks. Tillade brugeren at scanne ved tydeligt at indikere hovedpunkter. Det er overflødigt at sige, at indholdet bør planlægges fra get-go for at afspejle et passende visuelt hierarki; listen ovenfor med de indrykte elementer er et dårlig eksempel, fordi indholdet ikke stemmer overens med det visuelle hierarki.

Et websted, der bruger nærhed i dets arkitektur og design, overbelaster ikke brugeren med oplysninger.

Så selv om det er relativt nemt at implementere nærhedsprincipperne på websteder, der er lette på indhold, er nærhed meget vigtigere på indholdsrige websites.

Nyhedswebsteder er gode casestudier om dette princip. Nedenfor er en sammenligning af Los Angeles Times og Globe og Mail .

Samlet set har LA Times hjemmesiden et behageligt design hovedsagelig på grund af farvevalg og typografi. Men det har også et rent og præcist udseende, især i overskriftsafsnittet.

Logoet er stort og skiller sig ud, hvilket bidrager effektivt til hjemmesiden branding. Objektet nærmest logoet er den vandrette navigeringslinje nedenfor. Fordi navigationslinjen er mørk, står den i kontrast med logoet.

Teksten links over logoet er pænt arrangeret, med masser af plads mellem de to sektioner. Venstre justering af indholdet i overskriften bidrager også til det rene udseende.

Alle oplysninger i LA Times-overskriften er grupperet med relaterede emner, bortset fra logoet, som står alene. Intet i overskriften forvirrer dig eller får dig til at undre sig over, hvor det hører til.

Hvad med Globe and Mail-webstedet, som vist nedenfor?

Globe og Mail hjemmeside har en kompleks header sektion, der ikke gennemfører nærhedsprincippet.

Den eneste betydelige mængde af hvidt rum er i midten ved siden af logoet, hvilket ikke giver noget. To annoncer vises i overskriften, der bidrager til rodningen. Annoncerne kan være nødvendige af økonomiske grunde, så problemerne er forståelige.

Det største problem er den rodet sektion over den store bannerannonce. Der er ingen klar sondring mellem elementer i den sektion.

Tre punkterede lodrette linjer forsøger at adskille området i fire sektioner, men den første separator giver ingen mening. Faktisk vil den del sandsynligvis se mere indbydende ud, hvis de stiplede separatorer blev fjernet.

Gitter hjælper med nærhed

En måde at gruppere elementer på og bruge hvidt rum på passende vis er at starte med et gitter .

Fra et overskueligt blik på både LA Times og Globe og Mail-webstederne synes kun LA Times at have baseret sit design på et gitter eller i det mindste brugt grid-baserede principper i planlægningsfasen. Globe and Mail's hjemmeside viser lidt dokumentation for et gitterformat.

Et gitterbaseret layout med passende gutterstørrelser giver mulighed for masser af plads mellem sektioner, og i mange tilfælde tvinger det designeren til at implementere nærhedsprincipper uden at tænke på det selv.

Nedenfor er skærmbilleder fra to hjemmesider, der har brugt 960 gitter system . De er begge ret enkle (dvs. ikke indholdsmæssige som de nyhedswebsteder, der er diskuteret ovenfor), men de viser, at net giver sideelementer åndedrætsrum, der giver hver sektion sit eget visuelle hjem.

Led brugere ned ad den rigtige vej

En anden stor fordel ved nærhed er, at det hjælper brugere med at navigere et websted uden unødige forsinkelser eller forhindringer. Når den primære navigation er tydeligt adskilt fra de andre elementer på siden, vil den blive fundet øjeblikkeligt og er mindre tilbøjelige til at blive glemt.

Korrekt visuelt hierarki ved hjælp af nærhed hjælper brugerne med at dybere dybere ind på din hjemmeside uden at bekymre sig om, hvor de har været eller hvor de skal hen.

De vil altid føle sig godt tilpas, og de kommer hurtigt og effektivt til de vigtigste dele af dit websted.

Webdesignere med ringe eller ingen erfaring med printdesign kunne drage stor fordel af de principper, som printdesignere har sat i praksis siden år før webboomen.

Nærhed er ikke det eneste designprincip, der vil hjælpe et websted, være mere brugbart og visuelt tiltalende, men det er en vigtig faktor at overveje for mange af de grunde, der netop er blevet diskuteret.

Yderligere læsning

Dette indlæg blev udelukkende skrevet til Webdesigner Depot af Louis Lazaris, freelance skribent og webudvikler. Louis løber Imponerende Webs , hvor han stiller artikler og vejledninger om webdesign. Du kan følge Louis på Twitter eller komme i kontakt med ham gennem hans hjemmeside .

webdesign hvidt rum design principper nærhedsprincip