Jak udělat nejlepší uživatelské rozhraní

Dobré uživatelské rozhraní je snadno ovladatelné a hezké na pohled. Zrovna tyto dvě informace ví jistě každý. Ale jak takové rozhraní vytvořit? Pojďme se podívat na pár tipů.

1. Jeden sloupec místo několika

Layout s jedním sloupcem vám poskytne větší kontrolu nad obsahem. Rovněž čtenáře povede lépe předvídatelným způsobem – prostě shora dolů. Další sloupce by mohly působit rušivě a odvádět pozornost od hlavního účelu stránky. No a protože příběh lidi provede pěkně až dolů, je tam ideální místo pro výzvu k akci.

idea001

2. Dárek místo uzavření prodeje

Když dáte zákazníkovi jako bonus dárek, může to brát jako přátelské gesto. Ale darování je také efektivní přesvědčovací taktikou, která je založená na zásadě vzájemnosti. Když zákazník dostane dárek, bude rád, a bude se vám chtít odvděčit tím, že si u vás příště opět něco koupí. Takže vlastně když budete chtít uzavřít svůj obchod, nedělejte to. Začněte rozdávat dárky.

idea002

3. Spojení podobných funkcí

Jak postupně přidáváte další a další prvky, často neúmyslně vytváříte stále více a více prvků, které vlastně plní tu stejnou funkci. Je to vlastně základní princip entropie. Dávejte tedy pozor na duplicitní funkce, které jsou třeba jen jinak pojmenované. Čím více věcí budete zákazníkům nabízet, tím více věcí bude odpoutávat jejich pozornost. Jednou za čas byste měli udělat šetření a nalezené funkce, které jsou podobné, sloučit dohromady.

idea003

4. Reference jiných místo samochvály

Další skvělou přesvědčovací taktikou jsou reference od vašich zákazníků. Lidé jim budou věřit mnohem více, než když si o sobě napíšete něco sami. Zkuste dát k dispozici přímo vyjádření vašich zákazníků či nějaké příklady služeb, které jste zhotovili.

idea004

5. Opakování toho nejdůležitějšího

Když máte dlouhou stránku nebo mnoho stránek, měli byste svoji výzvu k akci několikrát opakovat. Samozřejmě není vhodné zobrazit desetkrát na jedné stránce tu stejnou věc. To nikoho neohromí, naopak spíše znechutí. Nicméně dlouhé stránky s velkým množstvím obsahu jsou dneska normální. A tak není špatné mít nějakou výzvu k akci v horní části a další zase úplně dole. Když se lidé dostanou na konec, pozastaví se a začnou přemýšlet o tom, co by měli dělat dál.

idea005

6. Různé styly vybraných položek

Vizuální styl jako barva a kontrast může lidem spolehlivě pomoci objevit, kde se nachází a kam mohou jít. Aby to bylo možné, je třeba od sebe odlišit odkazy, tlačítka, právě vybrané položky a prostý text. V příkladu na obrázku je modrou barvou zvýrazněno to, na co může být kliknuto, a černé je to, co je právě vybráno. Udělejte to také tak jednoduše a neztěžujte to mícháním ještě dalších barev.

idea006

7. Doporučení

Pokud budete zobrazovat uživateli více nabídek, zdůrazněte výrobek, který se vám zdá nejdůležitější. Někteří lidé totiž potřebují trochu postrčit. Existují o tom i psychologické studie, že čím větší je výběr, tím nižší je šance, že si člověk skutečně něco vybere. Bojujte proti tomu, zkuste určité možnosti zvýraznit nad ostatními.

idea007

8. Vrátit zpět místo potvrdit

Představte si, že právě stisknete tlačítko, které provede nějakou akci. Většinu takových tlačítek stisknete záměrně a je otravné proklikávat se pak ještě přes nějaká potvrzení, která se vás ptají, zda to opravdu chcete udělat. Daleko lepší je daný úkon provést a pak uživateli nabídnout, aby ho případně vrátil.

idea008

9. Pro určitou skupinu lidí

Zkuste cílit na určitou skupinu lidí, ne úplně na všechny. Samozřejmě je tu ta nevýhoda, že můžete přijít o své potenciální zákazníky. Ale buďte upřímní a opravdu své služby nabízejte jen tomu, komu by se mohli hodit. Lidé pak ve vás budou mít větší důvěru. Když budete hlásat, že je to dobré pro každého, bude to znít trochu jako nepravdivé vychvalování.

idea009

10. Buďte přímí

