Validace sémiotické analýzy uživatelských rozhraní jako metody pro expertní evaluace

1. Validace sémiotické
analýzy uživatelských
rozhraní jako metody
pro expertní evaluace
Mgr. Jan Brejcha, 15.11.2010
Studia nových médií, ÚISK FF UK
pondělí, 15. listopadu 2010

2. Sémiotický základ
• Sémiotikou máme na mysli teorii znaků
• Znak je “něco, co něco jiného
zastupuje” (C.S.Peirce)
• Je třeba brát v úvahu 4 znakové roviny:
• Pragmatická: zabývá se psychologickými, biologickými a
sociologickými důsledky použití znaků
• Sémantická: zabývá se významem či znakovou akcí
• Syntaktická: zabývá se vztahy mezi znaky (syntax)
• Lexikální: zabývá se fyzickými omezeními při tvorbě znaků
• Pragmatika: vztahy uživatele – uživatelského
rozhraní (UI) a vztahy designéra – UI –
uživatele
pondělí, 15. listopadu 2010

3. Gramatika interakce: Prvky
• Interakční sémiotika je založena na sledu prvků
v čase a zaměřuje se na syntax:
• Viditelného jazyka: proč a jak je informace prezentována
• Interakčního jazyka: proč, jak a kdy je informace prezentována
• Prvky interakčního jazyka:
• Diskrétní prvky: nejmenší smysluplné jednotky (např. stisk tlačítka
myši)
• Interakční věty: smysluplné jednotky popisující část interakce se
systémem
• Interakční rétorické tropy: použití prostředků náhrady (např. metafory),
implikované akce (tažení dokumentu na koš pro odstranění,
persuaze)
• Interakční jazykové tropy/hry: uzavřená jednotka interakce sestávající
ze sady interakčních vět
• Vyprávění/narace: pořadí vnímání prvků UI, designérovo poselství
• Interakční fáze: začátek, prostředek a konec interakce
• Vzorce interakce: opakující se struktury prvků interakčního jazyka
pondělí, 15. listopadu 2010

4. Gramatika interakce
• Určuje pravidla interakčních řetězců:
• Co lze zřetězit v příčinné interakční jednotce
• Jak to lze zřetězit
• Za jakým účelem to můžeme zřetězit
• Analýza interakční gramatiky pomáhá vylepšit
konzistenci interakce s UI
• Upřednostněním konzistence pomáhá budovat
očekávání
• Omezení posilují interakční gramatiku. Jsou:
• Fyzická: affordance
• Logická: uvažování
• Kulturní: konvence
pondělí, 15. listopadu 2010

5. Analýza a anotace UI
• Pro analýzu viditelných a interakčních vztahů v
sadě UI je třeba extrahovat vnitřní gramatiku,
která tvoří jeho “jazyk UI”
• Strategie:
• Formální textová anotace (např. BNF, TAG)
• Viditelná anotace (např. vzorce, zápis pohybu)
• Přepis interakce (např. scénař)
• Sémiotická analýza využívá strukturovaný
přepis interakce, který je založený na
interakčních větách
• Výsledný přepis sloužil jako vstup pro
následnou expertní evaluaci
pondělí, 15. listopadu 2010

6. Evaluační metoda: Přehled
• Dostupné expertní evaluační metody:
• Kognitivní průchod (cognitive walkthrough)
• Heuristická evaluace (heuristic evaluation, HE: naše volba)
• Expertní inspekce (expert inspection)
• Sémiotická analýza (semiotic analysis, SA: naše volba)
• Proces evaluace:
• Vyhodnotit dvě UI za použití HE a SA
• Porovnat výstupní data z každé metody; pro toto porovnání jsme
zvolili dvě komplexní aplikace pro grafický design, Adobe Photoshop a
GIMP
pondělí, 15. listopadu 2010

7. Metoda: Heuristická evaluace 1/2
• “Heuristická evaluace je diskontní metoda
použitelnosti pro rychlé, levné a jednoduché
vyhodnocení UI” (Nielsen)
• Hlavní cíl:
• Detailně určit částečná nebo úplná selhání použitelnosti (vč. úspěchů)
• Neformální poměřování vůči principům použitelnosti
• Určení neformálního stupně závažnosti porušení těchto principů
• Výhody:
• HE umí zachytit významné chyby, významné úspěchy, doporučit
zlepšení a pořadí kroků k nápravě
pondělí, 15. listopadu 2010

