SlideShare ist ein Scribd-Unternehmen logo
1 von 119
Downloaden Sie, um offline zu lesen
Human Interface Guidelines
                   for Mobile Applications
                                               Martin Ebner




                                         The presentation bases on

             http://developer.apple.com/library/ios/#documentation/UserExperience/
                      Conceptual/MobileHIG/Introduction/Introduction.html
                                      (iOS - V 2013-03-01)
                         http://developer.android.com/design/index.html
                                     (Android V 2013-03-01)


http://www.flickr.com/photos/kyz/3233710827                    http://www.flickr.com/photos/mujitra/5480146781
Do we need Usability?




                   http://www.flickr.com/photos/rdolishny/2760207306
The future is mobile




http://flickr.com/photos/thomcochrane/416206133/
Future is mobile




http://i.imgur.com/r9Rov.png
http://i.imgur.com/r9Rov.png
http://i.imgur.com/r9Rov.png
http://i.imgur.com/r9Rov.png
http://i.imgur.com/r9Rov.png
http://i.imgur.com/r9Rov.png
iPhone / iPad
                            just another device?




http://www.flickr.com/photos/kiki99/1031313718
"The iPhone generates 33% of all mobile
 smartphone traffic worldwide and 50% in
 the US."                                                               AdMob Mobile Metrics, 2009
                                                     http://de.admob.com/s/solutions/metrics?_cd=1




http://www.flickr.com/photos/pleasewait/2272096624
http://www.androidpit.de/de/android/blog/394061/
    Weltweite-Smartphone-Verkaufszahlen-Android-
                                    Nummer-Eins
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

Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
http://www.appleinsider.com/articles/09/08/14/apples_iphone_3gs_has_99_percent_satisfaction_rate.html



Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Apps usable for everyone?
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
ADS
                                                  „ ... pick the few features, most frequently used, by
                                                  the majority of your users, most appropriated for the
                                                  mobile ...“



                        Application Definiton Statement



            {your differentiator} {your solution} for {your audience}




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
ADS
                                                  „ ... pick the few features, most frequently used, by
                                                  the majority of your users, most appropriated for the
                                                  mobile ...“


    Example:
     {easy to use} {digital photo sharing} for {casual iphone users}


    Note - this is a new app
   {easy to use} {digital photo sharing} for {professional iphone
   users}


Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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!




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
App Design Strategy

                                                  „ ... great apps begin with a great idea ...“




      • Create an App Definition Statement (ADS)
      • Design the App for the device
      • Tailor Customization to the task
      • Prototype and iterate



Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
iPhone / Android-
              HI Guidelines



                    Planning your mobile
                    Software Product



                    Designing the User
                    Interface of your
                    mobile Application



Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
iPhone / Android-
              HI Guidelines



                    Planning your mobile
                    Software Product



                    Designing the User
                    Interface of your
                    mobile Application



Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
iPhone OS Platform
       Rich with Possibilites
  http://www.flickr.com/photos/shuffle-art/1441940051
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Platform Differences 1/2
                                                  „An iPhone OS-based device is not a desktop or
                                                  laptop computer, and an iPhone application is not the
                                                  same as a desktop application.“

      • The display is paramount
           Compact Sreen Size - 480*320 pixels (iPhone 3 and
           lower), 960*640 pixels (since iPhone 4), 1024*768 pixels
           (iPad)

      • Device orientation can change to any time
      • Memory is not unlimted
      • Apps Respond to gestures, not clicks
      • One screen at a time
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Platform Differences 2/2
                                                  „An iPhone OS-based device is not a desktop or
                                                  laptop computer, and an iPhone application is not the
                                                  same as a desktop application.“




      • Preferences are available in settings
      • Apps have a more or less just on single window
      • Minimal User Help
      • Two Types of Software Run in iOS
      • Safari on iOS provides the Web Interface

Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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)


Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
3 Application Styles
                                                  „... applicaton styles, based on visual and behavioral
                                                  characterstics, data model, and user experience.“



      • What do you expect to be the user‘s motivation for using
           the application?

      • What do you itend to be the user‘s experience while
           using the application?

      • What is the goal or focus of the application?
      • How does the application organize and display the
           information people care about?


Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Productivity Applications
                                                  „ ... enables tasks that are based on the organization
                                                  and manipulation of detailed information“




      • Organizing the list
      • Adding and subcontracting
      • Drilling down, performing
           tasks on reached level




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Utility Applications
                                                  „ ... perfoms a simply task that requires a minimum of
                                                  user input.“




      • visually attractive
      • enhancement of information
           display

      • Organize of information into a
           flattened list of items; no
           hierachy



Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Immersive Applications
                                                  „ ... offers a full-screen, visually rich environment
                                                  that‘s focused on the content and the user‘s
                                                  experience with that content“

      • tends to hide much of device‘s user interface
      • use of nonstandards controls appropriate
      • information presentation
           in the context of
           game-play, story or
           experience




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Choosing an App Style

                                                  „When in doubt, keep it simple.“




      • Pare the feature list to the minimum
      • To bring ideas from you desktop application to an iPhone
           application, apply the 80-20 rule (the largest percentage
           of users will use a very limited number of features)

      • Find the core tasks



Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Case Study: Mail
                                                  „ ... when people are mobile, their needs for an email
                                                  application are simpler, and they want access to core
                                                  functionality quickly.“




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Design the App For the Device
                                                  „... you need to make sure that your app looks and
                                                  feels like it was designed expressly for an iOS-based
                                                  device.“


      • Embrace iOS UI paradigms (controls should look tappabel,
           App structure should be clean, ...)

      • Ensure that unvirsal apps run well on both
           (iPhone and iPad)

      • Reconsider web-based designs
      • Tailor customization to the task
      • Prototype and Iterate

Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
From iPhone to iPad Application




 http://www.flickr.com/photos/scolirk/4652688063
iPad Human Interface Guidlines - Martin Ebner 2010
Compatibility Mode
                                               „Unmodified, iPhone applications are running in a
                                               compatibility mode on iPad, but it does not give them
                                               the device-specific experience they want.“


    • Games and other immersive iPhone applications may
         not need much change in information architecture,
         because they are experience driven. In general they need
         a siginificant revision of artwork and interaction.

    • iPhone productivity applications tend to require some
         rearchitecting of the information hierachy, in addation to
         an enriched UI and an enhanced user experience.

    • Utility applications need be reenvisioned for iPad so that
         they can take advantage of the larger screen.

iPad Human Interface Guidlines - Martin Ebner 2010
Running on the iPhone 5
                                               „... many apps look good simply by displaying more
                                               of their existing UI ...“




    • Allow more content to be revealed automtically
    • Stretch content regions
    • Stretch background areas between content regions
    • Recenter dominant visual elements
    • Expand custom artwork


iPad Human Interface Guidlines - Martin Ebner 2010
Android Design
       Principles
   http://www.flickr.com/photos/richardstowey/5485817879
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Design Principles (1/3)

                                                  „ ... to keep users' best interests in mind ...“



      • Delight me in suprising ways
      • Real objects are more fun than buttons and menues
      • Let me make it mine
      • Get to know me
      • Keep it brief
      • Pictures are faster than words

Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Design Principles (2/3)

                                                  „ ... to keep users' best interests in mind ...“



      • Decide for me but let me have the final say
      • Only show what I need when I need it
      • I should always know where I am
      • Never lose my stuff
      • If it looks the same, it should act the same
      • Only interrupt me if it‘s important

Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Design Principles (3/3)

                                                  „ ... to keep users' best interests in mind ...“




      • Give me tricks that work everywhere
      • It‘s not my fault
      • Sprinkle encouragement
      • Do the heavy lifting for me
      • Make important things fast


Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Human Interface Principles




 http://www.flickr.com/photos/wonderlane/4315076635
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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)
      • Consistency (application has to take the standards)
      • 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)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
