Literature on Concept Maps

Here’s the entire UX literature on Concept Maps by the Interaction Design Foundation, collated in one place:

Learn to Create Accessible Websites with the Principles of Universal Design

“Productivity is never an accident. It is always the result of a commitment to excellence, intelligent planning and focused effort.”
— Paul J. Meyer, premier international authority on goal setting, motivation, time management, and personal and professional development

Accessibility is not the first item we consider when we start designing a website. It is often a hidden need that we don't think about until something goes wrong. For example, let’s say you are in the middle of a design project and one of your test users tells you he can’t read the text on the screen. Then, you start analyzing what happened, and it turns out that he is one of the 8% of males in the world who has color blindness—and he could not differentiate the green font from the red background. Okay, we’ll admit that we often don’t see green text on a red background, but you get the point, don’t you?

Accessibility issues can creep in throughout the project life cycle. In fact, the most expensive accessibility issues often come after the completion of a project. In countries with strong accessibility legislations, companies can find themselves in costly lawsuits. In general, companies and federal agencies are accountable to provide equal access to all users. Besides legal matters, accessibility can benefit your users and also improve the brand of your product. That’s why, here, we will teach you to plan for and focus your efforts to design for accessibility in the first place.

Learn to Apply the 7 Principles of Universal Design

Graphical representation of the 7 Principles of Universal Design

The Principles of Universal Design was created by Ron Mace and a group of design researchers and practitioners across the United States. It was published in 1997 by NC State University, The Center for Visual Design. The Principles of Universal Design is an invaluable resource you can use to plan and guide your design process intelligently. This will benefit the company you work for and the people who’re going to use your designs in the end.
© Center for Universal Design, NC State. 2011, All rights reserved.

The Principles of Universal Design is a foundation for designers who set out to create Universal Design products. The principles were created to guide a wide range of design disciplines including environments, products, and communications. You can apply these principles to any design style or trend; they are timeless and adaptable. You will be proactively taking on accessibility by incorporating these principles at the beginning of a project.

There are seven principles, and they all include guidelines with actionable approaches for Universal Design. Each principle captures a key concept. Whenever you are using the guidelines to plan and evaluate your design, an important thing to note is that sometimes only a few of the seven principles will be relevant to your current design. In the following section, you'll learn about each of the seven principles and its guidelines. Additionally, we will look at design examples for each principle so you can apply these immediately to your projects.

Principle 1: Equitable Use

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

Equitable use is the first principle because it is the driver for accessibility. The principle promotes you to think about users with different abilities. When you use this principle, you must consider all users, instead of only the target users. When you design for all users, you will also improve the experience for your target users and increase the brand value of your company.

Guidelines for Equitable Use

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.

Design Example: Use strong color contrast to avoid stigmatizing users with color blindness

Colour blindness affects approximately 1 in 12 men (8%) and 1 in 200 women (0.5%) in the world. You can avoid segregating or stigmatizing your users by designing color palettes with strong contrast. One of the common myths about accessibility is if you design for accessibility, then you would be sacrificing the visual design. This is incorrect. A design with strong color contrast can be aesthetically appealing to all users.

A side-by-side comparison of an image with a simulation of how a colorblind person would view it.

Color blindness - deuteranomaly (red/green distinction). On the left are two pictures as seen by a person with "normal" vision. On the right, the same pictures are simulated as seen by a person with deuteranomaly. When you choose colors for your design, make sure to avoid red/green combinations.
© Johannes Ahlmann. 2011, CC BY 2.0.

Principle 2: Flexibility in Use

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

No one person is the same as another. A static and inflexible design will never be able to accommodate all users. The Flexibility in Use principle encourages flexible, adaptable and/or customizable design. It takes into account individual preferences and lets the users choose how they will use a product. When you provide choices for your users, they will feel more free and more in control of their experience on your website.

Guidelines for Flexibility in Use

2a. Provide 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.

