Design: Clause Overlays

Currently, all the overlays inmain screen-01 our designs are gold. However, we discovered that this will cause problems due to the vast amount of clauses that we need to hotspot with the overlays. Using just one colour would make it very confusing and hard to distinguish between the clauses, as some clauses are situated on the same lines. Therefore, to over come this problem we decided to experiment with alternating the clauses using different coloured overlays.

main screen experiment-01

Here we experimenting with changing the opacity of the existing colour. We found that this still wasn’t clear enough to distinguish the clauses as the overlays were too similar.

main screen experiment-02

We looked at using a slightly lighter gold to try differentiate the clauses. This worked slightly better but we still felt the colours were too similar.

main screen experiment-03

Therefore, we decided to use the blue from Salisburys’ style guide in order to distinctly separate the clause overlays. We will use a low opacity on the blue so that it doesn’t stand out too much and to allow the latin to still be slightly visible.

It is important that the clause overlays are clear and easy to differentiate from one another as each overlay hotspot brings up more details about the selected clause. Using one colour makes it really confusing and complicated for users, this would not be successful as we want our app to be intuitive and easy for a range of ages to use within the exhibition. Therefore by making these slight changes, it helps to visually improve the design of the app as well as enhance users experiences, making it a lot clearer for them to use the hotspot overlays.

Advertisements

iPad Designs

Screen Shot 2015-04-24 at 15.42.51 Screen Shot 2015-04-24 at 15.43.22 Screen Shot 2015-04-24 at 15.43.36

(designs by Kaylee)

Here are our amended portrait iPad designs. Following improvement from the previous Design Experiments posts,  we have altered the proportions to make them more suitable for the iPad, by changing the text and icon sizes. We choose the dark brown and gold colours from the cathedrals style guide, as they complement one another, with the gold font on the brown menu bar being really

Screen Shot 2015-05-01 at 14.35.11clear and easy for users to read. The use of the colour gold also helps to symbolise the status of the Magna Carta as a significant, highly influential document. The off-white icon colour also stand out against the dark brown and are clear to view and understand. We improved these from the previous designs by making them all outlined with a consistent stroke weight. However, the current icons are taken from the internet so to avoid copyright issues and enhance originality and creativity, we are going to make our own icons to use, adhering to Apples suggested icon conventions (size, stroke weight, appearance). The simplicity of the designs helps to make the app easy and straightforward for users to use to view the Magna Carta clauses, this is important as a complex design could make it complicated for users and hence would not be very successful. We want our app to be intuitive, whereby anyone in the Magna Carta exhibition can easily use it without difficulty. From this, we have decided to further experiment with the clause overlay colours. Due to the vast amount of clauses, some of them will be situated on the same lines, therefore differentiating between the clauses could be difficult. To overcome this problem, we are thinking of alternating using two different colours for the overlays. This would make differentiating the different clauses clearer for users, we are going to experiment with changing the opacity of the existing colour, slightly changing the colour, or possibly using one of the other colours in Salisbury Catherdrals’ style guide.

Design Experiments

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.designs 2. designs2 3. designs3 4. designs4
(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 thScreen Shot 2015-04-27 at 12.41.21e 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 filleScreen Shot 2015-04-27 at 12.40.04d 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].