User Experience
                                                                          Guidelines


    http://www.flickr.com/photos/rivalee/2939042459
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Focus on the Primary Task
                                                  „An iPhone Application that establishes and maintains
                                                  focus on its primary functionality is satisfying and
                                                  enjoyable to use“




      • What is most important in each context?
      • Is the provided information essential, does a user need
           this information right now?




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Build in Simplicty/Ease of Use
                                                  „ ... users are probably doing other things while they
                                                  simultaneously use your application“

      • Elevate the content that people care about
      • Think Top Down - High level Information near the top of
           the screen

      • Minimize text input and Keep essential information
           succinctly.

      • Make usage easy and obvious
      • Give people a logical path to follow
      • Provide a fingertip-size target area for all tappable
           elements (calculator example: 44*44 pixel)
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Communicate Effectively

                                                  „ ... avoid technical jargon in the user interface“



      • Feedback is important
      • use user-centric terminology
      • Enable collaboration and
           connectedness

      • Start Instantly
      • Always be prepared to stop
      • Don‘t quit programmatically
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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.“




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Think about each detail

                                                  „ ... iOS devices are personal devices, but ...“



      • Downplay File-Handling Operations
      • Enable Collaboration and Connectedness
      • De-emphasize Settings
      • Brand appropriately
      • Make search quick and rewarding
      • Use UI Elements consistently

Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Graphical Interface - don‘t
                                                  forget about it
                                                  „ Rich, beautiful, engaging graphics draw people into
                                                  an application and make the simplest task
                                                  rewarding....“


      • Consider Adding Physicality and Realism
      • Delight People with Stunning Graphics
      • Use subtle Animation to communicate
      • Ask People to save only when
           necessary

      • Handle Orientation Changes

Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
For iPad 1/2




      • Enhance Interactivity
      • Reduce Full-Screen Transitions (update only the areas of
           the UI that need it)

      • Restrain your information hierachy (more information in
           just one place)

      • Migrate Toolbar Content to the Top


Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
For iPad 2/2
                                                  „Consider Using Popovers for some modal tasks...“




      • Does the task require more than one type of input?
      • Does the taks require people to drill down through a
           hierachy of views?

      • Might people want to something
           in the main view before they
           finish the task?

      • Is the task fairly in-depth and
           does it represent one of the
           application‘s main functions?
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
iOS Technology
                                                                        Usage Guidlines




 http://www.flickr.com/photos/intherough/4263146374
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
iCloud Storage
                                                 „iCloud storage helps people access the content they
                                                 care about regardless of which device they are
                                                 currently using.“

      • Respect the user‘s iCloud account
      • Determine which types of information to store
      • Make sure your app behaves reasonably when iCloud
           storage is unavailable

      • Avoid asking users to choose which documents to store
      • Warn users about the consequences of deleting a
           document

      • Be sure to include the user‘s iCloud content in searches
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Routing
                                                 „Maps displays a list of routing apps when people
                                                 want transit information for a route.“




      • Focus on the route
      • Provide information for every step of a route
      • Enrich map views with additional information
      • Give users different ways to sort mulitple transit optionss
      • Consider using push notifications
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Social Media
                                                 „People expect to have access to their favorite social
                                                 media accounts regardless of their current context.“




      • Give users a convinient way to compose without leaving
           your app

      • Avoid asking users to sign into a social media account
      • Consider using an acitivty view controller to help users
           choose one of their social media accounts




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Multitasking
                                                 „ Multitasking allows people to switch quickly among
                                                 recently used applications, because apps can be
                                                 suspended in the background when they are quit.“

      • Be ready for interruptions, and ready to
           resume

      • Make sure your UI can handle the double-
           high status bar

      • Be ready to pause activities that require
           people’s attention or active participation

      • Ensure that your audio behaves
           appropriately


Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Multitasking
                                                 „ Multitasking allows people to switch quickly among
                                                 recently used applications, because apps can be
                                                 suspended in the background when they are quit.“




      • Use local notifications sparingly
      • When appropriate, finish user-initiated
           tasks in the background.




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Notification Center 1/2
                                                 „... gives a user a single, convenient place in which to
                                                 view notifications from their apps.“



   • Keep badge contents up to date
   • Don‘t send multiple notifications for the
        same event

   • Provide a custom message that does not
        include your app name

   • Provide a sound that users can choose to
        hear when a notification arrives


Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Notifications
                                                 „... are brief messages that users can access at any
                                                 time from the status bar..“




   • Make it personal
   • Navigate to the right place
   • Correctly set and manage notification
        priority

   • Make it optional


Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Notification Center 2/2
                                                 „iOS apps that support local or push notifications can
                                                 use the following notification styles.“


                                                                             Banner


                                                                                    Sound



        Alert
                                                                                            Badge




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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

Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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


Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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



Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Using Sound
                                                  „ ... users always expect to hear alarms that they have
                                                  set.“


      • Ring/Silent Switch (avoid sound if it is not explicity set)
      • Volume Buttons (the user always decided the loudness)
      • Headset and Headphones (plug in headsets means sound
           has to be set privately)

      • Wireless audio (disconnection = pause, connection = no
           pause)

      • Defining the Audio Behavior is essential task

Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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



Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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



Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Settings and Configuration
                                                  „It‘s best when iPhone application do not aks users to
                                                  specify any settings at all“



      • Focus your solutions on the needs of 80 percent of users
      • Get as much information as possible from other sources
      • If you must ask for setup-information, prompt users to
           enter within your application

      • Offer configuration options in the main user interface or
           on the back of a screen



Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
....
                                                  „Don‘t provide a button for a built-in action, because
                                                  users will wonder why there are two ways to do the
                                                  same thing in your application“

      • Support Copy and Paste
      • Support Undo and Redo
      • Enabling Push Notifications (delivery is not guaranteed)
      • Providing Search and Displaying Search Results
      • Using the User‘s Location
      • VoiceOver and Accessibility
      • Edit Menu
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
....
                                                  „Don‘t provide a button for a built-in action, because
                                                  users will wonder why there are two ways to do the
                                                  same thing in your application“




      • In App-Purchase
      • Game Center
      • Location Sercies and Data Privacy
      • Quick Look Docoment Preview



Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Navigation

                                                  „ ... Consistent navigation is an essential component
                                                  of the overall user experience ...“




      • Back button is used to
           navigat in revers
           chronological order

      • Up Button is used to
           navigate on the
           hierachical relationships
           between screens



Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Swipe View
                                                  „ ... Efficient navigation is one of the cornerstones of
                                                  a well-designed app ...“


                       The user can view a list of related data items,
                       such as images, chats, or emails, and then pick
                       one of the items to see the detail contents in a
                       separate screen




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
iPhone / Android-
              HI Guidelines



                    Planning your mobile
                    Software Product



                    Designing the User
                    Interface of your
                    mobile Application



Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Brief Tour of the
   Application User Interface




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
                                                                        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



Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Main parts of application screen
                                                  „Every application, regardless of type, has an
                                                  application window“




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Main parts of application screen
                                                  „Every application, regardless of type, has an
                                                  application window“




         • Status Bar (1)
         • Navigation Bar (2)
         • Combined Bar (3)




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Common App UI
                                                  „... typical Android app consists of action bars and the
                                                  app content area“




            • Main Action Bar (1)
            • View Control (2)
            • Content Area (3)
            • Split Action Bar (4)



Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Users are accustomed to the look and
                     behavior of standard views and controls


Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
                                                                        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




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Activity
                                                  „ ... represents a system-provided or custom
                                                  service ...“



       • each activity is represented by
            an icon and a title

       • two icon styles: looks like an
            app icon or a style that evokes
            like a the Settings icon

       • give users access to a custom
            service

       • describe succintly your service
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Alerts, Action Sheets, Modal Views
                                                  „ ... appear when something requires the user‘s
                                                  attention ... “




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Alerts
                                                  „ ... give users criticial information in a highly visible
                                                  way. “




         • minize the number of alerts
         • ask for confirmation
         • single / double button alert




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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


Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Table View (1/2)
                                                  „ ... 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


Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Table View (2/2)
                                                  „ ... presents data in a single-column list of multiple
                                                  rows.“




         • table view elements
         • different types of table
              views




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Text View

                                                  „ ... is a region that displays multiple lines of text ....“




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Collection View
                                                  „ ... manages and ordered collection and presents
                                                  them in a customizable layout...“




       • display a set of items
       • don‘t use it when a table view
            is a better choice

       • make it easy to select an item
       • use caution if you make
            dynamic layout changes


Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Map View

                                                  „ ... presents geographical data ...“




       • Let users interact with the
            map

       • Use the standard pin colory in
            a consistent way
             - Red (destination point)
             - Green (starting point)
             - Purple (user-specified point)



Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Web View

                                                  „ ... is a region that can display rich HTML code ...“




       • avoid using a web view to
            create an app that looks and
            behaves like a mini
            webbrowser




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Different Application Controls
                                                  „Remember that users expect familiar controls to
                                                  behave as they to in the built-in applications.“

                                                                        • Progress Views
         • Activity Indicators
                                                                        • Rounded Rectangle Buttons
         • Date and Time Pickers
                                                                        • Search Bars
         • Disclosure Buttons
                                                                        • Segmented Controls
         • Info Buttons
                                                                        • Sliders
         • Labels
                                                                        • Text Fields
         • Page Indicators
                                                                        • Refresh Control
         • Pickers
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013   • ...
iPad only: Popover (1/2)
                                              „... is a transient view that can be revealed when
                                              people tap a control or an onscreen area. “


    • can contain table, image
         map, text, web or custom
         views

    • display additional
         information or list or items

    • display contents of left
         pane of a split view-based
         application

    • display an action sheet

