Category: Interaction Design

Ontology:

• What assumptions are you making about the reality of the phenomena or issues you are researching?: 
  1. Women face challenges when entering the professional world.
  2. The transition from academia/university life to work one is overwhelming.
  
• Do you view these as objective facts (existing independently of individuals’ perceptions) or as subjective constructs (shaped by personal experiences and cultural influences)?:
  I think for both cases it is a combination of both.
  

Epistemology:

• What are the primary sources from which you will or have derived knowledge about your research topic (e.g., empirical data, theoretical frameworks, personal experiences, cultural narratives)?: 
  Empirical data (surveys, interviews, etc.), theoretical framework + probably my own experience as well
  
• Consider if your understanding is mainly theoretical (based on concepts) or empirical (based on observations or data): 
  Empirical, since information from surveys and/or interviews will provide real-life examples, experiences, and ideas for solutions.
  
• Identify any potential limitations in your understanding or approach. Reflect on how your background or perspective might influence your interpretation of the research:
  To my mind, a person’s (in this case my own) professional background might influence the interpretation of the research because these depend on a person’s previous experiences, studies they did, and collected knowledge as well. Previous background and cultural differences as well may affect how a person thinks, solves problems, and their way of going through the process.

Continuing my journey of reading through the most popular design literature (previously read: Hooked by Nir Eyal and The Design of Everyday Things by Don Norman), I looked at 100 Things Every Designer Needs to Know About People by Susan Weinschenk.

I found this book to be rather an amalgamation of many other design resources. In that way, it’s a quick, very visual guide to many design basics. However, I felt this repetitiveness made it less useful for anyone even a little familiar with design. The 100 things ranged from the very familiar (ex. 9. “People believe that things that are close together belong together”) to the less familiar, and more nuanced (ex. 74. “Stories and anecdotes persuade more than data alone”). I still found this book to be a good refresher on some basic points, offering food for thought and helpful data points to return to.

For this impulse, I read the first chapter of The Design of Everyday Things by Don Norman. This book is considered by many to be the bible of interaction and industrial design, and although I have read bits and pieces over the years, I can’t say I have ever read it cover to cover. In an earlier post, I wrote about my desire to keep one foot behind me, reaching back to the basics of design to build strong theoretical and methodological foundations as I work on my thesis. Reading this book is a big part of that. I am planning on reading the entire book, but for this post I will highlight the first chapter, entitled “The Psychopathy of Everyday Things”.

This chapter first introduces “Norman doors”, or doors without clear signifiers on how to open them. From there, Norman continues with an analysis of all the ways the objects in our life do and do not work for us, and why this happens. Norman touches on his past as an engineer, noting the tendency of engineers to be overly logical and fail to understand and anticipate human behaviour as it actually is, rather than how it would be in an idealized world. Similarly, designers can fail to anticipate the response to their designs by believing that every user has the same conceptual model as they do. Norman also laments the rising complexities in our technologies, citing watches with too many buttons whose functions are not obvious and his own fridge with incredibly misleading hardware. At the end of the chapter, Norman imagines how technology will only become more powerful, and if not designed well, more frustrating to use.

“Hooked: How to Build Habit-Forming Products” by Nir Eyal

For my 5th Impulse, I decided to choose a book “Hooked: How to Build Habit-Forming Products” by Nir Eyal. At the core of the book lie principles and an understanding of how habits are formed while using certain products or services. The main goal the author had was to show how design decisions can be used to captivate the user’s attention, and make them use the product more.

I chose this book because it also explains the psychology of user engagement but also shows real examples from already existing products and how they were created, which decisions were made, and how they affected the user’s experience.

To my mind, Eyal’s method of the “Hook Model” for product and service creation can be used for my thesis work as well. It will help to create a product that will trigger curiosity and make people engage more. Additionally, by understanding and using psychological drivers for habit formation, it is easier to design a product that really resonates with people.

Today I was invited to visit the Talent Center at the WK Styria. Mr. Pichler, the manager of the talent center gave me a very warm welcome and showed me the facilities. The building is very impressive and he told me that every day they have 40-50 teenagers at the talent center doing interest and skill tests and trying out VR applications. Surprisingly he also told me that they currently work on Virtual Reality simulations to try out different jobs. Currently they have three different jobs the teenagers can try out. I was allowed to do virtually bricklaying on the roof of the talent center. The visuals and the interaction were really great and it was so much fun to test it out. Mr. Pichler also told me about the companies who were involved in creating the VR simulation. They did not communicate any of those simulations yet as they just started.

