INTERFACE DESIGN

A Creative Journal of how Freedom Hunter is created.

[juliekao]

JavaScript experiment & exploration

To achieve majority of the animations and interactions on the interface, I will have to manipulate DOM element by using JavaScript and Jquery. However, both JavaScript and Jquery are completed foreign ground to me. Therefore, I have begun the journey of researching, implementing and testing.

The challenge

The globe section is the most challenge part after al. Therefore, I broke the elements in this section into 3 parts and searching for the design solutions separately. 

-The map image

Initially, I was trying to find animated earth plugin. Such as http://webplantmedia.com/jquery/2012/08/spinning-globe-jquery-plugin/

http://sebastien.drouyer.com/jquery.earth-3d/

http://code.webplantmedia.com/globe/

However, within the limitation of my coding ability I could not get them working on the interface. Moreover, the visual style of those globes do not align with the visual design of my interface. Therefore, I decided to give up on having spinning globe and just having PNG globe image with the matching visual design to the rest of the visual elements of the interface.

- The arrow

See the previous post about the arrow development

- The pop up box

The most difficult part of creating the interaction for the pop up box is that I aim to have user’s mouse hover of the globe to show the box.

Initially, I was trying only use css to resolve the issue such as

            http://codepen.io/Pixelizm/pen/ICpKv

As result, those codes did not apply to the visual effect I was looking for. Eventually,  I found the coding solution as below. 

[juliekao]

Design Explanation- Stars

The number of human trafficking victims is incredibly larger; people can become the victims of human trafficking in the very small amount of time.  In this interface, I aim to dramatise this information and present it in the way that information be easily read and received.

In this section, I decided to use real time counter to calculate the number of people who has become the victims of human trafficking in the time that user has spent on the site.

The user is most likely to engage with the information when some parts of the data is relevant to them. In this case, data is no longer only a larger amount of number, but calculating the time user have spent on the site allows data to have connection with the user .   

[juliekao]

Design Explanation- Animated Graphic Element 

In this section, I intended to create the look of an interactive paragraph, which helps user to be more engaged with the textual data.  To achieve this visual impact, I chose to display percentage by using css animation “Keyframe” to move the icon from one side of the interface to the other along the with textual content.  

Having animation can easily catch user’s attention, therefore having an animation moving the same direction as the reading direction is my aim to guide the user to read through those textual content. As the mentioned in the previous post ,  animation can be the guide to the user. 

[juliekao]

Design Explanation- The Globe

In order to presents content in a way that enables the user to explore multiple layers of data and impose the purpose of the interface. In this section, I choose to present the location data with two globes and having animated paths going across two globes to present human trafficking route. Therefore the locations and routes is no longer just textual information; Moreover, presenting one route each time, it avoids the issue of information overload, and text heavy. Without having information disruption, the user is most likely to receive useful data.

Once the user hover on the globe, more details are shown in the div below the globe.  Using yellow as the background colour of the div is to allow the box stand out from the elements in the section and it also creates the look of a  sticky memo.

[juliekao]

Content presentation development

In the project proposal, I have most the textual contents align left. However, when I finished adding majority of textual and visual content and having section attached to each other, I realised the incoherence between my visual content and textual content.

Therefore I began the visual experiment and exploration of finding the best alignment between sections.

Version 1

In version 1, section 1 feels slightly detaching from the other sections. I figured the reason could be the colour, they aren’t cohesive colour across to section, also the textual content is presented in the very different way.

Version 2

To adjust and improve the visual coherence, I centre aligned the text in the first section and also changed paragraph font into the smaller font size to match up with the font size in section1.   

After the adjustment, sections style section more cohesive. When scrolling through section, the contents also look more aligned. 

[juliekao]

SVG Experiment

One of the benefits of having SVG in an interface is that CSS and JavaScript can be applied onto parts of a SVG image. SVG can be transformed into an animation or interactive element.

In the second section of Freedom Hunter interface, I aim to have path animations going across two globes.