iPad Human Interface Guidlines - Martin Ebner 2010
iPad only: Popover (2/2)
                                              „... is a transient view that can be revealed when
                                              people tap a control or an onscreen area. “


    • save users‘ work when they tap outside a popover‘s
         border

    • ensure that the popover arrow points as directly as
         possible to the element

    • make sure people can use popover without seeing the
         application content behind it

    • only one popover should be visible onscreen at a time
    • avoid making it too big

iPad Human Interface Guidlines - Martin Ebner 2010
iPad only: Split View (1/2)
                                              „... is a full screen view that consits of two side-by-
                                              side panes. “




iPad Human Interface Guidlines - Martin Ebner 2010
iPad only: Split View (1/2)
                                              „... is a full screen view that consits of two side-by-
                                              side panes. “


    • only available in iPad
    • use to display persistent information in the left pane and
         related details in the right pane

    • both panes can contain table, image, map, text, web or
         custom views as well as navigation bars, tool bars or tab
         bars

    • avoid creating a right pane that is narrower than the left
         pane (left pane is fixed to 320 points in all orientations)

    • indicate the current selection in the left pane
iPad Human Interface Guidlines - Martin Ebner 2010
Sytem Provided Buttons
                                                  „ ... promote a consistent user experience and make
                                                  your job easier.“




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Bordered action buttons
                                                  „ ... suitable for both navigation bars and toolbars, and
                                                  are available in bordered style only.“




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Standard Icons

                                                  „ ... for Use in Tab Bars.“




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Devices and Displays
                                                  „ Android powers millions of phones, tablets, and
                                                  ohter devices.“




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Themes
                                                  „ ... for applying a consistent style to an app or
                                                  activity ...“




         • Holo Light
         • Holo Dark
         • Holo Light with dark action
              bars




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Touch Feedback

                                                  „ ... use color and illumation to respond to touches ...“




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
48dp Rhythm
                                                  „ ... UI components are generally laid out along 48dp
                                                  units ...“




         • recommended target
               size for touchscreen
               objects

         • good compromise
               between information
               density on one hand

Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Typography
                                                  „ ... design language relies on traditional typographic
                                                  tools such as scale, space, rhythm, and alignment with
                                                  an underlying grid ...“


         • Contrast in type sizes
               can go a long way to
               create ordered,
               understandable
               layouts

         • Users can select a
               system-wide scaling
               factor for text in the
               Settings app


Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Color

                                                  „ ... Use color primarily for emphasis ...“




                    • choose colors that fit with your brand
                    • provide good contrast between visual
                         components




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Writing Style

                                                  „ ... When choosing words for your app ...“



      • Keep it brief
      • Keep it simple
      • Be friendly
      • Put the most important thing first
      • Describe only when necessary and no more
      • Avoid repetition

Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Action Bar Icons
                                                  „ ... are graphic buttons that represent the most
                                                  important actions people can take within your app ...“




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Small / Contextual Icons
                                                  „ ... use small icons to surface actions and/or provide
                                                  status for specific items. ...“




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Notification Icons
                                                  „ ... provide an icon that the system can display in the
                                                  status bar whenever a new notification is available ...“




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Creating Custom Icons
   and Images




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
                                                                        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.“




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Launcher
                                                  „ ... is the visual representation of your app on the
                                                  Home or All Apps screen.“




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
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


Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Icons for ...

                                                  „do not redesign standard buttons“


        • simple and streamlined
        • not easily mistaken
        • readily understood and widely acceptable
        • Use color and shadow judiciously to help the icon
             tell its story

        • Create an idealized version of the subject rather
             than using a photo

        • Don‘t use replicas of Apple products
Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Icons for ...

                                                  „do not redesign standard buttons“




        • use universal imagery, easy recognizable
        • generate an idealized version
        • use transparency when it makes sense



Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Tips for Creating Great Artwork
                                                  „The Retina display allows you to display high-
                                                  resolution versiony of your art and icons.“


        • Richer in texture, more detailed and more
             realistic

        • Scale up your original work up to 200%
        • Add detail and depth
        • More realistic and more detailed




Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
iPad - New Way for Applications




                           http://www.youtube.com/watch?v=jdExukJVUGI

Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
What happens when you hand a
                                    3-year-old an iPhone?




                                  http://elearningblog.tugraz.at/archives/2994

Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
Slides available at:   http://elearningblog.tugraz.at


                          SOCIAL LEARNING
                       Computer and Information Services
                         Graz University of Technology


                                      Graz University of Technology




                                Martin Ebner
                             martin.ebner@tugraz.at
  mebner                    http://elearning.tugraz.at

Weitere ähnliche Inhalte

Was ist angesagt?

Mobile application design trend & history
Mobile application design trend & historyMobile application design trend & history
Mobile application design trend & historyRawin Windygallery
 
HCI Guidelines for iOS Platforms
HCI Guidelines for iOS PlatformsHCI Guidelines for iOS Platforms
HCI Guidelines for iOS PlatformsMartin Ebner
 
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 EnterpriseApperian
 
Introduction to mobile accessibility
Introduction to mobile accessibilityIntroduction to mobile accessibility
Introduction to mobile accessibilityJon Gibbins
 
A research on i pad device & experience design
A research on i pad   device & experience designA research on i pad   device & experience design
A research on i pad device & experience designVinny Wu
 
Karen N. Johnson - Mobile Testing keynote delivered at Test Istanbul 2013
Karen N. Johnson - Mobile Testing keynote delivered at Test Istanbul 2013Karen N. Johnson - Mobile Testing keynote delivered at Test Istanbul 2013
Karen N. Johnson - Mobile Testing keynote delivered at Test Istanbul 2013Karen N. Johnson
 
Mobile Accessibility (MobA11y)
Mobile Accessibility (MobA11y)Mobile Accessibility (MobA11y)
Mobile Accessibility (MobA11y)Henny Swan
 
Mobile Means Business
Mobile Means BusinessMobile Means Business
Mobile Means BusinessTack Mobile
 
Mobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & TrendsMobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & TrendsAidan Tierney
 
