3 Cs uživatelských rozhraní: barva, kontrast a obsah

Existuje starý obchodní model, podle kterého žije mnoho obchodních stratégů - 3 Cs. Je to připomínka zaměřit se na společnost, zákazníky a konkurenty . Tento model používá také mnoho malých podniků a webových stránek. Ale pro designéry jsou tři Cs trochu odlišné.

Při vytváření uživatelských rozhraní byste se měli soustředit na barvu, kontrast a obsah. Tyto tři prvky jsou základem dobrého designu. Ale každý je trochu složitější, než by se mohlo zdát z povrchu. Zde je návod, jak přemýšlet - a začlenit - tři Cs uživatelských rozhraní do vašich návrhových projektů.

Prozkoumejte zdroje návrhu

Barva

Barva je jedním z nejviditelnějších vizuálních prvků pro většinu uživatelů. Designéři i jiné než designéry mohou mluvit o barvě a o tom, zda se k nim líbí určitý odstín nebo paleta.

Barva může vytvořit zřetelné emocionální spojení zcela sama, bez dalších efektů. Můžete předat barevný vzorek nebo čip téměř komukoli a získat reakci na jakoukoli viditelnou barvu. Je to také vtipný designový prvek v tom, že osobní a designové preference mají tendenci se v průběhu času měnit téměř všeobecně.

Barva může vytvořit nebo rozbít design z mnoha důvodů, ale především to dělá tolik věcí a poskytuje tolik vizuálních podnětů pro uživatele současně, že je nemůžete ignorovat.

Barevné dopady:

• Použitelnost a čitelnost
• Poznání značky a povědomí
• Kde uživatelé vypadají a komunikují
• Organizace a tok uživatelů
• Celkový úspěch designu

Pomocí barvy vytvořte:

• Navigace, která je jasná a srozumitelná
• Intuitivní interakce
• Nálada pro projekt
• Vytvářejte silné výzvy k akci nebo použitelné prvky
• Zjistit, o čem je design, jako je realita versus fantazie

To by se mohlo zdát jako vysoký řád pro něco tak jednoduchého, jako je kombinace červené, zelené a modré.

Takže, kde začít? Pravděpodobně nejdůležitější proměnné, pokud jde o barvu, je vytvoření palety, která zaujme uživatele a mluví o tom, o čem design je (jako je branding a nálada). Například by webové stránky pro Coca-Cola, které používaly modrou jako dominantní barvu spíše než červenou, byly pro uživatele nepříjemné.

Paleta plných barev je zakořeněna v principech teorie barev.

Paleta plných barev je zakořeněna v principech teorie barev. K tomu, aby to fungovalo, nepotřebujete více než pár barev. Stačí dvě až tři barvy a dobrá knihovna světlejších a tmavších variant. Mockplus doporučuje pravidlo 6: 3: 1: vyberte tři barvy pro paletu, včetně dominantní barvy, která používá 60 procent času, sekundární barvy, která se používá 30 procent času a zvýraznění barvy, které mohou být ve zbývající 10 procent designu. Pravidlo je zakořeněné ve zlatém poměru, základu teorie designu a může být skvělým výchozím bodem.

Zde je další pravidlo pro vytváření barevných palet v uživatelských rozhraních: začněte černobíle. Pokud je návrh použitelný bez barvy, bude pravděpodobně fungovat po přidání barvy. Černobílý obrys vám také dává dobrou představu o tom, jak vybírat barvy s dostatečným kontrastem (druhý C), aby se zvýšila použitelnost.

Kontrast

Kontrast vytváří rozlišení mezi prvky. Pomáhá vytvářet vizuální hierarchii, skenovatelnost a přispívá k tomu, jak snadné je něco rychle pochopit. Prvky se silným kontrastem usnadňují uživateli pohled z jedné věci na druhou a vytvářejí přirozený vizuální vzor a tok uživatele.

Důvod, proč je pro návrh uživatelského rozhraní tak důležitý, je, že je součástí všeho, co děláte. Způsob vytváření kontrastu se liší v závislosti na typu prvku vizuálního efektu.

