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/17 21:13] – 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 15: Line 15:
 ==== Implementace MVVM modelu ==== ==== Implementace MVVM modelu ====
  
-  * **Oddělení logiky a prezentace**: MVVM (Model-View-ViewModel) je klíčový architektonický vzor pro oddělení prezentační vrstvy od logiky. +Model–View–ViewModel (MVVM) je architektonický vzor navržený pro moderní GUI aplikace (zejména WPF, .NET MAUI, Xamarin). Jeho hlavní výhodou je důsledné oddělení prezentační logiky od vzhledu (UI), což usnadňuje údržbu, testování a opětovné použití kódu. 
-    - ViewModel zprostředkovává data z Modelu do View pomocí bindingu. + 
-    - View obsahuje XAML s `DataContext` napojeným na ViewModel. +  * **Model** – Obsahuje samotná data a logiku aplikace. Může zahrnovat přístup k databázi, validaci či výpočty. Je zcela nezávislý na UI. 
-  * **Návrhové vzory**: +  * **ViewModel** – Představuje most mezi UI a Modelem. Obsahuje data upravená pro View, implementuje `INotifyPropertyChanged` pro upozornění na změny a definuje příkazy (`ICommand`) pro reakce na uživatelské akce. 
-    - **Observer** – Model oznamuje změny ViewModelu. +  * **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. 
-    - **Event-Delegate** – C# implementace observeru přes delegáty. +  * {{:statnice:bakalar:pasted:20250518-130657.png?400}} 
-    - **Publish-Subscribe** – nezávislé komponenty komunikují přes event kanál. + 
-  * **Data Binding**: +=== Klíčové návrhové vzory použité v MVVM === 
-    - `{Binding PropertyName}`, `INotifyPropertyChanged`, `ICommand`, `RelayCommand`. + 
-    - Podpora dvoucestné synchronizace dat mezi View a ViewModel.+  * **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`. 
 +    * {{:statnice:bakalar:pasted:20250518-130822.png?400}} 
 + 
 +  * **Event–Delegate Mechanismus (C#)**   
 +    * Delegáty a eventy implementují observer pattern. `event` je seznam metod (delegátů), které jsou spuštěny při určité události (např. změna hodnoty).   
 +    * `delegate` definuje typ metody pro zpracování události   
 +    * `event` reprezentuje událost (např. kliknutí na tlačítko)   
 +    * `EventHandler` a `PropertyChangedEventArgs` jsou běžně používané standardizované typy 
 + 
 +  * **Publish–Subscribe Pattern**   
 +    * Zajišťuje volné provázání komponent: *publishers* posílají zprávy, *subscribers* se přihlásí k typům zpráv, které je zajímají. Obě strany o sobě navzájem neví. To usnadňuje rozšiřitelnost a škálovatelnost, i když složitost správy zpráv může být vyšší. 
 +    * {{:statnice:bakalar:pasted:20250518-130137.png?300}} 
 + 
 +  * **Data Binding Pattern**   
 +    Umožňuje synchronizaci dat mezi View a ViewModel. Implementuje se pomocí: 
 +    * XAML bindingu (`{Binding PropertyName}`) 
 +    * `INotifyPropertyChanged` (vlastnosti ve ViewModelu vyvolávají notifikace) 
 +    * `DataContext` – nastavuje výchozí zdroj dat pro binding v UI 
 +    * *{{:statnice:bakalar:pasted:20250518-130609.png?300}} 
 +    * {{:statnice:bakalar:pasted:20250518-130944.png?300}} 
 + 
 +  * **Command Pattern (`ICommand`)**   
 +    * Abstrahuje uživatelské akce do objektů – například kliknutí na tlačítko nespouští metodu přímo, ale přes `ICommand`.   
 +    * `Execute()` definuje, co se má stát   
 +    * `CanExecute()` určuje, zda je příkaz aktuálně povolen   
 +    * Často se používá `RelayCommand` nebo `DelegateCommand` pro jednoduchou implementaci bez nutnosti psát nové třídy pro každou akci
  
 ==== Přizpůsobení UI komponent ==== ==== Přizpůsobení UI komponent ====
  
-  * **Styly a triggery**: +Přizpůsobení (customization) UI komponent umožňuje upravit vzhled i chování ovládacích prvků tak, aby odpovídaly požadavkům aplikace, designéra nebo platformy. Díky tomu lze dosáhnout konzistentního vizuálního stylu, přístupnosti i přívětivosti pro uživatele. V prostředí WPF nebo MAUI se přizpůsobení realizuje pomocí stylů, šablon, triggerů a dvou typů komponent: `UserControl` a `CustomControl`. 
-    - `Style` – kolekce setterů, separace vzhledu od logiky. + 
-    - `Trigger` – mění vlastnosti na základě stavu (např. `IsMouseOver`). +=== Styly a triggery === 
-    - `DataTrigger`, `EventTrigger` – specifické reakce na změny dat a události. + 
-  * **Šablony**: +  * **Style** 
-    - `DataTemplate` – vizualizace datových objektů (např. ListBox). +    * Style je kolekce `Setter` prvků, která definuje vzhled komponenty – např. barvu pozadí, font, velikost nebo jiné vizuální vlastnosti. 
-    - `ControlTemplate` – změna vizuálního stromu komponenty. +    * Umožňuje oddělit vzhled od logiky, podobně jako CSS v HTML. 
-    - `ContentTemplate` – kombinace obrázků a textu v tlačítkách. +    * Každý `Style` může být uložen jako `StaticResource` a znovu použit na více prvcích. 
-  * **User Control vs Custom Control**: + 
-    - *User Control* – složení komponent, snadné, nelze stylovat. +  * **Triggers** 
-    - *Custom Control* – pokročilé přizpůsobení, stylování a šablonování. +    * Triggery umožňují změnit vlastnosti komponenty na základě určité podmínky. 
-  * **Ukázky použití (z XAML)**: +    * Typy triggerů: 
-    - Tlačítko s obrázkem a textem. +      - `PropertyTrigger`: aktivuje se při změně vlastnosti (např. `IsMouseOver == true`). 
-    - Styl s `StaticResource`. +      - `DataTrigger`: aktivuje se při změně vázaných dat (např. hodnota z ViewModelu). 
-    - Triggery pro zvýraznění při hoveru.+      - `EventTrigger`: reaguje na události (např. kliknutí), často spouští animace. 
 +    * Když přestanou platit podmínky triggeru, změny se automaticky vrací zpět. 
 + 
 +=== Šablony (Templates) === 
 + 
 +  * **DataTemplate** 
 +    * Definuje vizualizaci datového objektu – např. jak bude vypadat každá položka v `ListBoxu`. 
 +    * Umožňuje změnit strom vizuálních prvků zobrazených pro konkrétní datovou instanci. 
 +    * Využívá se typicky pro seznamy (`ItemsControl`, `ListView`, `ComboBox`). 
 + 
 +  * **ControlTemplate** 
 +    * Umožňuje kompletně změnit vzhled a strukturu ovládacího prvku, ale zachovává jeho funkčnost. 
 +    * Nahrazuje celý strom komponenty (např. tlačítko může být vykresleno jako kruh). 
 +    * Používá `TemplateBinding` pro přístup k hodnotám vlastností rodičovského prvku. 
 + 
 +  * **ContentTemplate** 
 +    * Používá se u prvků jako `ContentControl` (např. `Button`), když chceme vnořit složitější obsah (např. obrázek + text). 
 +    * Kombinuje různé prvky (např. `Image`, `TextBlock`) a určuje, jak se data mají zobrazit. 
 + 
 +=== Přizpůsobení komponent: UserControl vs CustomControl === 
 + 
 +  * **UserControl** 
 +    * Kombinuje více existujících ovládacích prvků do jednoho bloku. 
 +    * Používá se, pokud potřebujeme opakovat určitý kus UI napříč aplikací. 
 +    * Implementace je snadná (XAML + code-behind), ale omezená: nelze stylovat pomocí `ControlTemplate`. 
 + 
 +  * **CustomControl** 
 +    * Dědí z existující komponenty (např. `Button`) nebo vytváří zcela novou. 
 +    * Umožňuje stylování, šablonování i override chování – plná kontrola nad vzhledem a interakcí. 
 +    * Používá se pro tvorbu opakovatelně použitelných, plně stylovatelných komponent. 
 +    * Vyžaduje definici ve `Themes/Generic.xaml` + třídu v C#. 
 + 
 +=== Ukázky použití (XAML) === 
 + 
 +**Tlačítko s obrázkem a textem**: 
 +<markdown> 
 +```xaml 
 +<Button HorizontalAlignment="Center" VerticalAlignment="Center"> 
 +  <StackPanel Orientation="Horizontal"> 
 +    <Image Source="icon.png" Height="32" Width="32"/> 
 +    <TextBlock Text="Settings" VerticalAlignment="Center"/> 
 +  </StackPanel> 
 +</Button> 
 +``` 
 +</markdown> 
 + 
 +**Styl se StaticResource**: 
 +<markdown> 
 +```xaml 
 +<Window.Resources> 
 +      <Style x:Key="ButtonStyle" TargetType="Button"> 
 +        <Setter Property="Background" Value="LightBlue"/> 
 +        <Setter Property="FontWeight" Value="Bold"/> 
 +      </Style> 
 +  </Window.Resources> 
 +<Button Style="{StaticResource ButtonStyle}" Content="Styled Button"/> 
 +``` 
 +</markdown> 
 + 
 +**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> 
 + 
 +**Custom seznam s `DataTemplate`**: 
 +<markdown> 
 +```xaml 
 +<ListBox> 
 +  <ListBox.ItemTemplate> 
 +    <DataTemplate> 
 +      <StackPanel> 
 +        <TextBlock Text="{Binding Name}"/> 
 +        <TextBlock Text="{Binding Description}"/> 
 +      </StackPanel> 
 +    </DataTemplate> 
 +  </ListBox.ItemTemplate> 
 +</ListBox> 
 +``` 
 +</markdown> 
 + 
 +**Použití `ContentTemplate` v tlačítku**: 
 +<markdown> 
 +```xaml 
 +<Button> 
 +  <Button.ContentTemplate> 
 +    <DataTemplate> 
 +      <StackPanel Orientation="Horizontal"> 
 +        <Image Source="{Binding Image}" Width="16" Height="16"/> 
 +        <TextBlock Text="{Binding Text}"/> 
 +      </StackPanel> 
 +    </DataTemplate> 
 +  </Button.ContentTemplate> 
 +</Button> 
 +``` 
 +</markdown> 
 + 
 +=== Skins a Themes === 
 + 
 +  * **Skins** 
 +    * Kolekce stylů pro celou aplikaci. Umožňuje dynamicky měnit vzhled za běhu aplikace. 
 +    * Používá `DynamicResource` a přepínání zdrojů ve `ResourceDictionary`. 
 + 
 +  * **Themes** 
 +    * Respektují systémové nastavení (např. dark/light mode). 
 +    * Používají se pro přístupnost, škálování, barevné schéma apod.
  
 ==== 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 61: 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)