Web and Mobile App Accessibility Testing
Web and Mobile App Accessibility TestingWeb and Mobile App Accessibility Testing
Web and Mobile App Accessibility TestingTechWell
 
2011 mobile technology task force presentation to framingham state university...
2011 mobile technology task force presentation to framingham state university...2011 mobile technology task force presentation to framingham state university...
2011 mobile technology task force presentation to framingham state university...FSU-ITS
 
Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?Effective
 
User experience research and design for enterprise mobiles.pptx
User experience research and design for enterprise mobiles.pptxUser experience research and design for enterprise mobiles.pptx
User experience research and design for enterprise mobiles.pptxDhwani Soni
 
Understanding the Complex Mobile Landscape
Understanding the Complex Mobile Landscape Understanding the Complex Mobile Landscape
Understanding the Complex Mobile Landscape R2integrated
 
Tk2323 lecture 1 introduction to mobile application
Tk2323 lecture 1   introduction to mobile applicationTk2323 lecture 1   introduction to mobile application
Tk2323 lecture 1 introduction to mobile applicationMengChun Lam
 
Planning your Dream Mobile App
Planning your Dream Mobile AppPlanning your Dream Mobile App
Planning your Dream Mobile AppSean Katz
 

Was ist angesagt? (18)

Mobile application design trend & history
Mobile application design trend & historyMobile application design trend & history
Mobile application design trend & history
 
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
 
Introduction to mobile accessibility
Introduction to mobile accessibilityIntroduction to mobile accessibility
Introduction to mobile accessibility
 
A research on i pad device & experience design
A research on i pad   device & experience designA research on i pad   device & experience design
A research on i pad device & experience design
 
Mobile application design & development
Mobile application design & developmentMobile application design & development
Mobile application design & development
 
Karen N. Johnson - Mobile Testing keynote delivered at Test Istanbul 2013
Karen N. Johnson - Mobile Testing keynote delivered at Test Istanbul 2013Karen N. Johnson - Mobile Testing keynote delivered at Test Istanbul 2013
Karen N. Johnson - Mobile Testing keynote delivered at Test Istanbul 2013
 
Mobile Accessibility (MobA11y)
Mobile Accessibility (MobA11y)Mobile Accessibility (MobA11y)
Mobile Accessibility (MobA11y)
 
Mobile Means Business
Mobile Means BusinessMobile Means Business
Mobile Means Business
 
Mobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & TrendsMobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & Trends
 
Web and Mobile App Accessibility Testing
Web and Mobile App Accessibility TestingWeb and Mobile App Accessibility Testing
Web and Mobile App Accessibility Testing
 
2011 mobile technology task force presentation to framingham state university...
2011 mobile technology task force presentation to framingham state university...2011 mobile technology task force presentation to framingham state university...
2011 mobile technology task force presentation to framingham state university...
 
Mobile Strategy
Mobile StrategyMobile Strategy
Mobile Strategy
 
Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?
 
User experience research and design for enterprise mobiles.pptx
User experience research and design for enterprise mobiles.pptxUser experience research and design for enterprise mobiles.pptx
User experience research and design for enterprise mobiles.pptx
 
Understanding the Complex Mobile Landscape
Understanding the Complex Mobile Landscape Understanding the Complex Mobile Landscape
Understanding the Complex Mobile Landscape
 
Tk2323 lecture 1 introduction to mobile application
Tk2323 lecture 1   introduction to mobile applicationTk2323 lecture 1   introduction to mobile application
Tk2323 lecture 1 introduction to mobile application
 
Planning your Dream Mobile App
Planning your Dream Mobile AppPlanning your Dream Mobile App
Planning your Dream Mobile App
 

Andere mochten auch

New Tools for Teachers: Glasgow NQT's
New Tools for Teachers: Glasgow NQT'sNew Tools for Teachers: Glasgow NQT's
New Tools for Teachers: Glasgow NQT'sOllie Bray
 
21st Century Literacy
21st Century Literacy21st Century Literacy
21st Century LiteracySteven Knight
 
Rethink teach
Rethink teachRethink teach
Rethink teachtsiggins
 
uLearning? Future of Education from a technical perspective
uLearning? Future of Education from a technical perspectiveuLearning? Future of Education from a technical perspective
uLearning? Future of Education from a technical perspectiveMartin Ebner
 
Time Management: The Rule of 24
Time Management: The Rule of 24Time Management: The Rule of 24
Time Management: The Rule of 24Nigel Robertson
 
Building 21st century learners from the beginning
Building 21st century learners from the beginningBuilding 21st century learners from the beginning
Building 21st century learners from the beginningmeierjer
 
21st Century Learners and Literacies
21st Century Learners and Literacies21st Century Learners and Literacies
21st Century Learners and Literaciessschwister
 
21stcenturyliteracy 2009institute
21stcenturyliteracy 2009institute21stcenturyliteracy 2009institute
21stcenturyliteracy 2009institutesschwister
 
21st Century Learners and Literacies
21st Century Learners and Literacies21st Century Learners and Literacies
21st Century Learners and Literaciessschwister
 
MOOCs sind keine Lösung? Warum als dann MINT-MOOCs?
MOOCs sind keine Lösung? Warum als dann MINT-MOOCs?MOOCs sind keine Lösung? Warum als dann MINT-MOOCs?
MOOCs sind keine Lösung? Warum als dann MINT-MOOCs?Martin Ebner
 
33 Shocking Helpful Quotes for Online Marketing
33 Shocking Helpful Quotes for Online Marketing33 Shocking Helpful Quotes for Online Marketing
33 Shocking Helpful Quotes for Online MarketingAndrew Morrison
 

Andere mochten auch (13)

New Tools for Teachers: Glasgow NQT's
New Tools for Teachers: Glasgow NQT'sNew Tools for Teachers: Glasgow NQT's
New Tools for Teachers: Glasgow NQT's
 
21st Century Literacy
21st Century Literacy21st Century Literacy
21st Century Literacy
 
Rethink teach
Rethink teachRethink teach
Rethink teach
 
21st Century Classroom
21st Century Classroom21st Century Classroom
21st Century Classroom
 
uLearning? Future of Education from a technical perspective
uLearning? Future of Education from a technical perspectiveuLearning? Future of Education from a technical perspective
uLearning? Future of Education from a technical perspective
 
Leadership
LeadershipLeadership
Leadership
 
Time Management: The Rule of 24
Time Management: The Rule of 24Time Management: The Rule of 24
Time Management: The Rule of 24
 
Building 21st century learners from the beginning
Building 21st century learners from the beginningBuilding 21st century learners from the beginning
Building 21st century learners from the beginning
 
21st Century Learners and Literacies
21st Century Learners and Literacies21st Century Learners and Literacies
21st Century Learners and Literacies
 
21stcenturyliteracy 2009institute
21stcenturyliteracy 2009institute21stcenturyliteracy 2009institute
21stcenturyliteracy 2009institute
 
21st Century Learners and Literacies
21st Century Learners and Literacies21st Century Learners and Literacies
21st Century Learners and Literacies
 
MOOCs sind keine Lösung? Warum als dann MINT-MOOCs?
MOOCs sind keine Lösung? Warum als dann MINT-MOOCs?MOOCs sind keine Lösung? Warum als dann MINT-MOOCs?
MOOCs sind keine Lösung? Warum als dann MINT-MOOCs?
 
33 Shocking Helpful Quotes for Online Marketing
33 Shocking Helpful Quotes for Online Marketing33 Shocking Helpful Quotes for Online Marketing
33 Shocking Helpful Quotes for Online Marketing
 

Ähnlich wie Human Interface Guidlines for Mobile Applications

What is Native App Example.pdf
What is Native App Example.pdfWhat is Native App Example.pdf
What is Native App Example.pdfcodeindus2
 
