SlideShare a Scribd company logo
1 of 57
Download to read offline
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

More Related Content

What's hot

Introducing Apple New iPad(iPad 4th generation)
Introducing Apple New iPad(iPad 4th generation)Introducing Apple New iPad(iPad 4th generation)
Introducing Apple New iPad(iPad 4th generation)
JJ Wu
 
iTunes App Store Submission Process
iTunes App Store Submission ProcessiTunes App Store Submission Process
iTunes App Store Submission Process
Anscamobile
 

What's hot (20)

App Publishing for Museums - iPhone, iPad and beyond
App Publishing for Museums - iPhone, iPad and beyondApp Publishing for Museums - iPhone, iPad and beyond
App Publishing for Museums - iPhone, iPad and beyond
 
Introducing Apple New iPad(iPad 4th generation)
Introducing Apple New iPad(iPad 4th generation)Introducing Apple New iPad(iPad 4th generation)
Introducing Apple New iPad(iPad 4th generation)
 
iPhone Development: Zero to Sixty
iPhone Development: Zero to SixtyiPhone Development: Zero to Sixty
iPhone Development: Zero to Sixty
 
iPhone transfer software
iPhone transfer softwareiPhone transfer software
iPhone transfer software
 
iCloud
iCloudiCloud
iCloud
 
iPhone Applications & Luxury Brands - Updated May 5, 2010
iPhone Applications & Luxury Brands - Updated May 5, 2010iPhone Applications & Luxury Brands - Updated May 5, 2010
iPhone Applications & Luxury Brands - Updated May 5, 2010
 
How to market your app
How to market your appHow to market your app
How to market your app
 
iOS Human Interface Guidlines for iOS-Platforms
iOS Human Interface Guidlines for iOS-PlatformsiOS Human Interface Guidlines for iOS-Platforms
iOS Human Interface Guidlines for iOS-Platforms
 
iTunes App Store Submission Process
iTunes App Store Submission ProcessiTunes App Store Submission Process
iTunes App Store Submission Process
 
App development
App developmentApp development
App development
 
Best Practice iPhone SDK App Design
Best Practice iPhone SDK App DesignBest Practice iPhone SDK App Design
Best Practice iPhone SDK App Design
 
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOPIntroduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
 
iPhone Development Quick Start
iPhone Development Quick StartiPhone Development Quick Start
iPhone Development Quick Start
 
iPhone / iPad - Human Interface Guidelines
iPhone / iPad - Human Interface GuidelinesiPhone / iPad - Human Interface Guidelines
iPhone / iPad - Human Interface Guidelines
 
Secured Mobile Application Development in Android, Blackberry & iOS
Secured Mobile Application Development in Android, Blackberry & iOSSecured Mobile Application Development in Android, Blackberry & iOS
Secured Mobile Application Development in Android, Blackberry & iOS
 
Development of Mobile Application -PPT
Development of Mobile Application -PPTDevelopment of Mobile Application -PPT
Development of Mobile Application -PPT
 
iPhone Apps - What, how, why?
iPhone Apps - What, how, why?iPhone Apps - What, how, why?
iPhone Apps - What, how, why?
 
Introduction to Mobile Application Development
Introduction to Mobile Application DevelopmentIntroduction to Mobile Application Development
Introduction to Mobile Application Development
 
Distimo report full year 2010
Distimo report   full year 2010Distimo report   full year 2010
Distimo report full year 2010
 
iOS design: a case study
iOS design: a case studyiOS design: a case study
iOS design: a case study
 

Viewers also liked

Graphical User Interface (GUI) - 2
Graphical User Interface (GUI) - 2Graphical User Interface (GUI) - 2
Graphical User Interface (GUI) - 2
PRN USM
 
iOS Platform & Architecture
iOS Platform & ArchitectureiOS Platform & Architecture
iOS Platform & Architecture
krishguttha
 
