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)