Human Interface Guidelines for iOS-Platforms Martin Ebner The presentation bases on http://developer.apple.com/library/ios/#documentation/UserExperience/ Conceptual/MobileHIG/Introduction/Introduction.html (iOS - V 2013-03-01) https://developer.apple.com/library/ios/documentation/userexperience/ conceptual/mobilehig/MobileHIG.pdf (iOS - V 2014-02-11)
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Platform Differences 1/2„An iPhone OS-based device is not a desktop or laptop computer, and an iPhone application is not the same as a desktop application.“
• The display is paramountCompact Sreen Size - 480*320 pixels (iPhone 3 and lower), 960*640 pixels (since iPhone 4), 1024*768 pixels (iPad) - since Retina even more
• Device orientation can change to any time
• Memory is not unlimted
• Apps Respond to gestures, not clicks
• One screen at a time
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Platform Differences 2/2„An iPhone OS-based device is not a desktop or laptop computer, and an iPhone application is not the same as a desktop application.“
• Preferences are available in settings
• Apps have a more or less just on single window
• Minimal User Help
• Two Types of Software Run in iOS
• Safari on iOS provides the Web Interface
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
What Are Your Options?„Depending on the implementation details and its intended audience, some types of software may be better suited to your needs than others.“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
3 Application Styles„... applicaton styles, based on visual and behavioral characterstics, data model, and user experience.“
• What do you expect to be the user‘s motivation for using the application?
• What do you itend to be the user‘s experience while using the application?
• What is the goal or focus of the application?
• How does the application organize and display the information people care about?
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Productivity Applications„ ... enables tasks that are based on the organization and manipulation of detailed information“
• Organizing the list
• Adding and subcontracting
• Drilling down, performing tasks on reached level
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Utility Applications„ ... perfoms a simply task that requires a minimum of user input.“
• visually attractive
• enhancement of information display
• Organize of information into a flattened list of items; no hierachy
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Immersive Applications„ ... offers a full-screen, visually rich environment that‘s focused on the content and the user‘s experience with that content“
• tends to hide much of device‘s user interface
• use of nonstandards controls appropriate
• information presentation in the context of game-play, story or experience
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Choosing an App Style
„When in doubt, keep it simple.“
• Pare the feature list to the minimum
• To bring ideas from you desktop application to an iPhone application, apply the 80-20 rule (the largest percentage of users will use a very limited number of features)
• Find the core tasks
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Case Study: Mail„ ... when people are mobile, their needs for an email application are simpler, and they want access to core functionality quickly.“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Design the App For the Device„... you need to make sure that your app looks and feels like it was designed expressly for an iOS-based device.“
• Embrace iOS UI paradigms (controls should look tappabel, App structure should be clean, ...)
• Ensure that unvirsal apps run well on both(iPhone and iPad)
• Reconsider web-based designs
• Tailor customization to the task
• Prototype and Iterate
iPad Human Interface Guidlines - Martin Ebner 2010http://www.flickr.com/photos/changecase/3545891009
iPad Human Interface Guidlines - Martin Ebner 2010
Compatibility Mode„Unmodified, iPhone applications are running in a compatibility mode on iPad, but it does not give them the device-specific experience they want.“
• Games and other immersive iPhone applications may not need much change in information architecture, because they are experience driven. In general they need a siginificant revision of artwork and interaction.
• iPhone productivity applications tend to require some rearchitecting of the information hierachy, in addation to an enriched UI and an enhanced user experience.
• Utility applications need be reenvisioned for iPad so that they can take advantage of the larger screen.
iPad Human Interface Guidlines - Martin Ebner 2010
Running on the iPhone 5„... many apps look good simply by displaying more of their existing UI ...“
• Allow more content to be revealed automatically
• Stretch content regions
• Stretch background areas between content regions
• Recenter dominant visual elements
• Expand custom artwork
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Great User Interface„ ... follows human interface design principles, that are based on the way people think and work, not on the capibilities of the device.“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Focus on the Primary Task„An iPhone Application that establishes and maintains focus on its primary functionality is satisfying and enjoyable to use“
• What is most important in each context?
• Is the provided information essential, does a user need this information right now?
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Build in Simplicty/Ease of Use„ ... users are probably doing other things while they simultaneously use your application“
• Elevate the content that people care about
• Think Top Down - High level Information near the top of the screen
• Minimize text input and Keep essential information succinctly.
• Make usage easy and obvious
• Give people a logical path to follow
• Provide a fingertip-size target area for all tappable elements (calculator example: 44*44 pixel)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Communicate Effectively
„ ... avoid technical jargon in the user interface“
• Feedback is important
• use user-centric terminology
• Enable collaboration and connectedness
• Start Instantly
• Always be prepared to stop
• Don‘t quit programmatically
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Support Gestures Appropriately„To ensure that your application is discoverable and easy to use, therefore, try to limit the gestures you require to the most popular.“
Users Know the Standard Gestures
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Think about each detail
„ ... iOS devices are personal devices, but ...“
• Downplay File-Handling Operations
• Enable Collaboration and Connectedness
• De-emphasize Settings
• Brand appropriately
• Make search quick and rewarding
• Use UI Elements consistently and correctly
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Graphical Interface - don‘t forget about it„ Rich, beautiful, engaging graphics draw people into an application and make the simplest task rewarding....“
• Consider Adding Physicality and Realism
• Delight People with Stunning Graphics
• Use subtle Animation to communicate
• Ask People to save only when necessary
• Handle Orientation Changes
• Be Configurable If Necessary
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
For iPad 1/2
• Enhance Interactivity
• Reduce Full-Screen Transitions (update only the areas of the UI that need it)
• Restrain your information hierachy (more information in just one place)
• Migrate Toolbar Content to the Top
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
For iPad 2/2
• Does the task require more than one type of input?
• Does the taks require people to drill down through a hierachy of views?
• Might people want to somethingin the main view before theyfinish the task?
• Is the task fairly in-depth and does it represent one of theapplication‘s main functions?
„Consider Using Popovers for some modal tasks...“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
iCloud Storage„iCloud storage helps people access the content they care about regardless of which device they are currently using.“
• Respect the user‘s iCloud account
• Determine which types of information to store
• Make sure your app behaves reasonably when iCloud storage is unavailable
• Avoid asking users to choose which documents to store
• Warn users about the consequences of deleting a document
• Be sure to include the user‘s iCloud content in searches
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Routing„Maps displays a list of routing apps when people want transit information for a route.“
• Focus on the route
• Provide information for every step of a route
• Enrich map views with additional information
• Give users different ways to sort mulitple transit optionss
• Consider using push notifications
• When users transition to your app from Maps, don‘t ask them to reenter information
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Social Media„People expect to have access to their favorite social media accounts regardless of their current context.“
• Give users a convinient way to compose without leaving your app
• Avoid asking users to sign into a social media account
• Consider using an acitivty view controller to help users choose one of their social media accounts
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Multitasking„ Multitasking allows people to switch quickly among recently used applications, because apps can be suspended in the background when they are quit.“
• Be ready for interruptions, and ready to resume
• Make sure your UI can handle the double-high status bar
• Be ready to pause activities that require people’s attention or active participation
• Ensure that your audio behaves appropriately
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Multitasking„ Multitasking allows people to switch quickly among recently used applications, because apps can be suspended in the background when they are quit.“
• Use local notifications sparingly
• When appropriate, finish user-initiated tasks in the background.
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Notification Center 1/2„... gives a user a single, convenient place in which to view notifications from their apps.“
• Keep badge contents up to date
• Don‘t send multiple notifications for the same event
• Provide a custom message that does not include your app name
• Provide a sound that users can choose to hear when a notification arrives
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Notification Center 2/2„iOS apps that support local or push notifications can use the following notification styles.“
Banner
BadgeAlert
Sound
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
AirPrint„ ... users can wirelessly print content from your application“
• Use the system-provided Share button
• Display the Print item when printing is a primary function in the current context
• If appropriate, provide additional printing options to users
• Don’t display print-specific UI if users can’t print
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
iAd„ ... you can allow advertisements to display within your application and you can receive revenue when users see or interact with them“
• standard banner (SB) / medium rectangle banner (MRB) / full screen banner (FSB)
• Place the banner view appropriate (SB: bottom of the screen; MRB: should not interfere with the content; FSB: when there are interludes in the user experiences)
• Ensure that banner views appear when it makes sense in your application
• As much as possible, display banner ads in both orientations
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
iAd„ ... you can allow advertisements to display within your application and you can receive revenue when users see or interact with them“
• Don’t allow SB or MRB to scroll off the screen
• While people view or interact with ads, pause activities that require their attention or interaction
• Don’t stop an ad, except in rare circumstances
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Using Sound„ ... users always expect to hear alarms that they have set.“
• Ring/Silent Switch (avoid sound if it is not explicity set)
• Volume Buttons (the user always decided the loudness)
• Headset and Headphones (plug in headsets means sound has to be set privately)
• Wireless audio (disconnection = pause, connection = no pause)
• Defining the Audio Behavior is essential task
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Starting„iPhone Application should start instantly so users can begin using them without delay“
• Avoid asking people to supply setup information
• Display a launch image
• Avoid displaying an About window, splash screen, disclaimer, licence agreements or another tpye of startup experiences
• Launch in default orientation (iPhone: portrait; iPad: current device orientation)
• Delay a login requirement for as long as possible
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Stopping„iphone Applications should never quit programmatically; an iOS app never displays Quit or Close Option“
• Be prepared to receive an exit or terminate notification at any time.
• Save the current state when stopping
• Avoid alerts
• User has to decide if continuing you application or pressing the Home Button
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Settings and Configuration„It‘s best when iPhone application do not aks users to specify any settings at all“
• Focus your solutions on the needs of 80 percent of users
• Get as much information as possible from other sources
• If you must ask for setup-information, prompt users to enter within your application
• Offer configuration options in the main user interface or on the back of a screen
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
....„Don‘t provide a button for a built-in action, because users will wonder why there are two ways to do the same thing in your application“
• Support Copy and Paste
• Support Undo and Redo
• Enabling Push Notifications (delivery is not guaranteed)
• Providing Search and Displaying Search Results
• Using the User‘s Location
• VoiceOver and Accessibility
• Edit Menu
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
....„Don‘t provide a button for a built-in action, because users will wonder why there are two ways to do the same thing in your application“
• In App-Purchase
• Game Center
• Location Sercies and Data Privacy
• Quick Look Docoment Preview
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
iPhone / Android- HI Guidelines
Planning your mobileSoftware Product
Designing the UserInterface of yourmobile Application
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Application Icons„This is a place where branding and strong visual design should come together into a compact, instantly instantly recognizable, attractive package.“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Launch Images„To enhance the user‘s experience at application launch ... .“
• should not an about window, branding elements
• measures 320*480 pixel (640*960 high resolution; 640*1136 iPhone 5)
• it is solely intended to enhance the user‘s perception, as quick launch, ready for use
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Icons for ...
„do not redesign standard buttons“
• simple and streamlined
• not easily mistaken
• readily understood and widely acceptable
• Use color and shadow judiciously to help the icon tell its story
• Create an idealized version of the subject rather than using a photo
• Don‘t use replicas of Apple products
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Icons for ...
„do not redesign standard buttons“
• use universal imagery, easy recognizable
• generate an idealized version
• use transparency when it makes sense
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Tips for Creating Great Artwork „The Retina display allows you to display high-resolution versiony of your art and icons.“
• Richer in texture, more detailed and more realistic
• Scale up your original work up to 200%
• Add detail and depth
• More realistic and more detailed
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Branding „Succesful branding involves more than adding brand assets to an app“
• Incorporate a brand‘s asset in a refined, unobtrusive way
• Don‘t take space away from content people care about
• Resist the temptation to display your logo througout the app
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Color 1/2„ ... helps indicate interactivity, impart virtality and provide visual continuity.“
• If you create multiple custom colors, make sure the work well toegehter.
• Pay attention to color contrast in different contexts.
• Be aware of color blindness
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Color 2/2„ ... helps indicate interactivity, impart virtality and provide visual continuity.“
• Consider choosing a key color to indicate interactivity and state
• Color communicates, but not always in the way you itend
• Avoid using the same color in both interactive and noninteractive elements
• In most cases, don‘t let color discract users
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014
Typography
„ ... should always be legible.“
Human Interface Guidlines for Mobile Applications - Martin Ebner 2014