Development & Final Prototype

From the feedback provided from the crit, I have developed my final prototype.

A way of improving my designs was by incorporating a digital interface instead of a poster along with a developed acetate viewing tool. I started re-designing the interface by choosing one subject to look at, Brexit. I chose Brexit as its a current matter and there are large amounts of information, whether that be a timeline of events or things that are being said by Parliment.

I chose to design a series of key events within four interfaces. To understand the structure and order of Brexit, I created a timeline of events..

Creating a timeline has allowed me to point out, what I feel are most important moments, from the start to the present day.

I have decided to create an interface for the following:

• Parties promoting their manifestos
• Statistics of the leave to vote percentage
• Change of Primister
• Rejection of Brexit deal (present day)

All of these points will be contextualised further within the interfaces.

To apply interaction, each interface will provide a series of buttons which informs the user of other information that is important to that time. I have used XD and Photoshop to produce these designs.

• 

• 

• 

• 

• 

• 

• 

• 

Additionally, I have developed the acetate tool which allows the user to view both images. Based on the feedback from the crit, it was suggested to add text to inform the user of how the object is used.

I also realised there were things that could be improved, size being one of them. I have reduced this as if feel it was too big, especially due to it being used for the eyes. I have also added text.

• 

  
  

• 

Now that I had developed my designs based on my feedback, I thought it was only necessary to conduct some testing on the corresoponding platform.

On an iPad, I was able to use my design and gather feedback from my peers, as well as test the acetate tool.

Testing allowed me to gather more feedback which I could apply again and develop this into a final outcome.

I improved this again with the following feedback:

• Make buttons clearer and more noticeable
• Move disclaimer onto a separate page, not noticeable
• Make the tool slightly bigger
• Add a click signifier
• Reduce the size of the text
• Center text

For the final time, I responded to the feedback and added to my designs and tool.

Final Interfaces

• 

• 

• 

• 

• 

• 

• 

• 

Acetate tool:

• 

To the tool, I have increased the size slightly and reduced the size of the text and centred it

Through both the interfaces and the tool, I was able to combine the use and ascetically together through design and the subject, for example red, white and blue being the colours of the United Kingdom.

Crit

I have chosen to look at different subjects to how a wide variety of images can differ when using this effect. 

Crit

This slideshow requires JavaScript.

From my crit, I received some suggestions and feedback from my peers:

• Make it more personal
• Link the stories to key events during our like rather than historical events to make it feel more personal 
• Possibly using all for 4 images altogether to form a greater story
• Could be in the form of a film
• Could be in other physical forms, such as an object

I would like to put some of these suggestions to practice to see how I could possibly develop my prototype further. 

Prototype Introduction

I want to create my prototype in a physical form. As a test, I decided to print out an anaglyph I created previously to see if it still works on paper, as expected, it did. 

• 

• 

• 

Using the red and blue acetate, I decided to experiment with placement. 

• 

• 

I also tried with cubes to see the effect it plays on objects

• 

• 

• 

Double Exposure Experimentation

During our previous studio lesson, I presented an initial experimentation based on the double exposure effect. During this presentation, I received some feedback and suggestions:

• Look at how different colour backgrounds affect the double exposure effect, for example, dark mode and colour shift 
• Integrating messages through encryption
• Grids – testing the limits we see on screen
• Simplest image vs the hardest to see
• Add narrative  
• Different proportions/ perceptions – diagonally, varifocals, polarizing
• Animation – zoetrope
• Old TVs – video feedback – a flicker of light through images

Dark mode 

Colour shift 

3D effect 

Representation of how the double exposure effect works with red and cyan 

Colour Mixing

Following on from colour theory I looked at Subtracting and Additive mixing, due to my own interest in CMYK and RGB colours. This informed not only what platforms that can be used for but how their mixing processes work

I wanted to sue these mixing methods to produce a prototype, through an Anaglyph, double exposure 3D Effect.  

I used photoshop and this blending options to create this. 

• 

• 

Moving Direction: Colour Perception

