SlideShare a Scribd company logo
1 of 32
xCulture – Cross-cultural UX Elements:
Research Method and Design Guidelines
Jan Brejcha
Prague, Czech Republic
UX Camp Europe 2014
Berlin, 7.6.2014
Research rationale
• By defining a usable set of UI design guidelines for a target culture,
designers could market their products with lower costs and with better
acceptance.
• To achieve this goal we carried a pilot study targeted at the habits, mental
models and UI preferences of Chinese and Czech users.
• To uncover the sense-making processes of the users, we chose to work
from the semiotic perspective.
• We used semiotic methods to build a common framework to gather and
analyze cross-cultural data. From our perspective, the UI is an example of
complex language. Consequently, in our research we focused on different
components of the UI language.
2
UI language components
• UI grammar is composed of basic elements: interaction sentence,
interaction games, rhetorical tropes, interaction phases, and patterns. The
grammar elements concern both the noun and verb phrase of a sentence.
• Discrete elements are the smallest elements to have a meaning.
• Interaction sentence is a meaningful unit describing a task in a user's
interaction. A set of interaction sentences with the same goal form an
interaction game.
• Narrative in UI is made both by the designer’s meta-communication and the
temporal aspect of perceiving UI elements.
• Rhetorical tropes are devices of persuasion and emphasis, often
presented as metaphors.
• Patterns are typical configurations of UI language components in different
settings
3
Researching locally
• Tests should be done locally to prevent users to absorb the majority culture
• Test with a local moderator, sharing the language and cultural background.
• (Smith, 2011)
Source: author’s archive
Research steps
• Defined research questions
• Defined hypotheses about the Chinese users
• Built a questionnaire of ~50 questions for user interviews using an online
reporting tool (surveygizmo.com)
• Wrote a recruiting screener and set up a recruiting form
• Wrote a recruiting letter and distributed through social networks
(renren.com, qzone.qq.com)
• Interviewed 20 Chinese and 20 Czech respondents
5
Recruiting screener
The respondents would have to:
•be born and raised in China
•belong to the Chinese culture (have Chinese parents/mother tongue)
•be evenly split between males and females
•be evenly split between bachelor's and master's students
•be evenly split between living in large cities and the countryside
•have different computer knowledge level
•have different English language level
6
User interview setup
• Users were presented with a questionnaire of ~50 questions divided into
groups: personal info, layout, color, symbols, look&feel
• The questionnaire was supported by a moderator, who would give the
necessary background to the user, and present him/her a choice of
images/color samples, when appropriate
• The testing was carried out in the user lab, with a note-taker sitting besides
the moderator
• The user has been taped by 3 cameras and his/her voice recorded
• Supportive note-taking (2-3 people), and/or observation has been done in an
adjacent room
• As a data-collecting and reporting platform we chose SurveyGizmo.com
• One session took about 90 min
• After each testing day data from the note-takers was checked and merged
with the data on the server
• Czech interview was computer supported by SurveyGizmo.com
7
Layout: Semiotics of space
Source: Wikipedia
Reading Images
Source: Kress and Van Leeuwen: Reading images
Ideal
Given
Margin
Real
Given
Margin
Ideal
New
Margin
Real
Given
Margin
Centre
Layout: information given (1/2)
• Hypothesis: New information (key, unknown) is expected on the left, given
information (familiar, agreed upon) on the right of the screen
• Question: On a screen, where would you place familiar, taken-for-granted,
unproblematic information? (e.g., read message, my own login
information/picture, friends list)
10
Layout: information given (2/2)
11
Chinese
Czech
Color: Actions and emotions
12
Source: Google Images
Color: metaphors and preference (1/5)
• Hypothesis: Users would prefer lighter shades, combination of pastel colors
• Question: Please select, which (background/foreground) color do you like
the most
13
Source: Wikipedia
Color: metaphors and preference (2/5)
• Background colors (Chinese, Czech):
14
Color: metaphors and preference (3/5)
• Foreground colors (Chinese, Czech):
15
Color: metaphors and preference (4/5)
• Black: some users think it is easy to match with the background color. it is
obvious and clear.
• Blue: the users choose Blue as foreground color also connect with the
website they are familiar. they think it is comfortable watch for a long time.
• Lime: the users feel it is quiet, comfortable, clear, and fresh; it looks like
grass, make the user more vital.
• White: Most users choose white for the background, and most of them
consider that this color is clear and also suitable as the background color.
Some users are used to use white as the background and they think white
can be a good match with other colors, and at the same time, can’t lose
color itself.
• Aqua: 15 percent users chose aqua. Users consider aqua to be clear, and it
is neither drab nor flowery. When users see aqua, they feel comfortable and
refreshing.
16
Color: metaphors and preference (5/5)
• Question: Would you prefer a lighter or darker color (chroma)?
• Results (Chinese, Czech):
17
Symbols: Iconic language
18
Source: author’s archive
Symbols: nouns and adjectives (1/2)
• Hypothesis: There is a close similarity between sequential information
structure in language and horizontal structure in visual composition. Noun
(folder) and adjective (star attribute) would mimic their position in
sentence.
• Question: An attribute shows additional features the object can have (type of
actions or kind of object). When looking at a folder, where would you expect
the attribute to appear: (left/right/top/bottom)
19
Symbols: nouns and adjectives (2/2)
20
• Results (Chinese, Czech):
Look&feel: object affordances
Source: author’s archive
Look&feel: verb menus (1/3)
• Hypothesis: Menus starting with a verb are considered more natural than
those starting with nouns
• Question: (At a gallery website) Which of the following combination of menu
items do you find more natural?
22
Look&feel: verb menus (2/3)
• Results (Chinese, Czech):
23
Look&feel: verb menus (3/3)
• How would the menu unfold? Most users think the secondary menu
should be noun for three main reasons. 1) noun represents the object
being operated. 2) some users think the first menu should be verb. Verb
shows actions. Noun shows target. 3) the first menu is verb used to search.
Noun shows the objects.
• Some users think the secondary menu should be verb with noun because
it can thus express its purpose more conveniently.
• Some users think the secondary menu should be verb for three reasons: 1)
first menu is noun. Noun shows the destination. Verb shows actions. 2) first
menu is noun. Noun is interesting and attractive. Then verb shows the
functions. 3) verb should be completed.
• Many users think the drop-down list is more natural. Only 1 user think the
secondary menu can just list horizontally.
24
Results
• We encountered a strong influence of globalization on the cultural
markers, mainly through the use of common software platforms.
• We found still many important culture-specific differences in both groups
which are related to: spatial organization of information, shapes, direction of
reading, motion, color, color combinations, semantic organization of content,
use of icons and metaphors, user's preferences for different types of media,
preference for culture-specific content and for cartoon imagery,
trustworthiness of the content, navigation tools, visible and interaction
grammar of menus and commands.
• Almost half (22) of our hypotheses were fully supported by the results
from individual questions, 17 were partly supported, 14 hypotheses were not
supported.
25
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, fol-lowed 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
Acknowledgements
• Prof. Zhengjie Liu
• Gong Hong Yin, Han Li
• Sun Wenxin, Ma Yin, Zhou Yongjie, Xiao Sheng, Xiang Yong
• SEUC staff and students
30
References
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
KRESS, Gunther and VAN LEEUWEN, Theo. Reading images: the grammar of visual design. 2nd ed. London:
Routledge, 2006, xv, 291 p. ISBN 0415319153.
SMITH, Andy. Issues in adapting usability testing for global usability. In: Global Usability. Springer London, 2011.
p. 23-38. DOI: http://dx.doi.org/10.1007/978-0-85729-304-6_3
31
xCulture – Cross-cultural UX Elements:
Research Method and Design Guidelines
Jan Brejcha, Ph.D.
Tel: +420 602 277 588
Email: Jan@Brejcha.name
Web: Jan.Brejcha.name

