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

Initial iPad Designs

Here are some of the initial iPad designs for our app. It is important to consider the designs in both orientations, as users may expect to be able to interact with the app in both portrait and landscape orientations dependant on their preference and how well it suits the screen space.

Portrait Designs:portrait designsLanscape Designslanscape designsBoth designs are fairly simple, with a clear organised layout, this is important as users need to be easily able to navigate and use the app without encountering problems. Apples iOS developer guidelines state ‘Avoid gratuitous changes in layout’ (Apple 2015), hence the layout for both the orientations should remain consistent. We have adhered to this convention by using a similar layout for both orientations, with the use of a clear menu bar. The menu bar in the portrait design, would appear when users swipe left on the screen, or press the menu icon in the top right. The menu in the landscape orientation would automatically appear due to the larger width, but users can be given the choice to hide the menu bar when interacting with the Magna Carta. After making these designs there was a realisation that the menu bar is on the right side (portrait) and then moves to the left when it is in landscape. This is the kind of inconsistency that needs to be avoided in order to make our app more professional.

Pros:
-simple, clear layout making the most of the limited available screen space
-full screen Magna Carta which the user can zoom into and explore
-use of menu bar and categories to let the user easily filter which clauses are highlighted

Cons:
-needs to look more like iOS app by incorporating more of their design elements.
-doesn’t use Apple’s button icons
-wrong font used (But this is primarily due to not having the files at this point)

After discussion we have decided that the designs need to adhere more to Apples iOS Guidelines. Specifically, the menu bar needs to look more like an iOS app component, and the addition of a navigation bar at the top is a conventional iOS element that we need to consider. We also need to incorporate Apple’s button icons into the designs, as these will be familiar with users, helping to maintain user experiences of iOS applications. Experimenting with different ways to display the clause information is also something else to consider further.  For example, whether when touched it will slide left across to a screen containing the translation and further information, or if it will slide up from the bottom, or if a translucent box will appear over the top. We will also try out different colours from Salisbury Cathedral’s style guide in order to see which works best, by experimenting with changing the menu bar colour, clause information colour and the colour of which the clauses are highlighted. In the revised designs, we will also use Salisbury’s selected fonts (Eidetic and Quay Sans), in order for it to remain consistent with their existing products for the exhibition. From this, we will go on to improve our designs based on all these refinements.

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

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