UX a UI design: jak na uživatelské rozhraní webů a aplikací?

Barbora Koďousková

Aktualizováno: · 11 min. čtení

Tvorba uspěšného webu nebo vývoj mobilní či webové aplikace jsou časově i finančně náročné procesy, které není radno podceňovat. Jestliže chcete, aby byl váš digitální produkt úspěšný, tak do něj musíte investovat, a to nejen peníze, ale i čas. Základem všeho je přitom dobrý UX design a líbivé uživatelské rozhraní. Prozradíme vám, co si pod pojmy UX a UI design představit i čeho se držet při realizaci vlastního projektu.

Co je UX design

User experience (zkráceně UX) design je soubor metod a zásad určených k návrhu produktů zaměřených na kvalitní uživatelský zážitek. Nesouvisí tedy pouze s tvorbou webu nebo vývojem mobilních a webových aplikací, ale i třeba výrobou nábytku nebo aut a spotřební elektroniky.

Středem zájmu je zde funkčnost a intuitivní ovládání uživatelského rozhraní vedoucí ke spokojenému zákazníkovi a pozitivnímu dojmu z používání dané věci.

Kdo je UX designer a jak pracuje

UX designer (User eXperience designer) při návrhu využívá analýzu požadavků, jež následně vyhodnocuje a přináší vyhotovené varianty řešení různých interakcí uživatele s produktem. Každý design je tak vytvořen nejen na míru digitálnímu produktu, ale i jeho cílové skupině.

UX design úzce souvisí s marketingem, jelikož bere v potaz všechny aspekty produktu, například způsoby jeho propagace, vzhled obalu, letáku, jak je distribuován a další. Vhodným příkladem je zde společnost Apple, kde Steve Jobs již od počátku prosazoval názor, že: „Design není pouze to, jak věci vypadají. Design je to, jak věci fungují.“

Právě z této myšlenky vychází elegantní zpracování iPhonů nebo MacBooků, včetně krabice a příslušenství. Apple ovšem neapeluje pouze na design výrobků. Stejně důrazně stanovuje podmínky podoby interiéru kamenných obchodů či oficiálního webu. Všechno dohromady pak vytváří jedinečný zážitek z používání "jablečných" produktů a pomáhá vytvářet dobrou pověst značky.

UX design Apple
Zdroj: https://www.apple.com/cz/newsroom/2019/09/apple-fifth-avenue-the-cube-is-back/

Design uživatelského zážitku tak často nevyužívá pouze znalost daného oboru (například webových komponent), ale i zdánlivě nesouvisejících odvětví, mezi které patří ku příkladu psychologie. UX designer by zkrátka měl mít neustále přehled o aktuálních trendech a chuť se učit něčemu novému. Měl by být schopen empatického vcítění do role potenciálních zákazníků a navrhnout užitečný, snadno použitelný a smysluplný produkt.

Špatně navržený UX design vede ke špatnému pochopení principu webové stránky nebo jejích částí. To může vést až k opuštění webu či ztrátě původního zájmu návštěvníka. Proto je UX zásadní součástí tvorby webových stránek nebo vývoje mobilních aplikací.

Zásady UX designu

Alfou a omegou dobrého UX designu je schopnost designéra vcítit se do potřeb a myšlení uživatelů daného digitálního produktu. Kde ale začít a jak připravit návrh designu tak, aby vaše webové stránky nebo mobilní aplikace zaujala ty správné uživatele?

  • Ujasněte si, pro koho web či aplikaci tvoříte a přizpůsobte jim svůj obsah. UX design cílí na pozitivní uživatelský zážitek. Každá skupina uživatelů však pozitiva vidí trochu jinde. Proto je důležité hned na začátku zjistit, pro koho vlastně webové stránky nebo aplikaci tvoříte. Pouze tak se dokážete vcítit do myšlení svých návštěvníků a přizpůsobíte jim vzhled nebo funkcionalitu produktu.
  • Každé důležité rozhodnutí opírejte o data od reálných uživatelů. Ačkoli se UX designeři často řídí prostým selským rozumem a zkušenostmi, nikdy nepodceňují výchozí analýzu cílové skupiny a vytváření person. Průběžný stav projektu pak není na škodu podstoupit testování. Získáte tak zpětnou vazbu na reálnou podobu produktu (což využijete například při stavění MVP) a prostor pro další prioritizaci funkcionality.
  • Optimalizujte, aktualizujte a držte se trendů. UX design webu (aplikace) by se měl neustále přizpůsobovat aktuálním požadavkům uživatele, stejně jako novým technologiím a trendům. Nasazením na produkci tedy celý proces rozhodně nekončí. Spíše naopak, drobné úpravy je možné realizovat po celou dobu provozu.
  • Držte se jednotného stylu. Webdesign by měl vždy ladit s propagačními materiály nebo logem. Je proto nutné volit vhodné barvy, font a jejich kombinace tak, aby se utvářela pozitivní firemní identita.

