Here are the final designs for our Magna Carta application.
Main Screen – features a zoomable high resolution image of the Magna Carta. The clients wanted the Magna Carta document to be a main component of the app, hence we have clearly adhered to their requirements. The design features a simple navigation bar, whereby users can click the burger button to access the menu in order to filter the overlays.
Menu – the menu design is very clear and simple. Each category is accompanied by a relevant icon, using iconography really helps to make it more appealing for users and is also a common convention of iOS apps. The menu bar has a scrolling gesture allowing you to further filter the clauses by the various different categories.
Clause Details – the translation and contextualisation of the selected clause appears in a translucent box that slides up from the bottom. It is clear and easy for users to read and the Magna Carta document is still the prominent feature.
Overall, we are pleased with the design of our app, the simplicity really helps to make it easy for users to use and navigate without difficulty. The design is sophisticated and professional looking, which has been achieved through adhering to Apples iOS conventions, as well as Salisbury style guide. The designs show creativity and originality, especially within the category iconography. In the next design post, I will clearly discuss how the designs have met the assessment criteria.
(designs by Kaylee)
Based on the various improvements that we agreed upon from our initial designs, we have creatively experimented further with different designs to consider for our app. We experimented with a range of colours from Salisburys’ style guide in order to see which colour scheme worked best for our application. We also experimented with different ways to display the detailed/selected clause information, for example on a new screen that would totally cover the Magna Carta document (1), sliding up from bottom which half covered the document leaving the top exposed (2), and a temporary pop up box which would be centrally placed stopping navigation briefly but showing the document was still there(3,4). Here are some of the design experiments:
1. 2. 3. 4.
(designs by Kaylee)
We liked the addition of the navigation bar in these improved designs and felt this helped to make it more accessible for the menu. The use of the apple menu button (top left) also helped to make it adhere more to Apples iOS Guidelines and using these common button icons means most iOS users will already have existing knowledge as to what it means. The slide out menu of categories is another feature that the group liked, allowing users to easily filter their search on the Magna Carta clauses. If there was no filters, the whole document would have overlays due to the vast amount of clauses, so the use of categories helps to narrow down the overlays, making it a lot clearer for users. The use of icons to go alongside each of the categories helps to make it more visually appealing; it is important that the icons we use are readily understood, hence why we have used a key icon for key clauses and a money icon for debt etc. We decided that our favourite colour scheme was the dark brown with the gold overlays (3). We felt that these colours stood out most and fitted best with the design. The blue was slightly to powerful and took away from the documents importance. The simple design helps to make it clear and easy to navigate and read without difficulty or prior knowledge. We decided that having the clause information/detail slide up from the bottom of the screen worked best as it allowed users to still see some of the document unlike the others, also it was more native to apple devices. The clients, Seif and Steph also said they liked the idea of the details of the clause popping up from the bottom, and covering the lower half of the screen with a translucent background (similar to design 2). A main improvement to consider is proportions, as at the moment the font and icon sizes are too big. Apples Guidelines suggest – ‘Text should never be smaller than 11 points, even when the user chooses the extra-small text size. For comparison, the body style uses a font size of 17 points at the large size, which is the default text-size setting’ (Apple 2015). It is also important that ‘all icons in your app look like they belong to the same family in terms of perceived size, level of detail, and visual weight’ (Apple 2015). This is another feature that needs to be improved upon as at the moment some of the icons are filled in whereas others use an outline. Apples iOS Developer Guidelines suggest ‘you should provide two versions—one for the unselected appearance and one for the selected appearance. The selected appearance is often a filled-in version of the unselected appearance’.
From this, we will go on to further improve the designs, making amendments to the proportions, including menu, text and icon size. We will also make sure all icons are consistent and create unselected and selected icons in order to further adhere to Apples conventions. Also, in the above designs the colours are only rough so we need to get the hex codes of the colours to ensure they exactly match the style requirements. Additionally, we will go on to further research the Magna Carta clauses in order to clearly define the categories that will be displayed in the menu bar.
Apple, 2015. Designing For iOS [online]. Available from: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/[Accessed 21 April 2015].