Zasada bliskości w projektowaniu stron internetowych
Niedawno wziąłem stara książka projektowa którego od dawna nie tknąłem i przypomniało mi to o zasadzie projektowania, którą wielu z nas wdrożyło prawdopodobnie tylko podświadomie, jeśli w ogóle.
Książka zajmuje się projektowaniem do druku, ale pomyślałem, że będzie to świetny temat do dyskusji w kontekście projektowania stron internetowych.
Zasada bliskości wymaga wizualnego pogrupowania powiązanych elementów, co powoduje mniej bałaganu i zapewnia bardziej zorganizowany układ. Przedmioty niezwiązane ze sobą należy rozstawić osobno, aby podkreślić ich brak związku.
Omówię szczegóły i sposoby, w jakie można to skutecznie wdrożyć, ale ta definicja powinna wystarczyć do tego, co omówimy w tym artykule.
Prawidłowe wykorzystanie bliskości, w połączeniu z innymi zasadami projektowania, ma duży wpływ na zadowolenie użytkownika, a ostatecznie na ogólny sukces witryny.
Nie obawiaj się White Space
Pierwszym krokiem do właściwego wdrożenia zasady bliskości jest zrozumienie znaczenia białej przestrzeni w projektowaniu.
Brak białej przestrzeni jest powszechnym problemem w projektach amatorskich. Design jest środkiem przekazywania informacji, a kiedy amatorzy próbują przekazać wiadomość za pośrednictwem projektu, ich naturalna skłonność polega na równomiernym rozłożeniu treści w celu wypełnienia przestrzeni, bez zastanowienia się nad potencjałem dobrze zorganizowanej białej przestrzeni.
Biała przestrzeń może wpływać na zachowanie użytkownika tyle, jeśli nie więcej, niż rzeczywista treść na stronie. Biała przestrzeń prowadzi wzrok użytkownika w pożądanym kierunku, tworzy kontrast i sprawia trwałe wrażenie.
Mimo że powyższa witryna W3Avenue zawiera znaczną ilość treści (z artykułami pod wieloma kategoriami, jak każdy blog projektowy) i serią reklam na pasku bocznym, nie przytłacza wizualnie użytkownika.
Hojny pokój w nagłówku i odpowiednio rozmieszczone elementy w obszarach zawartości i paska bocznego przyczyniają się do tego przejrzystego i zorganizowanego wyglądu. W3Avenue nie robi nic szczególnie wyjątkowego z jego treścią, ale jego projekt prawdopodobnie przyczynia się do silny ruch dostaje się w krótki okres czasu .
Więc nie bądźcie niepewni pustej przestrzeni w swoim projekcie. Właściwe wykorzystanie białej przestrzeni jest pierwszym krokiem do realizacji zasady bliskości, a tym samym uczynienia wyglądu bardziej atrakcyjnym wizualnie.
Elementy wizualnie powiązane z grupą
Biała przestrzeń jest jednak tylko częścią implementacji bliskości. Projekt może mieć dużo białego odstępu, ale jeśli elementy nie zostaną zgrupowane poprawnie , biała przestrzeń będzie miała niewielki wpływ, co ilustrują dwie wizytówki poniżej:
Karta po lewej stronie nie jest zagracona; ma trochę białej przestrzeni. Ale elementy nie są logicznie pogrupowane, więc efekt jest słaby.
Czytnik jest zmuszony do wielokrotnego skanowania karty. Karta po prawej stronie ma jednak przyjemniejszy efekt wizualny. Czytelnik musi po prostu rzucić okiem na to, by wziąć informacje (więcej o tym później).
Grupowanie elementów na karcie po prawej jest również bardziej logiczne . W pierwszym zestawie elementów widzimy nazwę firmy dużą czcionką z lokalizacją pod nią. Drugi zestaw mówi nam, jak uzyskać informacje na temat świadczonych usług (np. Numer telefonu i adres strony internetowej).
Ten przykład ilustruje znaczenie bliskości w projektowaniu druku, a podobny pomysł można zastosować do elementów w projektowaniu stron internetowych, jak pokazano na zrzucie ekranu poniżej.
Chociaż strona internetowa Arora Designs nie jest skomplikowana lub zawiera dużo informacji, jej zastosowanie białej przestrzeni i wizualnej separacji zgrupowanych elementów jest skuteczne. Należy tu zauważyć, że "biała przestrzeń" nie musi być biała; może to być dowolna pusta przestrzeń między elementami, niezależnie od koloru.
W przypadku Arora Designs, chociaż biała przestrzeń ma kolor, służy temu samemu celowi, aby wizualnie oddzielić obszary nagłówka, nawigacji i zawartości.
Tworzenie hierarchii wizualnej
Efektywne wykorzystanie białej przestrzeni i grupowanie powiązanych elementów ma kluczowe znaczenie dla nadania witrynie jasnej wizualnej hierarchii. Oczywiście architektura strony internetowej i przepływ informacji stanowią podstawę skutecznej bliskości .
Hierarchia jest przekazywana przez sposób, w jaki elementy są pogrupowane i podzielone.
Ta hierarchia pomaga użytkownikowi zrozumieć, gdzie był i gdzie chce się udać, a tym samym pomaga w komunikowaniu celu witryny. Lista jest dobrym przykładem elementu, który ma potencjał do przekazania wizualnej hierarchii, jak pokazano na poniższym obrazku:
Wystarczy rzucić okiem na dwie powyższe listy, nawet bez sprawdzania zawartości, zobaczysz, że lista po lewej ma przejrzystą wizualną hierarchię, pokazującą związki między przedmiotami (wcięte elementy są podkategoriami podstawowych przedmiotów).
Ta hierarchia nie byłaby możliwa bez białej przestrzeni (w tym makro i mikro Biała przestrzeń). Lista po prawej to po prostu losowa grupa elementów bez pozornego związku lub hierarchii.
Wdrożenie tej zasady na stronie internetowej za pomocą czegoś tak prostego jak lista HTML jest łatwe. Wyzwanie polega na wykorzystaniu tej zasady jako przewodnika w budowie strony internetowej od etapu planowania i projektowania szkieletu do projektu.
Układy, które można łatwo skanować i czytać
Treść podzielona na hierarchię i logicznie pogrupowana jest łatwiejsza do odczytania i zeskanowania .
Nagłówki, na przykład, powinny umożliwić użytkownikowi skanowanie poprzez wyraźne wskazanie głównych punktów. Nie trzeba dodawać, że treść powinna być zaplanowana od samego początku, aby odzwierciedlić odpowiednią hierarchię wizualną; powyższa lista z wciętymi elementami jest złym przykładem, ponieważ zawartość nie pasuje do hierarchii wizualnej.
Witryna, która wykorzystuje bliskość w swojej architekturze i designie, nie przytłacza użytkownika informacjami.
Tak więc, chociaż stosunkowo łatwo jest wdrożyć zasady bliskości na stronach internetowych, które są lekkie w treści, bliskość jest o wiele ważniejsza na stronach bogatych w treść.
Witryny z wiadomościami to dobre przykłady tej zasady. Poniżej znajduje się porównanie Los Angeles Times i Globe and Mail .
Ogólnie rzecz biorąc, strona LA Times ma przyjemny design głównie ze względu na wybór koloru i typografię. Ale ma również czysty i niezakłócony wygląd, szczególnie w sekcji nagłówka.
Logo jest duże i wyróżnia się, przyczyniając się skutecznie do marki strony internetowej. Obiekt znajdujący się najbliżej logo to poziomy pasek nawigacyjny poniżej. Ponieważ pasek nawigacji jest ciemny, kontrastuje z logo.
Tekstowe linki nad logo są starannie ułożone, z dużą ilością miejsca między dwiema sekcjami. Lewe wyrównanie zawartości w nagłówku również przyczynia się do czystego wyglądu.
Każda informacja w nagłówku LA Times jest pogrupowana z powiązanymi przedmiotami, z wyjątkiem logo, które jest samodzielne. Nic w nagłówku nie wprawia cię w zakłopotanie ani nie zastanawia się, gdzie należy.
A co z witryną Globe and Mail, pokazaną poniżej?
Witryna Globe and Mail ma złożoną część nagłówkową, która nie implementuje zasady bliskości.
Jedynie znacząca ilość białej przestrzeni znajduje się pośrodku, obok logo, które nic nie daje. Dwie reklamy pojawiają się w nagłówku, przyczyniając się do bałaganu. Reklamy mogą być konieczne z powodów finansowych, więc problemy są zrozumiałe.
Największym problemem jest nieuporządkowana sekcja nad dużą banerową reklamą. Nie ma wyraźnego rozróżnienia między elementami w tej sekcji.
Trzy przerywane pionowe linie próbują oddzielić obszar na cztery sekcje, ale pierwszy separator nie ma żadnego sensu. W rzeczywistości sekcja ta prawdopodobnie wyglądałaby bardziej zachęcająco, gdyby usunięto te separatory kropkowane.
Siatki pomagają z bliskością
Jednym ze sposobów grupowania elementów i odpowiedniego wykorzystania białych znaków jest rozpoczęcie od siatki .
Od pobieżnego spojrzenia na strony internetowe LA Times i Globe and Mail, wydaje się, że tylko LA Times oparł swój projekt na siatce lub przynajmniej użył zasad sieciowych na etapie planowania. Witryna Globe and Mail pokazuje niewiele dowodów na format siatki.
Układ oparty na siatce, o odpowiednich rozmiarach rynny, pozwala na dużą przestrzeń między sekcjami, aw wielu przypadkach zmusza projektanta do wdrożenia zasad bliskości bez nawet myślenia o tym.
Poniżej znajdują się zrzuty ekranu z dwóch stron internetowych, które zatrudniały 960 system kratek . Oba są dość proste (tzn. Nie treściwe - jak wyżej omawiane serwisy informacyjne), ale pokazują, że siatki dają elementom strony oddechowej, nadając każdej sekcji własny wizualny dom.
Poprowadź użytkowników na właściwą drogę
Inną ważną zaletą bliskości jest to, że pomaga ona użytkownikom poruszać się po stronie internetowej bez niepotrzebnych opóźnień i przeszkód. Gdy główna nawigacja jest wyraźnie oddzielona od innych elementów na stronie, zostanie natychmiast znaleziona i rzadziej zostanie zapomniana.
Właściwa hierarchia wizualna dzięki bliskości pomaga użytkownikom wniknąć głębiej w twoją stronę internetową, nie martwiąc się o to, gdzie byli i dokąd zmierzają.
Zawsze będą czuli się komfortowo i szybko i sprawnie dotrą do najważniejszych części witryny.
Projektanci stron internetowych z niewielkim doświadczeniem lub bez doświadczenia w projektowaniu druku mogliby wiele skorzystać z zasad, które drukarni projektanci stosowali w praktyce od lat przed boomem internetowym.
Bliskość nie jest jedyną zasadą projektowania, która pomoże witrynie być bardziej użyteczną i przyjemną wizualnie, ale jest ważnym czynnikiem do rozważenia z wielu powodów, które właśnie omówiono.
Dalsze czytanie
- Podstawy projektowania: Zasada bliskości
- Jak CRAP to projekt Twojej strony?
- Korzystanie z grupowania w układach stron internetowych
Ten post został napisany wyłącznie dla Webdesigner Depot przez Louisa Lazarisa, niezależnego pisarza i programistę. Louis ucieka Imponujące sieci , gdzie publikuje artykuły i samouczki dotyczące projektowania stron internetowych. Możesz śledzić Louisa na Twitterze lub skontaktuj się z nim poprzez jego stronę internetową .