Pattern and culture

Some design Patterns might be relevant in international context. Design patterns are commonly assumed to possess universal validity, but it’s important to recognize that they are inherently contextual. Each design pattern is intricately linked to a specific environment, and the extent to which these patterns hold true in diverse cultural contexts remains largely unexplored by researchers. Consequently, the validity and effectiveness of design solutions in different cultural settings have yet to be thoroughly examined.The proposed design pattern network can be likened to a design system, such as service design, in which each individual element (design pattern) comprises a combination of socio-technical components. These components encompass technology, team management and tutoring, and social interaction. However, not all of these components are given equal consideration within a design pattern. Some patterns prioritize technological aspects, while others emphasize social mechanisms, team management, and tutoring. certain patterns may not achieve equal success across different cross-cultural contexts while certain design patterns have universal applicability. [1]

In the paper Mobile Gaming with Children in Rural India the researchers outlines the approach, which leverages game design patterns commonly observed in successful earlier games, utilizing them as fundamental building blocks to inspire and inform the development of new game designs. Games also have design patterns which are relevant for the success of the game and they help designers with less experience to design a good game. Björk, S., and Holopainen J pubilshed a compendium of Patterns in Game Design in 2005.The experiment showed that generalizing patterns might not lead to the best results. There are crucial contextual factors that must be considered when employing patterns to design mobile games especially for the target users in rural India. On one hand, patterns can indeed serve as fundamental elements for crafting successful games. However, on the other hand, if patterns are not applied in a manner that aligns with the contextual and cultural nuances, it is likely to result in bad gameplay experiences.Another interesting result was that time pressure, which is often employed to enhance the challenge and engagement of games, might not work as good with people that have less experience with playing video or computer games. Another finding was aesthetics especially colours are very important for the user experience. If players could change the colours of the game to their likeings makes the game experience even better. The stong relation to colour might be related to the indian culture were vibrant colours are part of every day life and cultural events. [2]

In the paper of Oh, JM., Moon, N. Towards a cultural user interface generation principles the authors discuss various faktors thaht are relevant for good UI related to culture. Techno-social design involves the combination of technology and social interaction to facilitate and understand communication between people or between people and technology. Many apps and websites today are international, so it is also important to do global design. Culture-centred design can be understood as a design process that focuses on the intended user group and their cultural environment. Design decisions should therefore also take cultural specificities into account. The behaviour of users, or their behavioural pattern, is strongly dependent on their cultural background. The cultural dimensions model reveals the attributes of content consumption and the preferred types of content based on cultural regions. In the United States, there is a significant interest in news, broadcasting, economy, and sports, whereas in Japan, the interest is primarily focused on news, economy, sports, and shopping. On the other hand, in China, the interest tends to prioritize broadcasting, economy, the latest issues, and news. The existence of country-specific preferences for both websites and mobile application usage highlights the importance of considering cultural user interface (UI). Cultural UI should not only encompass visual factors but also prioritize information structure based on cultural preferences. Cultural markers are a methodology to identify and incorporate signs and cultural symbols within different cultures, serving as important design factors for interfaces. This includes colors, layout, language, icons, and sounds that resonate with specific cultural groups. By leveraging cultural markers, the unique cultural characteristics of each country can be naturally conveyed to users. It is also important to incorporate cultural specifics into the “look & feel” of the application or website. The crucial elements of cultural markers (CMs) encompass color, language, text/typography, and layout which are implemented as factors that are reflected in visual design. But The sole application of all processes that incorporate cultural preferences and characteristics might lead to unwanted rsults. Therefore, the implementation of Cms should involve relevant designers and experts. A UI that incorporates cultural characteristics delivers exceptional usability, a sense of affinity, effortless navigation, reliability, and a high-quality user experience. Moreover, it fosters a personalized and interactive interface at an individual level. [3]

The research of cultural markers in websites from 2003 highlights the significance of cultural dimensions when designing websites for diverse cultural environments. The values and visual characteristics of “cultural markers,” essential attributes in web design show variations for different cultures. The study had a checklist of general design elements and culturally specific design elements, referred to as “cultural markers,”. The study was conducted and compared with 40 website in South Korea and the UK. The researchers made a list of attributes. They had 3 categories in which they compared the websites. First were the verbal attributes such as language, formats of time, date, phonenumbers etc.; Visual attributes like images, colour, typefaces and layouts. The third categorie was audiovisual attributes like sound, animation and 3D. The findings indicate minimal differences in format, 3D, sound, logo placement, title placement, and typography of text. However, notable differences exist in color, menu placement, menu layout, and text animation and movement, which are considered significant factors. [4]

[1] Schadewitz, Nicole (2009). Design patterns for cross-cultural collaboration. International Journal of Design, 3(3) pp. 37–53.

[2] Mobile Gaming with Children in Rural India: Contextual Factors in the Use of Game Design Patterns, Matthew Kam, Vijay Rudraraju, Anuj Tewari and John Canny, 2007

[3] Oh, JM., Moon, N. Towards a cultural user interface generation principles. Multimed Tools Appl 63, 195–216 (2013). https://doi.org/10.1007/s11042-012-1017-0

[4] R. Juric, I. Kim and J. Kuljis, “Cross cultural Web design: an experiences of developing UK and Korean cultural markers,” Proceedings of the 25th International Conference on Information Technology Interfaces, 2003. ITI 2003., Cavtat, Croatia, 2003, pp. 309-313, doi: 10.1109/ITI.2003.1225362.

Anti-pattern

Anti-patterns often result from a quickfix to a problem. They might look like the right solution but are not that good in practice. Anti-pattern are also not dark pattern. The difference is that dark pattern use psychological knowledge to mislead while anti-pattern design happens when the solution does not fit the context, and is still recurring in the design. Anti-pattern are created out of fixing problems. The solution should solve a problem and seems to help in the short term but is not a good solution on the long run. The solution would be okay but does not fit the specific context. There are structural problems or issues with management that lead to bad design. Also finding a workaround for an issue caused by outdated technology can lead to anti-pattern design.

Anti-patterns can be categorised according to the problems they cause.

There might be an increased cost of interaction, which means additional taps for certain features or increased thumb stretching, like if buttons are located at a hard-to-reach position for the thumb. Also increased context switching can appear when not using transitions for changing the layout.
Increased confusion across platforms can happen when icons are used that usually mean something else.

By observing the usual rules those problems can be avoided. It becomes more difficult when the anti-pattern grows into an established design pattern. For example, the use of the hamburger menu, evolving when phones and tablets got popular. Therfore every new UI pattern has to be very well considered.

As normal design pattern had their origin in software, antipatterns also appear in software development. Apps have to be constantly adapted to new user requirements and in the process, solutions may not fit, thus unintentionally creating bad solutions, i.e. antipatterns. Detecting and improving these antipatterns improves the quality of the software. Using antipattern can also lead to higher costs for maintance. [2]

