jan brejcha: hci, ux a borgové - uživatelské rozhraní jako prostředek mezikulturní komunikace

HCI, UX a Borgové: UI jako prostředek mezikulturní komunikaceJan Brejcha, Ph.D.HCI/UX konzultant a lektor

ÚISK FF UK, 4.5.2015

úterý, 5. května 15

Obsah

• Aktuální projekty• Základy výzkumu: HCI/UX ze sémiotické perspektivy• Mezikulturní prvky UX: Výzkumná metoda a výsledky

2


Jan Brejcha

• Vášeň: interakce člověka a stroje, sci-fi• Studium: Humanitní vědy, Mediální komunikace a sémiotika• Práce: Business developer (strojírenská firma), konzultant/lektor

(HCI/UX)• Konference: Board member (Design, UX, Usability @HCI

International), a organizátor sekcí (2013 Las Vegas, 2014 Kréta, 2015 Los Angeles)

• Zájmy: Design, UI, Persuasion technology, Čína :)


Výzkumné projekty

• Pravidla UI design pro čínské uživatele • Jazyk interakce člověka s počítačem• Ideologie UI ideology of the user interface (persvaze, temné

patterny)• Sémiotika a použitelnost• Sémiotika jako expertní evaluační metoda

4


Přednášky a kurzy

• Principy interaktivní tvorby• cíl: vytvořit maketu jednoduchého ale inovativního průvodce

Prahou• techniky: jak pracovat se vstupními požadavky, jak zjistit potřeby

uživatelů, jak určit sadu funkcí, definovat scénář použití, sestavit maketu, prezentace designového procesu

• Mobile UX Design• Zvané přednášky a workshopy

5


Konzultace

• Projekty HCI/UX designu• UI/UX design a uživatelské testování webového portálu NFA

(2014).• Redesign webu GHMP založený na konverzační metafoře (2011).

• Expertní analýzy• Heuristická evaluace SIS Karlovy univerzity (2012).• Expertní analýza customer journey Samoobsluhy Vodafone Czech

Republic (2010). • Konzultace projektu “Multimediální školky”, AVU (2009).• Konzultace a SWOT analýza dětského portálu Ententýky (2008).• Sémiotická analýza uvažované služby pro Vodafone Czech

Republic of a (2008).6


HCI Almanach: Uživatelsky přívětivá rozhraní• Publikováno 2009• První publikace svého druhu mapující

UX badatele a designéry v ČR• Obsahuje články 17 autorů z různých

akademických center a společností• Témata od filozofie interakce po

advokáty UX přístupu


Cross-cultural HCI/UX: A semiotic perspective• Publikováno 2015• Obsahuje novátorskou metodu HCI/UX

designu a evaluace• Vysvětluje rozdíly mezi stávajícími

expertními evaluačními metodami a sémiotickou metodou

• Obsahuje použitelnou sadu heuristik pro design a evaluaci

• Ukazuje, jak vést kvantitativní a kvalitativní analýzu pro podporu rozhodování o mezikulturních variantách designu

• Nabízí výsledky mezikulturního průzkumu a designová pravidla pro design IT produktů a služeb pro různé kultury


Cross-Cultural Human-Computer Interaction and User Experience Design

A Semiotic Perspective

Author/Affiliation

Jan Brejcha, Charles University in Prague, Czech Republic

This book describes patterns of language and culture in human-computer interaction (HCI). Through numerous examples, it shows why these patterns matter and how to exploit them to design a better user experience (UX) with computer systems. It provides scientific information on the theoretical and practical areas of the interaction and communication design for research experts and industry practitioners and covers the latest research in semiotics and cultural studies, bringing a set of tools and methods to benefit the process of designing with the cultural background in mind.

Key Features x Includes a novel design and evaluation method for HCI and UX x Provides a detailed explanation of the differences between current

expert evaluation methods and the presented semiotic method x Offers a usable set of design and evaluation heuristics x Explains how to conduct quantitative and qualitative analyses to

support decisions about cross-cultural design and evaluation x Offers results from a cross-cultural test and presents guidelines for

design of different IT products and services for different cultures