UX designer a příprava UX designu typicky není součástí samotného kódování (tvorby) webu či aplikace. Spíše celému procesu předchází a může být zásadním klíčem k úspěchu i neúspěchu projektu. Úloha návrháře je skutečně důležitá a neměla by se podceňovat v rámci jakékoli tvorby.

Jak poznáte dobrý UX design?

Nabízí se otázka, jak se pozná dobrý UX design. V podstatě nepozná. A to je přesně jeho smyslem. Pravděpodobně každý se někdy při procházení webových stránek dostal do situace, kdy narazil na nějaký zádrhel v podobě nepřehledného uživatelského rozhraní, nevhodně umístěných tlačítek, otravných vyskakovacích reklam či zbytečně zdlouhavého vyplňování formuláře.

V době, kdy na většinu poskytovaných služeb připadají stovky (ne-li tisíce) konkurenčních nástrojů může taková, na první pohled, drobnost způsobit, že zákazník odejde, nedokončí svůj nákup, nevyužije vámi nabízených služeb a přejde ke konkurenci. Takovou osobu pak už jen těžko přimějete k návratu.

Přihlašte se do našeho newsletteru!
Souhlasím s GDPR

co je ux design

Dobrý UX design všechny tyto případné nedostatky eliminuje a nenutí uživatele hledat informace pro které si přišli ani jim nestěžuje interakci s obsahem (například nalezení tlačítka). V praxi tak v podstatě zaznamenáte pouze špatně provedený návrh.

Výhody dobrého UX designu

Důvodem, proč chtít kvalitní UX design (připlatit si za odborníka) je samotný cíl podnikání – přivést zákazníky, udržet si je a prodat své služby / zboží. Slouží tedy jako nástroj úspěšného projektu a současně hodnotně uspokojuje klienty. Podporuje také pozitivní vnímání značky a s tím i její rozšíření mezi širší publikum.

Průběh přípravy UX designu webových stránek nebo aplikací

Proces návrhu uživatelsky přívětivého designu je možné shrnout do několika následujících kroků:

  • analýza publika a konkurence,
  • vytvoření modelových uživatelů (person),
  • tvorba informační architektury (struktury) webu,
  • vytvoření wireframu a prototypu,
  • návrh vizuálního designu uživatelského rozhraní,
  • uživatelské testování.

Prvním krokem je analýza publika a konkurence. Před započetím každého projektu je vždy dobré zjistit, proti komu bude na trhu produkt vlastně stát. Prvotní průzkum může posloužit jako inspirace i odstrašující příklad toho, jak se to nemá dělat. Výsledkem analýzy by mělo být zjištění, co uživatelé od aplikace nebo webu očekávají, jak se při jejich používání chovají a k čemu budou nástroj využívat.

Z poznatků UX designer vytváří takzvané persony čili modelové zákazníky. Jedná se o zástupce jednotlivých skupin zákazníků, na které daný produkt cílí, představují tak typické uživatele. Person by mělo být několik, přičemž by u nich měl být specifikovaný věk, jméno, pohlaví, pracovní pozice, místo pobytu, schopnosti a dovednosti, potřeby a fotka.

Dalším krokem je vytvoření informační architektury neboli základní kostry webu. UX design tímto způsobem demonstruje návaznost jednotlivých částí a hierarchii obsahu.