Design Example: Provide customization for dashboards

Customization is a technique to accommodate a wide range of individual preferences and abilities. It enables users to choose and organize what they see on a website and how they will use it. Dashboards are good examples for customization. Many enterprise systems and project management applications have customizable dashboards. Depending on their various work tasks and needs, users can select what they want to see on the dashboard and how they want to use it.

Screenshot of a Trello board that shows the settings for changing the color of the cards.

Trello is a web-based project management application. It uses boards, lists and cards to help users to organize and prioritize their projects with flexibility. It offers a range of customizable dashboard options. Here, the user can choose the color of the cards to display on a board.
© Trello, LLC. All rights reserved, Fair Use.

Principle 3: Simple and Intuitive Use

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

Simple and intuitive use is one of the goals of user experience design. It’s not surprising this is also one of the universal design principles. This principle aims to reduce complexity and mental or cognitive loads. According to the cognitive load theory, humans can handle only 3–9 items in a short amount of time when processing information. So as to reduce complexity and reduce cognitive loads, you should always aim to present information between 3 and 9 items.

Guidelines for Simple and Intuitive Use

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 to be consistent with its importance.
3e. Provide effective prompting and feedback during and after task completion.

Design Example: Reduce visual clutter with Progressive Disclosure

Progressive Disclosure is an interaction design technique. It reduces visual clutter and removes irrelevant information on the screen. It prioritizes information to display on the screen based on user needs and interactions. On top of that, it allows the user to drill in for more information, usually without a page load. Progressive Disclosure reduces users’ cognitive loads and helps them focus on the tasks at hand.

Screenshot of the Mailchimp pricing page that shows an interactive slider for the user to input the number of subscribers.

MailChimp is a web-based email marketing service. On its pricing page, it uses progressive disclosure to display service plans. A user can interact with the slider to communicate the number of subscribers to whom she will be reaching out using MailChimp. Based on the input, MailChimp displays a subset of three service plans on the screen and recommends one of them to the user.
© MailChimp, LLC, Fair Use.

Principle 4: Perceptible Information

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

Information is critical to users. Whether it’s communicated via text, pictures, audio or videos, make sure the information is easy to digest and access. When you incorporate this principle into your design, start with your users. You can figure out how best to present information by considering users with disabilities, such as those with vision or hearing impairments.

Guidelines for Perceptible Information

4a. Use different modes (pictorial, verbal, tactile) for redundant presentation of essential information.
4b. Provide adequate contrast between essential information and its surroundings.
4c. Maximize "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 that people with sensory limitations use.

Design Example: Enable users with hearing impairments to watch videos with Video Transcription

Multimedia requires multisensory experiences, especially videos. People with hearing problems or language barriers have difficulty consuming information from videos. You can remove these barriers by providing video transcriptions and/or subtitles. Video transcriptions and subtitles add an alternative channel. They allow users to consume words and information from the video without relying on hearing. Designing with accessibility in mind can be a win-win situation for both the company and the users – just as it is for TED.

Screenshot of the TED website that shows the transcripts of a video, highlighting the text to indicate what is being spoken while the video plays.

TED is a non-profit organization, which is dedicated to spreading ideas via short power talks. The talks are usually 18 minutes or less and are often uploaded as videos on their websites. In order to reach and help as many users as possible, TED's website provides subtitles and transcriptions for their online videos. It also provides the option to select a language. That’s a huge service for the hearing-impaired user, and it’s a great service for everybody else who prefers to read instead of viewing and hearing videos. In turn, it’s also good for TED as they reach more users and increase their popularity. When designing for accessibility, this is most often the case. It’s a win-win situation for both the users and the companies or organizations we design for.
© TED Conferences, LLC., Fair Use.

Principle 5: Tolerance for Error

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

"Human beings should only use technology which if the worst case happens, it leads to an acceptable damage. Definitely nuclear energy is not in that category. I want an industrial world where people are allowed to make errors. Because human creativity has to do with being allowed to make errors. We want an error-friendly environment.”
— Hans-Peter Durr, a German physicist

