The term gamification emerged around 2010. It serves as collective term for including game-based elements into non-game-based activities and applications. Using game elements should increase the engagment of users and enhances User Experience. Most importantly it make non-gmae-based tasks more interessting, engageing and the user is more motivated to finish those tasks. (656-657) [1]

It is worth to take a look at the concept of gamification pattern. There are certain pattern that are very successfully used within non-game apps and software. It is well reasearched that certain pattern can lead people to get addicted to games, so some of those pattern should also work in normal environments, and indeed it does. Still it is important to distinguish between motivational design patterns and game design patterns. While motivational pattern offer more autonomy and flexibility, they can be combined in parallel, Game design pattern are influencing each other. A motivational pattern must meet user needs to be successful. It is not neccessary for the user to understand the functionality. For successful implementation, a motivational design pattern must meet user needs, even if users aren’t consciously aware of its functionality. Whereas recognising a pattern is important for gamification makes it possible to find order in chaos and/or recognise connections between different types of information. Humans are used to recognize pattern, existing in concepts, behaviors, historical events. They are important or us to make the future more predictable and guide our decision-making across various fields. So it is also a part of the gamification pattern to find those patterns. Successfull and effective gamification relies on our motivational drivers rather than just on including game elements ike badges, points, or leaderboards. Yu-kai Chou is a researcher in the filed of games. He created the „Octalysis framework“, in which he outlines eight core drivers of motivation. Those are essential for successful games. While this is very interesting for games, it is not so neccessary for gamification. (665-667) [2]

Nadya Direkova is a known designer and User Experience Manager at Google Fitbit. She previously directed R&D at Airbnb and helped establishing Google’s Sprint Leader Academy. She is also very exerienced with game design pattern. [2]
According to her, in gamified applications there are three critical aspects of user engagement: the first one is to encourage users to try, second is the social participation, and keeping the users commitment. Each one involves specific design patterns used for various stages of the user journey.

Direkova defines three gamifaction stages that are neccessary for successfull user engagement:

1. “Come and try the new gamified product or service,”
2. “Bringing Friends to try the new gamified product or service”
3. “Come back to retry the new gamified product or service (as frequent customers)”

These aspects are crucial for successful gamified applications and they rely on the implementation of various game mechanics. These can be categorized under each of the three stages:

1. Prize and Awards: This is used to attract user interest, often seen in gaming and non-gaming contexts.
2. Visual Storytelling: Integration of visual features to increase engagement and effectively communicate values
3. Visual Cues: Visual elements in software applications are specifically designed to ease user interaction.
4. Tutorials and Coaching: Those are designed to help users with navigation and specific features.
5. Reward Schedule: Rewaring user for tasks in moderate dosage to maintain motivation
   
   
6. Gated Trial-Form a team to start: This encourages social engagement by inviting users to work together.
7. Design Conversations: Easy social feedback and bondage through chat and comments.
8. Structured Social Feedback: Urges users to express opinions and preferences, allowing vital feedback.
9. Reputation: Establishes user status within a community or platform, fostering belonging and engagement.
10. Sharing Achievements: Allows users to showcase their achievements to others, boosting engagement.
11. “Come back to retry the new gamified product or service (as frequent customers)” patterns:
    • Create Scores: Monitoring and displaying scores that drive specific behavior or actions.
    • Throttle Actions: Gradually presents challenges after achieving scores, maintaining user interaction.
    • Advanced User Paths: Offers simple-to-complex tasks, such as assigning privileges based on user ranks, fostering continuous engagement.

These patterns are engaging users at different stages. Implementing those pattern is fundamental for successful gamification in software applications. [1] (667-671)

Those design patterns can be also be used in other environments, they can play a vital role in teaching and learning. Ivanov and Breuer colleced a set of 36 design patterns that can be used in the field of innovations.

These patterns are structured across four dimensions:

I. Domains of challenges: 12 domains linked to operational, strategic, and normative innovation management

II. Challenges tackled by gamification: Focused on typical innovation and entrepreneurship challenges

III. Flow patterns: These are reusable interactions among participants that address specific innovation or entrepreneurial challenges. There are 11 flow patterns such as Agile Retrospective, Ideation, and Workshop Facilitation.

IV. Component patterns: These are standalone game elements. There are 25 component patterns like Challenges, Rewards, Storytelling, and Voting.

The study focuses on innovation management, but also has potential for application in other areas. These patterns provide solutions for abstract concepts to translate them into working practices. Flow patterns get participants to understand values in different organisations. Gamification workshops raise awareness of new values and encourage experimentation with real-life tasks.

[1] Gamification Design Patterns for User Engagement, Serafeim A. TRIANTAFYLLOU1, Christos K. GEORGIADIS, Informatics in Education, 2022, Vol. 21, No. 4, 655–674

[2] https://www.linkedin.com/in/nadyadirekova/; 02.01.2023

[3] Design Patterns to Teach and Learn About Gamification for Innovation, Kiril Ivanov, Henning Breuer, This paper was presented at The ISPIM Innovation Conference – Innovating Our Common Future, Berlin, Germany on 20–23 June 2021. Event Proceedings: LUT Scientific and Expertise Publications: ISB

https://talks.ui-patterns.com/speakers/nadya-direkova

Inclusive Design means for everyone and every situation. Accessibility enhences usability. Therefore good responsive design plays a crucial role in inclusive design practices. Following some responsive principles, ensures inclusive and user-friendly digital experiences across diverse devices and user preferences.

