Späť na blog
Ostatné

Aký je vlastne rozdiel medzi UI a UX pri dizajne digitálnych produktov?

Ľudovít Nastišin
07.07.2021
6 minút čítania
Aký je vlastne rozdiel medzi UI a UX pri dizajne digitálnych produktov?
Pokiaľ ide o dizajnovú stránku digitálnych produktov, často sa stretávame s výrazmi „Požívateľská skúsenosť (UX)“ a „Používateľské rozhranie (UI)“. Aj keď sú oba pojmy dosť známe, tak nie je výnimkou, že ľudia v dizajne digitálnych produktov (aj mimo neho) používajú tieto pojmy ako synonymá, prípadne ich uvádzajú nesprávne. V tomto článku sa na to trošku pozrieme.

UI: Ako to vyzerá

Pri dizajnovaní používateľského rozhrania (User Interface) sa venujeme tomu, ako budú vyzerať napríklad jednotlivé screeny. Bavíme sa tu teda najmä o ich grafike, o kreatíve. Keď si to zjednodušíme, tak UI rieši to, čo vidíme našim okom. Sú to použité obrázky, farby, aplikované animácie prechodov či efektov a takto by sme mohli pokračovať.  

Dobre spracované UI by malo spĺňať niekoľko všeobecných zásad
  • Musí to byť jasné. Všetky prvky UI sú niečo ako vizuálne metafory. Musia byť pre nich okamžite zrozumiteľné. Ak musí používateľ uvažovať nad tým, čo daný element robí, niekde je chyba. 
  • Musí to byť známe. UI by malo umožniť používateľom využiť ich predchádzajúce skúsenosti z iných interakcií, ktoré s daným produktom mali a tak im budú aj tie ostatné funkcie minimálne povedomé. 
  • Musí to byť konzistentné. Keď je UI spracované konzistentne naprieč všetkými produktami či ich stránkami, tak si používateľ začne rýchlo všímať vzorce používania a osvojí si ich.
  • Musí to byť efektívne. Dobré UI umožňuje používateľom dosiahnuť pri minimálnom vstupe požadovaný výstup. Tu radíme napríklad aj skratky pre skúsených používateľov, vďaka ktorým bude ich interakcia produktívnejšia. Jednou takou je aj Ctrl+C/V.

UI je teda priestor, v ktorom sa dejú všetky interakcie medzi človekom a strojom. Vďaka nemu môžeš efektívne ovládať zariadenia na plnenie potrebných úloh. Vlastne aj teraz pri čítaní tohto článku vnímaš UI spracovanie nášho webu.

UX: Ako to funguje

Keď sa bavíme o používateľskej skúsenosti (User Experience), tak máme na mysli celú logiku toho, ako to funguje na pozadí. Povedzme, že robíme mobilnú aplikáciu. UX sa postará o to, aby sa v nej jej používateľ vedel intuitívne orientovať a práca s ňou mu nespôsobovala bolesti hlavy. Všetky kroky musia mať svoju logiku. Objaví sa najprv obrazovka s registráciou a až potom ťa apka pustí dnu, alebo si ju môžeš hneď vyskúšať a pokyn na registráciu sa objaví až potom? Obe varianty poskytnú inú používateľskú skúsenosť bez ohľadu na to, aký animačný prechod (UI) sa pri ťukaní zobrazuje alebo akým fontom sú prezentované texty.

 Pri práci na UX by si mal venovať veľa času testovaniu použiteľnosti daného riešenie, nezaškodí a ani používateľský prieskum. Až potom má zmysel začať priebežne implementovať jednotlivé aspekty UI, ktorými sú dizajn layoutu, vizuálne spracovanie či branding. Obe profesie riešia niečo iné, no musia fungovať v tandeme. Neexistuje žiadna jasne stanovená čiara, kedy končí práca na UX a ideme riešiť UI.

UX zahŕňa všetky aspekty interakcie koncového používateľa so spoločnosťou, jej službami a produktmi.

Už tie samotné skratky UX a UI implikujú, že sú tieto dve disciplíny prepojené aj keď je ich podstatou niečo iné. Niečo, čo vyzerá skvele, ale ťažko sa používa, je príkladom skvelého UI a zlého UX. Na druhej strane zasa niečo super použiteľné, čo vyzerá hrozne, je príkladom skvelého UX a zlého UI. “ 

Pekne to sumarizuje tento obrázok.

Prečo sú UX a UI často ponúkané ako jedna pozícia?

Už sme si povedali, že UX a UI sú dve samostatné oblasti, takže by ťa teraz mohlo zaujímať: prečo je toľko pracovných ponúk, ktoré hľadajú dizajnérov UX / UI v jednom? 