MOBILE-APP-DEVELOPMENT.for college students
MOBILE-APP-DEVELOPMENT.for college studentsMOBILE-APP-DEVELOPMENT.for college students
MOBILE-APP-DEVELOPMENT.for college studentsAprilJasminePacis
 
Extending softwareintomobile 11 28-2012
Extending softwareintomobile 11 28-2012Extending softwareintomobile 11 28-2012
Extending softwareintomobile 11 28-2012CorSource
 
User-Centered Mobile Concept Development
User-Centered Mobile Concept DevelopmentUser-Centered Mobile Concept Development
User-Centered Mobile Concept DevelopmentSøren Engelbrecht
 
Overview of Enterprise Mobility
Overview of Enterprise MobilityOverview of Enterprise Mobility
Overview of Enterprise MobilityYuvaraj Ilangovan
 
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...Shane Church
 
Mobility testing day_1_ppt
Mobility testing day_1_pptMobility testing day_1_ppt
Mobility testing day_1_pptsayhi2sudarshan
 
iPad Apps for the Enterprise
iPad Apps for the EnterpriseiPad Apps for the Enterprise
iPad Apps for the EnterpriseSukumar Jena
 
Stop Doing the Wrong Mobile Math
Stop Doing the Wrong Mobile MathStop Doing the Wrong Mobile Math
Stop Doing the Wrong Mobile MathSourcebits
 
Mobile Tonic Portfolio
Mobile Tonic PortfolioMobile Tonic Portfolio
Mobile Tonic Portfolioeorteu
 
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARI
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARIMOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARI
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARISivaSankari36
 
Communication Design for the Mobile Experience
Communication Design for the Mobile ExperienceCommunication Design for the Mobile Experience
Communication Design for the Mobile ExperienceDavid Drucker
 
A SMART MOBILE APPS FOR BLIND USER
A SMART MOBILE APPS FOR BLIND USERA SMART MOBILE APPS FOR BLIND USER
A SMART MOBILE APPS FOR BLIND USERKristen Flores
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & DevelopmentRonnie Liew
 
What is the Average Cost to Develop an iPhone App?
What is the Average Cost to Develop an iPhone App?What is the Average Cost to Develop an iPhone App?
What is the Average Cost to Develop an iPhone App?Tariq Mohammad Habib
 
Sumit Kumar_Singh_visualcv_resume
Sumit Kumar_Singh_visualcv_resumeSumit Kumar_Singh_visualcv_resume
Sumit Kumar_Singh_visualcv_resumeSumit Kumar Singh
 
Wrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild WestWrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild WestGinsburg Design
 

Ähnlich wie Human Interface Guidlines for Mobile Applications (20)

What is Native App Example.pdf
What is Native App Example.pdfWhat is Native App Example.pdf
What is Native App Example.pdf
 
MOBILE-APP-DEVELOPMENT.for college students
MOBILE-APP-DEVELOPMENT.for college studentsMOBILE-APP-DEVELOPMENT.for college students
MOBILE-APP-DEVELOPMENT.for college students
 
Extending softwareintomobile 11 28-2012
Extending softwareintomobile 11 28-2012Extending softwareintomobile 11 28-2012
Extending softwareintomobile 11 28-2012
 
User-Centered Mobile Concept Development
User-Centered Mobile Concept DevelopmentUser-Centered Mobile Concept Development
User-Centered Mobile Concept Development
 
Overview of Enterprise Mobility
Overview of Enterprise MobilityOverview of Enterprise Mobility
Overview of Enterprise Mobility
 
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
 
Mobile Prototyping
Mobile PrototypingMobile Prototyping
Mobile Prototyping
 
Mobility testing day_1_ppt
Mobility testing day_1_pptMobility testing day_1_ppt
Mobility testing day_1_ppt
 
iPad Apps for the Enterprise
iPad Apps for the EnterpriseiPad Apps for the Enterprise
iPad Apps for the Enterprise
 
Stop Doing the Wrong Mobile Math
Stop Doing the Wrong Mobile MathStop Doing the Wrong Mobile Math
Stop Doing the Wrong Mobile Math
 
Mobile Tonic Portfolio
Mobile Tonic PortfolioMobile Tonic Portfolio
Mobile Tonic Portfolio
 
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARI
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARIMOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARI
MOBILE APPLICATIONS DEVELOPMENT -ANDROID BY SIVASANKARI
 
Communication Design for the Mobile Experience
Communication Design for the Mobile ExperienceCommunication Design for the Mobile Experience
Communication Design for the Mobile Experience
 
A SMART MOBILE APPS FOR BLIND USER
A SMART MOBILE APPS FOR BLIND USERA SMART MOBILE APPS FOR BLIND USER
A SMART MOBILE APPS FOR BLIND USER
 
Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & Development
 
What is the Average Cost to Develop an iPhone App?
What is the Average Cost to Develop an iPhone App?What is the Average Cost to Develop an iPhone App?
What is the Average Cost to Develop an iPhone App?
 
test
testtest
test
 
Sumit Kumar_Singh_visualcv_resume
Sumit Kumar_Singh_visualcv_resumeSumit Kumar_Singh_visualcv_resume
Sumit Kumar_Singh_visualcv_resume
 
Wrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild WestWrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild West
 
Fundamentals of Mobile App Development Technology
Fundamentals of Mobile App Development TechnologyFundamentals of Mobile App Development Technology
Fundamentals of Mobile App Development Technology
 

Mehr von Martin Ebner

Digitalisierung der Lehre – warum, wozu, wie?
Digitalisierung der Lehre –  warum, wozu, wie?Digitalisierung der Lehre –  warum, wozu, wie?
Digitalisierung der Lehre – warum, wozu, wie?Martin Ebner
 
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...Martin Ebner
 
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 IntegrationMartin Ebner
 
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...Martin Ebner
 
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...Martin Ebner
 
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 ...Martin Ebner
 
School Start Screening Tool
School Start Screening ToolSchool Start Screening Tool
School Start Screening ToolMartin Ebner
 
Speech-based Learning with Amazon Alexa
Speech-based Learning with Amazon AlexaSpeech-based Learning with Amazon Alexa
Speech-based Learning with Amazon AlexaMartin Ebner
 
www – was wirkt weiter? Hochschule virtuell
www – was wirkt weiter? Hochschule virtuellwww – was wirkt weiter? Hochschule virtuell
www – was wirkt weiter? Hochschule virtuellMartin Ebner
 
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 LehreMartin Ebner
 
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-KursMartin Ebner
 
MOOC map (Version 3)
MOOC map (Version 3)MOOC map (Version 3)
MOOC map (Version 3)Martin Ebner
 
ReDesign your lecture Canvas [eng]
ReDesign your lecture Canvas [eng]ReDesign your lecture Canvas [eng]
ReDesign your lecture Canvas [eng]Martin Ebner
 
ReDesign your lecture Canvas [de]
ReDesign your lecture Canvas [de]ReDesign your lecture Canvas [de]
ReDesign your lecture Canvas [de]Martin Ebner
 
MOOC-Maker Canvas [eng]
MOOC-Maker Canvas [eng]MOOC-Maker Canvas [eng]
MOOC-Maker Canvas [eng]Martin Ebner
 
MOOC-Maker Canvas [de]
MOOC-Maker Canvas [de]MOOC-Maker Canvas [de]
MOOC-Maker Canvas [de]Martin Ebner
 
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ätMartin Ebner
 
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 Martin Ebner
 
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...Martin Ebner
 

Mehr von 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...
 

Kürzlich hochgeladen

Textual Evidence in Reading and Writing of SHS
Textual Evidence in Reading and Writing of SHSTextual Evidence in Reading and Writing of SHS
Textual Evidence in Reading and Writing of SHSMae Pangan
 
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxQ4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxlancelewisportillo
 
Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Mark Reed
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptxmary850239
 
