Jan Brejcha: HCI, UX a Borgové - uživatelské rozhraní jako prostředek mezikulturní komunikace
-
Upload
uisk-ff-uk -
Category
Education
-
view
67 -
download
2
Transcript of 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
úterý, 5. května 15
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 :)
úterý, 5. května 15
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
úterý, 5. května 15
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
úterý, 5. května 15
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
úterý, 5. května 15
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
úterý, 5. května 15
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
úterý, 5. května 15
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
úterý, 5. května 15
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
úterý, 5. května 15
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
úterý, 5. května 15
Úvod
Data Fakta Myšlení/design
Obraz reality/ideologie
Forma/design
Jazyk/kultura
Informace Jazyk/UI Interakce
úterý, 5. května 15
Základy výzkumu:HCI/UX ze sémiotické perspektivy
úterý, 5. května 15
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)
úterý, 5. května 15
Sci-fi: Stargate
úterý, 5. května 15
Wikipediaúterý, 5. května 15
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
úterý, 5. května 15
Webshots: bhbplus
úterý, 5. května 15
Memory-alpha.org
úterý, 5. května 15
Jazyk/kultura > realita > interakce
UI architektura interakce
úterý, 5. května 15
ece.ubc.caúterý, 5. května 15
Rosetta stone
Wikipedia
úterý, 5. května 15
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ů.
úterý, 5. května 15
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.
úterý, 5. května 15
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.
úterý, 5. května 15
úterý, 5. května 15
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).
úterý, 5. května 15
Wikipedia
úterý, 5. května 15
Memory-alpha.org
úterý, 5. května 15
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.
úterý, 5. května 15
úterý, 5. května 15
úterý, 5. května 15
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)
úterý, 5. května 15
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.
úterý, 5. května 15
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)
úterý, 5. května 15
Noun
Verb
úterý, 5. května 15
úterý, 5. května 15
úterý, 5. května 15
úterý, 5. května 15
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ě.
úterý, 5. května 15
Alexanderúterý, 5. května 15
Alexanderúterý, 5. května 15
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).
úterý, 5. května 15
úterý, 5. května 15
úterý, 5. května 15
úterý, 5. května 15
Sample Adobe screen shot.
úterý, 5. května 15
PŘÍPADOVÁ STUDIEMezikulturní prvky UX:Výzkumná metoda a výsledky
úterý, 5. května 15
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
úterý, 5. května 15
Layout: Sémiotika prostoru
Source: Wikipedia
úterý, 5. května 15
Barva: Akce a emoce
12
Source: Google Images
úterý, 5. května 15
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.
úterý, 5. května 15
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
úterý, 5. května 15
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
úterý, 5. května 15
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
úterý, 5. května 15
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
úterý, 5. května 15
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ě.
úterý, 5. května 15
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.
úterý, 5. května 15