Principen om närhet i webbdesign
Nyligen plockade jag upp en gammal designbok att jag inte hade berört på ett tag, och det påminde mig om en designprincip som många av oss praktiserar förmodligen bara omedvetet, om alls.
Boken handlar om att designa för utskrift, men jag trodde att det skulle göra ett bra ämne att diskutera i samband med webbdesign.
Närhetsprincipen kräver att relaterade objekt ska grupperas visuellt, skapa mindre rodnad och göra en mer organiserad layout. Objekt som inte är relaterade till varandra bör placeras längre ifrån varandra, för att betona deras brist på relation.
Jag kommer att diskutera detaljer och några sätt på vilka detta kan genomföras effektivt, men den här definitionen bör räcka för vad vi ska diskutera i den här artikeln.
Korrekt användning av närhet, i kombination med andra designprinciper, har stor inverkan på användarupplevelsen och i slutändan en webbplatss övergripande framgång.
Var inte rädd för White Space
Det första steget att korrekt implementera närhetsprincipen är att förstå vikten av det vita utrymmet i designen.
Brist på vitt utrymme är ett vanligt problem i amatördesign. Design är ett sätt att kommunicera information, och när amatörer försöker förmedla ett budskap genom design, är deras naturliga lutning att sprida innehållet jämnt för att fylla utrymmet utan att tänka på möjligheterna till välorganiserat vitt utrymme.
Vitt utrymme kan påverka användarens beteende lika mycket, om inte mer än det faktiska innehållet på sidan. Vitt utrymme guidar användarens ögon i avsedd riktning, skapar kontrast och ger ett bestående intryck.
Även om W3Avenues hemsida ovan innehåller en stor mängd innehåll (med artiklar i flera kategorier, som alla designbloggar) och en serie sidebarannonser, övervinner den inte användaren visuellt.
Det generösa rummet i rubriken och på lämpligt avstånd placerade objekt i innehålls- och sidospåren bidrar till detta rena och organiserade utseende. W3Avenue gör inget särskilt unikt med innehållet, men dess design bidrar antagligen till stark trafik det kommer i en kort tid .
Så var inte osäker på tomt utrymme i din design. Korrekt användning av vitt utrymme är det första steget i att genomföra principen om närhet och därigenom göra en design mer visuellt tilltalande.
Visuellt grupprelaterade element
Vitt utrymme är dock bara en del av att genomföra närhet. En design kan ha mycket vitt utrymme, men om artiklar inte grupperas korrekt , kommer det vita utrymmet att få liten effekt, vilket illustreras av de två visitkorten nedan:
Kortet till vänster är inte rörigt; den har lite vitt utrymme. Men elementen är inte logiskt grupperade, så effekten är svag.
Läsaren är tvungen att skanna kortet flera gånger. Kortet till höger har dock en mer tilltalande visuell effekt. Läsaren måste helt enkelt titta på den för att ta in informationen (mer om detta senare).
Gruppering av element i kortet till höger är också mer logiskt . I den första uppsättningen av element ser vi företagsnamnet i stort teckensnitt med platsen nedanför. Den andra uppsättningen berättar hur vi får information om de tjänster som tillhandahålls (dvs. telefonnummer och webbadress).
Detta exempel illustrerar betydelsen av närhet i tryckdesign, och en liknande idé kan användas för element i webbdesign, som visas i skärmdumpen nedan.
Även om Arora Designs hemsida inte är komplex eller informationshård, är användningen av vitt utrymme och visuell separation av grupperade element effektiva. Det bör noteras här att "vitt utrymme" inte behöver vara vit; Det kan vara vilket tomt utrymme som helst mellan element, oavsett färg.
När det gäller Arora Designs, även om det vita utrymmet har färg, tjänar det samma syfte att visuellt separera huvud-, navigations- och innehållsområdena.
Skapa visuell hierarki
Att använda white space effektivt och gruppera relaterade element är avgörande för att ge din webbplats en tydlig visuell hierarki. Naturligtvis är webbplatsens arkitektur och informationsflöde grunden till effektiv närhet .
Hierarki förmedlas av det sätt på vilket element är grupperade och delgrupperade.
Denna hierarki hjälper användaren att förstå var de har varit och var de vill gå och hjälper sålunda med att kommunicera syftet med webbplatsen. En lista är ett bra exempel på ett element som har potential att kommunicera visuell hierarki, vilket framgår av bilden nedan:
Bara genom att titta på de två listorna ovan, utan att ens undersöka innehållet, ser du att listan till vänster har en tydlig visuell hierarki, som visar relationerna mellan objekt (inramade objekt är underkategorier för de primära objekten).
Denna hierarki skulle inte vara möjlig utan vitt utrymme (inklusive makro och mikro vitt utrymme). Listan till höger är bara en slumpmässig gruppering av element utan förekommande förhållande eller hierarki.
Genomförandet av denna princip på en webbplats med något så enkelt som en HTML-lista är lätt. Utmaningen är att använda denna princip som en ledande faktor i webbplatsens konstruktion från planering och wireframing till designen.
Layouts som är lätta att skanna och läsa
Innehåll som är organiserat i en hierarki och grupperas logiskt är lättare att läsa och skanna .
Rubriker ska till exempel låta användaren skanna genom att tydligt ange huvudpunkter. Det är självklart att innehållet bör planeras från get-go för att återspegla en lämplig visuell hierarki. Listan ovan med de inramade objekten är ett dåligt exempel, eftersom innehållet inte stämmer överens med den visuella hierarkin.
En webbplats som använder närhet i sin arkitektur och design överväger inte användaren med information.
Så, även om det är relativt enkelt att genomföra principerna om närhet på webbplatser som är lätta för innehåll, är närhet mycket viktigare på innehållsrika webbplatser.
Nyhetswebbplatser är bra fallstudier av denna princip. Nedan är en jämförelse av Los Angeles Times och den Globe och Mail .
Sammantaget har LA Times webbplats en trevlig design, främst på grund av färgval och typografi. Men det har också ett rent och snyggt utseende, särskilt i rubrikavsnittet.
Logotypen är stor och sticker ut, vilket bidrar effektivt till webbplatsens branding. Objektet närmast logotypen är den horisontella navigeringsfältet nedan. Eftersom navigeringsfältet är mörkt kontrasterar det med logotypen.
Textlänkarna ovanför logotypen är snyggt ordnade, med gott om utrymme mellan de två sektionerna. Vänsterjustering av innehållet i rubriken bidrar också till det rena utseendet.
Varje bit av information i LA Times-rubriken är grupperad med relaterade objekt, förutom logotypen, som står ensam. Ingenting i rubriken förvirrar dig eller får dig att undra var det hör hemma.
Vad sägs om Globe and Mail-webbplatsen, som visas nedan?
Globe and Mail-webbplatsen har en komplicerad rubrikavdelning som inte tillämpar principen om närhet.
Den enda signifikanta mängden vitt utrymme ligger i mitten, bredvid logotypen, vilket ger ingenting. Två annonser visas i rubriken, vilket bidrar till störningen. Annonserna kan vara nödvändiga av ekonomiska skäl, så problemen är förståeligt.
Det största problemet är det röriga avsnittet ovanför den stora bannerannonsen. Det finns ingen klar skillnad mellan element i den sektionen.
Tre prickade vertikala linjer försöker separera området i fyra sektioner, men den första separatorn spelar ingen roll. Faktum är att det här avsnittet troligtvis skulle bli mer inbjudande om de prickade separatorerna avlägsnades.
Grids hjälp med närhet
Ett sätt att gruppera objekt och använda vitt utrymme på lämpligt sätt är att börja med ett rutnät .
Från en kortfattad blick på både LA Times och Globe and Mail-webbplatser verkar bara LA Times ha byggt sin design på ett rutnät, eller åtminstone används gridbaserade principer i planeringsstadiet. Globe and Mail hemsida visar lite bevis på ett nätformat.
En gallerbaserad layout med lämpliga rännstorlekar tillåter gott om utrymme mellan sektioner, och i många fall tvingar det designeren att genomföra principer om närhet utan att ens tänka på det.
Nedan följer skärmdumpar från två webbplatser som har anställt 960 nät system . De är båda ganska enkla (dvs inte innehållsrika som de nyheterna som diskuterats ovan), men de visar att galler ger sidoelement andningsrum, vilket ger varje avsnitt ett eget visuellt hem.
Leda användare ner rätt väg
En annan stor fördel med närhet är att det hjälper användarna att navigera på en webbplats utan onödiga förseningar eller hinder. När den primära navigeringen är tydligt åtskild från de andra elementen på sidan, kommer den att hittas direkt och är mindre benägna att glömmas bort.
Korrekt visuell hierarki genom närhet hjälper användarna att dyka djupare in på din webbplats utan att oroa dig för var de har varit eller var de går.
De kommer alltid att trivas, och de kommer snabbt och effektivt till de viktigaste delarna av din webbplats.
Webbdesigners med liten eller ingen erfarenhet i tryckdesign kan dra stor nytta av de principer som skrivdesigners har trätt i bruk sedan år före webbboomen.
Närhet är inte den enda designprincipen som hjälper en webbplats att vara mer användbar och visuellt tilltalande, men det är en viktig faktor att tänka på för många av de skäl som diskuterats.
Vidare läsning
Detta inlägg skrevs uteslutande för Webdesigner Depot av Louis Lazaris, en frilansskribent och webbutvecklare. Louis körs Imponerande Webs , där han postar artiklar och handledning om webbdesign. Du kan följa Louis på Twitter eller ta kontakt med honom genom sin hemsida .