Zam\u00fd\u0161\u013eal si sa u\u017e niekedy nad t\u00fdm, \u010do je to vlastne, tak \u010dasto sklo\u0148ovan\u00e9, UI a\u00a0UX? Niekedy je \u0165a\u017ek\u00e9 urobi\u0165 poriadok v\u00a0s\u00fa\u010dasnej slovnej z\u00e1sobe. Povedzme si \u00faprimne, nielen v nej. Doba pokro\u010dila a technika sa stala na\u0161ou ka\u017edodennou s\u00fa\u010das\u0165ou. Teraz sa mus\u00edme z\u00e1vratn\u00fdm tempom adaptova\u0165 na nov\u00e9 podmienky, s\u00a0ktor\u00fdmi prich\u00e1dzaj\u00fa aj v\u00fdrazy ako UI a\u00a0UX. Mo\u017eno si o\u00a0nich u\u017e po\u010dul a mo\u017eno si aj trochu zm\u00e4ten\u00fd z\u00a0ich pou\u017e\u00edvania na soci\u00e1lnych sie\u0165ach \u010di v\u00a0pracovn\u00fdch ponuk\u00e1ch. Nech je to u\u017e akoko\u013evek, vedz, \u017ee tieto pojmy tvoria ka\u017edodenn\u00fa s\u00fa\u010das\u0165 aj tvojho \u017eivota. Chcel by si by\u0165 kone\u010dne nad vecou, ke\u010f na teba tieto divn\u00e9 skratky za\u00fato\u010dia najbli\u017e\u0161ie? Mo\u017eno ti pom\u00f4\u017eu nasleduj\u00face tri body, v\u00a0ktor\u00fdch sa pok\u00fasime \u010do najjednoduch\u0161ie objasni\u0165, s\u00a0\u010d\u00edm m\u00e1\u0161 vlastne do\u010dinenia.<\/p>\n

Neple\u0165 si pojmy (UX) s dojmami (UI)<\/h2>\n

Asi si u\u017e pochopil, \u017ee re\u010d bude o\u00a0dizajn\u00e9roch digit\u00e1lnych produktov ako s\u00fa webov\u00e9 str\u00e1nky, aplik\u00e1cie a\u00a0podobne. Sk\u00fas si v\u0161ak predstavi\u0165 seba ako pou\u017e\u00edvate\u013ea ist\u00e9ho produktu, ktor\u00fdm bude v\u00a0tejto chv\u00edli tvoj nov\u00fd bicykel. Ako ka\u017ed\u00fd bicykel, aj ten tvoj m\u00e1 pekn\u00e9 riadidl\u00e1, v\u00fdkonn\u00e9 ped\u00e1le a\u00a0pohodln\u00e9 sedadlo. V\u0161etky tieto \u201epojmy\u201c predstavuj\u00fa UI (User Interface- tzv. pou\u017e\u00edvate\u013esk\u00e9 rozhranie). No a\u017e vo chv\u00edli, ke\u010f si v\u0161etky tieto l\u00e1kav\u00e9 \u201epojmy\u201c vysk\u00fa\u0161a\u0161 na vlastnej ko\u017ei (sadne\u0161 na bicykel a\u00a0u\u017eije\u0161 si svoju jazdu) za\u017e\u00edva\u0161 UX (User Experience- tzv. u\u017e\u00edvate\u013esk\u00fd z\u00e1\u017eitok). Ide teda o\u00a0dva odli\u0161n\u00e9 pojmy, ktor\u00e9 m\u00f4\u017eeme definova\u0165 takto:<\/p>\n

UID (User Interface Design)<\/strong> = N\u00e1vrh pou\u017e\u00edvate\u013esk\u00e9ho rozhrania je proces vytv\u00e1rania rozhran\u00ed v softv\u00e9roch alebo po\u010d\u00edta\u010dov\u00fdch zariadeniach so zameran\u00edm na vzh\u013ead alebo \u0161t\u00fdl. Dizajn\u00e9ri sa sna\u017eia vytvori\u0165 n\u00e1vrhy, ktor\u00e9 bud\u00fa pre pou\u017e\u00edvate\u013eov \u013eahko pou\u017eite\u013en\u00e9 a\u00a0na poh\u013ead pr\u00edjemn\u00e9.<\/p>\n

UXD (User Experience Design)<\/strong> = N\u00e1vrh u\u017e\u00edvate\u013esk\u00e9ho z\u00e1\u017eitku je proces zvy\u0161ovania spokojnosti z\u00e1kazn\u00edkov a lojality prostredn\u00edctvom zlep\u0161enia pou\u017eite\u013enosti, jednoduchosti pou\u017eitia a pote\u0161enia poskytovanej v interakcii medzi z\u00e1kazn\u00edkom a\u00a0produktom.<\/p>\n