I was having difficulties in the development of prototypes within my previous interest, colour blindness due to how specific the subject is. I found colour blindness as a research project was very interesting but extremely difficult in producing new examples/prototypes.

I need to move directly from colour blindness, after receiving some suggestions from my peers, I thought it would be interesting to move onto the colour perception. 

I began by looking at the basic role of colour perception and how it works within a human eye. From here I thought it would be best to look into the basic colour theory to inform how primary, secondary and tertiary colours work.

Experimentation of Social Media

Based on the research discovered in the previous post, I found that not a lot had been done to help colour blind people view images that are uploaded on Instagram. From this, I have created a plugin that will not only help colour blind people but educate non-colour blindness people on the viewing experience. 

Experimentation

a plug-in that allows Instagram to be accessible with colour blindness

Social Media

I have found difficulty in designing or looking further into colour blindness due to how specific the subject is. There are many ways that people have already designed for colour blindness, I was not able to find unique need or information that could could have me develop or create something new. Also, as I am unable to contact a colour blind person, I was assuming many ideas or views that could possibly be incorrect. 

As another route that still links I decided to look at social media, and how images or items can affect a greater amount of people, with or without deficiencys. My research led me to the ‘The Dress.”

The Dress

‘The dress’ was a photograph that became a viral hit in 2015. People disagreed on whether the dress was white and gold or black and blue.

There are differences in opinions on how the human brain perceives colour, and chromatic adaptation. Some people believe that it has a connection to how the brain processes the various hues of a daylight sky.

The study, which involved 1,400 respondents, found that:

“People either discount the blue side, in which case they end up seeing white and gold, or discount the gold side, in which case they end up with blue and black.”

• 57% saw the dress as blue and black;
• 30% saw it as white and gold;
• 10% saw it as blue and brown;
• 10% could switch between any of the colour combinations

I was also interested in how social media, such as Instagram an Facebook use accessibility and colour deficiencies to help accommodate all types of people.

As a response to this information, I decided to experiment with Instagram and the different types of colour blindness to see how the deficiency may change how the application looks, in terms of the images. 

After showing it to my peers, I do realise, that this may have not been the best way to show the differences due to the bright coloured background. 

I have improved on this design further to make it clearer and understandable.

IMAGE

Instagram’s visual accessibility

• Zoom-in feature on mobile devices that allows users to zoom in on photos
• Use of a white background rather than a coloured one 
• Introducing automatic alternative text, which lets you hear descriptions of pictures when using Instagram with a screen reader. 
• Own alternative text. When posting a photo, you’ll be able to go into the Advanced Settings and add your own alt text, which can be heard when using a screen reader.

There has been speculation why this some features, such as the alternative text have taken a while to get on Instagram as other social networking sights, such as Facebook were able to produce this two year before the announcement of Instagram. 

Facebook visual accessibility

Facebook is blue because Mark Zuckerberg is colour blind. Zuckerberg is red-green colour blind

• Facebook adds machine-generated alt text automatically.
• Addition of descriptive text along with pictures that you post to Facebook
• There are two options for adding captions to videos on Facebook.

Testing Sim Daltonism

Whilst researching and understanding colour blindness, I came across a mobile and laptop application, Sim Daltonism 

From the perspective of a colour blind person, some colours are impossible to distinguish. Sim Daltonism lets you visualise colours as they are perceived with various types of colour blindness.

Move the Sim Daltonism window over something on the screen and see what it looks like with a colour blindness. With this app, you can check the accessibility of websites and other user interfaces, make your visual designs better for colour blind people, or just play around to better understand how various colour blindness types affect colour perception.

Testing on macOS

I wanted to understand how the app works, I have shown in a series of image how you can interact with it.

As a non-colour blind person, I assume that the application works well as well as how it functions. The app itself works well as it allows you to interact with the desktop with the app as an overlay and the app targets all types of colour blindness which allows for users of all deficiencies to use it. 

Testing of iOS

Sim Daltonism also has a mobile application. I wanted to see the difference and similarities between the desktop and mobile versions. 