UX design

Přihlašte se do našeho newsletteru!
Souhlasím s GDPR

Jedná se vlastně o myšlenkovou mapu nebo stromovou architekturu webu. Návaznost by se měla řídit zejména pravidlem intuitivního a snadno použitelného uživatelského rozhraní. Jakmile je tato část dokončena, přichází na řadu wireframe a prototyp. Zde UX designer definuje technickou specifikaci, rozmístění prvků a interakční procesy – kvalita provádění jednotlivých příkazů či návaznosti procesů.

Wireframe a prototyp (funkční model nástroje) pak představují střed práce UX designera. Věnuje mu tedy nejvíce času a snaží se podchytit všechny nedostatky tak, aby výsledek byl co možná nejvíce uživatelsky přívětivý. K tomuto účelu využívá mimo jiné i průběžné uživatelské testovnání.

Návrh rozmístění a CTA následně doplní o vhodnou kombinaci barev, fontu a symbolů. Tím jeho práce prozatím končí a předává „žezlo“ UI designerovi, případně programátorovi. Jakmile je vytvořena první fyzická verze, dochází k dalšímu kolu uživatelského testování, kdy se zjišťuje například zaujetí vzhledu webu a řeší případné nedostatky funkcionality, respektive míry interaktivnosti.

UX vs. UI design webu a aplikací

Pojem UX design bývá často zaměňován s termínem UI design, který je stejně jako první zmíněný nedílnou součástí vývoje aplikací a webu. Zjednodušeně řešeno se dá říct, že UI (User Interface) design představuje obal produktu, který je klíčovým pro oslovení zákazníka. Oba případy tak řeší design uživatelského prostředí.

Rozdíl mezi UX a UI designem ovšem spočívá zejména v základním cíli. Zatímco UX design se snaží, aby bylo prostředí snadno pochopitelné a dobře ovladatelné, se UI zaměřuje zejména na to, jak web nebo aplikace vypadá. UX jsou v podstatě střeva nebo příslovečná potopená část ledovce a UI kostra – viditelná část ledovce.

ux vs ui design

Souboj UX versus UI design nemá vítěze. Obojí je stejně důležité, stejně jako práce vývojářů. Jelikož i když bude web vypadat elegantně a bude se s ním skvěle pracovat, tak zákazníky odradí, když na něj nebude spoleh, když nebude mít dostatek funkcí nebo se bude pomalu načítat.

UX design se pak na celou problematiku dívá z poněkud širšího úhlu, protože nesouvisí pouze s webem nebo aplikací. Kód i UI design z něj proto vycházejí. UI design řeší zejména vzhled, návrh ovládacích prvků (tlačítek). Může být tedy pokládán za nástroj realizace UX designu.

Pokud potřebujete s UX nebo UI designem poradit, případně zrealizovat celý projekt, včetně vývoje, neváhejte se na nás obrátit prostřednictvím naší bezplatné konzultace.

Tvorba digitálních produktů
Tvorba eshopu
Tvorba webu
UX/UI design
Vývoj mobilních aplikací
Vývoj webových aplikací
Cookies v kostce: co to je a jak navrhnout cookie lištu
Cookies v kostce: co to je a jak navrhnout cookie lištu

Tvorba vlastních webových stránek je dnes takřka neodmyslitelně spjata s použitím cookies. Prozradíme vám, jak s cookie soubory pracovat i jak připravit lištu.

Typy webových aplikací, kterou zvolit pro vlastní vývoj?
Typy webových aplikací, kterou zvolit pro vlastní vývoj?

Pomůžeme vám se zorientovat ve světě webových aplikací. Prozradíme, s jakými typy aplikací se můžete setkat a poradíme, kterou vybrat.

Typy mobilních aplikací, který vybrat pro vlastní vývoj?
Typy mobilních aplikací, který vybrat pro vlastní vývoj?

Zajímáte se o vývoj vlastní mobilní aplikace? Prozradíme vám, mezi jakými typy můžete vybírat i kterou aplikaci vybrat.

POTŘEBUJETE PORADIT?
KONTAKTUJTE NÁS