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 13:48] – [Validace uživatelského vstupu] 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 111: Line 102:
 === Ukázky použití (XAML) === === Ukázky použití (XAML) ===
  
-  * **Tlačítko s obrázkem a textem**: +**Tlačítko s obrázkem a textem**: 
-    ```xml +<markdown> 
-    <Button HorizontalAlignment="Center" VerticalAlignment="Center"> +```xaml 
-      <StackPanel Orientation="Horizontal"> +<Button HorizontalAlignment="Center" VerticalAlignment="Center"> 
-        <Image Source="icon.png" Height="32" Width="32"/> +  <StackPanel Orientation="Horizontal"> 
-        <TextBlock Text="Settings" VerticalAlignment="Center"/> +    <Image Source="icon.png" Height="32" Width="32"/> 
-      </StackPanel> +    <TextBlock Text="Settings" VerticalAlignment="Center"/> 
-    </Button> +  </StackPanel> 
-    ```+</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 220: Line 220:
 === Ukázky použití === === Ukázky použití ===
  
-  * **Validace pomocí výjimek** +**Validace pomocí výjimek** 
-    <TextBox.Text> +<markdown> 
-      <Binding Path="Age"> +```xaml 
-        <Binding.ValidationRules> +<TextBox.Text> 
-          <ExceptionValidationRule /> +  <Binding Path="Age"> 
-        </Binding.ValidationRules> +    <Binding.ValidationRules> 
-      </Binding> +    <ExceptionValidationRule /> 
-    </TextBox.Text>+  </Binding.ValidationRules> 
 +</Binding> 
 +``` 
 +</markdown>
  
-  * **Validace pomocí `IDataErrorInfo`** +**Validace pomocí `IDataErrorInfo`** 
-    * <TextBox Text="{Binding Name, ValidatesOnDataErrors=True}" />+<markdown> 
 +```xaml 
 +<TextBox Text="{Binding Name, ValidatesOnDataErrors=True}" /> 
 +``` 
 +</markdown>
  
-  * **Vlastní validační pravidlo** +**Vlastní validační pravidlo** 
-    public class JpgValidationRule : ValidationRule { +<markdown> 
-        public override ValidationResult Validate(object value, CultureInfo cultureInfo) { +```xaml 
-            string path = value as string; +public class JpgValidationRule : ValidationRule { 
-            if (!path.EndsWith(".jpg")) +  public override ValidationResult Validate(object value, CultureInfo cultureInfo) { 
-                return new ValidationResult(false, "Soubor musí být ve formátu JPG."); +    string path = value as string; 
-            return new ValidationResult(true, null); +      if (!path.EndsWith(".jpg")) 
-        } +        return new ValidationResult(false, "Soubor musí být ve formátu JPG."); 
-    } +    return new ValidationResult(true, null); 
- +  } 
-  * **Zobrazení chyby pomocí Triggeru** +} 
-    <Style TargetType="TextBox"> +``` 
-      <Style.Triggers> +</markdown> 
-        <Trigger Property="Validation.HasError" Value="true"> +     
-          <Setter Property="ToolTip" +**Zobrazení chyby pomocí Triggeru** 
-                  Value="{Binding RelativeSource={RelativeSource Self}, +<markdown> 
-                                 Path=(Validation.Errors)[0].ErrorContent}" /> +```xaml 
-        </Trigger> +<Style TargetType="TextBox"> 
-      </Style.Triggers> +  <Style.Triggers> 
-    </Style>+    <Trigger Property="Validation.HasError" Value="true"> 
 +      <Setter Property="ToolTip" 
 +              Value="{Binding RelativeSource={RelativeSource Self}, 
 +                      Path=(Validation.Errors)[0].ErrorContent}" /> 
 +    </Trigger> 
 +  </Style.Triggers> 
 +</Style> 
 +``` 
 +</markdown>
  
  
Line 259: 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: • b6b36omo • b0b35apo

Navigation

Playground

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