The mobile app was very different from the desktop version. The desktop version allows for interaction within the window of the app, whereas the mobile uses the camera to view different types of colour blindness through life. Once the type of deficiency is selected, you can move the camera around to see how it would be view with a person with that specific type of blindness. I was quite surprised to see how different each application was to the other, I assumed they would work in the same way just on different devices. 

I decided to email the developer all the way from Canada, Michel Fortin and ask him a set of questions on the application. Within 48 hours I received his answers. 

Interview with Michel Fortin

Q. How did you conduct your user research and testing?
A: I didn’t do any user research, and for the most part I tested it myself. This is a small side project for me. 

Q. How do you measure the accuracy of a colour blind person for your app?
A: I did not test for accuracy myself. I reused a color
 filter algorithm developed by a non-profit called the Human-Computer Interaction Resource Network (which sadly does not exist anymore). The algorithm is part of the Color Laboratory found here: http://colorlab.wickline.org/colorblind/colorlab/ 

I got feedback from users and people doing vision research telling me it was good, but that was unsolicited and post-launch.

Q. How did you decide which features to add to your app?
A: I received user feedback about how they wanted it to in the Mac app and took that into consideration to make a version 2. I got a request for taking a picture and sharing on iOS so I implemented that. Basically features are added following user requests and what I can do within the practical limits of the Mac or iOS environment and time constraints.

Q. Is there a further stage of interface design and development for your app?
A: Nothing planned at the moment other than the necessary maintenance to keep the app up to date.

Q. Can you give an example of the challenges of migrating an app from one platform to another, i.e mobile to desktop.
A: The Mac and iOS version are pretty much two different apps that just happen to share the same filter and the same name. I did not really think of it as “porting” from one to another platform. It was more the idea that I could do something else by applying the filter to the iOS camera, and so I did a camera app. The hard part was making the camera app, not porting the filter.

A: That said, the old version of the filter for the initial Mac version wasn’t performing well enough (it was struggling even on a Mac, so not really adequate for mobile devices). I had to rewrite the code so it does calculations on the GPU instead of the CPU. Now it’s running much more smoothly on both platforms. It’s still the same algorithm though.

Q: Do you think there is a possibility of colour blindness being cured in the future?
A: I don’t really know. I don’t see how it could be done.

Q. Why did you create this app?
A: It all began with a user request. Someone saw another app I made that affects the colors on screen and asked me if it was possible to do something to simulate color blindness. It couldn’t be done using the same technique, but it looked like a fun project so I built something.