Pravdou je, že z širšieho uhla pohľadu sú UX a UI stále relatívne novými oblasťami a ako už bolo spomenuté, majú tendenciu byť špecifické pre technologický priemysel. Mimo sveta dizajnu a technológií im mnohí až tak nerozumejú, aj keď sú pre biznis veľmi dôležité. 

Nie je to však vždy len o nepochopení ľudí z inej brandže. Mnoho spoločností cielene hľadá všestranných dizajnérov, ktorí dokážu zastať UX aj UI, alebo ktorí majú okrem svojich hlavných skillov aspoň dostatočnú úroveň poznania UX alebo UI princípov. 

Či už teda  hľadáš pozíciu iba pre UI, výlučne pre UX alebo kombináciu oboch, je dôležité pozrieť sa na pracovnú pozíciu s nadhľadom a venovať osobitnú pozornosť uvedeným schopnostiam, úlohám a zodpovednostiam. Treba rýchlo zistiť, či je pracovná ponuka skutočne zameraná na jedno alebo druhé, alebo je cielene formulovaná na oba. V každom prípade si to ale vyžiada iný skillset. 

Stále si nevieš vybrať to správne pre seba? Skús to s týmto obrázkom:
Takže ešte raz na záver, UI - dizajn používateľského rozhrania nie je to isté ako UX - dizajn používateľskej skúsenosti.
Ľudovít Nastišin
Som digitálny kreatívec (problem solver), ktorého špecializácia je "kreatívny kitbash". Táto profesia neexistovala, dokým som si ju nevymyslel, pretože práve to ma vystihuje najviac. Ide o schopnsoť  kombinovať digitálne skilly (3D, 2D, animácia, VFX, generative AI, ilustrácie,...) s cieľom vytvoriť čo je treba a to bez ohľadu na zadanie. 

Klienti, s ktorými som pracoval:
  • Deutsche Telekom IT Solutions Slovakia,
  • Východoslovenská distribučná, a.s.,
  • Nefkus Creative House,
  • EMEFKA & Startitup Group,
  • Promiseo,
  • Letisko Košice,
  • Boataround,
  • DMS Records 
  • ...a ďalší


Mohlo by ťa zaujímať

Krátky pohľad na cenotvorbu pre kreatívcov
Ostatné
18.05.2021
Ľudovít Nastišin

Krátky pohľad na cenotvorbu pre kreatívcov

Naceňovanie svojej práce je veľmi háklivá téma? Otázky typu: Pýtam si dosť? Neprestrelil som to? Ak predávaš tovar alebo nejakú jasne špecifikovanú službu, väčšinou to až také náročné nie je. Všetko jednoducho má svoju cenovku. Kreatívci však do tejto kategórie spadajú len málokedy. Existuje viacero prístupov k tomu, ak stanoviť cenu svojich kreatívnych služieb. A keď sa k tejto (často nepríjemnej) súčasti podnikania nepostavíš zodpovedne, tak ťa to postupne vysaje. Nikto ti nedá jednoduchý checklist cien, tu treba čítať medzi riadkami a do rovnice započítať aj také veci, ktoré tých menej skúsených možno ani nenapadnú. Povedzme si teda zopár veci, ktoré pri naceňovaní kreatívnej práce treba brať do úvahy. [Image] Opatrne s naceňovaním podľa odpracovaných hodínZačínajúci kreatívci často nevedia správne odhadnúť čas, ktorý im daný projekt pravdepodobne zaberie. Také niečo chce čas a pár krát sa popáliť, keď klientovy povieš 10 hodín, no odsedíš na tom dvakrát toľko.  Hodinovka má zmysel vtedy, ako už zo začiatku spolupráce nie je jasný rozsah projektu. V takom prípade vieš, že dostaneš zaplatené za to, čo si pri projekte presedel. V ostatných prípadoch ale treba počítať s nevýhodami hodinovky:  • Ak to urobíš rýchlejšie, dostaneš zaplatené menej. Len sa nad tým zamysli, aké je to nelogické. V podstate si „trestaný“ za to, že si efektívny.  • Pri hodinovke si platený za čas. Tvoja expertíza a kreativita v podstate idú bokom.  • Často tu môže trpieť kvalita práce, pretože sa príliš sústredíš na čas a na to, aby si neprešvihol dohodnutý rozsah.  • A ak ti to zaberie viac hodín, si to práve ty kto musí dokazovať ich oprávnenosť.  Ukážme si to na príklade dizajnu loga. Ak prídeš so skvelým dizajnom za 15 minút, tak by podľa tejto logiky malo stáť menej? Určite nie. A naopak, ak na tom budeš pracovať dva týždne, malo by stáť viac? Rovnako nie.  Hodinovka ťa teda väčšinou potrestá za to, že pracuješ rýchlejšie, a namiesto odborných znalostí podporuje zmýšľanie klienta, že „čas sú peniaze“.  Pri jednom veľkom projekte sa svetoznámeho dizajnera log Paula Randa opýtali, kedy bude logo hotové. Jeho odpoveď bola jasná: Možno týždeň, možno rok. Až keď to bude ono, vtedy je to hotové.  A to si za svoju prácu účtuje aj 6 núl.  Stanovuje cenu podľa klienta, nie podľa zadania Pri hodnote kreatívnej práce naozaj záleží aj na veľkosti klienta, pre ktorého to robíš. Keď si Phil Knight, zakladateľ Nike, dal urobiť logo, zaplatil zaňho len pár desiatok dolárov. Ak by si to isté logo dali robiť dnes, stálo by to milióny. A prečo? Lebo v stávke je toho omnoho viac.  Samotný proces tvorby loga by nebol náročnejší. Ale spoločnosť Nike v začiatkoch a dnes nie sú rovnaký klient. Ak by dizajnér urobil chybu pri začínajúcom podniku, ktorý ešte veľa ľudí nepozná, tak sa to jednoducho opraví a hotovo. Ak to ale Nike vytlačí na milióny tričiek, topánok, krabíc, tak nesie dizajnér veľkú zodpovednosť za to, že je práca urobená dobre.  Vo výslednej cene teda treba zohľadniť aj to, pre koho danú kreatívu robíš.  Tento prístup podrobnejšie opisuje aj dizajnér Chris Do vo svojej porednáške, ktorú ti určite odporúčam vidieť. 
Volám sa Umelá Inteligencia a dokážem už toto...
Ostatné
30.04.2021
Skillmea

