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:26] – [Přizpůsobení UI komponent] 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 184: Line 184:
 ==== Validace uživatelského vstupu ==== ==== Validace uživatelského vstupu ====
  
-  * **Metody validace**: +Validace vstupu zajišťuje, že data zadaná uživatelem odpovídají očekávanému formátu, rozsahu či logickým podmínkám. WPF nabízí robustní validační mechanismy přímo integrované do systému data bindingu. 
-    - `ExceptionValidationRule` – validace přes výjimky. + 
-    - `IDataErrorInfo` / `INotifyDataErrorInfo` – chybová zpráva per vlastnost. +=== Metody validace === 
-    - **Custom ValidationRule** – dědění a vlastní logika validace. + 
-  * **Zobrazení chyb**: +  * **ExceptionValidationRule** 
-    - `ErrorTemplate` – šablona zobrazení chybového stavu. +    * Validace probíhá tak, že se při aktualizaci datové vlastnosti očekává možná výjimka – pokud k ní dojde, binding ji zachytí a označí vstup jako chybný. 
-    - `Style.Triggers` na `Validation.HasError` – tooltipy, změna barvy rámečku. +    * Vhodné pro základní typové validace, např. převod `string` na `int`. 
-  * **Principy**: + 
-    - Validace má být srozumitelná, neinvazivní, integrovaná do UI.+  * **IDataErrorInfo / INotifyDataErrorInfo** 
 +    * Implementace těchto rozhraní ve ViewModelu umožňuje kontrolu jednotlivých vlastností a vracení chybových zpráv. 
 +    * `IDataErrorInfo` umožňuje jednoduchou synchronní validaci pomocí indexeru `this[string propertyName]`. 
 +    * `INotifyDataErrorInfo` podporuje i asynchronní validaci a vícenásobné chyby na jedné vlastnosti – hodí se pro složitější scénáře. 
 + 
 +  * **Custom ValidationRule** 
 +    * Vytvořením vlastní třídy, která dědí z `ValidationRule`, lze implementovat složitější validační logiku. 
 +    * Třída implementuje metodu `Validate`, která vrací `ValidationResult`, obsahující boolean a případné chybové hlášení. 
 +    * Umožňuje znovupoužití pravidla pro více polí nebo v různých částech aplikace. 
 + 
 +=== Zobrazení chyb === 
 + 
 +  * **ErrorTemplate** 
 +    * Speciální `ControlTemplate`, který se použije při zobrazení chyby. Typicky obsahuje vizuální zpětnou vazbu (červený rámeček, ikona, tooltip). 
 +    * Uvnitř šablony se používá `AdornedElementPlaceholder`, který nahrazuje původní prvek a zobrazuje chybu ve stejné pozici. 
 + 
 +  * **Style.Triggers na `Validation.HasError`** 
 +    * Pomocí `Trigger` lze změnit vzhled komponenty při výskytu chyby – např. zobrazit tooltip s chybou, změnit barvu okraje nebo pozadí. 
 +    * Dynamická prezentace chybových hlášek: např. bindingem na `Validation.Errors[0].ErrorContent`. 
 + 
 +=== Principy použitelné validace === 
 + 
 +  * Validace má být **srozumitelná** – uživatel musí pochopit, co je špatně a jak to opravit. 
 +  * Má být **neinvazivní** – chyba by neměla přerušit práci, ale měla by být patrná a opravitelná. 
 +  * Validace by měla být **integrovaná do UI** – přímo u daného vstupu, nikoliv jako oddělené hlášení. 
 + 
 +=== Ukázky použití === 
 + 
 +**Validace pomocí výjimek** 
 +<markdown> 
 +```xaml 
 +<TextBox.Text> 
 +  <Binding Path="Age"> 
 +    <Binding.ValidationRules> 
 +    <ExceptionValidationRule /> 
 +  </Binding.ValidationRules> 
 +</Binding> 
 +``` 
 +</markdown> 
 + 
 +**Validace pomocí `IDataErrorInfo`** 
 +<markdown> 
 +```xaml 
 +<TextBox Text="{Binding Name, ValidatesOnDataErrors=True}" /> 
 +``` 
 +</markdown> 
 + 
 +**Vlastní validační pravidlo** 
 +<markdown> 
 +```xaml 
 +public class JpgValidationRule : ValidationRule { 
 +  public override ValidationResult Validate(object value, CultureInfo cultureInfo) { 
 +    string path = value as string; 
 +      if (!path.EndsWith(".jpg")) 
 +        return new ValidationResult(false, "Soubor musí být ve formátu JPG."); 
 +    return new ValidationResult(true, null); 
 +  } 
 +} 
 +``` 
 +</markdown> 
 +     
 +**Zobrazení chyby pomocí Triggeru** 
 +<markdown> 
 +```xaml 
 +<Style TargetType="TextBox"> 
 +  <Style.Triggers> 
 +    <Trigger Property="Validation.HasError" Value="true"> 
 +      <Setter Property="ToolTip" 
 +              Value="{Binding RelativeSource={RelativeSource Self}, 
 +                      Path=(Validation.Errors)[0].ErrorContent}" /> 
 +    </Trigger> 
 +  </Style.Triggers> 
 +</Style> 
 +``` 
 +</markdown> 
  
 ===== 2. Příprava uživatelského rozhraní pro testování s/bez uživatele ===== ===== 2. Příprava uživatelského rozhraní pro testování s/bez uživatele =====
Line 199: 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: • b4b39iur

Navigation

Playground

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