A: Version 2 (on Mac) and the iOS version exist mostly because I built this other app called Red Stripe (again following someone's suggestion). One year later, I used the code from Red Stripe to create a better Sim Daltonism.

Q: Is there anything you would like to say that I have not suggested?
A: I wondered if in your questions you'd ask if I was color blind. I am not. Perhaps it'd have helped me validate the app, or perhaps it'd have made things more difficult. I wonder sometime, but I'll never have the answer to that.

From this interview, I’m not sure if it was the response I was hoping to receive as I wasn’t able to point out many ideas or poitns that could help in the prototype or experimentation of colour blindness. 

Experiementatio​​n of Ishihara Test

Based on my research I discovered previously, I was interested in the way the different types of colour blindness can adapt to a page. 

Experimentation

Combing classification design plate, taken from the Ishihara Test & a digital interface to inform users on the viewing effects for the colour blind.

Using one of the most common types of colour defences, Protanopia, and its corresponding colours I redesigned a known website, Apple. I have chosen to go with this website as its well known and provides a good layout which colour blindness can have an advantage to.

As for the creation of this visualisation, I was able to gather the fonts from Xd Apple iOS Design UI kit and use Xd for the creation of the home screen, and photoshop to edit the main image, the iPhone to the correct colour.

Overall I feel I was able to produce a visualisation that showed understanding of this type of blindness, however, I was going from assumptions as I have not been able to contact a colour blind person, yet.  

Feedback from my peers:

• Could possibly re-design the stock market 
• Create a fake website – focus of specific design elements, eg. the hamburger menu
• Contact a clour blind person

I will take this feedback and build upon it within another design. 

Colour Blindness

Ways to detect colour blindness 

Ishihara Test

Plates 6 & 42

The Ishihara test published in 1917, is a colour perception test for red-green colour deficiencies, the first in a class of successful colour vision tests called pseudo-isochromatic plates.Each plate contains a circle of dots in a random colour and size. Within the pattern are different sized dots which form a number or shape visible to people who have normal colour vision. It will invisible or difficult to see, with a red-green colour vision defect. A full Ishihara test contains 38 plates, but decreeing the colour blindness deficiency is notable only after a few plates. 

The plates are made up of different test designs;

Demonstration plate: usually a number designed to be visible by all people, who have normal or colour blindness. For demonstration purposes only, and usually not considered in making a score for screening purposes.

Transformation plates: individuals with colour blindness should see a different figure from than normal colour vision.

Vanishing plates: only individuals with normal colour vision could recognise the figure

Hidden digit plates: only individuals with colour vision defect could recognise the figure

Diagnostic plates: intended to determine the type of colour vision defect  and the severity of it.

Due to the test being printed on a plate, the level of accuracy depends on the location and the lighting. For most accurate results “a daylight bulb illuminator is required.” To provide proper testing, users should be only given three sections per plate as well as an answer. Using a random sequence is the best test to give as it stops memorisation.”Since its creation, the Ishihara Color Blindness Test has become commonly used worldwide because of its easy use and high accuracy. In recent years, the Ishihara test has become available online in addition to its original paper version. Though both media use the same plates, they require different methods for an accurate diagnosis.”

Colour Arrangement Test

The colour arrangement offers advanced analysis of the severity and type of a person colour blindness. “This test differs from the Ishihara test style as it uses vector mathematics to plot and interprets your results, offering a formulated method of determining the type.”To take the colour blindness test, arrange the colours in order along the line.

Colour Arrangement Test

Colour Blindness​

What is colour blindness?

Colour blindness is condition lose their ability to determine colours. Women are less likely to have this disease when approximately every twelfth man is prone to it. The perception of colour starts entering the eye and begins to stimulate one of three cones (receptor cells within the eye).

Red/green is the most common type of colour blindness and most people are affected by this. By having a red/green deficiency, it means a person will mix up colour which contain red and green or a whole items. “For example, a red/green colour blind person will confuse a blue and a purple because they can’t ‘see’ the red element of the colour purple.”

The most likely cause for colour blindness is genetics. But occasionally, it can develop later on in life.

• Through health conditions, such as diabetes, glaucoma, age-related macular degeneration and multiple sclerosis
•  Side effects from medication
• Exposure to harmful chemicals
• Age – as people get older they find it difficult to distinguish colour

How does it work?

When all three cones are working properly, we have “normal vision”. However, differences in how sensitive these cones are to light, or for people who have fewer than three cones, results in a range of different colour vision deficiencies. Colour blindness is most commonly passed on through genes and inherited from a child’s parents and there from birth. However it can develop later on in life. People are able to live with colour blindness, and is not serious.

Types of colour blindness:

• Deuteranopia – cannot tell the difference of red – green hues.
• Deuteranomaly – difficult to differentiate between red and green hues
• Protanopia – removing the ability to see reds
• Protanomaly – lowering sensitivity to red hues
• Tritanopia – no ability to distinguish some blues with green, and some yellows with violet.
• Tritanomaly – reducing the ability to distinguish some blue and yellow hues.
• Monochromacy – cannot distinguish any colour

Difficulties with colour blindness

Colour blindness isn’t a serious deficiency, people are able to adapt to it easily over time. But it can cause various issues:

• Difficulty at school if colours are used to help with learning
• problems with food, such as identifying whether meat is fully cooked or whether the fruit is ripe
• Getting medications confused if they’re not clearly labelled
• Trouble identifying safety warnings or signs
• Slightly limited career choices – certain jobs, such as pilots, train drivers, electricians and air traffic controllers, may require accurate colour recognition