Graphical User Interface (GUI) - 1
Graphical User Interface (GUI) - 1Graphical User Interface (GUI) - 1
Graphical User Interface (GUI) - 1
PRN USM
 
Introduction to HCI
Introduction to HCI Introduction to HCI
Introduction to HCI
Deskala
 
BRAIN COMPUTER INTERFACE
BRAIN COMPUTER INTERFACEBRAIN COMPUTER INTERFACE
BRAIN COMPUTER INTERFACE
nitish_kumar
 

Viewers also liked (20)

iOS Human Interface Guideline
iOS Human Interface GuidelineiOS Human Interface Guideline
iOS Human Interface Guideline
 
Graphical User Interface (GUI) - 2
Graphical User Interface (GUI) - 2Graphical User Interface (GUI) - 2
Graphical User Interface (GUI) - 2
 
Evolving Glitch Art
Evolving Glitch ArtEvolving Glitch Art
Evolving Glitch Art
 
Summary of Apple watch human interface design guideline
Summary of Apple watch human interface design guidelineSummary of Apple watch human interface design guideline
Summary of Apple watch human interface design guideline
 
Ciekawostki o serii Diablo
Ciekawostki o serii DiabloCiekawostki o serii Diablo
Ciekawostki o serii Diablo
 
Glitch Studies Manifesto
Glitch Studies ManifestoGlitch Studies Manifesto
Glitch Studies Manifesto
 
Graphical User Interface
Graphical User InterfaceGraphical User Interface
Graphical User Interface
 
Gui
GuiGui
Gui
 
iOS Platform & Architecture
iOS Platform & ArchitectureiOS Platform & Architecture
iOS Platform & Architecture
 
HCI Basics
HCI BasicsHCI Basics
HCI Basics
 
Week 4 IxD History: Personal Computing
Week 4 IxD History: Personal ComputingWeek 4 IxD History: Personal Computing
Week 4 IxD History: Personal Computing
 
Chapter 2 — Program and Graphical User Interface Design
Chapter 2 — Program and Graphical User Interface DesignChapter 2 — Program and Graphical User Interface Design
Chapter 2 — Program and Graphical User Interface Design
 
Graphical User Interface (GUI) - 1
Graphical User Interface (GUI) - 1Graphical User Interface (GUI) - 1
Graphical User Interface (GUI) - 1
 
Graphical User Interface
Graphical User Interface Graphical User Interface
Graphical User Interface
 
Brain Computer Interface
Brain Computer InterfaceBrain Computer Interface
Brain Computer Interface
 
Android vs iPhone - Differences in UI Patterns and Design
Android vs iPhone - Differences in UI Patterns and DesignAndroid vs iPhone - Differences in UI Patterns and Design
Android vs iPhone - Differences in UI Patterns and Design
 
HCI Presentation
HCI PresentationHCI Presentation
HCI Presentation
 
Introduction to HCI
Introduction to HCI Introduction to HCI
Introduction to HCI
 
BRAIN COMPUTER INTERFACE
BRAIN COMPUTER INTERFACEBRAIN COMPUTER INTERFACE
BRAIN COMPUTER INTERFACE
 
Lecture 1: Human-Computer Interaction Introduction (2014)
Lecture 1: Human-Computer Interaction Introduction (2014)Lecture 1: Human-Computer Interaction Introduction (2014)
Lecture 1: Human-Computer Interaction Introduction (2014)
 

Similar to iPhone - Human Interface Guidelines

iPhone/iPad Human Interface Design
iPhone/iPad Human Interface DesigniPhone/iPad Human Interface Design
iPhone/iPad Human Interface Design
Martin Ebner
 
I Phone Summit Dmeeker Final
I Phone Summit Dmeeker FinalI Phone Summit Dmeeker Final
I Phone Summit Dmeeker Final
rajivmordani
 
Going mobile writing content for mobile
Going mobile  writing content for mobileGoing mobile  writing content for mobile
Going mobile writing content for mobile
Maya Irving-Regev
 

