Hover Animations

Screen Shot 2016-05-28 at 16.01.29

To improve users experiences on my website, I added a few animation using hover.css (http://ianlunn.github.io/Hover/). I added hover animations to the green buttons as well as to the icons in the ‘How To Use This Guide Section’. The charts throughout the weeks of the training guide also animate as they load. To develop further in the future, I may look into employing more subtle animation, possible for the text headings to further enhance users experiences.

 

Xcode – Map App

Screen Shot 2015-02-21 at 21.34.00Here is a screen shot of a map app that I produced, displaying pins for restaurant in Bournemouth town. To create this mini app, I used existing knowledge of arrays, variables, classes and images, butScreen Shot 2015-02-21 at 21.30.43 also learnt a lot about MKMapView.

Users can interact with the map view, zooming in and out to different locations and rotating the map. These interactive gestures help to make the app more appealing as users expect to use different touch screen gestures when experiencing different apps. When you click on a pin, the restaurant name, comment and image appears. I think it works well and if I was to develop it further I would go on to create more pins for different locations.

To set the coordinate of the pins, I had to get the longitude and latitude on the restaurants. I also made it so when previewed, the map automatically displays bournemouth. This save the user time in have to zoom in as otherwise it displays the whole of the UK. Thinking about the user experience is important as they will have expectations gained from using existing similar apps. I also set it so the pin drop is animated, although this feature is only small, I feel it benefits the apps. It is important to think about the little things that could help enhance a users experience, and animate could be a feature to explore further.

Here is the code:Screen Shot 2015-02-21 at 21.28.31

 

Here is the Restaurants class, consisting of variables and initialisers:

Screen Shot 2015-02-21 at 21.28.42

 

I feel that my xcode knowledge is developing over the workshops and I am learning some useful features. From this, I will continue to develop my skills as well as develop ideas for our group app.

Displaying Interactive Piece at Redweb

I had the opportunity to display my interactive project on Redweb’s window. My project was displayed for the week and proved to be successful with users. Passing by were interacting the piece, trying to obstruct the various falling shapes. Due to it being down a busy road, my project was noticed by many users and also made it onto Redweb’s website (http://windowreflections.redweb.com/):

Screen Shot 2015-02-11 at 08.05.28

I went down to get some pictures and videos of users interacting with my project. However, due to the sunlight and the bright light from the projector the images and videos didn’t come out as expected. Therefore, here is a visual of what it looked like to users:

redweb

Here is a screen recording of when I initially put my project up and tested it with the guys at Redweb:

Random people walking past the window, stopped and asked about the project and some choose to further interact with it. The project worked better when users were wearing darker clothing as this meant they appeared as more silhouette-like figures. The shapes did unfortunately get obstructed by the parked cars on the roads. To overcome this, next time I will look more thoroughly into background subtraction. Overall, I am pleased with my interactive project and I am happy with the outcome and the responses it received when displayed at Redweb.

Evaluation

Overall, I feel I successfully created a piece of interactive information design for the shared public space, which intends to elucidate/explain an idea or concept. I am happy with my final piece and felt that it worked well with the target audience (see users interacting with piece). I have learnt a lot by doing this project, both the programming side as well as following an iterative design process. The concept that my piece applies to is Surrealism, this concept interests me and looking at various surreal art work and photography really inspired me for my piece. I have used surrealist techniques in my piece such as the juxtaposition of falling objects, repetition of shapes, as well as ideas relating to the blurring boundaries between the real and imaginary. Throughout my blog, I have linked the theory modules that I have studied to my practice (media and history, and consumer culture) as I feel that this is important; it has developed my understandings and allowed me to use more theoretical analysis. I used an iterative design process to produce my piece, which allowed me to constantly gain feedback, and make improvements that have helped to make my end piece more successful. The iterative design processes that I followed were:

– Requirements Gathering
– Analysis
– Design
– User Testing

To view blog posts related to each iteration, then click on the individual categories. Throughout my blog you can clearly see the development of my piece: from learning the basics of programming, to watching tutorials, analysing existing examples, experimenting with various ideas, improving the piece, and finally to users interacting with my final piece.

Testing in Public Space

Here are the some videos of users interacting with my piece in the public space:

I feel that these show that my piece was successful in the public space as all users were easily able to interact with the piece without difficulty and they understood that they could use their body to obstruct the surreal falling shapes. I think that users enjoyed interacting with my piece and found it quite fun. The fact that multiple users can interact at once was good as it meant those that were more shy to interact could join others rather the interacting singularly. Also, those that didn’t wish to participate themselves were still able to see the piece. At the time of displaying my piece, the public space was fairly busy meaning I was able to get a fair few people to interact and many who watched the tv screen to see what was going on.

Barthes (1964 p.148) believes that

‘the birth of the reader must be at the cost of the death of the author’.

I feel that this can apply to my piece, as the power is given purely to the users. They are able to interact in any way they want, and without direction from me (author/producer), the users (readers) were able to understand my piece and seemed to enjoy interacting with it. It is the users that then appear on the tv screen of which passers by can see, meaning that they actually become a part of my piece. As mentioned in a previous post, Gray (2010 p.166) also suggests that

‘a text only becomes a text, only gains social meaning and relevance, at the point that it comes alive with its audience.’

This highlights how in order for a text to be successful then it needs to have an audience. I feel that my target audience seemed to enjoy interacting with my piece and users had fun obstructing the falling shapes in various ways. Some viewed the piece on the portable tv screen and asked questions, showing that they were interested and intrigued with the piece but maybe were too embarrassed to interact in front of others.

Overall, I am pleased with the end result and feel that my piece worked well within the public space. Next, I will go on to briefly evaluate my piece in relation to the brief, and discuss the iterative processes that I followed.

Barthes, R, 1964. Elements Of Semiology. New York: Hill and Wang.

Gray, J, 2010. Show Sold Separately: Promos, Spoilers, and Other Media Paratexts. New York and London: New York University Press.

Improvements – Mirroring Piece

An improvement I received when testing my piece was to mirror the video capture. It came to my awareness that at the moment it captures the video the wrong way round, so when users put up their right hand, on the screen their hand goes up on the left. This makes the interaction quite confusing which could deter people from interacting with my piece. I have found this improvement quite difficult to do and have had quite a bit of difficulty with the programming. Through reading online forums, I managed to gain some help from others who had similar problems. Here are the steps I went through and the various problems I encountered:

Screen Shot 2015-01-13 at 12.58.02To start with I managed to get my piece to mirror by adding this code:
Screen Shot 2015-01-12 at 12.23.50

This got the video capture to mirror but meant the brightness thresholding wouldn’t work correctly and so the video capture was in colour. This meant that obstructing the falling objects didn’t work as well as it was harder to detect the threshold on colours. Also, I felt that the black and white capture looked better as the coloured shapes stand out more.

As I was having difficulty, I decided to start my piece from scratch as originally I had used the brightness thresholding example. I felt that starting from scratch would help me to solve the problems easier as I would be writing out all the code step by step, in a way that I understood. I managed to resolve the problem by adding in videoMirror and a for loop to go through each of the video pixels. Then, instead of using the normal formula of x+y*width to access the array of pixels, I set it equal to [(width-(x+1))+y*width].

Screen Shot 2015-01-13 at 10.28.16

This flipped the video capture and the brightness thresholding still worked correctly. However, this caused the an error with the falling shapes. Now, when you put up your right hand to obstruct the shapes, it obstructs them up the left hand side. This meant I had to flip the shapes too, which I managed to do by changing the x co-ordinate of the shapes to (width-1-x).

Screen Shot 2015-01-13 at 13.04.08

Carrying out user testing with my family and friends was very useful and now my piece is mirrored correctly. This shows that I have followed an iterative design process as I created my piece, got feedback and then made improvements. I have learnt a lot more by carrying out this improvement, especially in relation to the advantages and disadvantages of hacking/programming. I feel that now I have programmed from scratch, my knowledge and understanding has advanced and I’m more confident with resolving any further problems I may encounter.  Next, I will go on to explore some other suggested improvements, such as adding more of each shape and altering speeds. Then, I will go on to test my piece in the studio room, capturing full body movement using a white screen.

Processing Forum, 2014. Mirroring a Webcam in a Sketch. Processing [online]. Available from: http://forum.processing.org/one/topic/mirroring-a-webcam-in-a-sketch.html [Accessed12 Jan].

Processing Forum, 2014. Flip the Video Capture on the X-axis.Processing [online]. Available from: http://forum.processing.org/one/topic/flip-the-video-capture-on-the-x-axis.html [Accessed11 Jan].

Silhouette Photography

A silhouette is…

“a two-dimensional representation of the outline of an object, as cutout or configurational drawing, uniformly filled in with black…” (Dictionary.com, 2014)

For my idea, I would like to capture people as silhouettes rather than in full detail. I feel this would help to encourage people to interact, as some won’t like being on camera. If the public space is busy, I feel that people may be embarrassed to interact with the piece so due to it not capturing full details of the person this could resolve this problem. I decided to briefly have a look at some silhouette photography and here are some that stood out to me…

ss2

s3

I think that in each of the photos, the silhouette really stands out, being very bold and clear, of which I aim for mine to be like. I especially like the bottom photo as it relates to the concept of surrealism. In the photo, the people have puzzle pieces as faces, this blurs the boundaries between reality and the imagination. They are hand-cut paper silhouettes, being held as if they are positioned on top of buildings and the pieces of the puzzle fit together, imitating people kissing. For my piece, I plan to have a white background, video capturing black silhouettes interacting with various brightly coloured falling objects. Next, I will go on to develop my idea by further experimenting with processing to develop my code.

1stWebDesigner, 2012. 60 Beautiful & Stunning Examples of Silhouette Photography [online]. Available from: http://www.1stwebdesigner.com/silhouette-photography/ [Accessed 13 December 2014].

Dictionary.com, 2014. Dictionary [online]. Available from: http://dictionary.reference.com/browse/silhouette [Accessed 13 December 2014].

TrendHunter, 2012. Surreal Silhouette Papercrafts [online]. Available from: http://www.trendhunter.com/trends/dreampapercut-by-dmytro-and-iuliia [Accessed 13 December 2014].