background design element dropbackground design element dropbackground design element drop

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


Pokud se zajímáte o tvorbu webu nebo vývoj vlastní aplikace pak jste již pravděpodobně narazili na pojmy UX/UI design. Pojmy, které se prolínají nejen digitálním, ale i zbylým produktovým světem. Pojďme se společně podívat na to, co termíny UX/UI design znamenají, jaký je mezi nimi rozdíl a na tipy, jak přistupovat k jejich návrhu.

co je ux design

Podobně, jako je uživatelská zkušenost (UX) nedílnou součástí veškeré lidské činnosti, je UX design neodmyslitelně spjat s tvorbou webů, aplikací ale i třeba nábytku nebo spotřební elektroniky. Středem zájmu je zde funkčnost a přívětivé ovládání uživatelského rozhraní vedoucí ke spokojenému zákazníkovi či zanechání pozitivního dojmu. Design je tak tvořený přímo na míru záměru.

Co je UX design

UX design se dá shrnout jako soubor metod a zásad pro návrh takřka čehokoli – od židle, přes software až po auta, se zaměřením na kvalitní uživatelský zážitek. UX designer (User eXperience designer) k tomuto účelu 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. Předmětem zájmu UX je tedy uživatelská zkušenost a sama osoba uživatele, jeho potřeby či cíle.

UX design úzce souvisí s marketingem, jelikož bere v ohledu také další 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 hodnoty 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.

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 využívá poznatků zdánlivě nesouvisejících oborů, mezi které patří ku příkladu psychologie. UX designer by tak 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. Naopak špatně navržený UX design může vést 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.

Jaký by měl dobrý UX design být?

  • Zaměřený na uživatele. Ve středu všeho by měla být osoba, jež bude aplikaci nebo web používat. Hlavním záměrem pak vytvoření intuitivního a příjemného prostředí.
  • Podložený skutečnými uživateli. Ačkoli v mnoha případech může pomoci prostý selský rozum designera, tak by měl prvotní wireframe vycházet z důkladné analýzy publika. Tím je myšlen skutečný průzkum požadavků a charakteristika uživatelů před začátkem celého procesu i během něho.
  • Optimalizovaný, aktualizovaný a trendový. 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.
  • Jednotný. Design by měl vždy ladit s obalem, již zmíněnými 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 typicky není součástí samotného vývoje (tvorby) webu či aplikace. Jeho práce 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ý z nás se někdy setkal se situací, kdy v rámci používání eshopu, webu nebo aplikace 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. 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.

Jak na UX design

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

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 v naší bezplatné konzultaci.
 







TVORBA WEBŮ, ESHOPŮ A MOBILNÍCH APLIKACÍ

Od designu až po finální vytvoření webu, eshopu nebo aplikace