Final Application

Now that the application is essentially finished, we thought we’d write a complete breakdown of the aesthetics and the functionality of it. Warning, this is a long and detailed block of text which describes what we hope is every aspect of the application we considered.

[0 :00] The app is called “Magna Carta Translation” as is written on the application icon seen on the iOS springboard. When opened the splash screen shows while the app loads, which has a similar image, enlarged to full screen. Compared to other apps, this one takes a while to load. This is due to the large image file being loaded into the scrollView which allows for the functionality required.

[0:10] Once loaded, the user is presented with an image of Magna Carta covered in alternating translucent coloured overlays over all of the individual clauses. As Magna Carta is a solid block of text, the alternating colours allow the user to see when one clause ends and the other begins – avoiding confusion which would arise if all overlays were the same colour. On load, all of the clauses are highlighted, giving a good overview of the whole document.

[0 :14 ]The image of Magna Carta can be zoomed into and enlarged up to 2 times the original resolution of the image file. As the original file is already quite large, allowing another 2 times zoom lets the user go even further without affecting the resolution and appearance of the image too adversely. Allowing the user to zoom in this far lets them explore minute details in the document which aren’t clear to the naked eye without magnification. This allows the user to view the document in a more fun and interesting way as they can spot details which could’ve never been seen otherwise. The overlays are sized so that they cover as much of the text they are trying to highlight as possible without overlapping other clauses. Towards the latter end of the document, the lines start to bend, making it more difficult to accurately cover the clauses.

The image is placed within a prebuilt feature of Swift called a UIscrollView. This allows for the zooming and panning of the image placed within. Zooming uses the iOS standard gesture of pinching; spreading the fingers to zoom in, and bringing them together to zoom back out. Panning, again, is another standard gesture where the user holds and drags the image once zoomed in. The image moves with their finger as they *drag* the document about giving a very tactile and fulfilling experience. Scroll and zoom bouncing have been disabled so that users can’t scroll past the edges of the picture, or zoom too far out of the picture. Scroll/ zoom bouncing are the built in features of iOS which allow the user to scroll further than the page/image so that it bounces back to the edge. We also enabled features such as ‘double tap to zoom’ which should be intuitive to many iOS users as it is another standard feature of the operating system.

[0 :17] In the top left corner on the navigation bar, a burger icon (three horizontal lines) is placed which toggles the appearance of the filter menu. This placement and icon have been chosen as they have become synonymous with activating a menu or navigation feature in many other applications. We wanted the app to appear familiar to the user so that it was intuitive how to use its features.

The menu feature is a splitViewController. To the layman this is a view which appear only over part of the screen. When opened, the menu covers approximately the left 2/5 of the screen, so that the Magna Carta image is still visible on the right. The menu consists of a list of words and icons which are categories for common themes within the document. As well as the themed category filters, there is an option to show all clause overlays (like when the app first starts up) and to hide all the overlays. Hiding the overlays lets the user explore the document in its full glory without any distracting coloured overlays blocking their view. The icons are symbolic of the menu feature they represent. For example, the ‘church’ category has an icon of a church next to it – anchoring the text and its meaning. Some icons are more symbolic. For example, the ‘all’ option has a quill which is symbolic of writing. The icons are very simple images which are clear and easy to distinguish. They add yet another aspect of familiarity as many other Apple lists (in menus and such) are often accompanied by iconography to help enforce the meaning the button.

[0 :20] The side menu can be opened by either tapping the menu icon or swiping from left to right when the image is fully zoomed out. This is an intuitive feature as if the user is dragging the menu from off the left side of the screen into view. Similarly, the menu can be closed by swiping from right to left as if pushing the menu back out of view. As the list of filters is longer than the length of the screen, it can be scrolled to show the rest of the options. This scrolling feature, again, is standard within iOS and is intuitive for many users familiar with touch screen devices. On a side note, the ‘hidden details’ category is placed at the bottom of the list. We really like the placement of this category is it in itself is initially hidden, playing with the function of the category. When a category filter is touched in the menu, the colour changes to show which one has been selected. Once the tap has ended, the menu closes and the clauses from the chosen category are highlighted on the document image. The overlays fade in rather than suddenly appearing. This subtle aesthetic feature makes the experience just that little more pleasurable for the user and nicely transitions the change of information.

[0 :25] Each coloured overlay is essentially a button, toggling the appearance of the detailView which contains the translation of the selected clause. The clauses have tap-gesture recognises on them which, when tapped, cause the details of the clause to slide into appearance from the bottom of the screen. Once a clause has been selected, the other clauses shown on screen fade out so that only the chosen one is shown. This allows the user to clearly see which clause they have tapped and is a pleasant aesthetic transition alongside the appearance of the detailView. The detail view ‘springs’ into place from the bottom of the screen. When it appears it slides up past its final resting place and bounces back to where it stays. We added this animation as it makes the interaction more fun and playful – something we wanted to add to what could be considered a rather dry and boring application.

The detail view covers approximately the bottom third of the screen which provides ample space for the app the display the number of the clause and its translation. This view is on a slightly translucent background so that the document can be faintly seen behind it. This translucence follows a common theme within iOS 8 wherein views appearing on top of others tease at what is behind. On some clauses where the body of text is too large, the text view itself can be scrolled to reveal the rest. There are multiple ways for the user to close the detail view. The first is for them to swipe down from top to bottom on the view to dismiss it. This is a built in gesture within iOS and is used in other places in the operating system. We feel this feature works quite well as the view slides up from the bottom – making it logical for the user to be able to ‘push’ it back down out of view. The second way is the tap the Magna Carta image above to ‘dismiss’ the detail view. Again we felt this feature to be relatively intuitive as it conforms to similar themes within Apple’s operating systems – tapping the object behind to dismiss/hide ones on top of it.

[0 :30] When the detail view is dismissed, the other clauses in the chosen category fade back into appearance so that another can be selected. If the menu is opened while the detail view is also opened, the detail view is forced closed so there isn’t too much information cluttering the screen.

Colours were carefully chosen to provide enough contrast to ensure it is fully legible and to conform to the design style set by the client and RedBalloon. Throughout the app, shades of brown, gold, cream, and blue are used which all match the guidelines provided to us. Also conforming to the guidelines is the Magna Carta logo at the top of the screen inside the navigation bar. This logo nicely fills the empty space, and helps the anchor and contextualise the image of the document.

As for typography, the app in its current state isn’t using the fonts set out by the guidelines. This is because we don’t have a license of the font so we are unable to put them in at this point. We made sure to make the font slightly larger than the default size so that it was easy to read without strain.

The translations used within the app are very simplified versions. This is so there isn’t too much text in the app which would cause the user to lose interest. It also makes it so the average person would be able to understand them. Some clauses are accompanied by further contextualising or interesting information which also make the app more interesting and fun to read.

[01 :00] Above, a ‘hidden details’ category was briefly mentioned. This was added as the Cathedral wanted to point out some details about the document itself and not just the words written on it. The overlays in the category are presented as outlines, rather than filled translucent boxes so that what they’re highlighting can easily be seen without being obscured by the overlay itself. We even chose to not show the hidden details in the all category. This was actually done because it would mean overlapping of clauses in certain places, but we like to believe it was done to emphasise the mystery of them being ‘hidden’. The hidden details category is arguably one of the most valuable as some of the information isn’t available anywhere else.

Below, videos of the app in use can be seen, demonstrating the function and usability of the app as described above.

Magna Carta App from Ashley Wilkie on Vimeo.

Magna Carta App Front from Ashley Wilkie on Vimeo.

Magna Carta App Second from Ashley Wilkie on Vimeo.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s