The 7 Principles of Universal Design were developed in 1997 by a working group of architects, product designers, engineers and environmental design researchers, led by the late Ronald Mace at [North Carolina State University](http://design.ncsu.edu/cud/about_ud/udprinciples.Htm).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fpin8agH4ZxX3c4LUTSMVx5VVRr63%2F2RvS7w2wrGbMcHw4LPAK%2F30ccd546-69d9-4355-b212-13db9c6996bd.jpg?alt=media&token=8a333047-3a53-4823-a45e-2d39718303c9","id":"30ccd546-69d9-4355-b212-13db9c6996bd","width":288,"height":264,"filename":"UDHE_Triangle_Web.jpg","type":"image/jpeg","caption":"A triangle building Universal Design out of Accessible, Inclusive, and Usable.","border":false}]}
```

The purpose of the Principles is to guide the design of environments, products and communications. According to the Center for Universal Design at NCSU, the Principles "may be applied to evaluate existing designs, guide the design process and educate both designers and consumers about the characteristics of more usable products and environments."

* Principle 1: Equitable Use

* Principle 2: Flexibility in Use

* Principle 3: Simple and Intuitive Use

* Principle 4: Perceptible Information

* Principle 5: Tolerance for Error

* Principle 6: Low Physical Effort

* Principle 7: Size and Space for Approach and Use

### **Principle 1: Equitable Use**

The design is useful and marketable to people with diverse abilities.

**Guidelines:**

1a. Provide the same means of use for all users: identical whenever possible; equivalent when not.

1b. Avoid segregating or stigmatizing any users.

1c. Provisions for privacy, security, and safety should be equally available to all users.

1d. Make the design appealing to all users.

### **Principle 2: Flexibility in Use**

The design accommodates a wide range of individual preferences and abilities.

**Guidelines:**

2a. Provide a choice in methods of use.

2b. Accommodate right- or left-handed access and use.

2c. Facilitate the user's accuracy and precision.

2d. Provide adaptability to the user's pace.

### **Principle 3: Simple and Intuitive Use**

The use of the design is easy to understand, regardless of the user's experience, knowledge, language skills, or current concentration level.

**Guidelines:**

3a. Eliminate unnecessary complexity.

3b. Be consistent with user expectations and intuition.

3c. Accommodate a wide range of literacy and language skills.

3d. Arrange information consistent with its importance.

3e. Provide effective prompting and feedback during and after task completion.

### **Principle 4: Perceptible Information**

The design communicates necessary information effectively to the user, regardless of ambient conditions or the user's sensory abilities.

**Guidelines:**

4a. Use different modes (pictorial, verbal, tactile) for the redundant presentation of essential information.

4b. Provide adequate contrast between essential information and its surroundings.

4c. Maximize the "legibility" of essential information.

4d. Differentiate elements in ways that can be described (i.e., make it easy to give instructions or directions).

4e. Provide compatibility with a variety of techniques or devices used by people with sensory limitations.

### **Principle 5: Tolerance for Error**

The design minimizes hazards and the adverse consequences of accidental or unintended actions.

**Guidelines:**

5a. Arrange elements to minimize hazards and errors: most used elements, most accessible; hazardous elements eliminated, isolated, or shielded.

5b. Provide warnings of hazards and errors.

5c. Provide fail-safe features.5d. Discourage unconscious action in tasks that require vigilance.

### **Principle 6: Low Physical Effort**

The design can be used efficiently and comfortably and with a minimum of fatigue.

**Guidelines:**

6a. Allow the user to maintain a neutral body position.

6b. Use reasonable operating forces.

6c. Minimize repetitive actions.

6d. Minimize sustained physical effort.

### **Principle 7: Size and Space for Approach and Use**

Appropriate size and space are provided for approach, reach, manipulation, and use regardless of the user's body size, posture, or mobility.

**Guidelines:**

7a. Provide a clear line of sight to important elements for any seated or standing user.

7b. Make reach to all components comfortable for any seated or standing user.

7c. Accommodate variations in hand and grip size.

7d. Provide adequate space for the use of assistive devices or personal assistance.

> Download the PDF with visuals examples: (universaldesign.ie)

7 (Seven) Principles of Universal Design

Deceptive design is tricks found in websites and apps that make users do things which they didn't mean to, like purchasing or signing up for something. Utilising the user's lack of awareness for the benefit of the company.

### **How do deceptive designs work?**

The majority of people use websites and apps without reading every word on every page, skimming and making assumptions. A company may take advantage of this if they want you to do something they want. In some cases, they can fool viewers into believing that a page says one thing when it is actually saying something else.

### **Who uses deceptive design?**

Deceptive design is a rapidly growing area of research, particularly in the fields of Human-Computer Interaction (HCI) and Law.

### **Types of deceptive design**

* **Trick questions**

  You respond to a question on a form that tricks you into giving an answer you didn't intend to give. A brief glance suggests one thing, but a closer examination reveals a different question altogether.

* **Sneak into the basket.**

  When you go to checkout and attempt to buy something, the website sneaks an additional item into your basket, usually by using an opt-out radio button or checkbox somewhere along the way.

* **Roach motel**

  There are situations that you easily get yourself into, but then you have difficulty getting out of them (for instance, a subscription to a premium service).

* **Oversharing**

  You are misled into disclosing more details about yourself than you really intended to.

* **Price comparison prevention**

  The retailer makes it difficult for you to compare the price of an item with another item, so you cannot make an informed decision.

* **Misdirection**

  It is designed in a way that distracts your attention from other things by focusing on one thing.

* **Hidden costs**

  You get to the last step of the checkout process, only to discover some unexpected charges have appeared, e.g. delivery charges, tax, etc.

* **Bait and switch**

  You set out to do one thing, but a different, undesirable thing happens instead.

* **Confirmshaming**

  The act of guilting the user into opting for something. The option to decline is worded in such a way as to shame the user into compliance.

* **Disguised ads**

  Adverts are disguised as other kinds of content or navigation, in order to get you to click on them.

* **Forced continuity**

  When your free trial with a service comes to an end and your credit card silently starts getting charged without any warning. In some cases, this is made even worse by making it difficult to cancel the membership.

* **Friend spam**

  The product asks for your email or social media permissions under the pretence it will be used for a desirable outcome (e.g. finding friends), but then spams all your contacts in a message that claims to be from you.

Against deceptive design

### **Definition**

A Design Language System is a set of interconnected patterns and shared practices coherently organized. Design Systems aid in digital product design and development of products such as apps or websites. They may contain but are not limited to, pattern libraries, design languages, style guides, coded components, brand languages, and documentation.

Source: [Design system - Wikipedia](https://en.wikipedia.org/wiki/Design_system)

### **History**

In the 1960s, computer technology began outpacing the speed of software programming. Computers became faster and cheaper, but software development remained slow, difficult to maintain, and prone to errors. This gap, and the dilemma of what to do about it, became known as the “software crisis.”

In 1968, at the NATO (The North Atlantic Treaty Organization) conference on software engineering, Douglas Mcllroy presented component-based development as a possible solution to the dilemma. Component-based development provided a way to speed up programming’s potential by making code reusable, thus making it more efficient and easier to scale. This lowered the effort and increased the speed of software development, allowing software to better utilize the power of modern computers.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fpin8agH4ZxX3c4LUTSMVx5VVRr63%2FZj3HsDVNZn7x4eH7Zf9q%2F195cff14-7991-408b-8f54-f55f5b657743.png?alt=media&token=effd03c7-1f79-4b18-875b-9a4fa9a6a12e","id":"195cff14-7991-408b-8f54-f55f5b657743","width":768,"height":395,"filename":"NATO Conference 1969.png","type":"image/png","caption":"Software Engineering NATO Conference 1968","border":true}]}
```

Wow-what a history. Mcllory presented a design system in the 1960s, at the period time my mom is just a 1-year-old kid.

Now, 53 years later, we’re experiencing a similar challenge, but this time in design. Design is struggling to scale with the applications it supports because the design is still bespoke—tailor-made solutions for individual problems.

> *"Have you ever performed a user interface audit and found you’re using a few dozen similar hues of blue, or permutations of the same button? Multiply this by every piece of interface in your app, and you begin to realize how inconsistent, incomplete, and difficult to maintain your design has become."*

### **Here’s a tidbit of mystery. Why is it that – a bit like photographs – most products somehow seem to get degraded with age?**

You’d think the opposite should be true: that having a great team spend many years iterating on a product should eventually result in some immaculately perfect finished product. Instead after ten years, it’s suddenly harder to unlock your phone. Why?

The long, painful answer is ill-discipline. Projects grow over time. More people join, some earlier folks leave, and the clarity of design vision deteriorates. The business decides to chase new markets, and some features get tacked on like Christmas decorations. Internal collaboration gets more challenging and sub-teams develop their design philosophies.

Requests flood in from a more diverse customer base. Competition needs to be kept at bay by adding in more stuff. Sprawl sets in. Before long it doesn’t feel safe to enter some screens alone after dark. High-quality products degrade. It happens to the best of us.

Design Systems of one flavour or another have been around for quite a while. Simply put, a design system is useful for when you need to design not just one thing, but a whole set of things that you want to feel like a coherent family. If you come up with a template and stay true to it, you’ll get that coherence for free.

So instead of designing one subway sign, you might come up with a set of graphic standards that allow you to design a whole set of signs and symbols that work together in concert.

Or instead of designing a logo for an organization, you might develop a visual system for representing that organization in all sorts of different contexts. Space exploration and classic graphic design, what’s not to love?

CSS frameworks like Twitter Bootstrap dragged these ideas into the world of web development, providing reusable code snippets to easily build consistent UI elements like buttons and dropdowns. Wonderful, even if every website in the world looked the same for a while.

Brad Frost’s influential Atomic Design methodology put forward a more structural approach. Rather than a jumble of “atomic” elements scattered across a screen (e.g. a label, an input, a button), Atomic Design suggests that a small collection of user interface elements should be thought of as a meaningful component, (e.g. a page footer, a login form).

Finally, Google’s Material Design guidelines pushed the concept further. They brought deeper formal rationality, a bold aesthetic and resources and guidelines for building user interface elements across a range of platforms.

Check out the [Material Design 3](https://m3.material.io/)

Today, many larger companies have built their custom, in-house design systems in an attempt to stave off the inevitable creep of inconsistency. Airbnb, Salesforce and Uber have built comprehensive systems that keep their product user interfaces in check.

### **Climax**

The 1960s or 2022's. Interestingly, human beings have pushed themselves to develop innovative solutions for the world. Whether it's programming, designing, or whatever, always think of a solution to a problem rather than getting used to it. I remember the words of Hawking “However bad life may seem, there is always something you can do and succeed at. "Where there's life, there's hope.” Do your part to fight the problems and support your fellow being. Think to live Life.

History of Design Language System

Card Sorting is a method used to help design or evaluate the information architecture of a site. In a card sorting session, participants organize topics into categories that make sense to them and they may also help you label these groups.

### **Benefits of Card Sorting**

Card sorting will help you understand your users' expectations and understanding of your topics. It is often most useful once you have done some homework to find out about your users and understand your content. Knowing how your user's group information can help you:

* Build the structure for your website

* Decide what to put on the homepage

* Label categories and navigation

### **Open, Closed, and Hybrid Card Sorting**

Depending on your needs, you may choose to do an open or closed card sort.

**Open Card Sort**

Participants are asked to organize topics from content within your website into groups that make sense to them and then name each group they created in a way that they feel accurately describes the content.

Use an open card sort to learn how users group content and the terms or labels they give each category.

**Closed Card Sort**

Participants are asked to sort topics from content within your website into predefined categories.

A closed card sort works best when you are working with a predefined set of categories, and you want to learn how users to sort content items into each category.

**Hybrid Card Sort**

This is a combination of both Open card sort and Closed Card sort. You may also choose to try a combination of the two.

You could conduct an open card sort first to identify content categories and then use a closed card sort to see how well the category labels work.

### **Choosing a Technique**

1. One on One is in-person sessions with an observer. Participants think aloud while sorting, giving a clearer picture of their reactions and thought processes.

2. Group / Independent - Concurrent In-person Sessions have participants sort a set of cards independently. The facilitator may brief the participants at the beginning and debrief the participants at the end, but the participant works alone for most of the session.

3. Remote, Computer-based Sessions require participants to work independently. Participants sort the cards independently on their own computers. You can do open or closed card sorts remotely. Several software programs exist to help you with large-scale remote card-sorting studies. Using the software is an advantage because it analyzes the data for you.

4. Group - Concurrent In-person Sessions have participants sort a set of cards as a group. The facilitator may brief the participants at the beginning and debrief the participants at the end, but the participant together for most of the session.

### **How to Conduct a Card Sort**

* **Prepare the cards**

  1. Create your list of content topics. Topics can be phrases or words, very specific or more general. As a suggestion, limit yourself to 50-60 topics or less. This means there might not be a card to sort for every page on the site.

     * For a new site, list the content topics of types of information that you are likely to have on the site

     * For an existing site, list the most important/popular types of content

     * To create this list:

       * Review the content listed in your [content inventory](https://www.usability.gov/how-to-and-tools/methods/content-inventory.html).

       * Identify the most important or most frequently used content

  2. Decide whether you will be doing a physical card sort or using online card-sorting software.

     * If you are using online card-sorting software, consult the software instructions.

     * If you will be conducting a card sorting using physical cards, write each topic on a separate index card.

       * Use self-adhesive labels and a word processor. The cards will be neat, legible, and consistent. You'll have the list of topics on the computer for later analysis.

       * Number the cards in the bottom corner or on the back. This helps you when you begin to analyze the cards.

       * Have blank cards available for participants to add topics and to name the groups they make when they sort the cards.

       * Consider using a different coloured card for having participants name the groups.

* **Set-up the session**

  1. Plan about one hour for each session, longer if you have many cards.

  2. Arrange the space.

     * For paper card sorts, ensure the participant has enough room to spread the cards out on a table or tack/tape them up on a wall. A conference room works well.

     * For online card-sorts, ensure there is a computer with an internet connection available as well as room for both the participant(s) and facilitator to sit comfortably.

  3. Plan to have the facilitator or another usability team member take notes as the participant works and thinks aloud.

  4. As with other techniques, arrange for payment or other incentives to thank the participant for spending the time and effort helping you.

* **Lead the session**

  1. Show the participant the set of cards. Explain that you are asking for help to find what categories of information should be on the site's homepage and what those categories should be called.

     * In an open card sort, explain that you want to see what groupings of cards make sense to the participant and that you will ask for a name for each group of cards once the participant has grouped them. If you are conducting a closed card sort, explain that you want to see how the participant thinks the cards fit within the defined groups.

  2. Ask the participant to talk out loud while working. You want to understand the participant's thoughts, rationale, and frustrations.

  3. Let the participant work. Minimize interruptions but encourage the participant to think aloud. Allow the participant to:

     * Add cards - for example, to indicate lateral hyperlinks or additional topics.

     * Put cards aside to indicate topics the participant would not want on the site.

  4. If, in the end, the participant has too many groups for the homepage, ask if some of the groups could be combined.

  5. Ask the participant to name each category.

     * In an open card sort, give the participant a stack of different coloured cards. Ask the participant to use the coloured card to name each group. Ask what words the participant would expect to see on the homepage or second-level page that would lead the participant to that particular group of content items.

     * In a closed card sort, asking about word expectations, their final card organization, and other follow up questions can provide valuable insight and observations for your research.

  6. In the end, thank the participant and give the payment or other gift if promised.

* **Remote sorting sessions**

  1. Create your list of content topics. Topics can be phrases, words, etc., and can be very specific or more general. It might be tempting to have a card for every topic on your site, but in this case, more might not be better. Consider the cognitive load on the participant. You want them to be as on task for your first card as your last. As a suggestion, limit yourself to 50-60 topics or less.

  2. Prepare the cards according to the software instructions.

  3. Email your participants a link to the study. Provide instructions for the sort (whether open or closed) and let them know approximately how long the session should take to complete.

  4. If a comment box is available, urge participants to use the field to record any observations or questions. While you will not be able to answer them in real-time for the participant, these comments can be useful for your analysis.

  5. Thank the participant for his or her time and provide instructions for receiving payment or other gifts (if promised).

* **Analyze Your Data**

  1. Prepare your data for analysis.

     * If you used online card-sorting software, consult the software instructions. The software will analyze participant data in a variety of ways.

     * If you used physical cards for the test, either photograph the sort or use the numbers on the cards to quickly record what the participant did. Photograph or write down the names the participant gave to each grouping and the numbers of the cards the participant included under that name. Then you can reshuffle the cards for the next session.

       * Create a computer file for each session to gather a complete picture of the detailed site map each user creates.

       * Work from your original list of topics and move topics around to recreate each participant's groupings and enter that participant's name for the groupings.

       * If you used a physical card sort, you can also take a photograph of the finished card sort for reference later.

  2. Analyze qualitative information based on user comments.

  3. Analyze quantitative information based on:

     * Which cards appeared together most often

     * How often do cards appear in specific categories

  4. For a less detailed analysis of the results, use your notes and recordings of the participants' names and card numbers under each person's name to find commonalities from different sessions.

  5. For a more detailed analysis, consider using an Excel spreadsheet to show the relationship between the cards or use one of the available software programs to analyze your data.

  6. Pull together your findings in a [report](https://www.usability.gov/how-to-and-tools/resources/templates/card-sort-report-template.html) to share with your team and stakeholders.

  After you analyze the data from card sorting, you should have useful information for structuring the information architecture of the site. You should use the results of your card sort to help you define the navigation of your site.

### **Best Practices for Card Sorts**

* Limit the number of cards. It is tempting to want the participant to sort "ALL" of your content, but be mindful of participant fatigue. We would recommend 30 to 40 at the absolute outside, especially for an open sort.

* If possible, randomize the order of the presentation so that each piece of content has a chance to be sorted earlier in the session.

* Provide the participants with an estimate of how long the card sort will take before beginning the session to help them better gauge the required time and effort.

* Consider the benefits of requiring participants to complete your sort. For an open sort, if possible consider requiring them to sort the cards, but perhaps not to label them, since that might be the more challenging part of the task, providing you have limited your items as suggested.

* Consider an open sort as part 1 and a closed sort as part 2 of your process. One allows you to learn what goes together, while 2 allows you to really test out your labels to see if they are intuitive to your participants.

### **Tools**

* <https://kardsort.com/>

* [Free online card sorting and tree testing - UX Metrics](https://uxmetrics.com/)

* <https://xsortapp.com/>

* [https://www.usabilitest.com](https://www.usabilitest.com/)

* <https://www.userzoom.com/>

👏 Thanks for reading