The second prototype builds upon our first one, taking a couple of small steps to get us in the right direction for the final application. At this point we’re still focused on working out the basic functionality of how the app will work and users will interact with it while the design for the application is still being finalised.
The main difference here is the addition of a navigation controller into the app. The navigation controller allows us the switch between different views. In this case, we have the initial view of the zoomable Magna Carta image, and it needs to switch to a different view which will contain the details about each clause when tapped on.
We also added a couple more hot spots onto the image to test and implement the class made to control the coloured overlays.
Below is a screenshot of the Overlay class. It takes three pieces of data at this point (but more can be added if needed). For it to be initialised, we need a name, a colour (which later will be used to separate categories) and a frame (which is the size and location of the overlay rectangle).
In the View Controller, the overlays are stored in an array as it seems to be the easiest and tidiest way to store all the initialisation data. The benefit of this method is that it is very tidy, easy to read and will be easier to implement later when we place the overlays on the image.
The overlays are then placed on top of the image using a for loop which uses iterates through and places all of the overlays in the ‘overlays’ array. They are placed down by added a subview on top of the Magna Carta image in the Scroll View Controller and then a Tap Gesture Recogniser is added to each overlay so that it can act as a button.
When one of the overlays is tapped, it transitions to a new view, which is the view where the details of each clause will be. At the moment the prototype transitions to the same page for every overlay as we, again, wanted to show the client our progress so they could get a better understanding of the type of functionality we’re aiming for. Much like the overlay class, A ‘clause detail’ class will need to be made to store all the information for each of the different clauses and create unique links on each clause.
Below is a Gfycat image of the prototype in action. Showing the zoom and scroll functionality and the transition to the detail page for the clauses.
In the future we want to add more functionality to this, which we will be working on as we can. One of the main things we’re interested in is adding some sort of filter for the clause overlays to separate them by categories/ themes (where the colour coding will come in handy). One of our main concerns at this point is that if we have too many overlays it could overpower the Magna Carta image and ruin its aesthetic. One possibility here could be limiting the clauses we have highlighted to only the most important or interesting ones so that the app isn’t flooded with too much information which will make it less user friendly.