iphonewalkthrough

iPhone App Tutorial/Help Screen UI


What is the best way to create tutorial or help screens that can be viewed in an iPhone App on launch?

I'm debating between using two paradigms:

  1. Edit a screenshot of the app with an image editing program to add static help text. Interaction is tapping or scrolling through the tips. This involves creating a custom UIViewController to advance to the next help screen.
  2. Create a custom iPhone UIControl on top of the App user interface that can be tapped to advance to the next tutorial tip. The application will transition between the modes and will be active, rather than static. It involves adding hooks into the App's custom ViewController's to handle "TutorialUIControl" objects.

Here's some screenshots of the application that I need to make help screen UI for, it's an application that creates artwork. More App Information

  1. Screenshot 1: View mode that allows viewers to scroll through an image list, like the UIImagePicker, but for custom image collections.

  2. Screenshot 2: Action mode - allows viewers to select images to save to the "My Saved" album from the active art generation album "My Evolution" or evolve images using sexual/asexual image reproduction.

Image View Mode

Image Action Mode


Solution

  • To answer my own questions many months later.

    1. I revamped and used WEPopover to show my help popups, as seen in the iPhone/iPad App, Wallpaper Evolution Lite. The help disappears only if tapped or the button it was attached to was pressed. Using this flow I could highlight a series of buttons to the user.
    2. I added help images within the application to highlight interaction behaviors with the content. The tap, zoom, and drag images are fully interactive.
    3. As @WrightsCS mentioned HTML is another avenue. I use the UIWebView to provide a more in depth help/tips screen with contact information.
    4. In my upcoming app, I'm making use of a paging UIScrollView with help content highlighting app features. The help screen is loaded on the first start of the app, and is accessible through a help menu option.

    Here's my fork of the WEPopover github project: https://github.com/PaulSolt/WEPopover

    Wallpaper Evolution Lite help UI UIWebView help content and tips