MA documentation: Difference between revisions

From XPUB & Lens-Based wiki
Line 424: Line 424:
};
};
</nowiki>
</nowiki>
What I found particularly exciting about the medium of the interactive map is how it is possible to switch between different levels of complexity through simple and intuitive user input. I wanted to use this to switch between different levels of information by zooming in and out.
Therefore I wrote a function that hides and shows levels of content depending on the zoom level.


  <nowiki>
  <nowiki>
Line 462: Line 465:
       for (var i = 0; i < mapelem1.length; i++) {
       for (var i = 0; i < mapelem1.length; i++) {
         if (zoomLevel == 1) {
         if (zoomLevel == 1) {
             mapelem1[i].style.pointerEvents = "auto";
             mapelem1[i].style.display = "";
         } else if (zoomLevel == 2) {
         } else if (zoomLevel == 2) {
             mapelem1[i].style.pointerEvents = "none";
             mapelem1[i].style.display = "none";
         } else {
         } else {
             mapelem1[i].style.pointerEvents = "none";
             mapelem1[i].style.display = "none";
         }  
         }  
       }
       }

Revision as of 21:48, 16 June 2021

My Motivation

  • My sister was born with Trisomy 21 (Down Syndrom).
  • My parents raised her to be self-determined.
  • For as long as I can remember my mother worked to support development towards a more inclusive society.
  • I went to a primary school that was integrative. I had classes in a group that included children without and some with disabilities.
  • I believe that everyone is valuable and should have equal opportunities.
  • In my previous studies (Communication Design) I worked on the concept of inclusive factbooks. [See here] [and here]
  • I am convinced that equal access to information and knowledge for all people is a basic prerequisite for an equitable society.

[Read more about my motivation in my thesis]

First Year

Special Issue X: Input Output

Special Issue X - Documentation

Special Issue X - Prototyping

Reading & Writing

For [Special Issue X] I built GLARE, a 16 voice polyphonic synthesizer instrument that is based on Arduino. GLARE module is controlled by gestures only and thereby works in a very intuitive way. This project is based on the approach of simplifying complex processes in such a way that they can be used by a wide range of people with different abilities without much prior knowledge. The sensors can be easily removed from the unit for storage or transport.

Final Glare Module
Glare in action

In this project, a group publication of 10 circuit boards was produced by the 10 students in vinyl record format. Together with 10 instructions for assembling the various modules, this publication is available from DePlayer in an original edition of 30. The project was also presented there. I was involved in the design of the visual identity of this exhibition.

Special Issue X publication contribution

[High resolution image of my publication contribution]

Input Output poster
Input Output modular posters

Special Issue XI: We have secrets to tell you

My full Special Issue XI Documentation is not accessible to the public at this moment.

In [Special Issue XI] I came into first contact with (Semantic) MediaWiki queries. Later in the project, I was mainly involved in coding the publicly accessible part of our web publication. This was the first time for me to code in Javascript. On the website, it is possible to filter content and generate a print document from selected content.

Special Issue XI publication
Special Issue XI publication

In this project, my focus was on breaking down the collectively used processes into tools and methods. For each collected item I wrote short texts that explain what we used them for. I also developed an icon for each collected item.

Tools - Icons created for Special Issue XI publication
Methods - Icons created for Special Issue XI publication

Special Issue XII: Radio Implicancies

File:Max Lehmann Special Issue XII notebook.pdf

In [Special Issue XII] I mainly created audio content for our collective weekly broadcast. I was also involved in coding one of the web broadcasting interfaces.

Special Issue XII publication contribution

Second Year

Proposal

Concept development

Concept/Research

Initial thoughts

  • Speculative experimental approach to inclusive interface design
  • Simple language vs. Complex language - In which areas is it not possible to use simple language and why? Language as a barrier, as a weapon, as protection...
  • What is normal? A publication about the developments of norms in societies. Predjudices, conformity... Technological norms and implications? (Queer Technologies) Reading Normal by Allen Frances. [Read more about this in my thesis.]
  • Critical examination of the meaning of "normal" and problems that come with it. Is normal just an individual reflection of a perceived average of our surroundings? Normal is consistency in perception?
  • Is there a definition of "normal", that is not exclusive towards minority groups? What will future norms be and how can they be changed?
  • Interactive (game) website using 2D animation to explain what "normal" is normal and why
