The wiki page is under active construction, expect bugs.

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
statnice:bakalar:b4b39iur [2025/05/18 17:58] – zapleka3statnice:bakalar:b4b39iur [2025/06/06 21:22] (current) – zapleka3
Line 1: Line 1:
-==== Techniky pro efektivní implementaci uživatelského rozhraní. Příprava uživatelského rozhraní pro testování s/bez uživatele. ====+====== Techniky pro efektivní implementaci uživatelského rozhraní. Příprava uživatelského rozhraní pro testování s/bez uživatele. ======
  
 [[https://fel.cvut.cz/cz/education/bk/predmety/46/99/p4699206.html|B4B39IUR]] [[https://moodle.fel.cvut.cz/course/view.php?id=6107|Webové stránky předmětu]] [[https://fel.cvut.cz/cz/education/bk/predmety/46/99/p4699206.html|B4B39IUR]] [[https://moodle.fel.cvut.cz/course/view.php?id=6107|Webové stránky předmětu]]
Line 21: Line 21:
   * **View** – Zobrazuje data z ViewModelu pomocí bindingu, neobsahuje žádnou aplikační logiku. Může být definována v XAML, přičemž `DataContext` odkazuje na odpovídající ViewModel.   * **View** – Zobrazuje data z ViewModelu pomocí bindingu, neobsahuje žádnou aplikační logiku. Může být definována v XAML, přičemž `DataContext` odkazuje na odpovídající ViewModel.
   * {{:statnice:bakalar:pasted:20250518-130657.png?400}}   * {{:statnice:bakalar:pasted:20250518-130657.png?400}}
- 
-MVVM vychází z předchozích vzorů, jako jsou MVC a MVP: 
- 
-  * **MVC** – Controller zpracovává vstup a mění stav Modelu; View ho pouze zobrazuje. Často dochází k prolínání zodpovědností mezi View a Controllerem. 
-    * {{:statnice:bakalar:pasted:20250518-131112.png?300}} 
-  * **MVP** – Presenter obsluhuje interakci s uživatelem a logiku, View je pasivní. Vhodné pro testovatelnost, ale tight-coupling může ztížit správu. 
-    * {{:statnice:bakalar:pasted:20250518-131144.png?300}} {{:statnice:bakalar:pasted:20250518-131200.png?300}} 
-  * **MVVM** – ViewModel je zcela oddělený od View. Spojení je dosaženo pomocí *data bindingu* a příkazů, což usnadňuje testování i vývoj. 
-    * {{:statnice:bakalar:pasted:20250518-131218.png?300}} 
  
 === Klíčové návrhové vzory použité v MVVM === === Klíčové návrhové vzory použité v MVVM ===
Line 35: Line 26:
   * **Observer Pattern**    * **Observer Pattern** 
     * Definuje *jeden ku mnoha* závislost: když se subjekt (např. Model) změní, informuje všechny zaregistrované pozorovatele (např. ViewModel). Tento vzor pomáhá oddělit Model od View/ViewModelu, čímž se zvyšuje modularita. V C# se často realizuje pomocí `INotifyPropertyChanged`.     * Definuje *jeden ku mnoha* závislost: když se subjekt (např. Model) změní, informuje všechny zaregistrované pozorovatele (např. ViewModel). Tento vzor pomáhá oddělit Model od View/ViewModelu, čímž se zvyšuje modularita. V C# se často realizuje pomocí `INotifyPropertyChanged`.
-    * {{:statnice:bakalar:pasted:20250518-130822.png?300}}+    * {{:statnice:bakalar:pasted:20250518-130822.png?400}}
  
   * **Event–Delegate Mechanismus (C#)**     * **Event–Delegate Mechanismus (C#)**  
Line 112: Line 103:
  
 **Tlačítko s obrázkem a textem**: **Tlačítko s obrázkem a textem**:
- +<markdown> 
-```c+```xaml
 <Button HorizontalAlignment="Center" VerticalAlignment="Center"> <Button HorizontalAlignment="Center" VerticalAlignment="Center">
   <StackPanel Orientation="Horizontal">   <StackPanel Orientation="Horizontal">
     <Image Source="icon.png" Height="32" Width="32"/>     <Image Source="icon.png" Height="32" Width="32"/>
-      <TextBlock Text="Settings" VerticalAlignment="Center"/> +    <TextBlock Text="Settings" VerticalAlignment="Center"/> 
-    </StackPanel> +  </StackPanel> 
-  </Button>+</Button>
 ``` ```
 +</markdown>
  
-  * **Styl se StaticResource**: +**Styl se StaticResource**: 
-    ```xml +<markdown> 
-    <Window.Resources>+```xaml 
 +<Window.Resources>
       <Style x:Key="ButtonStyle" TargetType="Button">       <Style x:Key="ButtonStyle" TargetType="Button">
         <Setter Property="Background" Value="LightBlue"/>         <Setter Property="Background" Value="LightBlue"/>
         <Setter Property="FontWeight" Value="Bold"/>         <Setter Property="FontWeight" Value="Bold"/>
       </Style>       </Style>
-    </Window.Resources>+  </Window.Resources> 
 +<Button Style="{StaticResource ButtonStyle}" Content="Styled Button"/> 
 +``` 
 +</markdown>
  
-    <Button Style="{StaticResource ButtonStyle}" Content="Styled Button"/> +**Trigger na `IsMouseOver`**: 
-    ```+<markdown> 
 +```xaml 
 +<Style TargetType="Button"> 
 +  <Style.Triggers> 
 +    <Trigger Property="IsMouseOver" Value="True"> 
 +      <Setter Property="Background" Value="Yellow"/> 
 +    </Trigger> 
 +  </Style.Triggers> 
 +</Style> 
 +``` 
 +</markdown>
  
-  * **Trigger na `IsMouseOver`**: +**Custom seznam s `DataTemplate`**: 
-    ```xml +<markdown> 
-    <Style TargetType="Button"> +```xaml 
-      <Style.Triggers> +<ListBox> 
-        <Trigger Property="IsMouseOver" Value="True"> +  <ListBox.ItemTemplate> 
-          <Setter Property="Background" Value="Yellow"/> +    <DataTemplate> 
-        </Trigger> +      <StackPanel> 
-      </Style.Triggers> +        <TextBlock Text="{Binding Name}"/> 
-    </Style> +        <TextBlock Text="{Binding Description}"/> 
-    ```+      </StackPanel> 
 +    </DataTemplate> 
 +  </ListBox.ItemTemplate> 
 +</ListBox> 
 +``` 
 +</markdown>
  
-  * **Custom seznam s `DataTemplate`**: +**Použití `ContentTemplate` v tlačítku**: 
-    ```xml +<markdown> 
-    <ListBox> +```xaml 
-      <ListBox.ItemTemplate> +<Button> 
-        <DataTemplate> +  <Button.ContentTemplate> 
-          <StackPanel> +    <DataTemplate> 
-            <TextBlock Text="{Binding Name}"/> +      <StackPanel Orientation="Horizontal"> 
-            <TextBlock Text="{Binding Description}"/> +        <Image Source="{Binding Image}" Width="16" Height="16"/> 
-          </StackPanel> +        <TextBlock Text="{Binding Text}"/> 
-        </DataTemplate> +      </StackPanel> 
-      </ListBox.ItemTemplate> +    </DataTemplate> 
-    </ListBox> +  </Button.ContentTemplate> 
-    ``` +</Button> 
- +``` 
-  * **Použití `ContentTemplate` v tlačítku**: +</markdown>
-    ```xml +
-    <Button> +
-      <Button.ContentTemplate> +
-        <DataTemplate> +
-          <StackPanel Orientation="Horizontal"> +
-            <Image Source="{Binding Image}" Width="16" Height="16"/> +
-            <TextBlock Text="{Binding Text}"/> +
-          </StackPanel> +
-        </DataTemplate> +
-      </Button.ContentTemplate> +
-    </Button> +
-    ```+
  
 === Skins a Themes === === Skins a Themes ===
Line 221: Line 220:
 === Ukázky použití === === Ukázky použití ===
  
-  * **Validace pomocí výjimek** +**Validace pomocí výjimek** 
-    ```xml +<markdown> 
-    <TextBox.Text> +```xaml 
-      <Binding Path="Age"> +<TextBox.Text> 
-        <Binding.ValidationRules> +  <Binding Path="Age"> 
-          <ExceptionValidationRule /> +    <Binding.ValidationRules> 
-        </Binding.ValidationRules> +    <ExceptionValidationRule /> 
-      </Binding> +  </Binding.ValidationRules> 
-    </TextBox.Text> +</Binding> 
-    ```+``` 
 +</markdown>
  
-  * **Validace pomocí `IDataErrorInfo`** +**Validace pomocí `IDataErrorInfo`** 
-    ```xml +<markdown> 
-    <TextBox Text="{Binding Name, ValidatesOnDataErrors=True}" /> +```xaml 
-    ```+<TextBox Text="{Binding Name, ValidatesOnDataErrors=True}" /> 
 +``` 
 +</markdown>
  
-  * **Vlastní validační pravidlo** +**Vlastní validační pravidlo** 
-    ```csharp +<markdown> 
-    public class JpgValidationRule : ValidationRule { +```xaml 
-        public override ValidationResult Validate(object value, CultureInfo cultureInfo) { +public class JpgValidationRule : ValidationRule { 
-            string path = value as string; +  public override ValidationResult Validate(object value, CultureInfo cultureInfo) { 
-            if (!path.EndsWith(".jpg")) +    string path = value as string; 
-                return new ValidationResult(false, "Soubor musí být ve formátu JPG."); +      if (!path.EndsWith(".jpg")) 
-            return new ValidationResult(true, null); +        return new ValidationResult(false, "Soubor musí být ve formátu JPG."); 
-        } +    return new ValidationResult(true, null); 
-    } +  } 
-    ``` +} 
- +``` 
-  * **Zobrazení chyby pomocí Triggeru** +</markdown> 
-    <markdown> +     
-    ```xml +**Zobrazení chyby pomocí Triggeru** 
-    <Style TargetType="TextBox"> +<markdown> 
-      <Style.Triggers> +```xaml 
-        <Trigger Property="Validation.HasError" Value="true"> +<Style TargetType="TextBox"> 
-          <Setter Property="ToolTip" +  <Style.Triggers> 
-                  Value="{Binding RelativeSource={RelativeSource Self}, +    <Trigger Property="Validation.HasError" Value="true"> 
-                                 Path=(Validation.Errors)[0].ErrorContent}" /> +      <Setter Property="ToolTip" 
-        </Trigger> +              Value="{Binding RelativeSource={RelativeSource Self}, 
-      </Style.Triggers> +                      Path=(Validation.Errors)[0].ErrorContent}" /> 
-    </Style> +    </Trigger> 
-    ``` +  </Style.Triggers> 
-    </markdown>+</Style> 
 +``` 
 +</markdown>
  
  
Line 270: Line 274:
  
   * **Architektury**:   * **Architektury**:
-    - **MVC** – klasické oddělení logiky, prezentace a dat. Uživatel interaguje i s View. +    * **MVC** – klasické oddělení logiky, prezentace a dat, uživatel interaguje i s View, Controller zpracovává vstup a mění stav Modelu; View ho pouze zobrazuje. Často dochází k prolínání zodpovědností mezi View a Controllerem. 
-    - **MVP** – Presenter zajišťuje komunikaci, View pasivní. +      * {{:statnice:bakalar:pasted:20250518-131112.png?300}} 
-    - **MVVM** – silný binding, ViewModel poskytuje logiku. +    * **MVP** – presenter obsluhuje interakci s uživatelem a logiku, View je pasivní, vhodné pro testovatelnost, ale tight-coupling může ztížit správu. 
-  * **Designové vzory pro interakci**: +      * {{:statnice:bakalar:pasted:20250518-131144.png?300}} {{:statnice:bakalar:pasted:20250518-131200.png?300}} 
-    - Wizard, Breadcrumb, Carousel, Undo, Drag&Drop. +    * **MVVM** – silný binding, ViewModel poskytuje logiku, ViewModel je zcela oddělený od View. Spojení je dosaženo pomocí *data bindingu* a příkazů, což usnadňuje testování i vývoj. 
-    - Deklarativní popis UI (XAML, HTML) umožňuje lepší udržovatelnost.+      * {{:statnice:bakalar:pasted:20250518-131218.png?300}} 
   * **UI testovací skripty**:   * **UI testovací skripty**:
-    - **Manuální** – přesně dané kroky. +    * **Testovací kód (UI Test Scripts)** – Skripty automatizují interakce uživatele s UI (např. kliknutí, vyplnění polí) a ověřují očekávané chování aplikace. Test je obvykle strukturován s identifikátorem, účelem, vstupy, očekávaným výstupem a historií provedení. 
-    - **Automatizované** – Selenium, QTP. +      * Ukázka v Selenium: 
-    - **Model-based testing** – generování scénářů na základě UI struktury. + 
-    - **GUI ripping** – automatické mapování komponent a jejich vlastností.+<markdown> 
 +```java 
 +public void testLogin() throws Exception { 
 +  selenium.open("/MyApp/"); 
 +  selenium.type("name=username", "tester"); 
 +  selenium.type("name=password", "1234"); 
 +  selenium.click("name=login"); 
 +  selenium.waitForPageToLoad("3000"); 
 +} 
 +``` 
 +</markdown> 
 + 
 + 
 +    * **Nahrávání interakce** – Nástroje jako Barista nebo Selenium IDE umožňují zaznamenat skutečné akce uživatele a automaticky z nich vytvořit testovací skripty. Zjednodušuje tvorbu testů a snižuje množství chyb způsobených ručním psaním. 
 + 
 +    * **Automatizované testování (Automated replay)** – Testovací nástroje (např. Selenium, Firebase Test Lab) spouštějí zaznamenané nebo předem definované testy automaticky. Výstupem může být: 
 +      * počet zobrazených obrazovek, 
 +      * snímky obrazovky (screenshots), 
 +      * provedené akce (click, input, scroll...), 
 +      * záznam výjimek a chyb, 
 +      * metriky jako doba odezvy nebo dostupnost komponent. 
 + 
 +    * **Manuální testování** – Tester ručně následuje předem definované kroky a porovnává výstup s očekáváním. Hodí se pro testování na různých zařízeních nebo pro explorativní testy. 
 + 
 +    * **Model-based testing** – Na základě vytvořeného modelu UI (např. stavový automat nebo hierarchie obrazovek) se automaticky generují testovací scénáře. Pomáhá pokrýt všechny důležité přechody a stavy v aplikaci. 
 + 
 +    * **GUI ripping** – Automatická analýza uživatelského rozhraní, která vytvoří hierarchický model UI (strom komponent), určí dostupné akce a jejich předpoklady. Nástroj poté generuje testovací scénáře pro různé kombinace uživatelských operací. 
 +      * Např. operátor `File_Open("public", "doc.doc")` → otevření souboru ve složce „public“. 
 +      * Plánovací algoritmus vytvoří posloupnost interakcí, která ověří, že cesta od výchozího stavu k cíli je funkční. 
 + 
 +    * **Porovnání návrhu a implementace** – Pomocí nástrojů jako Diff Checker lze porovnat očekávaný návrh UI (např. prototyp z Figma) s implementovaným rozhraním a vyhodnotit rozdíly. Toto se využívá hlavně při regresech a kontrolách konzistence vzhledu.
  
 ==== Příprava software pro uživatelské testování ==== ==== Příprava software pro uživatelské testování ====
  
-  * **Data mocking**: +Aby bylo možné efektivně provádět testování s uživateli (nebo bez nich), je potřeba připravit samotné prostředí – od simulace dat přes zachytávání interakcí až po nástroje pro pokročilou analýzu chování. 
-    - Nahrazení reálných dat fiktivními daty. + 
-    - Simulace chybových stavů nebo absence backendu. +=== Data mocking === 
-  * **Wizard-of-Oz**: + 
-    - Simulace neexistující funkcionality člověkem. +  * Data mocking nahrazuje reálná data fiktivními, čímž umožňuje testování v situacích, kdy ještě neexistuje backend, API nebo validní datové sady. 
-    - Umožňuje testovat např. hlasové ovládání bez jeho implementace. +  * Lze využít k simulaci specifických scénářů – např. chybových stavů, prázdných vstupů, nestandardního chování systému. 
-  * **Sběr dat**: +  * Umožňuje testovat UI nezávisle na aktuálním stavu backendu (lo-fi i hi-fi prototypy). 
-    - **Základní** – videozáznamy, dotazníky, pozorování. + 
-    - **Pokročilé** – logy, eye-tracking, senzory, KLM model, Android Monkey. +=== Wizard-of-Oz metoda === 
-  * **Testování bez uživatele**: + 
-    - **Heuristická evaluace** – podle pravidel (např. Nielsen). +  * Tato metoda spočívá v tom, že části systému, které ještě nejsou implementovány (např. hlasové rozpoznání), jsou skrytě obsluhovány člověkem. 
-    - **Kognitivní průchod** – simulace mentálního modelu uživatele krok po kroku. +  * Uživatel je často přesvědčen, že interaguje s plně funkčním systémem – získáme tak autentickou zpětnou vazbu na nové koncepty a interakce. 
-  * **Co testovat**: +  * Použití např. u testování dialogových agentů, asistentů do aut nebo komplexních rozhraní. 
-    - Funkčnost, dostupnost komponent, dokončení úkolů, chybovost, čitelnost.+  * Umožňuje testovat i náročné technologie bez nutnosti jejich okamžité realizace. 
 + 
 +=== Sběr dat z testování === 
 + 
 +  * **Základní metody**: 
 +    * Videozáznam (1st-person, 3rd-person, screen recording) 
 +    * Poznámky pozorovatele 
 +    * Dotazníky před/po testování 
 +  * **Pokročilé metody**: 
 +    * **Logy** – záznam interakcí v systému (např. kliknutí, vstupy) 
 +    * **Eye-tracking** – sledování fixace očí, pozornosti uživatele 
 +    * **Senzory** – biometrie, prostředí 
 +    * **KLM model (Keystroke-Level Model)** – predikce doby interakce na základě základních operací (klik, psaní, mentální pauzy) 
 +    * **Android Monkey** – náhodné generování uživatelských akcí pro zátěžové testování 
 + 
 +=== Testování bez uživatele === 
 + 
 +  * Prováděno expertem bez přítomnosti reálného uživatele. Výhodou je rychlost a možnost aplikace v raných fázích vývoje. 
 +   
 +  * **Heuristická evaluace**: 
 +    * Hodnocení použitelnosti podle souboru heuristik (např. Nielsen – viditelnost stavu systému, konzistence, prevence chyb…). 
 +    * Vyžaduje více hodnotitelů – každý nezávisle identifikuje problémy a při konsolidaci se stanovuje závažnost. 
 + 
 +  * **Kognitivní průchod (Cognitive Walkthrough)**: 
 +    * Metoda simulující mentální proces uživatele – „co si myslí, že by měl udělat?“. 
 +    * Krok po kroku ověřuje, zda je rozhraní srozumitelné a odpovídá cílům uživatele. 
 +    * Klíčové otázky: 
 +      * Q0: Co chce uživatel dosáhnout? 
 +      * Q1: Bude správná akce zřejmá? 
 +      * Q2: Bude akce odpovídat uživatelskému záměru? 
 +      * Q3: Dostane uživatel srozumitelnou zpětnou vazbu? 
 + 
 +=== Co testovat === 
 + 
 +  * **Funkčnost** – fungují prvky správně, jak bylo navrženo? 
 +  * **Dostupnost komponent** – jsou všechny prvky dosažitelné (např. z pohledu přístupnosti)? 
 +  * **Dokončení úkolů** – lze úlohy dokončit s přiměřeným úsilím? 
 +  * **Chybovost** – kde může dojít ke zmatku nebo chybě? 
 +  * **Čitelnost a nalezitelnost** – lze rychle najít potřebné informace nebo ovládací prvky? 
 +  * **Použitelnost** – celková přívětivost, subjektivní spokojenost, intuitivnost rozhraní. 
  

Trace:

Navigation

Playground

QR Code
QR Code statnice:bakalar:b4b39iur (generated for current page)