Thursday, December 1, 2016

OUGD504 - Design for Screen - Apple Developer - iOS Human Interface Guidelines

Apple being one of the leading brands the world for user interface, experience and all round design ideas these guidelines found on the apple website offer a mass of really useful information in terms of what to do and what not to do, these guidelines are for developers and designers to create apps for the apps store that fit inline with the rest of the Apple products. Three themes are highlighted that try to differentiate IOS from other platforms. These themes could be considered to ensures the Art Map competes with the other apps out there. 

 Clarity (focus on functionality motivates the design, interface elements subtly highlight important content and convey interactivity)


Deference (Fluid motion, help users understand content while never competing with it, minimal use of gradients and drops shadows keep the interface light and airy, while ensuring that content is paramount)


Depth (Distinct visual layers and hierarchy, discoverability heighten delight, transitions provide a sense of depth as you navigate through content)





















Aesthetic Integrity,  - The relationship with functionality and appearance, as the Art Map is primarily aimed at people interested in the arts this could reflect in the design, however, it is important to let the content be the focus, finding the balance between these is key.


Consistency - something maybe overlooked but is so fundamental to app design, creating an app that behaves in a way that people expect allows the user experience to be seamless.  


Direct Manipulation - When working on screen there are many more actions than that of print, the rotation of a device for example should show visable results to these actions.


Feedback - This related to the idea of actions, when a user presses a button, does an action they expect a responses, these responses show the user that the action has been carried out, this feedback helps clarify the results of actions. 




















Metaphors - People learn more quickly when an app's virtual objects and actions are metaphors for a familiar experiences - this in a way is about people physically interacting with the screen. 


User Control - People not apps are in control, the best apps find the correct balance between enabling users and avoiding unwanted outcomes. 

















This section highlights the three main categories of interface essentials.


Bars - Navigation, actions and communicating information.


Views -  Containing the primary content of the app, these can enable actions like scrolling, insertion, deletion and arrangement.


Controls - Initiate actions and convey information.

























Animation - it explains animation is a way of helping users visualise the results of their actions. But animation must be considered and only used when necessary. It advices to always test the results to make sure they work well.

















Branding - It explains that a designer must provide enough branding to give people context in your app, but not so much that it becomes a distraction. 


It explains that colour is a great way of subtly branding an app and reminding the users what they are on. Continuing this colour on to the apps icon is another way of connecting these two bits of imagery. 


'Don't let branding get in the way of great app design' - as the Art Maps main purpose is to promote and inform the users on outside content (galleries and museums) this branding has to take a more reclusive role at times. 


It explains that often showing a brand at the top of the app page can take up room and remove from the content, using colour and typography this branding can be seen but not take away from content communication. 
















Colour - The first point is that what ever colour used think about how text can be applied to it and if it is readable, also consider colour pallets that coordinate and complement each other.  It goes on to say that subtle and limited colour pallets insures the designs are not over complicated. 'Consider choosing a key colour to indicate interactivity throughout your app, singular colours for certain areas of an app reinforces a consistency across diferent sections.   

















Layout - Ensure the app is designed to work in any context and communicated the same content in the same way across different sizes and different devices.




























All these in Bold above explain the importance of alignment, consistency and the hierarchy of information. Again the emphasis is on clear communication of the content. Another point is to avoid changes across rotations and platforms. Try to maintain a comparable experience in all contexts. 




























Orientations is something to consider as apps like Instagram only use a singular portrait orientation, this might have to be implemented into the Art Map, considering if a landscape orientation is needed for some content to be best communicated. 


Point point made here that is hard to miss but is of such great importance is the space for interactive elements, it explains it is best to maintain a minimum tappable area of 44pt x 44pt for all controls. 


























As I learnt from the Erik Spiekermann talk a use of typography can be complete branding for a project. Correct and appropriate use of this typography must then be considered. 


























It explains how using a singular typeface is often advised, this eases readability and consistency across the app. 


Dynamic type automatically adjusts tracking and leading for every font size. This is another thing to consider when picking type.  




















This chart is perfect for this project as it allows me as the designer to be sure that the type sizes I am using are inline with the industry standards that have been tried and tested. 
















App Icons - it explains how the app icon is the first opportunity to communicate, at a glance your apps purpose. 























This information can be seen as rules for app design, things like 'Use words only when they're essential or part of a logo' it also advises to not use photos as they don't translate well to small size. Another useful point is to test the icons on different backgrounds as people have different wallpapers. 





















This list is another very useful one, testing my icons at all these sizes will insure wherever they are the communication is the same.















Custom icons - these icons are vital when navigating across different pages in app, creating a set of signature icons for the Art Map seems a useful and needed design feature, these rules above will act as a guide when designing them, things like 'too many details will make an app icon appear sloppy or unreadable', 'A 1pt stoke (2px for @2x resolution) works well for most icons. Consistency is another point that is emphasised here. 
























Providing two versions to show one is being used, this allow the user to know what it is exactly that they are doing in the app. Text labels can be used for visual impaired users. 








Again this table for custom icon sizes is very useful for my own designs, using the Apple standards will keep consistency and recognisability in the Art Map. 















Tab Bars - As I have highlighted that Tab bars is something that should feature in the Art Map this section on what to generally do proved very useful. 'A tab bar is a good way to flatten your information hierarchy and provide access to several peer information categories or does at once'. 






It explains that tabs should always be enabled to not disrupt the content. As well as making sure that the app doesn't have too many tabs, the Art Map so far only uses three so it is not a problem at the moment. Again these rules will be important to follow throughout the designing process. 





Within the Art Map it seems as if notifications could be a useful way of informing the user on things they may want to know. These rules above should be considered to ensure the best user experience possible. 


















Maps - A central part of the Art Maps concept the main point to take from this is 'keep your map interactive', maps that feel familiar are always the easiest to use. For my Art Map using Google maps seems the most obvious choice. 



















Location pins is another feature that will be implemented lots within the Art Map considering what Apple advises will allow the best communication and user experience possible.


Overall this website has be amazingly useful and when designing it will be very beneficial to refer back to the points made about how to successfully design an app. 

No comments:

Post a Comment