Design Guidelines

As we are producing our app for iOS devices (iPad, and possibly iPhone), it is important that we look at Apple’s iOS development guidelines. This ensures that the app we produce would be suitable for the iOS market and that it adheres to conventional iOS themes. ‘Although crisp, beautiful UI and fluid motion are highlights of the iOS experience, the user’s content is at its heart’ (Apple 2015). We plan to create a simple and well designed information based app that will allow the user to quickly and easily access relevant content related to Magna Carta. After reading through the iOS developer guidelines, we picked out some of the most important iOS themes to consider in our app designs:

  • Translucent UI elements – we could consider this so that when users taps on a clause, a translucent overlay appears with more information regarding the selected clause.
  • Use of negative space – it is important that we use plenty of negative space within our app in order to make it clear and easy for users to understand. We have to consider not putting too much information over the Magna Carta image as it could easily be overwhelming for the user.
  • Simple colours – using the Cathedral’s style guide, we will use their chosen colour scheme in order for our app to be consistent with existing products.
  • Ensuring legibility – we will use the font suggested by Salisbury Cathedral (Eidetic), at a suitable, easy to read size.

It is important to also be aware of the basic UI elements in order to help us make further decisions about the design of our app.

screen-shot-2015-04-08-at-16-14-41.png

  • Bars (navigations/tab) – contain contextual information that tell users where they are and controls that help users navigate or initiate actions.
  • Content Views (collection/table views) – contain app-specific content and can enable behaviours such as scrolling, insertion, deletion, and rearrangement of items.
  • Controls (buttons/sliders) – perform actions or display information.
  • Temporary Views (alerts/actions) – appear briefly to give users important information or additional choices and functionality.

Using conventional iOS gestures is also essential and something we need to consider when creating the design of our app. ‘Using gestures gives people a close personal connection to their devices and enhances their sense of direct manipulation of onscreen objects (Apple 2015). Some of the common iOS gestures that we could incorporate into our app include: tap, drag, flick, swipe, pinch, and double tap.

It is also important to use Apple’s built in features (UI elements and gestures) due to the time constraints we have to make the app in. Given our current skill level, it is essential for us to stick with what we’re familiar with and are being taught so that we can produce a fully functioning, and hopefully aesthetically pleasing app before the deadline. Creating our own UI elements can be far too time consuming and difficult for us, and will only be done if it is essential for the app to function.

Here is Salisbury Cathedrals Guidelines that we were given. We will adhere to these within our app through using their chosen colour scheme, fonts and existing graphics. This is important in order for our app to be consistent with their existing products for the Magna Carta exhibition.

From this, we will go on to create some initial designs for our app taking on board the above Apple and Salisbury Cathedral guidelines.

Reference:

Apple, 2015. Designing For iOS [online]. Available from: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ [Accessed 6 April 2015].

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].

Testing in Studio

Today I tested my interactive piece in the studio room, W119. There was a white board and white projector screen available which I was able to use for the clear background. From testing the piece, it allowed me to see if it worked properly, as well as to see if there are more improvements that can be made. Here is a video of me testing my piece:

As you can see, on the screen I was captured as a black silhouette as planned. However, the background wasn’t entirely clear as it picked up the edges of the board and screen. Therefore they came up as black blocks/lines and obstructed the shapes from falling. To fix this problem, I need to ensure that the screen I use is big enough in order to fill the width of the camera. As you can’t entirely see the screen, here is a screen recording of the test:

From this, I feel that I need to edit the speed again to make the shapes fall faster. I also think I need to edit the size of the shapes more so that there are some bigger ones rather than them all being small. The programming works as expected as when the shapes are on a white pixel the descend and when on black they ascend. By carrying out prior testing, it has allowed me to further improve my piece to make it more suitable and successful. I am pleased with the outcome and will make further amendments so it is ready to display on the public screens in Weymouth House.

Public Screens in Weymouth House

I went to the public space and analysed which public screen to display my interactive piece on. This is important as the screen it is displayed on can alter how successful it may be. I looked at which screens stand out more in the public space and what size screen would work best for my piece. As well as thinking about where I would position a camera and white screen. Below I have analysed each screen in relation to the public space to evaluate which would be most successful to display my interactive piece on…
20150114_145309

