iphone - human interface guidelines
DESCRIPTION
Lecture Notes iPhone Development TU GrazTRANSCRIPT
![Page 1: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/1.jpg)
iPhone -Human Interface Guidelines
Martin Ebner
The presentation bases on http://developer.apple.com/iphone/library/documentation/userexperience/
conceptual/mobilehig/Introduction/Introduction.html
![Page 2: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/2.jpg)
Do we need Usability?
http://www.flickr.com/photos/rdolishny/2760207306
![Page 3: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/3.jpg)
The future is mobile
http://flickr.com/photos/thomcochrane/416206133/
![Page 4: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/4.jpg)
Fun - just in time - for your target group
http://www.flickr.com/photos/161/
![Page 5: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/5.jpg)
iPhone / iPadjust another device?
http://www.flickr.com/photos/kiki99/1031313718
![Page 6: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/6.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
http://metrics.admob.com/
„The iPhone generates 33% of all smartphone traffic worldwide and 50% in the US“ (AdMob Mobile Metrics, Febr. 2009)
![Page 7: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/7.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
http://metrics.admob.com/
„The iPhone generates 33% of all smartphone traffic worldwide and 50% in the US“ (AdMob Mobile Metrics, Febr. 2009)
• The Symbian OS is still number one with 43% share and six of the top 10 handsets. Windows Mobile and Palm each lost half their worldwide share over last six months.
• The Top 5 US smartphones - Apple iPhone, BlackBerry Curve, BlackBery Pearl, Palm Centro, and HTC Dream (G1) - generated 77% of traffic in February
• The iPhone is now the number one device by usage in Western Europe with 21% share of total requests
![Page 8: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/8.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
http://metrics.admob.com/
„91% of iPhone users and 88% of iPod touch users would recommend their device, compared to 84% of Android users and 69% of webOS users“ (AdMob Mobile Metrics, January. 2009)
![Page 9: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/9.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
http://metrics.admob.com/
„91% of iPhone users and 88% of iPod touch users would recommend their device, compared to 84% of Android users and 69% of webOS users“ (AdMob Mobile Metrics, January. 2009)
![Page 10: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/10.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
http://www.appleinsider.com/articles/09/08/14/apples_iphone_3gs_has_99_percent_satisfaction_rate.html
A total of 99 percent of 200 respondents to a RBC/IQ ChangeWave survey in August said they are satisfied with their
iPhone 3GS, with 82 percent of those "Very Satisfied."
![Page 11: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/11.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
http://www.appleinsider.com/articles/09/08/14/apples_iphone_3gs_has_99_percent_satisfaction_rate.html
![Page 12: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/12.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Apps usable for everyone?
![Page 13: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/13.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Application Definiton Statement
{your differentiator} {your solution} for {your audience}
ADS„ ... pick the few features, most frequently used, by the majority of your users, most appropriated for the mobile ...“
![Page 14: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/14.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
{easy to use} {digital photo sharing} for {casual iphone users}
Example:
{easy to use} {digital photo sharing} for {professional iphone users}
Note - this is a new app
ADS„ ... pick the few features, most frequently used, by the majority of your users, most appropriated for the mobile ...“
![Page 15: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/15.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
ADS„ ... pick the few features, most frequently used, by the majority of your users, most appropriated for the mobile ...“
• Elegant solution: you must solve a user's problem and solve it eleganty
• Great usability: solide app hierarchy, clean layout
• Gorgeous application icon: hey, the icon is the brand of your product!
![Page 16: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/16.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
iPhone - HI Guidelines
Planning your iPhoneSoftware Product
Designing the UserInterface of youriPhone Application
![Page 17: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/17.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
iPhone - HI Guidelines
Planning your iPhoneSoftware Product
Designing the UserInterface of youriPhone Application
![Page 18: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/18.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
iPhone OS PlatformRich with Possibilites
http://www.flickr.com/photos/shuffle-art/1441940051
![Page 19: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/19.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Platform Differences„An iPhone OS-based device is not a desktop or laptop computer, and an iPhone application is not the same as a desktop application.“
• Compact Sreen Size - 480*320 pixels (iPhone 3 and lower) or 960*640 pixels (since iPhone 4)
• Memory is not unlimted
• One Screen at a Time • One Application at a Time (since OS 4.0 not, but
suggested)
• Minimal User Help
![Page 20: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/20.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
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.“
• An iPhone Application (available in App Store)
• Web-only Content (compare http://itunes.tugraz.at): - Web Application - Optimized webpage - Compatible webpage
• Hybrid Applications (access to web content)
![Page 21: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/21.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
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?
![Page 22: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/22.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
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
![Page 23: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/23.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
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
![Page 24: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/24.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
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
![Page 25: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/25.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
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
![Page 26: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/26.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Case Study: Mail„ ... when people are mobile, their needs for an email application are simpler, and they want access to core functionality quickly.“
![Page 27: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/27.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Human Interface Principles
http://www.flickr.com/photos/wonderlane/4315076635
![Page 28: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/28.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
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.“
• Methaphors (playback control, sliding on-off switching, ...)
• Direct Manipulation (with the Multi-Touch Interface)
• See and Point (Presenting choices or options in list form)
• Feedback (must be immediate)
• User Control (user, not the application must initiate and control actions)
• Asthetc Integrity (how well the appearance of you application integrates with your functionality)
![Page 29: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/29.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Characteristics of Great iPhone
Applications
http://www.flickr.com/photos/rivalee/2939042459
![Page 30: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/30.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Build in Simplicty/Ease of Use„ ... users are probably doing other things while they simultaneously use your application“
• Make it obvious
• High level Information near the top of the screen (independent of how people tap on screen, top is most visible)
• Minimize text input
• Keep essential information succinctly
• Provide a fingertip-size target area for all tappable elements (calculator example: 44*44 pixel)
![Page 31: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/31.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
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?
![Page 32: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/32.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Communicate Effectively
„ ... avoid technical jargon in the user interface“
• Feedback is important
• use user-centric terminology
![Page 33: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/33.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
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.“
![Page 34: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/34.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Handling Common Tasks
http://www.flickr.com/photos/intherough/4263146374
![Page 35: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/35.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Starting„iPhone Application should start instantly so users can begin using them without delay“
• Specify appropriate status bar styles
• Display a launch image
• Avoid displaying an About window, splash screen or another tpye of startup experiences
• Launch in portrait orientation
![Page 36: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/36.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Stopping„iphone Applications should never quit programmatically“
• 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
![Page 37: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/37.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
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
![Page 38: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/38.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
....„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
![Page 39: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/39.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
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
![Page 40: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/40.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
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
![Page 41: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/41.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
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.
![Page 42: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/42.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Printing
„ ... users can wirelessly print content from your application“
• Use the system-provided Action 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
![Page 43: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/43.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
iAd„ ... you can allow advertisements to display within your application and you can receive revenue when users see or interact with them“
• size 320*50
• Place the banner view at or near the bottom of the screen
• Ensure that banner views appear when it makes sense in your application
• As much as possible, display banner ads in both orientations
![Page 44: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/44.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
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 an ad 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
![Page 45: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/45.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
iPhone - HI Guidelines
Planning your iPhoneSoftware Product
Designing the UserInterface of youriPhone Application
![Page 46: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/46.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Brief Tour of the Application User Interface
http://www.flickr.com/photos/ari/4314027331
![Page 47: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/47.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Main parts of application screen„Every application, regardless of type, has an application window“
• Status Bar
• Navigation Bar
• Tab Bar
• Toolbar
![Page 48: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/48.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Users are accustomed to the look and behavior of standard views and controls
http://www.flickr.com/photos/r_catalano/4180965353
![Page 49: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/49.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Status Bar„People expect to see the current battery charge of their device; hiding this information [...] is not an ideal user experience“
• hiding status bar in case of immersive application (carefully decision)
• important bar (cell signal strength, network, battery)
• three possible colors
![Page 50: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/50.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Navigation Bar„ ... appears at the upper edge of an application screen, just below the status bar.“
• enable navigation among different views in an application
• provide title and controls that manage the items in a view
![Page 51: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/51.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Tool Bar„ ... performs actions related to objects in the current view.“
• constrain the number of items (44*44 pixels)
• use the predefined buttons
• colors blue and black
![Page 52: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/52.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Tab Bars„ If you application provides different perspectives on the same set of data, ... .“
• icons and text, all equal in width and black background
• tab does not change its opacity or height, regardless of orientattion
• more than five tabs, iPhone OS add a „More“ tab
• badging a Tab is possible to communicate in a noninstrutive way
![Page 53: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/53.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Alerts, Action Sheets, Modal Views„ ... appear when something requires the user‘s attention ... “
![Page 54: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/54.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Alerts„ ... give users criticial information in a highly visible way. “
• minize the number of alerts
• ask for confirmation
• single / double button alert
![Page 55: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/55.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Action Sheet
„ ... appears as the result of a user action ... “
• no display of a textual message
• two different backgrounds
• the closer the top, the more visible
• be aware of mistakenly tapping the bottom button instead of Home button
![Page 56: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/56.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Table View„ ... presents data in a single-column list of multiple rows.“
• provide feedback when user select a list item
• display content immediately
• plain / group style
• different table-view elements
![Page 57: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/57.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Text View
„ ... is a region that displays multiple lines of text ....“
![Page 58: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/58.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Different Application Controls„Remember that users expect familiar controls to behave as they to in the built-in applications.“
• Activity Indicators
• Date and Time Pickers
• Disclosure Buttons
• Info Buttons
• Labels
• Page Indicators
• Pickers
• Progress Views
• Rounded Rectangle Buttons
• Search Bars
• Segmented Controls
• Sliders
• Text Fields
![Page 59: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/59.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Sytem Provided Buttons„ ... promote a consistent user experience and make your job easier.“
![Page 60: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/60.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Creating Custom Iconsand Images
http://www.flickr.com/photos/conorpendergrast/2634918994
![Page 61: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/61.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Application Icons„This is a place where branding and strong visual design should come together into a compact, instantly instantly recognizable, attractive package.“
• rounded corners, drop shadow, reflective shine automatically added
• measures 57*57 pixel (114*114 for high resolution)
• small icon for spotlight search (29*29; 58*58 high resolution)
![Page 62: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/62.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Launch Images„To enhance the user‘s experience at application launch ... .“
• should not an about window, branding elements
• measures 320*480 pixel (640*940 high resolution)
• it is solely intended to enhance the user‘s perception, as quick launch, ready for use
![Page 63: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/63.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
Icons for ...
„do not redesign standard buttons“
• simple and streamlined
• not easily mistaken
• readily understood and widely acceptable
![Page 64: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/64.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
http://www.youtube.com/watch?v=jdExukJVUGI
iPad - New Way for Applications
![Page 65: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/65.jpg)
iPhone Human Interface Guidlines - Martin Ebner 2011
http://elearningblog.tugraz.at/archives/2994
What happens when you hand a 3-year-old an iPhone?
![Page 66: iPhone - Human Interface Guidelines](https://reader034.vdocuments.us/reader034/viewer/2022052618/54b8de364a7959a61e8b4580/html5/thumbnails/66.jpg)
Graz University of Technology
SOCIAL LEARNINGComputer and Information Services
Graz University of Technology
Martin Ebner
http://elearning.tugraz.at
http://elearningblog.tugraz.at
Grab and Search your Tweets http://grabeeter.tugraz.at
Slides available at: http://elearningblog.tugraz.at
mebner