<\/p>\n

<\/p>\n

\u010co je to ten u\u017e\u00edvate\u013esk\u00fd z\u00e1\u017eitok?<\/h2>\n

Aj ten najmodernej\u0161\u00ed a\u00a0najlep\u0161ie vyzeraj\u00faci produkt je nani\u010d, ak ti sp\u00f4sobuje probl\u00e9my, namiesto toho, aby ti u\u013eah\u010dil \u017eivot. Preto pova\u017eujeme UX za neoddelite\u013en\u00fa s\u00fa\u010das\u0165 navrhovania nov\u00fdch digit\u00e1lnych produktov \u010di strat\u00e9gi\u00ed. Ide\u00e1lnym pr\u00edkladom na vysvetlenie tohto probl\u00e9mu je nasleduj\u00faci obr\u00e1zok, ktor\u00fd dokazuje, \u017ee aj ten najlep\u0161\u00ed dizajn je ni\u010d\u00edm, ak nezoh\u013ead\u0148uje u\u017e\u00edvate\u013esk\u00fd z\u00e1\u017eitok.<\/p>\n

<\/p>\n

K\u00a0dokonal\u00fdm z\u00e1\u017eitkom vedie dlh\u00e1 cesta<\/h2>\n

A ako to cel\u00e9 vlastne funguje v\u00a0praxi? Teraz, ke\u010f u\u017e vieme, \u017ee ka\u017ed\u00fd \u00faspe\u0161n\u00fd digit\u00e1lny produkt je vytvoren\u00fd poctivou pr\u00e1cou UI a\u00a0UX dizajn\u00e9rov, m\u00f4\u017eeme cel\u00fd proces prirovna\u0165 k\u00a0jedn\u00e9mu ve\u013ek\u00e9mu \u013eadovcu zlo\u017een\u00e9mu z\u00a0piatich \u010dast\u00ed.<\/p>\n

<\/p>\n

1. D\u00f4le\u017eit\u00e1 je strat\u00e9gia<\/strong>
\nStrategick\u00e9 uva\u017eovanie nad projektom je na\u0161ou prioritou e\u0161te predt\u00fdm, ako sa pust\u00edme do ak\u00e9hoko\u013evek projektu. V\u00a0tomto bode je potrebn\u00e9 ujasni\u0165 si v\u0161etky vklady (financie, \u010das, energia, at\u010f.), ktor\u00e9 potrebujeme na vytvorenie kone\u010dn\u00e9ho produktu. T\u00e1to f\u00e1za si vy\u017eaduje prieskum cie\u013eov\u00fdch pou\u017e\u00edvate\u013eov, ich potrieb a\u00a0motiv\u00e1cii.<\/p>\n

2. \u010co vlastne potrebujeme?<\/strong>
\nV\u00a0tejto chv\u00edli je d\u00f4le\u017eit\u00e9 vedie\u0165, ak\u00fa cie\u013eov\u00fa skupinu chceme zasiahnu\u0165 a\u00a0ako sa k\u00a0nej v\u00f4bec dosta\u0165. Preto mus\u00edme definova\u0165 potrebn\u00e9 zdroje, ktor\u00e9 n\u00e1m pom\u00f4\u017eu dan\u00fa skupinu oslovi\u0165. V\u00a0s\u00fa\u010dasnosti n\u00e1m v\u00a0tom najviac pom\u00e1haj\u00fa soci\u00e1lne siete, v\u010faka ktor\u00fdm sme schopn\u00ed oslovi\u0165 tis\u00edce a\u017e mili\u00f3ny \u013eud\u00ed konkr\u00e9tneho veku, pohlavia, z\u00e1ujmov a\u00a0pod.<\/p>\n

3. \u0160trukt\u00fara je z\u00e1klad<\/strong>
\nPri vytv\u00e1ran\u00ed \u0161trukt\u00fary projektu sa prioritne zameriavame na zadefinovanie pou\u017e\u00edvate\u013esk\u00e9ho rozhrania a\u00a0toho, \u010do pou\u017e\u00edvate\u013e uvid\u00ed.<\/p>\n

4. Za\u010d\u00edname s\u00a0n\u00e1vrhmi<\/strong>
\nV\u00a0tomto bode sa na\u0161i UX dizajn\u00e9ri sna\u017eia navrhn\u00fa\u0165 tzv. layout, ktor\u00fd zobrazuje presn\u00e9 rozmiestnenie dan\u00fdch prvkov \u010di u\u017e na webe alebo v\u00a0aplik\u00e1cii.<\/p>\n