Můžete vytvořit kontrast s:

• Barva
• Velikost
• Směr
• Prostor
• Tvar

Klíčovým prvkem pokynů pro usnadnění přístupu je kontrast, protože zajišťuje, že uživatelé mohou v návrhu rozeznat jeden prvek od druhého. Projekt A11Y, jehož cílem je usnadnění přístupu na web, má toto doporučení: začít barevným kontrastem použitím barev z různých segmentů barevného kola nebo kontrastních barev. Pamatujte, že doplňkové barvy - protiklady na barevném kolečku - poskytují maximální kontrast.

Stejný koncept platí i pro vytváření kontrastu mezi ostatními prvky. Vyberte písma z různých rodin nebo použijte výrazně odlišné velikosti, které uživatelům pomohou rychle přečíst slova.

Stručně řečeno, myšlenkou kontrastu je to, že protiklady přitahují.

Použijte směrové značky, šipky nebo obrázky s pohybem, abyste uživatele donutili dívat se určitým směrem, a poté otočením směrového tága ještě více kontrastujte.

Rozdíl mezi těsným a otevřeným prostorem vytváří velký kontrast. Pokud chcete zajistit, aby byl text snadno viditelný a čitelný, věnujte mu trochu více prostoru, aby na něj upozornil.

Stručně řečeno, myšlenkou kontrastu je to, že protiklady přitahují. Prvky, které jsou zdánlivě odlišné, mohou ve skutečnosti spolupracovat, takže oba jsou snadno vidět na první pohled.

Chcete-li vědět, zda kontrast funguje tak, jak máte v úmyslu, při pohledu na prvky na obrazovce přemýšlejte o několika faktorech:

• Čitelnost: Jsou všechna slova a obrázky snadno vidět a číst?
• Jasnost: Je snadné rozlišit jeden prvek od druhého?
• Dostupnost: Funguje pro co nejvíce lidí?
• Prostředí: Mohou uživatelé vidět a porozumět designu v místech, kde budou použity?

Obsah

Poslední ze tří Cs je obsah. Návrh uživatelského rozhraní může být stejně dobrý jako informace v něm obsažené. Obsah zahrnuje vše od obrázků po text, ilustrace a ikony, loga a značky. Obsah také zahrnuje video a každou část kopie od úplného zasílání zpráv nebo vyprávění až po příspěvky na blogu po drobné kousky mikrokopie.

Stačí mít obsah nestačí. Musíte mít hvězdný obsah.

Všechny tyto prvky se spojí, aby vyprávěly příběh toho, proč je váš design a uživatelské rozhraní zvláštní. Proč by vám uživatelé měli dávat čas spíše než dělat něco jiného?

A stačí mít obsah nestačí. Musíte mít hvězdný obsah. Obsah s vysokým rozlišením. Obsah s vysokou hodnotou. Váš obsah musí být lepší / větší / speciálnější než podobný obsah soupeřící o pozornost uživatelů.

Může to být vysoká objednávka, ale většina návrhářů může tento obsah vytvořit tak, že bude věrná sobě i své značce a zprávám. Držte se toho, co jste a co víte. Uživatelé uvidí tuto autentičnost a doufejme, že si ji cení tím, že tráví čas s designem.

Závěr

Nyní, když jste vyzbrojeni třemi starými obchodními společnostmi - společností, zákazníky a konkurenty - a třemi Cs uživatelského rozhraní - barvy, kontrastu a obsahu - máte nástroje a znalosti k vytvoření projektu designu, který je mimo tento svět dobrý. (Nebo alespoň vysoce použitelné.)

Díky práci obou strategií na projekčních projektech jste nuceni přemýšlet o tom, jak vytvořit něco, co bude prospěšné pro majitele webových stránek a uživatele. Vytváříte nejen proto, aby byl design krásný, ale také funkční.

Poznámka: Všechny příklady v tomto článku pocházejí z galerie Design Shack Gallery. Nezapomeňte se rozhlédnout; je plná skvělé práce a inspirace.