Design patterns have been introduced to collect solutions that have proven to be good, while anti-patterns represent solutions that have not proven to be good.

There are a number of rules and guidelines for the design of user interfaces. These are often too simple or abstract, or they conflict with other rules. It also depends on the designer whether he understands the underlying problem and how to solve it, and how he interprets the guidelines. Guidelines are more on the meta-level, whereas design patterns start from a concrete problem and are much more specific which makes them a better tool than guidelines.

Appleton [B. Appleton, “Patterns and Software: Essential Concepts and
Terminology,” http://www.bradapp.com/docs/patterns-
intro.html, retrieved: January 2017.] distinguishes between two kinds of anti-patterns:

1. Those that describe a bad solution to a problem,
which resulted in a bad situation.
2. Those that describe how to get out of a bad situation and how to proceed from there to a good solution.
The second type of anti-pattern is also known as an “Amelioration Pattern” [The Portland Pattern Repository Wiki. http://c2.com/cgi/wiki,
retrieved: January 2017.].

Amelioration patterns are a combination of the first category, the description of a bad solution with showing a regular pattern for the solution.

Antipatterns are often created with the best intentions – they might “look like a good idea, but whichbackfire badly when applied.” [J. O. Coplien, “Software Patterns,” SIGS Books, New York, NY, USA, 1996.] Often it is not so obvious if the solution is a dark pattern.

Mirnig and Tscheligi decribed a in their paper what what criteria an antipattern must fulfil, based on the criteria a regular pattern must have.

The antipattern musst like the regular pattern be available and be easily found. It needs an description of the problem and a context description. The structure is almost the same, because the reader needs to understand why the solution is not working in this context. The only difference comes with the descriptio of the usage. Regular patterns offer a solution that fits the problem, while in anti-pattern the steps to the solution should be documented. To understand why the pattern is not working the designer musst understand the decicions made leading to this bad solution. It should also offer a better way to solve the problem with comparing it to the result that is considered the better solution. The anti-pattern should also contain at least one example.

[1] P. Tiangpanich and A. Nimkoompai, “An Analysis of Differences between Dark Pattern and Anti-Pattern to Increase Efficiency Application Design,” 2022 7th International Conference on Business and Industrial Research (ICBIR), Bangkok, Thailand, 2022, pp. 416-421, doi: 10.1109/ICBIR54589.2022.9786470.

[2] G. Hecht, R. Rouvoy, N. Moha and L. Duchien, “Detecting Antipatterns in Android Apps,” 2015 2nd ACM International Conference on Mobile Software Engineering and Systems, Florence, Italy, 2015, pp. 148-149, doi: 10.1109/MobileSoft.2015.38.

[3] Mirnig, A.G. and Tscheligi, M., An Initial Analysis and Classification of Regular, Anti-, and Dark Patterns. PATTERNS 2017 : The Ninth International Conferences on Pervasive Patterns and Applications, 2017

Dark design pattern

When speaking about design pattern, dark pattern are a special topic within. The term dark pattern refers to design techniques in UI Design that manipulated or deceives users to agree to things which are not in their best interest. These patterns abuse the knowledge of psychological studies and behaviourial studies to influence user behavior and achieve certain goals, which are in the interest of the company. The problem with those dark patterns is the unethical part and they often lead to user frustration, confusion, or worse even financial losses or social harm. These practices might involve hidden costs, misleading information, aggressive upselling, or making it difficult to exercise consumer rights like cancellation or refunds.

Manipulation in sales, supermarketes, insurance contracts or other points of sale are not a new thing. They are also very well reasearched. Some very aggressive methodes are forbidden by law.

According to a study conducted at Princeton University in 2019 on manipulative pattern in Online-Shops, almost 40% of retail websites use dark pattern. They found three types of known dark pattern:

  1. Fake countdown timers – the deadline suggests that you have to buy this product now, else you would miss this opportunity. According to behaviourial studies this works very well, because people are always afraid to miss some good opportunity, even if they don´t need anything at all.
  2. Misleading consumers to subscribtions or more expensive products from subscriptions to more expensive products or delivery options – either through their visual design or choice of language;
  3. Hiding important information or making it less visible for consumers. That includes information related to delivery costs, the composition of products, cheaper option or manipulating them into a subscription. [1]

There are some attempts to regulate the usages of aggressive dark patterns. In the EU there is already a regulation to protect consumer rights and privacy like General Data Protection Regulation (GDPR) and the ePrivacy Directive for transparency and protection of personal data. Since December 2020 Digital Services Act (DSA) is implemented.

It should ensure customer protection and social media and other online platforms have to take more responsibility for the content on their platforms. Also this DSA will prohibit some dark pattern on online platforms.

The social media platforms have to make sure that there is no inappropriate content like hate speech or deceiving product sales and remove it. Online platforms are not allowed to use manipulative methodes anymore. [2]

Dark pattern Origin

The term “dark pattern” itself was first used by Harry Brignull, a user experience (UX) designer, in 2010 on the website darkpatterns.org which goes under the URL https://www.deceptive.design/ toady. After this first attempt to show deceptive and misleading methodes (Quote: “tricks used in websites and apps that make you do things that you didn’t mean to, like buying or signing up for something.”) the academical interest in researching this subject increased. Mathur, Kshirsagr and Mayer used the resulting publications to summarize and specifically define categories in their work. [6]

There are of three psycological fators—pricing strategys, nudging and growth hacking—that preceded the dark pattern, starting with the researchfield of behavioral economics. Trying to trick customers to buy more did not start with online retail. Psychological pricing for example is used to influence consumer behaviour. Psychological pricing is setting prices slightly below round numbers. 9,99 instead of 10,00. Consumers focus on the first number and perceive these prices to be lower, even though the difference is minimal. There are a few more techniques like the anchoring effect but all are very common in real life, not just in the internet. Nudging is also based on studying behaviour in real life, resulting in methodes like: People no longer have to actively agree, they have to actively opt-out of the decision made for them, like experienced with organ donation. Or a rule is presented as a social norm to influence people’s behaviour in this direction. The last one is growth hacking. Growth hacking is about achieving a lot of growth and awareness with as little money as possible but with innovative ideas. Also the methode of A/B testing help to develop dark pattern. It is a method to compare and evaluate two different versions of a webpage, email, or marketing campaign to determine which one performs better in terms of achieving a specific goal. This research is comparatively simple in digital products and the data is immediately available, often analysed analysed and the results are trustworthy. If 90% of the users have clicked on one button but only 10% on the other, then you know for certain that this solution works better. Therefore you can generate manipulative pattern more easily. [3]

Dark pattern are not only found on e-commerce websites or subscribing to services, they are also used in the game industries and mobile apps. (José P Zagal, Staffan Björk, and Chris Lewis. 2013. Dark patterns in the design of games. In Foundations of Digital Games 2013. Society for the Advancement of the Science of Digital Games, Santa Cruz, CA, 8.)