5. Fin\u00e1lne vizu\u00e1ly<\/strong>
\nTu sa do hry dost\u00e1va UI dizajn\u00e9r, ktor\u00fd d\u00e1 dokopy v\u0161etky podklady od UX dizajn\u00e9ra tak, aby vizu\u00e1l \u010do najviac kore\u0161pondoval s\u00a0potrebami pou\u017e\u00edvate\u013eov a\u00a0priniesol tak dokonal\u00fd pou\u017e\u00edvate\u013esk\u00fd z\u00e1\u017eitok.<\/p>\n

 <\/p>\n

<\/p>\n

A\u00a0\u010do na to \u013eudia z\u00a0praxe?<\/h2>\n

Ve\u013emi zauj\u00edmav\u00fd a in\u0161piruj\u00faci n\u00e1zor na dan\u00fa problematiku m\u00e1 zn\u00e1my UX dizajn\u00e9r Clayton Yan, ktor\u00fd cel\u00fd probl\u00e9m vysvet\u013euje na pr\u00edklade projektu stavby domu:<\/p>\n

\u201e\u010casto sa vytv\u00e1ra zm\u00e4tok okolo toho, \u010do je UI a\u00a0UX a\u00a0ak\u00e9 s\u00fa ich hlavn\u00e9 rozdiely, ak v\u00f4bec nejak\u00e9 s\u00fa. Ur\u010dite s\u00fa to dva rozdielne pojmy, ale nato, aby vytvorili kr\u00e1sny a\u00a0intuit\u00edvny z\u00e1\u017eitok musia \u00eds\u0165 ruka v\u00a0ruke. Naj\u010dastej\u0161\u00ed pr\u00edklad, na ktorom vysvet\u013eujem dan\u00fa problematiku je stavba domu. Ke\u010f staviate dom, mus\u00edte prem\u00fd\u0161\u013ea\u0165 o\u00a0\u0161irokej \u0161k\u00e1le vec\u00ed, medzi ktor\u00e9 patr\u00ed aj \u0161trukt\u00fara a\u00a0rozlo\u017eenie. Potrebujete dve alebo tri sp\u00e1lne? M\u00e1 ma\u0165 ka\u017ed\u00e1 sp\u00e1l\u0148a vlastn\u00fa k\u00fape\u013e\u0148u? M\u00e1 by\u0165 ob\u00fdva\u010dka prvou miestnos\u0165ou, do ktorej vst\u00fapite pri vstupe do domu? M\u00e1 by\u0165 dom jednopodla\u017en\u00fd alebo dvojpodla\u017en\u00fd? Pre m\u0148a predstavuje UX celkov\u00fd z\u00e1\u017eitok z\u00a0v\u00e1\u0161ho domu (produktu). D\u00e1vaj\u00fa veci zmysel? Ako sa c\u00edti u\u017e\u00edvate\u013e? \u010eal\u0161ou u\u017e\u00edvate\u013eskou \u00farov\u0148ou je rozhranie, s\u00a0ktor\u00fdm sa \u013eudia dost\u00e1vaj\u00fa do kontaktu. UI sa potom st\u00e1va vizu\u00e1lnou t\u00e9mou. Mus\u00edte sa rozhodn\u00fa\u0165: Ak\u00e9 tapety budete pou\u017e\u00edva\u0165? Budete ma\u0165 rovnak\u00e9 kvetin\u00e1\u010de okolo cel\u00e9ho domu? Alebo in\u00e9? U\u017e\u00edvate\u013esk\u00e9 rozhranie s\u00fa teda veci, ktor\u00e9 u\u017e\u00edvate\u013e skuto\u010dne vid\u00ed a\u00a0komunikuje s\u00a0nimi. Patria sem tla\u010didl\u00e1, formul\u00e1re, obr\u00e1zky at\u010f. UX bez u\u017e\u00edvate\u013esk\u00e9ho rozhrania znamen\u00e1, \u017ee v\u00e1\u0161 dom m\u00e1 s\u00edce z\u00e1klady, steny a\u00a0kostru, ale nie je kr\u00e1sny a\u00a0s\u00fadr\u017en\u00fd. Na druhej strane UI bez UX je ako pou\u017e\u00edvanie \u00fa\u017easn\u00fdch farieb a\u00a0dola\u010fovanie vizu\u00e1lnych detailov, pri\u010dom va\u0161e vchodov\u00e9 dvere ved\u00fa priamo do k\u00fape\u013ene. Potrebujete obe na to, aby ste vytvorili dokonal\u00e9 dielo. UX sa zvy\u010dajne v\u00a0projekte vykon\u00e1va e\u0161te pred UI dizajnom, nako\u013eko je potrebn\u00fd v\u00fdskum, zadefinovanie v\u0161eobecn\u00fdch n\u00e1\u010drtov a\u00a0pracovn\u00fdch postupov. Akon\u00e1hle je t\u00e1to f\u00e1za ukon\u010den\u00e1, nastupuje UI dizajn. V\u010faka ktor\u00e9mu je kone\u010dn\u00fd produkt kr\u00e1sny a\u00a0z\u00e1rove\u0148 plne funk\u010dn\u00fd.\u201c<\/em><\/p>\n