Errors are inevitable amongst humans, hence the adage “to err is human”. While we are not designing for nuclear technology, we should design for an error-friendly environment. Universal Design aims to design for all users—as well as design in anticipation for different environments and users’ actions; this principle pushes you to think beyond the screen and how the system and user will interact with each other.

Guidelines for Tolerance for Error

5a. Arrange elements so as to minimize hazards and errors: most used elements, most accessible, with hazardous elements eliminated, isolated, or shielded.
5b. Provide warnings about hazards and errors.
5c. Provide fail-safe features.
5d. Discourage unconscious action in tasks that require vigilance.

Design Example: Reduce submission error with Form Validation

Form Validation minimizes and prevents user errors. There are three ways to validate form inputs.

1. Input Format Validation – Make sure the user has used the correct format for an input field. For example, the email address input field should have a format start with a string of alphabets and/or letters, followed by ‘@’ and an email domain name.

2. Data Validation – Check to make sure whether the data the user entered is in the correct context. For example, many hotel reservation systems need check-in dates to be no earlier than the ‘current’ day.

3. Server Validation – Input format validation and data validation are applied to a specific input field. Server validation sends all the data of a form to the server and checks for a correct data relationship. For example, a simple login form would use server validation to check whether the username and password are correct.

The interface of Twitter's login screen that shows error messages beside the form fields.

Twitter is an online social networking service, which allows users to send and read messages of 280 characters or less. Here is Twitter’s sign-up form with error messages for input format validation errors. It checks for correct email and password format.
© Twitter, LLC., Fair Use.

Principle 6: Low Physical Effort

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

We may not first associate physical efforts with using the web. Anyone can easily just sit down and use a mouse, but technology is now integrated and ubiquitous in workplaces. Many people are using their computers for eight or more hours to perform tasks at work. The amount of time we spend on our computers is taxing on our bodies. In fact, people with physical disability have even more difficulty with using the web than normal users do. For example, those with mobility issues may have a hard time moving the mouse to the desired target. This is why designing for low physical efforts is vital to bear in mind whenever we work.

Guidelines for Low Physical Effort

6a. Allow user to maintain a neutral body position.
6b. Use reasonable operating forces.
6c. Minimize repetitive actions.
6d. Minimize sustained physical effort.

Design Example: Minimalize mouse usage with Keyboard Shortcuts

Keyboard shortcuts reduce the need to move from the keyboard to the mouse for simple tasks. Most browsers such as Chrome, Firefox, and Safari provide keyboard shortcuts to perform tasks such as copy (Ctrl + C) and paste (Ctrl + V). You can design superb interactive experiences by adding appropriate keyboard shortcuts. They will improve the navigation and make websites easier to use for all users.

A list of all the keyboard shortcuts that are present within Asana.

Asana is a web-based project management platform. It allows teams to track and manage work items. Asana has a rich set of keyboard shortcuts. These shortcuts reduce mouse usage and minimize repetitive actions.
© Asana, LLC., Fair Use.

Principle 7: Size and Space for Approach and Use

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

For product designers, their focus is on form factors such as the size of and space involved with the product. As digital designers, our focus is less on form factors but more on what is on the screen. This is a shortsighted mindset because it is important to think outside of the screen and consider our users’ environment as well, especially as users view websites not only on desktops but also—increasingly—on mobile devices as well. As you can see, most of the guidelines for this principle apply more to product and environmental design. Nevertheless, we can still look at the principle and its guidelines so as to create a universal design website, one for both desktop and mobile devices.

Guidelines for Size and Space for Approach and Use

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.

Design Example: Consider the Target Area of your website when it is on mobile devices