To achieve the visual effect, I first tired to use, GIF to present the animation.

However, GIF animation doesn’t go smoothly and it also lose the clarity when the viewport is larger.

Therefore, I moved into a very foreign ground of creating SVG path animation by following tutorial on CSS-Trick “Using SVG” and “How SVG Line Animation Works”.

Challenges

Although SVG stands for Scalable Vector Graphic, SVG can be a difficult format to be responsive: vector images does not adjust themselves to the size of the viewport by default.  

After researching and testing, I found the solution by following the tutorial on “Make SVG Responsive” which have solved the issues of SVG not being responsive. 

[juliekao]

Iterative design process

During coding, I have been following the iterative design process to develop the interface.  

At the stage of creating sketches and mock-ups, the animated elements and interactions could only be described or imagined. Therefore some design decisions may not be effective and or user friendly.

Those issues often only appear after implementation. However, having to evaluate those interactions and animated elements after coding, design decisions can be improved by making changes and fixing those errors.

For instant, when I completed coding animations in all sections. I realised that all the animations has been loaded once the interface was opened. Instead of seeing the motion graphic, user only can see the last frame of those animations, which lose the purpose of having animations on the interface. Therefore, I went back to rethink and redesign the way of handling animations and having animations running only when elements are in the viewport. 

[juliekao]

Effective data visualisation

One of the components of creating a excellent interface, it’s to have effective data visualisation. During in the implementation stage of the design process, I identified the few issues and reorganised the order of the sections.   

Initially, the stars section was located right below the video to present the time that users have spent on the site. During coding, I realised the user don’t often spend over 30 seconds on the first section (auto play video). When the user scrolls into the stars section, the stars weren’t yet to appear. It was only an empty canvas, which presents no meaning to users.

To resolve this issue, I moved the stars section to the second last section of the interface, before the “calls to action”.  Therefore, user will have already spent more them 30 seconds on the previous sections. Once the star section scrolls into the viewport, the user can see the star has already began to appear on the canvas and receives the information regards to the fast increasing number of human trafficking victims.

[juliekao]

Create full screen background video

In order to convey message of the cruelness of human trafficking, I recreated a black and white video from a short film “The Journey” as the background for the first section of the interface. The video carries out the frightening and intimidating parts of the human emotion during human trafficking.

Presenting the full screen auto play video to users, users can receive the information with the minimum barrier. On the downside, the fast moving motion from the video could cause the text at the front of the video become too difficult to read.

Therefore, I found the solution of having the invisible button across the view port. If the user is not comfortable to watch the video or wanting to stop the video, the user can simply click on anyway on the sections. The video will pause, and fade into a darker shade of the paused video and the white text will appear.

The pause button allows the user to interact with the video to receive and  understand the insight of the video by reading through the textual content.

Coding difficulty

The most difficult part of implementing this section was to have the content and the video responsive. In the early development of this section, often the video was unable to fill the entire viewport when the html was loaded in different view port width. This issue has overcame by styling the <DIV> position: absolute; top: 0; left: 0; height: 100vh.

Coding Resource

http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video

[juliekao]

Ideas.

[juliekao]

Visual Aesthetic

