Přestaňte být tak náměstí
Jako odborník v oblasti designu jste obeznámeni s (a možná přispíváním) ke zvýšenému používání kruhů ve všech prvcích designu.
Z prvků domácího dekorativního materiálu, jako jsou zrcadla s kruhovým rámem a výtisků na ruční nástroje v obchodě s hardwarem, jsou kruhy všude. Kruhy se dokonce natočily do našich webových stránek, objevily se v záhlaví, v menu a někdy se rozbíjely uprostřed stránky.
Několik designových stránek dokonce vytvořilo blogové příspěvky včetně skvělých screenshotů kreativního využití kruhů v designu webu. Nicméně bylo řečeno málo o psychologii, za kterou se používají kruhy v návrhu, nebo o tom, jak může být reakce uživatele na kruhy účinně začleněna do rostoucího jevu mobilního použití.
Víme, že máme rádi kruhy, ale proč? A jak může webový návrhář nejlépe využít kruhy pro optimalizaci uživatelské zkušenosti v citlivém designu?
Kruhy a mozek
Poznání a vnímání
Kruhy apelují na lidi, protože jsou srozumitelnější než tvary a objekty s pevnými liniemi.
Oko je kresleno kružnicemi a informacemi obsaženými uvnitř, a jsou pro mozog rychlejší a snazší než kvádry a obdélníky s tvrdými okraji.
Švýcarský matematik a fyzik Jurg Nonni, autor Visual Perception, naznačuje, že odstranění okrajů nám umožňuje rychlejší vnímání objektu. Podle Nonniho "obdélník s ostrými hranami má opravdu trochu větší kognitivní viditelnou snahu než například elipsa stejné velikosti. Naše "fovea-eye" je při záznamu kruhu ještě rychlejší. Hrany zahrnují další neuronální obrazové nástroje. Proces je tedy zpomalen. "
Známé a uklidňující křivky
Kromě kognitivní schopnosti mozku zpracovávat kruhy rychleji, než dokáže zpracovat čtverce a obdélníky, zpracováváme známé informace a objekty rychleji než ty, které nerozpoznáváme.
Každý rozpoznává kruhy a lidé se naučí spojovat tvary se specifickými akcemi a výsledky, jako je například znak "STOP" univerzálního červeného osmiúhelníku. Podle pokynů Apple OS X Human Interface Guidelines "Lidé se naučí spojovat určité chování se specifickými prvky na základě jejich vzhledu. Lidé například rozpoznávají tlačítka podle jejich zaobleného tvaru. "
Efektivní použití kruhů v ikonických položkách menu Azonmedia Stránky služby.
Setkáváme se s kruhy, ovály a zaoblenými objekty mnoha teplými a neohrožujícími způsoby napříč kulturami a prostředím. Mraky, vejce, slunce a měsíc v přírodě se objevují zaoblené pouhým okem. Smajlíky, koláče, koláče, křivé postavy jsou pro všechny smysly příjemné.
Naše mozky dobře reagují na kruhy a křivky, zatímco vnímání tvrdých předmětů jako tvrdší, přesnější a s potenciálem ohrožení.
Kruhy a zkušenosti uživatelů
Kruhy jsou efektivní v návrhu webových stránek právě z těchto důvodů.
Uživatelé online jsou notoricky netrpěliví a protože kruhy jsou snadněji vnímány a pochopeny, trvá méně času na zpracování informací, které představují.
Mobilní uživatelé jsou ještě netrpělivější. Jsou také zaneprázdněni, často v pohybu, multi-tasking, a pomocí prstu nebo palec navigovat jejich kapesní zařízení. Chtějí své informace nyní. Kruhy pomáhají mobilním uživatelům přesněji vyhledávat informace, které vyhledávají.
Kruhy a palce
Dalším způsobem, jakým jsou kruhy výhodné v mobilním prvním a citlivém designovém prostředí, je jejich vhodnost jako prvků v dotykovém rozhraní.
Uživatelé smartphonů s dotykovým displejem a uživatelé tablet mohou klepnout na klouby, posunout si palec nebo směrem k požadovaným informacím. Má smysl používat kruhy, které nasměrují uživatele. Nejen, že napodobují tvar prstů, spojují kruhy a zaoblené hrany tlačítky a mozky rychle zpracovávají požadované akce.
web Developer Oliver James Gosling
Když vložíte kruhy do mobilního rozhraní s dotykovou obrazovkou, navrhněte na nejmenší obrazovku. Text nebo obrázky v kruhu musí být stále snadno čitelné a velikost musí zůstat minimálně velikosti prstu nebo 44 pixelů.
Kruhy a prostor na obrazovce
Dobrou zprávou o použití kruhů v citlivém návrhu je, že CSS3 velmi zjednodušuje požadavky na kódování.
Špatnou zprávou je, že kruhy zabírají spoustu nemovitostí a vedou k otevřenější obrazovce.
Vzhledem k tomu, že obrazovka na smartphonech a tabletech může být poměrně malá, jak můžete představit kruhy, aniž byste se obávali, že se stanou tak malými, že je nemožné číst, klepat nebo klepnout?
Jednoduché mobilní rozhraní
Pomáhá udržovat mobilní rozhraní jednoduché. Jakkoli je oko přitahováno k okruhu, nemá smysl přenášet zbytek obrazovky s obsahem, který uživatel neuvidí.
Pokud nejsou součástí hlavičky nebo loga, použijte kruh na minimálně jednu nebo dvě na každé stránce. Zkuste použít tlačítko s kruhovým vyhledáváním nebo použijte jeden k výzvě k akci, např. "Zavolejte sem" nebo "zaregistrujte se zde".
Gravity Design používá kruhy a barvu, aby přilákala oko k logu, portfoliu a textu na domovské stránce.
Pozadí a tlačítka pro sdílení
Stejně jako u jiných konstrukčních prvků, použití kruhů musí vyhovovat obsahu, produktu nebo službě, stylu a značkování webu. Měla by zlepšit uživatelskou zkušenost a zjednodušit rozhraní.
Pokud použití výzvy k akci není pro daný web vhodné, nebo pokud položky navigace a nabídky jednoduše nefungují v kruhu, zvažte začlenění kruhu do pozadí. Na pozadí použijte větší kružnici, abyste nakreslili oko na nejdůležitější část obsahu na stránce (poloprůhledná za textem).
Pamatujte si, že obsah je tím, čím je mobilní uživatel zde. Povzbuďte interakci uživatelů tím, že místo kruhových voleb zvolíte tlačítka sdílených sociálních médií.
Kruhové ikony v citlivém designu
Jeden z nejpopulárnějších způsobů, jak vložit kruhy do webových stránek, je jako ikony v nabídce. To vyhovuje citlivému designu dobře, protože nahrazuje zdlouhavý a / nebo matoucí text s jednodušším obrazem.
Buza používá kruhy pro doplnění vertikálního mobilního menu.
Kruhová ikona zabere méně místa a umožňuje větší prostor pro obsah. Vypadá dobře a uživatel rychle zpracovává, co představuje.
Ovály nebo zaoblené obdélníky
Možná nejste připraveni zabalit ruce kolem velkého starého kruhu. To je v pořádku. Ale nedotýkejte se tvrdých okrajů.
Přidejte nějaké zaoblené obdélníky nebo ovály do vaší reagující konstrukční sady nástrojů. Vyhlazené rohy usnadní orientaci na obsah uvnitř křivek, namísto toho, abyste upoutali pozornost na vnější okraje.
Konečné slovo
Zatímco weboví designéři mohou strávit hodiny agonizujícími zásluhou kruhů nebo obdélníků s okrouhlými okraji a ostrými hranami, pokud jde o potěšení uživatele mobilním designem, je to vše o obsahu. Uživatel chce zaujmout a užitečný obsah prezentovaný v jednoduchém a snadno vyhledávacím rozhraní. Všechno ostatní je druhotné.
Ačkoli reagující webový design se snaží reagovat na životní prostředí, měl by reagovat i na potřeby uživatele. Uživatelé rozeznávají známý tvar kruhu, vnímají ho rychle a snadno dokáží bod, na který lze kliknout, na obrazovce. Použijte jednoduchý kruh ve vašem příštím designu. Vaši uživatelé vám za to poděkují.
Používáte kruhy pro výzvy k akci? Hrajete to v bezpečí s jemně zaoblenými obdélníky? Dejte nám vědět v níže uvedených komentářích.