On a desktop, a user interacts with a website via a small pointer on the screen. On a mobile device, a user interacts with a website using his or her index finger or thumb. A small target area can be a problem on mobile devices because it is more difficult to select with precision. According to an MIT Touch Lab study in 2003, the average size of a human adult index finger is 1.6 to 2 cm. Converting that, we have approximately 60–76 pixels on a digital screen. So, the next time you design for mobile, make sure your touch target areas take the human physical factors into consideration.

A person using a smartphone, pointing to the screen with the index finger.

According to an MIT Touch Lab study in 2003, the average size of a human adult index finger is 1.6 to 2 cm. If we convert that to pixels, then it is approximately 60px to 76px on a digital screen. You can improve the accessibility of your product if you provide adequate target areas for your users.
© jéshoots, CC0

The Importance of Universal Design

The most important international work on accessibility is the Convention on the Rights of Persons with Disability (CRPD). We refer to it as the Convention by lawmakers and the disability community. It is the first major human rights treaty of the 21st century, and it protects the rights and dignity of persons with disabilities. It calls for the removal of environmental and attitudinal barriers in physical and digital spaces. The United Nations (U.N.) adopted the CRPD in 2007. As of July 2015, as many as 157 countries had ratified the Convention and 159 countries had signed it.

The Convention listed Universal Design as one of the general obligations to protect the rights of persons with disabilities. “To undertake or promote research and development of universally designed goods, services, equipment and facilities, as defined in article 2 of the present Convention, which should require the minimum possible adaptation and the least cost to meet the specific needs of a person with disabilities, to promote their availability and use, and to promote universal design in the development of standards and guidelines;”
— U.N. Convention on the Rights of Persons with Disabilities, Article 4, 2006

The Takeaway

Creating accessible products can be a challenging task. Sometimes, we as designers do not know where to start. Universal Design is a solid approach to design because the seven principles help us consider the needs of all users in general. Universal Design benefits everyone, not just the aging population or people with disability. The Principles of Universal Design is a great resource for us to use when we want to design accessible websites, ones which serve and cater to as many users as possible. These principles will help guide your design process. Thus, you should incorporate them into any project you do from the very beginning.

References & Where to Learn More

Course: Accessibility—How to Design for All

Text version of the Principles of Universal Design

Universal Design Case studies and examples

U.N. Convention on the Rights of Persons with Disabilities

Learn more about Concept Maps

Take a deep dive into Concept Maps with our course Accessibility: How to Design for All .

Good accessibility is crucial to making your website or app a success. Not only is designing for accessibility required by law in many countries—if you fail to consider accessibility, you are excluding millions of people from using your product. The UN estimates that more than 1 billion people around the world live with some form of disability and as populations age over the coming years, that number is expected to rise rapidly. Add to that the 10 percent of people who suffer from color blindness, and you start to get an idea of why accessibility is so important—not just for moral and legal reasons, but also so that your products can reach their full potential. You need to design for accessibility!

So… what is a proven and pain-free way to well-executed accessibility? If you’ve ever tried to optimize your site or app for accessibility, you’ll know it can be a complex and intimidating task… and it can therefore be very tempting to leave it until last or, worse still, avoid it altogether. By understanding that accessibility is about more than just optimizing your code, you’ll find you can build it into your design process. This will ensure you are taking a disability advocacy approach, and keeping the focus on your users throughout the development process.

This course will help you achieve exactly that—from handling images to getting the most out of ARIA markup, you’ll learn how to approach accessibility from all angles. You’ll gain practical, hands-on skills that’ll enable you to assess and optimize for common accessibility issues, as well as show you how to place an emphasis on the quality of the user experience by avoiding classic mistakes. What’s more, you’ll also come away with the knowledge to conduct effective accessibility testing through working with users with disabilities.

The course includes interviews with an accessibility specialist and blind user, as well as multiple real-world examples of websites and apps where you can demonstrate your skills through analysis and accessibility tests. Not only will this give you a more practical view of accessibility, but you’ll also be able to optimize your websites and mobile apps in an expert manner—avoiding key mistakes that are commonly made when designing for accessibility.