Selected Contents Introduction. Semiotics of interaction. Summary. Semiotic foundation. UI Languages. Research Methods. UI Annotation and Analysis Results. Discussion, Future Work. Ideology of Interaction. Summary. Rhetoric of UI Languages. Ideology and HCI. Conclusion. Culture of Interaction. Summary. Comparison of UI Languages. Research Methods. Interview and Results Analysis. Proposed Guidelines for Chinese UI Design. Discussion, conclusion. Conclusion. References. Appendices.

SAVE

20%

SAVE 20% when you order online and enter Promo Code AQP60 FREE standard shipping when you order online.

Catalog no. K24618 February 2015, 206 pp.

ISBN: 978-1-4987-0257-7 $89.95 / £57.99


Teze 1: UI je prostředkem sdílení a interpretace informace mezi systémy• Naše myšlení a potažmo jednání je vedeno logickými pravidly, která

jsou podpořena systémem jazyka a kultury• Jazyková a kulturní pravidla otevírají tvůrčí prostor pro design HCI• Definováním nejmenších smysluplných jednotek UI zakládáme

abecedu vizuálního a interakčního jazyka• Pro kombinaci jednotek UI definujeme gramatiku, která umožňuje

jejich řetězení do větších celků (vět, vzorců, narace, …)• Sledujeme hypotézu: Bude-li struktura UI podobná struktuře

přirozeného jazyka, HCI bude srozumitelnější, a potažmo efektivnější• Proto sémiotika a lingvistika může pomoci řešit problémy designu a

vyhodnocení jazyku UI• Zaměřuje to naši pozornost na uživatele jako součást jejich kultury, a

ne jako na kultuře nezávislého agens5


Teze 2: Každý znak v HCI je kulturní, a tudíž i informační• UI se zaměřuje na čtení a zapisování kulturních dat

• Přirozený jazyk a kultura uživatele determinuje jeho mentalitu, racionalitu a obraz světa

• V každém systému významů (jazyky, UI) zdůrazňujeme různé předměty a zkušenosti, což přináší různý vhled

• UI tak mohou podporovat nebo zabraňovat kulturní různorodosti

9


Úvod

Data Fakta Myšlení/design

Obraz reality/ideologie

Forma/design

Jazyk/kultura

Informace Jazyk/UI Interakce


Základy výzkumu:HCI/UX ze sémiotické perspektivy


UI jako brána/firewall

"The interface is this state of 'being on the boundary.' It is that moment where one significant material is understood as distinct from another significant material. In other words, an interface is not a thing; an interface is always an effect. It is always a process or a translation."

(Galloway, 2009)

UI nám říká nejen, jak číst informaci, ale dopředu informace selektuje:• UI tak zprostřekovává objekt/ideu. (Heidegger, 2004;

Derrida, 1993)• UI tak vždy zprostředkovaný objekt/ideu privileguje. (Derrida,

1993)


Sci-fi: Stargate


Wikipediaúterý, 5. května 15

Jazyk

• Přirozený jazyk vytváří mentální modely pomocí gramatiky, čímž vedou naše vnímání a myšlení

• Každý jazyk vyjadřuje objekt myšlení jinak• Every language repeats “different language habits of a community

and determines certain interpretations over others” (Sapir-Whorf)

18


Webshots: bhbplus


Memory-alpha.org


Jazyk/kultura > realita > interakce

UI architektura interakce


ece.ubc.caúterý, 5. května 15

Rosetta stone

Wikipedia


Semiotický rámec pro UI Design

• UI je příkladem komplexního “jazyka” a lze jej konstruovat pomocí (logických) gramatických pravidel.

• Sémiotika: Teorie o znacích a jejich kombinaci (gramatice).

• Znak: “Something that stands for someone or something in some respect or capacity” (C.S. Peirce).

4 sémiotické rozměry:• Pragmatický: psychologické,

biologické a sociologické důsledky použití znaků. Zaměřuje se vztahy uživatel-UI a uživatel-UI-designér.

• Sémantický: význam, odkaz nebo akce.

• Syntaktický: vztahy mezi znaky.• Lexikální: fyzické limity tvorby

znaků.


Komponenty UI jazyka, 1/2

Komponenty UI jazyka sledují gramatická pravidla podobná přirozenému jazyku:• Diskrétní elementy jsou nejnmenšími smysluplnými prvky. Tvoří

stavební kameny UI.• Interakční věta je smyslupná jednotka popisující úkol během

uživatelské interakce. Sada vět se stejným cílem tvoří interakční hru. Interakční věty umožňují interakci uživatele s UI.

