Richard Šerý
23.11.2010

GUI Design: Vzhled



Vzhled prodává. O tom žádná. Na druhou stranu, neexistuje žádná triviální rovnice typu „krásný produkt = obchodní úspěch“. Celá věc je složitější a k tomu, abyste mohli vzhled použít jako nástroj, potřebujete o něm určité věci vědět.

Bulldog Pup

Vzhled je důležitý

Ačkoli vzhled je zdánlivě jen „pozlátko“, pro uživatele je velice důležitý. Nejenže může mít značný vliv na použitelnost (tlačítka s 3d efektem jsou použitelnější než tlačítka bez něj), ale dává také signál, do jaké míry je tvůrce schopný, jak dokáže dbát na detaily a do jaké míry dokáže chápat potřeby zákazníka.
Zvláště u komerčních a propagačních webů je třeba si uvědomit, že zákazníci se rozhodují především podvědomím, takže solidní vzhled může zapůsobit účinněji než sebelepší argumenty.

Vztah formy a funkce

Existují dvě hlavní cesty, jakými se designér může ubírat při návrhu: „foma následuje funkci“ a „funkce následuje formu“. Ačkoli v jiných oborech designu je forma trochu složitější záležitost, v případě GUI designu se omezuje téměř výhradně na vzhled.

  • Strategie „forma následuje funkci“ vede k tomu, že vzhled GUI podtrhuje jeho funkčnost. Funkce je to důležité, vzhled tu je zejména od toho, aby zvýšil použitelnost. Tato strategie je vhodná zejména pro návrh užitkového softwaru – tabulek, administračních rozhraní, formulářů.
  • Strategie „funkce následuje formu“ je vhodná tam, kde chceme hrát na city, kde nejdůležitější je prožitek uživatele a funkcionalita je až druhořadá. Pozor, neznamená to že by GUI nemělo být použitelné. Vzhled však v takovém případě není pouhým prostředkem ke zvýšení použitelnosti, je nástrojem, který tvoří mezi uživatelem a produktem citový vztah. Tato strategie je vhodná hlavně tam, kde chceme zapůsobit – třeba u reklamních a uměleckých webů.

 

Krása není vždy cílem

Mnoho lidí volně zaměňuje pojmy jako „design“, „vzhled“ a „krása“. Ve skutečnosti dobrý design nemusí být vždy krásný. Než začneme navrhovat vzhled, měli bychom mít velmi jasno v tom, kdo budou uživatelé a o jakou estetiku vlastně stojí. Příliš krásné GUI může uživatele odradit, pokud očekávají levný produkt.
Jestliže jsou všechny produkty konkurence krásné, můžete šokovat uživatele zdánlivou ošklivostí a tím upoutat jeho pozornost. Pokud uživatel očekává standardní administrační rozhraní, je často lepší přidržet se existujících konvencí, než zavádět vlastní normy, byť i lepší.
Dokonce i ošklivý produkt se může prosadit, je-li užitečný. Na druhou stranu, lidé se rádi obklopují krásnými věcmi, takže pokud tomu nic nebrání, mělo by být pěkné elegantní GUI samozřejmostí.

Opravdu rozumíte grafice?

Častým nešvarem je přesvědčení, že „každý je tak trochu grafik“. V mateřské škole se přeci malovat učí každý. Ale zodpovězte si otázky:
opravdu víte jak pracovat s negativním prostorem? Znáte aspoň základní typografická pravidla? Dokážete kombinovat barvy tak, abyste navodili určitý pocit? Dokážete vyjmenovat aspoň 5 způsobů, jak dát vzdálené prvky stránky navzájem do souvislosti? Rozumíte grafické rovnováze a vizuální hierarchii?
Pokud ne, nesnažte se říkat grafikovi, jak má dělat svoji práci, nebo snad dokonce patlat grafický návrh sami. A rozhodně si ověřte, zda váš grafik odpovědi na výše uvedené otázky zná.

Nešikanuje vás grafik?

Častým problémem grafiků je komunikace. Zákazník přijde s nějakým nápadem, přednese ho grafikovi, grafik obrátí oči v sloup a nápad bez váhání smete ze stolu jako naprostý nesmysl. Ano, jistě, obvykle to naprostý nesmysl je, ale i nesmyslný požadavek může mít zdravé jádro.
Neříkejte grafikovi jak má co vypadat, raději mu řekněte, čeho chcete dosáhnout. Když máte dobrého analytika nebo projektového managera, může sloužit jako „překladatel“ mezi zákazníkem a grafikem. A najdou se i sveřepí grafici, kteří razí svoji „uměleckou“ vizi i navzdory marketingovým záměrům zákazníka. Ale design a umění, to není totéž.
Jestliže se nemůžete shodnout, udělejte test (např. A/B testy na tohle fungují dobře).

Design který prodává a design který funguje

V marketingu je notoricky známé pravidlo, že každý zákazník jsou vlastně dvě osoby: jedna produkt kupuje a druhá ho používá.
Chcete-li jen „prodat a zmizet“, volte strategii „funkce následuje formu“, investujte do vzhledu a propagace.
Chcete-li však mít loajální zákazníky, musíte se zaměřit i na druhou část jejich osoby – na tu, která Vaši aplikaci používá.
A pozor, tohle rozhodnutí by neměl dělat grafik, jde o marketingovou strategii, která by měla být součástí grafikova zadání.

