diff --git a/.DS_Store b/.DS_Store index b912a2a..074e396 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/.idea/.name b/.idea/.name index f6b71cc..c488d18 100644 --- a/.idea/.name +++ b/.idea/.name @@ -1 +1 @@ -style.css \ No newline at end of file +functionalDesign.css \ No newline at end of file diff --git a/Background_consumer_behaviour.png b/Background_consumer_behaviour.png new file mode 100644 index 0000000..3ff95d9 Binary files /dev/null and b/Background_consumer_behaviour.png differ diff --git a/Consumer_Behaviour_Hifi.fig b/Consumer_Behaviour_Hifi.fig new file mode 100644 index 0000000..35e8c3f Binary files /dev/null and b/Consumer_Behaviour_Hifi.fig differ diff --git a/Design/.DS_Store b/Design/.DS_Store new file mode 100644 index 0000000..73bb9da Binary files /dev/null and b/Design/.DS_Store differ diff --git a/Design/Background.jpg b/Design/Background.jpg new file mode 100644 index 0000000..bc103a6 Binary files /dev/null and b/Design/Background.jpg differ diff --git a/Design/Background_consumer_behaviour.png b/Design/Background_consumer_behaviour.png new file mode 100644 index 0000000..3ff95d9 Binary files /dev/null and b/Design/Background_consumer_behaviour.png differ diff --git a/Design/Background_consumer_behaviour.webp b/Design/Background_consumer_behaviour.webp new file mode 100644 index 0000000..50b8274 Binary files /dev/null and b/Design/Background_consumer_behaviour.webp differ diff --git a/Design/Background_main.png b/Design/Background_main.png new file mode 100644 index 0000000..e7588d9 Binary files /dev/null and b/Design/Background_main.png differ diff --git a/Design/Consumer_Behaviour_Hifi.fig b/Design/Consumer_Behaviour_Hifi.fig new file mode 100644 index 0000000..35e8c3f Binary files /dev/null and b/Design/Consumer_Behaviour_Hifi.fig differ diff --git a/Design b/Design~Updated upstream similarity index 100% rename from Design rename to Design~Updated upstream diff --git a/Functional Design/The_influence_of_user_culture_on_website_usability.html b/Functional Design/The_influence_of_user_culture_on_website_usability.html new file mode 100644 index 0000000..291ba3d --- /dev/null +++ b/Functional Design/The_influence_of_user_culture_on_website_usability.html @@ -0,0 +1,250 @@ + + + + + The Influence of user Culture on Website Usability + + + + + +
+ +
+ +
+ +
+
+

The Influence of user Culture on Website Usability

+

+ Rukshan Alexander(a), Nik Thompson(b), Tanya McGill(c), David Murray(c) + a Department of Economics and Management, Vavuniya Campus, University of Jaffna, Vavuniya, Sri Lanka + b School of Management, Curtin University, Kent St, Bentley, 6102, WA, Australia + c Discipline of Information Technology, Mathematics and Statistics, Murdoch University, South St, + Murdoch, 6150, WA, Australia

+
+
+ + + +
+

Introduction

+
+

+ Consumer behaviour is the study of individuals, groups, or organisations and all activities associated with the purchase, use and disposal of goods and services. It encompasses how the consumer's emotions, attitudes, and preferences affect buying behaviour, and how external cues—such as visual prompts, auditory signals, or tactile (haptic) feedback—can shape those responses. Consumer behaviour emerged in the 1940–1950s as a distinct sub-discipline of marketing, but has become an interdisciplinary social science that blends elements from psychology, sociology, social anthropology, anthropology, ethnography, ethnology, marketing, and economics (especially behavioural economics). +

+ +
+
+ + + +
+

Questions

+
+
+

+ “Culturally adapted websites enable users to achieve their goals more quickly and with fewer + errors, leading to higher satisfaction.” – Alexander et al., 2021

+
+
+

+ “A culturally adapted design leads to better user outcomes, even though familiarity with + international websites can mitigate the differences.” – Alexander et al., 2021

+
+
+
+ + + +
+

Methodology

+
+

+ In the paper "The Influence of User Culture on Website Usability" (Alexander et al., 2021), the authors used the following methods to gather data and assess the usability process: + + Sample and Recruitment: + The study involved a total of 200 participants, split equally between 100 Australians and 100 + Chinese. These participants were recruited via an online panel, and each of them used a desktop + computer to complete the tasks. + + Between-Subjects Design: + Participants were assigned to use either a culturally native website (i.e., Australian participants + used the Australian government website, and Chinese participants used the Chinese government website) + or a culturally foreign website (i.e., Australian participants used the Chinese government website + and vice versa). This between-subjects design allowed the researchers to compare how users from + different cultural backgrounds interacted with websites that were either familiar or foreign to them. + + Metrics for Evaluation: + The researchers evaluated usability using three key metrics: + Effectiveness: Measured by task success, which indicates whether participants were able to complete the assigned tasks on the website. + Efficiency: Assessed by the time taken to complete the tasks and the number of errors made during the process. + Satisfaction: Measured through a questionnaire that gathered participants’ subjective feelings and experiences about the usability of the websites they interacted with. + By using a combination of a controlled design, cross-cultural participant groups, and objective (task success, time/errors) and subjective (satisfaction) measures, the study was able to thoroughly assess how cultural differences influence website usability. +