Mr. Pichler was really curious about my thesis and offered me to help also regarding the user testing which was super encouraging towards my project. He gave me some tips in terms of motion sickness and realistic features. All in all I was super impressed by the simulation and had a lot of fun it trying out.

Links:

https://talentcenter.at

no 3rd. link available

Auf der Suche nach Literatur zu meinem Thema stieß ich auf eine interessante Studie vom 23. Oktober 2023. In dem Paper „Glazko, Kate S., et al. “An Autoethnographic Case Study of Generative Artificial Intelligence’s Utility for Accessibility.” Proceedings of the 25th International ACM SIGACCESS Conference on Computers and Accessibility. 2023“ untersuchte ein Team von Wissenschaftler*innen aus den USA, New York, die Nützlichkeit von generativer künstlicher Intelligenz (GAI) für die Bedürfnisse von Menschen mit und ohne Behinderung. Die Testpersonen nutzten verschiedene GAI, darunter Github Copilot, Midjourney, DALL-E, GPT-4, GPT3, ChatPDF und Bing, um ethisch bedenkliche, voreingenommene und/oder diskriminierende Annahmen zu untersuchen.

Mit Amalgamen erforschten sie in 7 Fallstudien zwischen März 2023 und Oktober 2023, ob ChatPDF ein barrierefreies PDF erstellen kann. Ein Autist durchlief diverse GPTs, um Texte zu übersetzen und von anderen bewerten zu lassen. Ein blinder Softwareentwickler ließ mit GAI Code für eine App erstellen und baute diese. Eine Fallstudie prüfte HTML-Inhalte durch GPT-4 auf digitale Barrieren. Und noch weitere 5 Fallstudien. In allen sieben Fallstudien war der GUI-Einsatz unbefriedigend und begünstigte Behindertendiskriminierung. Ein Beispiel war die Frage an Midjourney: “group of people with a variety of disabilities looking happy, illustration format” The resulting images are not representative of many disabilities and “inaccurate [in their] use of assistive technologies” even after specific requests in new prompts. Also, despite repeated attempts to vary the prompt, Midjourney can “only represent disabled happiness as attending a party”.. [S.4]

Zusammenfassend schließen die Forscher*innen darauf, dass dies auf ein “lack of relevant training data” und “Build-in Ableism by biases in training data” zurückzuführen ist. Ohne ethisch besseres Material für Machinelearning wird diese Hürde immer bestehen bleiben.

https://dl.acm.org/doi/pdf/10.1145/3597638.3614548

Vieritz, Helmut. (2015). Barrierefreiheit im virtuellen Raum: Benutzertentrierte und modellgetriebene Entwicklung von Weboberflächen. Wiesbaden: Springer Verlag

Ich habe mir das Buch Vieritz, Helmut. (2015). Barrierefreiheit im virtuellen Raum: Benutzertentrierte und modellgetriebene Entwicklung von Weboberflächen. Wiesbaden: Springer Verlag. ausgeliehen in der Hoffnung, daraus für meine Masterarbeit zitieren zu können. Leider musste ich feststellen, dass der Inhalt zu technisch und spezifisch für die Softwareentwicklung im Bereich digitaler Barrierefreiheit ist und nicht ausschließlich auf Weboberflächen abzielt. Zwischendurch schreibt der Autor auch über Coding Standards, die ich zwar verstehe, aber für meinen Fall weniger anwenden kann. Daher werde ich dieses Buch nicht als direkte Quelle verwenden können. Aber, was ich trotzdem gefunden habe, sind ein Haufen weiterer Quellen und Referenzen. Meine Literaturrecherche erweitert sich nun und ich habe eine Menge an weitere Nachschlagewerke gewonnen. Und nicht nur das, durch die vielen technischen Einblicke konnte ich zudem auch einiges über DIN und ISO Normen in diesem Bereich sowie über Rechtstexte und Gesetze erfahren, an was ich zuvor nicht gedacht habe, aber durchaus wertvoll für meine Zwecke sind.

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