# 11. Používateľské rozhrania Principy návrhu a vývoje uživatelského rozhraní v moderních softwarových systémech, vč. webových, mobilních. Proces vývoje uživatelského rozhraní a zásady kvality. User experience (UX), interaction design, prototypování, wireframování, uživatelský výzkum, testování použitelnosti. Technologie a nástroje. Příklady z praxe pro vše výše uvedené. (PV252, PV247, PV278, PV182) --- ## Princípy návrhu a vývoja používateľského rozhrania v moderných SW + mobilných a webových **Cieľom** návrhu používateľského rozhrania je vytvoriť **interaktívny** systém, ktorý je prispôsobený **potrebám** použivateľov. - Formou GUI (grafické rozhranie), CLI (príkazový riadok), iné (ovládače, neurálne, vizuálne, ...) - Maximalizujeme **použiteľnosť** - používateľovi musí byť **umožnené** naplniť jeho **cieľ**, bez zbytočných **obštrukcií**, čo najefektívnejšie, najprívetivejšie - Základom vývoja je sústrediť sa na používateľa - treba robiť analýzy použiteľnosti, komunikovať, robit meetingy a štúdie - Používateľa sa pýtame čo najčastejšie, robíme prototypy, ktoré sa prechádzajú **Použiteľnosť** systému je dôležitá, nakoľko **znižuje frustráciu**, **zvyšuje produktivitu** a posobí pozitívne na **emocionálny** stav používateľa. - Dobré UI je aj vhodná biznisová stratégia, nakoľko ak aplikácie majú dobrú povesť a recenzie, tak ľudia ich radi odporúčajú a používajú **Kvality produktu** rozlišujeme na: - Inštrumentálne - Funkcie produktu - Logika interakcie - Tvar, ergonomika - Použiteľnosť - naučiteľnosť (learnability), efektivita, kontrolovateľnosť - Neinštrumentálne - Estetika - vizuálna, haptická, akustická - Dizajnový systém, značka - Symbolika, zmysel produktu UI by sa malo riadiť **konvenciami** a **skúsenosťami** bežného používateľa systému. Napr. používať dialogové okná s tlačidlami OK, Cancel, a nie vymýšlať si niečo nové. Rátame s tým, že používateľ je zvyknutý na Windows / iOS / Android / Linux. - Button - Dropdown - Textbox - Combobox - Dialog - Table - List - Tabs - Ribbon Typy **navigácie**: - Hamburger menu - Tabs - Vertical navigation - Call-to-action - Breadcrumbs - Top navigation bar - Side navigation bar - Footer - Mega menu - Dropdown menu - Sticky navigation - Full-screen navigation - Card grid navigation - Floating-action-button (FAB) - Search-centric navigation - Contextual menu - Accordion menu - Off-canvas menu - Hero Na vývoj **desktopových** aplikácií používame: - C# .NET - WPF, WinForms, Blazor, MAUI - Java FX - Qt QML, Qt Widgets, GTK, wxWidgets, tcl/TK - Windows UI Toolkit - Swift Apple UI - HTML + CSS + JS + Electron / Tauri (WebView) Na vývoj na **mobilné** zariadenia používame: - Android - Java, Jetpack Compose, .NET, Dart (Flutter) - iOS - Swift Na vývoj na **webe** používame: - React, Svelte - Next.js, Vue.js, Solid.Js, SvelteKit, Angular - HTML, CSS, JS, TS, WebAssembly - C# ASP.NET (BackEnd), Blazor (FullStack) Využívame techniky SPA (SinglePageApp), SSR (ServerSideRendering), PWA (ProgressiveWebApp), microfrontend a ich mix. ## Proces vývoja používateľského rozhrania a zásady kvality **Fázy** vývoja UI: - **Prehľadová štúdia a výskum** - Používateľská štúdia / výskum - Definícia požiadaviek - Stanovenie cieľov používateľa, biznisových cieľov - Analýza obsahu - Výber technológií - **Interaction Design** (dizajn interaktivity) - Card Sorting - Site Map - Process/Task diagrams - Wireframes - Prototype - Usability Testing - **Visual Design** (vizuálny dizajn) - Visual Composition - wireframes, mockups, hi-fi - Style Guide - HTML, CSS templates - Content Migration - **Engineering** (programovanie, testovanie, nasadzovanie) **Zásady kvality**: - Functional - aplikácia spĺňa funkčné požiadavky - Reliable - aplikácia nepadá a dáva korektné výsledky - Usable - dá sa jednoducho používať - Convenient - pracuje tak, ako by som čakal - Pleasurable - systém si užívateľ zapamätá a skúsenosť šíri to ďaľej - Meaningful - využitie softvéru má osobný zmysel pre používateľa Snažíme sa **inovovať** a nájsť **prienik vlastností**: - **Desirability** - čo používateľia chcú - Majú používateľia nejaký problém? - Snažíme sa ho vyriešiť? - Aká je to skúsenosť s našim riešením? - **Viability** - produkt, ktorý bude zarábať (biznis) - Kto bude platiť a koľko? - Ako budú platiť? - Bude to zarábať? - **Feasibility** - produkt, ktorý sa dá vytvoriť so súčasnou technológiou - Vieme vyvinúť potrebnú technológiu? - Ako dlho to bude trvať? - Koľko to bude stáť? - Ako bude produkt dostupný a pre koho? ## User Experience (UX), interaction design, prototyping, wireframing, používateľský výskum, testovanie použiteľnosti User Experience (UX) je **disciplína**, ktorá sa sústredí na dizajn skúseností s daným produktom (end-to-end experience). - Z pohľadu užívateľa to je **pocit**, ktorý nadobúda pri používani softvéru **Interaction design** sa zaoberá dizajnovaním **interakcií** medzi používateľom a softvérom. - **Storyboarding** - definujeme sekvenciu snímkov prechodu aplikácie - **Sketching** - základné obrazovky, prvotá ideácia, myšlienkové pochody - **Wireframing** - základné obrazovky, obsahuje placeholdery miesto reálných grafík ale navigácia a kompozícia by už mala reprezentovať finálny produkt - **Prototyping** - vytvorenie predbežného modelu podľa získaných skúseností od používateľa - Príklad: vo Figme spravíme interaktívny dizajn s animáciami medzi stránkami **Používateľský výskum** spočíva v získavaní údajov a funkcionalít od používateľov. - Skupinové alebo individuálne interviews - Dotazníky - Živé testovanie a ich sledovanie, zápis Definujeme si **persóny**, ich **empatickú mapu** a **point-of-view statementy**. - **Persóna** - typický používateľ systému, môže ich byť viac (napr. bežný používateľ a expert) - **Empatická mapa** - čo persóna vidí, počuje, cíti, nad čím rozmýšľa a čo chce robiť - **Point-of-view statement** - jednoduchý zápis user story pomocou jednej vety - (používateľ) $A$ potrebuje (sloveso) $B$, pretože $C$ (dôvod) Snažíme sa zistiť **mentálny model** používateľa nášho systému, napr. pomocou metódy **card sorting**. - Vyberieme nejaké **objekty** alebo **témy** a napíšeme ich na **kartičky** - Necháme ich **zoradiť** a **zoskupiť** tieto kartičky - **Open** sorting - kategórie označí používateľ - **Closed** sorting - kategórie sú určené, používateľ ich iba dopĺňa - **Hybrid** sorting - pár kategórií ale môžu sa tvoriť ďalšie - Zistíme, čo je podľa nich systematické, logické, čo má byť spolu a čo nie - Podľa toho vieme potom rozmiestniť prvky v UI **Testovanie použiteľnosti** spočíva v určení, či náš návrh bude **uspokojiteľný** požiadavkám používateľov. - Hľadá diery v našom dizajnovom systéme - Problémy s navigáciou - Prvky, ktoré chýbajú alebo naopak sú zbytočné - Farby, farbosleposť, accesibility, preklad textu - Vieme aplikovať znova interviews a ich sledovanie alebo **A/B testing**, feature flags **Použiteľnosť** sa snažíme zabezpečit použitím **heuristík** pri návrhu. Napríklad **10 Nielsenových princípov**: 1. Používateľ by mal vždy vedieť, kde sa nachádza (navigácia, breadcrumbs) 2. Snažme sa modelovať reálny svet (napr. ikonka diskety na uloženie nedáva úplne zmysel v dnešnej dobe) 3. Používateľ by mal mať voľnosť vo výbere možností a ich poradia vykonávania (napr. dá sa preklikávať vo formulári tam a naspäť) 4. Snažme sa používať konvencie a dizajnové systémy, na ktoré sú používatelia zvyknutí (napr. na iOS použijeme ich dizajn a nie nejaký vlastný, na Android Material UI) 5. Vyjadrujme vzniknuté problémy, dávajme možnosť ich nápravy (napr. kontextové okná s chybami, default riešenie a možnosti) 6. Snažme sa vyvarovať problémom, ktoré môžu nastať 7. Spoliehajme sa na rozpoznanie myšlienky, než na memorizáciu (viditeľné možnosti, konzistencia, max. 7-9 vecí na stránke) 8. Navrhnime systém pre nováčika aj pre experta zároveň (skryté možnosti) 9. Estetický a minimalistický dizajn 10. Pomoc a dokumentácia (support, knowledge base, help, notifikácie, ...) ## Technológie a nástroje Technológie na **prototyping**: - InVision - Sketch - Marvel - Balsamiq - Figma - Proto.io - Moqups - Draw.io - Lucidchart - Google Slides - Keynote - PowerPoint - Flinto - Adobe XD (Experience Design) **Dizajnové systémy** definujú typografiu, farby, kompozíciu, ikonky a použitie komponentov. - Google Material UI 3 - Amazon Amplify UI - Atlassian ADS - Github Primer - Gitlab Pajamas - Kiwi Orbit - Microsoft Windows UI, Fluent 2 - Apple Liquid Glass