8. Metoda: Heuristická evaluace 2/2
• 16 použitých kritérií HE (dle AM+A)
• Estetická integrita a minimalistický design
• Konzistence a standardy
• Přímá manipulace / “Koukni a ukaž” (See and point)
• Prevence chyb
• poskytnutí zpětné vazby a zviditelnění stavu systému
• Fittův zákon
• Flexibilita a účinnost použití
• Nápovědy a dokumentace
• Napomáhat uživatelům rozpoznat, určit a zotavit se z chyb
• Čitelnost / hustota informací
• Shoda mezi systémem a skutečným světem
• Vyloučení modální interakce
• Vnímaná stabilita
• Přednost rozpoznání před vzpomínáním
• Plná kontrola a svoboda uživatele
• Viditelné rozhraní / WYSIWYG.
pondělí, 15. listopadu 2010

9. Metoda: Sémiotická analýza 1/2
• SA se zaměřuje na znaky přítomné v UI a
extrahuje kódy v pozadí, které vytvářejí (nebo
narušují) jejich význam
• Hlavní cíl:
• Určit konvence v pozadí
• Určit významné diference a opozice
• Modelovat systémové kategorie, konotace, distinkce a pravidla pro
kombinování jednotlivých prvků (Chandler)
• Výhody:
• Poskytuje více vhledu, zaznamenává více kompatibilních dat zpři
nižších nákladech
• Vhodnější pro mezikulturní srovnávání
• Srozumitelnější pro účastníky
• Existuje množství předchozích dat a příkladů analýzy
pondělí, 15. listopadu 2010

10. Metoda: Sémiotická analýza 2/2
• 6 kritérií použitých v SA:
• Uživatelé a systém (audience a paradigma)
• Symboly
• Syntax
• Rétorické tropy
• Interakční fáze
• Vzorce
pondělí, 15. listopadu 2010

11. Korpus UI: Výběr pro pilotní studii
• Pro výběr pracovní sady UI je třeba vybrat
vzorový materiál k analýze: korpus UI
• Studie porovnala UI Adobe Photoshopu CS2 a
GIMPu 2.6.7 (na Mac OS X 10.5.8)
• Korpus má být co nejvíce homogenní (časově i
obsahem, Barthes)
• Studie se zaměřila na funkce komerčně
prezentované, stejně jako základní funkce, které
uživatelé pravděpodobně použijí
pondělí, 15. listopadu 2010

12. Korpus UI: Analyzované funkce
• Výběr 5 funkcí sdílených v obou UI:
• Souběžně s analýzou těchto funkcí:
• Přepis krok za krokem souvisejících procesů (interakční věty)
• Provedení HE a SA každého UI
Popis funkce Název ve Photoshopu Název v GIMPu
Soudkovité zkreslení Optická korekce objektivu Klonování perspektivy
Klonování objektů v perspektivě Úběžný bod Klonování perspektivy
Kustomizace UI Menu přizpůsobení Nastavit klávesové zkratky
Odstranění objektu Opravný štětec Nástroj klonování
Omezení efektu červených očí Nástroj červených očí na jedno
kliknutí
Odstranění červených očí
pondělí, 15. listopadu 2010

13. Korpus UI: Příklad interakčních vět
pro Adobe Photoshop, 1/2
• (0) Otevřít obrázek k úpravě
• (1) Najít vhodné funkce v menu nebo paletě
nástrojů
• (a) Jako podúkol, prohledat paletu nástrojů pro tlačítko připomínající
zamýšlené akce. (Nic vhodného nebylo nalezeno.)
• (b) Alternativně, prohledat položky v menu (zejména to, co se zdálo,
že souvisí nejvíce: Obrázek -> Úpravy, Úpravy -> Filtr) pro příslušný
příkaz. (Bylo to nalezeno pod Filtr -> Úběžný bod...)
• Objeví se okno s názvem "Úběžný bod", které obsahuje živý náhled,
dále mj. "Nástroj vytvoření roviny" a "Nástroj klonování”.
• (2) Klepnout na čtyři rohy podle informativního
textu
• Objeví se nápověda: "Kliknutím na čtyřech rozích roviny perspektivy
nebo objektu v obrázku vytvořit rovinu pro úpravu. Odtrhněte kolmé
roviny z protahovacích bodů stávajících...".
pondělí, 15. listopadu 2010

