Princip proximity ve webovém designu

Nedávno jsem zvedl jeden staré designérské knihy že jsem se za chvíli nedotkla a připomněla mi návrhářskou zásadu, že mnozí z nás praktikují pravděpodobně jen podvědomě, pokud vůbec.

Kniha se zabývá návrhem na tisk, ale myslela jsem si, že to bude skvělé téma pro diskusi v kontextu webového designu.

Princip proximity vyžaduje související položky, které mají být seskupeny vizuálně, vytvářet menší nepořádek a vytvářet organizovanější uspořádání. Položky, které nejsou navzájem vázány, by měly být od sebe vzdálenější, aby zdůraznily jejich nedostatek vztahu.

Budeme diskutovat detaily a některé způsoby, jak to může být efektivně implementováno, ale tato definice by měla stačit pro to, co budeme diskutovat v tomto článku.

Správné používání blízkosti ve spojení s jinými zásadami návrhu má velký vliv na zkušenosti uživatele a nakonec na celkový úspěch internetových stránek.

Nebojte se bílého prostoru

Prvním krokem k správnému provedení principu blízkosti je porozumění významu bílého prostoru v designu.

Nedostatek bílého prostoru je běžným problémem v amatérském designu. Návrh je prostředkem pro sdělování informací a když se amatéri snaží podat zprávu prostřednictvím návrhu, je jejich přirozeným náklonem rovnoměrné rozložení obsahu tak, aby vyplňoval prostor, aniž by se přemýšlel o potenciálu dobře organizovaného bílého prostoru.

Bílý prostor může ovlivnit chování uživatele tolik, ne-li více než skutečný obsah na stránce. Bílý prostor vede uživatele očí zamýšleným směrem, vytváří kontrast a vytváří trvalý dojem.

Přestože webové stránky společnosti W3Avenue obsahují značné množství obsahu (s články v řadě kategorií, jako je každý návrhářský blog) a řada reklam na bočním panelu, nepřekvapuje uživatele vizuálně.

Velkorysá místnost v hlavičce a příslušně rozmístěné položky v obsahu a postranních pruzích přispívají k tomuto čistému a organizovanému vzhledu. W3Avenue nedělá nic zvláštního s jeho obsahem, ale jeho design pravděpodobně přispívá k silná návštěvnost dostane se do krátké časové období .

Takže neváhejte na prázdný prostor ve svém designu. Správné použití bílého prostoru je prvním krokem při zavádění principu blízkosti a tím, že je design více vizuálně přitažlivý.

Vizuálně související prvky

Bílý prostor je však jen jednou částí implementace blízkosti. Návrh může mít spoustu bílého místa, ale pokud položky nejsou správně seskupeny , bude mít bílý prostor malý efekt, jak je znázorněno dvěma vizitky uvedenými níže:

Karta vlevo není přeplněná; má nějaký bílý prostor. Ale prvky nejsou logicky seskupeny, takže efekt je slabý.

Čtenář je nucen vícekrát prohledávat kartu. Karta vpravo má však příjemnější vizuální efekt. Čtenář se prostě musí podívat na to, aby získal informace (více o tom později).

Sdružování prvků v kartě vpravo je také logičtější . V první sadě prvků vidíme název firmy ve velkém písmu s umístěním pod ním. Druhá sada nám říká, jak získat informace o poskytovaných službách (např. Telefonní číslo a adresa webových stránek).

Tento příklad ilustruje důležitost blízkosti v tisku a podobný nápad může být použit pro prvky v návrhu webových stránek, jak je ukázáno na obrázku níže.

I když webová stránka společnosti Arora Designs není složitá nebo těžká pro informace, je efektivní využití bílé plochy a vizuální separace seskupených prvků. Zde je třeba poznamenat, že "bílý prostor" nemusí být bílý; může být libovolný prázdný prostor mezi prvky bez ohledu na barvu.

V případě modelů Arora, ačkoli má bílý prostor barvu, slouží stejnému účelu vizuálního oddělení oblastí záhlaví, navigace a obsahu.

Vytváření vizuální hierarchie

Používání efektivního prostoru a seskupování souvisejících prvků je rozhodující pro to, aby vaše webové stránky měly jasnou vizuální hierarchii. Samozřejmě, architektura a tok informací o webu je základem efektivní blízkosti .

Hierarchie je zprostředkována způsobem, ve kterém jsou prvky seskupovány a podskupinovány.

Tato hierarchie pomáhá uživateli porozumět tomu, kde se nacházel a kde chtěla jít, a tím pomáhá sdělovat účel webových stránek. Seznam je dobrým příkladem prvku, který má možnost komunikovat vizuální hierarchii, jak je znázorněno na následujícím obrázku:

Stačí se podívat na výše uvedené dva seznamy, aniž byste zkoumali obsah, a uvidíte, že seznam na levé straně má jasnou vizuální hierarchii a zobrazuje vztahy mezi položkami (odsazené položky jsou podkategorie primárních položek).

Tato hierarchie by nebyla možná bez bílého prostoru (včetně makro a mikro bílý prostor). Seznam vpravo je jen náhodný seskupení prvků bez zdánlivého vztahu nebo hierarchie.