• Narace je v UI tvořena designérovou metakomunikací a časovým aspektem vnímání prvků UI. Narace představuje postupně odhalovanou argumentaci designéra a podporuje tak persvazi.


Komponenty UI jazyka, 2/2

• Rétorické tropy jsou prostředky persvaze a zdůraznění pomocí technik prezentace. Často je tvoří metafory, ale také prvky stylu a vzhledu.

• Patterny (vzorce) jsou typické konfigurace komponentů UI jazyka v různých prostředích.


vzorce

diskrétní prvky

interakční větanarace

rétorické tropyúterý, 5. května 15

Diskrétní elementy

• Diskrétní elementy jsou nejnmenšími smysluplnými prvky. Tvoří stavební kameny UI.

• Diskrétní elementy představují všechny prvky, se kterými lze interagovat (tlačítka, vstupní pole, šipky, atp.) nebo které prezentují informace (např. statusové ikony, rozvržení obrazovky, barvy).

• I na této nízké úrovni musí prvky komunikovat svou funkci prostřednictvím affordancí (vnímaných i fyzických) a limitů. Limity jsou fyzické, logické a kulturní. (Norman, 2002).


Wikipedia


Memory-alpha.org


Interakční věta

• Interakční věta je smyslupná jednotka popisující úkol během uživatelské interakce. Sada vět se stejným cílem tvoří interakční hru. Interakční věty umožňují interakci uživatele s UI.

• Věty jsou vždy utvořeny podmětnou částí (např. ikona) a přísudkovou částí (např. akce).

• Věty jsou založeny na programové logice dané platformy.• Věta by měla sledovat očekávání komunikovaná diskrétními prvky.


Příklad interakční věty

Interakční hra:• Uspat počítač.

Interakční věta:• Ikona + akce• Kliknout na start. Zvolit vypnout. Kliknout na spát.

Diskrétní prvky:• Ikony (podmět)• Akce (přísudek)


Narace

• Narace je v UI tvořena designérovou metakomunikací a časovým aspektem vnímání prvků UI. Narace představuje postupně odhalovanou argumentaci designéra a podporuje tak persvazi.

• Designérovu meta-komunikaci (De Souza, 2005) představují text v hláškách, popiscích, nápovědě a dokumentaci. Uživatel tak komunikuje s designérem v momentě interakce s UI.

• Narace má i vizuální aspekt - prvky na obrazovce čteme v pořadí, ve kterém poutají naší pozornost.


Interakce jako konverzace

St. Martin's Theatre, 1923úterý, 5. května 15

Rétorické tropy

• Rétorické tropy jsou prostředky persvaze a zdůraznění pomocí technik prezentace. Často je tvoří metafory, ale také prvky stylu a vzhledu.

• Použitý jazyk ovlivňuje postoje: slovesa vyvolávají akci, ale podstatná jména vyvolávají pocit náležitosti (silnější).

• “When people characterize a preference with a relatively abstract noun label (instead of a descriptive action verb), they mark that preference as an essential aspect of their identity.” (Walton and Banaji, 2004)

• “For example, a student who categorizes herself as ‘a bad student’ (rather than as having ‘done poorly’) may view her intellectual capability as fixed.” (Walton and Banaji, 2004)


Noun

Verb


Vzorce

• Patterny (vzorce) jsou typické konfigurace komponentů UI jazyka v různých prostředích.

• Poprvé rozpoznány v architektuře a urbanizmu Christopherem Alexanderem (1979)

• Podobně jako v architektuře, tak i v interakčním designu stavíme na osvědčených vzorcích pro řešení specifických problémů.

• Různé vzorce fungují v různých kulturách odlišně.


Alexanderúterý, 5. května 15

Vzorce a kultury

• Jednoduché vzorce (sledující jednoduché interakční hry) lze mezi kulturami převádět snadno.

• Komplexní vzorce (často sledující specifické interakční hry) by měly zohlednit rozdíly ve struktuře cílové kultury a jazyka (mentalita).


Sample Adobe screen shot.


PŘÍPADOVÁ STUDIEMezikulturní prvky UX:Výzkumná metoda a výsledky


Otázky

• Jak validovat výsledky předchozího výzkumu?• Co všechno je třeba vzít v úvahu při designu testu?

53


Layout: Sémiotika prostoru

Source: Wikipedia