Arunesh Mathur, Mihir Kshirsagar, and Jonathan Mayer published their study on dark patterns in 2021, based on a series of 20 papers published at conferences and in journals in the field of UX or HCI, as well as data from legal and administrative regulations that related to the use of deceptive practices. In their research they made an attempt on identifying and categorizing different types of dark patterns.

They found four main caracteristics to define a dark pattern:

  1. Characteristics of the user interface – Terminologie used to describe the UI such as: Coercive, Deceptive, Misleading, Seductive, Trickery.
  2. Mechanism of effect for influencing users – such as deceivie, confuse, trick, mislead users or undermine users autonomy
  3. Role of the user interface designer – they abuse their knowledge of human behavior for the benefit of the service
  4. Benefits and harms – Benfits for company, Harm for the User

There is also a vast variety of taxonomie for dark pattern, just as inconsistent typification and lack of clear and consitent concept. Therefore they tried another approch, found in a recent paper of Mathur et al., to define dark pattern in the form of superior attributes that should classify the pattern.

Asymmetric

Asymmetrical dark patterns put an unequal burden on the available choices, highlighting those options that serve the provider best, hiding other options on other pages or positions. Often combined with other types of dark pattern.

Covert

As covert dark patterns, they describe the method of influencing the user’s decisions without showing the mechanisms of the method. Many of these covert dark patterns are perceived through the visual interface design. Primary/secondary buttons can be used very well to influence a decision, also to the disadvantage of the user.

Other hidden patterns are simply psychological tricks, such as “free” additional gifts in online shops when you order above a certain amount. There is also the well-known effect of comparison, not a purely digital strategy, in which options appear more attractive when unattractive options are presented in comparison and then influence the decision-making process.

Deceptive

Deceptive pattern evoke misleading presumptions/beliefs of users. That includes affirmatve misstatements like fake testimonials, ratings or countdowntimer or scarcity of products.

Information hiding

Important Information is hidden or presented at a very late stage. There are 3 subcategories in information hiding: Sneaking, Hidden Subscribtion, Hidden Costs. Sneaking means that there are products in your cart even if you did not put them there. Hidden subscribtions do not reveal that the are recurring and Hidden Costs show cost information at a very late stage in the process.

Restrictive

This pattern reduces the choices presented to the user. There are Forced Action pattern where two actions are summarized into one. Agreeing to terms of use and receiving marketing e-mails might be the same action. Another example is that it is easy to subscribe but hard to cancle the service again.

Disparate treatment

In this dark pattern one group of users is treated differently from another. It often appears in Games or Apps. Pay to Skip – if you pay you get better options.I would also put the new Youtube subscription in this category, because users who do not pay still have to see advertising.

When is a Dark pattern dark?

The welfare aspect is what matters. If the pattern affect the welfare of consumers/users it is considered a dark one. This includes any user interface that manipulates the choice options for the user against his or her welfare.

In three points, dark patterns can affect the welfare of the user:

  1. Financial loss
  2. Invasion of privacy
  3. Cognitive burden

[4]

UX is very much concerned with people’s perception and behavior, combining knowledge from behavioral economics, psychology and perception research. Strictly speaking, any influence on the user that happens when this knowledge is used for the benefit of others could be called manipulative. One can use this knowledge to increase the USer experience and at the same time influence it in one’s own interest. Even “normal” patterns make use of the knowledge and the collected data to ensure a good user flow. But isn’t influencing users in most cases already manipulation towards intentions that are not always in the users’ interest? So when does a pattern become dark? When the intention behind it is manipulative or only when someone comes to (financial) harm? Isn’t everything that promotes sales rarely in the consumers’ interest? Even if the consumer is not harmed, today’s well-known problems of returned goods and the destruction of new goods are certainly not in the interest of the consumer. So at what point is what we design in the interest of the user?

Examples for Dark pattern

Harry Brignull made the first„dark pattern library“ athttps://www.deceptive.design/types which lists 16 types of dark pattern.

Deceptive countdown timer and limited offers/Scarcity and Urgency

Countdown timers are used to trick the consumer into believing that the opportunity is about to end. Any time-limited special offer or promotion creates a feeling that the user has to decide quickly to get the cheaper option. This method aims to make impulsive spontaneous purchases that are not driven by reason. One of these methods is scarcity, when the user is told that there is only one item left, he has to act fast. [3]

Confirmshaming

Confirmshaming also targets our subconscious decision-making process. Our decision-making processes are dictated by options that are vital to human beeings. An important given for humans is the need for community. Confirmshaming makes the user feel bad if he chooses the option that is bad for the entrepreneur. The user should feels guilty or excluded from a special group, because thats what humans want to avoid. When unsubscribing a newsletter or canceling an account the message states that they are sad to see you leave and often tells you that you will miss good opportunities. [4]

Nagging

The term “nagging” comes from repetitive requests that the user is supposed to follow. In this method, The user is constantly urged to do something. Often it is about entering data or subscribing to newsletters.

Social proof

Social proof relies on people doing things that others do, for example, showing that other customers have bought the same product. Or that testimonials were satisfied and that others have rated the product well. This should strengthen our trust in the product. Often it is not obvious for the user if it is a fake message.

Obstruction

There are several methods in this category. All of them aim to make an action difficult for the user. This includes deleting accounts or cancelling options.

  • Roach motels make it very easy to subscribe but very hard to get out again.
  • Price comparision prevention make it very hard for the users to compare the prices of products or there are confusing price options.
  • Intermediate currency means that you purchase with something else than money like tokens and you have to pay the receit later. It also includes payment by instalments and the option of paying by credit card.
  • Immortal accounts are accounts wher you cannot delete your data.

Sneaking

Sneaking can mean that you have something in the cart you did not add or that there are hidden costs or hidden subcriptions. Like Airlines offer a very cheap price but there are several extra costs like taxes and luggage. Bait and switch means, that in the offer you see another product than what you get.

Interface interference

Any knowledge and method can be used against the interests of the user. Laws of Design can be used to make the userflow seamless and help the user, but it can also be manipulative – like false hierachies where the more expensive product is featured. The same is true for UX writing – trick questions can be used as a trap for manipulating the user to do somthing not in his best interest.

Interface interference means that there is hidden information, preselction or visual distraction. Toying with emotions is a methode not only seen in the digital world – it means to manipulate with emotional messages.

The disguised ad is also not just found in the digital world. It can be found in every newspaper, where an ad pretents to be a journalistic article. The layout and font are a little bit differnt and there is a very tiny hint at the end of the page that states that this text is an ad. The same works for newspaper ads.

And something else that is truly not a secret is that humans love beautiful things. The shinier the better – it is called Cuteness in terms of dark pattern.

Forced action

Forced actions can be Friend spam or address book leeching where information about others is shared while Privacy Zuckering means that the user is tricked into sharing his own personal. With Forced Registration Users give their data even if it is not necessary – like with analog customer cards. Gamification is also a powerful tool to influence users and can be used against the interests of the user.

[5]