Teraz, ke\u010f u\u017e vie\u0161, ako to cel\u00e9 funguje, m\u00f4\u017ee\u0161 tieto vedomosti vyu\u017ei\u0165 na zlep\u0161enie profesion\u00e1lneho dojmu, frajerovanie pred kamo\u0161mi alebo ako podklad pre \u010fal\u0161ie \u0161t\u00fadium. A\u00a0ak ti nesta\u010dilo, pokojne sa na n\u00e1s obr\u00e1\u0165<\/a>. Radi sa s tebou o\u00a0svoje sk\u00fasenosti podel\u00edme.<\/p>\n

…<\/p>\n

Najbli\u017e\u0161ie ti predstav\u00edme s\u00e9riu fotobaniek, z ktor\u00fdch m\u00f4\u017ee\u0161 kradn\u00fa\u0165 \u00faplne leg\u00e1lne a zadarmo! Ak si zvedav\u00fd na \u010fal\u0161\u00ed \u010dl\u00e1nok – daj n\u00e1m like na facebooku<\/a><\/span> a dozvie\u0161 sa o v\u0161etk\u00fdch novink\u00e1ch!<\/span><\/p>\n

---

\n

Naum \u0161t\u00fadio sa zaober\u00e1 vizu\u00e1lnou komunik\u00e1ciou a dizajnom zna\u010diek, ident\u00edt, in\u0161tit\u00faci\u00ed, publik\u00e1ci\u00ed, ale aj UI\/UX dizajnom online projektov a mobiln\u00fdch aplik\u00e1ci\u00ed. Prostredn\u00edctvom anal\u00fdz, strat\u00e9gii a designu, vytv\u00e1rame siln\u00e9 zna\u010dky smeruj\u00face k vy\u0161\u0161ej trhovej hodnote. Zaklad\u00e1me si na osobnom pr\u00edstupe s na\u0161imi z\u00e1kazn\u00edkmi a nad\u010dasov\u00fdm, osobit\u00fdm dizajnom. H\u013ead\u00e1me zmysel v ka\u017edom jednom projekte a sna\u017e\u00edme sa odzrkadli\u0165 jeho hodnotu bez pou\u017eitia slov. www.naum.studio<\/a><\/span><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Zam\u00fd\u0161\u013eal si sa u\u017e niekedy nad t\u00fdm, \u010do je to vlastne, tak \u010dasto sklo\u0148ovan\u00e9, UI a\u00a0UX? Niekedy je \u0165a\u017ek\u00e9 urobi\u0165 poriadok v\u00a0s\u00fa\u010dasnej slovnej z\u00e1sobe. Povedzme si \u00faprimne, nielen v nej. Doba pokro\u010dila a technika sa stala na\u0161ou ka\u017edodennou s\u00fa\u010das\u0165ou. Teraz sa mus\u00edme z\u00e1vratn\u00fdm tempom adaptova\u0165 na nov\u00e9 podmienky, s\u00a0ktor\u00fdmi prich\u00e1dzaj\u00fa aj v\u00fdrazy ako UI a\u00a0UX. […]<\/p>\n","protected":false},"author":5,"featured_media":275,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-263","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized-sk"],"acf":[],"_links":{"self":[{"href":"https:\/\/naum.studio\/wp-json\/wp\/v2\/posts\/263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naum.studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/naum.studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/naum.studio\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/naum.studio\/wp-json\/wp\/v2\/comments?post=263"}],"version-history":[{"count":8,"href":"https:\/\/naum.studio\/wp-json\/wp\/v2\/posts\/263\/revisions"}],"predecessor-version":[{"id":292,"href":"https:\/\/naum.studio\/wp-json\/wp\/v2\/posts\/263\/revisions\/292"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/naum.studio\/wp-json\/wp\/v2\/media\/275"}],"wp:attachment":[{"href":"https:\/\/naum.studio\/wp-json\/wp\/v2\/media?parent=263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/naum.studio\/wp-json\/wp\/v2\/categories?post=263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/naum.studio\/wp-json\/wp\/v2\/tags?post=263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}