More Related Content

Viewers also liked

Communication Barriers
Communication BarriersCommunication Barriers
Communication BarriersDilip Kumar
 
Developing Intercultural Competence of Global Leader: An Action Learning Appr...
Developing Intercultural Competence of Global Leader: An Action Learning Appr...Developing Intercultural Competence of Global Leader: An Action Learning Appr...
Developing Intercultural Competence of Global Leader: An Action Learning Appr...Hora Tjitra
 
Robbins eob9 inst_ppt_10
Robbins eob9 inst_ppt_10Robbins eob9 inst_ppt_10
Robbins eob9 inst_ppt_10leng81287
 
Languages and Intercultural Communication: Psychology Perspective
Languages and Intercultural Communication: Psychology PerspectiveLanguages and Intercultural Communication: Psychology Perspective
Languages and Intercultural Communication: Psychology PerspectiveHora Tjitra
 
Segura nas mãos de deus eda carneiro da rocha
Segura nas mãos de deus eda carneiro da rochaSegura nas mãos de deus eda carneiro da rocha
Segura nas mãos de deus eda carneiro da rochaLuzia Gabriele
 
KBCS Summit 2015_Succesvolle start-ups aan de KU Leuven_Bart De Moor
KBCS Summit 2015_Succesvolle start-ups aan de KU Leuven_Bart De MoorKBCS Summit 2015_Succesvolle start-ups aan de KU Leuven_Bart De Moor
KBCS Summit 2015_Succesvolle start-ups aan de KU Leuven_Bart De MoorBolero Crowdfunding
 