Pravidla grafického designu

Mission Beauty Shop

Ať už se sami pouštíte do grafického designu, nebo se snažíte nějak řídit grafika, je potřeba chápat určité principy.
Pokusil jsem se alespoň některá pravidla shrnout do bodů – rozumíte-li designu, posuďte, jak se mi to podařilo a můžete mi to řádně osolit v komentářích.

Nebojte se rozhodnutí
Někdy bolí, protože musíte zahodit to, co se vám líbí, na čem vám záleží, nebo na čem jste tvrdě pracovali. Je však třeba poznat možnosti a pak se rozhodnout, o tom je design.

Jednoduchost a komplexnost
Jednoduchost a komplexnost jsou dvě strany téže mince. Jednoduchost bez komplexnosti působí primitivně, komplexnost bez jednoduchosti zmateně. Ukazujte uživateli raději tu jednoduchou stranu.

Sdělte příběh
Bez příběhu nepředáte myšlenku.

Odstraňte zbytečnosti
Ockhamova břitva je imaginární nástroj, kterým ořezáváme vše, co není nezbytně nutné, dokud nevynikne pravá, jednoduchá podstata. Když design nefunguje, zkuste se nejprve zbavit všeho zbytečného.

Dbejte na konzistenci
Udržet jednotu výrazu, to je stálý boj, který nikdy nesmí polevit, jinak ho prohrajete.

Vytvářejte kontrast
Hledejte kontrast všude – v barvách, písmu, významech, rozmístění prvků, obrazech… Kontrast je klíčový, bez něj to nejde.

Dva, maximálně tři
To je vhodný počet druhů písma a barev. Dva druhy jsou nutné k vyvolání kontrastu. Tři použijte jen tehdy, pokud opravdu dobře víte, co děláte.

Pět až sedm
Tolik věcí pojme krátkodobá paměť uživatele. To je vhodný počet prvků v seznamu, položek menu, ovládacích ikon, upoutávek, tlačítek formuláře atd.

Upoutejte pozornost
Fungují zde staré principy – útok na kořist a útěk před šelmou, společenská komunikace, sex, potrava. Primitivní mechanismy jsou nejsilnější. Pohyb, oči, obličej, lidské tělo, ovoce, rudá barva – to vše jsou silné stimuly, jejichž účinnost zajistila evoluce.

Zajistěte vizuální hierarchii
Upoutejte oko diváka na jedno místo, ale pak ho veďte dál, abyste předali celé sdělení.

Využijte negativní prostor
Nebojte se prázdného místa. Nic tak nezvýrazní dominantu stránky jako spousta prázdného prostoru kolem. Dívejte se na tvar prázdného prostoru a využijte ho.

Cit je důležitý
Můžete znát stovky pravidel dobrého designu, ale bez citu je nedokážete využít. Dejte na svoji intuici a nebojte se porušit pravidlo, pokud se mu váš cit vzpírá.

Pravidla jsou důležitá
Pravidlo, které neznáte, nemůžete ani použít ani porušit. Učte se a hledejte pravidla, používejte je, diskutujte a pište o nich. Zlepší to vaše chápání designu.

Vdechněte svému designu život
Symetrie je nuda a nuda je smrt. Vytvořte pohyb, nerovnováhu, napětí.

Nebojte se chyb
Dělá je každý. Obhajujte svoje názory, dokud se neprokáží jako chybné, jinak bude váš design bez výrazu. Ale když odhalíte chybu, postavte se k ní čelem.

Poučte se z chyb
Jen hlupák opakuje stejné chyby stále znovu. Nebojte se přiznat svoji chybu, protože jen takovou chybu, kterou si přiznáte a pochopíte, už nebudete opakovat.

Snažte se o dokonalost
Bez snahy o dokonalost je design jen rutinou. Takový design postrádá jiskru a divák to pozná.

Závěrem

Grafika je důležitou součástí návrhu GUI – může produktu velmi pomoci, ale může také hodně zkazit. Stát se dobrým grafikem, to je dlouhá cesta. Podobá se tomu, co popisují zenoví mistři – jen ten kdo grafiku dělá stále a vytrvale, neustále se snaží zlepšovat, dojde k jednoduchosti úplných základů. Pokud se po této cestě nechcete vydat sami, nezbyde vám, než důvěřovat těm, kteří po ní jdou. V takovém případě se ale snažte být tak chytří, abyste jim nestáli v cestě. Předchozí díl: Použitelnost

Vaše emailová adresa nebude zveřejněna

Komentáře

Děkujeme za váš komentář
Další
  • Frantisek Quentin Maun

    Zajímavý článek. Díky. Myslím, že se stále v designu aplikací zapomíná na důležitou věc a to je mentání model uživatelů. Možná o něm grafici uvažují automaticky a možná že ne. Ve vývoji aplikací je důležitá fáze analýzy uživatelských potřeb - funkcí aplikací a často se navrhne i grafické rozhraní ale bez zapojení uživatelů. Nikdo se jich neptá, jak pracují, v jakém sledu plní úkoly a jaké informace právě potřebují. Kdybychom se na to ptali jistě by aplikace vypadaly úplně jinak než vypadají na základě klasického spostu - analýza - obrazovky ve vyvoji - testovani a pak ejhle uzivatele nejsou spokojeni. Proc asi? Logice aplikace nerozumí, protože to vymýšlel někdo, kdo jejich práci nezná atd.