Content breakpoints or tweakpoints
One crucial aspekt that springs in mind when talking about responsiveness are breakpoints. Creating fixed breakpoints however will not always lead to a good experience according to the diverse range of viewport variations available. Instead, designers should create flexible design from the beginning, implementing breakpoints where the content breaks the layout. This delievers successful layouts across various devices. As the content reaches a point of collision, overlap, or wrapping, when resizing the window, it becomes evident where breakpoints are needed.

Avoid fixed width or heights

Another rule according to always deliver a good content is to avoid fixed widths or heights off elements. Instead use the innate flexibility of boxes to accommodate content across various spaces.

Pinch-to-zoom

Another pattern, a more technical one is the enabling of pinch-to-zoom via the viewport meta tag. It is essential for responsive design functionality. Disabling this feature can make user experience worse by making text too small to read, limiting the view of image details and making it utterly complicated to select text for copy/paste.

Responsive Font-size

A good practice for setting font-size in responsive design is setting the font size as a percentage on the root (<html>) element. For consistency when resizing font-size, padding, and margin, relative units like rem or em are to be preferred. These units ensure that scaling is proportionately on all pages, so it is also easy to use for consitency reasons.

Viewport units

Additionally, viewport units (vh and vw) can be used to create text that scales relative to the height or width of the viewport. Using viewport units enables responsive text without the use of extensive media queries. This guarantees a minimum font size and allows incremental scaling and proportionate adjustments relative to the viewport size.

Website Structur

The use of semantic HTML guarantees technical accuracy for users of assistive technologies and at the same time determines the interaction behaviour for predictability and efficiency.

Webfonts

Although there are special fonts for the web, webfonts can still become a major issue for readability. There is an effect called FOIT (flash of invisible text), which might leave users on a page without visible text if the font is not loaded. To avoid this a default font should be embedded in the stylesheet. This in turn, might show the text but might result in FOUT (flash of unstyled text). It causes a sudden transition and jumping of linies when the system fonts changes to web fonts. To avoid this select a fallback system fonts with similar intrinsic dimensions.

Skip Link

Skip links allow keyboard users to easily move through the page via keyboard and bypass the navigation and header content. They primarily help screen reader users, but are also helpful for those who rely on keyboards by providing efficient navigation.

Formating Text

Text can be a big pitfall when it comes to readability. Although it should be clear by nowadays that text must be formatted according to the medium and that different principles apply to the formatting of text on the web than in print design, it very often happens that texts on the web are difficult to read for all users because this has not been taken into account.

Text justification is almost never a good choice. It works in print because there you could manually break lines and avoid empty spaces but it will not work with flexible boxes. This diminishes readability due to uneven word spacing for all users, not only handicapped ones. Using the default text-alignment left provides better readability. Also adjusting the line height or leading of textblocks is neccessary. A bigger line-height makes ensure readability.

Content

When it comes to content, it is essential to be aware of the importance of creating engaging and accessible content. Writing content is often outperformed by the visual design. Nevertheless it is an essential aspect of designing a website that deserves equal attention. Content creation should not be postponed and must be integrated into the overall design strategy.(66) The readability of written content relates to comprehension. Tools such as the Flesch-Kincaid readability test can be used to assess content. Content is scored on a scale from 0 to 100, with a higher score indicating a more reader-friendly text. Similarly, the Flesch-Kincaid level test gives a US school grade indicating readability based on the age of the target audience. A higher grade indicates more complex content that is less accessible to younger readers. (88-89)

Videocontent

It is good practice to subtitle videos. Closed captions contribute greatly to inclusion. Subtitles should be available as a separate file rather than embedded so that users have the option to enable or disable them. Subtitles in videos are important, improving accessibility for a wider audience. They serve not only the hearing impaired, but anyone temporarily unable to hear audio, in public places for example. (97).

Links

Links should be labled. For screen reader and keyboard support, identifying links could be a challange. This additional text should not replace the existing link text, but rather be appended or prepended to it. The use of visually hidden text that is accessible to screen readers, such as “Current page”, is a suggested approach to improve link identification (135). Labelling interactive elements is fundamental to accessibility. Each interactive element should have an accessible name to facilitate interpretation and communication using assistive technologies. This is in line with WCAG criterion 4.1.2. Such considerations contribute significantly to the creation of an inclusive digital environment. [1]

One of the main ressourches or accessibility are W3C specifications for accessibility which offer implementation solutions aligned with the accessibility guidelines. This approach closes the gap between human-computer interaction and the development of accessible web applications.

Accessibel patterns are categorized according to three primary functions. The three categories are:

1. Web content: How the content is organized on the webpage
2. Navigation structures across all pages
3. User interaction components, such as CTA-Buttons

This pattern language presented at W3Cis a reference for web designers and accessibility tester. It presents a structured overview of design knowledge regarding accessibility. The classification of the patterns according to functions and the abstraction level makes it easy to pick the relevant patterns for each specific design issues. It is crucial to prioritize accessibility in structure and content for the web. [2]

1 Inclusive Design Patterns, Heydon Pickering, 2016, Freiburg, Germany https://www.smashingmagazine.com/2016/10/inclusive-design-patterns/

2 Daniela Fogli, Loredana Parasiliti Provenza, and Cristian Bernareggi. 2010. A design pattern language for accessible web sites. In Proceedings of the International Conference on Advanced Visual Interfaces (AVI ’10). Association for Computing Machinery, New York, NY, USA, 307–310. https://doi.org/10.1145/1842993.1843048