SVMN October 2007 Meeting - Calvert Foundation & eBay Microplace (Shari Beren...
SVMN October 2007 Meeting - Calvert Foundation & eBay Microplace (Shari Beren...SVMN October 2007 Meeting - Calvert Foundation & eBay Microplace (Shari Beren...
SVMN October 2007 Meeting - Calvert Foundation & eBay Microplace (Shari Beren...Dave McClure
 
Parenting in digital world
Parenting in digital worldParenting in digital world
Parenting in digital worldDan Bowen
 
Caminos del Mundo - Meteor and triggering the WebRTC function
Caminos del Mundo  - Meteor and triggering the WebRTC functionCaminos del Mundo  - Meteor and triggering the WebRTC function
Caminos del Mundo - Meteor and triggering the WebRTC functionBart Uelen
 
You stink at email: Why spend time writing something nobody wants to read?
You stink at email: Why spend time writing something nobody wants to read? You stink at email: Why spend time writing something nobody wants to read?
You stink at email: Why spend time writing something nobody wants to read? Viqui Dill
 

Viewers also liked (17)

Em201432 bib1220scm
Em201432 bib1220scmEm201432 bib1220scm
Em201432 bib1220scm
 
Communication Barriers
Communication BarriersCommunication Barriers
Communication Barriers
 
Developing Intercultural Competence of Global Leader: An Action Learning Appr...
Developing Intercultural Competence of Global Leader: An Action Learning Appr...Developing Intercultural Competence of Global Leader: An Action Learning Appr...
Developing Intercultural Competence of Global Leader: An Action Learning Appr...
 
Robbins eob9 inst_ppt_10
Robbins eob9 inst_ppt_10Robbins eob9 inst_ppt_10
Robbins eob9 inst_ppt_10
 
Languages and Intercultural Communication: Psychology Perspective
Languages and Intercultural Communication: Psychology PerspectiveLanguages and Intercultural Communication: Psychology Perspective
Languages and Intercultural Communication: Psychology Perspective
 
Notacd04
Notacd04Notacd04
Notacd04
 
FIGUEROA CONSULTORES
FIGUEROA CONSULTORESFIGUEROA CONSULTORES
FIGUEROA CONSULTORES
 
High aspirations, stark realities
High aspirations, stark realitiesHigh aspirations, stark realities
High aspirations, stark realities
 
Segura nas mãos de deus eda carneiro da rocha
Segura nas mãos de deus eda carneiro da rochaSegura nas mãos de deus eda carneiro da rocha
Segura nas mãos de deus eda carneiro da rocha
 
Discovering the economics of pagume
Discovering the economics of pagumeDiscovering the economics of pagume
Discovering the economics of pagume
 
KBCS Summit 2015_Succesvolle start-ups aan de KU Leuven_Bart De Moor
KBCS Summit 2015_Succesvolle start-ups aan de KU Leuven_Bart De MoorKBCS Summit 2015_Succesvolle start-ups aan de KU Leuven_Bart De Moor
KBCS Summit 2015_Succesvolle start-ups aan de KU Leuven_Bart De Moor
 
SVMN October 2007 Meeting - Calvert Foundation & eBay Microplace (Shari Beren...
SVMN October 2007 Meeting - Calvert Foundation & eBay Microplace (Shari Beren...SVMN October 2007 Meeting - Calvert Foundation & eBay Microplace (Shari Beren...
SVMN October 2007 Meeting - Calvert Foundation & eBay Microplace (Shari Beren...
 
Take Command of the Interview
Take Command of the Interview Take Command of the Interview
Take Command of the Interview
 
Parenting in digital world
Parenting in digital worldParenting in digital world
Parenting in digital world
 
Caminos del Mundo - Meteor and triggering the WebRTC function
Caminos del Mundo  - Meteor and triggering the WebRTC functionCaminos del Mundo  - Meteor and triggering the WebRTC function
Caminos del Mundo - Meteor and triggering the WebRTC function
 
You stink at email: Why spend time writing something nobody wants to read?
You stink at email: Why spend time writing something nobody wants to read? You stink at email: Why spend time writing something nobody wants to read?
You stink at email: Why spend time writing something nobody wants to read?
 
Villa Verde
Villa VerdeVilla Verde
Villa Verde
 

Similar to xCulture – Cross-cultural UX Elements: Research Method and Design Guidelines

Semiotics of Interaction: Towards a UI Alphabet
Semiotics of Interaction: Towards a UI AlphabetSemiotics of Interaction: Towards a UI Alphabet
Semiotics of Interaction: Towards a UI AlphabetJan Brejcha
 
[DCSB] Gregory Crane, Stella Dee, Maryam Foradi, Monica Lent, Maria Moritz (U...
[DCSB] Gregory Crane, Stella Dee, Maryam Foradi, Monica Lent, Maria Moritz (U...[DCSB] Gregory Crane, Stella Dee, Maryam Foradi, Monica Lent, Maria Moritz (U...
[DCSB] Gregory Crane, Stella Dee, Maryam Foradi, Monica Lent, Maria Moritz (U...Digital Classicist Seminar Berlin
 
Visual in Instruction
Visual in InstructionVisual in Instruction
Visual in InstructionBong Reyes
 
The Relationship of Language and Development Level to User Satisfaction for a...
The Relationship of Language and Development Level to User Satisfaction for a...The Relationship of Language and Development Level to User Satisfaction for a...
The Relationship of Language and Development Level to User Satisfaction for a...Russ Merz, Ph.D.
 
The Regional Image: Interpreting the Visual Products of Regional Planning
The Regional Image: Interpreting the Visual Products of Regional PlanningThe Regional Image: Interpreting the Visual Products of Regional Planning
The Regional Image: Interpreting the Visual Products of Regional PlanningAlissa Barber Torres, PhD, AICP, PLS
 
Chinese UI design guidelines 2.0
Chinese UI design guidelines 2.0Chinese UI design guidelines 2.0
Chinese UI design guidelines 2.0Jan Brejcha
 
Recsys 2017 -- Understanding How People Use Natural Language to Ask for Recom...
Recsys 2017 -- Understanding How People Use Natural Language to Ask for Recom...Recsys 2017 -- Understanding How People Use Natural Language to Ask for Recom...
Recsys 2017 -- Understanding How People Use Natural Language to Ask for Recom...Max Harper
 
LIWC-ing at Texts for Insights from Linguistic Patterns
LIWC-ing at Texts for Insights from Linguistic PatternsLIWC-ing at Texts for Insights from Linguistic Patterns
LIWC-ing at Texts for Insights from Linguistic PatternsShalin Hai-Jew
 
Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Tania Schlatter
 
Sentiment Analysis with NVivo 11 Plus
Sentiment Analysis with NVivo 11 PlusSentiment Analysis with NVivo 11 Plus
Sentiment Analysis with NVivo 11 PlusShalin Hai-Jew
 
The Common Core State Standards
The Common Core State StandardsThe Common Core State Standards
The Common Core State StandardsSD Paul
 
GE TIG | When The Design Process Pays Off
GE TIG | When The Design Process Pays OffGE TIG | When The Design Process Pays Off
GE TIG | When The Design Process Pays Offwallory
 
Using Surveys to Improve Your Library: Part 2 (Sept. 2018)
Using Surveys to Improve Your Library: Part 2 (Sept. 2018)Using Surveys to Improve Your Library: Part 2 (Sept. 2018)
Using Surveys to Improve Your Library: Part 2 (Sept. 2018)ALATechSource
 
Topic 3 Human Computer Interaction
Topic 3 Human Computer InteractionTopic 3 Human Computer Interaction
Topic 3 Human Computer Interactionnur ezzaty
 
Getting To Know You
Getting To Know YouGetting To Know You
Getting To Know YouCandace Fox
 
Lessonplan peopleplaces
Lessonplan peopleplacesLessonplan peopleplaces
Lessonplan peopleplacesSusan Ferdon
 

Similar to xCulture – Cross-cultural UX Elements: Research Method and Design Guidelines (20)

Semiotics of Interaction: Towards a UI Alphabet
Semiotics of Interaction: Towards a UI AlphabetSemiotics of Interaction: Towards a UI Alphabet
Semiotics of Interaction: Towards a UI Alphabet
 
[DCSB] Gregory Crane, Stella Dee, Maryam Foradi, Monica Lent, Maria Moritz (U...
[DCSB] Gregory Crane, Stella Dee, Maryam Foradi, Monica Lent, Maria Moritz (U...[DCSB] Gregory Crane, Stella Dee, Maryam Foradi, Monica Lent, Maria Moritz (U...
[DCSB] Gregory Crane, Stella Dee, Maryam Foradi, Monica Lent, Maria Moritz (U...
 
Visual in Instruction
Visual in InstructionVisual in Instruction
Visual in Instruction
 
The Relationship of Language and Development Level to User Satisfaction for a...
The Relationship of Language and Development Level to User Satisfaction for a...The Relationship of Language and Development Level to User Satisfaction for a...
The Relationship of Language and Development Level to User Satisfaction for a...
 
Week 5 - Visual Principles
Week 5 - Visual PrinciplesWeek 5 - Visual Principles
Week 5 - Visual Principles
 
Let the Public and the Computer do the Metadata Work!
Let the Public and the Computer do the Metadata Work!Let the Public and the Computer do the Metadata Work!
Let the Public and the Computer do the Metadata Work!
 
The Regional Image: Interpreting the Visual Products of Regional Planning
The Regional Image: Interpreting the Visual Products of Regional PlanningThe Regional Image: Interpreting the Visual Products of Regional Planning
The Regional Image: Interpreting the Visual Products of Regional Planning
 
Chinese UI design guidelines 2.0
Chinese UI design guidelines 2.0Chinese UI design guidelines 2.0
Chinese UI design guidelines 2.0
 
Recsys 2017 -- Understanding How People Use Natural Language to Ask for Recom...
Recsys 2017 -- Understanding How People Use Natural Language to Ask for Recom...Recsys 2017 -- Understanding How People Use Natural Language to Ask for Recom...
Recsys 2017 -- Understanding How People Use Natural Language to Ask for Recom...
 
LIWC-ing at Texts for Insights from Linguistic Patterns
LIWC-ing at Texts for Insights from Linguistic PatternsLIWC-ing at Texts for Insights from Linguistic Patterns
LIWC-ing at Texts for Insights from Linguistic Patterns
 
Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...
 
Benoit Visual Only Retrieval
Benoit Visual Only RetrievalBenoit Visual Only Retrieval
Benoit Visual Only Retrieval
 
Sentiment Analysis with NVivo 11 Plus
Sentiment Analysis with NVivo 11 PlusSentiment Analysis with NVivo 11 Plus
Sentiment Analysis with NVivo 11 Plus
 
The Common Core State Standards
The Common Core State StandardsThe Common Core State Standards
The Common Core State Standards
 
GE TIG | When The Design Process Pays Off
GE TIG | When The Design Process Pays OffGE TIG | When The Design Process Pays Off
GE TIG | When The Design Process Pays Off
 
Using Surveys to Improve Your Library: Part 2 (Sept. 2018)
Using Surveys to Improve Your Library: Part 2 (Sept. 2018)Using Surveys to Improve Your Library: Part 2 (Sept. 2018)
Using Surveys to Improve Your Library: Part 2 (Sept. 2018)
 
Topic 3 Human Computer Interaction
Topic 3 Human Computer InteractionTopic 3 Human Computer Interaction
Topic 3 Human Computer Interaction
 
Digital Art History
Digital Art HistoryDigital Art History
Digital Art History
 
Getting To Know You
Getting To Know YouGetting To Know You
Getting To Know You
 
Lessonplan peopleplaces
Lessonplan peopleplacesLessonplan peopleplaces
Lessonplan peopleplaces
 

More from Jan Brejcha

Ideologies in HCI: A Semiotic Perspective
Ideologies in HCI: A Semiotic PerspectiveIdeologies in HCI: A Semiotic Perspective
Ideologies in HCI: A Semiotic PerspectiveJan Brejcha
 
Mezikulturní UX/UI očima sémiotiky: Jak designovat pro mimozemšťany?
Mezikulturní UX/UI očima sémiotiky: Jak designovat pro mimozemšťany?Mezikulturní UX/UI očima sémiotiky: Jak designovat pro mimozemšťany?
Mezikulturní UX/UI očima sémiotiky: Jak designovat pro mimozemšťany?Jan Brejcha
 
Hackers Congress v Paralelní Polis 17: „Liberate“, aneb za finanční svobodou ...
Hackers Congress v Paralelní Polis 17: „Liberate“, aneb za finanční svobodou ...Hackers Congress v Paralelní Polis 17: „Liberate“, aneb za finanční svobodou ...
Hackers Congress v Paralelní Polis 17: „Liberate“, aneb za finanční svobodou ...Jan Brejcha
 
Is there a token for that? Tokens demystified.
Is there a token for that? Tokens demystified.Is there a token for that? Tokens demystified.
Is there a token for that? Tokens demystified.Jan Brejcha
 
Financial literacy in China as an innovation opportunity
Financial literacy in China as an innovation opportunityFinancial literacy in China as an innovation opportunity
Financial literacy in China as an innovation opportunityJan Brejcha
 
Innovation potential of the blockchain, and of decentralized applications
Innovation potential of the blockchain, and of decentralized applicationsInnovation potential of the blockchain, and of decentralized applications
Innovation potential of the blockchain, and of decentralized applicationsJan Brejcha
 
Decentralized Autonomous Organizations: Concept & Practical Examples
Decentralized Autonomous Organizations: Concept & Practical ExamplesDecentralized Autonomous Organizations: Concept & Practical Examples
Decentralized Autonomous Organizations: Concept & Practical ExamplesJan Brejcha
 
Jazyk uzivatelskeho rozhrani
Jazyk uzivatelskeho rozhraniJazyk uzivatelskeho rozhrani
Jazyk uzivatelskeho rozhraniJan Brejcha
 
Semiotika: Nastroj pro lepsi uzivatelsky prozitek?
Semiotika: Nastroj pro lepsi uzivatelsky prozitek?Semiotika: Nastroj pro lepsi uzivatelsky prozitek?
Semiotika: Nastroj pro lepsi uzivatelsky prozitek?Jan Brejcha
 
Zaklady interakcniho designu 2007 - Semiotika
Zaklady interakcniho designu 2007 - SemiotikaZaklady interakcniho designu 2007 - Semiotika
Zaklady interakcniho designu 2007 - SemiotikaJan Brejcha
 
Zaklady interakcniho designu 2007 - Zkusenost
Zaklady interakcniho designu 2007 - ZkusenostZaklady interakcniho designu 2007 - Zkusenost
Zaklady interakcniho designu 2007 - ZkusenostJan Brejcha
 

More from Jan Brejcha (11)

Ideologies in HCI: A Semiotic Perspective
Ideologies in HCI: A Semiotic PerspectiveIdeologies in HCI: A Semiotic Perspective
Ideologies in HCI: A Semiotic Perspective
 
Mezikulturní UX/UI očima sémiotiky: Jak designovat pro mimozemšťany?
Mezikulturní UX/UI očima sémiotiky: Jak designovat pro mimozemšťany?Mezikulturní UX/UI očima sémiotiky: Jak designovat pro mimozemšťany?
Mezikulturní UX/UI očima sémiotiky: Jak designovat pro mimozemšťany?
 
Hackers Congress v Paralelní Polis 17: „Liberate“, aneb za finanční svobodou ...
Hackers Congress v Paralelní Polis 17: „Liberate“, aneb za finanční svobodou ...Hackers Congress v Paralelní Polis 17: „Liberate“, aneb za finanční svobodou ...
Hackers Congress v Paralelní Polis 17: „Liberate“, aneb za finanční svobodou ...
 
Is there a token for that? Tokens demystified.
Is there a token for that? Tokens demystified.Is there a token for that? Tokens demystified.
Is there a token for that? Tokens demystified.
 
Financial literacy in China as an innovation opportunity
Financial literacy in China as an innovation opportunityFinancial literacy in China as an innovation opportunity
Financial literacy in China as an innovation opportunity
 
Innovation potential of the blockchain, and of decentralized applications
Innovation potential of the blockchain, and of decentralized applicationsInnovation potential of the blockchain, and of decentralized applications
Innovation potential of the blockchain, and of decentralized applications
 
Decentralized Autonomous Organizations: Concept & Practical Examples
Decentralized Autonomous Organizations: Concept & Practical ExamplesDecentralized Autonomous Organizations: Concept & Practical Examples
Decentralized Autonomous Organizations: Concept & Practical Examples
 
Jazyk uzivatelskeho rozhrani
Jazyk uzivatelskeho rozhraniJazyk uzivatelskeho rozhrani
Jazyk uzivatelskeho rozhrani
 
Semiotika: Nastroj pro lepsi uzivatelsky prozitek?
Semiotika: Nastroj pro lepsi uzivatelsky prozitek?Semiotika: Nastroj pro lepsi uzivatelsky prozitek?
Semiotika: Nastroj pro lepsi uzivatelsky prozitek?
 
Zaklady interakcniho designu 2007 - Semiotika
Zaklady interakcniho designu 2007 - SemiotikaZaklady interakcniho designu 2007 - Semiotika
Zaklady interakcniho designu 2007 - Semiotika
 
Zaklady interakcniho designu 2007 - Zkusenost
Zaklady interakcniho designu 2007 - ZkusenostZaklady interakcniho designu 2007 - Zkusenost
Zaklady interakcniho designu 2007 - Zkusenost
 

Recently uploaded

Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxmapanig881
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,Aginakm1
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case StudySophia Viganò
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一diploma 1
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree ttt fff
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptMaryamAfzal41
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubaikojalkojal131
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCRdollysharma2066
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdfvaibhavkanaujia
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...mrchrns005
 
Design and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industryDesign and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industryrioverosanniejoy
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一Fi sss
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一D SSS
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Nightssuser7cb4ff
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一F La
 

Recently uploaded (20)

Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
 
ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case Study
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
 
Call Girls in Pratap Nagar, 9953056974 Escort Service
Call Girls in Pratap Nagar,  9953056974 Escort ServiceCall Girls in Pratap Nagar,  9953056974 Escort Service
Call Girls in Pratap Nagar, 9953056974 Escort Service
 
Design and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industryDesign and Managing Service in the field of tourism and hospitality industry
Design and Managing Service in the field of tourism and hospitality industry
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
(办理学位证)约克圣约翰大学毕业证,KCL成绩单原版一比一
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
 

xCulture – Cross-cultural UX Elements: Research Method and Design Guidelines

  • 1. xCulture – Cross-cultural UX Elements: Research Method and Design Guidelines Jan Brejcha Prague, Czech Republic UX Camp Europe 2014 Berlin, 7.6.2014
  • 2. Research rationale • By defining a usable set of UI design guidelines for a target culture, designers could market their products with lower costs and with better acceptance. • To achieve this goal we carried a pilot study targeted at the habits, mental models and UI preferences of Chinese and Czech users. • To uncover the sense-making processes of the users, we chose to work from the semiotic perspective. • We used semiotic methods to build a common framework to gather and analyze cross-cultural data. From our perspective, the UI is an example of complex language. Consequently, in our research we focused on different components of the UI language. 2
  • 3. UI language components • UI grammar is composed of basic elements: interaction sentence, interaction games, rhetorical tropes, interaction phases, and patterns. The grammar elements concern both the noun and verb phrase of a sentence. • Discrete elements are the smallest elements to have a meaning. • Interaction sentence is a meaningful unit describing a task in a user's interaction. A set of interaction sentences with the same goal form an interaction game. • Narrative in UI is made both by the designer’s meta-communication and the temporal aspect of perceiving UI elements. • Rhetorical tropes are devices of persuasion and emphasis, often presented as metaphors. • Patterns are typical configurations of UI language components in different settings 3
  • 4. Researching locally • Tests should be done locally to prevent users to absorb the majority culture • Test with a local moderator, sharing the language and cultural background. • (Smith, 2011) Source: author’s archive
  • 5. Research steps • Defined research questions • Defined hypotheses about the Chinese users • Built a questionnaire of ~50 questions for user interviews using an online reporting tool (surveygizmo.com) • Wrote a recruiting screener and set up a recruiting form • Wrote a recruiting letter and distributed through social networks (renren.com, qzone.qq.com) • Interviewed 20 Chinese and 20 Czech respondents 5
  • 6. Recruiting screener The respondents would have to: •be born and raised in China •belong to the Chinese culture (have Chinese parents/mother tongue) •be evenly split between males and females •be evenly split between bachelor's and master's students •be evenly split between living in large cities and the countryside •have different computer knowledge level •have different English language level 6
  • 7. User interview setup • Users were presented with a questionnaire of ~50 questions divided into groups: personal info, layout, color, symbols, look&feel • The questionnaire was supported by a moderator, who would give the necessary background to the user, and present him/her a choice of images/color samples, when appropriate • The testing was carried out in the user lab, with a note-taker sitting besides the moderator • The user has been taped by 3 cameras and his/her voice recorded • Supportive note-taking (2-3 people), and/or observation has been done in an adjacent room • As a data-collecting and reporting platform we chose SurveyGizmo.com • One session took about 90 min • After each testing day data from the note-takers was checked and merged with the data on the server • Czech interview was computer supported by SurveyGizmo.com 7
  • 8. Layout: Semiotics of space Source: Wikipedia
  • 9. Reading Images Source: Kress and Van Leeuwen: Reading images Ideal Given Margin Real Given Margin Ideal New Margin Real Given Margin Centre
  • 10. Layout: information given (1/2) • Hypothesis: New information (key, unknown) is expected on the left, given information (familiar, agreed upon) on the right of the screen • Question: On a screen, where would you place familiar, taken-for-granted, unproblematic information? (e.g., read message, my own login information/picture, friends list) 10
  • 11. Layout: information given (2/2) 11 Chinese Czech
  • 12. Color: Actions and emotions 12 Source: Google Images
  • 13. Color: metaphors and preference (1/5) • Hypothesis: Users would prefer lighter shades, combination of pastel colors • Question: Please select, which (background/foreground) color do you like the most 13 Source: Wikipedia
  • 14. Color: metaphors and preference (2/5) • Background colors (Chinese, Czech): 14
  • 15. Color: metaphors and preference (3/5) • Foreground colors (Chinese, Czech): 15
  • 16. Color: metaphors and preference (4/5) • Black: some users think it is easy to match with the background color. it is obvious and clear. • Blue: the users choose Blue as foreground color also connect with the website they are familiar. they think it is comfortable watch for a long time. • Lime: the users feel it is quiet, comfortable, clear, and fresh; it looks like grass, make the user more vital. • White: Most users choose white for the background, and most of them consider that this color is clear and also suitable as the background color. Some users are used to use white as the background and they think white can be a good match with other colors, and at the same time, can’t lose color itself. • Aqua: 15 percent users chose aqua. Users consider aqua to be clear, and it is neither drab nor flowery. When users see aqua, they feel comfortable and refreshing. 16
  • 17. Color: metaphors and preference (5/5) • Question: Would you prefer a lighter or darker color (chroma)? • Results (Chinese, Czech): 17
  • 19. Symbols: nouns and adjectives (1/2) • Hypothesis: There is a close similarity between sequential information structure in language and horizontal structure in visual composition. Noun (folder) and adjective (star attribute) would mimic their position in sentence. • Question: An attribute shows additional features the object can have (type of actions or kind of object). When looking at a folder, where would you expect the attribute to appear: (left/right/top/bottom) 19
  • 20. Symbols: nouns and adjectives (2/2) 20 • Results (Chinese, Czech):
  • 22. Look&feel: verb menus (1/3) • Hypothesis: Menus starting with a verb are considered more natural than those starting with nouns • Question: (At a gallery website) Which of the following combination of menu items do you find more natural? 22
  • 23. Look&feel: verb menus (2/3) • Results (Chinese, Czech): 23
  • 24. Look&feel: verb menus (3/3) • How would the menu unfold? Most users think the secondary menu should be noun for three main reasons. 1) noun represents the object being operated. 2) some users think the first menu should be verb. Verb shows actions. Noun shows target. 3) the first menu is verb used to search. Noun shows the objects. • Some users think the secondary menu should be verb with noun because it can thus express its purpose more conveniently. • Some users think the secondary menu should be verb for three reasons: 1) first menu is noun. Noun shows the destination. Verb shows actions. 2) first menu is noun. Noun is interesting and attractive. Then verb shows the functions. 3) verb should be completed. • Many users think the drop-down list is more natural. Only 1 user think the secondary menu can just list horizontally. 24
  • 25. Results • We encountered a strong influence of globalization on the cultural markers, mainly through the use of common software platforms. • We found still many important culture-specific differences in both groups which are related to: spatial organization of information, shapes, direction of reading, motion, color, color combinations, semantic organization of content, use of icons and metaphors, user's preferences for different types of media, preference for culture-specific content and for cartoon imagery, trustworthiness of the content, navigation tools, visible and interaction grammar of menus and commands. • Almost half (22) of our hypotheses were fully supported by the results from individual questions, 17 were partly supported, 14 hypotheses were not supported. 25
  • 26. 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
  • 27. 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
  • 28. 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, fol-lowed 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
  • 29. 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
  • 30. Acknowledgements • Prof. Zhengjie Liu • Gong Hong Yin, Han Li • Sun Wenxin, Ma Yin, Zhou Yongjie, Xiao Sheng, Xiang Yong • SEUC staff and students 30
  • 31. References 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 KRESS, Gunther and VAN LEEUWEN, Theo. Reading images: the grammar of visual design. 2nd ed. London: Routledge, 2006, xv, 291 p. ISBN 0415319153. SMITH, Andy. Issues in adapting usability testing for global usability. In: Global Usability. Springer London, 2011. p. 23-38. DOI: http://dx.doi.org/10.1007/978-0-85729-304-6_3 31
  • 32. xCulture – Cross-cultural UX Elements: Research Method and Design Guidelines Jan Brejcha, Ph.D. Tel: +420 602 277 588 Email: Jan@Brejcha.name Web: Jan.Brejcha.name