As mention previously, the functionality of the interface often define the visual aesthetic and characteristics of an interface.(look up previous post: http://juliekao.tumblr.com/post/114828854871/polaris)

In this project, I will be focusing on promoting the severity of human trafficking by using elements with strong visual impact. 

I would like to create an clean and minimalist style interface, that user can receive informations without many noise resources.

Example as...

[juliekao]

Information Architecture

In order to decide the layers of the interface, I have divided informations and datas in two layers.

Surface layer (the layer is shown without audience action)

The amount of people who are involve in human trafficking

The amount of people who have been trafficked across border every year

80% of Human trafficking victims are female 

50% of Human trafficking victims often under age of 15. 

In-depth layer (the layer is shown when mouse click or scroll) 

the countries of the victims 

the countries of the victims were sold into 

the form of Human trafficking such as domestic service, sex trafficking, Force Labour and child labour. 

[juliekao]

Data visualisation

 In order to make personal connection with audiences,I am trying to find some other data which maybe closer to audiences. Using the “ closer to user data” to show how may times more are equal to “numbers of people how has involved in human trafficking”. which works like this....

Population in Queensland * 6.8 = People involve in human trafficking globally 

I will draw 6.8 times of Queensland map....

However, in this case some audiences can be excluded from the visualisation which defeat the initial purpose of making connection with audiences. 

[juliekao]

How to raise the awareness !?

In this projects my aim is to show the severity of the human trafficking and empowering the human equality and freedom. In order to do so, there are two major elements that I want to use to raise the awareness of human trafficking.

Present visualised data 

Human trafficking have some unbelievable data which could present the severity of this issue instantly. such as..

- 27milions people how has involve with human trafficking

- 800,0000 victims are going across international boarder every Year....etc...

Present scenario    

In order to create connection with the audience, I want to create the scenario of what would be like not having the freedom, how does people involve in human trafficking. An example like this.

[juliekao]

Polaris

Polaris is also an U.S. National Human trafficking resource centre. Polaris has very different visual aesthetic to the other two interfaces was mentioned previously. Both End Slavery and Not For Sale use the parallel scrolling effect to present sections. Instead, Polaris used the horizontal menu on the top of the page and maintain content within a screen space.

However, the functionalities of the Polaris is also slightly different to the other two interfaces. Polaris have large number of data and in-depth research as contents.  Instead of using the data to promote the issue, Polaris has more focus on the data itself and finding solutions.Therefore, Polaris also provide more precise information and data. Which has been presents mostly in line graphs or pie charts.

Comparing those interfaces, I recognised that defining the purposes and audiences of each interface has strong impact on the data presentation and visual aesthetic.  

Resource: http://www.polarisproject.org/

[juliekao]

End Slavery Now

Colour selection

End Slavery Now used red as the colour for majority of the important messages on the interface. In the Westend society, we often associate red with danger or warning. By using red on the interface, user would have the instant idea of what this interface could be.

Using Icons

On the End Slavery now, pictograms are used to represent the form of slavery, therefore users can recognise the different forms of slavery without having the read through the text. By using that Information architecture, users can click into each sections to understand more to the detail, In this way, for the users can have the choice to have the basic understanding or the in-depth knowledge.

I recognised that majority of the human trafficking promote the issue by two elements:

Number-the number of people who are involved with human trafficking are unbelievable large, by presenting these number.

Visualise the scenario of the Human trafficking-The scenarios of Human trafficking often present in the forms of videos, photographs or icons.

By using those elements audience can recognise the severity of Human trafficking fairly instant.

[juliekao]

NOT FOR SALE

Not For Sale is one of the anti-Human trafficking organisation. There are some excellent elements were used in this interface as below. 

Telling stories and making connections with users 

This is interface uses full-widths image, which take out most of the home page space. This can draw majority of user attentions onto the image and through the image users get know the stories of this interface 

Further analysing this chosen image 

The Image has definitely chosen for reasons, The primary contents in this image are number of women. By those women who are presenting smile and joy, the emotional of the image has also delivered. The space they are in, which is an industrial kitchen setup may further the explicit of the context. This interface is communities related and maybe empowering females. By using this image as the forefront of the interface. User would have the basic understanding of NOT FOR SALE.  

Firm Typefaces & Firm Idea. 

 The Typefaces were used on the image are upper-case/sans-serif/bold/centre alignment, which present sense of strong and firm. 

Using icon to avoid text heavy 

Not for sale also use the icons to present different services they provide as an anti-human trafficking organisation. The Larger scale texts also describe what they meant. This part of interface has well using the Information architecture, allowed user to know the surface part of the services or click into those icons to know more about it. 

Those are elements of this interface I think it’s great to learn from. 

Resource:http://notforsalecampaign.org/human-trafficking/