Návrhové vzory v grafickém rozhraní

Martin Kopta

Historie

Christopher Alexander americký architekt A Pattern Language: Towns, Buildings,

Construction (1977)

Definice

Návrhový vzor Obecný návod pro řešení problému, který

se běžně vyskytuje Pattern language

Kontext Popis problému Řešení

Příklad – instalace programu

Kontext Uživatel potřebuje nainstalovat program.

Instalace vyžaduje nakopírování několika souborů na různá místa v souborovém systému, změnu nastavení operačního systému, vytvoření zástupců a zaznamenání změn pro snadné odinstalování.

Příklad – instalace programu

Popis problému Uživatel nemusí být obeznámený s tím,

kam ukládat soubory a jak pozměnit nastavení systému.

Uživatel může při komplexním úkolu udělat chybu, která má za následek nemožnost použít instalovaný program, případně i poškodí souborový nebo operační systém.

Příklad – instalace programu

Řešení Instalace s použitím wizardu (průvodce). Průvodce provede uživatele všemi kroky

postupně, nakopíruje soubory, změní nastavení systému a vytvoří zástupce pro snadné spuštění, a zároveň zaznamená kroky pro návrat do původního stavu před instalací.

Pattern versus styleguide

Styleguide je přesný popis (barvy, velikosti, tvary) řešení

Obvykle je doprovozený implementací (knihovnou).

Pattern versus opisování

Gmail – štítky Google Mapy – ajax

Výhody a nevýhody

Výhody Zjednodušení práce Omezení rizika chyby Konzistence (migrace uživatelů)

Nevýhody Inovace Nevhodné vzory

Přežité vzory

Zdroje

Designing Interfaces: Patterns for Effective Interaction Design http://designinginterfaces.com

Design Patterns http://www.welie.com/

Hillside Group http://hillside.net/

http://www.hcipatterns.org/

Zdroje

Richard P. Gabriel – Patterns of Software: Tales from the Software Community http://www.dreamsongs.com/NewFiles/Pat

ternsOfSoftware.pdf Patterns, Design Patterns, and HCI

Patterns http://www.mprove.de/script/04/hcipatterns

/

Děkuji za pozornost

Martin Koptamartin.kopta@garcon.cz