You will be taught by Frank Spillers, CEO of the award-winning UX firm Experience Dynamics, and will be able to leverage his experience from two decades of working with accessibility. Given that, you will be able to learn from, and avoid, the mistakes he’s come across, and apply the best practices he’s developed over time in order to truly make your accessibility efforts shine. Upon completing the course, you will have the skills required to adhere to accessibility guidelines while growing your awareness of accessibility, and ensuring your organization’s maturity grows alongside your own.

Accessibility: How to Design for All

Closes in

-1

days

hrs

-59

mins

-59

secs

booked

All open-source articles on Concept Maps

The Principles of Information Visualization for Basic Network Data

Not all data has dependencies or a linear structure. In fact some data is related by either or a combination of two prop

662 shares
6 years ago

Learn to Create Accessible Websites with the Principles of Universal Design

“Productivity is never an accident. It is always the result of a commitment to excellence, intelligent planning and

975 shares
3 years ago

Cognitive Maps in UX | IxDF

Cognitive maps in UX show how users think about a product or service. Designers use these visual representations so they

367 shares
5 mths ago

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!

Concept Maps

What are Concept Maps?

Benefits of Concept Maps

Key Components of Concept Maps

Role of Concept Maps in Knowledge Representation and Cognitive Mapping

Benefits and Applications of Concept Maps

Benefits of Concept Maps Across Different Domains

Real-World Example of Concept Maps

Applications of Concept Maps in Problem-Solving, Decision-Making, and Creativity Enhancement

Potential applications of concept maps in problem-solving:

Potential applications of concept maps in decision-making:

Potential applications of concept maps in creativity enhancement:

How to Create Effective Concept Maps

Steps to Create Concept Maps

Step 1: Define Your Focus Question

Step 2: Identify Related Concepts

Step 3: Choose Your Concept Mapping Tool

Step 4: Draw Your Central Concept

Step 5: Establish Connections Between Concepts

Step 6: Define the Relationships

Step 7: Review and Refine Your Concept Map

Step 8: Customize Your Concept Map Design

Step 9: Iterate

Best Practices for Concept Mapping

1. Focus on One Idea

2. Cluster Similar Concepts

3. Use Color-Coding

4. Incorporate Images and Icons

5. Use Linking Words

6. Make It Interactive

5 Tips For Enhancing Readability And Clarity In Concept Maps

1. Clear hierarchy

2. Appropriate spacing

3. Consistent layout

4. Use of colors

5. Legible fonts

Integrating into Workflows and Learning Environments

1. Daily planning

2. Meeting summaries

3. Learning and study

4. Project management

5. Collaborative brainstorming

6. Integration with digital tools

Tools and Software for Concept Mapping

1. ClickUp

2. Xmind

3. GitMind

4. Canva

5. TheBrain

Collaborative Concept Mapping

Benefits of collaborative concept mapping

1. Fostering Teamwork

2. Sharing Knowledge

3. Combating Cognitive Biases

4. Enhancing Retention

Techniques and Tools for Collaborative Concept Mapping

1. Brainstorming Sessions

2. Real-time editing

3. Feedback loops

4. Use templates

5. Integration with other tools

Example of Successful Collaborative Concept Mapping Project

Study: Improving Medical Student Learning with Concept Maps

Background and Purpose

Methods

Results

Conclusion

Advanced Concepts in Concept Mapping

Advanced Techniques and Concepts

1. Concept Linking

2. Concept Evolution

3. Ontologies

Emerging Trends and Future Directions

1. Integration with Artificial Intelligence

2. Augmented Reality (AR) and Virtual Reality (VR) in Concept Mapping

3. Collaborative Real-time Mapping

4. Adaptive Concept Mapping

5. Integration with Other Digital Tools

6. Personalized Learning Paths

7. Semantic Analysis