First thoughts
  • Barrier-free calibration tool to make a website dynamically adjust to individual users
First ideas: Website that adjust to user preferences

Inclusive web, user abilities and conditions

  • Reduce barriers for web users - inclusive browser, (-plugin), website, wiki: Remove distraction, simplify, add illustration, layout...
  • Access to what kinds of information is crucial for equal participation? Who decides?
  • How inclusive is the web with special regards to websites on which all kinds of "important information" is available.
Attempt to analyse different websites according to inclusivity criteria
  • Which user skills and conditions can affect equal access to information and knowledge?
Map: User diversity in information design

Proposal (Summary)

For my master project, I am creating a website that allows for exploration of selected aspects of human diversity, due to which users or groups of users might be disadvantaged when information is presented to them, or they seek to access it.

This is to give an overview of possible necessary adaptations in the process of creating an inclusive publication in terms of design and content. It is also to inform about the human emotions that can be caused by facing a disadvantage in accessing information, maybe because of an individual special feature that has not been thought of in the creation process.

The website will consist of a spherical 3D map. On the 3D map selected aspects of human diversity will be arranged on the basis of their thematic proximity and interconnections. I will create animated illustrations to support the understanding of the information. Additionally, personal reports of various individuals will be provided, telling their experiences of exclusion. I chose the shape of the sphere, as its surface has no ends and no center.

The interface of the website will allow for certain adjustments of the website‘s appearance according to user preferences, like font-size, color-scheme, speed of moving content, audio playback, or language. All texts will either be written in simple language, or each text will be available in different levels of complexity, from which the user can choose according to preference.

Proposal: Globe website

I will speak about the different aspects of human diversity exclusively in the form of individual symptoms and refrain from naming diagnoses.

Tabel: Cluster of human abilities relevant to the design and content of information publication
2D representation of a sphere with information arranged on it

Read my full Project proposal

Illustration

First test with Blender 3D + 2D frame by frame animation
Animation: Learning styles - Visual
Animation: Learning styles - Social
Animation: Learning styles - Aural

Prototyping

I used the open-source software [Blender] to create a prototype of the interface and to create 2D animated illustrations.

Blender: Sphere with illustrations of learning styles arranged on it
Blender: Sphere with illustrations of learning styles arranged on it

Over time I developed an understanding of various Javbascript libraries, especially [Three.js].

First 3JS Tests: 3D objects and mouse interaction
First 3JS Tests: Texture, controls and responsiveness
First 3JS Tests: Object loading

Over time I developed an interactive sphere interface on which information is arranged.

First 3JS Tests: Sphecirally arranged CSS3DObjects

Check out my complete [Technical process index].

Workshop

Meet - Interface Together with Avital I developed a workshop in which we analyzed different websites according to criteria that would normally be used to examine people and social interactions. On the basis of this analysis, we played improvised theatre scenes and processed the insights gained as a group. Read the full [documentation page].

Resubmition

I was asked to resubmit my project proposal. The reasons for this were, as I understand it, that the scope of the proposed project was too large. I was advised to reduce the scope in order not to compromise the quality of my publication.

Accordingly, I narrowed the focus of the project. After analysing the possible channels of information communication, I decided to focus on the inclusive creation of websites. This was an obvious choice, as online research of necessary materials on this topic was particularly easy to implement. Also, the field of web design matched the development of my personal interests. Read more about this decision in my [Thesis]

With regard to the groups of aspects of human diversity, I decided to limit myself to disabilities because of my personal connection to this topic. Read more about this decision in my [Thesis]

Concept

New proposal

I will create an index of online references that can help with the creation of websites that work well for all people, including those with physical or mental disabilities. The references will be combined with individual testimonials of exclusion in this area, as well as illustrations and simple summaries. A wiki will serve as both, the primary interface to access these contents, as well as a backend from which I will conduct interface experiments. In these experiments, I will write scripts to create websites by querying contents from the wiki.