Similar to iPhone - Human Interface Guidelines (20)

Human Interface Guidlines for Mobile Applications
Human Interface Guidlines for Mobile ApplicationsHuman Interface Guidlines for Mobile Applications
Human Interface Guidlines for Mobile Applications
 
Human Computer Interface Guidelines
Human Computer Interface GuidelinesHuman Computer Interface Guidelines
Human Computer Interface Guidelines
 
iPhone/iPad Human Interface Design
iPhone/iPad Human Interface DesigniPhone/iPad Human Interface Design
iPhone/iPad Human Interface Design
 
Communication Design for the Mobile Experience
Communication Design for the Mobile ExperienceCommunication Design for the Mobile Experience
Communication Design for the Mobile Experience
 
Mobile Revolution and Assessment - ATP 2011
Mobile Revolution and Assessment - ATP 2011Mobile Revolution and Assessment - ATP 2011
Mobile Revolution and Assessment - ATP 2011
 
Luke Wroblewski: Mobile First
Luke Wroblewski: Mobile FirstLuke Wroblewski: Mobile First
Luke Wroblewski: Mobile First
 
Smartphones
SmartphonesSmartphones
Smartphones
 
Introducción a iOS
Introducción a iOSIntroducción a iOS
Introducción a iOS
 
iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)iOS Human Interface Guidelines (HCI)
iOS Human Interface Guidelines (HCI)
 
I Phone Summit Dmeeker Final
I Phone Summit Dmeeker FinalI Phone Summit Dmeeker Final
I Phone Summit Dmeeker Final
 
Health Care Clipboard iPad Application
Health Care Clipboard iPad ApplicationHealth Care Clipboard iPad Application
Health Care Clipboard iPad Application
 
"iPhone vs Andriod," Anthony Hand
"iPhone vs Andriod," Anthony Hand"iPhone vs Andriod," Anthony Hand
"iPhone vs Andriod," Anthony Hand
 
eye phone technology
eye phone technologyeye phone technology
eye phone technology
 
AppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs NativeAppTalk Frontline: Web vs Hybrid vs Native
AppTalk Frontline: Web vs Hybrid vs Native
 
Going mobile writing content for mobile
Going mobile  writing content for mobileGoing mobile  writing content for mobile
Going mobile writing content for mobile
 
SoLoMo University by Mobilosoft - Conference 1 - 23/11/2012
SoLoMo University by Mobilosoft - Conference 1 - 23/11/2012SoLoMo University by Mobilosoft - Conference 1 - 23/11/2012
SoLoMo University by Mobilosoft - Conference 1 - 23/11/2012
 
HCI Guidelines for iOS Platforms
HCI Guidelines for iOS PlatformsHCI Guidelines for iOS Platforms
HCI Guidelines for iOS Platforms
 
Building & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The EnterpriseBuilding & Managing The Lifecycle of Mobile Apps For The Enterprise
Building & Managing The Lifecycle of Mobile Apps For The Enterprise
 
Apples’ iPhone, iPod touch and iPad Application Programming - CLASS 1
Apples’ iPhone, iPod touch and iPad Application Programming - CLASS 1Apples’ iPhone, iPod touch and iPad Application Programming - CLASS 1
Apples’ iPhone, iPod touch and iPad Application Programming - CLASS 1
 
Mobile development
Mobile developmentMobile development
Mobile development
 

More from Martin Ebner

More from Martin Ebner (20)

Maker Education
Maker EducationMaker Education
Maker Education
 
Digitalisierung der Lehre – warum, wozu, wie?
Digitalisierung der Lehre –  warum, wozu, wie?Digitalisierung der Lehre –  warum, wozu, wie?
Digitalisierung der Lehre – warum, wozu, wie?
 