Barva: Akce a emoce

12

Source: Google Images


Symboly: kód ikon

18

Source: author’s archiveúterý, 5. května 15

Vzhled a funkce: affordance

Source: author’s archiveúterý, 5. května 15

Výsledky

• Zjistili jsme silný vliv globalizace na kulturní markery, zejm. kvůli používání stejných SW platforem.

• Odhalili jsme mnoho důležitých rozdílů založených v kultuře ve srovnávaných populacích týkajících se: prostorového rozložení informací, tvarů, směru čtení, pohybu, barvy a barevných kombinací, použití ikon a metafor, uživatelských preferencí vůči typům médií, kulturním prvkům v UI a komiksových postav, důvěryhodnosti obsahu, navigačních prvků, viditelná a interakční gramatika menu a povelů.

• Téměř polovina (22) hypotéz byla plně potvrzena, 17 částečně a 14 hypotéz nebylo validováno.


Supported hypotheses, 1/2

Layout• Given information (familiar, agreed upon) is expected on the right of the screen• A central composition is regarded more aesthetically pleasing than triptych composition• Even number of elements is more preferred than odd number. Ideal is 8. • Images placed symmetrically in the middle look better than on the left/right of the screen• Free-flow layout is easier to use than grid-based layout• Users tend to read from top-left towards the center of the screen• Left-to-right lines of text are easier to read than top-to-bottom and right-to-left• There is a close similarity between sequential information structure in language and horizontal structure in visual

composition• Curves stand for softness (and would be better perceived), while straight lines for hardness• Rounded corners (curvilinear patterns) are better perceived than square corners (geometrical patterns)• Copied elements are better perceived than original elements• Icons presenting objects with a description are more understandable than those without a description.

Color• Users would prefer lighter (pastel) colors, white background • Personal websites would use a wider color palette than websites for other purposes.

26


Supported hypotheses, 2/2

Symbol• Icons presenting situations are more intuitive than those containing objects. The Czech sample preferred image

icons to those presenting situations, in contrast with the Chinese results.• There is a close similarity between sequential information structure in language and horizontal structure in visual

composition. Verb (pointer index) and adverb (“+” sign) would mimic their position in sentence (i.e., the verb comes before the adverb).

• Users can recognize visual patterns occurring in the UI. • Copied elements are better perceived than original elements• The sequence of input in faceted search follows the sequence of natural language. the Subject comes first (relating

to the user’s gender, or size), followed by an implied Verb and adverb (purpose), and finally the Object (price, color, rating, etc.). In contrast to the Chinese results, the Czech respondents would put size after gender (instead of purpose), purpose instead of price, and price as the last, omitting thus color and rating.

• The use of Chinese calligraphy is very praised by the users.

Look & feel• Menus starting with a verb are considered more natural than those starting with nouns. Although noun and verb

menu was regarded as easy to understand, a verb-driven menu was preferred, in that it showed a clear purpose to the user. In contrast, the Czech sample expressed a strong preference towards nouns, as these were the most intelligible.

• Cartoon imagery (little animals) plays an important role in communication. The cartoons improve users’ mood, and help recall different applications better than characters.

27


Cross-cultural Design Guidelines, 1/2

1. Important information should appear in the top-left corner or in the middle-center of the screen.

2. New (or problematic) information should appear in the middle-center or top-center of the screen.

3. Given (or familiar) information should appear in the bottom-right or middle-right of the screen. 4. Ideal (or general) information should appear in the middle-left or top-left of the screen. 5. Real (or detailed) information should appear in the middle-center or middle-left of the screen. 6. Images should be placed in the middle-left or top-right corner of the screen. 7. Put information meant to be easily noticed in the middle-center or top-left corner of the

screen. 8. Carefully choose the images: they start the visual narration on the screen, followed by titles. 9. The layout should allow for a central composition (1-column, 3-column, central layout). 10. The layout should follow the golden ratio (4: 3, or 16: 9). 11. Design the layout to be read from left to right. New information should come from the right. 12. Layout dividers should be straight, windows should have rounded corners and icons should

be rounded. 13. UIs should use common patterns so that users can transfer their knowledge from other UIs.

28


Cross-cultural Design Guidelines, 2/2

14. Use blue, purple, aqua (cyan), and gray (silver) for background color. 15. Use light pastel colors on a white background. 16. Use black, blue, and lime for foreground color. 17. Put more important information on the foreground. 18. For commercial websites, use the combination of white, silver and black. For personal websites white, blue,

