Application online

Here's my application online. I still need to change the play icon and some things are still a bit buggy.. loading is also slightly slow since it's on free hosting but in general it works! (This does not include the fixes mentioned in my previous post)

(Please give some time to load)

Interface fixes

Had one of my final meetings with my developer today. She's fixing the last few bits after I showed her some results from the case studies. This is what she will be looking at:

1. Changing the percentage of the time that a story will stay / change.
There is a 70% chance that the recorded story will keep going when the user clicks.
There is a 30% chance that it will change to another story.
The reason for this is that there are some stories that are quite long, and some of the users were listening to the story without interacting with the rest of the interface.

2. The parameters for the width and height of each video are going to be more extreme, now ranging from a minimum of 10 (% of the screen) to a maximum of 70. (Before these were set to 30, 50)

3. Since the user can now pinch to zoom in and out, sometimes when the interface is zoomed out completely, one can see the edge of the application and it is aligned to the left. Maria is going to try and centralise it.

4. Hiding the scrollbar using a Chrome plug-in.

5. Now that the water colours have sounds attached to them I'm going to give them a lower chance of coming up, something like 30%. This will avoid too many overlapping sounds that might cause frustration.

6. There doesn't always have to be a recorded story in the background.

7. Resizing and moving videos will not be available during the show but will be an option when the application is online (due to the touch screen multi-function).

8. Automatic refresh will happen every 30mins, otherwise the user can simply click F5 to restart the application from the beginning.

Source

Testing out the touch screen

Today I took the application to work to test it out on the touch screen. First of all I was very glad that the few people who have used it have spent quite some time playing around with it. I got comments such as "this is quite addictive" "it feels like a puzzle" and "the creepy sound makes you feel like something is going to happen to that little girl" (of course the sound has nothing to do with the little girl). Most people also commented on the aesthetic strength of the piece that was quite nice to hear. This was of course the beta version of the interface, so I'm hoping once it's updated it will be more enjoyable. 

The touch screen worked out fine except for the dragging / moving / resizing. I will either have to modify the code or play around with the touch screen settings. I might also use the multi-touch option that enables users to zoom in and out of the interface.

It's working!

So Maria spent three and a half hours here today trying to make the application work on Chrome using a local host (for faster browsing) and it worked!

I will be conducting the Case study on friday with my students.

A few things I wish to fix for August:

At the moment the videos are not auto playing. The problem with auto play is that the play action triggers a random generator, so the code does not see the difference between play and auto play. Consequently videos keep randomly generating before stopping.

Removing the play bar. The play bar looks slightly ugly and I would like for it to only appear on roll over. Once again there is a code conflict since the roll over already has an action attached to it, i.e. the user can move the video and resize.

I want the variation in the video sizes to be much larger. As one can see in the screenshot the videos vary in size but not much. I want the contrast to be bigger and therefore more dramatic.

A few more things: Play option is invisible when browser is full screened & localhost sometimes needs to be refreshed a couple of times in order to work properly.

I've also decided to only have one story on the screen at one go so the user is more focused on one thing, but can also see multiple videos at one go. This way there is not absolute confusion but rather a balance between order and chaos. I believe this will make the user want to find meaning rather than giving up completely. At the same time however there might be multiple sound effects going on simultaneously; these are the ones attached to the water colours.

All in all at the moment I'm just happy to see all the videos working together successfully.

Chat Reflective writing and interface updates

Yesterday during the chat, everyone had to critique my project and I got some really good feedback. I was glad that aesthetically the project seemed to be liked, although there was some confusion as to how it would work. This was expected since although I have explained it several times, it will only be 100% clear once I actually get it to work!

I have also received suggestions such as; using a chair to further immerse the audience and get them to stay for longer during the show and also using various monitors to display the interface. I'm thinking of how I can do both however it will be very difficult to use various monitors due to transport from Malta to London. I might also create a stand in Malta; made of planks of wood that can slide into each other, and paint it in London. This might make the monitor look better so it is enclosed in a minimal white space.

Later in the day, Maria, my developer came over and we were looking at different formats of how to export the videos and water colour. After endless tests, including uploading to youtube and downloading as .mp4 (since HTML5 only accepts ogg, mp4 and WebM) we found a good export and codec.

Maria, writing code

Basically we wanted a format that would be of a decent quality but also of minimum file size; basically not more than 50mb. The best solution was to put my original water colour, which was a 720HD, in a new PAL widescreen composition in After Effects. This was then exported as a Quicktime Movie, with an MPEG4 codec set to 70% quality. After this, it was converted using Miro converter, into an .mp4 file. HTML5 seemed to like this sort of file and the quality is quite good so we're using that.

At the moment I want to export all I have using this method so I can carry out a case study / focus group as soon as possible.

Reflective writing on chat 17/01/2012 + New Interface Ideas

Today we had an interesting chat about SOPA, content farms and the future of the internet, google and social networks as we know them. Osiris told us how companies like google have around 60% of the content that is generated by 'robots' through these so called content farms. Jonathan spoke to us about how the internet is trying to evolve by becoming more personalised and specifically designed to cater to individuals. I think he called these "wall gardens". We agreed that even though these spaces are safe and can be a teaching aid, it's nice to wander outside of them, and it's crazy to think that one might not be able to do this in a few years time.