Můžete něco pronést s nejistotou a chvěním hlasu, nebo to můžete říct úplně sebevědomě. Pokud své vyjádření končíte otazníky a pokud obsahuje výrazy jako „snad“ nebo „možná“, pak si s největší pravděpodobností nejste úplně jisti. A na lidi to nějak zapůsobí.

idea010

11. Více kontrastu

Hodně vaše uživatelské rozhraní posílí, když budou výzvy k akci trochu výraznější než ostatní prvky, které je obklopují. Dosáhnout toho můžete různými způsoby. Zkuste třeba ztmavit některé prvky. Použijte stíny a přechody. Nebo jiné barvy. Mezi výzvou k akci a zbytkem stránky by měl být velký kontrast.

idea011

12. Ukažte všechno přesně

 Nebuďte obecní, nebojte se ukázat všechno konkrétně. Ukažte uživatelům třeba to, odkud pochází váš produkt nebo služba. Uvedení země nebo města působí velmi lidsky, je to jako kdybyste chtěli představit sami sebe. Když uvedete, odkud produkt pochází, bude to také vzbuzovat pocit větší kvality.

idea012

13. Moc se neptejte

Lidské bytosti jsou líné. A při pohledu na hromadu práce před sebou je to ještě horší. Stejně je to i s vyplňováním formulářů. Každým polem navíc riskujete, že to uživatel vzdá. Ne každý píše všemi deseti a takové psaní na mobilu je stále většinou dost fuška. Ptejte se proto u každého pole sami sebe, jestli je opravdu nutné, a co nejvíce jejich počet zredukujte.

idea013

14. Ukažte možnosti

Rozbalovací menu je sice fajn, ale skrývá všechny ty možnosti, které by si někdo mohl vybrat. Pokud by tyto skryté možnosti mohly pomoci k přilákání zákazníků, měli byste je přece zobrazit. Zkuste tedy takové menu používat jen v případech, které jsou předvídatelné (například kalendáře nebo zeměpisné seznamy).

idea014 15. Jasná struktura

Ano, rolování dlouhých stránek je v dnešní době běžné a trendy, ale dávejte pozor, aby si návštěvníci nemysleli, že už jsou na konci, i když to tak není. Pokud plánujete vytvořit dlouhou stránku, uspořádejte ji v určitém vizuálním vzoru nebo rytmu, který uživatel pochopí a bude se na něj moci spoléhat. Dávejte pozor hlavně na příliš velké mezery.

idea015

16. Žádné rozptylování

Je snadné vytvořit stránku se spoustou odkazů, které budou mířit k dalším a dalším výrobkům. Jasně, zvyšuje to vaši naději na to, že někdo narazí na něco, co se mu bude hodit. Pokud ale plánujete ještě na konec stránky přidat výzvu k akci, dobře si to rozmyslete. Každý uvedený odkaz totiž může zákazníky přesměrovat někam úplně jinam, takže k výzvě k akci vůbec nemusí dojít.

idea016

17. Zobrazte stav

V každém uživatelském rozhraní se často objevují prvky, které mohou mít různý stav. E-maily mohou být přečtené nebo nepřečtené, faktury mohou být zaplacené nebo nezaplacené atd. I informování uživatele o stavu, v jakém se nachází zboží, může být dobrý způsob, jak poskytnout zpětnou vazbu. Lidé pak lépe uvidí, zda jejich akce byly či nebyly úspěšně provedeny.

idea017

18. Neúkolujte lidi, něco jim slibte

Představte si dvě jednoduchá tlačítka na jedné stránce. Jedno říká „Ušetřit peníze“ a druhé „Zaregistrovat se“.  Vsaďte se, že větší rozruch vzbudí to první. Proces registrace totiž vyžaduje úsilí a často je spojován s dlouhými formuláři, o kterých jsme se bavili o kousek výše. Navíc když tlačítko nabízí nějakou takovou výhodu, jako je třeba ušetření peněz, je to jednoznačné.

idea018

19. Možnost přímé změny

Když například zobrazíme seznam dat, obvykle chceme, aby uživatel něco s položkami seznamu udělal. Kliknutím nebo přejetím myší nad položku může být odstraněna, přejmenována atd. Dalším příkladem přímé manipulace může být, když se položka po klepnutí změní na editovatelné pole. Vymysle to tak, aby to všechno šlo přímo.

idea019

20. Nevytvářejte pro všechno vlastní stránky

Nemusíte vždy uživatele odkazovat na novou stránku. Občas stačí třeba přidat formulář na původní stránku, ze které jste chtěli odkazovat jinam. Přináší to pár výhod. Zabere to méně času a uživatel hned uvidí počet polí, takže se zbytečně nevyleká a nevzdá to. Samozřejmě pokud máte nějaký dlouhý formulář, radši to takhle neriskujte…