Read my full Resubmition.

Check out my [Resubmition Presentation].

Process

I gathered a collection of references and tools linked to the topic of the inclusive creation of websites. I used Adobe Illustrator to collect and organize the collected content.

Physical user abilites in inclusive webdesign and related materials
Mental user abilites in inclusive webdesign and related materials
Materials related to inclusion and inclusive websdesign
Hearing ability in inclusive webdesign and related materials
Provisional list of relevant user abilities for inclusive web design
Chart of relevant user abilities for inclusive web design and related materials
Continued chart of relevant user abilities for inclusive web design and related materials
Example of the hierarchical structure of the related contents

In order to collect the user stories as planned, I first developed a questionnaire in simple language which I made public via various distributors. The only response I received during the whole project was one from my personal contacts.

Provisional questionnaire to collect user stories with first answers (in German)
Summary of the first answers received

I made the questionnaire available as an [online survey] using the free [survey.js library].

Online survey to collect user stories of exclusion and websites

I realized, that creating such stories in a respectful and authentic way takes time and direct collaboration with the individuals, which I was not able to do. So due to lack of time and other circumstances, I decided not to make any further efforts to collect these stories. I replaced the missing stories as much as possible with ones that I found online. Where I don't find any, I invite users to share their experiences through the online survey or in the [forum].

Wiki

I structured the content on [my Wiki] using, among other extensions, [Pageforms] and [Cargo]. I set up and published my Wiki, as well as the rest of my publication, on a personal Raspberry Pi.

Make Inclusive Websites Wiki
Edits made on the 15th of June 2021

On my Wiki I implemented Templates and Forms with Page-Forms and stored the information in Cargo tables.

{{References
|headline1=General
|coordhead1=10.000, 285.000, 0.000
|references1=
Use headings to convey meaning and structure;
Tips for Getting Started - 3WC Web Accessibility Initiative;
https://www.w3.org/WAI/tips/writing/#use-headings-to-convey-meaning-and-structure;
Section Headings;
Understanding Web Content Accessibility Guidelines (WCAG) 2.1;
https://www.w3.org/WAI/WCAG21/Understanding/section-headings;
Headings and labels;
Understanding Web Content Accessibility Guidelines (WCAG) 2.1;
https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html
|headline2=Dividing Processes
|coordhead2=16.000, 285.000, 0.000
|references2=
Multi-page Forms;
Web Accessibility Tutorials - 3WC Web Accessibility Initiative;
https://www.w3.org/WAI/tutorials/forms/multi-page/;
Progress Trackers in UX Design;
Nick Babich;
https://uxplanet.org/progress-trackers-in-ux-design-4319cef1c600;
Multi-step form design: Progress indicators and field labels;
Kristen Willis;
https://www.breadcrumbdigital.com.au/multi-step-form-design-part-1-progress-indicators-and-field-labels/
|linksto=
|belongsto=Complexity
|contains=
}}

Part of a Cargo table storing some information

Illustration

During the whole process I worked on illustrations on the side. Both animated ones for the "user skills" level and still ones for the "website aspects" level.

Making animated illustrations in Blender
Animation: User ability - Attention
Animation: User ability - Color vision
Animation: User ability - Comprehension
Animation: User ability - Flexibility
Animation: User ability - Hearing
Animation: User ability - Language
Animation: User ability - Linguistic competence
Animation: User ability - Memory
Animation: User ability - Mode of adress
Animation: User ability - Motor functions
Animation: User ability - Processing pace
Animation: User ability - Sensitivity
Animation: User ability - Sight
Illustrations: Website aspects with regards to user abilities

Technical process

[Technical process index]

General

The information in all the interfaces is retrieved from my Wiki as a cargo query with Javascript "fetch" in JSON format.

