---
# System prepended metadata

title: 11 Používateľské rozhrania

---

# 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
