From adda1a7476b5b6c472c0d27ce30ed5bded173d41 Mon Sep 17 00:00:00 2001 From: Ned Zimmerman Date: Tue, 3 Nov 2020 20:15:25 -0400 Subject: [PATCH 1/6] feat: add Markdown linting to Gruntfile Fix Markdown linting issues, add CI for linting. See: fluid-project/docs-inclusive-learning#38 --- .github/workflows/ci.yml | 26 +++++++ Gruntfile.js | 3 +- README.md | 11 ++- src/documents/activities/CauseAndEffect.md | 10 ++- .../activities/CollaborativeArtWarmup.md | 35 ++++++--- src/documents/activities/Create-a-Thon.md | 50 ++++++++---- src/documents/activities/FunctionalMashup.md | 37 ++++++--- .../activities/InclusiveDesignMapping.md | 37 ++++++--- src/documents/activities/MatchingGame.md | 19 ++--- .../ToddlerGrandparentConversation.md | 24 ++++-- src/documents/activities/VirtuousTornado.md | 78 +++++++++++++++---- src/documents/activities/WebOfStrings.md | 58 ++++++++++---- .../insights/DisabilityAsMismatch.md | 24 ++++-- .../DiverseParticipationAndPerspectives.md | 21 ++++- src/documents/insights/IntegratedSolutions.md | 22 ++++-- src/documents/insights/Interconnectedness.md | 15 +++- src/documents/insights/OneSizeFitsOne.md | 19 ++++- src/documents/insights/PersonalDiscovery.md | 22 +++++- src/documents/insights/UserContinuedDesign.md | 12 ++- src/documents/insights/VirtuousCycles.md | 11 ++- src/documents/practices/Collaborate.md | 19 ++--- .../practices/CommunicateMultimodally.md | 21 +++-- .../DesignForAdaptabilityAndFlexibility.md | 14 +++- src/documents/practices/DesignForPrivacy.md | 20 +++-- .../practices/DesignForUncertainty.md | 15 +++- .../practices/FacilitateInclusively.md | 24 ++++-- .../FocusOnFunctionalNeedsAndPreferences.md | 17 +++- .../IntegrateAccessibilityFromTheStart.md | 20 +++-- src/documents/practices/PracticeCoDesign.md | 14 +++- src/documents/practices/TestFrequently.md | 16 +++- src/documents/practices/WorkOpenly.md | 36 ++++----- .../tools/AccessibleCommunicationTools.md | 15 +++- src/documents/tools/AccessibleDesignTools.md | 17 ++-- .../tools/AccessibleDevelopmentTools.md | 15 +++- src/documents/tools/Infusion.md | 17 +++- src/documents/tools/MetadataAuthoring.md | 15 +++- src/documents/tools/Mindmaps.md | 21 +++-- src/documents/tools/MultimodalTesting.md | 18 ++++- src/documents/tools/Personas.md | 23 ++++-- src/documents/tools/Prototyping.md | 21 +++-- .../tools/SynchronizedDesignAssets.md | 16 +++- src/documents/tools/UXWalkthroughs.md | 21 +++-- src/documents/tools/UsabilityTesting.md | 24 ++++-- src/documents/tools/UseCases.md | 15 +++- src/documents/tools/UserStatesAndContexts.md | 19 +++-- src/documents/tools/Wireframes.md | 19 +++-- src/index.md | 39 +++++++--- 47 files changed, 793 insertions(+), 272 deletions(-) create mode 100644 .github/workflows/ci.yml diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..ab40473 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,26 @@ +name: CI + +on: + pull_request: + branches: [ main ] + +jobs: + test: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - name: Cache node modules + uses: actions/cache@v2 + with: + path: node_modules + key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }} + - name: Install dependencies + run: | + npm i + env: + CI: true + - name: Lint JavaScript, JSON, and Markdown files + run: | + npm run lint + env: + CI: true diff --git a/Gruntfile.js b/Gruntfile.js index 58bf949..a76f956 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -22,7 +22,8 @@ module.exports = function (grunt) { lintAll: { sources: { json: ["./*.json", ".eslintrc.json", ".stylelintrc.json", "./src/**/*.json"], - js: ["./*.js", ".eleventy.js", "src/**/*.js", "!src/lib/**/*.js"] + js: ["./*.js", ".eleventy.js", "src/**/*.js", "!src/lib/**/*.js"], + md: ["./src/documents/**/*.md","README.md","CONTRIBUTING.md","AUTHORS.md","./src/*.md", "!dist/**/*.md"] } } }); diff --git a/README.md b/README.md index 1f9889a..79c292d 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ This project contains the content needed to build and deploy a copy of the Inclu 1. Install the required NPM packages: `npm install` 2. Run [Eleventy](http://11ty.dev) in development mode: `npm start`. -The website will be available at http://localhost:8080. +The website will be available at . ### To build and serve using Docker @@ -32,10 +32,13 @@ If you make changes to the website, repeat the steps to build the image and star 2. Run the build script: `npm run build` 3. Upload the contents of the `./dist/` directory to the web root of your server. -If you make changes to the website, repeat step 2 to build the website and upload any changed files from the `./dist/` directory to the web root of your server. +If you make changes to the website, repeat step 2 to build the website and upload any changed files from the `./dist/` +directory to the web root of your server. ## License Information -The Inclusive Design Guide's code is licensed under the [BSD 3-Clause](https://raw.githubusercontent.com/inclusive-design/guide.inclusivedesign.ca/blob/main/LICENSE.md) license. +The Inclusive Design Guide's code is licensed under the [BSD +3-Clause](https://raw.githubusercontent.com/inclusive-design/guide.inclusivedesign.ca/blob/main/LICENSE.md) license. -The Inclusive Design Guide's content is licensed under the [Creative Commons Attribution 3.0](http://creativecommons.org/licenses/by/3.0/) license. +The Inclusive Design Guide's content is licensed under the [Creative Commons Attribution +3.0](http://creativecommons.org/licenses/by/3.0/) license. diff --git a/src/documents/activities/CauseAndEffect.md b/src/documents/activities/CauseAndEffect.md index a2ba732..64c9ba5 100644 --- a/src/documents/activities/CauseAndEffect.md +++ b/src/documents/activities/CauseAndEffect.md @@ -6,7 +6,8 @@ eleventyNavigation: order: 3 --- -This activity demonstrates the potential to have a broader beneficial impact with our everyday actions. The challenge is to define a possible chain of events that could take you from a specific cause to an effect. +This activity demonstrates the potential to have a broader beneficial impact with our everyday actions. The challenge is +to define a possible chain of events that could take you from a specific cause to an effect. Causes defined in this exercise are everyday tasks such as: @@ -20,7 +21,9 @@ While the effects might include: The effects are as far away from the causes as possible. -Use the accompanying [Cause and Effect card deck](/assets/images/CauseAndEffectCards.pdf) (downloadable pdf), or think up your own examples. These should be as specific and diverse as possible, and the relationship between cause and effect should not immediately be clear. +Use the accompanying [Cause and Effect card deck](/assets/images/CauseAndEffectCards.pdf) (downloadable pdf), or think +up your own examples. These should be as specific and diverse as possible, and the relationship between cause and effect +should not immediately be clear. ## Step 1 @@ -28,7 +31,8 @@ Choose a random card from the Cause deck, then do the same from the Effect deck. ## Step 2 -Define a chain of effects that takes you all the way from the initial cause to the final effect. Record each effect and map out the chain of effects - allowing branching or multiple paths where they emerge. +Define a chain of effects that takes you all the way from the initial cause to the final effect. Record each effect and +map out the chain of effects - allowing branching or multiple paths where they emerge. ## Why diff --git a/src/documents/activities/CollaborativeArtWarmup.md b/src/documents/activities/CollaborativeArtWarmup.md index a01a228..d0a6772 100644 --- a/src/documents/activities/CollaborativeArtWarmup.md +++ b/src/documents/activities/CollaborativeArtWarmup.md @@ -6,13 +6,17 @@ eleventyNavigation: order: 6 --- -This exercise is intended to be fun and quick. It can be used in meetings, co-design sessions or any other group context to help make participants comfortable in the space and in working collaboratively with each other. It introduces the practice of multi-modal communication and experience. +This exercise is intended to be fun and quick. It can be used in meetings, co-design sessions or any other group context +to help make participants comfortable in the space and in working collaboratively with each other. It introduces the +practice of multi-modal communication and experience. ## How ### Preparation -Working areas or stations should be set up for each group, using separate tables or other arrangements. Materials (lego, toys, coloured paper, pipe cleaners, tape, sticky notes, or anything available) can be placed at each station, or at an easily accessible location in the room. +Working areas or stations should be set up for each group, using separate tables or other arrangements. Materials (lego, +toys, coloured paper, pipe cleaners, tape, sticky notes, or anything available) can be placed at each station, or at an +easily accessible location in the room. ### Step 1 @@ -20,21 +24,27 @@ Break into small groups (3 or 4 people per group is best) and find a workstation ### Step 2 -Each group collaboratively builds a small art installation or artwork using any of the available materials. This step can take between 4-7 minutes. +Each group collaboratively builds a small art installation or artwork using any of the available materials. This step +can take between 4-7 minutes. Tip: Don’t worry too much about the outcome, take risks and play. -Tip: If there are members in your group that require audio description, make sure to describe the available materials at the start and to describe the artwork as it takes form. Allow for tactile exploration of the materials and the artwork as well. +Tip: If there are members in your group that require audio description, make sure to describe the available materials at +the start and to describe the artwork as it takes form. Allow for tactile exploration of the materials and the artwork +as well. -Tip: To ensure that everyone gets a chance to participate, you can have each group member take a turn adding something to the artwork. +Tip: To ensure that everyone gets a chance to participate, you can have each group member take a turn adding something +to the artwork. ### Step 3 -The groups rotate to the next station, and come up with a title and description for the work of art at that station. How would you describe the work to someone who can’t see it or isn’t here today? This step can take between 3-5 minutes. +The groups rotate to the next station, and come up with a title and description for the work of art at that station. How +would you describe the work to someone who can’t see it or isn’t here today? This step can take between 3-5 minutes. ### Step 4 -The groups rotate one more time. They now develop and document a brief artist statement (1-2 sentences) about the artwork at that station. This step can take between 3-5 minutes. +The groups rotate one more time. They now develop and document a brief artist statement (1-2 sentences) about the +artwork at that station. This step can take between 3-5 minutes. ### Step 5 @@ -42,16 +52,21 @@ Each group returns to their original station and shares the title, description a ## Why -This activity helps participants gain a deeper understanding of the different ways artwork or other content may be accessed, perceived and interpreted. It also helps participants to think beyond typical communication methods in order to expand the range of people who can access and use the content. +This activity helps participants gain a deeper understanding of the different ways artwork or other content may be +accessed, perceived and interpreted. It also helps participants to think beyond typical communication methods in order +to expand the range of people who can access and use the content.
-[![An image showing a small sculpture made of lego and pipe cleaners on a table top, beside which lie two hand-written notes, one of which includes a title and description, while the other contains an artist statement. ](/assets/images/collaborative_art.jpg)](/assets/images/collaborative_art.jpg) +[![An image showing a small sculpture made of lego and pipe cleaners on a table top, beside which lie two hand-written +notes, one of which includes a title and description, while the other contains an artist statement. +](/assets/images/collaborative_art.jpg)](/assets/images/collaborative_art.jpg)
*Figure 1:* Example of collaborative art created using the Collaborative Art Warmup Activity.
-[![An image showing a small sculpture made of lego, a toy car, and pipe cleaners on a table top. Some handwritten notes lie on the table beside the sculpture and a bin of lego can be seen in the background. +[![An image showing a small sculpture made of lego, a toy car, and pipe cleaners on a table top. Some handwritten notes +lie on the table beside the sculpture and a bin of lego can be seen in the background. ](/assets/images/collaborative_art2.jpg)](/assets/images/collaborative_art2.jpg)
*Figure 2:* Example of collaborative art created using the Collaborative Art Warmup Activity.
diff --git a/src/documents/activities/Create-a-Thon.md b/src/documents/activities/Create-a-Thon.md index d26032d..5acbe61 100644 --- a/src/documents/activities/Create-a-Thon.md +++ b/src/documents/activities/Create-a-Thon.md @@ -6,49 +6,73 @@ eleventyNavigation: order: 9 --- -A Create-a-Thon (_CaT_) brings together a diverse group of people in order to collaboratively contribute to the design of a system, product or service. The key is to involve a diverse group of participants, including those individuals whose needs aren’t met (who find a product or service impossible or difficult to use), as well as people whose insights are not usually represented because they do not fit into a construct of "typical", "average", or the envisioned "target audience". +A Create-a-Thon (_CaT_) brings together a diverse group of people in order to collaboratively contribute to the design +of a system, product or service. The key is to involve a diverse group of participants, including those individuals +whose needs aren’t met (who find a product or service impossible or difficult to use), as well as people whose insights +are not usually represented because they do not fit into a construct of "typical", "average", or the envisioned "target +audience".
-[![An image showing a group of four people participating in a Create-a-Thon, using building toys.](/assets/images/CaT-01.jpg)](/assets/images/CaT-01.jpg) +[![An image showing a group of four people participating in a Create-a-Thon, using building +toys.](/assets/images/CaT-01.jpg)](/assets/images/CaT-01.jpg)
*Figure 1:* A group collaborates together to build a marble track based on some basic requirements.
-A _CaT_ encourages participants to collaboratively build an artifact by “designing by metaphor” and use it as a means to translate their ideas to the systems, products or services being designed or tested. This helps constrain the physical artefact and enables participants to draw out connections that wouldn't otherwise be clear if they were directly asked to design a solution. It also gives non-expert designers an easier way to get involved and contribute their ideas without having prior knowledge or expertise. +A _CaT_ encourages participants to collaboratively build an artifact by “designing by metaphor” and use it as a means to +translate their ideas to the systems, products or services being designed or tested. This helps constrain the physical +artefact and enables participants to draw out connections that wouldn't otherwise be clear if they were directly asked +to design a solution. It also gives non-expert designers an easier way to get involved and contribute their ideas +without having prior knowledge or expertise. -During this collaborative event, participants should continuously describe the process to each other, support each other when there are different abilities, and communicate how the work gets done. Constant negotiation of needs generates individual stories and valuable information that should be recorded, collected, and applied to enhance the design of the system, product or service being iterated upon. It is important to avoid distilling user insights and stories to a collection of averages and eliminating individual differences in favour of sameness, because each story is as important as another and will contribute to rich designs and insights. +During this collaborative event, participants should continuously describe the process to each other, support each other +when there are different abilities, and communicate how the work gets done. Constant negotiation of needs generates +individual stories and valuable information that should be recorded, collected, and applied to enhance the design of the +system, product or service being iterated upon. It is important to avoid distilling user insights and stories to a +collection of averages and eliminating individual differences in favour of sameness, because each story is as important +as another and will contribute to rich designs and insights. -It is possible, even desirable, to conduct several _CaTs_ at different stages throughout a design process to gain additional insights. +It is possible, even desirable, to conduct several _CaTs_ at different stages throughout a design process to gain +additional insights.
-[![An image of a Create-a-Thon participant describing their group's design.](/assets/images/CaT-02.jpg)](/assets/images/CaT-02.jpg) +[![An image of a Create-a-Thon participant describing their group's +design.](/assets/images/CaT-02.jpg)](/assets/images/CaT-02.jpg)
-*Figure 2:* A participant shares their group's design after being given the task of creating a software version of the physical marble track toy.
+*Figure 2:* A participant shares their group's design after being given the task of creating a software version of the +physical marble track toy.
## Step 1 -Define a broad problem space with an end goal in mind. A broad problem space makes room for a larger demographic to participate. +Define a broad problem space with an end goal in mind. A broad problem space makes room for a larger demographic to +participate. ## Step 2 -Come up with some scenarios to aid exploration and focus the collaboration. The number of scenarios depends on the problem, the number of participants, and the available time. +Come up with some scenarios to aid exploration and focus the collaboration. The number of scenarios depends on the +problem, the number of participants, and the available time. ## Step 3 -Find participants from a spectrum of ages, gender, vocation, cultures, and ability to generate a variety of stories and perspectives. +Find participants from a spectrum of ages, gender, vocation, cultures, and ability to generate a variety of stories and +perspectives. ## Step 4 -Provide multiple means of expression so every participant can choose the medium and tools that enables them to share their ideas. +Provide multiple means of expression so every participant can choose the medium and tools that enables them to share +their ideas. ## Step 5 -Collect and preserve stories at the end of the event to serve as a touchstone for future design decisions and inspiration. +Collect and preserve stories at the end of the event to serve as a touchstone for future design decisions and +inspiration. ## CaT in depth -Additional information about Create-a-Thons, their rationale, and how to set up and conduct a CaT can be found in the article ["Create-a-Thon" on the Floe Inclusive Learning Design Handbook](https://handbook.floeproject.org/Create-a-Thon.html). +Additional information about Create-a-Thons, their rationale, and how to set up and conduct a CaT can be found in the +article ["Create-a-Thon" on the Floe Inclusive Learning Design +Handbook](https://handbook.floeproject.org/Create-a-Thon.html). ## Combine With diff --git a/src/documents/activities/FunctionalMashup.md b/src/documents/activities/FunctionalMashup.md index f0b2750..6c4f7a4 100644 --- a/src/documents/activities/FunctionalMashup.md +++ b/src/documents/activities/FunctionalMashup.md @@ -6,39 +6,54 @@ eleventyNavigation: order: 8 --- -This activity can be used in a co-design or other group design session to encourage participants to work together toward more creative and resourceful solutions, by thinking beyond the current or obvious. +This activity can be used in a co-design or other group design session to encourage participants to work together toward +more creative and resourceful solutions, by thinking beyond the current or obvious. ## How ### Preparation -You will need a deck of object cards. You can create your deck using any available materials. You might print images of different objects on paper or cardstock, use language learning flashcards, cut out magazine images and paste them onto cards, or find other ways to create a collection of random objects. +You will need a deck of object cards. You can create your deck using any available materials. You might print images of +different objects on paper or cardstock, use language learning flashcards, cut out magazine images and paste them onto +cards, or find other ways to create a collection of random objects.
-[![An image showing a large selection of cards spread out on the floor, each with a different magazine image pasted on.](/assets/images/object_cards.jpg)](/assets/images/object_cards.jpg) +[![An image showing a large selection of cards spread out on the floor, each with a different magazine image pasted +on.](/assets/images/object_cards.jpg)](/assets/images/object_cards.jpg)
-*Figure 1:* Example of a collection of object cards created by pasting random magazine images onto sheets of paper.
+*Figure 1:* Example of a collection of object cards created by pasting random magazine images onto sheets of +paper.
-If desired and available you can provide additional tools and materials that can be used together with the object cards to build prototypes (e.g. scissors, glue, tape, pipe cleaners, etc.). +If desired and available you can provide additional tools and materials that can be used together with the object cards +to build prototypes (e.g. scissors, glue, tape, pipe cleaners, etc.). ### Steps * Break into smaller groups (3 to 5 people per group is usually best) -* Keeping the objects on the cards hidden, each group selects the same number of cards from the main deck (this number can be decided by the larger group). -* Each group then chooses or is assigned one function from a collection of functions - these can be determined by the facilitator ahead of time or collectively by the group. The functions can be realistic or can be more experimental and exploratory. For example: communicating with a neighbour during a power failure, sending money to relatives overseas, taking your newborn baby to work, walking your dog in an airplane, looking after your parents remotely, etc. -* The challenge for each group is to combine and use all of the objects on their cards to create something that fulfills the selected function. One way to approach this might be to tell a story about how your objects come together to fulfill the function. +* Keeping the objects on the cards hidden, each group selects the same number of cards from the main deck (this number + can be decided by the larger group). +* Each group then chooses or is assigned one function from a collection of functions - these can be determined by the + facilitator ahead of time or collectively by the group. The functions can be realistic or can be more experimental and + exploratory. For example: communicating with a neighbour during a power failure, sending money to relatives overseas, + taking your newborn baby to work, walking your dog in an airplane, looking after your parents remotely, etc. +* The challenge for each group is to combine and use all of the objects on their cards to create something that fulfills + the selected function. One way to approach this might be to tell a story about how your objects come together to + fulfill the function. **Tip**: Brainstorm different approaches and don’t limit your ideas to what is technically possible. - **Tip**: If there are members in your group that require audio description, be sure to describe the object cards and the process as you move forward. Allow for tactile exploration where appropriate. + **Tip**: If there are members in your group that require audio description, be sure to describe the object cards and + the process as you move forward. Allow for tactile exploration where appropriate. - **Tip**: You can prototype or communicate your solution/idea/story in whatever way that works best for your group (e.g. sketching, building, describing, etc). + **Tip**: You can prototype or communicate your solution/idea/story in whatever way that works best for your group (e.g. + sketching, building, describing, etc). **Tip**: In addition to the object cards, you can use any available materials to prototype your idea. ## Why -The goal of this activity is to promote creative thinking over immediate feasibility. It encourages participants to dig deeper to find unexpected and creative ways of addressing a problem. +The goal of this activity is to promote creative thinking over immediate feasibility. It encourages participants to dig +deeper to find unexpected and creative ways of addressing a problem. * {% include 'svg/icon-practices.svg' %} [Practice Co-Design](/practices/PracticeCoDesign.html) * {% include 'svg/icon-practices.svg' %} [Collaborate](/practices/Collaborate.html) diff --git a/src/documents/activities/InclusiveDesignMapping.md b/src/documents/activities/InclusiveDesignMapping.md index 625b52f..0cac020 100644 --- a/src/documents/activities/InclusiveDesignMapping.md +++ b/src/documents/activities/InclusiveDesignMapping.md @@ -6,13 +6,20 @@ eleventyNavigation: order: 2 --- -This activity is intended to be used in the context of co-design, where a diverse set of co-designers, including people who presently have difficulty using the design, are active participants in the design process. +This activity is intended to be used in the context of co-design, where a diverse set of co-designers, including people +who presently have difficulty using the design, are active participants in the design process. -The exercise is about **stretching and reaching**: to include people who are currently at the edges and who are therefore usually excluded from the design process. It is also about balance and flexibility: creating a design that does not compromise the experience of one person to make room for the requirements of another. +The exercise is about **stretching and reaching**: to include people who are currently at the edges and who are +therefore usually excluded from the design process. It is also about balance and flexibility: creating a design that +does not compromise the experience of one person to make room for the requirements of another. -In this activity, co-designers choose appropriate facets (or “slices”) from the accompanying set of [Inclusive Design Mapping Facets](/assets/images/InclusiveDesignMappingFacets.pdf) (downloadable pdf), to piece together a map of user needs as well as the functional requirements of a product or service. Once mapped, gaps between needs and requirements can then be identified. +In this activity, co-designers choose appropriate facets (or “slices”) from the accompanying set of [Inclusive Design +Mapping Facets](/assets/images/InclusiveDesignMappingFacets.pdf) (downloadable pdf), to piece together a map of user +needs as well as the functional requirements of a product or service. Once mapped, gaps between needs and requirements +can then be identified. -This activity utilises the accompanying Inclusive Design Mapping facets card deck. Co-designers are able to create their own facets if they can't find a desired state or context within the provided set. +This activity utilises the accompanying Inclusive Design Mapping facets card deck. Co-designers are able to create their +own facets if they can't find a desired state or context within the provided set. ## Why @@ -25,7 +32,8 @@ This activity utilises the accompanying Inclusive Design Mapping facets card dec Choose the facets that are relevant to the needs, preferences and the context you are designing for or critiquing.
-[![A diagram showing individual facets of the Inclusive Design Mapping Tool](/assets/images/InclusiveDesignMappingTool01.png)](/assets/images/InclusiveDesignMappingTool01.png) +[![A diagram showing individual facets of the Inclusive Design Mapping +Tool](/assets/images/InclusiveDesignMappingTool01.png)](/assets/images/InclusiveDesignMappingTool01.png)
*Figure 1:* Inclusive Design Mapping Tool - Choosing the Facets
@@ -33,10 +41,12 @@ Choose the facets that are relevant to the needs, preferences and the context yo ## Step 2 -Map your needs, preferences and context on the selected facets. Next, using a different color, map the product/task/solution you are trying to critique or design. +Map your needs, preferences and context on the selected facets. Next, using a different color, map the +product/task/solution you are trying to critique or design.
-[![A diagram showing individual facets with "yourself" and "product" mapped](/assets/images/InclusiveDesignMappingTool02.png)](/assets/images/InclusiveDesignMappingTool02.png) +[![A diagram showing individual facets with "yourself" and "product" +mapped](/assets/images/InclusiveDesignMappingTool02.png)](/assets/images/InclusiveDesignMappingTool02.png)
*Figure 2:* Inclusive Design Mapping Tool - Mapping onto the Facets
@@ -47,14 +57,16 @@ Map your needs, preferences and context on the selected facets. Next, using a di Now you can put the facets together, draw a jagged outline, and shade in the gap between the two outlines.
-[![A diagram showing facets pieced together into a circle, with mappings](/assets/images/InclusiveDesignMappingTool03.png)](/assets/images/InclusiveDesignMappingTool03.png) +[![A diagram showing facets pieced together into a circle, with +mappings](/assets/images/InclusiveDesignMappingTool03.png)](/assets/images/InclusiveDesignMappingTool03.png)
*Figure 3:* Inclusive Design Mapping Tool - Mapping the Current State
-[![A diagram showing the gap between self and product maps](/assets/images/InclusiveDesignMappingTool04.png)](/assets/images/InclusiveDesignMappingTool04.png) +[![A diagram showing the gap between self and product +maps](/assets/images/InclusiveDesignMappingTool04.png)](/assets/images/InclusiveDesignMappingTool04.png)
*Figure 4:* Inclusive Design Mapping Tool - Finding the Gap
@@ -62,10 +74,13 @@ Now you can put the facets together, draw a jagged outline, and shade in the gap ## Step 4 -Once you have a proposed new design, redo the map, with the goal of fully encompassing the jagged outline of the edge users. While iterating through the design process, the mapping can be very useful for identifying where your design does not stretch enough to meet the needs of edge users. +Once you have a proposed new design, redo the map, with the goal of fully encompassing the jagged outline of the edge +users. While iterating through the design process, the mapping can be very useful for identifying where your design does +not stretch enough to meet the needs of edge users.
-[![A diagram showing a new mapping with a positive gap](/assets/images/InclusiveDesignMappingTool05.png)](/assets/images/InclusiveDesignMappingTool05.png) +[![A diagram showing a new mapping with a positive +gap](/assets/images/InclusiveDesignMappingTool05.png)](/assets/images/InclusiveDesignMappingTool05.png)
*Figure 5:* Inclusive Design Mapping Tool - Proposing the Desired State
diff --git a/src/documents/activities/MatchingGame.md b/src/documents/activities/MatchingGame.md index db956f5..c0cfa0c 100644 --- a/src/documents/activities/MatchingGame.md +++ b/src/documents/activities/MatchingGame.md @@ -6,17 +6,18 @@ eleventyNavigation: order: 1 --- -Ask someone to think of and briefly describe someone they know (their age, interests, where they live, etc), then ask someone else to describe a daily task or goal that they typically have. Consider the context or situation in which your persona is carrying out their task or goal (e.g. at home in the morning, or in the car on the highway, etc). Feel free to add any information that might help to describe the situation in more detail. Consider an existing product or service that might help your persona accomplish their goal in the given context. +Ask someone to think of and briefly describe someone they know (their age, interests, where they live, etc), then ask +someone else to describe a daily task or goal that they typically have. Consider the context or situation in which your +persona is carrying out their task or goal (e.g. at home in the morning, or in the car on the highway, etc). Feel free +to add any information that might help to describe the situation in more detail. Consider an existing product or service +that might help your persona accomplish their goal in the given context. -Frame your persona’s goal into a list of needs by considering the step-by-step process they might take in accomplishing their goal. Where possible, match these needs up with the features associated with your product or service. +Frame your persona’s goal into a list of needs by considering the step-by-step process they might take in accomplishing +their goal. Where possible, match these needs up with the features associated with your product or service. -Decide whether or not your persona was able to -accomplish their goal using the product or service -you have selected. Were their needs met at each -step? If not, consider how you might redesign this -product or service in a way that would allow them to -succeed, keeping in mind the insights, practices -and tools of inclusive design. +Decide whether or not your persona was able to accomplish their goal using the product or service you have selected. +Were their needs met at each step? If not, consider how you might redesign this product or service in a way that would +allow them to succeed, keeping in mind the insights, practices and tools of inclusive design. ## How diff --git a/src/documents/activities/ToddlerGrandparentConversation.md b/src/documents/activities/ToddlerGrandparentConversation.md index e58aa4d..7409518 100644 --- a/src/documents/activities/ToddlerGrandparentConversation.md +++ b/src/documents/activities/ToddlerGrandparentConversation.md @@ -6,19 +6,31 @@ eleventyNavigation: order: 4 --- -Toddlers repeatedly ask “why?”. Why is the sky blue? Why do cats have tails? In this activity, we participate in an imagined grandparent-toddler conversation by repeatedly asking “why?”. +Toddlers repeatedly ask “why?”. Why is the sky blue? Why do cats have tails? In this activity, we participate in an +imagined grandparent-toddler conversation by repeatedly asking “why?”. -This activity is a great way to unpack the motivations or the nested context of a design scenario. It demonstrates and exercises the third dimension of inclusive design – Broader Beneficial Impact – by taking us from the local and immediate assumptions out to the larger framing and context. +This activity is a great way to unpack the motivations or the nested context of a design scenario. It demonstrates and +exercises the third dimension of inclusive design – Broader Beneficial Impact – by taking us from the local and +immediate assumptions out to the larger framing and context. -The Toddler-Grandparent Conversation can be used to question and reflect on our assumptions and get to the fundamental motivations of our design process, and to query the goal or objective of a design process. It provides a way for a group to respectfully and collaboratively reflect on their fundamental vision for a design, allowing time to slow down and explore a more expansive view in a way that a wise grandparent conversing with a grandchild might. +The Toddler-Grandparent Conversation can be used to question and reflect on our assumptions and get to the fundamental +motivations of our design process, and to query the goal or objective of a design process. It provides a way for a group +to respectfully and collaboratively reflect on their fundamental vision for a design, allowing time to slow down and +explore a more expansive view in a way that a wise grandparent conversing with a grandchild might. ## How -Pairs or groups can roleplay this process by having one person begin with a simple statement about the design goal or motivation. For example: “We need to build cars that can drive themselves”, or “We want to help people find jobs”. +Pairs or groups can roleplay this process by having one person begin with a simple statement about the design goal or +motivation. For example: “We need to build cars that can drive themselves”, or “We want to help people find jobs”. -One member of the group then asks “why?”, and another member of the group must answer the question with a statement, framing it in a way that a toddler would be able to understand. For example “Because there will be less car accidents and fewer people getting hurt”, or “Because people need to be able to buy food for themselves and their families and feel that they are doing something useful”. +One member of the group then asks “why?”, and another member of the group must answer the question with a statement, +framing it in a way that a toddler would be able to understand. For example “Because there will be less car accidents +and fewer people getting hurt”, or “Because people need to be able to buy food for themselves and their families and +feel that they are doing something useful”. -A member of the group again asks “why?” and so on, until the group feels they have developed a strong sense of the fundamental motivation and larger context of the design scenario. One member of the group can record the answers at each step. +A member of the group again asks “why?” and so on, until the group feels they have developed a strong sense of the +fundamental motivation and larger context of the design scenario. One member of the group can record the answers at each +step. ## Why diff --git a/src/documents/activities/VirtuousTornado.md b/src/documents/activities/VirtuousTornado.md index c5d753a..7d08d68 100644 --- a/src/documents/activities/VirtuousTornado.md +++ b/src/documents/activities/VirtuousTornado.md @@ -8,16 +8,32 @@ eleventyNavigation: ## Introduction — Innovation at the Edges -When we have limited time and resources, we tend to follow the 80/20 rule; to tackle the 80% (majority needs) first, and leave the most difficult 20% (minority needs) for later. However, change and innovation are found at the margins. Designing for the 20% might take more time and resources at first, but it will be dynamically resilient and adaptable, and will also cost less in the long term (read more at [If You Want the Best Design Ask Strangers to Help](https://medium.com/ontariodigital/if-you-want-the-best-design-ask-strangers-to-help-e37bdb73567)). +When we have limited time and resources, we tend to follow the 80/20 rule; to tackle the 80% (majority needs) first, and +leave the most difficult 20% (minority needs) for later. However, change and innovation are found at the margins. +Designing for the 20% might take more time and resources at first, but it will be dynamically resilient and adaptable, +and will also cost less in the long term (read more at [If You Want the Best Design Ask Strangers to +Help](https://medium.com/ontariodigital/if-you-want-the-best-design-ask-strangers-to-help-e37bdb73567)). -This activity helps to break away from the 80/20 rule to consider more diverse perspectives and needs. You can try this activity when designing something new or when critiquing an existing design. It is most effective when a diverse set of co-designers, including people who presently have difficulty using the design or can't use the design, are active participants in the process. Before you begin, ask: who are we missing? +This activity helps to break away from the 80/20 rule to consider more diverse perspectives and needs. You can try this +activity when designing something new or when critiquing an existing design. It is most effective when a diverse set of +co-designers, including people who presently have difficulty using the design or can't use the design, are active +participants in the process. Before you begin, ask: who are we missing? -Consider a scatter-plot of the needs of any group of people. Everyone brings a variety of different ways of being and working, different skills and needs to the table. Consider where you might lie on the starburst when using a particular design. +Consider a scatter-plot of the needs of any group of people. Everyone brings a variety of different ways of being and +working, different skills and needs to the table. Consider where you might lie on the starburst when using a particular +design.
-[![A diagram showing a cluster of black dots on a white starburst background. The dots are densest at the centre of the starburst and become more and more spaced out as they move away from the centre. Three concentric, coloured circles are drawn around the dots. In the centre, the smallest blue circle is labelled “Design works”, moving outward from centre the next yellow circle is labelled “Design is difficult to use”, and finally a red circle around the outside is labelled “Can’t use design”. ](/assets/images/VirtuousTornado01.png)](/assets/images/VirtuousTornado01.png) +[![A diagram showing a cluster of black dots on a white starburst background. The dots are densest at the centre of the +starburst and become more and more spaced out as they move away from the centre. Three concentric, coloured circles are +drawn around the dots. In the centre, the smallest blue circle is labelled “Design works”, moving outward from centre +the next yellow circle is labelled “Design is difficult to use”, and finally a red circle around the outside is labelled +“Can’t use design”. ](/assets/images/VirtuousTornado01.png)](/assets/images/VirtuousTornado01.png)
-*Figure 1:* The starburst plot shows a denser set of dots (representing the majority needs) in the centre, and more widely spaced dots the further you get from that centre (the minority needs). Distance represents difference. The closer the dots the more similar they are. The wider they are spaced from each other the more they differ. Design innovation happens at the outer edges. +*Figure 1:* The starburst plot shows a denser set of dots (representing the majority needs) in the centre, and more +widely spaced dots the further you get from that centre (the minority needs). Distance represents difference. The closer +the dots the more similar they are. The wider they are spaced from each other the more they differ. Design innovation +happens at the outer edges.
@@ -29,19 +45,31 @@ Consider and note the following for your design: * The needs and characteristics of those that have difficulty using it * The needs and characteristics of those that can’t use the design -Map all of these needs and characteristics onto wedges or facets as shown in Figures 2 and 3. Use as many facets as you need to map all the needs and characteristics that you can think of. Place the needs that are met, representing people who can use the design with ease, in the center of the map. Place partially-met needs in the middle zone, representing people who have difficulty using the design. Place any unmet needs, representing people who cannot use the design, in the outer periphery of the map. Remember to consider your own needs in the process! +Map all of these needs and characteristics onto wedges or facets as shown in Figures 2 and 3. Use as many facets as you +need to map all the needs and characteristics that you can think of. Place the needs that are met, representing people +who can use the design with ease, in the center of the map. Place partially-met needs in the middle zone, representing +people who have difficulty using the design. Place any unmet needs, representing people who cannot use the design, in +the outer periphery of the map. Remember to consider your own needs in the process! -If you find it helpful, you can group the needs and characteristics into common themes and place these on individual facets; this can help your team realise additional needs that may be associated with each theme. This grouping is not essential, and where you place each need is not critical - as long as the process you choose allows you to consider as many needs as possible. +If you find it helpful, you can group the needs and characteristics into common themes and place these on individual +facets; this can help your team realise additional needs that may be associated with each theme. This grouping is not +essential, and where you place each need is not critical - as long as the process you choose allows you to consider as +many needs as possible.
-[![Image showing a circle broken into four quarters. Each quarter is labelled with “Designs that Help Me…” and is broken up into three equally spaced concentric sections, with “like & use” in the centre, “don’t like or having difficulty using” in the middle, and “can’t use” at the outer periphery. ](/assets/images/VirtuousTornado02.png)](/assets/images/VirtuousTornado02.png) +[![Image showing a circle broken into four quarters. Each quarter is labelled with “Designs that Help Me…” and is broken +up into three equally spaced concentric sections, with “like & use” in the centre, “don’t like or having difficulty +using” in the middle, and “can’t use” at the outer periphery. +](/assets/images/VirtuousTornado02.png)](/assets/images/VirtuousTornado02.png)
*Figure 2:* Template for mapping needs and characteristics in the context of a given design.
-[![ A photograph showing a large number of sticky notes on a table top. The sticky notes are covered in handwriting, and are stuck to and clustered on large paper wedges, which are themselves put together to form a circle. ](/assets/images/VirtuousTornado03.png)](/assets/images/VirtuousTornado03.png) +[![ A photograph showing a large number of sticky notes on a table top. The sticky notes are covered in handwriting, and +are stuck to and clustered on large paper wedges, which are themselves put together to form a circle. +](/assets/images/VirtuousTornado03.png)](/assets/images/VirtuousTornado03.png)
*Figure 3:* An example of mapping needs and characteristics onto the wedges of a circle.
@@ -49,17 +77,37 @@ If you find it helpful, you can group the needs and characteristics into common ## Iterating on the Design - The Virtuous Tornado -Rather than moving toward a single design solution, inclusive design is an iterative process that expands a design to encompass more possibility, more means of access, and more inclusive dimensions. This activity will help your team address the needs that you have identified in the previous mapping activity, and plan for future design iterations. +Rather than moving toward a single design solution, inclusive design is an iterative process that expands a design to +encompass more possibility, more means of access, and more inclusive dimensions. This activity will help your team +address the needs that you have identified in the previous mapping activity, and plan for future design iterations. -You can start small; each time you circle around and up the spiral you will be stretching the design to encompass more and more needs, and moving outward toward the edge of the starburst. At each cycle of iteration, ask “who are we missing?” Bring in another person, another scenario, another set of needs and characteristics. Plan as many iteration cycles as possible. You will sustain the availability and the accessibility of prior iterations, but continue to stretch out to create a more generous design. If you are able to change your design to meet the needs of at least one additional person, you are moving in the right direction. +You can start small; each time you circle around and up the spiral you will be stretching the design to encompass more +and more needs, and moving outward toward the edge of the starburst. At each cycle of iteration, ask “who are we +missing?” Bring in another person, another scenario, another set of needs and characteristics. Plan as many iteration +cycles as possible. You will sustain the availability and the accessibility of prior iterations, but continue to stretch +out to create a more generous design. If you are able to change your design to meet the needs of at least one additional +person, you are moving in the right direction. -In your groups, instead of competing to find the single best design, try coming up with a diversity of choices. If you are working in multiple groups, sharing with the larger group after each iteration can help to generate more ideas. You can adapt this process as needed to any particular group and particular needs and you can use whatever materials are available. +In your groups, instead of competing to find the single best design, try coming up with a diversity of choices. If you +are working in multiple groups, sharing with the larger group after each iteration can help to generate more ideas. You +can adapt this process as needed to any particular group and particular needs and you can use whatever materials are +available. -Consider solving not only for the specific design challenge, but also consider changes to your implementation or process that will improve the ability to solve future challenges. In this way your design will become more adaptable and it will be easier to widen the range of needs and characteristics that it can meet in the future. +Consider solving not only for the specific design challenge, but also consider changes to your implementation or process +that will improve the ability to solve future challenges. In this way your design will become more adaptable and it will +be easier to widen the range of needs and characteristics that it can meet in the future.
-[![A diagram showing a spiral in the centre which is getting wider and wider toward the top as it spirals outward. The spiral is split into five vertical and equal sections starting with “cycle 1” at the bottom and ending with “cycle 5” at the top. 5 corresponding injection points are indicated, showing the injection of needs and characteristics at each iteration point of the 5 cycles. At the base of the spiral the words co-design, develop, implement, evaluate and refine are shown forming a foundation. Three arrows move up through the centre of the spiral, from the foundation up and out to the following blocks of text: More resilient designs, more adaptable designs, more innovative designs, more inclusive designs, more accessible designs.](/assets/images/VirtuousTornado04.png)](/assets/images/VirtuousTornado04.png) +[![A diagram showing a spiral in the centre which is getting wider and wider toward the top as it spirals outward. The +spiral is split into five vertical and equal sections starting with “cycle 1” at the bottom and ending with “cycle 5” at +the top. 5 corresponding injection points are indicated, showing the injection of needs and characteristics at each +iteration point of the 5 cycles. At the base of the spiral the words co-design, develop, implement, evaluate and refine +are shown forming a foundation. Three arrows move up through the centre of the spiral, from the foundation up and out to +the following blocks of text: More resilient designs, more adaptable designs, more innovative designs, more inclusive +designs, more accessible designs.](/assets/images/VirtuousTornado04.png)](/assets/images/VirtuousTornado04.png)
-*Figure 4:* The virtuous tornado describes an upward spiral into which needs and characteristics are injected at each design iteration. As the design moves up the spiral it expands to encompass these needs, becoming more and more inclusive in the process. +*Figure 4:* The virtuous tornado describes an upward spiral into which needs and characteristics are injected at each +design iteration. As the design moves up the spiral it expands to encompass these needs, becoming more and more +inclusive in the process.
diff --git a/src/documents/activities/WebOfStrings.md b/src/documents/activities/WebOfStrings.md index e7aa378..438083b 100644 --- a/src/documents/activities/WebOfStrings.md +++ b/src/documents/activities/WebOfStrings.md @@ -6,54 +6,82 @@ eleventyNavigation: order: 7 --- -This exercise is intended to be fun and highly collaborative. To complete the required task, participants must work together and be mindful of each other's needs. +This exercise is intended to be fun and highly collaborative. To complete the required task, participants must work +together and be mindful of each other's needs. ## How -This activity can be done in an open space or on a table top depending on how large your group is and how they prefer to work. You will need several strings, two empty containers heavy enough to resist small knocks or bumps (heavy mugs, bowls, boxes, etc.), and one object that can fit inside each of your containers and that will not roll too easily (hacky sack, toy, notebook, pen, etc.). +This activity can be done in an open space or on a table top depending on how large your group is and how they prefer to +work. You will need several strings, two empty containers heavy enough to resist small knocks or bumps (heavy mugs, +bowls, boxes, etc.), and one object that can fit inside each of your containers and that will not roll too easily (hacky +sack, toy, notebook, pen, etc.). -**Tip**: try to include participants with a broad range of needs and preferences. The more diverse your group is, the more challenging and more meaningful the activity becomes. +**Tip**: try to include participants with a broad range of needs and preferences. The more diverse your group is, the +more challenging and more meaningful the activity becomes. -**Tip**: to calculate how many strings you need, divide the number of participants in your group by two. If you have an uneven number, you can tie one half a string to the middle of another string and lay it out so it is perpendicular to that string. +**Tip**: to calculate how many strings you need, divide the number of participants in your group by two. If you have an +uneven number, you can tie one half a string to the middle of another string and lay it out so it is perpendicular to +that string. -**Tip**: you need to match the size and weight of the object you are moving with the density of the web. The more strings you have, the denser your web will be, and the heavier the object it can hold. +**Tip**: you need to match the size and weight of the object you are moving with the density of the web. The more +strings you have, the denser your web will be, and the heavier the object it can hold. ### Preparation -* Place the empty containers at least 1 ft from each other. The further away the containers are from each other, the more challenging this activity becomes. -* Lay out all of the strings so that they intersect at the middle, with the intersection point lying over top of one of your containers (see Figures below). +* Place the empty containers at least 1 ft from each other. The further away the containers are from each other, the + more challenging this activity becomes. +* Lay out all of the strings so that they intersect at the middle, with the intersection point lying over top of one of + your containers (see Figures below). * Place the object on the intersection point of the strings, in the first container. * Each participant holds one end of a string. -**Tip**: the strings do not necessarily need to be held by hand. For example, a participant may use their mouth, or the end of a string can be attached to a wheelchair. +**Tip**: the strings do not necessarily need to be held by hand. For example, a participant may use their mouth, or the +end of a string can be attached to a wheelchair. ### Challenge -Work together as a team to transfer the object from one container to the other one without dropping it, by collaboratively lifting and moving the web of strings. +Work together as a team to transfer the object from one container to the other one without dropping it, by +collaboratively lifting and moving the web of strings. -**Tip**: if there are members in the group that require audio description, make sure to describe the direction of movement, the state of the object, the distance to the other container, and anything else that might help them to participate fully. +**Tip**: if there are members in the group that require audio description, make sure to describe the direction of +movement, the state of the object, the distance to the other container, and anything else that might help them to +participate fully. **Tip**: feel free to explore creative ways of working together with your group to complete this challenge. ## Why -This activity helps to make the experience of working collaboratively toward a common goal more tangible. The task requires that no one person overpower the others. Participants learn how to move in unison to keep the object from falling or rolling off the web, focusing on moving to the destination while working closely with each other. +This activity helps to make the experience of working collaboratively toward a common goal more tangible. The task +requires that no one person overpower the others. Participants learn how to move in unison to keep the object from +falling or rolling off the web, focusing on moving to the destination while working closely with each other.
-[![A diagram showing 8 evenly-spaced straight lines that all intersect at their mid-point, creating a kind of giant asterisk or starburst. The lines are labeled with numbers 1 through 8. Underlying the intersection point there is a circle labeled "first container" and a short distance away there is a second circle labeled "second container". Lying on top of the intersection point is a smaller circle labeled "object". Text reads "8 strings set up for 16 participants". ](/assets/images/web_of_strings_diagram.png)](/assets/images/web_of_strings_diagram.png) +[![A diagram showing 8 evenly-spaced straight lines that all intersect at their mid-point, creating a kind of giant +asterisk or starburst. The lines are labeled with numbers 1 through 8. Underlying the intersection point there is a +circle labeled "first container" and a short distance away there is a second circle labeled "second container". Lying on +top of the intersection point is a smaller circle labeled "object". Text reads "8 strings set up for 16 participants". +](/assets/images/web_of_strings_diagram.png)](/assets/images/web_of_strings_diagram.png)
-*Figure 1:* Preparatory layout for the web of strings activity. Each participant controls one end of a string, either by holding it in their hand, attaching it to their wheelchair, or in whatever way works best for them. The object is collaboratively transferred from the first container to the second using only the web of strings. +*Figure 1:* Preparatory layout for the web of strings activity. Each participant controls one end of a string, either by +holding it in their hand, attaching it to their wheelchair, or in whatever way works best for them. The object is +collaboratively transferred from the first container to the second using only the web of strings.
-[![An image showing a several blue strings laid out on the floor, all intersecting at their midpoint and forming a web in the shape of a large asterisk. The central intersection point of the strings lies on top of a white bowl, and an orange ball lies on top of the intersection point of the strings. Nearby sits another white bowl of the same size.](/assets/images/web_of_strings_layout.jpg)](/assets/images/web_of_strings_layout.jpg) +[![An image showing a several blue strings laid out on the floor, all intersecting at their midpoint and forming a web +in the shape of a large asterisk. The central intersection point of the strings lies on top of a white bowl, and an +orange ball lies on top of the intersection point of the strings. Nearby sits another white bowl of the same +size.](/assets/images/web_of_strings_layout.jpg)](/assets/images/web_of_strings_layout.jpg)
*Figure 2:* Preparatory layout for the web of strings activity.
-[![An image showing a closeup view of the intersection point of the web of strings raised above the floor, on which balances an orange ball. On the floor below a white bowl can be seen, as well as several participants standing in the background holding the ends of the strings.](/assets/images/web_of_strings_closeup.jpg)](/assets/images/web_of_strings_closeup.jpg) +[![An image showing a closeup view of the intersection point of the web of strings raised above the floor, on which +balances an orange ball. On the floor below a white bowl can be seen, as well as several participants standing in the +background holding the ends of the +strings.](/assets/images/web_of_strings_closeup.jpg)](/assets/images/web_of_strings_closeup.jpg)
*Figure 3:* Close up view of the web of strings in action.
diff --git a/src/documents/insights/DisabilityAsMismatch.md b/src/documents/insights/DisabilityAsMismatch.md index 1d3ddb1..e79cc8a 100644 --- a/src/documents/insights/DisabilityAsMismatch.md +++ b/src/documents/insights/DisabilityAsMismatch.md @@ -6,11 +6,19 @@ eleventyNavigation: order: 5 --- -The medical model defines disability as a trait; something permanent and limiting. In contrast, an inclusive design approach is one that perceives disability as a mismatch between our needs and the design features of a product, built environment, system or service. This shifts the responsibility to the design, and to the designer, to correct the mismatch. It shifts our perspective such that we understand the mismatch to be solvable through design, which encourages innovation. +The medical model defines disability as a trait; something permanent and limiting. In contrast, an inclusive design +approach is one that perceives disability as a mismatch between our needs and the design features of a product, built +environment, system or service. This shifts the responsibility to the design, and to the designer, to correct the +mismatch. It shifts our perspective such that we understand the mismatch to be solvable through design, which encourages +innovation. -For example, a multi-story building without an elevator does not match the needs of someone in a wheelchair, or someone who is exhausted after a long day. A digital interface with poor contrast does not match the needs of someone standing in direct sunlight or someone with low vision. An app that relies on drag-and-drop interaction does not match the needs of a screen reader user or someone with a broken wrist. +For example, a multi-story building without an elevator does not match the needs of someone in a wheelchair, or someone +who is exhausted after a long day. A digital interface with poor contrast does not match the needs of someone standing +in direct sunlight or someone with low vision. An app that relies on drag-and-drop interaction does not match the needs +of a screen reader user or someone with a broken wrist. -Inclusive design considers this mismatch to be conditional, solvable through design, and the result of many factors, including: +Inclusive design considers this mismatch to be conditional, solvable through design, and the result of many factors, +including: * context (e.g. upon waking up in the morning) * environment (e.g. a dark room) @@ -19,10 +27,14 @@ Inclusive design considers this mismatch to be conditional, solvable through des ## Try -Record three examples of an experience of mismatch that you’ve had, no matter how large or small. For example - standing at an automated bank machine in the glare of the sun, I couldn’t see the screen at all. How did you feel when this happened? What did you do about it? How could the design of the product or service be modified to meet your needs? +Record three examples of an experience of mismatch that you’ve had, no matter how large or small. For example - standing +at an automated bank machine in the glare of the sun, I couldn’t see the screen at all. How did you feel when this +happened? What did you do about it? How could the design of the product or service be modified to meet your needs? ## Use -* {% include 'svg/icon-practices.svg' %} [Focus on Functional Needs and Preferences](/practices/FocusOnFunctionalNeedsAndPreferences.html) -* {% include 'svg/icon-practices.svg' %} [Design for Adaptability and Flexibility](/practices/DesignForAdaptabilityAndFlexibility.html) +* {% include 'svg/icon-practices.svg' %} [Focus on Functional Needs and + Preferences](/practices/FocusOnFunctionalNeedsAndPreferences.html) +* {% include 'svg/icon-practices.svg' %} [Design for Adaptability and + Flexibility](/practices/DesignForAdaptabilityAndFlexibility.html) * {% include 'svg/icon-activities.svg' %} [Inclusive Design Mapping](/activities/InclusiveDesignMapping.html) diff --git a/src/documents/insights/DiverseParticipationAndPerspectives.md b/src/documents/insights/DiverseParticipationAndPerspectives.md index aae91f2..48ee006 100644 --- a/src/documents/insights/DiverseParticipationAndPerspectives.md +++ b/src/documents/insights/DiverseParticipationAndPerspectives.md @@ -6,15 +6,28 @@ eleventyNavigation: order: 1 --- -In keeping with the edict “nothing about us without us”, this principle is about inviting a diversity of people with a broad range of needs, preferences, interests and skills into the design process, and in so doing, weakening the distinction between user and designer. Considering inclusion in all aspects and at all stages of the design process requires that our communication methods, group processes and daily interactions are inclusive. This helps to ensure that the products and services that are created will be more inclusive. +In keeping with the edict “nothing about us without us”, this principle is about inviting a diversity of people with a +broad range of needs, preferences, interests and skills into the design process, and in so doing, weakening the +distinction between user and designer. Considering inclusion in all aspects and at all stages of the design process +requires that our communication methods, group processes and daily interactions are inclusive. This helps to ensure that +the products and services that are created will be more inclusive. -To support diverse participation and enable the design to be as closely linked as possible to the application, the design and development tools should be as accessible and usable as possible. Those new to the process must be provided with the information and resources to fully participate (e.g. by being given time to observe and become familiar with the community, culture, collective knowledge and processes). Communication methods should be transparent and multimodal, and design considerations for “alternative” modes of interaction should be given equal weight. +To support diverse participation and enable the design to be as closely linked as possible to the application, the +design and development tools should be as accessible and usable as possible. Those new to the process must be provided +with the information and resources to fully participate (e.g. by being given time to observe and become familiar with +the community, culture, collective knowledge and processes). Communication methods should be transparent and multimodal, +and design considerations for “alternative” modes of interaction should be given equal weight. -**Note:** This does not denigrate the skills of professional designers but calls for those skills to become more accessible and for the design process to become more inclusive of diverse designers and consumers. The role of the professional designer expands to include the responsibility for ensuring diverse participation and for ensuring that diverse voices are heard. +**Note:** This does not denigrate the skills of professional designers but calls for those skills to become more +accessible and for the design process to become more inclusive of diverse designers and consumers. The role of the +professional designer expands to include the responsibility for ensuring diverse participation and for ensuring that +diverse voices are heard. ## Try -Make a list of the methods of communication used in your everyday life (meetings, informal discussions, video conferences, phone calls, social media, emails, etc.). Identify some possible barriers that might prevent some from participating in that communication. Consider your own challenges with these processes or those of someone you know. +Make a list of the methods of communication used in your everyday life (meetings, informal discussions, video +conferences, phone calls, social media, emails, etc.). Identify some possible barriers that might prevent some from +participating in that communication. Consider your own challenges with these processes or those of someone you know. ## Use diff --git a/src/documents/insights/IntegratedSolutions.md b/src/documents/insights/IntegratedSolutions.md index 2d595f2..a8768d7 100644 --- a/src/documents/insights/IntegratedSolutions.md +++ b/src/documents/insights/IntegratedSolutions.md @@ -6,19 +6,31 @@ eleventyNavigation: order: 3 --- -Too often, design solutions that meet the needs of marginalized users, including users with disabilities, are segregated from the mainstream, resulting in unaffordable solutions and isolation of a particular population. For example, in the past, screen reader-accessible websites were created separately from the main site, often providing the user with a less engaging experience. +Too often, design solutions that meet the needs of marginalized users, including users with disabilities, are segregated +from the mainstream, resulting in unaffordable solutions and isolation of a particular population. For example, in the +past, screen reader-accessible websites were created separately from the main site, often providing the user with a less +engaging experience. -An inclusive design solution is one that is integrated into mainstream design, making the solution more affordable and more usable for all. For example, an accessible playground that is engaging and fun for all kids, including those with disabilities, allows them to play together rather than segregating some kids into a separate space. +An inclusive design solution is one that is integrated into mainstream design, making the solution more affordable and +more usable for all. For example, an accessible playground that is engaging and fun for all kids, including those with +disabilities, allows them to play together rather than segregating some kids into a separate space. -Creating adaptable and flexible designs is one way to allow for integration. In addition, when diverse participation in the design process is encouraged from the start, the resulting design solutions are much more likely to be fully integrated. By leveraging the curb-cut effect*, a solution created to meet the needs of a particular population becomes more usable for everyone. +Creating adaptable and flexible designs is one way to allow for integration. In addition, when diverse participation in +the design process is encouraged from the start, the resulting design solutions are much more likely to be fully +integrated. By leveraging the curb-cut effect*, a solution created to meet the needs of a particular population becomes +more usable for everyone. -Integration is often avoided and is left to the end users. This approach can lead to costly modification processes, legal penalties and ultimately misses an opportunity to reach out to many people who might have benefited from that integration. +Integration is often avoided and is left to the end users. This approach can lead to costly modification processes, +legal penalties and ultimately misses an opportunity to reach out to many people who might have benefited from that +integration. *a ramp from the street to the sidewalk designed for wheelchairs, that also meets the needs of others e.g. cyclists ## Try -Think of one of your latest projects. List some of the users that it intends to serve. Now consider an alternate solution that would serve an individual or group of users with different needs but the same goal. How could you integrate these two solutions together such that it could meet the needs of both groups? +Think of one of your latest projects. List some of the users that it intends to serve. Now consider an alternate +solution that would serve an individual or group of users with different needs but the same goal. How could you +integrate these two solutions together such that it could meet the needs of both groups? ## Use diff --git a/src/documents/insights/Interconnectedness.md b/src/documents/insights/Interconnectedness.md index c77b4fb..1390b56 100644 --- a/src/documents/insights/Interconnectedness.md +++ b/src/documents/insights/Interconnectedness.md @@ -6,11 +6,20 @@ eleventyNavigation: order: 4 --- -Once we release a solution, it will become part of a larger system. Although we can determine specific functionalities for that solution and define a target user group, we cannot predict and control who will use our solution and how it will be used. Thus, design processes need to take into account the interactions of various systems with complex and unique humans, as well as the external social, cultural, economic and technological forces that exist for each of us. +Once we release a solution, it will become part of a larger system. Although we can determine specific functionalities +for that solution and define a target user group, we cannot predict and control who will use our solution and how it +will be used. Thus, design processes need to take into account the interactions of various systems with complex and +unique humans, as well as the external social, cultural, economic and technological forces that exist for each of us. -It is not practical for a designer to meet the needs of every user and include every desired feature within a single product or service, nor to predict the infinite variety of creative, serendipitous, and unexpected uses that a product or service can be subjected to. By creating flexible and adaptable designs, the user can continue the design process by adapting, remixing and repurposing to better meet their needs. +It is not practical for a designer to meet the needs of every user and include every desired feature within a single +product or service, nor to predict the infinite variety of creative, serendipitous, and unexpected uses that a product +or service can be subjected to. By creating flexible and adaptable designs, the user can continue the design process by +adapting, remixing and repurposing to better meet their needs. -In other words, by understanding the interconnectedness of people and systems and their mutual influence, our designs can allow for the ever-emerging and evolving interactions between them. By incorporating an openness, flexibility and adaptability into our designs, we acknowledge and allow for this interconnection, thereby promoting the organic growth of our systems and increasing their reach. +In other words, by understanding the interconnectedness of people and systems and their mutual influence, our designs +can allow for the ever-emerging and evolving interactions between them. By incorporating an openness, flexibility and +adaptability into our designs, we acknowledge and allow for this interconnection, thereby promoting the organic growth +of our systems and increasing their reach. ## Try diff --git a/src/documents/insights/OneSizeFitsOne.md b/src/documents/insights/OneSizeFitsOne.md index 2bb4f49..defe95c 100644 --- a/src/documents/insights/OneSizeFitsOne.md +++ b/src/documents/insights/OneSizeFitsOne.md @@ -6,15 +6,26 @@ eleventyNavigation: order: 2 --- -We all have diverse needs, and we all experience changes in our lives, in both the short-term and long-term, that affect our interests, goals and desires. As a result, designs that are flexible and allow for customization are more likely to meet our needs. +We all have diverse needs, and we all experience changes in our lives, in both the short-term and long-term, that affect +our interests, goals and desires. As a result, designs that are flexible and allow for customization are more likely to +meet our needs. -A one-size-fits-one approach avoids the often segregated and specialized design solutions that are intended to meet the needs of those “on the margins”. These solutions do not serve the individual or society in the long run. Adaptable designs that allow for personalization result in integrated systems that work better for everyone. In the digital world, we have the freedom to create a design system that can adapt, morph, or stretch to address each design need presented by each individual. +A one-size-fits-one approach avoids the often segregated and specialized design solutions that are intended to meet the +needs of those “on the margins”. These solutions do not serve the individual or society in the long run. Adaptable +designs that allow for personalization result in integrated systems that work better for everyone. In the digital world, +we have the freedom to create a design system that can adapt, morph, or stretch to address each design need presented by +each individual. -In addition, one-size-fits-one design solutions give us the power to discover and choose what works best for us in any given context. This puts more control into the hands of any one of us to create our own experience, and to modify this experience as needed. +In addition, one-size-fits-one design solutions give us the power to discover and choose what works best for us in any +given context. This puts more control into the hands of any one of us to create our own experience, and to modify this +experience as needed. ## Try -Think of something you’ve come across in your daily life that demonstrates an adaptable design. For example, an office chair with multiple adjustment features, or a suitcase that can be turned into a backpack. How could this design be improved to offer additional or different adaptations? Alternatively, consider 3 adaptations you’d like to have on a product or tool you use on a regular basis. +Think of something you’ve come across in your daily life that demonstrates an adaptable design. For example, an office +chair with multiple adjustment features, or a suitcase that can be turned into a backpack. How could this design be +improved to offer additional or different adaptations? Alternatively, consider 3 adaptations you’d like to have on a +product or tool you use on a regular basis. ## Use diff --git a/src/documents/insights/PersonalDiscovery.md b/src/documents/insights/PersonalDiscovery.md index 3a0acaa..7edd1f6 100644 --- a/src/documents/insights/PersonalDiscovery.md +++ b/src/documents/insights/PersonalDiscovery.md @@ -6,15 +6,29 @@ eleventyNavigation: order: 7 --- -Allowing for personal discovery of needs and preferences is an important aspect of inclusive design. If an individual has never been exposed to something (e.g. changing settings on a digital device, or alternative learning or teaching methods), it is not enough to ask "what works for you?". That is, if someone is unaware of an available solution, there is no way for that individual to know that it will help them, or to know where to find it or even to be motivated to to seek it out. +Allowing for personal discovery of needs and preferences is an important aspect of inclusive design. If an individual +has never been exposed to something (e.g. changing settings on a digital device, or alternative learning or teaching +methods), it is not enough to ask "what works for you?". That is, if someone is unaware of an available solution, there +is no way for that individual to know that it will help them, or to know where to find it or even to be motivated to to +seek it out. -Designing for playful and engaging discovery in a low-risk environment creates a space for a user to learn about their own needs and preferences. In contrast, prescribing ways of interacting or learning based on medical diagnoses or other rigid categorizations or assumptions limits a user’s choices and makes no space for the unexpected or for variations and nuances. +Designing for playful and engaging discovery in a low-risk environment creates a space for a user to learn about their +own needs and preferences. In contrast, prescribing ways of interacting or learning based on medical diagnoses or other +rigid categorizations or assumptions limits a user’s choices and makes no space for the unexpected or for variations and +nuances. -Wherever possible adaptability and flexibility should be designed into products and services. This puts more power into the hands of any one of us to create our own experience, and to modify this experience over time and/or in new contexts. Allowing for the sharing of information among users is another way to empower users; in this way an individual can depend on a growing community of people with similar interests and needs. +Wherever possible adaptability and flexibility should be designed into products and services. This puts more power into +the hands of any one of us to create our own experience, and to modify this experience over time and/or in new contexts. +Allowing for the sharing of information among users is another way to empower users; in this way an individual can +depend on a growing community of people with similar interests and needs. ## Try -Consider moments of increased self-awareness in your life when a preference, like and dislike, or a need became clear to you. Was it a time when you were forced to adapt to a new situation? For example, while travelling, you slept in a different bed and discovered that a different kind of pillow helped with your neck pain? Or perhaps it was a time when someone offered you a new choice that you hadn’t been exposed to before. What aspects of the situation, environment, or the thing itself helped you to feel comfortable to try something new? +Consider moments of increased self-awareness in your life when a preference, like and dislike, or a need became clear to +you. Was it a time when you were forced to adapt to a new situation? For example, while travelling, you slept in a +different bed and discovered that a different kind of pillow helped with your neck pain? Or perhaps it was a time when +someone offered you a new choice that you hadn’t been exposed to before. What aspects of the situation, environment, or +the thing itself helped you to feel comfortable to try something new? ## Use diff --git a/src/documents/insights/UserContinuedDesign.md b/src/documents/insights/UserContinuedDesign.md index ba21296..0af7945 100644 --- a/src/documents/insights/UserContinuedDesign.md +++ b/src/documents/insights/UserContinuedDesign.md @@ -6,9 +6,17 @@ eleventyNavigation: order: 8 --- -Inclusive design aims to extend the design process into the designed artifact itself, giving users the ability to continue the design process after the product has “shipped”, in order to adapt the design to better meet their needs. For users, design can become a process of undoing, extending, or changing the design to better match their context, needs and preferences. In this way, inclusive design sustains the design process by encouraging user stewardship through actively supporting its own unexpected, creative, and ongoing redesign by users. +Inclusive design aims to extend the design process into the designed artifact itself, giving users the ability to +continue the design process after the product has “shipped”, in order to adapt the design to better meet their needs. +For users, design can become a process of undoing, extending, or changing the design to better match their context, +needs and preferences. In this way, inclusive design sustains the design process by encouraging user stewardship through +actively supporting its own unexpected, creative, and ongoing redesign by users. -Imagine that a learner has the ability to adapt the appearance of a digital learning resource to be easier to see, and share this adapted version with others. This means that learners are provided with the means to construct, derive and share their own learning materials. As a result, learners become their own teachers and curriculum creators, and the ability to create content is not solely reserved for teachers and experts, hidden behind "authoring" or "administrative" modes. +Imagine that a learner has the ability to adapt the appearance of a digital learning resource to be easier to see, and +share this adapted version with others. This means that learners are provided with the means to construct, derive and +share their own learning materials. As a result, learners become their own teachers and curriculum creators, and the +ability to create content is not solely reserved for teachers and experts, hidden behind "authoring" or "administrative" +modes. ## Use diff --git a/src/documents/insights/VirtuousCycles.md b/src/documents/insights/VirtuousCycles.md index 0a36d9e..6daeae6 100644 --- a/src/documents/insights/VirtuousCycles.md +++ b/src/documents/insights/VirtuousCycles.md @@ -6,9 +6,15 @@ eleventyNavigation: order: 6 --- -Altering any factor in a complex system can cause an amplified reaction in other systems (e.g. changing the education system in one country can impact the world economy). This reaction can be negative (vicious) or positive (virtuous). The dynamics of connected and entangled global networks means that emerging technical practices have the potential to introduce powerful virtuous cycles of digital inclusion. +Altering any factor in a complex system can cause an amplified reaction in other systems (e.g. changing the education +system in one country can impact the world economy). This reaction can be negative (vicious) or positive (virtuous). The +dynamics of connected and entangled global networks means that emerging technical practices have the potential to +introduce powerful virtuous cycles of digital inclusion. -Virtuous cycles of inclusion are triggered by insisting on diverse participation from the start. When diverse needs are met, individuals have greater access to participation (e.g. in a design process) and can thus communicate their diverse demands. This pushes so-called “outlier” solutions into the mainstream, making inclusively designed solutions more affordable. This in turn increases individual spending power and prosperity, further increasing access to participation. +Virtuous cycles of inclusion are triggered by insisting on diverse participation from the start. When diverse needs are +met, individuals have greater access to participation (e.g. in a design process) and can thus communicate their diverse +demands. This pushes so-called “outlier” solutions into the mainstream, making inclusively designed solutions more +affordable. This in turn increases individual spending power and prosperity, further increasing access to participation.
[![Diagram showing the virtuous cycles as a result of digital inclusion.](/assets/images/VirtuousCyclesOfDigitalInclusion.jpg)](/assets/images/VirtuousCyclesOfDigitalInclusion.jpg) @@ -23,4 +29,3 @@ Virtuous cycles of inclusion are triggered by insisting on diverse participation * {% include 'svg/icon-practices.svg' %} [Work Openly](/practices/WorkOpenly.html) * {% include 'svg/icon-practices.svg' %} [Practice Co-design](/practices/PracticeCoDesign.html) * {% include 'svg/icon-practices.svg' %} [Facilitate Inclusively](/practices/FacilitateInclusively.html) - diff --git a/src/documents/practices/Collaborate.md b/src/documents/practices/Collaborate.md index 069d8ed..da46634 100644 --- a/src/documents/practices/Collaborate.md +++ b/src/documents/practices/Collaborate.md @@ -6,18 +6,19 @@ eleventyNavigation: order: 1 --- -Working together with others toward a shared goal is an -important part of the inclusive design process. We all bring -our unique experiences, skills and talents to the table; as a -result, working collaboratively ensures more diverse +Working together with others toward a shared goal is an important part of the inclusive design process. We all bring our +unique experiences, skills and talents to the table; as a result, working collaboratively ensures more diverse perspectives and therefore a more inclusive design process. -By working with others rather than in isolation we learn -from one another; we share the responsibility for an -outcome, and in doing so we learn to trust one another and -rely on each other’s expertise. +By working with others rather than in isolation we learn from one another; we share the responsibility for an outcome, +and in doing so we learn to trust one another and rely on each other’s expertise. -Learning to work collaboratively requires an adjustment in our approach. Gathering and incorporating ideas from a diverse group often takes more time and patience. Questions of ownership or credit sometimes arise. However, working collaboratively can give birth to new strategies of credit and ownership. For example, collaboration requires designing in the open, which can result in greater individual recognition by keeping a history of contributions to the work. The challenges of working collaboratively are far outweighed by the benefits, as the rich and diverse perspectives gained ultimately enhance the work. +Learning to work collaboratively requires an adjustment in our approach. Gathering and incorporating ideas from a +diverse group often takes more time and patience. Questions of ownership or credit sometimes arise. However, working +collaboratively can give birth to new strategies of credit and ownership. For example, collaboration requires designing +in the open, which can result in greater individual recognition by keeping a history of contributions to the work. The +challenges of working collaboratively are far outweighed by the benefits, as the rich and diverse perspectives gained +ultimately enhance the work. ## Try diff --git a/src/documents/practices/CommunicateMultimodally.md b/src/documents/practices/CommunicateMultimodally.md index db1795e..634dfde 100644 --- a/src/documents/practices/CommunicateMultimodally.md +++ b/src/documents/practices/CommunicateMultimodally.md @@ -6,16 +6,27 @@ eleventyNavigation: order: 6 --- -When sharing design artifacts, giving a presentation, holding a meeting, bringing someone new into a design community or sharing information with that community, it is important to use multiple modes of communication to make it possible for more people to have access to the knowledge and activities of the group. For example, when preparing a slide presentation, consider the accompanying text description of your content so that members of your audience who cannot see the visuals also have a fully nuanced and engaging experience. When holding a meeting, ensure that the space is physically accessible but also how you might include remote participants. When posting shared design artifacts, consider both the accessibility of the artifacts themselves, as well as the forum you are using to display and share them. - -Engaging in multi-modal communication can go beyond the specific or technical aspects of accessibility. For example, considering different learning styles and using a range of communication methods, and ensuring someone has all the information they need in order to fully participate in a process means that the design process can be more inclusive of participants with a diverse range of needs, interests, personalities and ideas. +When sharing design artifacts, giving a presentation, holding a meeting, bringing someone new into a design community or +sharing information with that community, it is important to use multiple modes of communication to make it possible for +more people to have access to the knowledge and activities of the group. For example, when preparing a slide +presentation, consider the accompanying text description of your content so that members of your audience who cannot see +the visuals also have a fully nuanced and engaging experience. When holding a meeting, ensure that the space is +physically accessible but also how you might include remote participants. When posting shared design artifacts, consider +both the accessibility of the artifacts themselves, as well as the forum you are using to display and share them. + +Engaging in multi-modal communication can go beyond the specific or technical aspects of accessibility. For example, +considering different learning styles and using a range of communication methods, and ensuring someone has all the +information they need in order to fully participate in a process means that the design process can be more inclusive of +participants with a diverse range of needs, interests, personalities and ideas. ## Try * When preparing a slide presentation, include accompanying text descriptions -* When holding a meeting, ensure that the space is physically accessible and consider how you might include remote participants +* When holding a meeting, ensure that the space is physically accessible and consider how you might include remote + participants * When posting shared design artifacts, ensure that both the artifacts and the forum you are using are accessible to all -* Structure content and information in a well-organised, simple and easy to grasp format so that it is more accessible to new participants +* Structure content and information in a well-organised, simple and easy to grasp format so that it is more accessible + to new participants ## Why diff --git a/src/documents/practices/DesignForAdaptabilityAndFlexibility.md b/src/documents/practices/DesignForAdaptabilityAndFlexibility.md index 4a15497..9ddf0b5 100644 --- a/src/documents/practices/DesignForAdaptabilityAndFlexibility.md +++ b/src/documents/practices/DesignForAdaptabilityAndFlexibility.md @@ -6,9 +6,17 @@ eleventyNavigation: order: 9 --- -Designing for adaptability and flexibility means creating products or services that give the user more control over their experience, whether by including design features that allow for user configurability, or by building products or services that can easily be shared, remixed or repurposed by the user (e.g. building a digital tool using modular components). In addition, designing and building extensibility into products and services means that they can be used for a longer period of time, thus reducing their cost and increasing their reach. - -Adaptable and flexible products and services sustain the design process by actively supporting their own unexpected, creative, and ongoing redesign (by users). This redesign may include adding alternatives or customizations based on specific user requests, or adaptations made based on personal needs (that in turn meet the needs of others). In this way a product becomes a living system, capable of changing to meet current and future needs, thus making it more sustainable. +Designing for adaptability and flexibility means creating products or services that give the user more control over +their experience, whether by including design features that allow for user configurability, or by building products or +services that can easily be shared, remixed or repurposed by the user (e.g. building a digital tool using modular +components). In addition, designing and building extensibility into products and services means that they can be used +for a longer period of time, thus reducing their cost and increasing their reach. + +Adaptable and flexible products and services sustain the design process by actively supporting their own unexpected, +creative, and ongoing redesign (by users). This redesign may include adding alternatives or customizations based on +specific user requests, or adaptations made based on personal needs (that in turn meet the needs of others). In this way +a product becomes a living system, capable of changing to meet current and future needs, thus making it more +sustainable. ## Try diff --git a/src/documents/practices/DesignForPrivacy.md b/src/documents/practices/DesignForPrivacy.md index f1c0356..5504371 100644 --- a/src/documents/practices/DesignForPrivacy.md +++ b/src/documents/practices/DesignForPrivacy.md @@ -6,11 +6,21 @@ eleventyNavigation: order: 11 --- -More and more people rely on technology and “smart” services to provide convenience and accessibility in their everyday lives. For example, devices that allow voice commands to control lighting or other appliances in the home can significantly improve the accessibility of an interior space. - -The use of these services, however, comes with the cost and associated risk of sharing personal information online. Those who can benefit most from these smart services, including persons with disabilities, persons who are aging and others who face discrimination, stereotyping, or exclusion, are often the most vulnerable to the misuse of private information (for example through the denial of medical insurance, jobs and services, or fraud). - -Putting control of online personal privacy into the hands of the user is an important aspect of inclusive design. By designing services that provide more transparency and individual control over how our personal information is being used, we can help to educate people about digital privacy, foster a sense of entitlement to that privacy, and facilitate more informed choices. Users must be able to personalize their online experience to match not only the task at hand, but also to match their acceptable level of risk. Ultimately, the burden should not be on the user to have to choose between usability and privacy. +More and more people rely on technology and “smart” services to provide convenience and accessibility in their everyday +lives. For example, devices that allow voice commands to control lighting or other appliances in the home can +significantly improve the accessibility of an interior space. + +The use of these services, however, comes with the cost and associated risk of sharing personal information online. +Those who can benefit most from these smart services, including persons with disabilities, persons who are aging and +others who face discrimination, stereotyping, or exclusion, are often the most vulnerable to the misuse of private +information (for example through the denial of medical insurance, jobs and services, or fraud). + +Putting control of online personal privacy into the hands of the user is an important aspect of inclusive design. By +designing services that provide more transparency and individual control over how our personal information is being +used, we can help to educate people about digital privacy, foster a sense of entitlement to that privacy, and facilitate +more informed choices. Users must be able to personalize their online experience to match not only the task at hand, but +also to match their acceptable level of risk. Ultimately, the burden should not be on the user to have to choose between +usability and privacy. ## Try diff --git a/src/documents/practices/DesignForUncertainty.md b/src/documents/practices/DesignForUncertainty.md index b4acbab..4f27600 100644 --- a/src/documents/practices/DesignForUncertainty.md +++ b/src/documents/practices/DesignForUncertainty.md @@ -6,16 +6,23 @@ eleventyNavigation: order: 10 --- -It is impossible to predict the infinite number of creative, serendipitous, and unexpected uses of a product or service. Embracing and encouraging this unpredictability is an important part of the inclusive design process. Although it relies on serendipity and other unknowable factors, unexpected uses can be encouraged by giving the user ways to extend, remix, share, repurpose, and in other ways personalise the “final product”. +It is impossible to predict the infinite number of creative, serendipitous, and unexpected uses of a product or service. +Embracing and encouraging this unpredictability is an important part of the inclusive design process. Although it relies +on serendipity and other unknowable factors, unexpected uses can be encouraged by giving the user ways to extend, remix, +share, repurpose, and in other ways personalise the “final product”. -Staying open to new ideas in the design process for as long as possible, getting designs into users’ hands early and often, and making it easy and attractive for the design team to respond to change are some of the ways that uncertainty can be embraced. +Staying open to new ideas in the design process for as long as possible, getting designs into users’ hands early and +often, and making it easy and attractive for the design team to respond to change are some of the ways that uncertainty +can be embraced. ## Try * Brainstorm scenarios of use that are as different from the “basic” scenario as possible * Solicit ideas and feedback from a broad community of potential users early in the design cycle -* Encourage and allow for open and iterative communication between designers and developers throughout the development cycle -* Avoid “locking” the design for as long as possible by encouraging the creation and use of rough mockups, paper prototypes, and/or easy-to-use digital prototyping tools +* Encourage and allow for open and iterative communication between designers and developers throughout the development + cycle +* Avoid “locking” the design for as long as possible by encouraging the creation and use of rough mockups, paper + prototypes, and/or easy-to-use digital prototyping tools ## Why diff --git a/src/documents/practices/FacilitateInclusively.md b/src/documents/practices/FacilitateInclusively.md index 813442f..733867f 100644 --- a/src/documents/practices/FacilitateInclusively.md +++ b/src/documents/practices/FacilitateInclusively.md @@ -6,13 +6,23 @@ eleventyNavigation: order: 8 --- -When organising or leading a meeting or discussion, encouraging equal participation among members is important to ensure that everyone’s voice is heard. Using or creating a space that is accessible to all is the first step; facilitating participation from everyone present (whether remotely or locally) is the ultimate goal. - -As a starting point, using accessible communication tools (e.g. accessible presentations or accessible sketching and note-taking tools) during a meeting or discussion allows for greater participation of all members. Staying open to ideas that are offered (a “yes, and” approach*) provides positive reinforcement and encouragement, and can yield unexpected results, while remaining flexible and ready to change direction allows for new ideas to emerge. - -Thinking beyond technical limitations and avoiding getting bogged down in technical details too quickly, while using plain language wherever possible to communicate ideas means that the discussion can stay open for longer and more people will be able to participate, resulting in a richer and more productive session. - -*"Yes, and..." is a rule-of-thumb response in improvisational comedy that suggests a participant should accept what another participant has stated ("yes") and then expand on that line of thinking ("and").The "Yes" portion of the rule encourages the acceptance of the contributions added by others. By saying yes, we accept the reality created by our partners and begin the collaborative process. () +When organising or leading a meeting or discussion, encouraging equal participation among members is important to ensure +that everyone’s voice is heard. Using or creating a space that is accessible to all is the first step; facilitating +participation from everyone present (whether remotely or locally) is the ultimate goal. + +As a starting point, using accessible communication tools (e.g. accessible presentations or accessible sketching and +note-taking tools) during a meeting or discussion allows for greater participation of all members. Staying open to ideas +that are offered (a “yes, and” approach*) provides positive reinforcement and encouragement, and can yield unexpected +results, while remaining flexible and ready to change direction allows for new ideas to emerge. + +Thinking beyond technical limitations and avoiding getting bogged down in technical details too quickly, while using +plain language wherever possible to communicate ideas means that the discussion can stay open for longer and more people +will be able to participate, resulting in a richer and more productive session. + +*"Yes, and..." is a rule-of-thumb response in improvisational comedy that suggests a participant should accept what +another participant has stated ("yes") and then expand on that line of thinking ("and").The "Yes" portion of the rule +encourages the acceptance of the contributions added by others. By saying yes, we accept the reality created by our +partners and begin the collaborative process. () ## Try diff --git a/src/documents/practices/FocusOnFunctionalNeedsAndPreferences.md b/src/documents/practices/FocusOnFunctionalNeedsAndPreferences.md index 6e63242..d06b61b 100644 --- a/src/documents/practices/FocusOnFunctionalNeedsAndPreferences.md +++ b/src/documents/practices/FocusOnFunctionalNeedsAndPreferences.md @@ -6,13 +6,22 @@ eleventyNavigation: order: 5 --- -When designing for users “at the margins”, including those with disabilities, the focus can often be put on the limitations of an individual or group of users, rather than on their functional needs related to completing a task or reaching a goal. Keeping the design focus on meeting a user’s needs puts the responsibility squarely on the features of the product or service to meet those needs - that is, if the users’ needs are not met, it is a failing of the design, rather than of the user (a mismatch). Also, by focusing on needs and preferences, our perspective is broadened to include others who may benefit from the same design features. - -Individual needs and preferences are complex and defined by much more than a medical diagnosis or other singular label. When engaging in co-design, or when developing personas and use-cases, taking into account a user’s full range of interests, daily experiences and contexts will help to ensure that the unique and complex needs and preferences of a broad range of users are included. +When designing for users “at the margins”, including those with disabilities, the focus can often be put on the +limitations of an individual or group of users, rather than on their functional needs related to completing a task or +reaching a goal. Keeping the design focus on meeting a user’s needs puts the responsibility squarely on the features of +the product or service to meet those needs - that is, if the users’ needs are not met, it is a failing of the design, +rather than of the user (a mismatch). Also, by focusing on needs and preferences, our perspective is broadened to +include others who may benefit from the same design features. + +Individual needs and preferences are complex and defined by much more than a medical diagnosis or other singular label. +When engaging in co-design, or when developing personas and use-cases, taking into account a user’s full range of +interests, daily experiences and contexts will help to ensure that the unique and complex needs and preferences of a +broad range of users are included. ## Try -* When co-designing, conducting interviews or writing personas focus on an individual’s interests, goals and needs, rather than on their limitations +* When co-designing, conducting interviews or writing personas focus on an individual’s interests, goals and needs, + rather than on their limitations * Write personas and use-cases based on real people and real situations ## Why diff --git a/src/documents/practices/IntegrateAccessibilityFromTheStart.md b/src/documents/practices/IntegrateAccessibilityFromTheStart.md index eb4f7c5..c726682 100644 --- a/src/documents/practices/IntegrateAccessibilityFromTheStart.md +++ b/src/documents/practices/IntegrateAccessibilityFromTheStart.md @@ -6,11 +6,21 @@ eleventyNavigation: order: 3 --- -By considering accessibility and inclusion from the start of a project, it is much easier to integrate accessibility features into the design of the final product or service. Multiple modes of interaction and access are best considered from the beginning of the process. - -When designing a building, multiple modes of physical access (stairs, ramp, door widths, etc) must be considered in the early planning stages. The same approach should be taken in other fields. For example, when designing a website, the visual impact of the interface often takes priority; the experience of a screen-reader user, a keyboard-only user, and someone who may not use a keyboard or mouse at all should also be considered from the start. In addition, visual preferences like high and low contrast need to be taken into account early on in order to successfully integrate these alternatives into the visual aesthetic. By integrating accessibility into the design, the segregation of “special” solutions as well as expensive future retro-fitting can be avoided. - -As designers, developers and others active in the design process, it is important to become aware of our limited personal perspective (e.g. prioritizing the visual impact of an interface), as this helps us to understand and overcome our biases, which in turn keeps us open to new ideas and innovative solutions. +By considering accessibility and inclusion from the start of a project, it is much easier to integrate accessibility +features into the design of the final product or service. Multiple modes of interaction and access are best considered +from the beginning of the process. + +When designing a building, multiple modes of physical access (stairs, ramp, door widths, etc) must be considered in the +early planning stages. The same approach should be taken in other fields. For example, when designing a website, the +visual impact of the interface often takes priority; the experience of a screen-reader user, a keyboard-only user, and +someone who may not use a keyboard or mouse at all should also be considered from the start. In addition, visual +preferences like high and low contrast need to be taken into account early on in order to successfully integrate these +alternatives into the visual aesthetic. By integrating accessibility into the design, the segregation of “special” +solutions as well as expensive future retro-fitting can be avoided. + +As designers, developers and others active in the design process, it is important to become aware of our limited +personal perspective (e.g. prioritizing the visual impact of an interface), as this helps us to understand and overcome +our biases, which in turn keeps us open to new ideas and innovative solutions. ## Try diff --git a/src/documents/practices/PracticeCoDesign.md b/src/documents/practices/PracticeCoDesign.md index 3797d8a..20e51c0 100644 --- a/src/documents/practices/PracticeCoDesign.md +++ b/src/documents/practices/PracticeCoDesign.md @@ -6,9 +6,17 @@ eleventyNavigation: order: 2 --- -The practice of co-design allows users to become active participants in the design process by facilitating their direct input into the creation of solutions that meet their needs, rather than limiting users to the role of research subjects or consultants. When a diverse group of users can participate in the design process, a broader range of needs can be considered throughout the process, from conception to completion. The entire team can participate in quick testing and feedback cycles, and design decisions can be made more quickly. - -When users whose needs are typically considered to be “at the margins” are able to participate in the design process, the features that meet their needs can be more smoothly integrated into the final design. In this way, both the segregation of “special” solutions as well as expensive future retro-fitting can be minimized. Practicing co-design brings a more flexible and wider perspective to the design process, while incorporating insights from communities whose members are directly impacted by the design. +The practice of co-design allows users to become active participants in the design process by facilitating their direct +input into the creation of solutions that meet their needs, rather than limiting users to the role of research subjects +or consultants. When a diverse group of users can participate in the design process, a broader range of needs can be +considered throughout the process, from conception to completion. The entire team can participate in quick testing and +feedback cycles, and design decisions can be made more quickly. + +When users whose needs are typically considered to be “at the margins” are able to participate in the design process, +the features that meet their needs can be more smoothly integrated into the final design. In this way, both the +segregation of “special” solutions as well as expensive future retro-fitting can be minimized. Practicing co-design +brings a more flexible and wider perspective to the design process, while incorporating insights from communities whose +members are directly impacted by the design. ## Try diff --git a/src/documents/practices/TestFrequently.md b/src/documents/practices/TestFrequently.md index dedc2c9..32e238f 100644 --- a/src/documents/practices/TestFrequently.md +++ b/src/documents/practices/TestFrequently.md @@ -6,18 +6,26 @@ eleventyNavigation: order: 7 --- -The earlier and more often user feedback can be solicited in the design process, the better. When usability testing is delayed, it becomes more difficult and costly to change the design. Waiting to have a fully functional prototype is not necessary; User Experience (UX) walkthroughs and usability testing can be done with rough prototypes or sketches. +The earlier and more often user feedback can be solicited in the design process, the better. When usability testing is +delayed, it becomes more difficult and costly to change the design. Waiting to have a fully functional prototype is not +necessary; User Experience (UX) walkthroughs and usability testing can be done with rough prototypes or sketches. -When engaged in a co-design process, the entire team, including users and other stakeholders, can participate in quick testing and feedback cycles. In each of these cycles a number of ideas can be tested by team members themselves. Feedback is used to enhance those ideas or come up with new ones; these ideas can then be run through another cycle of testing, feedback and discussion. +When engaged in a co-design process, the entire team, including users and other stakeholders, can participate in quick +testing and feedback cycles. In each of these cycles a number of ideas can be tested by team members themselves. +Feedback is used to enhance those ideas or come up with new ones; these ideas can then be run through another cycle of +testing, feedback and discussion. -Early and frequent usability testing is a critical component of an inclusive and efficient design process that helps to achieve a successful design solution, and safeguards against costly after-the-fact changes. +Early and frequent usability testing is a critical component of an inclusive and efficient design process that helps to +achieve a successful design solution, and safeguards against costly after-the-fact changes. ## Try * Get feedback early in the design cycle using rough sketches or paper prototypes * Get feedback on a regular basis throughout the design cycle * Stay open to design changes for as long as possible -* If you don't have access to the end users or you don't have the budget to involve them in the process, look for people who can represent your user group within your company or within your personal or professional network; run quick in-house usability tests to solicit feedback. +* If you don't have access to the end users or you don't have the budget to involve them in the process, look for people + who can represent your user group within your company or within your personal or professional network; run quick + in-house usability tests to solicit feedback. ## Why diff --git a/src/documents/practices/WorkOpenly.md b/src/documents/practices/WorkOpenly.md index 9470659..c6e806f 100644 --- a/src/documents/practices/WorkOpenly.md +++ b/src/documents/practices/WorkOpenly.md @@ -6,33 +6,29 @@ eleventyNavigation: order: 4 --- -Working transparently makes diverse participation possible, -as those who wish to get involved and who have access to -the content can learn and contribute. Transparency is an -important aspect of inclusive design; it is an invitation to -participate, and it allows for collaboration from a diverse -group of people. Openness does not guarantee accessibility +Working transparently makes diverse participation possible, as those who wish to get involved and who have access to the +content can learn and contribute. Transparency is an important aspect of inclusive design; it is an invitation to +participate, and it allows for collaboration from a diverse group of people. Openness does not guarantee accessibility however; content and tools themselves must be accessible. -By working transparently, we provide greater access to our -collective knowledge, and input and feedback is more likely -to come from unexpected sources. This allows us to learn -from and incorporate diverse perspectives, such that our -solutions meet more diverse needs. Collaborating with people from different areas of study or work, from different cultures and/or with different life experiences broadens everyone’s perspective and encourages empathy and an openness to new ideas. +By working transparently, we provide greater access to our collective knowledge, and input and feedback is more likely +to come from unexpected sources. This allows us to learn from and incorporate diverse perspectives, such that our +solutions meet more diverse needs. Collaborating with people from different areas of study or work, from different +cultures and/or with different life experiences broadens everyone’s perspective and encourages empathy and an openness +to new ideas. -Learning to work transparently requires an adjustment in -the way that we approach our work. Sharing design ideas, -sketches or unpolished mockups before they are complete -can be scary at first. Learning to trust a community takes -time and practice, but as more of us learn to work in this -way, the more we can invite others into the process, -resulting in a virtuous cycle of inclusion. +Learning to work transparently requires an adjustment in the way that we approach our work. Sharing design ideas, +sketches or unpolished mockups before they are complete can be scary at first. Learning to trust a community takes time +and practice, but as more of us learn to work in this way, the more we can invite others into the process, resulting in +a virtuous cycle of inclusion. ## Try * Present work to larger groups on a regular basis to solicit contributions and feedback -* Use accessible and open communication tools - these can provide the means to both alert potential participants to a group discussion or activity, as well as provide a means of distributing collaborative artifacts -* Post meeting minutes, design artifacts, and other information in an accessible and open location, and alert the community to new postings +* Use accessible and open communication tools - these can provide the means to both alert potential participants to a + group discussion or activity, as well as provide a means of distributing collaborative artifacts +* Post meeting minutes, design artifacts, and other information in an accessible and open location, and alert the + community to new postings ## Why diff --git a/src/documents/tools/AccessibleCommunicationTools.md b/src/documents/tools/AccessibleCommunicationTools.md index ce565db..37fc0bc 100644 --- a/src/documents/tools/AccessibleCommunicationTools.md +++ b/src/documents/tools/AccessibleCommunicationTools.md @@ -6,11 +6,20 @@ eleventyNavigation: order: 5 --- -In an inclusive design process, team members share ideas throughout the design/development process and at different stages of completion in order to solicit feedback from peers and stakeholders on an ongoing basis. This approach contrasts with that of many organizations that follow a waterfall approach, where pre-defined steps in the design and development process are followed in a strict order, requiring the completion of one step before moving to the next. With a waterfall approach members of different teams usually communicate only during the transition periods, when passing specific artifacts on from one step to another (e.g. handing off completed design mockups to developers). +In an inclusive design process, team members share ideas throughout the design/development process and at different +stages of completion in order to solicit feedback from peers and stakeholders on an ongoing basis. This approach +contrasts with that of many organizations that follow a waterfall approach, where pre-defined steps in the design and +development process are followed in a strict order, requiring the completion of one step before moving to the next. With +a waterfall approach members of different teams usually communicate only during the transition periods, when passing +specific artifacts on from one step to another (e.g. handing off completed design mockups to developers). -An inclusive process encourages the exchange of ideas openly and fluidly, which not only improves the final outcome, but helps the entire team to be aware of the decisions that are being made along the way, thus minimizing last-minute surprises. To maximize participation, the communication tools themselves should be available to all and accessible to individuals with a wide range of needs. +An inclusive process encourages the exchange of ideas openly and fluidly, which not only improves the final outcome, but +helps the entire team to be aware of the decisions that are being made along the way, thus minimizing last-minute +surprises. To maximize participation, the communication tools themselves should be available to all and accessible to +individuals with a wide range of needs. -Accessible communication tools can help to build open communication channels and allow the sharing of ideas at any stage of completion within a team as well as within a larger community. +Accessible communication tools can help to build open communication channels and allow the sharing of ideas at any stage +of completion within a team as well as within a larger community. ## Try diff --git a/src/documents/tools/AccessibleDesignTools.md b/src/documents/tools/AccessibleDesignTools.md index 6f16a95..db76555 100644 --- a/src/documents/tools/AccessibleDesignTools.md +++ b/src/documents/tools/AccessibleDesignTools.md @@ -8,16 +8,23 @@ eleventyNavigation: Accessible design tools can be grouped into two different categories: -The first category includes design tools used most commonly during the early ideation and iteration phases of the design process. These tools enable team members to participate in the process of brainstorming, sketching, and ideation. There are a limited number of tools available that are open source and/or relatively easy to learn and use, such as: +The first category includes design tools used most commonly during the early ideation and iteration phases of the design +process. These tools enable team members to participate in the process of brainstorming, sketching, and ideation. There +are a limited number of tools available that are open source and/or relatively easy to learn and use, such as: -The second category of design tools are used to execute a design idea. Few of the most common design tools in use today have accessibility features (for example, the ability to attach descriptive text narratives to images, to enlarge the controls, or to navigate and execute designs using a screen reader). +The second category of design tools are used to execute a design idea. Few of the most common design tools in use today +have accessibility features (for example, the ability to attach descriptive text narratives to images, to enlarge the +controls, or to navigate and execute designs using a screen reader). ## Try -There are a limited number of design tools available in the first category that are free, open source and/or relatively easy to learn, such as: +There are a limited number of design tools available in the first category that are free, open source and/or relatively +easy to learn, such as: -* [Google Draw](https://support.google.com/docs/answer/6058689?hl=en) - open source, can activate Accessibility options and use with a screenreader -* Omnigraffle - not open source or particularly accessible, but easier to learn and use than Adobe Creative Suite or other sketching tools +* [Google Draw](https://support.google.com/docs/answer/6058689?hl=en) - open source, can activate Accessibility options + and use with a screenreader +* Omnigraffle - not open source or particularly accessible, but easier to learn and use than Adobe Creative Suite or + other sketching tools * Google Sketchup - Free but not very accessible There are several tools that enable designers to check the accessibility of their final design, such as: diff --git a/src/documents/tools/AccessibleDevelopmentTools.md b/src/documents/tools/AccessibleDevelopmentTools.md index f4f1228..72c38d1 100644 --- a/src/documents/tools/AccessibleDevelopmentTools.md +++ b/src/documents/tools/AccessibleDevelopmentTools.md @@ -10,10 +10,17 @@ Accessible development tools can be grouped into two different categories: The first category consists of tools that enable developers to share their projects, solicit peer feedback, and collaborate. -* One of the tools that provides an open platform for sharing projects and source code is Github. The Github web browser-based interface is compatible with screen readers and can be navigated by different means including keyboard, mouse and switches. +* One of the tools that provides an open platform for sharing projects and source code is Github. The Github web + browser-based interface is compatible with screen readers and can be navigated by different means including keyboard, + mouse and switches. -Development tools in the second category provide accessible environments for writing code. Most current code editors are highly customizable and developers can adjust the font type, size, text color, background color and brightness, etc. based on their preferences. There are few other accessible development tools that are made for developers with specific needs and preferences. +Development tools in the second category provide accessible environments for writing code. Most current code editors are +highly customizable and developers can adjust the font type, size, text color, background color and brightness, etc. +based on their preferences. There are few other accessible development tools that are made for developers with specific +needs and preferences. -* One example is emacspeak, which is a “free” computer application, a speech interface and an audio desktop environment built for developers who rely on screen readers. +* One example is emacspeak, which is a “free” computer application, a speech interface and an audio desktop environment + built for developers who rely on screen readers. -Using a combination of these two categories can enable developers with a wider range of personal needs and preferences to contribute to the development process, collaborate, and share their projects with others. +Using a combination of these two categories can enable developers with a wider range of personal needs and preferences +to contribute to the development process, collaborate, and share their projects with others. diff --git a/src/documents/tools/Infusion.md b/src/documents/tools/Infusion.md index c5c7bd3..6efc6f2 100644 --- a/src/documents/tools/Infusion.md +++ b/src/documents/tools/Infusion.md @@ -6,8 +6,19 @@ eleventyNavigation: order: 14 --- -Infusion is a code framework for building personalizable and adaptive applications using JavaScript and other web technologies. It also includes a growing collection of user interface components, built on top of jQuery, that help make it easier to build user interfaces by mixing and matching accessible components and then customizing them to suit your unique context. Infusion’s components are designed flexibly so that all their default features, styling and parts can be easily changed, replaced and added to. +Infusion is a code framework for building personalizable and adaptive applications using JavaScript and other web +technologies. It also includes a growing collection of user interface components, built on top of jQuery, that help make +it easier to build user interfaces by mixing and matching accessible components and then customizing them to suit your +unique context. Infusion’s components are designed flexibly so that all their default features, styling and parts can be +easily changed, replaced and added to. -Infusion provides individuals with a way to actively engage in the creative process by adapting or redesigning an application to suit their personal needs and preferences. Components such as User Interface Options () offer customization features that support the discovery of personal preferences, allowing for one-size-fits-one customizations and storage of portable preferences. +Infusion provides individuals with a way to actively engage in the creative process by adapting or redesigning an +application to suit their personal needs and preferences. Components such as User Interface Options +() offer customization features that support the discovery of +personal preferences, allowing for one-size-fits-one customizations and storage of portable preferences. -The Infusion framework gives developers a way to build open, modular systems that can be changed and configured during use, so that anyone can modify and adapt it to create systems, applications, components, etc. that meet their specific use cases and needs. The Infusion framework reflects an accumulation of experience about how to make applications accessible, and is as much about community values, shared inclusive practices, and documentation as it is about code and components. +The Infusion framework gives developers a way to build open, modular systems that can be changed and configured during +use, so that anyone can modify and adapt it to create systems, applications, components, etc. that meet their specific +use cases and needs. The Infusion framework reflects an accumulation of experience about how to make applications +accessible, and is as much about community values, shared inclusive practices, and documentation as it is about code and +components. diff --git a/src/documents/tools/MetadataAuthoring.md b/src/documents/tools/MetadataAuthoring.md index d92d5ef..ef2f2aa 100644 --- a/src/documents/tools/MetadataAuthoring.md +++ b/src/documents/tools/MetadataAuthoring.md @@ -5,11 +5,20 @@ eleventyNavigation: key: Metadata Authoring order: 15 --- -Content authors can use metadata to provide information about what needs a learning resource can accommodate. Metadata can be used to describe, among other things: what the technical/environmental requirements are for a given resource (e.g. is a mouse required to interact with the resource?); what sensory modalities are required to perceive the content of the resource (e.g. does the learner need to be able to hear the content?); what learning style the resource accommodates (e.g. is this a highly visual learning resource?). +Content authors can use metadata to provide information about what needs a learning resource can accommodate. Metadata +can be used to describe, among other things: what the technical/environmental requirements are for a given resource +(e.g. is a mouse required to interact with the resource?); what sensory modalities are required to perceive the content +of the resource (e.g. does the learner need to be able to hear the content?); what learning style the resource +accommodates (e.g. is this a highly visual learning resource?). -Describing Open Education Resources (OERs) and other resources with metadata allows a delivery system to automatically personalize the content and its delivery to meet the unique needs of each learner. Metadata can be recorded in a metadata record separate from the resource itself. +Describing Open Education Resources (OERs) and other resources with metadata allows a delivery system to automatically +personalize the content and its delivery to meet the unique needs of each learner. Metadata can be recorded in a +metadata record separate from the resource itself. -Authoring metadata promotes cumulative accessibility of resources as third parties create and associate alternatives to original resources. Together, the many resources in a system contain the features or educational materials that every student needs, but no single resource must be 100% accessible to every kind of learner. By creating metadata about each resource, it is easier to determine which resources might need to be adapted to meet an individual's needs. +Authoring metadata promotes cumulative accessibility of resources as third parties create and associate alternatives to +original resources. Together, the many resources in a system contain the features or educational materials that every +student needs, but no single resource must be 100% accessible to every kind of learner. By creating metadata about each +resource, it is easier to determine which resources might need to be adapted to meet an individual's needs. For more information about metadata authoring please see diff --git a/src/documents/tools/Mindmaps.md b/src/documents/tools/Mindmaps.md index 912fb47..7da8ff4 100644 --- a/src/documents/tools/Mindmaps.md +++ b/src/documents/tools/Mindmaps.md @@ -6,17 +6,28 @@ eleventyNavigation: order: 9 --- -Mindmaps are visual diagrams used for organizing often complex information related to a specific topic or concept. They help designers, developers or others on the project to think through and reveal the interconnections between different pieces of information. Creating a mindmap can be useful in the early stages of a project to move from a loose narrative or vague concept into a more concrete picture of a system or workflow, prior to making more detailed design decisions about specific functions or interface layout etc. +Mindmaps are visual diagrams used for organizing often complex information related to a specific topic or concept. They +help designers, developers or others on the project to think through and reveal the interconnections between different +pieces of information. Creating a mindmap can be useful in the early stages of a project to move from a loose narrative +or vague concept into a more concrete picture of a system or workflow, prior to making more detailed design decisions +about specific functions or interface layout etc. -Creating a mindmap is one way to dig deeper into the more complex layers of how a product or system might work. It can be used to explore different options, and/or to present a bigger picture of a complex system. In this way it enables designers or developers to better contextualize a specific topic, concept or system. +Creating a mindmap is one way to dig deeper into the more complex layers of how a product or system might work. It can +be used to explore different options, and/or to present a bigger picture of a complex system. In this way it enables +designers or developers to better contextualize a specific topic, concept or system. -Examples of mindmapping can be found at the following link: +Examples of mindmapping can be found at the following link: + -Note: Although mindmaps are traditionally visual tools, they can be created and presented in ways that are accessible to non-visual users. For example, they can be created using digital tools that are compatible with screen readers, such as Google Draw. Or they can be presented to an audience with an accompanying text description that includes a step-by-step description of the flow of information. +Note: Although mindmaps are traditionally visual tools, they can be created and presented in ways that are accessible to +non-visual users. For example, they can be created using digital tools that are compatible with screen readers, such as +Google Draw. Or they can be presented to an audience with an accompanying text description that includes a step-by-step +description of the flow of information. ## Try 1. Start with the central concept or initial state. 2. List all the related sub-topics 3. Repeat this process for lower levels of topics and continue as needed -4. Begin to map out the connections between the items you have listed. These connections may cross over multiple levels of the hierarchy. +4. Begin to map out the connections between the items you have listed. These connections may cross over multiple levels + of the hierarchy. diff --git a/src/documents/tools/MultimodalTesting.md b/src/documents/tools/MultimodalTesting.md index b7dd751..cef2231 100644 --- a/src/documents/tools/MultimodalTesting.md +++ b/src/documents/tools/MultimodalTesting.md @@ -6,15 +6,25 @@ eleventyNavigation: order: 12 --- -When designing and developing a product or service, consider all the different ways that a user might interact with it. For example, in the case of a digital interface, ensure that you integrate features into your product to make it compatible with screen readers, keyboard only users, and single switches. When you are ready, you can test your design in a number of different ways. It is best to run usability tests with participants who have a broad range of needs and experiences. +When designing and developing a product or service, consider all the different ways that a user might interact with it. +For example, in the case of a digital interface, ensure that you integrate features into your product to make it +compatible with screen readers, keyboard only users, and single switches. When you are ready, you can test your design +in a number of different ways. It is best to run usability tests with participants who have a broad range of needs and +experiences. -The audio experience of a digital interface can be tested in the very early stages of design with only sketches or paper prototypes, by having someone act as a human screen reader (by reading out the audio as a screen reader would). Once an interactive prototype is created, it can be tested with various input/output methods, including screen readers or other assistive technologies. Websites can be tested using various web accessibility checkers, however, these should be used only as an initial guide. +The audio experience of a digital interface can be tested in the very early stages of design with only sketches or paper +prototypes, by having someone act as a human screen reader (by reading out the audio as a screen reader would). Once an +interactive prototype is created, it can be tested with various input/output methods, including screen readers or other +assistive technologies. Websites can be tested using various web accessibility checkers, however, these should be used +only as an initial guide. ## Try -1. Use the native screen reader on your computer (e.g. NVDA on Windows or Voice Over on Mac - both of which are free of charge) to run initial tests on a digital interface +1. Use the native screen reader on your computer (e.g. NVDA on Windows or Voice Over on Mac - both of which are free of + charge) to run initial tests on a digital interface 2. Navigate an interface without a mouse or track pad to test for keyboard-only interaction -3. Find a user who is familiar with the specific assistive technology in question to test your designs, as their experience will provide more realistic and nuanced feedback related to their expectations of typical behaviour. +3. Find a user who is familiar with the specific assistive technology in question to test your designs, as their + experience will provide more realistic and nuanced feedback related to their expectations of typical behaviour. ## Combine with diff --git a/src/documents/tools/Personas.md b/src/documents/tools/Personas.md index ea9247b..3742eb0 100644 --- a/src/documents/tools/Personas.md +++ b/src/documents/tools/Personas.md @@ -6,17 +6,30 @@ eleventyNavigation: order: 7 --- -Personas are models representing potential stakeholders who may use a product or service. Although they are fictional people, their characteristics, needs, goals and motivations are rooted in the insights and feedback collected from various sources including formal or informal interviews/surveys or through familiarity with the needs and interests of self, co-workers, friends or family members. They begin as early, provisional sketches and often evolve through iterations as more information is gathered. +Personas are models representing potential stakeholders who may use a product or service. Although they are fictional +people, their characteristics, needs, goals and motivations are rooted in the insights and feedback collected from +various sources including formal or informal interviews/surveys or through familiarity with the needs and interests of +self, co-workers, friends or family members. They begin as early, provisional sketches and often evolve through +iterations as more information is gathered. -Personas are behavioural models; they do not represent the full demographics of any given population of complex and unique people. They enable designers, developers and evaluators across a project to keep a broad and diverse collection of stakeholders in mind. Considering the needs, interests and daily tasks of non-obvious or untraditional users helps a design team to think broadly and stay open to unpredicted uses of the systems they are creating. +Personas are behavioural models; they do not represent the full demographics of any given population of complex and +unique people. They enable designers, developers and evaluators across a project to keep a broad and diverse collection +of stakeholders in mind. Considering the needs, interests and daily tasks of non-obvious or untraditional users helps a +design team to think broadly and stay open to unpredicted uses of the systems they are creating. -When paired with the other tools, particularly User States and Contexts, UX Walkthroughs, and Use-Cases, Personas can help to paint a clearer picture of a broad and diverse range of user needs and preferences. They must be developed and used with care in order to avoid stereotyping or fictionalising the user, and they must be tempered with the awareness that no single persona or group of personas can independently determine the full range of potential uses of a product or service. +When paired with the other tools, particularly User States and Contexts, UX Walkthroughs, and Use-Cases, Personas can +help to paint a clearer picture of a broad and diverse range of user needs and preferences. They must be developed and +used with care in order to avoid stereotyping or fictionalising the user, and they must be tempered with the awareness +that no single persona or group of personas can independently determine the full range of potential uses of a product or +service. ## Try 1. Think about various users in your domain with unmet needs -2. Imagine a user, inspired by people you know, that is unique and doesn’t simply represent the norm, the average, or the typical -3. Draft the first version of your persona. Give them a name and describe their life, needs, preferences, likes and dislikes +2. Imagine a user, inspired by people you know, that is unique and doesn’t simply represent the norm, the average, or + the typical +3. Draft the first version of your persona. Give them a name and describe their life, needs, preferences, likes and + dislikes 4. Re-iterate and evolve your persona as you collect more feedback from potential users and/or stakeholders ## Combine with diff --git a/src/documents/tools/Prototyping.md b/src/documents/tools/Prototyping.md index d6c875e..d3fa175 100644 --- a/src/documents/tools/Prototyping.md +++ b/src/documents/tools/Prototyping.md @@ -6,17 +6,28 @@ eleventyNavigation: order: 11 --- -Prototyping is an effective way to quickly communicate your ideas with others, solicit feedback, and learn through making and sharing your ideas. Prototypes can be used at different stages of your design and development process. In the early stages, try rough and low fidelity prototypes to test a number of different ideas. Don’t be bogged down with details and don’t try to make them look good. The purpose of these prototypes is to test a number of different ideas to find out whether they have the potential to be taken forward or not. Paper prototypes are good examples of rough and quick prototypes. +Prototyping is an effective way to quickly communicate your ideas with others, solicit feedback, and learn through +making and sharing your ideas. Prototypes can be used at different stages of your design and development process. In the +early stages, try rough and low fidelity prototypes to test a number of different ideas. Don’t be bogged down with +details and don’t try to make them look good. The purpose of these prototypes is to test a number of different ideas to +find out whether they have the potential to be taken forward or not. Paper prototypes are good examples of rough and +quick prototypes. -In the next phase when your ideas are more refined you can spend a little more time on details and the look and feel of the prototype. These prototypes focus more on the interaction points between a user and a product, and on creating the user experience; they help to refine the details and interaction patterns. +In the next phase when your ideas are more refined you can spend a little more time on details and the look and feel of +the prototype. These prototypes focus more on the interaction points between a user and a product, and on creating the +user experience; they help to refine the details and interaction patterns. -In the final phases of the design and development process, high fidelity prototypes come in handy. Their look, feel, and function more closely reflect the final product. These prototypes are often presented in a final round of usability testing. +In the final phases of the design and development process, high fidelity prototypes come in handy. Their look, feel, and +function more closely reflect the final product. These prototypes are often presented in a final round of usability +testing. ## Try -* There are several digital tools that help designers create interactive prototypes, many of which are available online. For example, InVision is a prototyping tool that is easy to learn and use. +* There are several digital tools that help designers create interactive prototypes, many of which are available online. + For example, InVision is a prototyping tool that is easy to learn and use. * If you are designing a product, you can use 3D printing to build high fidelity prototypes. -* If you are working on a digital product, such as a website or an application, try publishing a beta version to get user feedback and fix the technical issues. +* If you are working on a digital product, such as a website or an application, try publishing a beta version to get + user feedback and fix the technical issues. * If you are designing a service or a system, try roleplaying sessions to test your proposed solution. ## Combine with diff --git a/src/documents/tools/SynchronizedDesignAssets.md b/src/documents/tools/SynchronizedDesignAssets.md index 2ac8f50..e232fc6 100644 --- a/src/documents/tools/SynchronizedDesignAssets.md +++ b/src/documents/tools/SynchronizedDesignAssets.md @@ -6,12 +6,22 @@ eleventyNavigation: order: 13 --- -When working collaboratively, designers need a platform that enables them to freely and easily share design artifacts. An ideal tool would allow versioning as well as structured commenting and discussion that is attached to the design artifacts (with associated archiving). The platforms that are currently available to developers, such as Github, are not compatible with most designers’ needs and workflows. Thus, designers have often been left to come up with alternative methods of collaborative file sharing, each with its own benefits and limitations. +When working collaboratively, designers need a platform that enables them to freely and easily share design artifacts. +An ideal tool would allow versioning as well as structured commenting and discussion that is attached to the design +artifacts (with associated archiving). The platforms that are currently available to developers, such as Github, are not +compatible with most designers’ needs and workflows. Thus, designers have often been left to come up with alternative +methods of collaborative file sharing, each with its own benefits and limitations. -The main purpose of creating synchronized design assets is to provide the community with a common location where they can access the latest version of a file rather than searching through emails or chat logs. This helps the design teams establish more stable and shared archives for their design projects, and makes it easier to bring newcomers on board. +The main purpose of creating synchronized design assets is to provide the community with a common location where they +can access the latest version of a file rather than searching through emails or chat logs. This helps the design teams +establish more stable and shared archives for their design projects, and makes it easier to bring newcomers on board. ## Try 1. Store the latest version of a file on a cloud based sharing system, such as Dropbox. -2. Provide a link to this file on a wiki page that is available to all members of your community. **Note**: The advantage of linking the file from a wiki page rather than sharing it directly via email, chat or other means is that people can leave comments and feedback about the design artifact in question, and a record of that discussion persists. In addition, it provides the community with a common location where they can access the latest version of a file. +2. Provide a link to this file on a wiki page that is available to all members of your community. **Note**: The + advantage of linking the file from a wiki page rather than sharing it directly via email, chat or other means is that + people can leave comments and feedback about the design artifact in question, and a record of that discussion + persists. In addition, it provides the community with a common location where they can access the latest version of a + file. 3. Notify your team or the larger community of your posting via email. diff --git a/src/documents/tools/UXWalkthroughs.md b/src/documents/tools/UXWalkthroughs.md index e5fb0c8..67e3b48 100644 --- a/src/documents/tools/UXWalkthroughs.md +++ b/src/documents/tools/UXWalkthroughs.md @@ -6,19 +6,30 @@ eleventyNavigation: order: 1 --- -A User Experience (UX) Walkthrough is a technique used to identify usability and accessibility issues in a website or application. It is a procedure for examining a user interface following a set protocol and making assessments based on predetermined criteria. It emphasizes paired or collaborative evaluation of user interfaces by designers and non-designers alike, and serves to bring a diversity of perspectives to bear on the design process. +A User Experience (UX) Walkthrough is a technique used to identify usability and accessibility issues in a website or +application. It is a procedure for examining a user interface following a set protocol and making assessments based on +predetermined criteria. It emphasizes paired or collaborative evaluation of user interfaces by designers and +non-designers alike, and serves to bring a diversity of perspectives to bear on the design process. -The UX Walkthrough technique is a synthesis of conventional methods (heuristic evaluation, cognitive walkthrough and code review) that enables the reviewer to make assessments both from the user's point of view and that of the designer. The multifaceted nature of the UX Walkthrough enables the reviewer to make assessments across several dimensions, including: general design quality, task-oriented usability, assistive technology usability, accessibility standards compliance, and code quality. A UX Walkthrough produces a result that reveals usability and accessibility issues effectively and efficiently. +The UX Walkthrough technique is a synthesis of conventional methods (heuristic evaluation, cognitive walkthrough and +code review) that enables the reviewer to make assessments both from the user's point of view and that of the designer. +The multifaceted nature of the UX Walkthrough enables the reviewer to make assessments across several dimensions, +including: general design quality, task-oriented usability, assistive technology usability, accessibility standards +compliance, and code quality. A UX Walkthrough produces a result that reveals usability and accessibility issues +effectively and efficiently. -A UX Walkthrough can be performed by novices as well as experienced evaluators. The result is a comprehensive and multidimensional report of usability and accessibility issues. +A UX Walkthrough can be performed by novices as well as experienced evaluators. The result is a comprehensive and +multidimensional report of usability and accessibility issues. ## Try 1. Choose a user 2. Specify an explicit user goal 3. Prepare working software or prototype -4. Choose an approach (for example, when testing a digital interface include screenreader users, keyboard-only users and users who have difficulty processing text) +4. Choose an approach (for example, when testing a digital interface include screenreader users, keyboard-only users and + users who have difficulty processing text) 5. Plan both the Heuristic Evaluation and the Cognitive Walkthrough 6. Perform the walkthrough and record the results -Please find more details about performing a UX Walkthrough at the following link: +Please find more details about performing a UX Walkthrough at the following link: + diff --git a/src/documents/tools/UsabilityTesting.md b/src/documents/tools/UsabilityTesting.md index ad0181a..a1b7b48 100644 --- a/src/documents/tools/UsabilityTesting.md +++ b/src/documents/tools/UsabilityTesting.md @@ -6,16 +6,30 @@ eleventyNavigation: order: 2 --- -Usability testing, also sometimes referred to as user testing, is a technique for evaluating the usability of a design by working with an actual or potential user of a product or system. At a basic level, a usability test usually involves a facilitator asking a user to complete a series of tasks (which may or may not be predetermined) while observing the interaction, noting any problems the user encounters, suggestions for improvements, and sometimes the amount of time it takes to complete a task. These findings are then fed back into the design and development cycle in order to improve the product or system. This does not mean that every suggestion made during testing should be directly incorporated into the design; rather it is the designer’s responsibility to consolidate and parlay the information into the next stage of the design. +Usability testing, also sometimes referred to as user testing, is a technique for evaluating the usability of a design +by working with an actual or potential user of a product or system. At a basic level, a usability test usually involves +a facilitator asking a user to complete a series of tasks (which may or may not be predetermined) while observing the +interaction, noting any problems the user encounters, suggestions for improvements, and sometimes the amount of time it +takes to complete a task. These findings are then fed back into the design and development cycle in order to improve the +product or system. This does not mean that every suggestion made during testing should be directly incorporated into the +design; rather it is the designer’s responsibility to consolidate and parlay the information into the next stage of the +design. -Usability testing can be performed on products or systems at any stage of development, from the early stages of design to the final stages of production. It is most helpful to start early in the design process by performing usability tests with rough sketches or prototypes, and continuing to test more interactive prototypes as a product or system is iterated upon. +Usability testing can be performed on products or systems at any stage of development, from the early stages of design +to the final stages of production. It is most helpful to start early in the design process by performing usability tests +with rough sketches or prototypes, and continuing to test more interactive prototypes as a product or system is iterated +upon. ## Try 1. Before you start, reassure the participant that you are not testing them, rather you are testing the design -2. Ask them to “think aloud” to understand their behaviour in the context of what they are trying to accomplish, determine whether or not the design is meeting their needs, and identify any confusion about the purpose of a design feature or anticipated outcome of an interaction. +2. Ask them to “think aloud” to understand their behaviour in the context of what they are trying to accomplish, + determine whether or not the design is meeting their needs, and identify any confusion about the purpose of a design + feature or anticipated outcome of an interaction. 3. Don’t help, react, interrupt, and draw attention to specific issues you care about. 4. Don’t ask leading questions -5. Take a note of any problems the user encounters, suggestions for improvements, and if useful, the amount of time it takes to complete a task +5. Take a note of any problems the user encounters, suggestions for improvements, and if useful, the amount of time it + takes to complete a task -Please find more details about performing a usability tests at the following link: +Please find more details about performing a usability tests at the following link: + diff --git a/src/documents/tools/UseCases.md b/src/documents/tools/UseCases.md index e23c9eb..33e1073 100644 --- a/src/documents/tools/UseCases.md +++ b/src/documents/tools/UseCases.md @@ -6,16 +6,25 @@ eleventyNavigation: order: 8 --- -Use cases describe particular scenarios in which a user may encounter and use a product or service, providing more detail about specific tasks and goals as well as helping to map out the potential steps in a workflow. User personas and accompanying use cases are not meant to exhaustively describe all potential stakeholders or situations; rather they help to illustrate key goals, the main steps that should be taken towards achieving that goal, and behaviour patterns related to the design in question. +Use cases describe particular scenarios in which a user may encounter and use a product or service, providing more +detail about specific tasks and goals as well as helping to map out the potential steps in a workflow. User personas and +accompanying use cases are not meant to exhaustively describe all potential stakeholders or situations; rather they help +to illustrate key goals, the main steps that should be taken towards achieving that goal, and behaviour patterns related +to the design in question. -In an inclusive design process it is important to include edge cases. These are personas and use-cases that describe both users with needs that are not typically considered in the design process, as well as non-typical or unexpected uses of a product or service. Use-cases present a picture of a person in a specific context, with available tools, existing constraints and potential distractions, who is hoping to achieve a specific goal using the product or service in question. +In an inclusive design process it is important to include edge cases. These are personas and use-cases that describe +both users with needs that are not typically considered in the design process, as well as non-typical or unexpected uses +of a product or service. Use-cases present a picture of a person in a specific context, with available tools, existing +constraints and potential distractions, who is hoping to achieve a specific goal using the product or service in +question. ## Try 1. Determine what your user is hoping to achieve with your product/system (be specific) 2. Describe the context, available tools, constraints, potential distractions, etc. 3. Describe how the product can help your user achieve their goals -4. Re-iterate and evolve your use-cases as you collect more feedback from potential users and/or stakeholders as your project moves forward +4. Re-iterate and evolve your use-cases as you collect more feedback from potential users and/or stakeholders as your + project moves forward ## Combine with diff --git a/src/documents/tools/UserStatesAndContexts.md b/src/documents/tools/UserStatesAndContexts.md index e12ceac..f7bb4eb 100644 --- a/src/documents/tools/UserStatesAndContexts.md +++ b/src/documents/tools/UserStatesAndContexts.md @@ -6,16 +6,25 @@ eleventyNavigation: order: 6 --- -User states and contexts is a use-modelling tool for conceptualizing, designing, and evaluating the ability of a design to be consumed and operated by users in a wide range of states and contexts. +User states and contexts is a use-modelling tool for conceptualizing, designing, and evaluating the ability of a design +to be consumed and operated by users in a wide range of states and contexts. -A user states and context map can demonstrate needs that are represented by a particular persona, or that of a collection of personas. The map can also be used to consider how states and contexts can change in the short term (e.g. on a daily basis) or the long term (e.g. over a lifetime). +A user states and context map can demonstrate needs that are represented by a particular persona, or that of a +collection of personas. The map can also be used to consider how states and contexts can change in the short term (e.g. +on a daily basis) or the long term (e.g. over a lifetime). -By demonstrating the many states and contexts a user can be in at any given time and in any given situation, the map presents a bigger picture. It describes the broad and ever-changing needs of a single user, and also allows a comparison of the needs of multiple users. In this way it can reveal patterns, interesting outliers, or commonalities in needs that might not otherwise be obvious. +By demonstrating the many states and contexts a user can be in at any given time and in any given situation, the map +presents a bigger picture. It describes the broad and ever-changing needs of a single user, and also allows a comparison +of the needs of multiple users. In this way it can reveal patterns, interesting outliers, or commonalities in needs that +might not otherwise be obvious. -Needs that are commonly met are placed in the middle, and needs that are not well met are placed toward the edge. This demonstrates that the needs of users "on the edge" are greater in number, as well as the phenomena that by meeting edge needs, you also meet the mainstream needs of the middle. +Needs that are commonly met are placed in the middle, and needs that are not well met are placed toward the edge. This +demonstrates that the needs of users "on the edge" are greater in number, as well as the phenomena that by meeting edge +needs, you also meet the mainstream needs of the middle.
-[![A diagram showing a States and Contexts map for two different users](/assets/images/StatesAndContextsToolMapped.png)](/assets/images/StatesAndContextsToolMapped.png) +[![A diagram showing a States and Contexts map for two different +users](/assets/images/StatesAndContextsToolMapped.png)](/assets/images/StatesAndContextsToolMapped.png)
*Figure 1:* An example of a User States and Contexts map
diff --git a/src/documents/tools/Wireframes.md b/src/documents/tools/Wireframes.md index d24ab4f..4ee66e8 100644 --- a/src/documents/tools/Wireframes.md +++ b/src/documents/tools/Wireframes.md @@ -6,15 +6,24 @@ eleventyNavigation: order: 10 --- -Wireframes provide a way to develop and present design ideas in the early stages of a project. They can be made up of very rough paper sketches or can be more refined and detailed digital artifacts. In the early stages of designing an interface, they can be used to help plan the layout of the design. They are a good way to focus on the functionality of the design without getting into the details, such as style and colour. +Wireframes provide a way to develop and present design ideas in the early stages of a project. They can be made up of +very rough paper sketches or can be more refined and detailed digital artifacts. In the early stages of designing an +interface, they can be used to help plan the layout of the design. They are a good way to focus on the functionality of +the design without getting into the details, such as style and colour. -Alongside the visual wireframes, it is best to also consider narratives, long descriptions, or written step-by-step "tours" through the wireframes as a way to create a textual alternative. Not only does this make the wireframes more accessible, but it is a good way to start imagining how the interface can be presented in alternative modes. Considering this in the early stages of design will result in more successfully integrated features. +Alongside the visual wireframes, it is best to also consider narratives, long descriptions, or written step-by-step +"tours" through the wireframes as a way to create a textual alternative. Not only does this make the wireframes more +accessible, but it is a good way to start imagining how the interface can be presented in alternative modes. Considering +this in the early stages of design will result in more successfully integrated features. ## Try -1. Start by listing the global features of your interface as well as features that are specific to individual screens, in order to get a clear idea of the features and functions needed -2. Create a skeleton for each screen; features can be located within the screens and interaction behaviors assigned to each one -3. After several iterations and user testing sessions, create high fidelity wireframes that more closely reflect the look, feel and interactive behavior of your final product +1. Start by listing the global features of your interface as well as features that are specific to individual screens, + in order to get a clear idea of the features and functions needed +2. Create a skeleton for each screen; features can be located within the screens and interaction behaviors assigned to + each one +3. After several iterations and user testing sessions, create high fidelity wireframes that more closely reflect the + look, feel and interactive behavior of your final product ## Combine with diff --git a/src/index.md b/src/index.md index 094f487..470fc08 100644 --- a/src/index.md +++ b/src/index.md @@ -3,39 +3,56 @@ title: Welcome to The Inclusive Design Guide layout: layouts/index.njk --- -The Inclusive Design Guide can be applied to digital design as well as to the design of **services**, the **built environment** and **physical products**. It can be applied to processes like **workshops**, **meetings**, **conferences**, and even our daily interactions with one another. It can be used by anyone. The Guide is ever-evolving as we learn more about how to design inclusion into all that we do. **We rely on your feedback and contributions to continue developing these ideas**. +The Inclusive Design Guide can be applied to digital design as well as to the design of **services**, the **built +environment** and **physical products**. It can be applied to processes like **workshops**, **meetings**, +**conferences**, and even our daily interactions with one another. It can be used by anyone. The Guide is ever-evolving +as we learn more about how to design inclusion into all that we do. **We rely on your feedback and contributions to +continue developing these ideas**. -An [animated introduction to the Guide](https://www.youtube.com/watch?v=ESyrapafICE) is also available. It provides descriptions of each of the guide's sections and its printable design cards. +An [animated introduction to the Guide](https://www.youtube.com/watch?v=ESyrapafICE) is also available. It provides +descriptions of each of the guide's sections and its printable design cards.
-At the Inclusive Design Research Centre and the Inclusive Design Institute we stress the [**Three Dimensions of Inclusive Design:**](http://idrc.ocadu.ca/about-the-idrc/49-resources/online-resources/articles-and-papers/443-whatisinclusivedesign) +At the Inclusive Design Research Centre and the Inclusive Design Institute we stress the [**Three Dimensions of +Inclusive +Design:**](http://idrc.ocadu.ca/about-the-idrc/49-resources/online-resources/articles-and-papers/443-whatisinclusivedesign) * {% include 'svg/icon-dimension.svg' %} **Recognize Diversity and Uniqueness** - As individuals spread out from the hypothetical average, the needs of individuals that are outliers, or at the margins, become ever more diverse. Most individuals stray from the average in some facet of their needs or goals. This means that a mass solution does not work well. + As individuals spread out from the hypothetical average, the needs of individuals that are outliers, or at the + margins, become ever more diverse. Most individuals stray from the average in some facet of their needs or goals. This + means that a mass solution does not work well. * {% include 'svg/icon-dimension.svg' %} **Inclusive Process and Tools** - Inclusive design teams should be as diverse as possible and include individuals who have a lived experience of the users the designs are intended for. This also respects the edict “nothing about us without us” without relegating people with disabilities to the role of subjects of research or token participants in design exercises.

+ Inclusive design teams should be as diverse as possible and include individuals who have a lived experience of the + users the designs are intended for. This also respects the edict “nothing about us without us” without relegating + people with disabilities to the role of subjects of research or token participants in design exercises.

* {% include 'svg/icon-dimension.svg' %} **Broader Beneficial Impact** - It is the responsibility of inclusive designers to be aware of the context and broader impact of any design and strive to effect a beneficial impact beyond the intended beneficiary of the design. + It is the responsibility of inclusive designers to be aware of the context and broader impact of any design and strive + to effect a beneficial impact beyond the intended beneficiary of the design.
-Striving to work within these dimensions as we practice inclusive design, there have been many "aha" moments and exciting learning opportunities. We have aimed to capture these moments here in the Guide, in our growing constellation of [**Insights**](/insights/DiverseParticipationAndPerspectives.html). We have also gathered together a collection of [**Practices**](/practices/Collaborate.html), [**Tools**](/tools/UXWalkthroughs.html) and [**Activities**](/activities/MatchingGame.html) in the Guide which describe some of the specific ways in which inclusive design can be put into action. +Striving to work within these dimensions as we practice inclusive design, there have been many "aha" moments and +exciting learning opportunities. We have aimed to capture these moments here in the Guide, in our growing constellation +of [**Insights**](/insights/DiverseParticipationAndPerspectives.html). We have also gathered together a collection of +[**Practices**](/practices/Collaborate.html), [**Tools**](/tools/UXWalkthroughs.html) and +[**Activities**](/activities/MatchingGame.html) in the Guide which describe some of the specific ways in which inclusive +design can be put into action.
- The sections and items that make up the Inclusive Design Guide are not meant to be followed in any particular order. You can begin wherever and whenever it makes sense for you, your team, and your process. Revisiting the guide at different stages in the project can be an effective way to integrate it into your work. + The sections and items that make up the Inclusive Design Guide are not meant to be followed in any particular order. + You can begin wherever and whenever it makes sense for you, your team, and your process. Revisiting the guide at + different stages in the project can be an effective way to integrate it into your work.
- - {% include 'svg/schematic.svg' %} - + {% include 'svg/schematic.svg' %}
From be5be2c77d7d5e65f675c587a623b088f8902025 Mon Sep 17 00:00:00 2001 From: Ned Zimmerman Date: Wed, 4 Nov 2020 09:06:04 -0400 Subject: [PATCH 2/6] fix: resolve review comments --- Gruntfile.js | 2 +- README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index a76f956..3eaa1a3 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -23,7 +23,7 @@ module.exports = function (grunt) { sources: { json: ["./*.json", ".eslintrc.json", ".stylelintrc.json", "./src/**/*.json"], js: ["./*.js", ".eleventy.js", "src/**/*.js", "!src/lib/**/*.js"], - md: ["./src/documents/**/*.md","README.md","CONTRIBUTING.md","AUTHORS.md","./src/*.md", "!dist/**/*.md"] + md: ["./src/documents/**/*.md", "README.md", "CONTRIBUTING.md", "AUTHORS.md", "./src/*.md", "!dist/**/*.md"] } } }); diff --git a/README.md b/README.md index 79c292d..a5fe280 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ directory to the web root of your server. ## License Information The Inclusive Design Guide's code is licensed under the [BSD -3-Clause](https://raw.githubusercontent.com/inclusive-design/guide.inclusivedesign.ca/blob/main/LICENSE.md) license. +3-Clause](https://github.com/inclusive-design/guide.inclusivedesign.ca/blob/main/LICENSE.md) license. The Inclusive Design Guide's content is licensed under the [Creative Commons Attribution 3.0](http://creativecommons.org/licenses/by/3.0/) license. From bbafaa340fc1e0aa347ecdcf1a3357cc1ef80a08 Mon Sep 17 00:00:00 2001 From: Ned Zimmerman Date: Wed, 4 Nov 2020 10:22:20 -0400 Subject: [PATCH 3/6] fix: restore numbered bullets to Prototyping page --- src/documents/tools/Prototyping.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/documents/tools/Prototyping.md b/src/documents/tools/Prototyping.md index d3fa175..c810644 100644 --- a/src/documents/tools/Prototyping.md +++ b/src/documents/tools/Prototyping.md @@ -23,12 +23,12 @@ testing. ## Try -* There are several digital tools that help designers create interactive prototypes, many of which are available online. +1. There are several digital tools that help designers create interactive prototypes, many of which are available online. For example, InVision is a prototyping tool that is easy to learn and use. -* If you are designing a product, you can use 3D printing to build high fidelity prototypes. -* If you are working on a digital product, such as a website or an application, try publishing a beta version to get +2. If you are designing a product, you can use 3D printing to build high fidelity prototypes. +3. If you are working on a digital product, such as a website or an application, try publishing a beta version to get user feedback and fix the technical issues. -* If you are designing a service or a system, try roleplaying sessions to test your proposed solution. +4. If you are designing a service or a system, try roleplaying sessions to test your proposed solution. ## Combine with From 89cd62ab83e14b059954c5742bc06464296d227b Mon Sep 17 00:00:00 2001 From: Ned Zimmerman Date: Wed, 4 Nov 2020 15:24:14 -0400 Subject: [PATCH 4/6] fix: adjust list types --- src/documents/activities/FunctionalMashup.md | 8 ++++---- src/documents/activities/WebOfStrings.md | 8 ++++---- src/documents/tools/Prototyping.md | 8 ++++---- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/documents/activities/FunctionalMashup.md b/src/documents/activities/FunctionalMashup.md index 6c4f7a4..30518e1 100644 --- a/src/documents/activities/FunctionalMashup.md +++ b/src/documents/activities/FunctionalMashup.md @@ -29,14 +29,14 @@ to build prototypes (e.g. scissors, glue, tape, pipe cleaners, etc.). ### Steps -* Break into smaller groups (3 to 5 people per group is usually best) -* Keeping the objects on the cards hidden, each group selects the same number of cards from the main deck (this number +1. Break into smaller groups (3 to 5 people per group is usually best) +2. Keeping the objects on the cards hidden, each group selects the same number of cards from the main deck (this number can be decided by the larger group). -* Each group then chooses or is assigned one function from a collection of functions - these can be determined by the +3. Each group then chooses or is assigned one function from a collection of functions – these can be determined by the facilitator ahead of time or collectively by the group. The functions can be realistic or can be more experimental and exploratory. For example: communicating with a neighbour during a power failure, sending money to relatives overseas, taking your newborn baby to work, walking your dog in an airplane, looking after your parents remotely, etc. -* The challenge for each group is to combine and use all of the objects on their cards to create something that fulfills +4. The challenge for each group is to combine and use all of the objects on their cards to create something that fulfills the selected function. One way to approach this might be to tell a story about how your objects come together to fulfill the function. diff --git a/src/documents/activities/WebOfStrings.md b/src/documents/activities/WebOfStrings.md index 438083b..e9f3a16 100644 --- a/src/documents/activities/WebOfStrings.md +++ b/src/documents/activities/WebOfStrings.md @@ -28,12 +28,12 @@ strings you have, the denser your web will be, and the heavier the object it can ### Preparation -* Place the empty containers at least 1 ft from each other. The further away the containers are from each other, the +1. Place the empty containers at least 1 ft from each other. The further away the containers are from each other, the more challenging this activity becomes. -* Lay out all of the strings so that they intersect at the middle, with the intersection point lying over top of one of +2. Lay out all of the strings so that they intersect at the middle, with the intersection point lying over top of one of your containers (see Figures below). -* Place the object on the intersection point of the strings, in the first container. -* Each participant holds one end of a string. +3. Place the object on the intersection point of the strings, in the first container. +4. Each participant holds one end of a string. **Tip**: the strings do not necessarily need to be held by hand. For example, a participant may use their mouth, or the end of a string can be attached to a wheelchair. diff --git a/src/documents/tools/Prototyping.md b/src/documents/tools/Prototyping.md index c810644..d3fa175 100644 --- a/src/documents/tools/Prototyping.md +++ b/src/documents/tools/Prototyping.md @@ -23,12 +23,12 @@ testing. ## Try -1. There are several digital tools that help designers create interactive prototypes, many of which are available online. +* There are several digital tools that help designers create interactive prototypes, many of which are available online. For example, InVision is a prototyping tool that is easy to learn and use. -2. If you are designing a product, you can use 3D printing to build high fidelity prototypes. -3. If you are working on a digital product, such as a website or an application, try publishing a beta version to get +* If you are designing a product, you can use 3D printing to build high fidelity prototypes. +* If you are working on a digital product, such as a website or an application, try publishing a beta version to get user feedback and fix the technical issues. -4. If you are designing a service or a system, try roleplaying sessions to test your proposed solution. +* If you are designing a service or a system, try roleplaying sessions to test your proposed solution. ## Combine with From 62bcbf35efab607cae1a77ed9b789b74b32c481a Mon Sep 17 00:00:00 2001 From: Ned Zimmerman Date: Mon, 7 Dec 2020 13:25:57 -0400 Subject: [PATCH 5/6] feat: add figure shortcode, apply to activities --- .eleventy.js | 5 ++ .../activities/CollaborativeArtWarmup.md | 30 ++++---- src/documents/activities/Create-a-Thon.md | 24 +++---- src/documents/activities/FunctionalMashup.md | 13 ++-- .../activities/InclusiveDesignMapping.md | 55 +++++++-------- src/documents/activities/VirtuousTornado.md | 68 +++++++++---------- src/documents/activities/WebOfStrings.md | 52 +++++++------- src/transforms/parse-transform.js | 20 ------ 8 files changed, 121 insertions(+), 146 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index 688deb5..78ac1cd 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -15,6 +15,11 @@ module.exports = function (config) { config.addPlugin(fluidPlugin); config.addPlugin(navigationPlugin); + // Shortcodes + config.addPairedShortcode("figure", function (content, img, alt) { + return `
\n${alt}
${content}
\n
`; + }); + // Transforms config.addTransform("parse", parseTransform); diff --git a/src/documents/activities/CollaborativeArtWarmup.md b/src/documents/activities/CollaborativeArtWarmup.md index d0a6772..7c40079 100644 --- a/src/documents/activities/CollaborativeArtWarmup.md +++ b/src/documents/activities/CollaborativeArtWarmup.md @@ -56,18 +56,18 @@ This activity helps participants gain a deeper understanding of the different wa accessed, perceived and interpreted. It also helps participants to think beyond typical communication methods in order to expand the range of people who can access and use the content. -
-[![An image showing a small sculpture made of lego and pipe cleaners on a table top, beside which lie two hand-written -notes, one of which includes a title and description, while the other contains an artist statement. -](/assets/images/collaborative_art.jpg)](/assets/images/collaborative_art.jpg) -
-*Figure 1:* Example of collaborative art created using the Collaborative Art Warmup Activity.
-
- -
-[![An image showing a small sculpture made of lego, a toy car, and pipe cleaners on a table top. Some handwritten notes -lie on the table beside the sculpture and a bin of lego can be seen in the background. -](/assets/images/collaborative_art2.jpg)](/assets/images/collaborative_art2.jpg) -
-*Figure 2:* Example of collaborative art created using the Collaborative Art Warmup Activity.
-
+{% figure "/assets/images/collaborative_art.jpg", "An image showing a small sculpture made of lego and pipe cleaners on +a table top, beside which lie two hand-written notes, one of which includes a title and description, while the other +contains an artist statement." %} + +*Figure 1:* Example of collaborative art created using the Collaborative Art Warmup Activity. + +{% endfigure %} + +{% figure "/assets/images/collaborative_art2.jpg", "An image showing a small sculpture made of lego, a toy car, and pipe +cleaners on a table top. Some handwritten notes lie on the table beside the sculpture and a bin of lego can be seen in +the background." %} + +*Figure 2:* Example of collaborative art created using the Collaborative Art Warmup Activity. + +{% endfigure %} diff --git a/src/documents/activities/Create-a-Thon.md b/src/documents/activities/Create-a-Thon.md index 5acbe61..a2618d7 100644 --- a/src/documents/activities/Create-a-Thon.md +++ b/src/documents/activities/Create-a-Thon.md @@ -12,12 +12,12 @@ whose needs aren’t met (who find a product or service impossible or difficult are not usually represented because they do not fit into a construct of "typical", "average", or the envisioned "target audience". -
-[![An image showing a group of four people participating in a Create-a-Thon, using building -toys.](/assets/images/CaT-01.jpg)](/assets/images/CaT-01.jpg) -
-*Figure 1:* A group collaborates together to build a marble track based on some basic requirements.
-
+{% figure "/assets/images/CaT-01.jpg", "An image showing a group of four people participating in a Create-a-Thon, using building +toys." %} + +*Figure 1:* A group collaborates together to build a marble track based on some basic requirements. + +{% endfigure %} A _CaT_ encourages participants to collaboratively build an artifact by “designing by metaphor” and use it as a means to translate their ideas to the systems, products or services being designed or tested. This helps constrain the physical @@ -35,13 +35,13 @@ as another and will contribute to rich designs and insights. It is possible, even desirable, to conduct several _CaTs_ at different stages throughout a design process to gain additional insights. -
-[![An image of a Create-a-Thon participant describing their group's -design.](/assets/images/CaT-02.jpg)](/assets/images/CaT-02.jpg) -
+{% figure "/assets/images/CaT-02.jpg", "An image of a Create-a-Thon participant describing their group's +design." %} + *Figure 2:* A participant shares their group's design after being given the task of creating a software version of the -physical marble track toy.
-
+physical marble track toy. + +{% endfigure %} ## Step 1 diff --git a/src/documents/activities/FunctionalMashup.md b/src/documents/activities/FunctionalMashup.md index 30518e1..8f71d4c 100644 --- a/src/documents/activities/FunctionalMashup.md +++ b/src/documents/activities/FunctionalMashup.md @@ -16,13 +16,14 @@ more creative and resourceful solutions, by thinking beyond the current or obvio You will need a deck of object cards. You can create your deck using any available materials. You might print images of different objects on paper or cardstock, use language learning flashcards, cut out magazine images and paste them onto cards, or find other ways to create a collection of random objects. -
-[![An image showing a large selection of cards spread out on the floor, each with a different magazine image pasted -on.](/assets/images/object_cards.jpg)](/assets/images/object_cards.jpg) -
+ +{% figure "/assets/images/object_cards.jpg", "An image showing a large selection of cards spread out on the floor, each +with a different magazine image pasted on." %} + *Figure 1:* Example of a collection of object cards created by pasting random magazine images onto sheets of -paper.
-
+paper. + +{% endfigure %} If desired and available you can provide additional tools and materials that can be used together with the object cards to build prototypes (e.g. scissors, glue, tape, pipe cleaners, etc.). diff --git a/src/documents/activities/InclusiveDesignMapping.md b/src/documents/activities/InclusiveDesignMapping.md index 0cac020..dfb7401 100644 --- a/src/documents/activities/InclusiveDesignMapping.md +++ b/src/documents/activities/InclusiveDesignMapping.md @@ -31,46 +31,42 @@ own facets if they can't find a desired state or context within the provided set Choose the facets that are relevant to the needs, preferences and the context you are designing for or critiquing. -
-[![A diagram showing individual facets of the Inclusive Design Mapping -Tool](/assets/images/InclusiveDesignMappingTool01.png)](/assets/images/InclusiveDesignMappingTool01.png) -
+{% figure "/assets/images/InclusiveDesignMappingTool01.png", "A diagram showing individual facets of the Inclusive +Design Mapping Tool" %} + *Figure 1:* Inclusive Design Mapping Tool - Choosing the Facets -
-
+ +{% endfigure %} ## Step 2 Map your needs, preferences and context on the selected facets. Next, using a different color, map the product/task/solution you are trying to critique or design. -
-[![A diagram showing individual facets with "yourself" and "product" -mapped](/assets/images/InclusiveDesignMappingTool02.png)](/assets/images/InclusiveDesignMappingTool02.png) -
+{% figure "/assets/images/InclusiveDesignMappingTool02.png", "A diagram showing individual facets with “yourself” and “product” +mapped" %} + *Figure 2:* Inclusive Design Mapping Tool - Mapping onto the Facets -
-
+ +{% endfigure %} ## Step 3 Now you can put the facets together, draw a jagged outline, and shade in the gap between the two outlines. -
-[![A diagram showing facets pieced together into a circle, with -mappings](/assets/images/InclusiveDesignMappingTool03.png)](/assets/images/InclusiveDesignMappingTool03.png) -
+{% figure "/assets/images/InclusiveDesignMappingTool03.png", "A diagram showing facets pieced together into a circle, with +mappings" %} + *Figure 3:* Inclusive Design Mapping Tool - Mapping the Current State -
-
-
-[![A diagram showing the gap between self and product -maps](/assets/images/InclusiveDesignMappingTool04.png)](/assets/images/InclusiveDesignMappingTool04.png) -
+{% endfigure %} + +{% figure "/assets/images/InclusiveDesignMappingTool04.png", "A diagram showing the gap between self and product +maps" %} + *Figure 4:* Inclusive Design Mapping Tool - Finding the Gap -
-
+ +{% endfigure %} ## Step 4 @@ -78,10 +74,9 @@ Once you have a proposed new design, redo the map, with the goal of fully encomp users. While iterating through the design process, the mapping can be very useful for identifying where your design does not stretch enough to meet the needs of edge users. -
-[![A diagram showing a new mapping with a positive -gap](/assets/images/InclusiveDesignMappingTool05.png)](/assets/images/InclusiveDesignMappingTool05.png) -
+{% figure "/assets/images/InclusiveDesignMappingTool05.png", "A diagram showing a new mapping with a positive +gap" %} + *Figure 5:* Inclusive Design Mapping Tool - Proposing the Desired State -
-
+ +{% endfigure %} diff --git a/src/documents/activities/VirtuousTornado.md b/src/documents/activities/VirtuousTornado.md index 7d08d68..f21d25c 100644 --- a/src/documents/activities/VirtuousTornado.md +++ b/src/documents/activities/VirtuousTornado.md @@ -23,19 +23,19 @@ Consider a scatter-plot of the needs of any group of people. Everyone brings a v working, different skills and needs to the table. Consider where you might lie on the starburst when using a particular design. -
-[![A diagram showing a cluster of black dots on a white starburst background. The dots are densest at the centre of the -starburst and become more and more spaced out as they move away from the centre. Three concentric, coloured circles are -drawn around the dots. In the centre, the smallest blue circle is labelled “Design works”, moving outward from centre -the next yellow circle is labelled “Design is difficult to use”, and finally a red circle around the outside is labelled -“Can’t use design”. ](/assets/images/VirtuousTornado01.png)](/assets/images/VirtuousTornado01.png) -
+{% figure "/assets/images/VirtuousTornado01.png", "A diagram showing a cluster of black dots on a white starburst +background. The dots are densest at the centre of the starburst and become more and more spaced out as they move away +from the centre. Three concentric, coloured circles are drawn around the dots. In the centre, the smallest blue circle +is labelled “Design works”, moving outward from centre the next yellow circle is labelled “Design is difficult to use”, +and finally a red circle around the outside is labelled +“Can’t use design”." %} + *Figure 1:* The starburst plot shows a denser set of dots (representing the majority needs) in the centre, and more widely spaced dots the further you get from that centre (the minority needs). Distance represents difference. The closer the dots the more similar they are. The wider they are spaced from each other the more they differ. Design innovation happens at the outer edges. -
-
+ +{% endfigure %} ## Identifying Needs - Mapping it Out @@ -56,24 +56,21 @@ facets; this can help your team realise additional needs that may be associated essential, and where you place each need is not critical - as long as the process you choose allows you to consider as many needs as possible. -
-[![Image showing a circle broken into four quarters. Each quarter is labelled with “Designs that Help Me…” and is broken -up into three equally spaced concentric sections, with “like & use” in the centre, “don’t like or having difficulty -using” in the middle, and “can’t use” at the outer periphery. -](/assets/images/VirtuousTornado02.png)](/assets/images/VirtuousTornado02.png) -
+{% figure "/assets/images/VirtuousTornado02.png", "Image showing a circle broken into four quarters. Each quarter is +labelled with “Designs that Help Me…” and is broken up into three equally spaced concentric sections, with “like & use” +in the centre, “don’t like or having difficulty using” in the middle, and “can’t use” at the outer periphery." %} + *Figure 2:* Template for mapping needs and characteristics in the context of a given design. -
-
- -
-[![ A photograph showing a large number of sticky notes on a table top. The sticky notes are covered in handwriting, and -are stuck to and clustered on large paper wedges, which are themselves put together to form a circle. -](/assets/images/VirtuousTornado03.png)](/assets/images/VirtuousTornado03.png) -
+ +{% endfigure %} + +{% figure "/assets/images/VirtuousTornado03.png", "A photograph showing a large number of sticky notes on a table top. +The sticky notes are covered in handwriting, and are stuck to and clustered on large paper wedges, which are themselves +put together to form a circle." %} + *Figure 3:* An example of mapping needs and characteristics onto the wedges of a circle. -
-
+ +{% endfigure %} ## Iterating on the Design - The Virtuous Tornado @@ -97,17 +94,16 @@ Consider solving not only for the specific design challenge, but also consider c that will improve the ability to solve future challenges. In this way your design will become more adaptable and it will be easier to widen the range of needs and characteristics that it can meet in the future. -
-[![A diagram showing a spiral in the centre which is getting wider and wider toward the top as it spirals outward. The -spiral is split into five vertical and equal sections starting with “cycle 1” at the bottom and ending with “cycle 5” at -the top. 5 corresponding injection points are indicated, showing the injection of needs and characteristics at each -iteration point of the 5 cycles. At the base of the spiral the words co-design, develop, implement, evaluate and refine -are shown forming a foundation. Three arrows move up through the centre of the spiral, from the foundation up and out to -the following blocks of text: More resilient designs, more adaptable designs, more innovative designs, more inclusive -designs, more accessible designs.](/assets/images/VirtuousTornado04.png)](/assets/images/VirtuousTornado04.png) -
+{% figure "/assets/images/VirtuousTornado04.png", "A diagram showing a spiral in the centre which is getting wider and +wider toward the top as it spirals outward. The spiral is split into five vertical and equal sections starting with +“cycle 1” at the bottom and ending with “cycle 5” at the top. 5 corresponding injection points are indicated, showing +the injection of needs and characteristics at each iteration point of the 5 cycles. At the base of the spiral the words +co-design, develop, implement, evaluate and refine are shown forming a foundation. Three arrows move up through the +centre of the spiral, from the foundation up and out to the following blocks of text: More resilient designs, more +adaptable designs, more innovative designs, more inclusive designs, more accessible designs." %} + *Figure 4:* The virtuous tornado describes an upward spiral into which needs and characteristics are injected at each design iteration. As the design moves up the spiral it expands to encompass these needs, becoming more and more inclusive in the process. -
-
+ +{% endfigure %} diff --git a/src/documents/activities/WebOfStrings.md b/src/documents/activities/WebOfStrings.md index e9f3a16..633d799 100644 --- a/src/documents/activities/WebOfStrings.md +++ b/src/documents/activities/WebOfStrings.md @@ -55,33 +55,31 @@ This activity helps to make the experience of working collaboratively toward a c requires that no one person overpower the others. Participants learn how to move in unison to keep the object from falling or rolling off the web, focusing on moving to the destination while working closely with each other. -
-[![A diagram showing 8 evenly-spaced straight lines that all intersect at their mid-point, creating a kind of giant -asterisk or starburst. The lines are labeled with numbers 1 through 8. Underlying the intersection point there is a -circle labeled "first container" and a short distance away there is a second circle labeled "second container". Lying on -top of the intersection point is a smaller circle labeled "object". Text reads "8 strings set up for 16 participants". -](/assets/images/web_of_strings_diagram.png)](/assets/images/web_of_strings_diagram.png) -
+{% figure "/assets/images/web_of_strings_diagram.png", "A diagram showing 8 +evenly-spaced straight lines that all intersect at their mid-point, creating a kind of giant asterisk or starburst. The +lines are labeled with numbers 1 through 8. Underlying the intersection point there is a circle labeled “first +container” and a short distance away there is a second circle labeled “second container”. Lying on top of the +intersection point is a smaller circle labeled “object”. Text reads “8 strings set up for 16 participants”" %} + *Figure 1:* Preparatory layout for the web of strings activity. Each participant controls one end of a string, either by holding it in their hand, attaching it to their wheelchair, or in whatever way works best for them. The object is collaboratively transferred from the first container to the second using only the web of strings. -
-
- -
-[![An image showing a several blue strings laid out on the floor, all intersecting at their midpoint and forming a web -in the shape of a large asterisk. The central intersection point of the strings lies on top of a white bowl, and an -orange ball lies on top of the intersection point of the strings. Nearby sits another white bowl of the same -size.](/assets/images/web_of_strings_layout.jpg)](/assets/images/web_of_strings_layout.jpg) -
-*Figure 2:* Preparatory layout for the web of strings activity.
-
- -
-[![An image showing a closeup view of the intersection point of the web of strings raised above the floor, on which -balances an orange ball. On the floor below a white bowl can be seen, as well as several participants standing in the -background holding the ends of the -strings.](/assets/images/web_of_strings_closeup.jpg)](/assets/images/web_of_strings_closeup.jpg) -
-*Figure 3:* Close up view of the web of strings in action.
-
+ +{% endfigure %} + +{% figure "/assets/images/web_of_strings_layout.jpg", "An image showing a +several blue strings laid out on the floor, all intersecting at their midpoint and forming a web in the shape of a large +asterisk. The central intersection point of the strings lies on top of a white bowl, and an orange ball lies on top of +the intersection point of the strings. Nearby sits another white bowl of the same size." %} + +*Figure 2:* Preparatory layout for the web of strings activity. + +{% endfigure %} + +{% figure "/assets/images/web_of_strings_closeup.jpg", "An image showing a closeup view of the intersection point of the +web of strings raised above the floor, on which balances an orange ball. On the floor below a white bowl can be seen, as +well as several participants standing in the background holding the ends of the strings." %} + +*Figure 3:* Close up view of the web of strings in action. + +{% endfigure %} diff --git a/src/transforms/parse-transform.js b/src/transforms/parse-transform.js index 07b63c9..11155c2 100644 --- a/src/transforms/parse-transform.js +++ b/src/transforms/parse-transform.js @@ -18,14 +18,6 @@ module.exports = (value, outputPath) => { linkify: true }); - const figures = [ - ...document.querySelectorAll("article figure") - ]; - - const captions = [ - ...document.querySelectorAll("article figcaption") - ]; - const sections = [ ...document.querySelectorAll("article idg-highlight-section") ]; @@ -54,18 +46,6 @@ module.exports = (value, outputPath) => { }); } - if (captions.length > 0) { - captions.forEach(caption => { - caption.innerHTML = md.render(caption.innerHTML); - }); - } - - if (figures.length > 0) { - figures.forEach(figure => { - figure.innerHTML = md.render(figure.innerHTML); - }); - } - if (sections.length > 0) { sections.forEach(sections => { sections.innerHTML = md.render(sections.innerHTML); From e3f64b423be33bfd6b813ae6a9fcde86ed88cc96 Mon Sep 17 00:00:00 2001 From: Ned Zimmerman Date: Mon, 7 Dec 2020 13:29:04 -0400 Subject: [PATCH 6/6] feat: use figure shortcode elsewhere --- src/documents/insights/VirtuousCycles.md | 9 ++++----- src/documents/tools/UserStatesAndContexts.md | 11 +++++------ 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/documents/insights/VirtuousCycles.md b/src/documents/insights/VirtuousCycles.md index 6daeae6..a5e8f44 100644 --- a/src/documents/insights/VirtuousCycles.md +++ b/src/documents/insights/VirtuousCycles.md @@ -16,12 +16,11 @@ met, individuals have greater access to participation (e.g. in a design process) demands. This pushes so-called “outlier” solutions into the mainstream, making inclusively designed solutions more affordable. This in turn increases individual spending power and prosperity, further increasing access to participation. -
-[![Diagram showing the virtuous cycles as a result of digital inclusion.](/assets/images/VirtuousCyclesOfDigitalInclusion.jpg)](/assets/images/VirtuousCyclesOfDigitalInclusion.jpg) -
+{% figure "/assets/images/VirtuousCyclesOfDigitalInclusion.jpg", "Diagram showing the virtuous cycles as a result of digital inclusion." %} + *Figure 1:* The virtuous cycles triggered by digital inclusion -
-
+ +{% endfigure %} ## Use diff --git a/src/documents/tools/UserStatesAndContexts.md b/src/documents/tools/UserStatesAndContexts.md index f7bb4eb..520bbc1 100644 --- a/src/documents/tools/UserStatesAndContexts.md +++ b/src/documents/tools/UserStatesAndContexts.md @@ -22,13 +22,12 @@ Needs that are commonly met are placed in the middle, and needs that are not wel demonstrates that the needs of users "on the edge" are greater in number, as well as the phenomena that by meeting edge needs, you also meet the mainstream needs of the middle. -
-[![A diagram showing a States and Contexts map for two different -users](/assets/images/StatesAndContextsToolMapped.png)](/assets/images/StatesAndContextsToolMapped.png) -
+{% figure "/assets/images/StatesAndContextsToolMapped.png", "A diagram showing a States and Contexts map for two different +users" %} + *Figure 1:* An example of a User States and Contexts map -
-
+ +{% endfigure %} ## Combine with