black and aqua. Lime and fuchsia would also be well received. For educational websites use white, blue and black. For governmental websites use white, red and black.

19. Do not put yellow text on red background. 20. Use silver on black, blue on lime, black on white. 21. Use icons containing characters and images. 22. Place icon attributes on the right from the icon. 23. Create shorter pages with fewer contexts. 24. Search facets should follow the order of the natural language (Subject, verb, object). 25. For the highest acceptance and credibility, use pictorial media (images, videos). 26. Above all, the UI should be fast (responsive) and usable as well as aesthetic. 27. When suitable, use Chinese calligraphy elements (readable is better). 28. Form menus from verbs, submenus from nouns. Alternatively, use a combination of verbs and nouns. 29. To improve users’ mood and recall use, cartoon imagery in the UI.

29


Závěr

• Kdykoli je to možné, používejte zřetelný interakční jazyk.• Gramatika interakce napomáhá vytvořit žádoucí mentální model UI. • Mentální model je podpořen konzistencí a očekáváním.• Rozdílné kultury chápou znaky, pojmy, slovesa a objekty různě.


Zdroje

BREJCHA, Jan. Cross-Cultural Human-Computer Interaction and User Experience Design: A Semiotic Perspective. CRC Press, Taylor & Francis Group, LLC, Boca Raton, London, New York. 2015. ISBN 978–1−4987–0257–7. Available commercially from:http://www.crcpress.com/product/isbn/9781498702577.BREJCHA, Jan. Ideologies in HCI: A Semiotic Perspective. In: MARCUS, A., ed. “Design, User Experience, and Usability. Theories, Methods, and Tools for Designing the User Experience”, Part I, HCII 2014, LNCS 8517, pp. 45-–54. Springer, Switzerland, 2014. DOI:http://dx.doi.org/10.1007/978-3-319-07668-3_5. Available also from: http://jan.brejcha.name/research/brejcha_2014_hciiideology.pdf.BREJCHA, Jan and MARCUS, Aaron. Semiotics of Interaction: Towards a UI Alphabet. In: KUROSU, M., ed. Human-Computer Interaction, Part I, HCII 2013, LNCS 8004, pp. 13-−21. Springer, Heidelberg, 2013. DOI: http://dx.doi.org/10.1007/978-3-642-39232-0_2. Available also from:http://jan.brejcha.name/research/brejcha_2013_hciisemiotics.pdf.BREJCHA, Jan et al. A Cross-cultural comparison of UI components preference between Chinese and Czech users. In: RAU, P.L.P., ed. Cross-Cultural Design/HCII 2013, Part I, LNCS 8023, pp. 357–365. Springer, Heidelberg, 2013. DOI: http://dx.doi.org/10.1007/978-3-642-39143-9_40. Available also from: http://jan.brejcha.name/research/brejcha_2013_hciixcult.pdf.


http://jan.brejcha.name/Main/Cross-cultural-human-computer-interaction-and-user-experience-design




http://www.crcpress.com/product/isbn/9781498702577




http://dx.doi.org/10.1007/978-3-319-07668-3_5

http://dx.doi.org/10.1007/978-3-319-07668-3_5

http://jan.brejcha.name/research/brejcha_2014_hciiideology.pdf




http://dx.doi.org/10.1007/978-3-642-39232-0_2

http://dx.doi.org/10.1007/978-3-642-39232-0_2

http://jan.brejcha.name/research/brejcha_2013_hciisemiotics.pdf

http://jan.brejcha.name/research/brejcha_2013_hciisemiotics.pdf

http://dx.doi.org/10.1007/978-3-642-39143-9_40

http://dx.doi.org/10.1007/978-3-642-39143-9_40

http://dx.doi.org/10.1007/978-3-642-39143-9_40

http://dx.doi.org/10.1007/978-3-642-39143-9_40

http://jan.brejcha.name/research/brejcha_2013_hciixcult.pdf




http://jan.brejcha.namee-mail: [email protected]

Děkuji


http://jan.brejcha.name

http://jan.brejcha.name

mailto:[email protected]

mailto:[email protected]

jan brejcha: hci, ux a borgové - uživatelské rozhraní jako prostředek mezikulturní komunikace

Education