idea020

21. Přechody místo okamžitých změn

Prvky rozhraní se často objeví, skryjí, posouvají se a mění svoji velikost podle toho, co dělá uživatel. Někdy je trochu jednodušší pochopit, co se právě stalo, když prvky reagují na naše interakce. Zpoždění ve formě animace nebo přechodu dá navíc lidem čas všechno pořádně pochopit. Mějte však na paměti, že když zvýšíte dobu trvání těchto přechodů nad 0,5 sekundy, bude to občas otravné. Spousta lidí nemá tolik času, aby ho mohli ztrácet koukáním na přechody.

idea021

22. Zapojte uživatele

Místo toho, abyste uživatele hned žádali o to, aby se zaregistrovali, zeptejte se jich na něco, čím personalizujete jejich zážitek. Jakmile uživatelé uvidí, že jejich názor u vás má nějakou váhu, přinese vám to jedině ovoce. Jejich postupné zapojení je dobrý způsob, jak odložit proces registrace a přitom je nalákat.

idea022

23. Méně rámečků

Rámečky soutěží o pozornost s obsahem. To přece nechcete. Pozornost je vzácný jev, takže když se dostaví, musíte správně uchopit jeho moc. Jasně že rámečky mohou být použity pro definování prostoru, ale existují i jiné způsoby, jak to udělat. Zkuste třeba související prvky seskupit blízko sebe, dát jim stejné pozadí nebo podobný typografický styl. Stránky se spoustou boxů a rámečků mohou působit „hlučně“ – prostě přeplněné obsahem. Zvažte tedy alternativní a způsoby, jak vizuálně zobrazit vztahy.

idea023

24. Výhody koupě místo funkcí

Je to marketing. Lidé se méně starají o funkce, když vidí, že je výhodná koupě. Existuje na to i pár psychologických výzkumů, že lidem prostě hodně záleží na lásce, penězích a volném času. I když určitě se najde i prostor pro představení funkcí vaší služby/výrobku.

idea024

25. Počítejte s nulovými daty

Existují případy, kdy máte 0, 1, 10, 100, 10 000 či více výsledků, které mohou být zobrazeny tolika různými způsoby. Avšak často zapomínáme navrhovat uživatelské rozhraní i pro případy, kdy nemáme žádný obsah. Tím riskujeme ztrátu uživatelů. Když uživatel uvidí, že mu nic nenabízíte, pravděpodobně tím vaše příležitost okamžitě skončí. Takže místo hezké kulaté nuly mu nabídněte aspoň další věci, které by ho mohly zajímat.

idea025

26. Dejte na výběr

Nikdo není rád, když ho do něčeho nutíte a nedáte mu možnost sám se rozhodnout. Když tedy zvolíte zaškrtávací políčko, bude to vypadat, jako že chcete, aby ho uživatel zaškrtl. Tedy ho nutíte to udělat. Zatímco když dáte na výběr ze dvou možností, bude si připadat volnější.

idea026

27.  Jednotný vzhled

Snaha o jednotnost designu uživatelského rozhraní je pravděpodobně jedním z nejznámějších principů. Když bude vaše rozhraní jednotné, uživatel si na něj jednou zvykne a nebude se muset stále učit něco nového. Bude očekávat, že stejně vypadající prvky se budou stejným způsobem chovat. Zkuste tedy stejné tvary, barvy, velikost či písmo. Avšak neutopte se zase v jednotě! I odlišnost je důležitá, především když chcete na něco upozornit.

idea027

28. Buďte inteligentní a šetřete práci

Ušetřete uživatelům práci, použijte předvyplnění formuláře. Některé informace se dají zjistit, tak proč jich nevyužít? Je to běžný postup, jak uživatelům pomoci procházet formuláře rychleji. Jednou z nejhorších věcí totiž je žádat lidi opakovaně o údaje, které již máte k dispozici. Zkuste zobrazit pole s předvyplněnými hodnotami, které stačí ověřit. Čím méně práce, tím lépe.  

idea028

29. Držte se zvyků

Staré dobré zvyky vám mohou jenom pomoci. Pokud se jich budete držet, lidé nebudou s vaším rozhraním tak bojovat. Čteme zleva doprava (aspoň tady u nás), směr dopředu je pro nás vpravo, očekáváme, že nastavení bude mít určitou ikonu atd. Přesně takových zásad se zkuste držet. A pokud to chcete udělat jinak, ujistěte se, že je to s dobrým úmyslem. 

idea029

30. Nezdůrazňujte jen zisky