let fetchhuman = (promise) => {
   return fetch("/wiki/index.php?title=Special:CargoExport&tables=human%2C&&fields=human._pageName%2C+human.headline%2C+human.coordinates%2C+human.image1%2C&&order+by=%60cargo__human%60.%60_pageName%60%2C%60cargo__human%60.%60headline%60%2C%60cargo__human%60.%60coordinates__full%60+%2C%60cargo__human%60.%60image1%60&origin=*&limit=100&format=json").then(r=>r.json()).then(data=>{
...

Then all the contents of the query data are rendered into HTML elements.

for (let i = 0; i < data.length; i++) {
    var content = data[i];

    var div = document.createElement("div");
    div.setAttribute("id", content._pageName);
    document.body.appendChild(div);

    var image = document.createElement("img");
    image1.setAttribute("src", content.image1);
    image1.setAttribute("alt", "Illustration of " + content.headline);
    div.append(image1);
                
    var head = document.createElement("h2");
    temphead.innerHTML = content._pageName;
    temphead.setAttribute("id", content.headline+"head");
    div.appendChild(temphead);

    ...

Some parts of the data, like the references need to be sorted.

let references = content.references1;
references.unshift("Empty");

let ref_link = references1.filter(function(value, index, Arr) {
    return index % 3 == 0;
});
ref_link.shift();

let ref_head = references.filter(function(value, index, Arr) {
    return index % 3 == 1;
});

let ref3desc = references3.filter(function(value, index, Arr) {
    return index % 3 == 2;
});

for (let i = 0; i < ref3head.length; i++) {
    if (ref3head[i]!== ""){
        var ref3headline = ref3head[i];
        var ref3description = ref3desc[i];
        var ref3link = ref3lin[i];
        ...

On this basis, the information is then processed according to the requirements of the different interfaces.

Globe

The interface I have spent the most time on is the "Globe" interface.

Throughout the process, I have steadily increased my understanding of the Threejs library and gradually created my own interface that has typical card functions and controls. During the process, I also looked for and tried other approaches. In particular, I looked for free, highly customisable Javascript-based environments that already provided map functionality. However, in the end, none of the tried possibilities could fulfil all my requirements.

I tried [Leaflet], [ArcGIS], [Cesium] and others.

Test with Cesium js
Test with Esri ArcGIS
Test with Esri ArcGIS
Test with Esri ArcGIS


As a consequence, I created several of these functionalities myself.

The setup for the basic scene consists of a spherical 3D object (mesh), to which CSS3D Elements are appended. On top of the spherical 3D Object, which is then turned transparent, a GLB model gets loaded. The coordinates for how to position the objects are stored in the Cargo tables. To find the right coordinates in the beginning I recreated the globe in Blender, positioned them there and then exported a list of all coordinates through Blenders Python console.

Positioning objects in Blender and using the Python console to export a list of coordinates.

The CSS3D Elements are rendered in a different way than the globe and GLB model. As a result, the globe doesn't obscure the CSS3D Elements on the back of it as you would expect it to.

Without further action this is how the CSS3D content gets rendered on top of the 3D Object.

This is why I had to write a clipping function to disable the display of content, that is not facing the viewer. I did so by comparing the coordinates of the Objects to the orientation of the cameras pivot point. I had to convert and clean up the numbers multiple times to do this. The "seam" of the globe where the values jump from 360 to 0 degrees was particularly challenging.

function inRange(x, min, max) {
    return ((x-min)*(x-max) <= 0);
};

function clipping() {
    var newY = camera.rotation.y;
    var newX = camera.rotation.x;

    var Ydegrees = THREE.Math.radToDeg( newY );
    var Xdegrees = THREE.Math.radToDeg( newX );
    if (Ydegrees < 0) {
        var Ydgr = Ydegrees + 360;
    } else {
        var Ydgr = Ydegrees;
    };

    if (Xdegrees < 0) {
        var Xdgr = Xdegrees + 360;
    } else {
        var Xdgr = Xdegrees;
    };

    for (let i = 0; i < alldivs.length; i++ ) {
        var content = alldivs[i];
        var Ycoord = allcoordinatesY[i];
        var Xcoord = allcoordinatesX[i];
        var YLlim = Ydgr+40;
        var YRlim = Ydgr-40;
        var XLlim = Xdgr+40;
        var XRlim = Xdgr-40;

        if (inRange(Ycoord,0,60)) {
            if (inRange(Ydgr,0,180)) {
            } else {
                Ycoord += 360;
            };
        } else if (inRange(Ycoord,300,360)) {
            if (inRange(Ydgr,0,180)) {
                Ycoord -= 360;
            } else{
            };
        };

        if (inRange(Xcoord,0,60)) {
            if (inRange(Xdgr,0,180)) {
            } else {
                Xcoord += 360;
            };
        } else if (inRange(Xcoord,300,360)) {
            if (inRange(Xdgr,0,180)) {
                Xcoord -= 360;
            } else{
            };
        };

        if (inRange(Ycoord,YLlim,YRlim)&&inRange(Xcoord,XLlim,XRlim)){
            content.style.display = "";
        } else {
            content.style.display = "none"
        };

        if (inRange(Xdgr,270,300) && inRange(Xcoord,270,300)) {
            content.style.display = "";
        } else if (inRange(Xdgr,90,60) && inRange(Xcoord,90,60)){
            content.style.display = "";
        } else {};

    };
};

What I found particularly exciting about the medium of the interactive map is how it is possible to switch between different levels of complexity through simple and intuitive user input. I wanted to use this to switch between different levels of information by zooming in and out. Therefore I wrote a function that hides and shows levels of content depending on the zoom level.

function mapzoom()  {
   var ZL;
   if (zoom > zoomtreshold1) {
      ZL = 1;
      zoombuttonone.classList.add("active");
      zoombuttontwo.classList.remove("active");
      zoombuttonthree.classList.remove("active");
      rotintervall = 0.1;
   } else if (zoom > zoomtreshold2){
      ZL = 2;
      zoombuttonone.classList.remove("active");
      zoombuttontwo.classList.add("active");
      zoombuttonthree.classList.remove("active");
      rotintervall = 0.07;
   } else {
      ZL = 3;
      zoombuttonone.classList.remove("active");
      zoombuttontwo.classList.remove("active");
      zoombuttonthree.classList.add("active");
      rotintervall = 0.02;
   }

   if (zoomLevel != ZL) {
      zoomLevel = ZL;
      const mapelem1 = document.querySelectorAll(".head1, .image1, .paragraph1, .link1, .human");
      const mapelem2 = document.querySelectorAll(".head2, .image2, .paragraph2, .link2, .website");
      const mapelem3 = document.querySelectorAll(".head3, .image3, .paragraph3, .link3, .references");
      const headelem1 = document.querySelectorAll("h1");
      const imgelem1 = document.querySelectorAll(".image1");
                
      if (zoomLevel == 1) {controls.rotateSpeed = 0.6;}
      else if (zoomLevel == 2) {controls.rotateSpeed = 0.3;}
      else {controls.rotateSpeed = 0.1;}
                
      for (var i = 0; i < mapelem1.length; i++) {
         if (zoomLevel == 1) {
            mapelem1[i].style.display = "";
         } else if (zoomLevel == 2) {
            mapelem1[i].style.display = "none";
         } else {
            mapelem1[i].style.display = "none";
         } 
      }
...

Highly condensed depiction of the Globe interface's development
Blender: 2D Vector to texturized 3D mesh to sphere with topography

Final Outcome

Final home (selection) screen of Make Inclusive Websites
Final Wiki of Make Inclusive Websites
Final Globe interface of Make Inclusive Websites
Final Fold Out interface of Make Inclusive Websites
Final UI Options interface of Make Inclusive Websites
Final Print interface of Make Inclusive Websites

[Thesis - Make Inclusive Websites]

[Home - Make Inclusive Websites]

[Forum - Make Inclusive Websites]

[Globe - Make Inclusive Websites]

[Fold Out - Make Inclusive Websites]

[UI Options - Make Inclusive Websites]

[Print - Make Inclusive Websites]

[Survey - Make Inclusive Websites]