Friday, 3 November 2017

Design for Screen - Human Interface Guidelines

Quality and function are two key elements to consider if a high quality app is to be delivered to the user. 

I researched into the Apple iOS Human Interface Guidelines before I began my wire framing, so that I could understand exactly what it is that needs to be thought about when designing for iOS and other platforms. 

Design Themes
Quality and functionality
Clarity
- text is legible at every size
- icons are precise and lucid
- negative space, colour, fonts, graphics, and interface elements subtly highlight important content and convey interactivity
Deference
- interface that helps people understand and interact with content while never competing with it
- content fills the entire screen
- bezels, gradients, drop shadows keep the interface light and airy
Depth
- visual layers and realistic motion convey hierarchy and facilitate understanding
- transitions provide a sense of depth as you navigate through content

Design Principles
Maximise impact and reach, keep the following principles in mind as you imagine your app's identity
Aesthetic Integrity
- how well an apps appearance and behaviour integrate with it's function
- e.g. an app for a serious task also includes unobtrusive graphics and standard controls to keep the user focused
Consistency
- familiar standards and paradigms by using system-provided interface elements, well-known icons
- app uses features and behaviours in ways people expect
Direct Manipulation
- engages people and faciltates understanding
- users experience direct manipulation when they rotate the device or use gestures
- manipulation leads to immediate, visible results
Feedback
- animations and sounds help to clarify the results of actions
- interactive elements are highlighted briefly when tapped
Metaphors
- people learn quicker when an app's virtual objects and actions are metaphors for familiar experiences
- move views out of the way to expose content beneath
- drag and swipe content
- flick through pages of books and magazines on screen
User Control
- an app can suggest a course of actions, but the decision making is down to the user
- balance between enabling users, but avoiding unwanted outcomes
- should be easy to cancel operations

Navigation
People seem to be unaware of an app's navigation until it doesn't meet their expectations. Navigation should feel natural and familiar, shouldn't dominate the interface or draw focus away from the content. 
- always provide a clear path so the user knows where they are in your app and how to get to the next destination
- design an information structure that makes it fast and easy to get to content
- organised so a minimum number of taps, swipes and screen are required 
- touch gestures are used to create fluidity e.g. swiping to go forward and back through screens
- use controls the users are already familiar with
- a navigation bar should have a sense of hierarchy to make it easy to use

3 main styles:

Hierarchical Navigation
- one choice per screen until you reach a destination
- to go to another destination, you must retrace your steps or start over from the beginning and make different choices




Flat Navigation
- switch between multiple content categories




Content-Driven or Experience-Driven Navigation
- move freely through content, or the content itself defines the navigation



Typography
San Francisco (SF) is the system typeface in iOS. The fonts of this typeface are optimised to give your text unmatched legibility, clarity, and consistency. 

How to emphasise important information:
- font weight
- font size
- font colour

No comments:

Post a Comment