Concurrency Control in Database Management system
Concurrency Control in Database Management systemConcurrency Control in Database Management system
Concurrency Control in Database Management systemChristalin Nelson
 
PRINCIPLE & APPLICATIONS OF IMMUNO BLOTTING TECHNIQUES.pptx
PRINCIPLE & APPLICATIONS OF IMMUNO BLOTTING TECHNIQUES.pptxPRINCIPLE & APPLICATIONS OF IMMUNO BLOTTING TECHNIQUES.pptx
PRINCIPLE & APPLICATIONS OF IMMUNO BLOTTING TECHNIQUES.pptxAnupkumar Sharma
 
ROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxVanesaIglesias10
 
Oppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmOppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmStan Meyer
 
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdf
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdfVirtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdf
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdfErwinPantujan2
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONHumphrey A Beña
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxHumphrey A Beña
 
Active Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdfActive Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdfPatidar M
 
MECHANISMS OF DIFFERENT TYPES OF HYPERSENITIVITY REACTIONS.pptx
MECHANISMS OF DIFFERENT TYPES OF HYPERSENITIVITY REACTIONS.pptxMECHANISMS OF DIFFERENT TYPES OF HYPERSENITIVITY REACTIONS.pptx
MECHANISMS OF DIFFERENT TYPES OF HYPERSENITIVITY REACTIONS.pptxAnupkumar Sharma
 
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptxDIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptxMichelleTuguinay1
 
Production of Monoclonal Antibodies by Hybridoma Technology.pptx
Production of Monoclonal Antibodies by Hybridoma Technology.pptxProduction of Monoclonal Antibodies by Hybridoma Technology.pptx
Production of Monoclonal Antibodies by Hybridoma Technology.pptxAnupkumar Sharma
 
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Celine George
 
ICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfVanessa Camilleri
 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4MiaBumagat1
 

Kürzlich hochgeladen (20)

Textual Evidence in Reading and Writing of SHS
Textual Evidence in Reading and Writing of SHSTextual Evidence in Reading and Writing of SHS
Textual Evidence in Reading and Writing of SHS
 
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptxQ4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
Q4-PPT-Music9_Lesson-1-Romantic-Opera.pptx
 
INCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptx
INCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptxINCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptx
INCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptx
 
Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)
 
4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx4.18.24 Movement Legacies, Reflection, and Review.pptx
4.18.24 Movement Legacies, Reflection, and Review.pptx
 
Concurrency Control in Database Management system
Concurrency Control in Database Management systemConcurrency Control in Database Management system
Concurrency Control in Database Management system
 
PRINCIPLE & APPLICATIONS OF IMMUNO BLOTTING TECHNIQUES.pptx
PRINCIPLE & APPLICATIONS OF IMMUNO BLOTTING TECHNIQUES.pptxPRINCIPLE & APPLICATIONS OF IMMUNO BLOTTING TECHNIQUES.pptx
PRINCIPLE & APPLICATIONS OF IMMUNO BLOTTING TECHNIQUES.pptx
 
ROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptx
 
Paradigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTAParadigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTA
 
Oppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmOppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and Film
 
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdf
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdfVirtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdf
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdf
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
 
Active Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdfActive Learning Strategies (in short ALS).pdf
Active Learning Strategies (in short ALS).pdf
 
MECHANISMS OF DIFFERENT TYPES OF HYPERSENITIVITY REACTIONS.pptx
MECHANISMS OF DIFFERENT TYPES OF HYPERSENITIVITY REACTIONS.pptxMECHANISMS OF DIFFERENT TYPES OF HYPERSENITIVITY REACTIONS.pptx
MECHANISMS OF DIFFERENT TYPES OF HYPERSENITIVITY REACTIONS.pptx
 
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptxDIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
DIFFERENT BASKETRY IN THE PHILIPPINES PPT.pptx
 
Production of Monoclonal Antibodies by Hybridoma Technology.pptx
Production of Monoclonal Antibodies by Hybridoma Technology.pptxProduction of Monoclonal Antibodies by Hybridoma Technology.pptx
Production of Monoclonal Antibodies by Hybridoma Technology.pptx
 
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
 
ICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdfICS2208 Lecture6 Notes for SL spaces.pdf
ICS2208 Lecture6 Notes for SL spaces.pdf
 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4
 