+ +
+
+ + + + +
+
+

China

+

Navigation Structure

+

Australia

+
+
+

In contrast, Chinese websites often feature flatter structures with many direct links + to various sections of the site. This design is more aligned with the collectivist nature of Chinese + culture, where users tend to prefer immediate access to a broad range of information. The layout is + designed to provide quick access to multiple options rather than a linear navigation process.

+

Websites in Australia typically have deeper navigation structures with + hierarchical menus and fewer direct links. Australian users prefer to navigate through clearly + structured categories and subcategories. This design approach aligns with the more individualistic + culture, where users expect a more organized, step-by-step journey.

+
+
+ + + +
+
+

China

+

Information Density

+

Australia

+
+
+

Chinese websites, on the other hand, typically have a higher information + density. More content, links, and visual elements (such as icons, banners, and images) are often + displayed on a single page. This caters to the Chinese preference for having as much information as + possible visible at once to quickly navigate and make decisions.

+

Australian websites generally have a lower information density per page. + They tend to focus on minimalist design to avoid overwhelming users and to minimize errors. The goal + is to present information in a clear, easily digestible manner to ensure users don't get confused. +

+
+ + +
+

LEARNINGS

+
+

+ The key learnings from the paper "The Influence of User Culture on Website Usability" (Alexander et al., 2021) are: + + Cultural adaptation improves usability: Websites tailored to cultural preferences lead to better performance and satisfaction. + Cultural navigation differences: Australians prefer deeper, hierarchical navigation, while Chinese users favor flatter structures with more direct links. + Information density: Australians prefer minimalist designs with less information per page, while Chinese users are accustomed to high-density pages. + Exposure to international designs: Chinese users adapted better to Australian designs, showing that familiarity with international websites can lessen cultural differences. + Global websites need cultural consideration: Tailoring designs to cultural contexts improves user experience and gives a competitive edge.

+
+ +
+ +
+ + + + +
+ +
+ +

+ For educators and designers, the research paper "The Influence of User Culture on Website Usability" highlights three key takeaways: +

+
+ +
+ Arrow Icon +

+ Emphasize cultural awareness: Educators should teach the importance of understanding cultural differences in user behavior, and designers should integrate cultural preferences into the design process to ensure websites are more usable for diverse audiences. +

+
+ Arrow Icon +

+ Adapt website designs to cultural needs: Designers should customize navigation, information density, and overall layout based on the target culture to improve usability, user satisfaction, and efficiency. +

+
+
+ Arrow Icon +

+ Test across cultures: Both educators and designers should promote cross-cultural testing to identify potential usability issues and ensure websites perform well for users from different cultural backgrounds.

+

+
+
+ + + + +
+ +
+

+ The study "The Influence of User Culture on Website Usability" highlights the significant impact of + cultural differences on website usability. It demonstrates that adapting website designs to meet the + cultural preferences of users—whether in navigation structure, information density, or visual + presentation—can lead to better user performance and satisfaction. +

+
+ + +
+ +
+

+ References + Research Paper: https://www.academia.edu/107554685/The_Influence_of_User_Culture_on_Website_Usability + Al-Badi, A., 2009. Designing usable localised websites: differences between Western and + Arab cultures. IBIMA Business Review 2, 9–19. + Al-Khalifa, H.S., Garcia, R.A., 2014. Website design based on cultures: an investigation of + Saudis, Filipinos, and Indians government websites’ attributes. Lect. Notes Comput. + Sci. 8518, 15–27. + Alexander, R., Thompson, N., Murray, D., 2016. Towards cultural translation of websites: + a large-scale study of Australian, Chinese, and Saudi Arabian design preferences. + Behaviour and Information Technology 36, 351–363. https://doi.org/10.1080/ + 0144929X.2016.1234646. + Alexander, R., Thompson, N., Murray, D., 2017a. Cross-Cultural Web Design Guidelines. + In: 14th International Conference on Web for All (W4A-2017). Perth. + Alexander, R., Thompson, N., Murray, D., 2017b. Cross-Cultural Web Usability Model. In: + The 18th International Conference on Web Information Systems Engineering (WISE + 2017. Cham, Puschino, Russia. Springer. + Alghamdi, A.S., Al-badi, A.L.I.H., Alroobaea, R., Mayhew, P., 2013. A comparative study + of synchronous and asynchronous remote usability testing methods. International + Review of Basic and Applied Sciences 1, 61–97. + Alharbi, A., Mayhew, P., 2015. Users’ performance in lab and non-lab environments + through online usability testing: a case of evaluating the usability of digital academic + libraries’ websites. In: 2015 Science and Information Conference (SAI). London, UK. + IEEE, pp. 151–161. + Alostatha, J.M., Metleb, M.K., Alic, L.A., Abdullahd, L.R.A., 2011. Cross-use pattern + language: cross-cultural user interface development tool. Procedia Computer Science + 3, 1541–1550. + Alyahyan, L., Aldabbas, H., Alnafjan, K., 2016. Preferences of Saudi users on Arabic + website usability. International journal of Web & Semantic Technology 7, 1–8. + Aroshine, M., 2017. A culture-centered design approach to improve a user interface for + migrants. (Master’s Programme in Human-Computer Interaction). KTH Royal + Institute of Technology. Retrieved from. http://www.diva-portal.org/smash/get/ + diva2:1141491/FULLTEXT02.pdf. +

