Chinese UI design guidelines 2.0

1. Chinese UI design guidelines 2.0 Jan Brejcha, Ph.D. User experience consultant Prague, Czech Republic Li Hui, Xu Qing, Miao Huitian, Xu Menghan, Wang Li, Zhengjie Liu Sino-European Usability Center (SEUC), Dalian Maritime University Dalian, 116026 P. R. China HCII 2015, Los Angeles, August 6, 2015 úterý, 11. srpna 15

2. How we conducted the research? úterý, 11. srpna 15

3. The semiotic/linguistic perspective • A sign can be anything in the UI/UX that has a meaning for somebody. • The meaning is supported by context and relationships between signs. • Semiotics can ﬁnd implicit assumptions and hidden relations in culture, therefore is very suitable for cross-cultural analysis. • The semiotic perspective in this study lead us to focus on speciﬁc areas, such as the meaning of composition (UI layout), of color, of icons, and the overall look and feel. • The linguistic perspective focused in more detail on the composition (grammar) of icons, wording and structure of menu items (e.g., object +command). 3 úterý, 11. srpna 15

4. Status of research • Deﬁned research questions based on previous pilot study, updated and improved the questions to include more context for the given task • Updated hypotheses about the Chinese users • Built a questionnaire of ~40 questions for user interviews using an online reporting tool (surveygizmo.com) • Recruited participants according to a screener (snowball: friends of friends) • Interviewed 50 respondents 4 úterý, 11. srpna 15

5. Recruiting screener The respondents would have to: • be born and raised in China • 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 5 úterý, 11. srpna 15

6. Research questions • How can we validate previously gathered data from the pilot study? • Are there any other interesting areas to consider? 6 úterý, 11. srpna 15

7. User interview • Users were presented with a questionnaire of ~40 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 answer any problems, when appropriate • The testing was carried out in the user lab, the process was followed through screen sharing and sound from behind a glass • As a data-collecting and reporting platform we chose SurveyGizmo.com • One session took about 15 min • After the interviews all the data was checked and translated, when appropriate 7 úterý, 11. srpna 15

8. Research method • The pilot study was done in September, 2011, on a qualitative basis. 20 respondents were interviewed on ~50 questions (most of them open), and each session lasted 90 minutes. • The current study was intended to validate some of the previous data on a quantitative basis. • For evaluating the data we are using a margin of error of 13,9% (7 respondents) for the whole group of 50 respondents, and 19,6% for in-group comparison (5 people in a sample of 25 respondents, e.g. male/female, urban/rural). • The margin of error is a statistic expressing the amount of random sampling error in a survey's results. The larger the margin of error, the less confidence one should have that the poll's reported results are close to the "true" figures; that is, the figures for the whole population. Margin of error occurs whenever a population is incompletely sampled. (Source: Wikipedia) • Tests are done locally to prevent users to absorb the majority culture, and conducted with a local moderator, sharing the language and cultural background. 8 úterý, 11. srpna 15

9. Results • The complete results are available on the following webpages: • Summary report: http://app.sgizmo.com/reportsview/?key=154782-3865494- dc43005efe218162da214ecad4df7734 • Segmentation by gender: http://app.sgizmo.com/sharedexplore/public-view/ cid/154782/id/1919160/vid/1855?key=860e7d66f1a748d1cf3da2955f635f6a • Segmentation by origin: http://app.sgizmo.com/sharedexplore/public-view/ cid/154782/id/1919160/vid/1857? key=3a832e364d6486d16099a20c608a8447 9 úterý, 11. srpna 15

10. What we discovered? úterý, 11. srpna 15

11. Population: who were the respondents? • Gender: 25 males, 25 females • Origin: 23 from country, 27 from city • Age: 18-25 11 úterý, 11. srpna 15

12. Layout: Semiotics of space 12 úterý, 11. srpna 15

13. Hypothesis: Reading Images in the West Source: Kress and Van Leeuwen: Reading images Ideal Given Margin Real Given Margin Ideal New Margin Real New Margin Center úterý, 11. srpna 15

14. Layout: ideal vs. real information • Hypothesis: The ideal information would be on the upper part of the screen, the real in the bottom. • Question: On a screen, where would you place general (detailed) information? 14 úterý, 11. srpna 15

15. Layout: ideal vs. real information • Design implications: The ideal information should be placed in the upper part of the screen, the real information in the center of the screen. • These results also support the pilot study outcome. úterý, 11. srpna 15

