• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
iPhone - Human Interface Guidelines
 

iPhone - Human Interface Guidelines

on

  • 18,013 views

lecture slides on course iPhone Application Development at Graz University of Technology

lecture slides on course iPhone Application Development at Graz University of Technology

Statistics

Views

Total Views
18,013
Views on SlideShare
10,664
Embed Views
7,349

Actions

Likes
17
Downloads
355
Comments
3

19 Embeds 7,349

http://uxbite.com 6836
http://elearningblog.tugraz.at 183
http://uxbite.pl 118
http://www.uxbite.pl 94
http://www.slideshare.net 69
http://tugtc.tugraz.at 15
http://www.netvibes.com 11
http://uxbite.home.pl 5
http://wiki.openbit 3
http://feeds.feedburner.com 2
http://blog.uxbite.pl 2
http://tugll.tugraz.at 2
http://ig.gmodules.com 2
http://translate.googleusercontent.com 2
http://tmp.uxbite.com 1
http://witflow 1
chrome-extension://decdfngdidijkdjgbknlnepdljfaepji 1
http://vlpc02.tugraz.at 1
http://intranet.droptica.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    iPhone - Human Interface Guidelines iPhone - Human Interface Guidelines Presentation Transcript

    • iPhone - Human Interface Guidelines Martin Ebner The presentation bases on http://developer.apple.com/iphone/library/documentation/userexperience/ conceptual/mobilehig/Introduction/Introduction.html
    • Do we need Usability? http://www.flickr.com/photos/rdolishny/2760207306
    • The future is mobile http://flickr.com/photos/thomcochrane/416206133/
    • Fun - just in time - for your target group http://www.flickr.com/photos/161/
    • iPhone / iPad just another device? http://www.flickr.com/photos/kiki99/1031313718
    • „The iPhone generates 33% of all smartphone traffic worldwide and 50% in the US“ (AdMob Mobile Metrics, Febr. 2009) http://metrics.admob.com/ iPhone Human Interface Guidlines - Martin Ebner 2010
    • „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 http://metrics.admob.com/ iPhone Human Interface Guidlines - Martin Ebner 2010
    • „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) http://metrics.admob.com/ iPhone Human Interface Guidlines - Martin Ebner 2010
    • „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) http://metrics.admob.com/ iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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." http://www.appleinsider.com/articles/09/08/14/apples_iphone_3gs_has_99_percent_satisfaction_rate.html iPhone Human Interface Guidlines - Martin Ebner 2010
    • http://www.appleinsider.com/articles/09/08/14/apples_iphone_3gs_has_99_percent_satisfaction_rate.html iPhone Human Interface Guidlines - Martin Ebner 2010
    • iPhone - HI Guidelines Planning your iPhone Software Product Designing the User Interface of your iPhone Application iPhone Human Interface Guidlines - Martin Ebner 2010
    • iPhone - HI Guidelines Planning your iPhone Software Product Designing the User Interface of your iPhone Application iPhone Human Interface Guidlines - Martin Ebner 2010
    • iPhone OS Platform Rich with Possibilites http://www.flickr.com/photos/shuffle-art/1441940051 iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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 • Memory is not unlimted • One Screen at a Time • One Application at a Time • Minimal User Help iPhone Human Interface Guidlines - Martin Ebner 2010
    • What Are Your Options? „Depending on the implementation details and its intended audience, some types of software may be better suited to you 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) iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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? iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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 iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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 iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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 iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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 iPhone Human Interface Guidlines - Martin Ebner 2010
    • Case Study: Mail „ ... when people are mobile, their needs for an email application are simpler, and they want access to core functionality quickly.“ iPhone Human Interface Guidlines - Martin Ebner 2010
    • Human Interface Principles http://www.flickr.com/photos/wonderlane/4315076635 iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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) iPhone Human Interface Guidlines - Martin Ebner 2010
    • Characteristics of Great iPhone Applications http://www.flickr.com/photos/rivalee/2939042459 iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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) iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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? iPhone Human Interface Guidlines - Martin Ebner 2010
    • Communicate Effectively „ ... avoid technical jargon in the user interface“ • Feedback is important • use user-centric terminology iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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.“ iPhone Human Interface Guidlines - Martin Ebner 2010
    • Handling Common Tasks http://www.flickr.com/photos/intherough/4263146374 iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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 iPhone Human Interface Guidlines - Martin Ebner 2010
    • Stopping „iphone Applications should never quit pogrammatically“ • 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 iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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 iPhone Human Interface Guidlines - Martin Ebner 2010
    • .... „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 iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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 iPhone Human Interface Guidlines - Martin Ebner 2010
    • iPhone - HI Guidelines Planning your iPhone Software Product Designing the User Interface of your iPhone Application iPhone Human Interface Guidlines - Martin Ebner 2010
    • Brief Tour of the Application User Interface iPhone Human Interface Guidlines - Martin Ebner 2010 http://www.flickr.com/photos/ari/4314027331
    • Main parts of application screen „Every application, regardless of type, has an application window“ • Status Bar • Navigation Bar • Tab Bar • Toolbar iPhone Human Interface Guidlines - Martin Ebner 2010
    • Users are accustomed to the look and behavior of standard views and controls iPhone Human Interface Guidlines - Martin Ebner 2010 http://www.flickr.com/photos/r_catalano/4180965353
    • 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 iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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 iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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 iPhone Human Interface Guidlines - Martin Ebner 2010
    • Tab Bars „ If you application provides different perspectives on the same set of data, ... .“ • icons and text, all equal in widht 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 iPhone Human Interface Guidlines - Martin Ebner 2010
    • Alerts, Action Sheets, Modal Views „ ... appear when something requires the user‘s attention ... “ iPhone Human Interface Guidlines - Martin Ebner 2010
    • Alerts „ ... give users criticial information in a highly visible way. “ • minize the number of alerts • ask for comfirmation • single / double button alert iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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 iPhone Human Interface Guidlines - Martin Ebner 2010
    • 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 iPhone Human Interface Guidlines - Martin Ebner 2010
    • Text View „ ... is a region that displays multiple lines of text ....“ iPhone Human Interface Guidlines - Martin Ebner 2010
    • Different Application Controls „Remember that users expect familiar controls to behave as they to in the built-in applications.“ • Activity Indicators • Progress Views • Date and Time Pickers • Rounded Rectangle Buttons • Disclosure Buttons • Search Bars • Info Buttons • Segmented Controls • Labels • Sliders • Page Indicators • Text Fields • Pickers iPhone Human Interface Guidlines - Martin Ebner 2010
    • Sytem Provided Buttons „ ... promote a consistent user experience and make your job easier.“ iPhone Human Interface Guidlines - Martin Ebner 2010
    • Creating Custom Icons and Images iPhone Human Interface Guidlines - Martin Ebner 2010 http://www.flickr.com/photos/conorpendergrast/2634918994
    • 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 • small icon for spotlight search (29*29) iPhone Human Interface Guidlines - Martin Ebner 2010
    • Launch Images „To enhance the user‘s experience at application launch ... .“ • should not an about window, branding elements • measures 320*480 pixel • it is solely intended to enhance the user‘s perception, as quick launch, ready for use iPhone Human Interface Guidlines - Martin Ebner 2010
    • Icons for ... „do not redesign standard buttons“ • simple and streamlined • not easily mistaken • readily understood and widely acceptable iPhone Human Interface Guidlines - Martin Ebner 2010
    • iPad - New Way for Applications http://www.youtube.com/watch?v=jdExukJVUGI iPhone Human Interface Guidlines - Martin Ebner 2010
    • What happens when you hand a 3-year-old an iPhone? http://elearningblog.tugraz.at/archives/2994 iPhone Human Interface Guidlines - Martin Ebner 2010
    • SOCIAL LEARNING Institute of Information Systems and Computer Media Graz University of Technology Graz University of Technology Martin Ebner http://elearning.tugraz.at http://elearningblog.tugraz.at