+
+ +

Franziska Nestler
Functional Design

+
+
+ +
+ + +
+ + \ No newline at end of file diff --git a/Functional Design/functionalDesign.css b/Functional Design/functionalDesign.css index e69de29..cfc70d7 100644 --- a/Functional Design/functionalDesign.css +++ b/Functional Design/functionalDesign.css @@ -0,0 +1,545 @@ +/* FONTS */ + +@font-face { + font-family: Titan One; + src: url(../font/TitanOne-Regular.ttf); +} + +@font-face { + font-family: Work SansB; + src: url(../font/WorkSans-Bold.ttf); +} + +@font-face { + font-family: Work SansR; + src: url(../font/WorkSans-Regular.ttf); +} + +@font-face { + font-family: Work SansM; + src: url(../font/WorkSans-Medium.ttf); +} + +/*FARBEN */ + +:root{ + /*Hintergrundfarbe für ganzes Dokument*/ + --background-color: #D9D9D9; + --background-gradient: linear-gradient(to bottom, rgba(194, 255, 254, 0.41), rgba(0, 131, 128, 0.41)); + + /*Navbar-Farben*/ + --navbar-color: #FFF1F5; + --navbar-highlights-color: rgba(0, 209, 204, 0.72); + --navbar-highlight-border-color: #004F4D; + + /*Inhalte der Seite*/ + --border-color: #004F4d; + --untertitel-color: #00908D; + --inhalt-hintergrund-color: white; + + /*Hintergrund der User-Icons am Beginn und Ende der Seite*/ + --background-userIcon: #FFC2E0; + +} + + + +/*ALLGEMEINES*/ +* { + box-sizing: border-box; + scroll-behavior: smooth; +} + +body { + padding: 0; + margin: 0; + background: + var(--background-gradient), + var(--background-color); + font-family: "Work SansR"; + height: 100%; +} + +section { + margin: 25px 50px; + scroll-margin-top: 150px; /*damit navbar nicht Inhalt überdeckt, bei Klicken der Verlinkung in navbar*/ +} + +main { + padding: 100px 50px 50px 50px; +} + +/*font-size + line-height für GESAMTES Dokument ändern*/ +main section p { + line-height: 1.3em; + font-size: 1.2em; +} + +/*für Bilder*/ +section img{ + max-width: 100%; + border-radius: 35px; +} + +/*ÜBERSCHRIFTEN*/ +h1 { + font-family: "Titan One"; + font-size: 2.7em; + text-align: left; + border: 4px solid var(--border-color); + width: fit-content; + margin: auto; + padding: 50px; + border-radius: 35px; + background-color: var(--inhalt-hintergrund-color); + font-weight: 500; +} + +h2{ + font-family: "Work SansM"; + font-size: 1.5em; + border: 3px solid var(--border-color); + width: fit-content; + border-radius: 35px; + background-color: var(--untertitel-color); + color: white; + padding: 20px 50px 20px 50px; +} + +/*Styling für mittige Überschrift (z.b. bei Einleitung/Vergleich */ +.ueberschriftMittig{ + margin: 0 auto -30px auto; + z-index: 1; + position: relative; +} + +/*Styling für linksbündige Überschrift (z.b. bei REFERENCES / TITEL + Inhalt */ +.ueberschriftLinks{ + margin: 0 0 -30px 0; + z-index: 1; + position: relative; +} + + +/*NAV-BAR*/ +nav { + background-color: var(--navbar-color); + border: 2px solid black; + position: fixed; + top: 0; + z-index: 1000; + font-family: "Work SansB"; + font-size: 1.2em; + height: 140px; + display: flex; + justify-content: center; + align-items: center; +} + +.navHover:hover { + background-color: var(--navbar-highlights-color); + outline: 4px solid var(--navbar-highlight-border-color); + color: white; +} + +.navLi { + list-style: none; + margin: auto; + padding: 10px 20px; + border-radius: 35px; + width: fit-content; +} + +ul{ + display: flex; + justify-content: space-around; + width: 100vw; + margin: 0; +} + +li p { + font-family: "Work SansB"; + font-weight: bold; +} + +li { + list-style: none; + margin: auto; + padding: 10px; + border-radius: 35px; +} + + +.desktopNav a { + text-decoration: none; + color: inherit; +} + + + +/*STYLING TITEL + basedOn*/ +.h1Wrapper { + position: relative; + display: inline-block; + margin: auto; + padding-bottom: 100px; +} + +/* Das Icon bei der Überschrift */ +.h1Wrapper::before { + content: "🎮"; + font-size: 48px; + width: 80px; + height: 80px; + display: inline-block; + line-height: 80px; + text-align: center; + position: relative; + top: 50px; + left: -30px; + background-color: var(--inhalt-hintergrund-color); + border: 4px solid var(--border-color); + border-radius: 50%; +} + +/*Styling für das BasedOn im Titel drin: Name vom Originalen Paper*/ +.basedOn { + position: absolute; + bottom: -60px; + right: -25px; + width: 35vw; + background-color: var(--navbar-color); + padding: 20px 20px; + border: 4px solid var(--border-color); + border-radius: 35px; + font-size: 0.9em; + +} + +.basedOn::after { + content: ""; + position: absolute; + top: -50px; + right: -20px; + width: 70px; + height: 70px; + border: 4px solid var(--border-color); + border-radius: 50%; + background-color: var(--background-userIcon); + background-image: url(../img/userIcon.png); + background-size: cover; + background-position: center; +} + + +/*STYLING FÜR BAUSTEIN: EINLEITUNG*/ +.textFeldEinleitungWrapper { + display: flex; + justify-content: center; + z-index: 0; + position: relative; + background-color: var(--inhalt-hintergrund-color); + padding: 2em; + border: 4px solid var(--untertitel-color); + border-radius: 35px; +} + + + +/*STYLING FÜR BAUSTEIN: QUESTIONS*/ +.frageAntwortWrapper { + display: flex; + flex-direction: column; + align-items: center; + border-radius: 35px; + + padding: 0 3em 3em 3em; + position: relative; + z-index: 0; + gap: 40px; +} + + +.questionsBubble { + color: black; + max-width: 80vw; + text-align: center; +} +.bubbleLeft { + /*Breite der linken Bubble*/ + max-width: 70vw; + align-self: flex-start; + + /* triangle dimension */ + --b: 1em; /* control the base */ + --h: .7em; /* control the height */ + --c: var(--inhalt-hintergrund-color); /* controls color of bubble*/ + + + padding: 1em; + border-radius: 1.2em; + clip-path: polygon(0 0,100% 0,100% 100%, + var(--b) 100%, + calc(-1*var(--h)) calc(100% + var(--h)), + 0 calc(100% - var(--b))); + background: var(--c); + border-image: conic-gradient(var(--c) 0 0) 0 0 999 999/ + 0 0 calc(var(--h) + var(--b)) calc(var(--h) + var(--b))/0 0 var(--h) var(--h); +} + +.bubbleRight { + /*Breite der rechten Bubble*/ + max-width: 70vw; + align-self: flex-end; + /* triangle dimension */ + --b: 1em; /* control the base */ + --h: .7em; /* control the height */ + --c: var(--inhalt-hintergrund-color);; /* controls color of bubble*/ + + padding: 1em; + border-radius: 1.2em; + clip-path: polygon(100% 0,0 0,0 100%, + calc(100% - var(--b)) 100%, + calc(100% + var(--h)) calc(100% + var(--h)), + 100% calc(100% - var(--b))); + background: var(--c); + border-image: conic-gradient(var(--c) 0 0) 0 999 999 0/ + 0 calc(var(--h) + var(--b)) calc(var(--h) + var(--b)) 0/0 var(--h) var(--h) 0; +} + + +/*STYLING FÜR BAUSTEIN: METHODOLOGY */ +.methodologyWrapper { + display: flex; + flex-direction: column; + position: relative; + padding: 2em; + border: 4px solid var(--untertitel-color); + border-radius: 35px; + background-color: var(--inhalt-hintergrund-color); + z-index: 0; +} + + +/*STYLING FÜR BAUSTEIN: VERGLEICH*/ +.vergleichUeberschriftWrapper{ + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.uberschriftVergleich{ + margin-bottom: -50px; + z-index: 1; +} + +.VergleichWrapper { + display: flex; + gap: 2em; + justify-content: space-between; + z-index: 0; + position: relative; +} + +.textfeldVergleich { + background-color: var(--inhalt-hintergrund-color); + padding: 2em; + border: 4px solid var(--untertitel-color); + border-radius: 35px; + line-height: 1.3; + width: 50%; +} + + +/*STYLING FÜR LEARNINGS*/ +.learningWrapper { + + display: flex; + flex-direction: column; + position: relative; + padding: 2em; + border: 4px solid var(--untertitel-color); + border-radius: 35px; + background-color: var(--inhalt-hintergrund-color); + z-index: 0; +} + +.learning{ + margin-top: -40px; +} + + +/*STYLING FÜR BAUSTEIN: AUFZÄHLUNGEN */ +.aufzaehlungWrapper { + display: flex; + justify-content: left; + z-index: 0; + position: relative; + padding: 2em; + border: 4px solid var(--untertitel-color); + border-radius: 35px; + background-color: var(--inhalt-hintergrund-color); +} + +.textFeldAufzaehlung{ + display: flex; + justify-content: left; + z-index: 0; + position: relative; + padding: 2em; + border: 4px solid var(--untertitel-color); + border-radius: 35px; + background-color: var(--inhalt-hintergrund-color); + margin-bottom: 0.1em; +} + +.aufzaehlung{ + display: flex; + align-items: center; + max-width: 90vw; + +} + +.pfeil{ + width: 2em; + height: auto; + margin-right: 1em; + flex-shrink: 0; +} + +/*STYLING FÜR BAUSTEIN: Conclusion*/ +.textFeldConclusionWrapper { + display: flex; + justify-content: center; + z-index: 0; + position: relative; + padding: 2em; + border: 4px solid var(--untertitel-color); + border-radius: 35px; + background-color: var(--inhalt-hintergrund-color); +} + + + + +/*STYLING FÜR BAUSTEIN: References*/ +.textFeldReferencesWrapper { + display: flex; + justify-content: center; + z-index: 0; + position: relative; + padding: 2em; + border: 4px solid var(--untertitel-color); + border-radius: 35px; + background-color: var(--inhalt-hintergrund-color); +} + +#ersteller{ + position: absolute; + bottom: -50px; + right: -25px; + width: max-content; + max-with: 90%; + gap: 0.8em; + padding: 0.5em 2em; + z-index: 1; + + display: flex; + align-items: center; + + border: 4px solid var(--untertitel-color); + border-radius: 50px; + background-color: var(--inhalt-hintergrund-color); + color: black; + font-size: 0.9em; +} + +#ersteller img{ + width: 5em; + border-radius: 50%; + background-color: var(--background-userIcon); +} + + + + +/*MEDIA QUERY für responsives Design*/ +@media screen and (max-width: 768px) { + main { + padding: 180px 50px 80px 50px; + } + + .h1Wrapper { + position: relative; + padding-bottom: 0; + margin-bottom: 0; + display: flex; + flex-direction: column; + align-items: center; + width: 100% + } + + .h1Wrapper::before { + position: absolute; + top: -25px; + left: -40px; + transform: scale(0.8); + } + + h1 { + font-size: 1.8em; + width: 90vw; + padding: 40px 20px; + } + + .basedOn { + position: relative; + top: -10px; + width: 85vw; + margin: 0 auto; + padding: 20px; + border-radius: 35px; + background-color: white; + z-index: 1; + } + + .basedOn::after { + content: ""; + position: absolute; + top: -20px; + right: -20px; + width: 50px; + height: 50px; + border: 2px solid black; + border-radius: 50%; + background-color: lightgrey; + z-index: 2; + + } + +} + +@media screen and (max-width: 600px) { + .basedOn { + width: 90%; + padding: 1em; + font-size: 0.85em; + } + + .basedOn::after { + top: -20px; + right: 1em; + width: 40px; + height: 40px; + } + + #ersteller { + flex-direction: column; + text-align: center; + margin-top: 2em; + } + + #ersteller img { + width: 3.5em; + } +} diff --git a/Functional Design/functionalDesign.html b/Functional Design/functionalDesign.html index e69de29..cbf663b 100644 --- a/Functional Design/functionalDesign.html +++ b/Functional Design/functionalDesign.html @@ -0,0 +1,220 @@ + + + + + The Influence of user Culture on Website Usability + + + + + +
+ +
+ +
+ +
+
+

The Influence of user Culture on Website Usability

+

+ Rukshan Alexander(a), Nik Thompson(b), Tanya McGill(c), David Murray(c) +
a Department of Economics and Management, Vavuniya Campus, University of Jaffna, Vavuniya, Sri Lanka +
b School of Management, Curtin University, Kent St, Bentley, 6102, WA, Australia +
c Discipline of Information Technology, Mathematics and Statistics, Murdoch University, South St, + Murdoch, 6150, WA, Australia

+
+
+ + + +
+

Introduction

+
+

+ Consumer behaviour is the study of individuals, groups, or organisations and all activities associated with the purchase, use and disposal of goods and services. It encompasses how the consumer's emotions, attitudes, and preferences affect buying behaviour, and how external cues—such as visual prompts, auditory signals, or tactile (haptic) feedback—can shape those responses. Consumer behaviour emerged in the 1940–1950s as a distinct sub-discipline of marketing, but has become an interdisciplinary social science that blends elements from psychology, sociology, social anthropology, anthropology, ethnography, ethnology, marketing, and economics (especially behavioural economics). +

+ +
+
+ + + +
+

Questions

+
+
+

+ “Culturally adapted websites enable users to achieve their goals more quickly and with fewer + errors, leading to higher satisfaction.” – Alexander et al., 2021

+
+
+

+ “A culturally adapted design leads to better user outcomes, even though familiarity with + international websites can mitigate the differences.” – Alexander et al., 2021

+
+
+
+ + + +
+

Methodology

+
+

+ In the paper "The Influence of User Culture on Website Usability" (Alexander et al., 2021), the authors used the following methods to gather data and assess the usability process:
+
+ Sample and Recruitment:
+ The study involved a total of 200 participants, split equally between 100 Australians and 100 + Chinese. These participants were recruited via an online panel, and each of them used a desktop + computer to complete the tasks.
+
+ Between-Subjects Design:
+ Participants were assigned to use either a culturally native website (i.e., Australian participants + used the Australian government website, and Chinese participants used the Chinese government website) + or a culturally foreign website (i.e., Australian participants used the Chinese government website + and vice versa). This between-subjects design allowed the researchers to compare how users from + different cultural backgrounds interacted with websites that were either familiar or foreign to them.
+
+ Metrics for Evaluation:
+ The researchers evaluated usability using three key metrics:
+
Effectiveness:
Measured by task success, which indicates whether participants were able to complete the assigned tasks on the website.
+
Efficiency:
Assessed by the time taken to complete the tasks and the number of errors made during the process.
+
Satisfaction:
Measured through a questionnaire that gathered participants’ subjective feelings and experiences about the usability of the websites they interacted with.
+
By using a combination of a controlled design, cross-cultural participant groups, and objective (task success, time/errors) and subjective (satisfaction) measures, the study was able to thoroughly assess how cultural differences influence website usability. +

+ +
+
+ + + + +
+
+

China

+

Navigation Structure

+

Australia

+
+
+

In contrast, Chinese websites often feature flatter structures with many direct links + to various sections of the site. This design is more aligned with the collectivist nature of Chinese + culture, where users tend to prefer immediate access to a broad range of information. The layout is + designed to provide quick access to multiple options rather than a linear navigation process.

+

Websites in Australia typically have deeper navigation structures with + hierarchical menus and fewer direct links. Australian users prefer to navigate through clearly + structured categories and subcategories. This design approach aligns with the more individualistic + culture, where users expect a more organized, step-by-step journey.

+
+
+ + + +
+
+

China

+

Information Density

+

Australia

+
+
+

Chinese websites, on the other hand, typically have a higher information + density. More content, links, and visual elements (such as icons, banners, and images) are often + displayed on a single page. This caters to the Chinese preference for having as much information as + possible visible at once to quickly navigate and make decisions.

+

Australian websites generally have a lower information density per page. + They tend to focus on minimalist design to avoid overwhelming users and to minimize errors. The goal + is to present information in a clear, easily digestible manner to ensure users don't get confused. +

+
+ + +
+

LEARNINGS

+
+

+ The key learnings from the paper "The Influence of User Culture on Website Usability" (Alexander et al., 2021) are:
+
+ Cultural adaptation improves usability:
Websites tailored to cultural preferences lead to better performance and satisfaction.
+
Cultural navigation differences:
Australians prefer deeper, hierarchical navigation, while Chinese users favor flatter structures with more direct links.
+
Information density:
Australians prefer minimalist designs with less information per page, while Chinese users are accustomed to high-density pages.
+
Exposure to international designs:
Chinese users adapted better to Australian designs, showing that familiarity with international websites can lessen cultural differences.
+
Global websites need cultural consideration:
Tailoring designs to cultural contexts improves user experience and gives a competitive edge.

+
+ +
+ +
+ + + + +
+ +
+ +

+ For educators and designers, the research paper "The Influence of User Culture on Website Usability" highlights three key takeaways: +

+
+ +
+ Arrow Icon +

+ Emphasize cultural awareness: Educators should teach the importance of understanding cultural differences in user behavior, and designers should integrate cultural preferences into the design process to ensure websites are more usable for diverse audiences. +

+
+ Arrow Icon +

+ Adapt website designs to cultural needs: Designers should customize navigation, information density, and overall layout based on the target culture to improve usability, user satisfaction, and efficiency. +

+
+
+ Arrow Icon +

+ Test across cultures: Both educators and designers should promote cross-cultural testing to identify potential usability issues and ensure websites perform well for users from different cultural backgrounds.

+

+
+
+ + + + +
+ +
+

+ The study "The Influence of User Culture on Website Usability" highlights the significant impact of + cultural differences on website usability. It demonstrates that adapting website designs to meet the + cultural preferences of users—whether in navigation structure, information density, or visual + presentation—can lead to better user performance and satisfaction. +

+
+ + +
+ +
+

+ References + Research Paper: https://www.academia.edu/107554685/The_Influence_of_User_Culture_on_Website_Usability +

+
+ +

Franziska Nestler
Functional Design

+
+
+ +
+ + +
+ + \ No newline at end of file diff --git a/Vorlage/vorlage.html b/Vorlage/vorlage.html index 4ba24bc..291ba3d 100644 --- a/Vorlage/vorlage.html +++ b/Vorlage/vorlage.html @@ -2,7 +2,7 @@ - Hier könnte dein Titel stehen + The Influence of user Culture on Website Usability @@ -24,10 +24,13 @@
-

Do Culture and Gender Shape How We Learn Through Games?

+

The Influence of user Culture on Website Usability

- based on the scientific paper: Gender and Cultural Differences in Game-Based Learning Experiences by Heide Lukosch1, Shalini Kurapati1, Daan Groen2 and Alexander Verbraeck2; 1Delft University of Technology, The Netherlands; 2InThere, The Hague, The Netherlands -

+ Rukshan Alexander(a), Nik Thompson(b), Tanya McGill(c), David Murray(c) + a Department of Economics and Management, Vavuniya Campus, University of Jaffna, Vavuniya, Sri Lanka + b School of Management, Curtin University, Kent St, Bentley, 6102, WA, Australia + c Discipline of Information Technology, Mathematics and Statistics, Murdoch University, South St, + Murdoch, 6150, WA, Australia

@@ -50,15 +53,13 @@

Questions

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, - sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, - et dolore magna aliquyam.

+ “Culturally adapted websites enable users to achieve their goals more quickly and with fewer + errors, leading to higher satisfaction.” – Alexander et al., 2021

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor - invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos - no sea takimata sanctus est Lorem ipsum dolor sit amet..

+ “A culturally adapted design leads to better user outcomes, even though familiarity with + international websites can mitigate the differences.” – Alexander et al., 2021

@@ -69,8 +70,26 @@

Questions

Methodology

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. . - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. + In the paper "The Influence of User Culture on Website Usability" (Alexander et al., 2021), the authors used the following methods to gather data and assess the usability process: + + Sample and Recruitment: + The study involved a total of 200 participants, split equally between 100 Australians and 100 + Chinese. These participants were recruited via an online panel, and each of them used a desktop + computer to complete the tasks. + + Between-Subjects Design: + Participants were assigned to use either a culturally native website (i.e., Australian participants + used the Australian government website, and Chinese participants used the Chinese government website) + or a culturally foreign website (i.e., Australian participants used the Chinese government website + and vice versa). This between-subjects design allowed the researchers to compare how users from + different cultural backgrounds interacted with websites that were either familiar or foreign to them. + + Metrics for Evaluation: + The researchers evaluated usability using three key metrics: + Effectiveness: Measured by task success, which indicates whether participants were able to complete the assigned tasks on the website. + Efficiency: Assessed by the time taken to complete the tasks and the number of errors made during the process. + Satisfaction: Measured through a questionnaire that gathered participants’ subjective feelings and experiences about the usability of the websites they interacted with. + By using a combination of a controlled design, cross-cultural participant groups, and objective (task success, time/errors) and subjective (satisfaction) measures, the study was able to thoroughly assess how cultural differences influence website usability.

@@ -81,13 +100,19 @@

Methodology

-

Vergleich 1

-

Vergleich der beiden Punkte

-

Vergleich 2

+

China

+

Navigation Structure

+

Australia

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+

In contrast, Chinese websites often feature flatter structures with many direct links + to various sections of the site. This design is more aligned with the collectivist nature of Chinese + culture, where users tend to prefer immediate access to a broad range of information. The layout is + designed to provide quick access to multiple options rather than a linear navigation process.

+

Websites in Australia typically have deeper navigation structures with + hierarchical menus and fewer direct links. Australian users prefer to navigate through clearly + structured categories and subcategories. This design approach aligns with the more individualistic + culture, where users expect a more organized, step-by-step journey.

@@ -95,13 +120,19 @@

Vergleich 2

-

Vergleich 1

-

Vergleich der beiden Punkte

-

Vergleich 2

+

China

+

Information Density

+

Australia

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+

Chinese websites, on the other hand, typically have a higher information + density. More content, links, and visual elements (such as icons, banners, and images) are often + displayed on a single page. This caters to the Chinese preference for having as much information as + possible visible at once to quickly navigate and make decisions.

+

Australian websites generally have a lower information density per page. + They tend to focus on minimalist design to avoid overwhelming users and to minimize errors. The goal + is to present information in a clear, easily digestible manner to ensure users don't get confused. +

@@ -109,9 +140,14 @@

Vergleich 2

LEARNINGS

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -

-
+ The key learnings from the paper "The Influence of User Culture on Website Usability" (Alexander et al., 2021) are: + + Cultural adaptation improves usability: Websites tailored to cultural preferences lead to better performance and satisfaction. + Cultural navigation differences: Australians prefer deeper, hierarchical navigation, while Chinese users favor flatter structures with more direct links. + Information density: Australians prefer minimalist designs with less information per page, while Chinese users are accustomed to high-density pages. + Exposure to international designs: Chinese users adapted better to Australian designs, showing that familiarity with international websites can lessen cultural differences. + Global websites need cultural consideration: Tailoring designs to cultural contexts improves user experience and gives a competitive edge.

+ @@ -125,26 +161,25 @@

- If you're designing or using games for learning, here is a takeaway: + For educators and designers, the research paper "The Influence of User Culture on Website Usability" highlights three key takeaways:

Arrow Icon

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -

+ Emphasize cultural awareness: Educators should teach the importance of understanding cultural differences in user behavior, and designers should integrate cultural preferences into the design process to ensure websites are more usable for diverse audiences.
Arrow Icon

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. + Adapt website designs to cultural needs: Designers should customize navigation, information density, and overall layout based on the target culture to improve usability, user satisfaction, and efficiency.

Arrow Icon

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. + Test across cultures: Both educators and designers should promote cross-cultural testing to identify potential usability issues and ensure websites perform well for users from different cultural backgrounds.

@@ -156,8 +191,10 @@

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -

+ The study "The Influence of User Culture on Website Usability" highlights the significant impact of + cultural differences on website usability. It demonstrates that adapting website designs to meet the + cultural preferences of users—whether in navigation structure, information density, or visual + presentation—can lead to better user performance and satisfaction.
@@ -166,11 +203,42 @@

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. + References + Research Paper: https://www.academia.edu/107554685/The_Influence_of_User_Culture_on_Website_Usability + Al-Badi, A., 2009. Designing usable localised websites: differences between Western and + Arab cultures. IBIMA Business Review 2, 9–19. + Al-Khalifa, H.S., Garcia, R.A., 2014. Website design based on cultures: an investigation of + Saudis, Filipinos, and Indians government websites’ attributes. Lect. Notes Comput. + Sci. 8518, 15–27. + Alexander, R., Thompson, N., Murray, D., 2016. Towards cultural translation of websites: + a large-scale study of Australian, Chinese, and Saudi Arabian design preferences. + Behaviour and Information Technology 36, 351–363. https://doi.org/10.1080/ + 0144929X.2016.1234646. + Alexander, R., Thompson, N., Murray, D., 2017a. Cross-Cultural Web Design Guidelines. + In: 14th International Conference on Web for All (W4A-2017). Perth. + Alexander, R., Thompson, N., Murray, D., 2017b. Cross-Cultural Web Usability Model. In: + The 18th International Conference on Web Information Systems Engineering (WISE + 2017. Cham, Puschino, Russia. Springer. + Alghamdi, A.S., Al-badi, A.L.I.H., Alroobaea, R., Mayhew, P., 2013. A comparative study + of synchronous and asynchronous remote usability testing methods. International + Review of Basic and Applied Sciences 1, 61–97. + Alharbi, A., Mayhew, P., 2015. Users’ performance in lab and non-lab environments + through online usability testing: a case of evaluating the usability of digital academic + libraries’ websites. In: 2015 Science and Information Conference (SAI). London, UK. + IEEE, pp. 151–161. + Alostatha, J.M., Metleb, M.K., Alic, L.A., Abdullahd, L.R.A., 2011. Cross-use pattern + language: cross-cultural user interface development tool. Procedia Computer Science + 3, 1541–1550. + Alyahyan, L., Aldabbas, H., Alnafjan, K., 2016. Preferences of Saudi users on Arabic + website usability. International journal of Web & Semantic Technology 7, 1–8. + Aroshine, M., 2017. A culture-centered design approach to improve a user interface for + migrants. (Master’s Programme in Human-Computer Interaction). KTH Royal + Institute of Technology. Retrieved from. http://www.diva-portal.org/smash/get/ + diva2:1141491/FULLTEXT02.pdf.

-

Wenxi Yang
Gamification

+

Franziska Nestler
Functional Design