Lidé rádi vyhrávají, ale nesnáší prohry. Podle pravidel psychologie se lidé raději budou chtít vyhnout ztrátám než něco získat. A tenhle princip můžete použít i na to, jak budete nabízet své produkty.

idea030

31. Vizuální hierarchie místo jednotvárnosti

Dobrá vizuální hierarchie vám může pomoci oddělit důležité prvky od těch méně důležitých. Vyplývá z takových věcí, jako je zarovnání, vzdálenost, barva, sytost, odsazení, velikost písma a prvků, odsazení, mezery atd. Pokud jsou tyto vizuální prvky správně použity, mohou i zlepšit čitelnost. Ona nás hierarchie totiž zpomaluje. S dobrou vizuální hierarchií strávíme na stránce trochu více času a všimneme si více položek. Představte si to jako výlet. Můžete jet po dálnici a dostat se do cíle (spodní části stránky) rychleji. Nebo to můžete vzít vyhlídkovou cestou a prohlížet si další zajímavé věci podél cesty.

idea031

32. Seskupte související položky

Seskupení souvisejících položek dohromady je základní způsob, jak zvýšit použitelnost. Většina z nás má tendenci vědět, že vidličku a nůž mohou téměř vždy najít spolu. Stejně tak to bývá třeba s funkcemi otevřít a uložit. Takže související položky dávejte k sobě. Ztrácet čas hledáním věcí rozhodně není zábavné.

idea032

33. Všechno si ověřte

Ověřte si všechny chyby, které mohou nastat. Zjistit, že něco není v pořádku, je lepší spíše dříve než později. Je sice fajn, když se uživatelům aspoň zobrazí chybové hlášení, ale mnohem lepší je, když se jim nezobrazuje vůbec. Po takové chybě si totiž uživatel obvykle musí vzpomenout, co dělal před chvílí, než k chybě došlo, a musí své kroky případně i zopakovat.

idea033

34. Nebuďte tak striktní

Nepřesnosti v tom, co uživatele zadají, dělají počítače zase o trochu více lidské. Netrvejte striktně na určitém formátu dat, povolte lidem napsat to, co chtějí. Dokonalým příkladem je formulář, ve kterém požadujeme telefonní číslo. Zrovna to může být zapsáno pomocí několika způsobů. Tak si přidělejte trochu práce s kódováním, ale rozhodně lidem povolte zapisovat ho tak, jak oni chtějí.

idea034

35. Zkuste naléhavost

Naléhavost je velmi dobrá přesvědčovací taktika. Udělej to teď nebo nikdy. To je jasné poselství. Lidem to dává pocit, že věc je ojedinělá a už nikdy nebudou mít možnost si ji objednat. A lidé neradi přicházejí o příležitosti. Ano, najde se pár lidí, kteří tuto strategii budou vidět jako špinavý způsob, jak lidi přimět, aby jednali. Ale ono to funguje. Buďte však opatrní a nevytvářejte falešný pocit naléhavosti, protože to by se vám mohlo vymstít.

idea035

36. Nedostatek místo hojnosti

Když je čehokoliv méně, máme tendenci si toho více vážit. Nedostatek označuje, že něčeho kdysi bývalo více, ale teď je tam toho méně a zítra se to může dokonce ještě zmenšit. Popřemýšlejte o velkém supermarketu a malém obchůdku a všimněte si obchodní strategie. Někteří obchodníci navíc občas nabízí produkty pouze po omezenou dobu, dokud se vyplatí. A jejich nabídku už nedoplňují. V softwaru však na nedostatek často zapomínáme, protože bity a bajty jsou tak snadno duplikovatelné – můžeme je kopírovat a vkládat. Ale ve světě uživatelského rozhraní na něj myslete. Znáte to: Méně je někdy více.

idea036

37. Rozpoznávání místo vzpomínání

Jedná se o klasický příklad toho, že design je silně vázán na psychologii. Je snazší rozpoznat něco existujícího než vyvolat to z vlastní paměti. Rozpoznávání vlastně podnítí naši paměť k tomu, aby si vybavila vlastní zkušenosti. Prostě nás pobízí k tomu, abychom se vydali do hlubin naší paměti. A s takovým popostrčením to jde mnohem lépe. To je ten důvod, proč je jednodušší něco vybrat. Dejte uživatelům možnost rozpoznávat předměty, které před sebou vidí. Nečekejte, že si na všechno vzpomenou sami.

idea037

Inspirovaly vás tyto tipy? Tak to se zaregistrujte na webu goodui.org! Tam se totiž dvakrát do měsíce objevují stále nové a nové tipy. Nebo sledujte autora na Jakuba Linowskeho Twitteru @jlinowski.

Komentáře

Nahoru