Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
xCulture – Cross-cultural UX Elements:
Research Method and Design Guidelines
Jan Brejcha
Prague, Czech Republic
UX Camp Eu...
Research rationale
• By defining a usable set of UI design guidelines for a target culture,
designers could market their p...
UI language components
• UI grammar is composed of basic elements: interaction sentence,
interaction games, rhetorical tro...
Researching locally
• Tests should be done locally to prevent users to absorb the majority culture
• Test with a local mod...
Research steps
• Defined research questions
• Defined hypotheses about the Chinese users
• Built a questionnaire of ~50 qu...
Recruiting screener
The respondents would have to:
•be born and raised in China
•belong to the Chinese culture (have Chine...
User interview setup
• Users were presented with a questionnaire of ~50 questions divided into
groups: personal info, layo...
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
Gi...
Layout: information given (1/2)
• Hypothesis: New information (key, unknown) is expected on the left, given
information (f...
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
• Ques...
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
obvio...
Color: metaphors and preference (5/5)
• Question: Would you prefer a lighter or darker color (chroma)?
• Results (Chinese,...
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 ...
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 ...
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...
Results
• We encountered a strong influence of globalization on the cultural
markers, mainly through the use of common sof...
Supported hypotheses (1/2)
Layout
• Given information (familiar, agreed upon) is expected on the right of the screen
• A c...
Supported hypotheses (2/2)
Symbol
•Icons presenting situations are more intuitive than those containing objects. The Czech...
Cross-cultural Design Guidelines (1/2)
1. Important information should appear in the top-left corner or in the middle-cent...
Cross-cultural Design Guidelines (2/2)
14. Use blue, purple, aqua (cyan), and gray (silver) for background color.
15. Use ...
Acknowledgements
• Prof. Zhengjie Liu
• Gong Hong Yin, Han Li
• Sun Wenxin, Ma Yin, Zhou Yongjie, Xiao Sheng, Xiang Yong
•...
References
BREJCHA, Jan and MARCUS, Aaron. Semiotics of Interaction: Towards a UI Alphabet. In: KUROSU, M., ed.
Human-Comp...
xCulture – Cross-cultural UX Elements:
Research Method and Design Guidelines
Jan Brejcha, Ph.D.
Tel: +420 602 277 588
Emai...
Upcoming SlideShare
Loading in …5
×

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

Thanks to the intensification of globalization through communication technology, we are faced more and more with UIs coming from different cultural backgrounds. In order to fit the user’s cultural expectations as closely as possible, designers need to combine usability knowledge with cultural insights. By defining a usable set of UI design guidelines for a target culture, designers could market their products with lower costs than with cross-cultural testing. To promote this line of research, we carried a pilot study targeted at the habits, mental models and UI preferences of Chinese and Czech users. Our findings show there is a strong influence of globalization on the cultural markers mainly through the use of common software platforms. However, we found many important culture-specific differences as well in both groups. We present our results as guidelines that could be used to enhance the user’s acceptance of the UI in a specific culture.

  • Be the first to comment

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

  1. 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. 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. 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. 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. 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. 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. 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. 8. Layout: Semiotics of space Source: Wikipedia
  9. 9. Reading Images Source: Kress and Van Leeuwen: Reading images Ideal Given Margin Real Given Margin Ideal New Margin Real Given Margin Centre
  10. 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. 11. Layout: information given (2/2) 11 Chinese Czech
  12. 12. Color: Actions and emotions 12 Source: Google Images
  13. 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. 14. Color: metaphors and preference (2/5) • Background colors (Chinese, Czech): 14
  15. 15. Color: metaphors and preference (3/5) • Foreground colors (Chinese, Czech): 15
  16. 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. 17. Color: metaphors and preference (5/5) • Question: Would you prefer a lighter or darker color (chroma)? • Results (Chinese, Czech): 17
  18. 18. Symbols: Iconic language 18 Source: author’s archive
  19. 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. 20. Symbols: nouns and adjectives (2/2) 20 • Results (Chinese, Czech):
  21. 21. Look&feel: object affordances Source: author’s archive
  22. 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. 23. Look&feel: verb menus (2/3) • Results (Chinese, Czech): 23
  24. 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. 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. 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. 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. 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. 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. 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. 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. 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

×