Human Interface Guidlines for Mobile Applications

  • 1. Human Interface Guidelines for Mobile Applications Martin Ebner The presentation bases on http://developer.apple.com/library/ios/#documentation/UserExperience/ Conceptual/MobileHIG/Introduction/Introduction.html (iOS - V 2013-03-01) http://developer.android.com/design/index.html (Android V 2013-03-01) http://www.flickr.com/photos/kyz/3233710827 http://www.flickr.com/photos/mujitra/5480146781
  • 2. Do we need Usability? http://www.flickr.com/photos/rdolishny/2760207306
  • 3. The future is mobile http://flickr.com/photos/thomcochrane/416206133/
  • 10. iPhone / iPad just another device? http://www.flickr.com/photos/kiki99/1031313718
  • 11. "The iPhone generates 33% of all mobile smartphone traffic worldwide and 50% in the US." AdMob Mobile Metrics, 2009 http://de.admob.com/s/solutions/metrics?_cd=1 http://www.flickr.com/photos/pleasewait/2272096624
  • 12. http://www.androidpit.de/de/android/blog/394061/ Weltweite-Smartphone-Verkaufszahlen-Android- Nummer-Eins
  • 13. 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 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 15. Apps usable for everyone? Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 16. ADS „ ... pick the few features, most frequently used, by the majority of your users, most appropriated for the mobile ...“ Application Definiton Statement {your differentiator} {your solution} for {your audience} Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 17. ADS „ ... pick the few features, most frequently used, by the majority of your users, most appropriated for the mobile ...“ Example: {easy to use} {digital photo sharing} for {casual iphone users} Note - this is a new app {easy to use} {digital photo sharing} for {professional iphone users} Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 18. 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! Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 19. App Design Strategy „ ... great apps begin with a great idea ...“ • Create an App Definition Statement (ADS) • Design the App for the device • Tailor Customization to the task • Prototype and iterate Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 20. iPhone / Android- HI Guidelines Planning your mobile Software Product Designing the User Interface of your mobile Application Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 21. iPhone / Android- HI Guidelines Planning your mobile Software Product Designing the User Interface of your mobile Application Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 22. iPhone OS Platform Rich with Possibilites http://www.flickr.com/photos/shuffle-art/1441940051 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 23. Platform Differences 1/2 „An iPhone OS-based device is not a desktop or laptop computer, and an iPhone application is not the same as a desktop application.“ • The display is paramount Compact Sreen Size - 480*320 pixels (iPhone 3 and lower), 960*640 pixels (since iPhone 4), 1024*768 pixels (iPad) • Device orientation can change to any time • Memory is not unlimted • Apps Respond to gestures, not clicks • One screen at a time Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 24. Platform Differences 2/2 „An iPhone OS-based device is not a desktop or laptop computer, and an iPhone application is not the same as a desktop application.“ • Preferences are available in settings • Apps have a more or less just on single window • Minimal User Help • Two Types of Software Run in iOS • Safari on iOS provides the Web Interface Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 25. 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) Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 26. 3 Application Styles „... applicaton styles, based on visual and behavioral characterstics, data model, and user experience.“ • What do you expect to be the user‘s motivation for using the application? • What do you itend to be the user‘s experience while using the application? • What is the goal or focus of the application? • How does the application organize and display the information people care about? Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 27. Productivity Applications „ ... enables tasks that are based on the organization and manipulation of detailed information“ • Organizing the list • Adding and subcontracting • Drilling down, performing tasks on reached level Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 28. Utility Applications „ ... perfoms a simply task that requires a minimum of user input.“ • visually attractive • enhancement of information display • Organize of information into a flattened list of items; no hierachy Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 29. Immersive Applications „ ... offers a full-screen, visually rich environment that‘s focused on the content and the user‘s experience with that content“ • tends to hide much of device‘s user interface • use of nonstandards controls appropriate • information presentation in the context of game-play, story or experience Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 30. Choosing an App Style „When in doubt, keep it simple.“ • Pare the feature list to the minimum • To bring ideas from you desktop application to an iPhone application, apply the 80-20 rule (the largest percentage of users will use a very limited number of features) • Find the core tasks Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 31. Case Study: Mail „ ... when people are mobile, their needs for an email application are simpler, and they want access to core functionality quickly.“ Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 32. Design the App For the Device „... you need to make sure that your app looks and feels like it was designed expressly for an iOS-based device.“ • Embrace iOS UI paradigms (controls should look tappabel, App structure should be clean, ...) • Ensure that unvirsal apps run well on both (iPhone and iPad) • Reconsider web-based designs • Tailor customization to the task • Prototype and Iterate Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 33. From iPhone to iPad Application http://www.flickr.com/photos/scolirk/4652688063 iPad Human Interface Guidlines - Martin Ebner 2010
  • 34. Compatibility Mode „Unmodified, iPhone applications are running in a compatibility mode on iPad, but it does not give them the device-specific experience they want.“ • Games and other immersive iPhone applications may not need much change in information architecture, because they are experience driven. In general they need a siginificant revision of artwork and interaction. • iPhone productivity applications tend to require some rearchitecting of the information hierachy, in addation to an enriched UI and an enhanced user experience. • Utility applications need be reenvisioned for iPad so that they can take advantage of the larger screen. iPad Human Interface Guidlines - Martin Ebner 2010
  • 35. Running on the iPhone 5 „... many apps look good simply by displaying more of their existing UI ...“ • Allow more content to be revealed automtically • Stretch content regions • Stretch background areas between content regions • Recenter dominant visual elements • Expand custom artwork iPad Human Interface Guidlines - Martin Ebner 2010
  • 36. Android Design Principles http://www.flickr.com/photos/richardstowey/5485817879 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 37. Design Principles (1/3) „ ... to keep users' best interests in mind ...“ • Delight me in suprising ways • Real objects are more fun than buttons and menues • Let me make it mine • Get to know me • Keep it brief • Pictures are faster than words Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 38. Design Principles (2/3) „ ... to keep users' best interests in mind ...“ • Decide for me but let me have the final say • Only show what I need when I need it • I should always know where I am • Never lose my stuff • If it looks the same, it should act the same • Only interrupt me if it‘s important Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 39. Design Principles (3/3) „ ... to keep users' best interests in mind ...“ • Give me tricks that work everywhere • It‘s not my fault • Sprinkle encouragement • Do the heavy lifting for me • Make important things fast Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 40. Human Interface Principles http://www.flickr.com/photos/wonderlane/4315076635 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 41. 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) • Consistency (application has to take the standards) • 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) Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 42. User Experience Guidelines http://www.flickr.com/photos/rivalee/2939042459 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 43. Focus on the Primary Task „An iPhone Application that establishes and maintains focus on its primary functionality is satisfying and enjoyable to use“ • What is most important in each context? • Is the provided information essential, does a user need this information right now? Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 44. Build in Simplicty/Ease of Use „ ... users are probably doing other things while they simultaneously use your application“ • Elevate the content that people care about • Think Top Down - High level Information near the top of the screen • Minimize text input and Keep essential information succinctly. • Make usage easy and obvious • Give people a logical path to follow • Provide a fingertip-size target area for all tappable elements (calculator example: 44*44 pixel) Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 45. Communicate Effectively „ ... avoid technical jargon in the user interface“ • Feedback is important • use user-centric terminology • Enable collaboration and connectedness • Start Instantly • Always be prepared to stop • Don‘t quit programmatically Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 46. 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.“ Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 47. Think about each detail „ ... iOS devices are personal devices, but ...“ • Downplay File-Handling Operations • Enable Collaboration and Connectedness • De-emphasize Settings • Brand appropriately • Make search quick and rewarding • Use UI Elements consistently Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 48. Graphical Interface - don‘t forget about it „ Rich, beautiful, engaging graphics draw people into an application and make the simplest task rewarding....“ • Consider Adding Physicality and Realism • Delight People with Stunning Graphics • Use subtle Animation to communicate • Ask People to save only when necessary • Handle Orientation Changes Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 49. For iPad 1/2 • Enhance Interactivity • Reduce Full-Screen Transitions (update only the areas of the UI that need it) • Restrain your information hierachy (more information in just one place) • Migrate Toolbar Content to the Top Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 50. For iPad 2/2 „Consider Using Popovers for some modal tasks...“ • Does the task require more than one type of input? • Does the taks require people to drill down through a hierachy of views? • Might people want to something in the main view before they finish the task? • Is the task fairly in-depth and does it represent one of the application‘s main functions? Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 51. iOS Technology Usage Guidlines http://www.flickr.com/photos/intherough/4263146374 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 52. iCloud Storage „iCloud storage helps people access the content they care about regardless of which device they are currently using.“ • Respect the user‘s iCloud account • Determine which types of information to store • Make sure your app behaves reasonably when iCloud storage is unavailable • Avoid asking users to choose which documents to store • Warn users about the consequences of deleting a document • Be sure to include the user‘s iCloud content in searches Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 53. Routing „Maps displays a list of routing apps when people want transit information for a route.“ • Focus on the route • Provide information for every step of a route • Enrich map views with additional information • Give users different ways to sort mulitple transit optionss • Consider using push notifications Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 54. Social Media „People expect to have access to their favorite social media accounts regardless of their current context.“ • Give users a convinient way to compose without leaving your app • Avoid asking users to sign into a social media account • Consider using an acitivty view controller to help users choose one of their social media accounts Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 55. Multitasking „ Multitasking allows people to switch quickly among recently used applications, because apps can be suspended in the background when they are quit.“ • Be ready for interruptions, and ready to resume • Make sure your UI can handle the double- high status bar • Be ready to pause activities that require people’s attention or active participation • Ensure that your audio behaves appropriately Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 56. Multitasking „ Multitasking allows people to switch quickly among recently used applications, because apps can be suspended in the background when they are quit.“ • Use local notifications sparingly • When appropriate, finish user-initiated tasks in the background. Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 57. Notification Center 1/2 „... gives a user a single, convenient place in which to view notifications from their apps.“ • Keep badge contents up to date • Don‘t send multiple notifications for the same event • Provide a custom message that does not include your app name • Provide a sound that users can choose to hear when a notification arrives Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 58. Notifications „... are brief messages that users can access at any time from the status bar..“ • Make it personal • Navigate to the right place • Correctly set and manage notification priority • Make it optional Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 59. Notification Center 2/2 „iOS apps that support local or push notifications can use the following notification styles.“ Banner Sound Alert Badge Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 60. 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 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 61. 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 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 62. 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 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 63. Using Sound „ ... users always expect to hear alarms that they have set.“ • Ring/Silent Switch (avoid sound if it is not explicity set) • Volume Buttons (the user always decided the loudness) • Headset and Headphones (plug in headsets means sound has to be set privately) • Wireless audio (disconnection = pause, connection = no pause) • Defining the Audio Behavior is essential task Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 64. 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 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 65. 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 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 66. Settings and Configuration „It‘s best when iPhone application do not aks users to specify any settings at all“ • Focus your solutions on the needs of 80 percent of users • Get as much information as possible from other sources • If you must ask for setup-information, prompt users to enter within your application • Offer configuration options in the main user interface or on the back of a screen Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 67. .... „Don‘t provide a button for a built-in action, because users will wonder why there are two ways to do the same thing in your application“ • Support Copy and Paste • Support Undo and Redo • Enabling Push Notifications (delivery is not guaranteed) • Providing Search and Displaying Search Results • Using the User‘s Location • VoiceOver and Accessibility • Edit Menu Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 68. .... „Don‘t provide a button for a built-in action, because users will wonder why there are two ways to do the same thing in your application“ • In App-Purchase • Game Center • Location Sercies and Data Privacy • Quick Look Docoment Preview Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 69. Navigation „ ... Consistent navigation is an essential component of the overall user experience ...“ • Back button is used to navigat in revers chronological order • Up Button is used to navigate on the hierachical relationships between screens Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 70. Swipe View „ ... Efficient navigation is one of the cornerstones of a well-designed app ...“ The user can view a list of related data items, such as images, chats, or emails, and then pick one of the items to see the detail contents in a separate screen Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 71. iPhone / Android- HI Guidelines Planning your mobile Software Product Designing the User Interface of your mobile Application Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 72. Brief Tour of the Application User Interface Human Interface Guidlines for Mobile Applications - Martin Ebner 2013 http://www.flickr.com/photos/ari/4314027331
  • 73. Main parts of application screen „Every application, regardless of type, has an application window“ • Status Bar • Navigation Bar • Tab Bar • Toolbar Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 74. Main parts of application screen „Every application, regardless of type, has an application window“ Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 75. Main parts of application screen „Every application, regardless of type, has an application window“ • Status Bar (1) • Navigation Bar (2) • Combined Bar (3) Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 76. Common App UI „... typical Android app consists of action bars and the app content area“ • Main Action Bar (1) • View Control (2) • Content Area (3) • Split Action Bar (4) Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 77. Users are accustomed to the look and behavior of standard views and controls Human Interface Guidlines for Mobile Applications - Martin Ebner 2013 http://www.flickr.com/photos/r_catalano/4180965353
  • 78. 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 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 79. 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 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 80. 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 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 81. 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 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 82. Activity „ ... represents a system-provided or custom service ...“ • each activity is represented by an icon and a title • two icon styles: looks like an app icon or a style that evokes like a the Settings icon • give users access to a custom service • describe succintly your service Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 83. Alerts, Action Sheets, Modal Views „ ... appear when something requires the user‘s attention ... “ Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 84. Alerts „ ... give users criticial information in a highly visible way. “ • minize the number of alerts • ask for confirmation • single / double button alert Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 85. 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 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 86. Table View (1/2) „ ... 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 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 87. Table View (2/2) „ ... presents data in a single-column list of multiple rows.“ • table view elements • different types of table views Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 88. Text View „ ... is a region that displays multiple lines of text ....“ Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 89. Collection View „ ... manages and ordered collection and presents them in a customizable layout...“ • display a set of items • don‘t use it when a table view is a better choice • make it easy to select an item • use caution if you make dynamic layout changes Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 90. Map View „ ... presents geographical data ...“ • Let users interact with the map • Use the standard pin colory in a consistent way - Red (destination point) - Green (starting point) - Purple (user-specified point) Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 91. Web View „ ... is a region that can display rich HTML code ...“ • avoid using a web view to create an app that looks and behaves like a mini webbrowser Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 92. Different Application Controls „Remember that users expect familiar controls to behave as they to in the built-in applications.“ • Progress Views • Activity Indicators • Rounded Rectangle Buttons • Date and Time Pickers • Search Bars • Disclosure Buttons • Segmented Controls • Info Buttons • Sliders • Labels • Text Fields • Page Indicators • Refresh Control • Pickers Human Interface Guidlines for Mobile Applications - Martin Ebner 2013 • ...
  • 93. iPad only: Popover (1/2) „... is a transient view that can be revealed when people tap a control or an onscreen area. “ • can contain table, image map, text, web or custom views • display additional information or list or items • display contents of left pane of a split view-based application • display an action sheet iPad Human Interface Guidlines - Martin Ebner 2010
  • 94. iPad only: Popover (2/2) „... is a transient view that can be revealed when people tap a control or an onscreen area. “ • save users‘ work when they tap outside a popover‘s border • ensure that the popover arrow points as directly as possible to the element • make sure people can use popover without seeing the application content behind it • only one popover should be visible onscreen at a time • avoid making it too big iPad Human Interface Guidlines - Martin Ebner 2010
  • 95. iPad only: Split View (1/2) „... is a full screen view that consits of two side-by- side panes. “ iPad Human Interface Guidlines - Martin Ebner 2010
  • 96. iPad only: Split View (1/2) „... is a full screen view that consits of two side-by- side panes. “ • only available in iPad • use to display persistent information in the left pane and related details in the right pane • both panes can contain table, image, map, text, web or custom views as well as navigation bars, tool bars or tab bars • avoid creating a right pane that is narrower than the left pane (left pane is fixed to 320 points in all orientations) • indicate the current selection in the left pane iPad Human Interface Guidlines - Martin Ebner 2010
  • 97. Sytem Provided Buttons „ ... promote a consistent user experience and make your job easier.“ Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 98. Bordered action buttons „ ... suitable for both navigation bars and toolbars, and are available in bordered style only.“ Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 99. Standard Icons „ ... for Use in Tab Bars.“ Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 100. Devices and Displays „ Android powers millions of phones, tablets, and ohter devices.“ Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 101. Themes „ ... for applying a consistent style to an app or activity ...“ • Holo Light • Holo Dark • Holo Light with dark action bars Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 102. Touch Feedback „ ... use color and illumation to respond to touches ...“ Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 103. 48dp Rhythm „ ... UI components are generally laid out along 48dp units ...“ • recommended target size for touchscreen objects • good compromise between information density on one hand Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 104. Typography „ ... design language relies on traditional typographic tools such as scale, space, rhythm, and alignment with an underlying grid ...“ • Contrast in type sizes can go a long way to create ordered, understandable layouts • Users can select a system-wide scaling factor for text in the Settings app Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 105. Color „ ... Use color primarily for emphasis ...“ • choose colors that fit with your brand • provide good contrast between visual components Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 106. Writing Style „ ... When choosing words for your app ...“ • Keep it brief • Keep it simple • Be friendly • Put the most important thing first • Describe only when necessary and no more • Avoid repetition Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 107. Action Bar Icons „ ... are graphic buttons that represent the most important actions people can take within your app ...“ Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 108. Small / Contextual Icons „ ... use small icons to surface actions and/or provide status for specific items. ...“ Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 109. Notification Icons „ ... provide an icon that the system can display in the status bar whenever a new notification is available ...“ Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 110. Creating Custom Icons and Images Human Interface Guidlines for Mobile Applications - Martin Ebner 2013 http://www.flickr.com/photos/conorpendergrast/2634918994
  • 111. Application Icons „This is a place where branding and strong visual design should come together into a compact, instantly instantly recognizable, attractive package.“ Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 112. Launcher „ ... is the visual representation of your app on the Home or All Apps screen.“ Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 113. 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 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 114. Icons for ... „do not redesign standard buttons“ • simple and streamlined • not easily mistaken • readily understood and widely acceptable • Use color and shadow judiciously to help the icon tell its story • Create an idealized version of the subject rather than using a photo • Don‘t use replicas of Apple products Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 115. Icons for ... „do not redesign standard buttons“ • use universal imagery, easy recognizable • generate an idealized version • use transparency when it makes sense Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 116. Tips for Creating Great Artwork „The Retina display allows you to display high- resolution versiony of your art and icons.“ • Richer in texture, more detailed and more realistic • Scale up your original work up to 200% • Add detail and depth • More realistic and more detailed Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 117. iPad - New Way for Applications http://www.youtube.com/watch?v=jdExukJVUGI Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 118. What happens when you hand a 3-year-old an iPhone? http://elearningblog.tugraz.at/archives/2994 Human Interface Guidlines for Mobile Applications - Martin Ebner 2013
  • 119. Slides available at: http://elearningblog.tugraz.at SOCIAL LEARNING Computer and Information Services Graz University of Technology Graz University of Technology Martin Ebner martin.ebner@tugraz.at mebner http://elearning.tugraz.at