14. Korpus UI: Příklad interakčních vět
pro Adobe Photoshop, 2/2
• (3) Vybrat "Nástroj klonování"
• (4) Alt-klik v rovině pro nastavení zdroje.
• Objeví se nápověda: "Alt + klepněte v rovině pro nastavení
zdrojového bodu pro klonování. Jakmile je zdrojový bod nastaven,
klepnout na tlačítko + táhněte myší pro malování nebo klonování.
Shift + kliknout na prodloužení čáry do bodu posledního kliknutí."
• (5) Kliknout + táhnout (pro malování) několikrát
pro klonování v perspektivě
• (6) Klepnutím na tlačítko
"OK" se změny provedou
• (7) Uložit změny v souboru
pondělí, 15. listopadu 2010

15. Korpus UI: Výsledky HE a SA
• Výsledky HE
• Kratší, ze 16 heuristik se vždy použilo menší množství
• Metodu by bylo možno použít nejen na úrovni interakčních vět, ale i
celého UI
• Výsledky SA
• Výsledky byly popisnější
• Všechna kritéria bylo možno použít pokaždé
• V některých případech se nálezy opakovaly
• Přinesly solidní kontext pro analýzu
• Metoda by mohla porovnat UI z různých časových období a ukázat
změny paradigmatu, syntaxe a dalších
• Metoda ukázala žánry interakce i na tak malém vzorku (úprava
obrázků vs. modifikace samotného UI)
pondělí, 15. listopadu 2010

16. Budoucí výzkum
• Porovnat vzorce interakce uživatelů rozdílných
kultur
• Vizualizovat interakční vzorce jednotlivých prvků
gramatiky
• Rozšířit kritéria SA, vytvořit sémiotické
heuristiky
pondělí, 15. listopadu 2010

17. Bibliografie, 1/2
• Alexander, C., S. Ishikawa, and M. Silverstein (1978, August). A Pattern
Language: Towns, Buildings, Construction (Center for Environmental
Structure Series). Oxford University Press.
• Backus et al. (1963) “Revised report on the algorithm language ALGOL
60”. Communications of the ACM. vol. 6 (1)
• Buchler, J. (1955). Philosophical writings of Peirce. Dover.
• Brejcha, J., and Marcus, A. (2009). Semiotics of Interaction. Aaron
Marcus and Associates, Inc. Berkeley. Whitepaper.
• Chandler, D. (2001). Semiotics for Beginners. <http://www.aber.ac.uk/
media/Documents/S4B/>, accessed 20Sep09.
• Haan, De, G. (2000). ETAG, a Formal Model of Competence Knowledge
for User Interface Design. dspace.ubvu.vu.nl. Dissertation.
pondělí, 15. listopadu 2010

18. Bibliografie, 2/2
• Nielsen, J. (2005). “Ten Usability Heuristics”. UseIt.com. <http://
www.useit.com/papers/heuristic/heuristic_list.html>, accessed 24Dec09.
• Norman, D. A. (1999). "Affordance, conventions, and design”.
Interactions, 38-41.
• Marcus, A. (2009). Integrated Information Systems: A Professional Field
for Information Designers.” Information Design Journal, 17:1, July 2009,
pp. 4-21. Copyright 2009 by Benjamin Publishing, Amsterdam,
Netherlands.
• Marcus, A. (1997). “AM+Aʼs UI Design Heuristics”. Aaron Marcus and
Associates, Inc. Berkeley.
• Morris, C. W. (1970). Foundations of the Theory of Signs. The University
of Chicago Press.
pondělí, 15. listopadu 2010

19. Děkuji
jan.brejcha@ff.cuni.cz
http://jan.brejcha.name
pondělí, 15. listopadu 2010