Vlado Krejčí Senior UX designer @KenticoCloud O čom sa dnes budeme rozprávať ux Použiteľnosť Určuje do akej miery systém, výrobok alebo služba môže byť použitá konkrétnym používateľom k dosiahnutiu zadaných cieľov účinne, efektívne a so spokojnosťou v určitom kontexte používania. Použiteľnosť • Naučitelnosť: Určuje ako zložité je pre používateľa zvládnutie základných úloh pri prvej interakcii so systémom. • Účinnosť: Stanovuje ako rýchlo môže používateľ plniť úlohy, ak sa už návrh naučil. • Zapamätateľnosť: Vytyčuje ako zložité bude pre používateľa znova účinne pracovať so systémom po určitej dobe nepoužívania. • Chybovosť: Chybovosť používateľa určuje, koľko chýb pri práci so systémom spraví, ako sú závažné a ako zložité je chyby vyriešiť. • Spokojnosť: Reflektuje ako príjemné je systém používať. Ľudský faktor/Ergonómia Ako ľudia vzájomne pôsobia fyzicky a psychicky s konkrétnym prostredím, produktom alebo službou. Komunikácia človeka s počítačom (HCI) • vedecký odbor • minimalizovať bariéry medzi potrebami používateľa a schopnosťami počítača tieto potreby správne zhodnotiť. Human ■ Software Interakčný dizajn • odbor skúmajúci ako používateľ komunikuje so systémom a ako na seba vzájomne pôsobia • ako vstup súvisí s výstupom, spätná väzba, tok interakcie • výskumy na nové prístupy v interakcii, aby bola čo najviac prirodzená Informačná architektúra • ako usporiadať informácie v systéme tak, aby boli ľahko pochopiteľné. • správna informačná architektúra pomáha ľuďom pochopiť dizajn a nájsť v ňom to, čo hľadajú. • pomáha používateľom pochopiť, kde sa v rámci systému nachádzajú, čo je naokolo a čo môžu očakávať Informačná architektúra by sorting out things like this: s CLASSIFICATION LABELS and NAVIGATION and SEARCH and HIERARCHY TAGGING WAYFINDING INFORMATION ARCHITECTURE (IA for short) Vizuálny dizajn • dotvára vzhľad systému a pocit, aký z neho používatelia zažívajú • vedomé využívanie obrázkov, ikon, farieb, písma a iných vizuálnych elementov • nemal by byť oddelený od obsahu a funkčnosti systému, ale namiesto toho by ich mal podporovať podmanivým dizajnom, a tým budovať dôveru a záujem o systém Návrh používateľského rozhrania (Ul) • zameriava sa na to, čo by používatelia mohli potrebovať na vykonanie určitej akcie a zaručuje, že rozhranie disponuje elementárni na uskutočnenie týchto akcií a sú ľahko dostupné a pochopiteľné • používateľ by sa mal sústrediť na výsledok a nie na vnútorné procesy systému alebo jeho komplikované ovládanie • najlepšie rozhranie je také, ktoré si používateľ takmer ani neuvedomuje UX Feelings and thoughts on the use, without having actually used it - anticipated use. Effectiveness and efficient achievement of goals without any discomfort/disturbances. Responses that result from the use of the product, system or service. Emotional connection. Usability User Experience UX starts by being useful. Functionality, people must beabletouseit. N The way it looks and feels must be pleasing. TW8 helps create an overall brand experience. ^ ^ Brand Experience Desirability Usability -a Utility It is useful to me. It meets my needs. '° use the t*0^ ne 6rand/produ<* ^v Source User Experience 2008. nnGroup Conference Amsterdam Retrieved from htipV/neospotseAjsability-vs-user-expenence/ Usability & Accessibility Information Architecture Usability Human Factors Utility Design HCl USER EXPERIENCE Accessibility Marketing! Ergonomics System Performance Proces DESIGN THINKING A FRAMEWORK FOR INNOVATION EMPATHISE What b the problem? _ _ How do we solve It? Why Is It Important? Does It work? How do we create It? Research, observe, understand Implement the product, show & start creating, experiment. & create a point of view don't tell, start to refine the product fall cheap & fast Billy Loizou EMPATHIZE DEFINE IDEATE TEST IMPLEMENT UNDERSTAND EXPLORE MATERIALIZE DESIGN THINKING 101 NNGROUP.COM pixel studios the process of creating Awesome UX | User Experience o o o o © DISCOVERY Define and research to define user scenario and conceptual model WIREFRAME Use Cases Workflow Sitemap Screen Wre taring Major mteraction PROTOTYPE Visual Design Icons -f Style Mock up HTM I Pro to ns ANDROID 3 VALIDATE Internal Validate Get Feedback From Executive & Team ft ů TESTING Demo Testing Cfcent review Niche group of Target users SUMMARIZE Vakdateand Learn from user 0-fi jr.-1 j- o ITERATE Ran & move to next cycle www |M«»»«tuolO*NditM c«rt»w of • P*9? 93 nm ^ mo Lorem Ipsu nwtotM center* o*»tttgt ©e «j- -it mo Lorem Ipsu o»«pw ■ Ml ■ oonlari of * (MQ« OCKr*^ mo ™ Home Notification Prototypovanie Mo/.I.» V.ew ľ j I G -c ► Get Firefox On Your Phone Download tho Bota Now: 0#t For OM For Android Maemo Foe Android & Maerro Supported Device* Enjoy your Favorite Feature*: Sync Seavntesaty tynchroniz* your dMldop and mobile bro»vs*ng. Customize \/ Searntessty synenrorue your desktop and mobite txowvng. Search SeayntMeV synchronize your desktop and mobite browssng. VWW tUH WtO ♦ tíj Firefox On Your Phone Download thr Beta Nov*" Android - Fnet- Maemo Supported Devices and Languages Enjoy Your Favorite Features: Sync Seamlessly synchronize your desktop and mobil« browsing. Customize Instill add-ons to make Firefox exactly the wav you mm. Search Type l«ss and get to the Web (aster using the Awesome Bar. Crazy 8 Používateľské testovanie Univerzálne princípy / heuristiky Mimimalizmus a jednoduchosť • "Moderným paradoxom je, že je jednoduchšie vytvárať zložité rozhrania, pretože ich zjednodušenie je zložité." - Pär Almqvist • Dokonalosť dosiahneme nie vtedy, keď už nemáme čo pridať, ale keď už nie je nič, čo by sme mohli odobrať. • Každá informácia naviac znižuje relatívnu viditeľnosť relevantných informácií. Mimimalizmus a jednoduchosť Tipy na zjednodušenie návrhu systému: • 1. Ak je to možné, treba systém rozdeliť len do pár hlavných sekcií (päť alebo menej). • 2. Iba jeden obsah alebo typ informácie by sa mal zobrazovať na jednu stránku. • 3. Pri každej iterácií počas návrhu brať stále na zreteľ jednoduchosť a v každom kroku sa pokúsiť odstrániť čo najviac nepotrebných vecí z návrhu. • 4. Začať navrhovať systém len čierno-bielo (lo-fi wireframe) a pridávať vizuálne úpravy, ako je napríklad farba až keďje základný návrh hotový. • 5. Hickov zákon - treba obmedziť počet možností na jednej stránke na čo najmenej (najlepšie len najeden call-to-action) Konzistencia • "Cím viacej používateľových očakávaní sa preukáže za pravdu, tým viac nadobudne pocit, že má systém pod kontrolou a tým viac ho bude mať rád." - Jakob Nielsen • rovnaké konvencie a pravidlá by mali byť použité naprieč celým systémom • konzistentný systém je predvídateľný a intuitívny Konzistencia ukážka vonkajšej konzistencie Microsoft Word Home Insert Page Layout Referenz Themes Themes Eh □Margins Orientation Size Columns Page Setup Microsoft Excel Microsoft Powerpoint Home Insert Page Layout Formulas Si. Paste # Arial "|l0 " |A* a" " B I U ' _ Clipboard j* Font r' • d" Home Insert Design Animations i 0 * Paste J _eI Layout " Corbel =\ Keset Add ^ „, Slide - Delete B / U S Clipboard ^ Slides Štandardné konvencie Link Design Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercita-tion ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup-tate velit esse cillum dolore eu fugiat Metafory z reálného sveta • grafické elementy, ktoré sú založené na metaforách, sú pre používateľa lepšie pochopiteľné a uľahčujú mu zapamätanie funkcionality. • umožňujú rýchle a presné vytvorenie predstavy o možnostiach a obmedzeniach systému Viditeľnosť systémového stavu a spätná väzba • systém by mal vždy informovať používateľov čo sa deje v rozumnom čase, pomocou vhodnej spätnej väzby • keď používateľ vykonáva nejakú akciu alebo úlohu, mal by vedieť, či bola úspešne alebo neúspešne ukončená • spätná väzba uzatvára (potvrdzuje) jednotlivé akcie Viditeľnosť systémového stavu a spätná väzba This is a primary alert-check it out1 This is a secondary alert-check it out! This is a danger alert with an example link Give it a click if you like. This is a warning alert with an example link Give it a click if you like. Material design notifications warning message SUCCESS MFSSAGF ERROR MESSAGI /K Hi! 1 am warning message. 1 if Hi! 1 am error message. ■ • Hi! 1 am info message. Viditeľnosť systémového stavu a spätná väzba Error code 04 type 11 An error has occurred in the bus_1234 Library. This problem has caused a crash in the dynamic states of the system. Please contact your sys admin on the IT floor. Something went wrong! But don't worry, press Return to go back to the previous screen. Viditeľnosť systémového stavu a spätná väzba Status of shipment 4321511155 has been changed to Delivered. 12 minutes ago Status of shipment 4666511666 has been changed to Arrived. 15 minutes ago Status of shipment 1111511177 has been changed to Departed. 30 minutes ago Viditeľnosť systémového stavu a spätná väzba Chyby • Chyby sú činnosti alebo ich vynechanie, vedúce k nežiadúcim výsledkom => zlá UX Predchádzanie chybám • Obmedzenia • Potvrdenie • Predvolená hodnota • Návrhy (suggestions, auto-complete) • Validácia • Focus • Zvýraznenie a kontrast Tolerantnosť k chybám • Krok späť • Inštrukcie (mali by byť napísané v bežnom jazyku používateľa) Zákon blízkosti a podobnosti • „Celek je víc než suma jeho částí" - Kurt Koffka • prvky, ktoré sú blízko seba, sú vnímané ako viacej súvisiace než prvky, ktoré sú od seba vzdialené ďalej • podobné prvky sú vnímané ako jedna skupina a viac súvisiace než prvky, ktoré podobné nie sú Design challenge