Evaluation Design for Learning with Mixed Reality in Mining Education based o...
Evaluation Design for Learning with Mixed Reality in Mining Education based o...Evaluation Design for Learning with Mixed Reality in Mining Education based o...
Evaluation Design for Learning with Mixed Reality in Mining Education based o...
 
Effects of Remote Learning on Practitioner Integration
Effects of Remote Learning on Practitioner IntegrationEffects of Remote Learning on Practitioner Integration
Effects of Remote Learning on Practitioner Integration
 
Making of an Open Makerspace in a Secondary Vocational School in Austria: Dev...
Making of an Open Makerspace in a Secondary Vocational School in Austria: Dev...Making of an Open Makerspace in a Secondary Vocational School in Austria: Dev...
Making of an Open Makerspace in a Secondary Vocational School in Austria: Dev...
 
The relation of prior IT usage, IT skills and field of study: A multiple corr...
The relation of prior IT usage, IT skills and field of study: A multiple corr...The relation of prior IT usage, IT skills and field of study: A multiple corr...
The relation of prior IT usage, IT skills and field of study: A multiple corr...
 
Change of IT equipment and communication applications used by first-semester ...
Change of IT equipment and communication applications used by first-semester ...Change of IT equipment and communication applications used by first-semester ...
Change of IT equipment and communication applications used by first-semester ...
 
School Start Screening Tool
School Start Screening ToolSchool Start Screening Tool
School Start Screening Tool
 
Speech-based Learning with Amazon Alexa
Speech-based Learning with Amazon AlexaSpeech-based Learning with Amazon Alexa
Speech-based Learning with Amazon Alexa
 
www – was wirkt weiter? Hochschule virtuell
www – was wirkt weiter? Hochschule virtuellwww – was wirkt weiter? Hochschule virtuell
www – was wirkt weiter? Hochschule virtuell
 
TU Graz Lessons Learnt COVID-19 & Digitalisierungsprojekte in der Lehre
TU Graz Lessons Learnt COVID-19 & Digitalisierungsprojekte in der LehreTU Graz Lessons Learnt COVID-19 & Digitalisierungsprojekte in der Lehre
TU Graz Lessons Learnt COVID-19 & Digitalisierungsprojekte in der Lehre
 
Digitale Kompetenzen – vom europäischen Rahmenwerk zum Online-Kurs
Digitale Kompetenzen – vom europäischen Rahmenwerk zum Online-KursDigitale Kompetenzen – vom europäischen Rahmenwerk zum Online-Kurs
Digitale Kompetenzen – vom europäischen Rahmenwerk zum Online-Kurs
 
MOOC map (Version 3)
MOOC map (Version 3)MOOC map (Version 3)
MOOC map (Version 3)
 
ReDesign your lecture Canvas [eng]
ReDesign your lecture Canvas [eng]ReDesign your lecture Canvas [eng]
ReDesign your lecture Canvas [eng]
 
ReDesign your lecture Canvas [de]
ReDesign your lecture Canvas [de]ReDesign your lecture Canvas [de]
ReDesign your lecture Canvas [de]
 
MOOC-Maker Canvas [eng]
MOOC-Maker Canvas [eng]MOOC-Maker Canvas [eng]
MOOC-Maker Canvas [eng]
 
MOOC-Maker Canvas [de]
MOOC-Maker Canvas [de]MOOC-Maker Canvas [de]
MOOC-Maker Canvas [de]
 
Digitale Lehre in Zeiten von COVID-19 an einer Technischen Universität
Digitale Lehre in Zeiten von COVID-19 an einer Technischen UniversitätDigitale Lehre in Zeiten von COVID-19 an einer Technischen Universität
Digitale Lehre in Zeiten von COVID-19 an einer Technischen Universität
 
MOOCs als Teil des zukünftigen digitalen Lernens
MOOCs als Teil des zukünftigen digitalen Lernens MOOCs als Teil des zukünftigen digitalen Lernens
MOOCs als Teil des zukünftigen digitalen Lernens
 
