Infokon 2010: Jan Brejcha

Validace sémiotické analýzy uživatelských rozhraní jako metody pro expertní evaluaceMgr. Jan Brejcha, 15.11.2010Studia nových médií, ÚISK FF UK

pondělí, 15. listopadu 2010

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


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


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


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


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


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ě


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.


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


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


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í


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čí


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...".


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


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)


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


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.


http://www.aber.ac.uk/media/Documents/S4B/




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.


http://www.useit.com/papers/heuristic/heuristic_list.html




Dě[email protected]://jan.brejcha.name


mailto:[email protected]

mailto:[email protected]

http://jan.brejcha.name

http://jan.brejcha.name

Date post:	18-Jan-2015
Category:	Education
Upload:	kisk-ff-mu
View:	732 times
Download:	3 times

Infokon 2010: Jan Brejcha

Education