Screen 1 – I feel that these screens would not be suitable for my piece due to their being six fairly small screens. Also, due to the layout of the space, there is a seating area and a white post obstructing its view. I feel there wouldn’t be enough room for users to interact with my piece and feel that these screens are a bit segregated from the main public space. Not many people walk through between the seating areas so I feel my piece would not be successful here

20150114_145130

 

 

Screen 2 – These double screens are situated at the front entrance to Weymouth House. The screens are a good size for my piece and there is a large area around in which users can interact. People walk past the screens when going in and out of the public space, so I feel my piece would be fairly successful in this location. The automatic doors are opposite, which could obstruct the falling shapes so I would have to put a white screen up a few metres from the screen. I would have to ensure that this doesn’t block the entrance and people can still freely access the space.

20150114_145209

 

Screen 3 – These double screens are location opposite costa in the main path through of the public space. I feel that again they are a good size for my piece and feel they are the most noticed screens. Due to Costa being in the background as well as numerous posters on the walls, I would need to put up a white screen. This could be positioned a few metres from the screen, near the table. This means the screen would be more out of the way and doesn’t block peoples walking path through the space.

20150114_145527

 

Screen 4 -This single screen is located in between the lifts at the rear of the public space. It is a suitable size but I feel it is slightly isolated from the main space. People waiting for lifts may interact but that may only be for a short amount of time until the lift comes. I feel that this screens isn’t that noticed and think that my piece would not be that successful if displayed here.

 

I have decided that the screen I will display my interactive piece on is screen 3 (opposite costa). I think it has the best location in the public space and is the most noticed screen. I feel my interactive piece would work best in this location as it is in the main path through the space so there will be lots of people to hopefully interact with it. I feel it is also in the best location to put a white screen up as it won’t block the pathway and cause any obstructions. Analysing each of the screens is useful as it has allowed me to evaluate where my piece would be more successful. I feel it is very important as the screen choice can alter whether a piece is successful or not. Next, I will continue to make improvements to my piece and then test the final piece on my chosen screen.

Poster in Public Space

We put our poster up in Weymouth House to see how many people noticed it and any comments they had about it. We put our poster on the automatic doors – the entrance to Weymouth house as we thought it would attract peoples attention as they walked in. We also put it on the orange wall next to another groups poster to see if people notice it more if it was grouped with other independent posters.In a 15 minute period from 12:45-13:00, we spotted 17 people looking at our poster. We also received some comments about it:

  • 20141016_130333“What does20141016_124349 it mean?”
  • “I didn’t even notice it”
  • “I glanced at it when passing, but it didn’t mean much to me as I was in a rush”
  • “Wow look at all of these poster “
  • “Thats quite white”
  • “It has a strong clear message”

The importance of doing this, is that it allowed us to analyse the public space in preparation for my interactive information graphic that will be displayed there. I have learnt a lot more about the space, people and graphics within the space. Also, the processes we went through for the production of our poster is that which I need to follow for my interactive piece. Here are the steps I plan to follow…

Requirements Gathering – Collecting information about the public space and target audience

Analysis – Analysing other examples and concepts, and the data gathered

Design – Creating designs for the piece and development of idea

Testing – Gaining feedback from target audience and improving designs

The requirements gathering I carried out for the poster will also be useful for my interactive piece. However, some further requirements gathering such as deciding which public screen to use will need to be analysed. From putting the poster in the public space, I have realised that the expectations I had about the space and people have been challenged. It is hard to predict how people will behave in certain spaces so I have learnt not to make assumptions. Everyone behaves and engages with media in different ways based on their own experiences and background, something that I need to consider when making my interactive information graphic. I need to be aware that people may not behave how I want them to and that the behaviour of people can alter at any point in time, this could relate to whether they are with friends, doing work or in a rush etc. Jenkins (2006, p.210) suggests that:

‘new meaning take shape around what we already know and what we already think, and thus, each player will come away from a game with a different experience and interpretation.’

Even though my piece is not a game, I feel that Jenkins idea can apply to my interactive piece. I’m aware that after interacting with my piece, each user will come away with a different experience and varied decoded meanings of the piece. Audiences are highly complex and challenging, which is something to be aware of especially when displaying a piece in a public space. Next, I will go on to explore prototypes, what they are and why it could be useful to create a prototype for my piece.

Jenkins, H, 2006. Fans, Bloggers and Gamers: Exploring Participatory Culture. London: New York University Press.