Der Ansatz der „Citizen Science“ bei der Erstellung von Lehrmaterialien in ei...
Der Ansatz der „Citizen Science“ bei der Erstellung von Lehrmaterialien in ei...Der Ansatz der „Citizen Science“ bei der Erstellung von Lehrmaterialien in ei...
Der Ansatz der „Citizen Science“ bei der Erstellung von Lehrmaterialien in ei...
 

Recently uploaded

MuleSoft Integration with AWS Textract | Calling AWS Textract API |AWS - Clou...
MuleSoft Integration with AWS Textract | Calling AWS Textract API |AWS - Clou...MuleSoft Integration with AWS Textract | Calling AWS Textract API |AWS - Clou...
MuleSoft Integration with AWS Textract | Calling AWS Textract API |AWS - Clou...
MysoreMuleSoftMeetup
 
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaPersonalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
EADTU
 
SPLICE Working Group: Reusable Code Examples
SPLICE Working Group:Reusable Code ExamplesSPLICE Working Group:Reusable Code Examples
SPLICE Working Group: Reusable Code Examples
Peter Brusilovsky
 
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
EADTU
 

Recently uploaded (20)

MuleSoft Integration with AWS Textract | Calling AWS Textract API |AWS - Clou...
MuleSoft Integration with AWS Textract | Calling AWS Textract API |AWS - Clou...MuleSoft Integration with AWS Textract | Calling AWS Textract API |AWS - Clou...
MuleSoft Integration with AWS Textract | Calling AWS Textract API |AWS - Clou...
 
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH FORM 50 CÂU TRẮC NGHI...
 
OSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & SystemsOSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & Systems
 
Supporting Newcomer Multilingual Learners
Supporting Newcomer  Multilingual LearnersSupporting Newcomer  Multilingual Learners
Supporting Newcomer Multilingual Learners
 
VAMOS CUIDAR DO NOSSO PLANETA! .
VAMOS CUIDAR DO NOSSO PLANETA!                    .VAMOS CUIDAR DO NOSSO PLANETA!                    .
VAMOS CUIDAR DO NOSSO PLANETA! .
 
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptx
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptxAnalyzing and resolving a communication crisis in Dhaka textiles LTD.pptx
Analyzing and resolving a communication crisis in Dhaka textiles LTD.pptx
 
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes GuàrdiaPersonalisation of Education by AI and Big Data - Lourdes Guàrdia
Personalisation of Education by AI and Big Data - Lourdes Guàrdia
 
male presentation...pdf.................
male presentation...pdf.................male presentation...pdf.................
male presentation...pdf.................
 
When Quality Assurance Meets Innovation in Higher Education - Report launch w...
When Quality Assurance Meets Innovation in Higher Education - Report launch w...When Quality Assurance Meets Innovation in Higher Education - Report launch w...
When Quality Assurance Meets Innovation in Higher Education - Report launch w...
 
SPLICE Working Group: Reusable Code Examples
SPLICE Working Group:Reusable Code ExamplesSPLICE Working Group:Reusable Code Examples
SPLICE Working Group: Reusable Code Examples
 
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
 
How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17How to Send Pro Forma Invoice to Your Customers in Odoo 17
How to Send Pro Forma Invoice to Your Customers in Odoo 17
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
 
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjjStl Algorithms in C++ jjjjjjjjjjjjjjjjjj
Stl Algorithms in C++ jjjjjjjjjjjjjjjjjj
 
Rich Dad Poor Dad ( PDFDrive.com )--.pdf
Rich Dad Poor Dad ( PDFDrive.com )--.pdfRich Dad Poor Dad ( PDFDrive.com )--.pdf
Rich Dad Poor Dad ( PDFDrive.com )--.pdf
 
