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.

Design Methodologies

A methodology is a system of methods used in a particular area of study. It is important to explore different design methodologies in order to understand how the industry operates and to use the methodologies when producing our group app, in order to achieve a successful design solution. I will explore the outdates waterfall model, in comparison to iterative design, with a focus on agile methodologies.

Waterfall:

Waterfall_modelThe waterfall methodology was one of the first to be introduced. It is a simple, linear model that it easy to follow and understand. The model is fixed and doesn’t offer room for constant improvements and refinements. Therefore, it would not be useful to follow these methods as it is important that we regularly engage the clients to ensure their requirements are being met. As well as constantly thinking about the users and testing our app with the target audience before submitted it to clients. Following a waterfall methodology could result in the following:

mismatched_expectations

The illustration clearly explains mismatched expectations, hence showing the important of regularly having team meetings as well as meetings with clients in order to ensure that everyone is working along the same lines. From this, it is very important that we meet the clients requirements in our app and also to sustain users expectations.

Iterative:

iterative-model

 

This methodology is which I followed for the previous design iterations unit. It allows room for constant refinements and improvements to be made, and the cycle can be repeated various times, to produce a successful well developed end product. The testing stage in particular allows you to gain important user feedback, allowing you to improve on the product to enhance the users experience.

Agile:

Agile-Methodology

 

The agile methodology is an iterative model when designs are produced in incremental, rapid cycles. It is normally used when there is a short deadline and usually works best with smaller design teams.  It involves constant testing and engagement with clients in order to satisfy their needs and requirements, therefore avoided mismatched expectations show in the illustration above. This is a diagram to visually show the sprint cycles within agile methodologies:

scrum-overview-mark-hoogveldI feel that the scrum methodology is that which my team should follow for the production of the Magna Carta app. It will ensure that all team members are on track, continuously working to produce a product that will meet the expectations and requirements of the clients and users. I think that the daily scrum stand ups is something we could incorporate, as it will allow members to share how their work progress is going and any problems they are encountering. However, as we don’t have an dedicated office/room, the location would have to be organised in advance. Also, I feel that mainly stand ups could be held once/twice a week rather than daily as teams may not see each other every day at uni.

It is important to explore different design methodologies and I feel the agile methodology would be the best one to follow for this unit. Using methodologies would reflect the design industry and make our team more professional due to this project being a live brief. It is extremely important that team members each have a job role (programmer/designer etc) and I feel that by following an agile methodology, it will ensure that we are all working along the same lines in order to meet the users requirements and to produce a successful end product that satisfies the users.

Cheng, C, 2015. Why Scrum? Why Agile Development? [online]. Available from: http://calvinx.com/2014/05/22/why-scrum-why-agile-development/ [Accessed 10 February 2015].

ISTQB EXAM CERTIFICATION, 2015. What is Agile Model – Advantages, Disadvantages and When To Use It? [online]. Available from: http://istqbexamcertification.com/what-is-agile-model-advantages-disadvantages-and-when-to-use-it/ [Accessed 10 February 2015].

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.