CORE013 / Barbora Bühnová1 Přednáška 5 Uživatelská přívětivost CORE013 / Barbora Bühnová2 5. Uživatelská přívětivost ̶ Uživatelské rozhranní vs. UX ̶ Uživatelský průzkum, modeloví uživatelé ̶ Modelování a mapy aplikace, wireframes ̶ Uživatelské testování Domácí práce a příprava na dnešní přednášku ̶ Začátečníci – na https://code.org/ všechny základní úrovně Angry Birds, Flappy, Dance Party ̶ Pokročilí – projít si Refactoring Guru a Compiler Explorer CORE013 / Barbora Bühnová3 DESIGN THINKING CORE013 / Barbora Bühnová / https://faculty.washington.edu/ajko/books/design-methods4 Design Thinking „Quickly I learned that design was much, much more than what was visible. Design was where ideas came from. Design was methods for generating ideas. It was methods for evaluating ideas. It was ways of communicating ideas. I learned that design was problem solving.“ [Jonassen, et al. (2000). Toward a design theory of problem solving.] CORE013 / Barbora Bühnová / https://faculty.washington.edu/ajko/books/design-methods5 Co mají designové role společného? ̶ Hledání více úhlů pohledu na problém (někdy konfliktní). Neexistuje lepší způsob, jak porozumět tomu, co se ve světě skutečně děje, než se na to dívat z tolika dalších perspektiv, kolik jen můžete. ̶ Divergentní myšlení. Schopnost kreativně si představovat nové možnosti. Když návrháři souběžně zvažují alternativy, navrhují lepší věci. ̶ Konvergentní myšlení. To je schopnost využít širokou škálu možností a vybrat si jednu s využitím všech informací, vhledu a intuice, které máte. CORE013 / Barbora Bühnová / https://faculty.washington.edu/ajko/books/design-methods6 Co mají designové role společného? ̶ Vytěžení selhání. Většina lidí se vyhýbá a skrývá selhání; designéři se z chyb snaží učit, protože za každým špatným nápadem je důvod jeho selhání, který by měl být pochopen a integrován do vašeho chápání problému. ̶ Externalizace nápadů. Jako skic, prototypů, psaní a dalších forem. Tím designéři vyjadřují detaily a často odhalují, které části myšlenky jsou stále špatně nebo nedefinované. ̶ Udržování emocionálního odstupu od myšlenek. Při ztotožnění s myšlenkou je těžké vidět a přijmout lepší myšlenku, kterou vy nebo někdo jiný objeví později. CORE013 / Barbora Bühnová / https://faculty.washington.edu/ajko/books/design-methods7 Co mají designové role společného? ̶ Hledání kritiky. Nikdo nemá dost nadhledu ani znalostí, aby sám věděl o designu všechno dobré i špatné. Hledání pohledu ostatních na myšlenku pomáhá dokončit celý obrázek. ̶ Odůvodnění rozhodnutí. Žádný design není přijatelný pro každého. Designéři musí být schopni zdůvodnit volbu, porovnat ji s alternativními možnostmi a vysvětlit, proč je volba, kterou učinili, „nejlepší“ volbou ve srovnání s kompromisy. CORE013 / Barbora Bühnová8 UŽIVATELSKÁ PŘÍVĚTIVOST (USER EXPERIENCE) CORE013 / Barbora Bühnová9 User Experience - UX ̶ Celkový zážitek z interakce člověk- počítač ̶ Vnímání aspektů systému, jako je vzhled, použitelnost, efektivita. ̶ Jedním z nejdůležitějších faktorů softwarových produktů CORE013 / Barbora Bühnová10 User Experience - UX © Papcunováhttps://i1.wp.com/amethyst.design/wp-content/uploads/2019/08/UX-Comparison-of-News-Sites.png?resize=768%2C383&ssl=1 CORE013 / Barbora Bühnová11 User Experience - UX © Papcunová https://s3.amazonaws.com/www-inside-design/uploads/2018/09/UX-research-app-design-1.png ̶ Starý a nekompaktní design ̶ Fotografie zabírají příliš mnoho místa ̶ Moderní a kompaktní design ̶ Strukturované a jasně viditelné informace CORE013 / Barbora Bühnová12 User Interface - UI © Papcunová ̶ Bod interakce člověk-počítač ̶ Způsob, jakým uživatel komunikuje s aplikací nebo webovou stránkou. ̶ Zahrnuje obrazovku, klávesnici, myš, pracovní plochu ̶ Různé typy: ̶ Grafické uživatelské rozhraní (GUI) ̶ Rozhraní příkazového řádku (CLI) ̶ Dotykové uživatelské rozhraní CORE013 / Barbora Bühnová13 UI vs. UX https://medium.com/@gialli/the-4-most-crucial-elements-of-ui-design-6012d38baa67 CORE013 / Barbora Bühnová14 VÝVOJ UX CORE013 / Barbora Bühnová / https://faculty.washington.edu/ajko/books/design-methods15 Základní principy vývoje UX ̶ Počítače přebírají vstupy, zpracovávají je pomocí určitého algoritmu a poté poskytují výstup. ̶ Vstup je jakýkoli druh dat, která uživatel poskytne počítači. ̶ Každé uživatelské rozhraní přijímá určitý rozsah vstupů a každý z těchto vstupů má určitou strukturu. Část uživatelského rozhraní poskytuje prostředky, kterými mohou uživatelé tyto vstupy vyjádřit v platných strukturách. ̶ Výstup může mít mnoho podob a také strukturu ̶ Např. Výsledky vyhledávání Google. CORE013 / Barbora Bühnová / https://faculty.washington.edu/ajko/books/design-methods16 Základní principy vývoje UX ̶ Všechna uživatelská rozhraní reagují na vstup spuštěním obslužných rutin událostí, které převezmou vstup, provedou nějakou operaci a poté poskytnou zpětnou vazbu k výsledku. ̶ Primárním cílem návrháře uživatelského rozhraní je definovat vstupy, výstupy a handlery událostí pro úpravu stavu. ̶ Stav. Uvnitř implementace uživatelského rozhraní jsou algoritmy a data, určující jeho chování, v rámci kterého je klíčový aktuální stav. Rozhranní v závislosti na stavu se stejným vstupem často poskytuje jiný výstup. ̶ Režim. Aplikace může být buď v pasivním režimu (čeká na akci uživatele), nebo v aktivním režimu (provádění určených akcí). CORE013 / Barbora Bühnová / https://faculty.washington.edu/ajko/books/design-methods17 Gulf of Execution & Evaluation ̶ Gulf of execution je rozdíl mezi tím, co chce člověk dělat s rozhraním, a tím, jaké vstupy je vlastně možné poskytnout. ̶ Pokud si představíte budík, jedním ze zálivů k překlenutí je zapnutí budíku. ̶ Gulf of evaluation je mezera mezi výstupem a zpětnou vazbou, kterou rozhraní poskytuje, a schopností člověka spojit tento výstup se svým cílem. ̶ U budíku jde např. o to když stisknutí tlačítka na „zapnuto“ způsobí, že se přepínač viditelně přesune do stavu „zapnuto“ (a možná dokonce vydá zvuk kliknutí), což pomůže uživateli pochopit, že se skutečně podařilo budík zapnout. CORE013 / Barbora Bühnová / https://faculty.washington.edu/ajko/books/design-methods18 Just and Inclusive Design „To truly be just and inclusive, design should not be done by professionals on behalf of the world, but rather done with the world.“ [Amy J. Ko. Design Methods.] 19 Fáze UX vývoje CORE013 / Barbora Bühnová https://medium.com/nyc-design/ux-ui-design-process-for-beginner-753952bb2241 CORE013 / Barbora Bühnová / Unger, R., & Chandler, C. (2009a). A Project Guide to UX Design. New Riders.20 Role spojené s UX ̶ Information Architect ̶ stará se o správnou strukturu informací, vytváří mapy stránek ̶ Interaction Designer ̶ stará se o návrh chování aplikace, vytváří task flows a wireframes zaměřené na interakci ̶ User (Experience) Researcher ̶ zjišťuje a analyzuje zájmy uživatelů ̶ Content Strategist ̶ udržuje celkový koncept obsahu, vytváří tématické templates a guidelines CORE013 / Barbora Bühnová / Unger, R., & Chandler, C. (2009a). A Project Guide to UX Design. New Riders.21 Role spojené s UX ̶ Copywriter ̶ píše konkrétní obsah, cílený na vyvolání konkrétní experience ̶ Visual/Graphic Designer ̶ stará se o celkový, jednotný styl všech částí aplikace, vytváří vzory a grafické manuály ̶ Front-end Developer ̶ uvádí do chodu konkrétní návrhy ̶ Product Manager ̶ zkoumá tržní příležitosti a navrhuje produkty, které těchto příležitostí využívají CORE013 / Barbora Bühnová22 UŽIVATELSKÝ PRŮZKUM CORE013 / Barbora Bühnová / Unger, R., & Chandler, C. (2009a). A Project Guide to UX Design. New Riders.23 Uživatelský průzkum ̶ Systematická studie koncových uživatelů, pomáhá k přesnější definici požadavků a pochopení cílů projektu ̶ Před průzkumem samotným je třeba definovat potenciální cílové skupiny a jejich atributy: ̶ Záměr (s jakým cílem navštěvuje náš web, používá náš produkt, …) ̶ Role (potenciální klient, sponzor nebo hledá práci?) ̶ Demografické pozadí (věk, pohlaví, oblast, příjem, rodina, …) ̶ Zkušenosti (úroveň vzdělání, zkušenosti s konkrétními technologiemi a produktem) CORE013 / Barbora Bühnová / Unger, R., & Chandler, C. (2009a). A Project Guide to UX Design. New Riders.24 Techniky uživatelského průzkumu ̶ User interviews – one-to-one rozhovor s členem cílové skupiny ̶ Field studies – studie prostředí, kde se bude produkt používat ̶ Card sorting – účastníci studie řadí karty s funkcionalitami dle priority ̶ Usability testing – sledování uživatele, jak používá vyvíjený produkt ̶ Dotazníky ̶ Focus groups – moderovaná diskuze ve skupině, brainstorming ̶ Expert review – konzultace s odborníkem v dané oblasti CORE01325 Modeloví uživatelé https://wpamelia.com/user-persona-template/ https://venngage.com/blog/user-persona-examples/ CORE013 / Barbora Bühnová26 NÁVRHY CORE013 / Barbora Bühnová / Unger, R., & Chandler, C. (2009a). A Project Guide to UX Design. New Riders.27 Mapa stránky https://dribbble.com/shots/2048503-Creating-Interactive-Site-Maps-in-UXPin CORE013 / Barbora Bühnová / Unger, R., & Chandler, C. (2009a). A Project Guide to UX Design. New Riders.28 Task Flows https://www.vietiso.com/images/content/idesign-userflows-01_png.png CORE013 / Barbora Bühnová / Unger, R., & Chandler, C. (2009a). A Project Guide to UX Design. New Riders.29 Prototypy https://www.uxpin.com/studio/blog/rapid-prototyping-process-fidelity-10-minute-guide-for-ui-ux-designers/ ̶ Mají různé úrovně propracovanosti (fidelity) ̶ Můžou být zaměřené na konkrétní vlastnost ̶ Vzhled ̶ Funkčnost ̶ Obsah ̶ Learnability CORE013 / Barbora Bühnová / Unger, R., & Chandler, C. (2009a). A Project Guide to UX Design. New Riders.30 Wireframes https://medium.com/mockplus/basic-ui-ux-design-concept-difference-between-wireframe-prototype-a041b95f7cce CORE013 / Barbora Bühnová31 Jak poznat dobrý design CORE013 / Barbora Bühnová / https://faculty.washington.edu/ajko/books/design-methods32 Jak poznat dobrý design – základní charakteristiky ̶ Intuitivní. Lidské bytosti se nerodí s vrozenými znalostmi. Co lidé myslí, když používají toto slovo, je, že někdo může z informací v návrhu usuzovat, jaký je účel nebo záměr něčeho, na základě všech předchozích znalostí, které v životě získali, včetně setkání s dlouhou historií konvence uživatelského rozhraní a koncepce domény. To není „intuitivní“, ale spíše úzce mapované na něčí znalosti. ̶ Uživatelsky přívětivý. Co to znamená být „přátelský“ s uživatelem? Pěkný? Podpůrné? Ochotný? Tato fráze naznačuje hodně, aniž by hodně znamenala, a neumožňuje přesnou kritiku designu. CORE013 / Barbora Bühnová / https://faculty.washington.edu/ajko/books/design-methods33 Jak poznat dobrý design – hodnoty ̶ Jednoduchost. Jedná se o hodnotu, která oceňuje minimalismus a naučitelnost. Ale i jednoduchost má své hranice, aby bylo stale zachováno naplnění účelu. ̶ Novost. Novost má sílu překvapit a zaujmout, nastavit nový trend. Ale novost se staví proti jednoduchosti, protože jednoduchost často vyžaduje znalost a konvence. ̶ Síla. Design by měl být schopen posunout naše možnosti a schopnosti. Měl by nám dát dostatečné prostředky ovládat technologie. To ale může stat proti jednoduchosti. CORE013 / Barbora Bühnová / https://faculty.washington.edu/ajko/books/design-methods34 Jak poznat dobrý design – hodnoty ̶ Neviditelnost. Návrhy, které dosahují neviditelnosti, se nesnaží být středem pozornosti, ale zaměřují pozornost na práci, kterou člověk s UI dělá. To může být na úkor síly a kontroly, protože neviditelnost je často založená na automatizaci. ̶ Univerzálnost. Tato hodnota oceňuje rovnost před ostatními hodnotami. Dává pozornost na to, aby byl např. web použitelný i pro nevidomé lidi. ̶ Spravedlnost. Předpokladem designové spravedlnosti je, že účelem designu by nemělo být zesílení nerovností a nespravedlností, ale jejich odstranění. Např. manipulace skrz zavádějící informace, ovlivnění reklamou. Jak poznat dobrý design https://developer.apple.com/design/human-interface-guidelines/ CORE013 / Barbora Bühnová35 CORE013 / Barbora Bühnová36 Jak poznat dobrý design https://material.io/design CORE013 / Barbora Bühnová37 TESTOVÁNÍ CORE013 / Barbora Bühnová / https://faculty.washington.edu/ajko/books/design-methods38 Průběžná zpětná vazba mezi designery ̶ Když jste požádáni o poskytnutí zpětné vazby k nápadu, jak můžete poskytnout užitečnou, konstruktivní zpětnou vazbu? ̶ Pokud chcete prozkoumat způsob myšlení designéra a dostat se pod povrch designu, některé typy otázek, jak toho dosáhnout, zahrnují: ̶ Otázky objasnění, které vybízejí designéra, aby vysvětlil svůj myšlenkový postup. ̶ Otázky, které zpochybňují předpoklady designéra. ̶ Otázky, které motivují designéra k zvážení alternativních perspektiv. ̶ Otázky, které vybízejí designéra k vysvětlení důsledků návrhu. CORE013 / Barbora Bühnová39 Uživatelské testování https://www.softcrylic.com/blogs/usability-testing-process-test-methods/ CORE013 / Barbora Bühnová / https://faculty.washington.edu/ajko/books/design-methods40 Volba účastníků pro uživatelské testování ̶ Vedle zastoupení person je nezbytné myslet i na další charakteristiky, které ovlivňují, jak uživatelé interagují se systémem: ̶ Motivace uživatele k používání softwaru. ̶ Styl zpracování informací (shora dolů, tj. snaha pochopit před vykonáním akce, vs. zdola nahoru, tj. selektivní experimentování s jednotlivými funkcemi). ̶ Sebevědomí uživatele při používání počítače (přesvědčení, že uspěje v zadaných úkolech). ̶ Postoj uživatele k riskování při používání softwaru. ̶ Strategie pro učení se používání nových technlogií. CORE013 / Barbora Bühnová41 A/B testování ̶ A/B testování je založené na randomizovaném experimentu se dvěma variantami, A a B. ̶ A/B testování je způsob, jak porovnat reakce subjektu na variantu A proti variantě B a určením, která z těchto dvou variant je účinnější. https://en.wikipedia.org/wiki/A/B_testing#/media/File:A-B_testing_example.png CORE013 / Barbora Bühnová42 Data Driven Decisions: Google’s ’50 shades of Blue’​ experiment ̶ Would you believe it if I told you that switching to a different shade of blue netted Google as additional $200 Mn in Ad revenue? https://bharathbalasubramanian.medium.com/data-driven-decisions- googles-50-shades-of-blue-experiment-996f01819a97 https://www.theguardian.com/technology/2014/feb/05/why-google- engineers-designers CORE013 / Barbora Bühnová43 CO NÁS ČEKÁ PŘÍŠTĚ CORE013 / Barbora Bühnová44 6. Algoritmické myšlení II ̶ MIT App Invertor ̶ Interaktivní demo na vytvoření chatovací aplikace Domácí práce a příprava na příští přednášku ̶ Prosím přineste si vlastní notebooky a na své chytré telefony (pokud máte) si nainstalujte MIT AI2 Companion ̶ https://appinventor.mit.edu/explore/ai2/setup-device-wifi