Basic Civil Engineering notes on Transportation Engineering & Modes of Transport
Basic Civil Engineering notes on Transportation Engineering & Modes of TransportBasic Civil Engineering notes on Transportation Engineering & Modes of Transport
Basic Civil Engineering notes on Transportation Engineering & Modes of Transport
 
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
24 ĐỀ THAM KHẢO KÌ THI TUYỂN SINH VÀO LỚP 10 MÔN TIẾNG ANH SỞ GIÁO DỤC HẢI DƯ...
 
An overview of the various scriptures in Hinduism
An overview of the various scriptures in HinduismAn overview of the various scriptures in Hinduism
An overview of the various scriptures in Hinduism
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT TOÁN 2024 - TỪ CÁC TRƯỜNG, TRƯỜNG...
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 

iPhone - Human Interface Guidelines

  • 1. iPhone - Human Interface Guidelines Martin Ebner The presentation bases on http://developer.apple.com/iphone/library/documentation/userexperience/ conceptual/mobilehig/Introduction/Introduction.html
  • 2. Do we need Usability? http://www.flickr.com/photos/rdolishny/2760207306
  • 3. The future is mobile http://flickr.com/photos/thomcochrane/416206133/
  • 4. Fun - just in time - for your target group http://www.flickr.com/photos/161/
  • 5. iPhone / iPad just another device? http://www.flickr.com/photos/kiki99/1031313718
  • 6. „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
  • 7. „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
  • 8. „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
  • 9. „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
  • 10. 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
  • 12. iPhone - HI Guidelines Planning your iPhone Software Product Designing the User Interface of your iPhone Application iPhone Human Interface Guidlines - Martin Ebner 2010
  • 13. iPhone - HI Guidelines Planning your iPhone Software Product Designing the User Interface of your iPhone Application iPhone Human Interface Guidlines - Martin Ebner 2010
  • 14. iPhone OS Platform Rich with Possibilites http://www.flickr.com/photos/shuffle-art/1441940051 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. 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
  • 24. 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
  • 25. Characteristics of Great iPhone Applications http://www.flickr.com/photos/rivalee/2939042459 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 26. 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
  • 27. 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
  • 28. Communicate Effectively „ ... avoid technical jargon in the user interface“ • Feedback is important • use user-centric terminology iPhone Human Interface Guidlines - Martin Ebner 2010
  • 29. 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
  • 30. Handling Common Tasks http://www.flickr.com/photos/intherough/4263146374 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. .... „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
  • 35. 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
  • 36. iPhone - HI Guidelines Planning your iPhone Software Product Designing the User Interface of your iPhone Application iPhone Human Interface Guidlines - Martin Ebner 2010
  • 37. Brief Tour of the Application User Interface iPhone Human Interface Guidlines - Martin Ebner 2010 http://www.flickr.com/photos/ari/4314027331
  • 38. 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
  • 39. 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
  • 40. 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
  • 41. 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
  • 42. 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
  • 43. 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
  • 44. Alerts, Action Sheets, Modal Views „ ... appear when something requires the user‘s attention ... “ iPhone Human Interface Guidlines - Martin Ebner 2010
  • 45. 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
  • 46. 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
  • 47. 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
  • 48. Text View „ ... is a region that displays multiple lines of text ....“ iPhone Human Interface Guidlines - Martin Ebner 2010
  • 49. 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
  • 50. Sytem Provided Buttons „ ... promote a consistent user experience and make your job easier.“ iPhone Human Interface Guidlines - Martin Ebner 2010
  • 51. Creating Custom Icons and Images iPhone Human Interface Guidlines - Martin Ebner 2010 http://www.flickr.com/photos/conorpendergrast/2634918994
  • 52. 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
  • 53. 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
  • 54. 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
  • 55. iPad - New Way for Applications http://www.youtube.com/watch?v=jdExukJVUGI iPhone Human Interface Guidlines - Martin Ebner 2010
  • 56. What happens when you hand a 3-year-old an iPhone? http://elearningblog.tugraz.at/archives/2994 iPhone Human Interface Guidlines - Martin Ebner 2010
  • 57. 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