Needless to say I am completely against SOPA and believe that censorship and limitation will lead us nowhere. It is true that internet is changing us, but we should evolve and adapt to this new life rather than bring the shutter down for fear of losing control and money.

Jonathan also introduced us to Net Vibes where we can see all the feeds to the MA DA course blogs; fantastic way of keeping track of what everyone is doing!

So that's a little about today's chat. This evening, Maria my awesome developer came over so we could discuss the interface a little bit. I had some issues with the fact that the user would have had to refresh every time in order to be introduced to a new chance algorithm. So we changed it and now each time the user carried out an action (Play / Pause / Drag / Resize) various things can happen. 0 - 3 videos can turn off or on. These videos can be either films or watercolours. (The watercolours will have a music layer attached to them). 0 - 15 chopped recordings might also play / stop. The recordings will not have a visual representation. I will have around 8 videos showing up on screen at one go. We also tried changing the background to black; this is good because the videos look better, like they are floating, but it's harder to see where to grab the handles to drag / resize. Just a quick screenshot of the test Maria did today:

Test videos on a black background using PHP / CSS3 and HTML5

Another video

Yesterday I started editing another video. Some parts work, others need reediting - especially the POV inside the chapel. The background sound is a bit too much but that won't really matter in the end project. This was filmed in the summer at a charity house where nuns take care of older nuns.

experimenting with interface look

Tests with videos & water colour

Testing out how the interface will look with both videos and water colour. At the moment I am only working with my exported videos (which might still be changed) but I think the water colours provide a nice contrast and a break from the videos. The top right water colour is my later experiment but I don't like the movement so it will need to be fixed.

Catfish & Interface tests

Short film review:

Two days ago I watched the film 'Catfish' which is more of a documented story. It's about a photographer from New York city who is tricked into thinking he is exchanging messages with a dancer who in reality is a middle-aged woman. He tracks her down, together with two of his house mates who also happen to be filmmakers. The films is  as 'real' looking as you can get since it is in fact a real story. Most shots are over exposed, badly framed, too long and offer no real drama, and yet the film keeps you hooked until the end. There is no real good and evil within the plot; some climaxes but only to a certain extent. In general, I found this film extremely interesting and relevant, in the way it portrays betrayal in the online world, but rather than making a drama over it, it is solved in a very natural and human way and no technology overload, yet still providing a fantastic outcome.

source: Imdb

Today I carried out some interface tests. In the final application I wanted phrases to 'trick' the user, however I wasn't use how these would look with the films. Today I did my first test (the graphic designer in me made me choose the overused helvetica neue as a first trial) and I was not too pleased with the result.

I tried two options: 1. misleading phrases. 2. phrases from the stories. I will need to rethink how they will show up because at the moment they are looking VERY cheesy. I might just forget about the phrases completely and perhaps make the films / water colours themselves clickable. More brainstorming needed either way

*** a few minutes later ***

Just trying out another experiment where rather than phrases I have pixel-like rectangles that are always moving around the screen (perhaps even the films could move around) anyway... it would look something like this:

less obvious, more abstract

A few more captures for testing

Reexported another video and tried out simultaneous playing to see how five videos would look together. Will definitely have to test with the moving water colours. So far so good although I have noticed too many face close-ups.

Testing with multiple videos at once

Tried playing four exported videos at one go to see how they would look. I'm quite pleased with the result and it's great to finally get a glimpse of the aesthetic of how the final interface will be like.

Interface

A few screenshots from my interface tests carried out by my developer Maria Each time you refresh, videos change size. Each video can be resized & full screened.

On a black background. Videos below are stored in the hosting rather than taken from youtube. Pros: Better layout (no borders) Cons: longer loading time.

Finishing the essay and thinking about interface design

http://mariacamilleri.com/moira/

I haven't really been updating my blog so often because basically I have been immersed in the essay. I am find it so difficult to stick to 3,000 words. So many details are being left out- although perhaps this is my fault for finding a wide subject to write about. Nonetheless, I still think I have a good argument and I still think there are plenty of things I can afford to remove.

In the meantime, my developer is finding ways of how to display multiple videos at one go. A couple of things we're discussing:

• I want this to be online so loading too many videos will be slow, therefore I have to restrict the number.
• For the show, for bigger impact I will host the website on my laptop and load a greater number of videos.
• If I display this on a touch screen, the area where the user will drag to make the videos bigger or smaller, or just move them about, will have to be better suited to fingers.
• The borders look bad so we will use a black background, black / transparent borders and when the user hovers, these will be highlighted.

The project is basically "An impossible quest for closure" and it reflects what I am writing about. There will be text on the interface which will give the user the illusion that it is trying to help them find a meaning. Instead this will simply play disjointed recordings, pieces of music, or refresh the page to reveal new videos. Maria, the developer also told me to consider changing the actions of the buttons (text) every time the page is refreshed. Therefore the user might see "What does this mean?" and click on it - only to refresh the page. "What does this mean" might not be there when he/she refreshes, but if it is - this time it might trigger a recording.

I will be compiling a reading list (because I'm afraid I will lose track if I don't!) and also update my Abstract.