Volám sa Umelá Inteligencia a dokážem už toto...

Mám silné tušenie, že málokto z nás v posledných mesiacoch unikol nejakej tej novinke zo sveta umelej inteligencie. Aktuálny celosvetový pandemický vývoj je akcelerátorom už aj tak slušne rozbehnutého technologického pokroku. Noha na plyne, svetlo sveta uzerá jeden nový objav za druhým. S každým ďalším pokrokom smerom k super-inteligentným robotom sa stávajú čoraz pálčivejšími otázky spojené s etikou, humanitou či právom. Na jednej strane nadšenie z obrovského potenciálu, na strane druhej zdesenie z možných dopadov na budúcnosť ľudstva. Spomíname na scény z Terminátora či Westworldu a premýšľame, ako dlho bude trvať, kým sa humanoidi presunú z obrazoviek do nášho skutočného sveta. Asi to, chvalabohu, ešte nejaký čas potrvá, takže stále máme ako ľudstvo čas vymyslieť, ako odvrátiť Hawkingove katastrofické proroctvá.[Image] Hlavnou zbraňou človeka v boji so strachom z nepoznaného je vzdelanie. Pochopiť, ako dané veci fungujú, nám často skvelo pomáha odhadnúť vyplývajúce riziká. A keďže čítate príspevok na tomto blogu, stavil by som sa, že patríte k ľuďom, ktorí sa radi vzdelávajú. Prednedávnom sme vypustili na Learn2Code kurz o deep learningu: (https://skillmea.sk/kurzy/python-deep-learning-pre-zaciatocnikov). Deep learning, ako špecifická vetva strojového učenia, je spojený s umelou inteligenciou. Presnejšie povedané, umelá inteligencia (skrátene AI z anglického Artificial Intelligence) obsahuje viacero pododborov a jedným z nich je aj deep learning. Ten práve vďaka svojim špecifikám dosahuje zaujímavé úspechy pri práci s neštruktúrovanými dátami, akými sú reprezentácie obrazu, textu či zvuku. Ak teda filozofujeme o humanoidoch, ktorí sú na nerozoznanie od ľudí, budú si musieť vedieť poradiť práve v disciplínach, s ktorými my, bežní smrteľníci, nemáme problém. Teda s rozprávaním, videním, čítaním, počúvaním atď. Ak ste videli kultový film Blade Runner, určite sa vám vybaví Voigh-Kampffov test, pomocou ktorého odlišovali ľudí od replikantov. Aby ste takýto test vôbec mohli absolvovať, musíte byť schopný komunikovať. Vetva AI, ktorá pomáha počítačom rozumieť, interpretovať a používať ľudský jazyk, sa označuje ako Natural Language Processing, skrátene NLP. Posun v tejto oblasti je za poslednú dekádu obrovský, k čomu prispel veľkou mierou práve deep learning.[Image]Zdroj: https://monkeylearn.com/ Aby sme si demonštrovali, ako ďaleko už veda v tejto oblasti je, rád by som sa s vami podelil o zaujímavú novinku, ktorá vyplávala na povrch práve z týchto hlbín. Možno ste zachytili správu o experimentálnej sérii poviedok, ktorú napísala pre Český rozhlas umelá inteligencia. Ak nie, viac sa o tomto netradičnom pokuse s názvom „Digitální spisovatel“ dočítate na stránkach https://www.mujrozhlas.cz/digitalni-spisovatel, kde si môžete poviedky taktiež vypočuť. Pri produkcii poviedok bol použitý prediktívny jazykový model GPT-3, teda v poradí už tretia generácia Generative Pre-trained Transformera, ktorý používa deep learning k tvorbe textov približujúcich sa kvalitou k ľudskému štandardu. Tento model z dielne spoločnosti OpenAI spôsobil pred pár mesiacmi po otvorení beta verzie značný vzruch v odborných vodách. Kvalita výstupov modelu je skutočne v niektorých prípadoch impozantná, a to nielen pri použití v umeleckej činnosti podobnej vyššie uvedeným poviedkam. Rešerš textov, chatbot, hľadanie faktografických odpovedí, vymýšľanie nadpisov, či dokonca dopĺňanie programátorského kódu, s tým všetkým si nový model veľmi slušne poradí. Tak slušne, že sa vám v hlave chtiac-nechtiac začnú vynárať otázky z úvodu tohto príspevku. A napísal tieto riadky vôbec človek? Kto vie... Ak vás teda témy spojené s umelou inteligenciou zaujímajú a chceli by ste pochopiť úplné základy, na ktorých deep learning principiálne funguje, mrknite na nový kurz, v ktorom si spoločne na praktickom príklade natrénujeme jednoduchý model pre konkrétnu techniku z NLP – analýzu sentimentu. Dúfam, že váš osobný sentiment zostal po prečítaní predchádzajúcich riadkov pozitívny. Buďte aj naďalej predovšetkým zdraví a zvedaví! Autorom článku je Matej Veverka
Najpopulárnejšie kurzy a články v roku 2020
Ostatné
04.01.2021
Skillmea

Najpopulárnejšie kurzy a články v roku 2020

V roku 2020 sme na našom webe zverejnili viac ako 45 nových online kurzov. V tomto článku ti prinášame prehľad najpopulárnejších a najlepšie hodnotených kurzov roku 2020 a takisto najčítanejšie články z blogu. Poďme na to. Najpopulárnejšie kurzy roku 2020V roku 2020 bol najäčší záujem o online kurz tvorby webstránok Webrebel 1. V tomto kurze sa naučíš technológie HTML, CSS a JavaScript, popritom responzívny dizajn, ako funguje server, hosting, domény a všetky dôležité pojmy spojené s tvorbou webov. Kurz Webrebel 1 odporúčame každému záujemcovi, ktorí chce začať s tvorbou webstránok a programovaním. 1. Webrebel 1: HTML, CSS & JavaScript 🥇 2. Java pre začiatočníkov 🥈 3. Základy programovania a OOP 🥉 4. Webrebel 2: PHP 5. SQL databázy: MySQL a SQLite 6. Python pre začiatočníkov 7. JavaScript a ES6 8. Microsoft Excel 9. Visual Design Digital: Photoshop 10. Social Media Marketing Najlepšie hodnotené online kurzy roku 2020V rámci tohto rebríčka sme zobrali do úvahy len kurzy, ktoré mali 10 a viac hodnotení, inak by bol rebríček oveľa dlhší. Online kurz Základy programovania a OOP hodnotilo v roku 2020 viac ako 35 jeho absolventov a všetci mu udelili maximálnych 5 hviezdičiek. O niečo menej hodnotení, ale tiež len tých najvyšších mali online kurzy React, Angular, Vue (a TypeScript) a Branding - budovanie úspešnej značky. 1. Základy programovania a OOP 🥇 2. React Angular Vue (a TypeScript) 🥈 3. Branding - budovanie úspešnej značky 🥉 4. Git a GitHub základy 5. Microsoft Excel 6. SQL databázy: MySQL a SQLite 7. JavaScript a ES6 8. Úspešný content marketing 9. Client management 10. Pokročilé SEO stratégie Najčítanejšie blogy v roku 2020V tomto zozname sú články, ktoré vás v roku 2020 zaujímali najviac.  1. Vyskúšaj si Learn2Code na mesiac zadarmo 🥇 2. Čo je nové v Bootstrap 5 🥈 3. Známe weby, ktoré používajú WordPress 🥉 4. Success story: Michaela vymenila administratívu za frontend 5. Eratostenovo sito

Nezmeškaj info o nových kurzoch a špeciálnych ponukách