Jan Brejcha: HCI, UX a Borgové - uživatelské rozhraní jako prostředek mezikulturní komunikace

HCI, UX a Borgové: UI jako prostředek
mezikulturní komunikace
Jan 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-ﬁ
• Studium: Humanitní vědy, Mediální komunikace a sémiotika
• Práce: Business developer (strojírenská ﬁrma), 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í, deﬁnovat 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 ﬁlozoﬁe 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
Includes a novel design and evaluation method for HCI and UX
Provides a detailed explanation of the differences between current
expert evaluation methods and the presented semiotic method
Offers a usable set of design and evaluation heuristics
Explains how to conduct quantitative and qualitative analyses to
support decisions about cross-cultural design and evaluation
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
• Deﬁnováním nejmenších smysluplných jednotek UI zakládáme
abecedu vizuálního a interakčního jazyka
• Pro kombinaci jednotek UI deﬁnujeme 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 agens
5

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

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

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é konﬁgurace komponentů UI jazyka v
různých prostředích.

vzorce
diskrétní prvky
interakční věta
narace
rétorické tropy

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

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

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 ﬁxed.” (Walton and Banaji, 2004)

Noun
Verb

Vzorce
• Patterny (vzorce) jsou typické konﬁgurace 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í speciﬁckých problémů.
• Různé vzorce fungují v různých kulturách odlišně.

Alexander

Vzorce a kultury
• Jednoduché vzorce (sledující jednoduché interakční hry) lze mezi
kulturami převádět snadno.
• Komplexní vzorce (často sledující speciﬁcké interakční hry) by měly
zohlednit rozdíly ve struktuře cílové kultury a jazyka (mentalita).

PŘÍPADOVÁ STUDIE
Mezikulturní 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

Vzhled a funkce: affordance
Source: author’s archive

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-ﬂow 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 ﬁrst (relating
to the user’s gender, or size), followed by an implied Verb and adverb (purpose), and ﬁnally 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
e-mail: jan@brejcha.name
Děkuji

Jan Brejcha: HCI, UX a Borgové - uživatelské rozhraní jako prostředek mezikulturní komunikace

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (12)

Similar to Jan Brejcha: HCI, UX a Borgové - uživatelské rozhraní jako prostředek mezikulturní komunikace

Similar to Jan Brejcha: HCI, UX a Borgové - uživatelské rozhraní jako prostředek mezikulturní komunikace (20)

More from ÚISK FF UK

More from ÚISK FF UK (20)

Jan Brejcha: HCI, UX a Borgové - uživatelské rozhraní jako prostředek mezikulturní komunikace