Implementace tohoto principu na webových stránkách s něčím tak jednoduchým jako seznam HTML je snadná. Výzvou je použití této zásady jako vodícího faktoru při konstrukci webové stránky od fáze plánování a drátování až po návrh.

Rozvržení, které lze snadno skenovat a číst

Obsah, který je uspořádán do hierarchie a logicky seskupován, je snazší číst a skenovat .

Nadpisy by například měly umožnit uživateli skenovat jasným uvedením hlavních bodů. Netřeba dodávat, že obsah by měl být naplánován od začátku k tomu, aby odrážel vhodnou vizuální hierarchii; výše uvedený seznam s odsazenými položkami je špatným příkladem, protože obsah neodpovídá vizuální hierarchii.

Webové stránky, které používají blízkost v architektuře a designu, nepřebírají uživatele informacemi.

Takže, ačkoli je relativně snadné zavést zásady blízkosti na webových stránkách, které jsou světlo na obsahu, blízkost je mnohem důležitější na webových stránkách bohatých na obsah.

Zprávy o webových stránkách jsou dobrými případovými studiemi tohoto principu. Níže je porovnání Los Angeles Times a Globe and Mail .

Celkově má stránka LA Times příjemný design především díky výběru barev a typografii. Má však také čistý a přehledný vzhled, zejména v sekci záhlaví.

Logo je velké a vyniká a efektivně přispívá k tvorbě značky. Objekt nejblíže k logu je horizontální navigační lišta níže. Protože navigační lišta je tmavá, kontrastuje s logem.

Textové odkazy nad logem jsou úhledně uspořádány a mezi oběma sekcemi je dostatek místa. Zarovnání vlevo do obsahu v hlavičce také přispívá k čistému vzhledu.

Každý bit informací v hlavičce LA Times je seskupen se souvisejícími položkami, s výjimkou loga, který stojí sám. Nic v záhlaví vás nezamlouvá nebo vás zvěstuje, kam patří.

Co je to s webem Globe and Mail, které je uvedeno níže?

Stránka Globe and Mail má složitou sekci záhlaví, která nedokáže implementovat zásadu blízkosti.

Jediné významné množství bílého prostoru je uprostřed, vedle loga, které nedosahuje nic. V záhlaví se zobrazují dvě reklamy, které přispívají k nepořádku. Reklamy mohou být z finančních důvodů nezbytné, takže problémy jsou srozumitelné.

Největším problémem je špinavá část nad reklamou s velkými banery. Mezi prvky v této části neexistuje jasný rozdíl.

Tři bodkované svislé čáry se pokoušejí oddělit oblast do čtyř částí, ale první oddělovač nemá žádný smysl. Ve skutečnosti by tato část pravděpodobně vypadala víc pozvaně, kdyby byly odstraněny tyto oddělené oddělovače.

Mřížky pomáhají s blízkostí

Jedním ze způsobů, jak seskupovat položky a správně používat prázdné místo, je začít s mřížkou .

Ze zběžného pohledu na webové stránky LA Times a Globe a Mail se zdá, že jen LA Times založily svůj design na mřížce nebo alespoň používaly zásady založené na grid ve fázi plánování. Webové stránky Globe and Mail zobrazují jen málo důkazů o formátu sítě.

Rozložení založené na mřížce s vhodnými rozměry žlábků umožňuje dostatek prostoru mezi jednotlivými úseky a v mnoha případech nucuje konstruktéra k tomu, aby uplatňoval zásady blízkosti, aniž by o tom přemýšlel.

Níže jsou screenshoty ze dvou webových stránek, které používají 960 mřížkový systém . Oba jsou poměrně jednoduché (tj. Nejsou těžké, jako jsou zpravodajské weby diskutované výše), ale ukazují, že mřížky poskytují elementům stránky dýchací místnost a poskytují každé sekci vlastní vizuální domov.

Vést uživatele dole na pravé cestě

Dalším velkým přínosem blízkosti je to, že pomáhá uživatelům navigovat na webových stránkách bez zbytečných zpoždění nebo překážek. Když je primární navigace jasně oddělena od ostatních prvků na stránce, objeví se okamžitě a je méně pravděpodobné, že bude zapomenuta.

Správná vizuální hierarchie prostřednictvím blízkosti pomáhá uživatelům proniknout hlouběji do svých webových stránek, aniž byste se museli starat o to, kde jsou nebo kam směřují.

Vždy se budou cítit pohodlně a rychle a efektivně se dostanou na nejdůležitější části vašeho webu.

Weboví návrháři s malou nebo žádnou zkušeností s tiskovým designem by mohli značně těžit z principů, které tiskové designéři zavádějí do praxe již před lety.

Proximita není jediným principem návrhu, který pomůže místům být použitelnější a vizuálně příjemnější, ale je důležitým faktorem, který je třeba zvážit z mnoha důvodů, o kterých se právě diskutovalo.

Další čtení

Tento příspěvek byl napsán výhradně pro Webdesigner Depot Louis Lazaris, nezávislý spisovatel a webový vývojář. Louis běží Působivé weby , kde publikuje články a cvičení o web designu. Můžete sledovat Louis na Twitteru nebo se s ním spojte přes jeho webové stránky .

webový design principy návrhu bílý prostor principu blízkosti