16. Color: Actions and emotions 16 úterý, 11. srpna 15

17. Symbols: Iconic language 17 úterý, 11. srpna 15

18. Implicit interaction • Hypothesis: During Chinese language acquisition in children, verbs are learned ﬁrst, followed by nouns later • Question: Which two go together? • Results: Hand pointer with hyperlink (36), mouse with hand pointer (14) 18 úterý, 11. srpna 15

19. Implicit interaction • Design implications: Build UIs on implicit relationships between commands and objects • In the Chinese context users tend to group items according to relations (verbs), rather than categories (nouns) 19 úterý, 11. srpna 15

20. Icons preference • Hypothesis: Icons with situations would be preferred, because they present more context, and focus on actions (verbs). • Question: Which kind of icons do you ﬁnd more useful for buying a book online? 20 úterý, 11. srpna 15

21. Icons preference 21 • Design implications: The icons should be as clear as possible, and when representing an action (command), they should present also the object of the action. • The situations depicted in the icons favored mostly female respondents, while males preferred only a textual description of the action. úterý, 11. srpna 15

22. Nouns and adjectives • Hypothesis: There is a close similarity between sequential information structure in language and in visual composition. Noun (folder) would come after the attribute (star attribute), as is their position in sentence (adjective+noun). • Question: When marking an icon as important using a star symbol, where should the star be located? 22 úterý, 11. srpna 15

23. Nouns and adjectives 23 • Design implications: The icons presenting object attributes should be on the left of the object, as this placement are most natural for the users. úterý, 11. srpna 15

24. Look&feel: object affordances 24 úterý, 11. srpna 15

25. Unfolding a narrative • 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 ﬁnd more natural? 25 Verb: Visit Browse Learn Join Shop Search Noun: Gallery Exhibitions Lectures Membership Gifts Site Noun+Verb: Gallery Browse Lectures Join Gifts Search úterý, 11. srpna 15

26. Unfolding a narrative 26 • Design implications: Construct menus with noun only, as these are clear to the users, and allow for a verb (command) submenu. úterý, 11. srpna 15

27. Summary • The current study validated some of the results from the pilot • Possible reasons for not passing the validation: • Questions asked differently • Questions presented in a different sequence • Different example images • Different “generation” of students (different experience) • “You could not step twice into the same river.” (Heraclitus) • Some new results were obtained, and some trends worth investigating further úterý, 11. srpna 15

28. Future work • Check for results/trends between males/females, urban/rural • Repeat the above for European (Czech) users • Compare the gathered results cross cultures úterý, 11. srpna 15

29. Acknowledgments • prof. Zhengjie Liu • Li Hui, Xu Qing, Wang Li, Miao Huitian, Xu Menghan • Respondents: Lu Miao, Peng Jinjia, He Yahe, Pan Ying, Yang Gaoxing, Jiang Chao, Fei Xinxu, Li Yuju, Wei Qiang, Liu Lv, Liu Siqi, Zhang Jing, Chen Sheng, Chen Qi, Liu Yunxia, Jiang Yuanjiang, Song Yalei, Zhang Tuo, Li Danni, Zhou Liang, Wang Jun, Bai Mingqian, Yao Weilie, Hu Zhonglian, Zeng Yuteng, Yang Xu, Zhang Wentao, Lu Hongyan, Chen Weiwei, Liu Chang, Gao Miaomiao, Hu Zhanghao, Wang Zhen, Zhang Qi, Jiang Gexin, Wang Yuying, Yang Yuhan, Zhang Qi, Lv Qin, Lu Xinhui, Huang Qianying, Wu Wenqi, Lai Yancun, Li Jiakang, Zhu Huarun, Xie Shangqian, Wang Huiling, Zhang Mingyi, Song Jiayu, Pan Juan úterý, 11. srpna 15

30. Cross-cultural HCI/UX: A semiotic perspective • Published in February, 2015 • Includes a novel design and evaluation method for HCI and UX • Provides a detailed explanation of the differences between current expert evaluation methods and the presented semiotic method • Offers a usable set of design and evaluation heuristics • Explains how to conduct quantitative and qualitative analyses to support decisions about cross-cultural design and evaluation • Offers results from a cross-cultural test and presents guidelines for design of different IT products and services for different cultures úterý, 11. srpna 15

31. Questions? úterý, 11. srpna 15

32. Thank you! http://jan.brejcha.name e-mail: jan@brejcha.name úterý, 11. srpna 15