This document discusses research conducted on cross-cultural UI design preferences between Chinese and Czech users, emphasizing the importance of tailoring UI elements to specific cultural contexts for better user acceptance. The research involved interviews, semiotic analysis, and identification of design guidelines based on user preferences for color, layout, symbols, and interaction structures. Key findings highlight both global influences and significant cultural differences that should be considered in UI design to enhance usability and aesthetic appeal.

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

18. Symbols: Iconic language
18
Source: author’s archive

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

21. Look&feel: object affordances
Source: author’s archive

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