[1] Dark Patterns at Scale: Findings from a Crawl of 11K Shopping Websites, Mathur, Arunesh and Acar, Gunes and Friedman, Michael and Lucherini, Elena and Mayer, Jonathan and Chetty, Marshini and Narayanan, Arvind, 2019, Proc. ACM Hum.-Comput. Interact., ACM, Volume 1; November 2019 (Consumer protection: manipulative online practices found on 148 out of 399 online shops screened Brussels, 30 January 2023; Press release https://ec.europa.eu/commission/presscorner/detail/en/ip_23_418)

[2]https://digital-strategy.ec.europa.eu/en/policies/digital-services-act-package

[3] Arvind Narayanan, Arunesh Mathur, Marshini Chetty, and Mihir Kshirsagar. 2020. Dark Patterns: Past, Present, and Future: The evolution of tricky user interfaces. Queue 18, 2, Pages 10 (March-April 2020), 26 pages. https://doi.org/10.1145/3400899.3400901

[4] Arunesh Mathur, Mihir Kshirsagar, and Jonathan Mayer. 2021. What Makes a Dark Pattern… Dark? Design Attributes, Normative Considerations, and Measurement Methods. In Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems (CHI ’21). Association for Computing Machinery, New York, NY, USA, Article 360, 1–18. https://doi.org/10.1145/3411764.3445610

[5] Jamie Luguri, Lior Jacob Strahilevitz, Shining a Light on Dark Patterns, Journal of Legal Analysis, Volume 13, Issue 1, 2021, Pages 43–109, https://doi.org/10.1093/jla/laaa006 – Table 1 p.11 in: Jamie Luguri, Lior Jacob Strahilevitz, Shining a Light on Dark Patterns, Journal of Legal Analysis, Volume 13, Issue 1, 2021, Pages 43–109, https://doi.org/10.1093/jla/laaa006

Evaluation of Design pattern

Vitaly Fridman has published several books and articles in Smashing Magazine. He is currently the editor-in-chief of Smashing Magazine. His masterclass is about complex UI design. He starts with a big question: How do you measure design? You measure design with design KPI’s. You have a set of performance indicators to measure the quality of the design. Before the designer starts his work, he has to know the goals. Fridman distinguishes between art and design with a simple statement: design solves a problem. Therefore, one can judge whether a design is good or not by evaluating which design solves the problem better. In his opinion, design is a matter of effectiveness, not taste. He explained the KPI workflow with a list of possible KPIs. Depending on the project, there will be different KPIs, and different KPIs will matter. Does the time to task completion need to be improved? Or are other KPIs more relevant? Like, for example, how accurate is the data?

The four most important KPI´s, which define the experience of the user.

  1. Time on task
  2. Task success rates
  3. Error Frequency
  4. How quickly people recover from errors

Everything the system and user environment must be taken seriously, and everything must be measured. A designer should talk to marketing and sales about customer complaints, consider technical problems and so on. Because all these insights lead to better problem solving. If you improve search, you need less money for advertising, or you make more money because people find the product faster. These KPI’s should be measured continuously.

Before it comes to the evaluation, the designer has to decide which design pattern is most suitable for this product. Again, you decide on the list of KPIs, and you can prioritise certain KPIs, and you also need to consider the type of user. For example: Do we have more new users or users who revisit the site? Do we have beginners or more experienced users.

Based on this KPS and the user analysis, you select the pattern that meets the requirements. Like the Hover navigation. A mega-menu can be complex and difficult to digest, but on the other hand, offering a mega-menu with a hover path is a big hassle if you have more than two levels. At some point the mouse pointer leaves the hover area and the sub navigation is closed. The user then has to hover through the submenus again. A mega-menu slows the user down at first, but leads to a faster result. Hover menus are not suitable for mobile phones.

Navigation patterns on mobile devices with more than one level have often come from patterns that do not fit the KPI. Slide-in navigation may look good, but an accordion menu is faster to navigate because you see all the information at once and don’t have to jump back and forth. (Alliance) A good solution would be to split the screen and show the first and second level on one screen. If you have a long list, the A-Z pattern works very well. Breadcrumbs are also an important navigational element, but if you break the pattern, it can get confusing like arrows pointing in the wrong direction or disabled breadcrumbs. The disabled breadcrumbs are due to the hover menu, where certain entries don´t have a single page.

The navigation should move visitors forward, if they need to go back, you provide breadcrumbs. The ADAC shows a dropdown within the breadcrumbs, which should replace a sidebar. On the Swiss government website, the main navigation is within the breadcrumbs. This concept also works for mobile devices.

Interestingly, this behaviour was also found on other Swiss websites, while the reverse breadcrumb error was found on websites in Denmark and the Netherlands. It only showed up on a few websites, so it needs to be further investigated whether there is a behaviour of using certain patterns for certain regions – which could make sense as the designers might know the websites in their own country better.

The choice of pattern is closely related to what the user wants and needs to do to complete their task. Dropdowns, for example, are the slowest element of interaction, while buttons are the fastest. But not in every case is the time to complete the task the most important KPI. If certain interactions are too fast, they can lead to more errors, which is not in the user’s interest. Sometimes the fastest way is not the best experience either. Having fun can lead to a much better experience. If it’s exciting, people will remember the website. For a playful approach, you can use micro-interactions or unusual loading spinners.


[1] Vitaly Friedman – Masterclass Talk – Complex UI Design Practical Techniques at Interaction Design Foundation.

Reflection OFFF23

Almost all the talks I saw started with glimpses into the personal background from early childhood and the beginnings of their careers. While this is good for building an emotional connection with the audience, it also leaves a a bit of despair for those who haven’t found their thing yet. And although they all talked about working hard and improving over time, it gave the impression that they were born like that. With this passion for something. But what if you can’t decide which passion you want to follow and if you would be good at everything but are mediocre at some things because you don’t follow just that one path?
At some point, all those speakers stopped doing other things to do only what they enjoy, and that worked out quite well for them. But apart from making me feel like they were born geniuses, they all gave two good pieces of advice: Experimenting and Perfect is not the goal.

I was really impressed by Rik Ostenbroek and Gemma O’Brien. Both followed the call of their passion, both just did what they loved, both are amazing artists. Gemma was really inspiring and encouraging. She showed her sketchbook and what inspires her, which gave an amazing personal insight into her thinking and creative working process. Rik also gave a very personal insight into his early days. He was really the one who always just did what he wanted, up to the point where he stopped going to school. For both of them, social media and spreading their work on the internet were important factors for their success.

A more practical approach came from the studio The Mals and Gab Bois. The Mals are filmmakers and showed us behind the scenes and explained their working process. Everything they show in their videos is homemade from scratch. They don’t work with 3D software or Photoshop, they build everything by hand. One video was about orange juice and how you should shake it before drinking it, so they built a mini roller coaster and sent the juice through the loop. Gab Bois also works exclusively with real things when making her work. She explained that she only uses Photoshop to clean up the images, not to create them.

David Carson’s speech was very polarising. Most people I spoke to after the talk thought he was just an arrogant, rich, white man who wasted their time. Those who studied graphic design knew him but were not very impressed either, I think. In fact, he should not have dwelled so much on life in the Caribbean but otherwise it was an entertaining interesting lecture about not taking life too seriously.

I appreciate people who don’t care about other people’s opinions or what you should or shouldn’t do and therefore I liked his wee bit sarcastic attitude towards public opinion. I also think that if the world saw Carson as an artist rather than a graphic designer, he wouldn’t polarise so much. Because graphic design still serves a purpose in our minds, so it’s hard for us to accept that graphic design should be so experimental.

Carson started his career with being different and he didn’t and doesn’t care if people like what he does. His career is about breaking the rules of traditional graphic design. From today’s perspective, that may be outdated, but it used to bring a more artistic vibe to the field of graphic design. I think, Carson is to the design world what Duchamp was to the art world. Carson satirised the self-absorbed design world by flouting its conventions of rules and beauty. Whereas Duchamp took his readymades very seriously (at least I haven’t heard otherwise), I get the feeling from Carson’s work and behaviour that he is mocking the industry a bit. And just as Duchamp questioned the definition of art, he questioned the definition of graphic design. I think the idea was also that this artistic rather than functional approach should make recipients question their view and thinking of graphic design. At some point, it is more attractive to break with conventions, to be different and unique, than to do a good job and stick to the rules. Just as in the art world today the Impressionists are far better known than the Salon artists in the wake of Jacques-Louis David, even though they were not very respected by the public at the time. The same is true of many artists of more recent art history. What distinguished them was their break with tradition. So, in the end, maybe the best way IS to just do what you love and stick with it and success will follow.

Pattern libraries

Designing a good interface, good means the degree of usability, requires knowledge of design rules and experience with interactions. Patterns can also be used to document and share existing design knowledge. Design pattern libraries are good because they capture the most important aspects of the problem and offer a solution approach. The structure of the pattern is scalable and can be applied to other and broader problems. The interest in creating patterns and creating a pattern language for user interface design was already present in 1994. (Rijken 1994, Bayle 1998). Several different approaches to building model libraries were made by different people around the turn of the millennium. (Mahemoff and Johnston 1998). Mahemoff proposes the following categories: task related patterns, user related patterns, user interface element patterns and system-based patterns. Common Ground (Tidwell 1998) or the Web patterns collection (Perzel and Kane 1999),  Martijn van Welie/Hallvard Trætteberg (2000). But in 2000 there was still none that had become established. The reason is that there was no agreement on a format and focus.

With the introduction of the iPhone in 2007 and the hype that followed, it became necessary to design software and its interface for mass use on these devices. Erik Nilsson presented a pattern library for mobile patterns in 2008. He drew his insights from the problems encountered during the development of the projects UMBRA (UMBRA is a graphics software technology company founded 2007 in Helsinki, Finland. Umbra specializes in occlusion culling, visibility solution technology and provides middleware for video games running on Windows, Linux, iOS, PlayStation 4, Xbox One, PlayStation 3, Xbox 360, Wii U, handheld consoles, and other platforms. In 2021, Amazon acquired Umbra. Information copied from Wikipedia) and FLAMINCO (web pattern library from Nilsson!? – no information found) appeared.

He refers to three main challenges that the small touch screen poses. He has classified these as the three main problem areas.

  • use of screen space.
  • interaction mechanisms.
  • design as a whole.

Each pattern is divided into one of these 3 problem areas, within these problem areas there are smaller units of problem areas. This division into problem areas helps to concentrate on individual aspects of a larger problem. It becomes difficult when the collection grows. It needs a good problem structure to find matching patterns. The connection between problem and solution was a challenge because there is always more than one solution to a problem and the solution can always be applied to several problems. This results in either a lot of repetitions or a lot of cross-references, which affects the readability of the pattern collection.

  • Main problem area
  • Problem area
  • Description and individual problems (with connected UI design patterns)

He also thinks separately about UI components such as buttons, tabs, scrollbars etc. and their adaptation to touch interaction. The patterns collection was presented by Erik Nilsson at the HCI International conference in 2007 and at the IASTED HCI conference in 2008. [1]

Pattern collections:

In 2008 there were a few pattern collections, including some on Mobile UI design patterns.

Some of them had design patterns that were more for universal interfaces and had a higher level of abstraction.

1 http://www.developer.yahoo.com/ypatterns/.
2 http://www.designinginterfaces.com/.
3 http://www.visi.com/~snowfall/InteractionPatterns.html.
4 http://www.welie.com/patterns/.
5 http://www.deyalexander.com/resources/design-patterns.html.
6 http://www.gibbert.net/DPWiki (in German).
7 http://www.patterns.littlespringsdesign.com/~newlsdpatterns/index.php/Main_Page

8 https://www.welie.com/patterns/index.php

M.V. Welie created his own website as early as 1999, the new website was created in 2008 as well as a Hall of Shame website, which is still online today. http://hallofshame.gp.co.at/new.html / http://hallofshame.gp.co.at/errormsg.htm [2]

Jenifer Tidwell created her website in 1999. According to the information on the website, there should be a new website, but the new website does not show much content.

[1]Design patterns for user interface for mobile applications, Erik G. Nilsson, 2008 in: Advances in Engineering Software 40 (2009) 1318–1328

[2] M.V. Welie, “The Amsterdam Collection of Patterns in User Interface Design,” 1999. http://www.cs.vu.nl/~martijn/patterns/index.html

Pattern in HCI/UI Design

Alexander’s intention with the design pattern in architecture was to involve the inhabitants of a house and give them a tool to communicate their needs to the architect. His approach was user centred. He created a structure for his architecture pattern consisting of name, ranking, picture, context, problem statement, problem description, solution, diagram (graphical explanation), references. So, the structure is very similar to the structure used in software and HCI pattern. Software patterns consist of name, context, problem, solution, examples, diagrams, and cross-references. In software development, however, the pattern language was not intended to involve users in the process, but rather to allow developers to communicate with each other. The idea of UI patterns as described by Alexander influenced Norman in Psychology of Everyday Things (published 1988; p. 229). Apple’s Human Interface Guidelines also referred to it, and the Utrecht School of Arts used patterns in their teaching. (In the year 2000, however, there was still no binding pattern language.) [1]

Jenifer Tidwell recognised 1997 in her article A Pattern Language for Human-Computer Interface Design that designing user interfaces requires a systematic approach. She also mentioned that the creation of good design solutions often worked better when the designers were talented but, above all, experienced. As in any other discipline, designers in the user interface field benefited from studying and adopting the work of other designers and applying already successful solutions. Reinventing solutions is not only time-consuming, it can also lead to results that do not meet the desired expectations. Tidwell speaks of bizarre solutions that are the result of reinventing common designs. Experienced designers, on the other hand, use their knowledge of design principles and process to make ideas feasible in a new context. Experience, on the other hand, requires time and making mistakes to gain the knowledge. In her first article on the subject, Tidwell argues that there should be a simpler solution, a shortcut. She sees this shortcut in the introduction of design patterns along the lines of software development and architecture. The advantages for designers are that they can draw on accumulated knowledge and have a common language that simplifies communication within the team and with the client, thus reducing misunderstandings. In addition, new solutions can come about when creatives are forced to stay within a certain framework and focus on that one task. Design patterns could also form the basis for frameworks for programming. Design patterns also represent advantages for the entire community of HCI designers. The usability of an interface design could be discussed on this basis – if the solution works or not. The patterns could also take over working solutions from other analogue fields and exchange them in an interdisciplinary context. Solutions that already work well elsewhere can also be helpful in user interface design. This has already been done (e.g. metaphor for the desktop) but it would be possible on a more abstract level. We could also learn from solutions that have been dismissed for various reasons, e.g. due to unfashionability. The exchange of ideas could be greatly facilitated and made accessible to a broader community. It would be easier to build on existing results and find new solutions more quickly, innovatively and across sectors. [2]

Basically, all these ideas are not new, they have just not yet been sufficiently emphasised and systematically introduced in this young discipline. It is no secret that our knowledge is based on the knowledge of our ancestors, that we learn quickly and easily through imitation. That this behavioural pattern: learning by imitation also extends to this new discipline is therefore no surprise. What is important in these beginnings of design patterns, however, is the systematic approach in which a broader mass can benefit from prior knowledge and insights. As has been shown throughout humanity, the more people have access to existing knowledge and can build on it to develop new ideas, technologies, and approaches, the faster we develop.  For me, this is also a call to form a worldwide community that supports each other, analogous to the beginning of globalization and the start of the WWW.

In her article, Tidwell proposes an approach for a design pattern library for the first time. Analogous to software patterns, each design pattern should include the problem to be solved, the context of use, a primary rule, and good and bad examples. However, it is important to note that these descriptions are not recipes, nor should the design patterns reference the GUI directly. Just as a user need should not include a design suggestion to leave the design space as open as possible, the pattern should not be too prescriptive either. For Tidwell, one of the most important points in terms of acceptance of a pattern is if the basic concept can be applied in other disciplines (also analogue). If the pattern works in a different context, if it would work outside the HCI/GUI environment, it is most likely a good solution. (example)

In the same way, the pattern language can also be used to analyse existing interfaces. The structure of the pattern language itself is easy to understand. But to use it, you need to understand the purpose of the solution and the factors that are relevant to solving the problem. It is also important to make the process iterative. Tidwell’s intention for the development of a pattern language is to ensure a high level of quality in the interaction between human and machine aka the software. High quality is when the user has a successful and satisfying experience. This means that the content has been adequately prepared and presented for the user so that the user fully understands the content and is able to use it. Furthermore, the software guides and supports the user to the necessary extent and pace in their task. Successful software supports in such a way that the user can fully concentrate on his task and the software “to fade from the user’s awareness”. If these two goals are met and learnability, user empowerment, and enjoyability are added, the criterion of “high-quality interaction” is fulfilled. Tidwell divides the patterns into “primary patterns” from which larger patterns can be composed. The content Narrative, High-density Information like Maps, tables, and charts or as Status Display the state of something that will change like clock or dashboard. The primary patterns for actions can be Forms, Control Panel, WYSIWYG Editor, Command-line, Social Spaces like Newsgroups and Chat Rooms. The action primary patterns are very limited with the things users can do. A control panel with one button reduces the complexity to this one action, where the button can be used multiple times in many ways. Tidwell says that unlike the pattern languages that evolved from Alexander’s theory, this language can be arbitrarily combined and used on a larger or smaller scale. Form filling can appear as the main action on the page, or only as a small secondary action – depending on the context. (p. 11) In her article, Tidwell has compiled an approximately 70-page collection of patterns, which she has structured according to the method Example, Context, Problem, Forces, Solution, Resulting Context, Notes.[2]

Tidwell called her pattern language Common Ground. Common Ground (Tidwell 1998) or the Web patterns collection (Perzel and Kane 1999) are pattern collections that were created around this time.  Martijn van Welie and Hallvard Trætteberg created their own pattern collection around 2000. In their article they criticise the lack of user perspective in the pattern collections of Tidwell, Perzel and Kane. They have created their own collection to compensate for this lack. And they present a different format that can remedy this deficiency. They focus more on the end-user and the problems they may have when using the software. For them, usability is the focus of the pattern language. Tidwell’s language is more for designers than users, while they want a solution which is more user centred. Their argument cannot be dismissed: If a pattern fits for a user, it fits for a designer, but the reverse is not always the case.

The focus of this pattern collection should be on user centred design and usability. For this reason, it is very important to consider the how and the why in the format. In the pattern the description must explain how the solution works and why it is a good solution. The focus on user centred design is also important to ensure usability and not to put the interests of the stakeholders above those of the users. Banners and splash screens for advertising purposes are considered a good solution at the time but are neither important for usability nor certainly do not enhance the user experience. The pattern collection has been structured with reference to Norman’s interface principles formulated in 1988.

  • Visibility – Gives the user the ability to find out how to use something simply by looking at it.
  • Affordance – Refers to the perceived and actual properties of an object that indicate how to use the object.
  • Natural Mapping – Creates a clear relationship between what the user wants to do and the mechanism by which they can do it. To complete my task, I need to select this option, enter this information, and then press this button….
  • Constraints – Reduces the number of ways to perform a task and the amount of knowledge required to perform a task, making it more manageable. Oh no, what do I have to enter here? Ok, I only have these choices….
  • Conceptual models – A good conceptual model is one where the user’s understanding of how.
  • how something works matches the way it works. This way the user can confidently predict the effects of their actions.
  • Feedback – Indicates to the user that a task is being performed and that the task is being performed correctly.
  • Safety – The user must be protected from unintended actions or errors.
  • Flexibility – Users can change their minds and each user can do things differently.

The increase/improvement of usability should be in the foreground when creating the pattern and should cover the following criteria: learnability, memorability, speed of performance, error rate, satisfaction, and task completion. These are called usage indicators and each pattern must cover at least one of these indicators.

Structure of Wellie:

Progress ( by Martijn van Welie, p. 7)

  • Problem Description
  • Usability Principle which it confirms.
  • Context
  • Forces
  • Solution
  • Rationale
  • Examples
  • Known Uses
  • Counter Example
  • Related Patterns

Example for this pattern:
Problem

The user wants to know whether or not the operation is still being performed as well as how much longer the user will need to wait.


Usability Principal Guidance

Feedback


Context

Systems tasks that take a long time (typically more than a few seconds) and must be completed before the next tasks can be started.


Forces

  • The performance of the operation cannot always be controlled/avoided by the user (or designer), e.g. because it relies on an external system or hardware, which may fail, block or have low performance.
  • The users do not want to wait need clear feedback on the progress and estimated time
    to completion.
  • The users may not be familiar with the complexity of the task.
    During the operation the user might decide to interrupt the operation because it will
    take too long.

Solutions

Show that the application is still working and give an indication of the progress. Provide feedback at a rate that gives the user the impression that the operation is still being performed e.g. every 2 seconds using animation. Additionally, provide a valid indication of the progress. Progress is typically the remaining time for completing, the number of units processed, or the percentage of work done. The progress can be shown using a widget such as a progress bar. The progress bar must have a label stating the relative progress or the unit in which it is measured.


Rationale

By providing new feedback at a rate around 1 or 2 seconds, the user can see whether the application is still processing and has not died. The progress indication gives feedback on how long the application will remain in this state. Combining these two aspects relieves the user’s worries. Leaving one of the two out would not solve the user’s problem. The solution increases satisfaction because the user knows what is going on and how much longer the user needs to wait. It increases the sense of control. The pattern also avoids additional system load by avoiding retries from users.


Examples
When downloading a file using Internet Explorer 5, the user is presented with this dialog. It shows the progress in percentage as well as the amount of kilobytes of received data. Additionally, the estimated time left is shown and updated couple of seconds. An animation of a flying document shows that the download has not stalled. Known Uses Netscape’s Download box, Apple’s file cop [3]

[1] Jan O. Borchers. 2000. A pattern approach to interaction design. In Proceedings of the 3rd conference on Designing interactive systems: processes, practices, methods, and techniques (DIS ’00). Association for Computing Machinery, New York, NY, USA, 369–378. https://doi.org/10.1145/347642.347795

[2] A Pattern Language for Human-Computer Interface Design, Jenifer Tidwell, May 17, 1997, p. 1-5

[3] INTERACTION PATTERNS IN USER INTERFACES, Martijn van Welie, Hallvard Trætteberg, 2000

Definition of designpattern and the value of designpattern in software design

The concept invented by Christoph Alexander for architecture has been taken up and adapted by the software industry. One of the first publications on software pattern was Design Patterns: Elements of Reusable Object-Oriented Software in 1993. Followed by Patterns of Software, Tales from the Software Community by Richard P. Gabriel in 1996. [1] In the article of design pattern a pattern is defined as a solution to a recurring problem in a particular context. (Gamma et al. (1995, page 2-3) ) Dirk Riehle and Heinz Züllighoven define a pattern as mental concept which derives from our experience. Only through past experience can we recognize patterns at all. The recognition of patterns always takes place in retrospect. If there was a good solution to a problem, if we know this solution, if the concept of the solution fits our new problem, we can use it. To do this, it can and in most cases must be adapted and can be improved. A pattern is therefore a template for future solutions based on solutions that have already proven themselves. If the context of the pattern does not fit the context of use, there is a mismatch and adapting the pattern to the new concept could be more work and also more expenses. [2]

A solution which has proven itself through practical application, usefulness and repetition can become a pattern. To meet the requirements of a pattern the solution must be useful, applicable in the similar context and reused by others.[3]

Dirk Riehle and Heinz Züllighoven describe three general pattern types:

Conceptual patterns

Conceptual patterns are a kind of mental model of the work situation and the corresponding system. They are used to understand the user and his tasks. They must be abstract enough to be applicable to other situations, but not too specific, otherwise they cannot be reused. In my opinion, this can be compared to pattern of process, closely related to creating scenarios in the UX process.

Design patterns

Design pattern in software design have nothing to do with surface design, it describes the intent of a pattern and explains problem and solution which can be solved with the pattern. They show the structure and construction of the code and contains objects, classes, inheritance, aggregation and relations. A Framework on the other hand consists of design pattern and components. A pattern is more a best practice, a framework is collection of components based on design pattern. Both concepts follow the same purpose, which is the reuse of former solutions to save time for development.

Programming patterns

A programming pattern is closely related to the specific programming language. It is about programming styles in certain programming languages. [3]

A lot of approaches tried to make software development easier less time consuming, like higher-level programming, languages, object-oriented programming, faster computers, design methodologies, compilers, debuggers, editors, programming environments, automatic programming and artificial intelligence. In 1996 programming was still something not a lot of people are able to do.

Richard Gabriel explains a common problem of this industry by comparing it to craft of building bridges. Bridge building has a long history and profound methods and technologies the engineers can draw upon. These advantages do not exist in software design, and with constantly evolving technology, software engineering must also constantly adapt. [4]

Also the reuse of code, which was supposed to speed up the development process, was not yet mature at that time. Developers had to have a central repository, they had to find the right piece of code, which had to be documented to understand not only the purpose but also the code itself. It is often easier and faster to write the code yourself then to search, find and understand code to reuse it. [5]

A solution for this can be found in design pattern. If programmers know a certain pattern they understand it more easily and can work with it faster. Gabriel compares it with the structure of language – if people know the most common patterns they can use it. [6] A problem can be solved with more than one pattern, so it needs a certain context to work effectively. Using a pattern is also not just copying because it will not work with certain circumstances. [7]

  • [1] Understanding and Using Patterns in Software Development, Dirk Riehle and Heinz Züllighoven, 1996
  • [2] Understanding and Using Patterns in Software Development, Dirk Riehle and Heinz Züllighoven, 1996, P. 2-3
  • [3] Understanding and Using Patterns in Software Development, Dirk Riehle and Heinz Züllighoven, 1996, P. 4
  • [4]Patterns of Software, Tales from the Software Community, Richard P. Gabriel, 1996 [preface p. 12-13]
  • [5]Patterns of Software, Tales from the Software Community, Richard P. Gabriel, 1996 [P. 3-4]
  • [6]Patterns of Software, Tales from the Software Community, Richard P. Gabriel, 1996 [P. 26]
  • [7]Patterns of Software, Tales from the Software Community, Richard P. Gabriel, 1996 [P. 46-47]

Design pattern – Origins in architecture

Christopher Alexander was an architect and professor of architecture, born in Vienna 1936. He died in March 2022 in England. His family left Vienna when he was two years old because of takeover of the nazi regime and went to Oxford were his parents worked as german teachers. He went to Cambridge and after that went to architecture school at Harvard, where he earned a Ph.D. in 1963. In the same year he became professor of architecture at the University of California, Berkeley until 1998. [1]

His book “A Pattern Language: Towns, Buildings, Construction” (1977) inspired the upcoming software community. He wrote an introduction for Richard Gabriel’s book “Patterns of Software”. In 1996 he was invited to give a speech at a software conference in San Jose, California at the ACM Conference on Object-Oriented Programs, Systems, Languages, and Applications (OOPSLA). [2] In his speech he provided an overview of his former studies and approaches the question of the connection between his work and the computer science. From the very beginning of his studies he searched for the soul of buildings. Today we would call it human-centered architecture. His ideas are similar also to the UX process. He wanted to bring more live into buildings and also include normal people to design their houses, not leave everything to the architect. [3]

He used the term “living structure” a lot, which meant to him the feeling a building evokes in people. Back then the modern structure of the buildings were functional but for many people the buildings didn´t feel comfortable. One of the characteristics of any good environment is that every part of the environment works as a whole. In his first book he tried to find the features which makes the building and its surroundings positive and create a good and health feeling. He wanted a more hands-on handbook which collects all the information to get a good result even for non-architects. He studied generative schemes or instructions of traditional cultures. One of the things he researched on was to find the impact on our life and get an holistic approach. In his book he explained things which are good for people – like warm colours, improving the daylight, entrances etc. and finding the ideal proportions for houses. What was the method to find out if the one design of a chair has a more living structure than the other design? He and his team did simple empirical experiments by asking people if they feel more whole with this or that object or in this or that building. The asked questions like: “Do you feel more whole? Do you feel more alive in the presence of this thing? Do you feel that this one is more of a picture of your own true self than this thing you know whatever?”[4] A lot of architects dismissed the findings because they said there is no objectivity about life or quality but Alexander could prove an 80-90% agreement on what a living structure is. The conclusion was that what people find more living and what makes them more whole is not just a personal question and can lead to certain pattern which have a highly approach to be good design. His book should lead to better architecture which makes people feel good.
But not only following the advices written in the book but also the process is important for creating a good result. There is a good way to do things and a bad one, according to this the result of the things will be good or bad. When it comes to software there is no sense in asking if this or that object in the code has more live or if a program makes you feel more whole by observing the code. In Software Development they could use the concept as a format. Also the idea with the process is an important aspect. A process can help produce good code an therefore good programms. [5]

Everything we see in our surroundings raises our spirits a bit or lowers them a bit.

Christopher Alexander, 1994 [6]

  1. https://www.nytimes.com/2022/03/29/arts/christopher-alexander-dead.html (22.01.2023)
  2. The origins of pattern theory, C. Alexander, “The origins of pattern theory: the future of the theory, and the generation of a living world,” in IEEE Software, vol. 16, no. 5, pp. 71-82, Sept.-Oct. 1999, doi: 10.1109/52.795104.
  3. https://www.nytimes.com/2022/03/29/arts/christopher-alexander-dead.html (22.01.2023)
  4. Christopher Alexander in: The origins of pattern theory, C. Alexander, “The origins of pattern theory: the future of the theory, and the generation of a living world,” in IEEE Software, vol. 16, no. 5, pp. 71-82, Sept.-Oct. 1999, doi: 10.1109/52.795104.
  5. The origins of pattern theory, C. Alexander, “The origins of pattern theory: the future of the theory, and the generation of a living world,” in IEEE Software, vol. 16, no. 5, pp. 71-82, Sept.-Oct. 1999, doi: 10.1109/52.795104.
  6. https://www.nytimes.com/2022/03/29/arts/christopher-alexander-dead.html)

Types of User Interfaces

Command line interfaces

From the early 1960s until the early 1980s computers were primarily used in large organizations by typing commands with parameters on mechanical or teletype/display devices. A command-line interpreter or command-line processor uses a console interface to accept commands from a user in the form of text lines. [1]

Graphical user interfaces

Jakob Nielsen wrote in 1993 about purpose-driven UI. By specifying functions first and subsequently their arguments, the user had access to the system. Deleting a file on a system that is line-oriented, the user had to write the delete command first into the command-line, then add the name of the file. Graphical-User Interfaces in comparison are object-oriented. The user accesses the object first and then deletes it. He also remarkes that User had to focus on using the computer to do what they want first rather than concentrating on the task at hand. The user was constantly aware of the tool he uses, because they need to know the commands in the correct syntax before they could achieve the things they want.

Non-graphical user interfaces

As early as 1993, Jakob Nilsen wrote about non-graphical interfaces. He wrote about virtual reality as the ultimate example fornoncommand-based interfaces. The user immerses into a simulated environment which is very similar to the real world and therefore it is very intuitive to use. He invisioned playing a hockey game where the user acts like in reality by using his hands to ward off the pucks when being the goalie. The computer is controlled via gestures. [2]

WIMP Interfaces

WIMP Interfaces are the dawn of a new era, because it made the use of the computer possible to everyone. The WIMP GUI is the first raster graphics-based user interface. Consisting of windows, icons, menus and a pointing device, it works on a point- and-click concept instead of command line. The first PC where this was used was Xerox PARC. From there they got populare with the Macintosh in 1984 and was later copied by Windows. [3]

Attentive User Interface

In the beginning a few people were working on on PC, then one person was woring on one PC and today we use we use multiple ubiquitous devices every day. Every device still works isolated from the other devices, channeling and draining our attention. And because human attention is limited it is a valuable resource which should be valued and considered from user interface designers and product engineers. Attentive user Interfaces (AUI) are sensitive to user’s attention. To provide this the AUI needs additional user input such as presence of the user, proximity, orientation, is the user speaking to someone or what does he gazes at. They can present the information according to the user attention and therefore optimize the communication with the device. The interface senses were the user focus his attention and present information there. [4]

Tangible User Interface

A tangible user interface is a touchable user interface that allows a computer user to interact with the machine through physical objects. [5] In 2003 a research team in Barcelona created the Reactable. It is an electronic musical instrument.It is a table on which the user places and moves objects to create sound, inspired by modular analogue synthesizers. [6]

Voice User interfaces

In Voice user interfaces (VUIs) the user interacts with the system through his voice. IInstead of making the input via a screen, the user speaks to the system, which uses speech recognition to perform the task. According to stanford researchers Clifford Nass and Scott Brave are more natural and intuitiv for communicating with the computer, because a lot of human communication takes place via linguistic expressions. Therefore it seems more natural to apply the same concept on computer-interactions. [7]

The advantages and areas of use of vui are mainly where users cannot use their hands, such as when driving a car. Furthermore, they can be a great help in everyday life for blind people.

EGG Brain Computer Interfaces

https://www.sciencedirect.com/science/article/pii/S246845111730082X

  • [1] Post-WIMP User Interfaces, AndriesvanDam, 1997
  • [2] Non-graphical User Interfaces, Jakob Nielsen, in Communication of THE ACM/April 1993/Vol.36, No. 4, P. 83-99
  • [3] Post-WIMP User Interfaces, AndriesvanDam, 1997
  • [4] Attentive user interfaces, Roel Vertegaal, Article in Communications of the ACM, March 2003
  • [5] The tangible user interface and its evolution, Hiroshi Ishii, Commun. ACM 51, 6 (June 2008), 32–36. https://doi-1org-17054c7ie002d.perm.fh-joanneum.at/10.1145/1349026.1349034
  • [6] http://reactable.com/ (accessed on 12.01.2023)
  • [7] Wired for Speech: How Voice Activates and Advances the Human–Computer Relationship, Clifford Nass and Scott Brave, Cambridge, 2005