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:
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.
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
Screenshot 1: View mode that allows viewers to scroll through an image list, like the UIImagePicker, but for custom image collections.
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.
The "right" answer really depends on the application you are designing. I would highly suggest getting as many apps as you can and looking at how they do help. See what works and what doesn't and think about how that is related to your own design.
In my app (a game) I chose to build a set of static images that could be scrolled through to provide detailed help (based on Apple's sample code). But, I also built an interactive tutorial that plays the first time you run the game. I also pop up a welcome overlay the first time the app is run and suggest what button to press to start a game.
It also helps if you test your tutorial with a lot of different people. After several designs with things too complex, I boiled down my instructions to something extremely simple: "Press the green buttons", and then built up from there.
You can easily store a preference to say whether the app has been launched before, and if that entry is blank you run the tutorial again.
You can create an HTML tutorial that you view through a UIWebView. In on of my iPad apps, I just made a large image that I presented modally with images and text explaining how to use the app.
For iPhone, the best way to include a "How-To" tutorial for your app would have to be a web document, seeing as how you can add images and formatted text.
Alternatively, You can add more views to your controllers with transparent backgrounds and animated buttons and text, for a more interactive feel.
To answer my own questions many months later.
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.
I added help images within the application to highlight interaction behaviors with the content. The tap, zoom, and drag images are fully interactive.
As #WrightsCS mentioned HTML is another avenue. I use the UIWebView to provide a more in depth help/tips screen with contact information.
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
Related
I'm building a game for the iphone, and the main window displays an image in the background describing the game, and I have few other layers of images which are the buttons such as Start New Game, Options and Help.
Should the launch image be only the background image describing the game without the extra image layers or should it be image including the other layers which are Start New Game, Option and Help?
Thanks.
The bit covering launch images can be found here. Below is an example launch image (left) provided by Apple.
Their docs specifically site concerns about localization, so it's probably best to do without the text and provide an image that just has your background chrome for the view.
The launch image should give the illusion of a really fast launching of your app. So the better image in your case is an hybrid of your proposal.
You should have the background image describing the game with the extra image layers without the text inside your buttons (Start new game, etc.) If you include the text, the user could think that your app is loaded and would tap on it.
Hope this helps
All the Apple guidelines on launch images are available here (scroll down to "Launch Images" section). It seems like the convention is to show buttons but not table view data, based on the examples show and from observing other Apple apps.
It's probably up to you to determine which looks better. I have seen many apps on the app store that totally ignore all of these things you aren't supposed to do:
An “application entry experience,” such as a splash screen
An About window
Branding elements, unless they are a static part of your application’s first screen
So I don't think it's that important for App Store acceptance, but it is very important for user experience.
I'm trying to build an application that is launched has a transparent background, in practice, showing only the objects in view (buttons, labels etc etc) but not the background so you can see the background the user's home.
In the example file you can see the purple square image at the center of the screen, in theory should be a normal UIView with a picture in the center but does not see the background of UIWindow/UIView.
Is possible to realize such a thing? Can anyone help me?
thanks
No. It's not possible using the official SDK. I'm interested to know why you would want to do this?
It might be possible, try setting the window background color to clear, as well as the view controller's view background color.
I say it might be possible because I've seen my home screen while using some apps, for example, the Facebook app sometimes shows it during a transition (it might be a bug on either Facebook or the OS).
Anyway, I'm pretty sure that kind of app would be rejected from the App Store, so be advised.
Inside the Twitter iPhone app, if you click on a link it pushes in a WebView.
Ive gotten this far, but I can't find the correct identifier for the forward and backward buttons like at the bottom left of the image below. Are they native? or are they just images they have created themselves?
You might want to have a look at a drop-in inline web view controller I did: SVWebViewController. It should save you a fair bit of coding :)
Per the list of UIBarButtonItems from the docs, those items you desire need to be custom images a they are not provided in the current SDK.
Feedly for iPhone comes with cool design especially its custom pagecontrol(scrollbar?) placed on the top.
I'm developing an app for iPhone, and to use spaces efficiently as much as it's possible I'm trying to find a way to implement custom pagecontrol like Feedly. I actually think it's possible the app is made with HTML5 and CSS? Although I am not sure. I found some custom opensourced pagecontrol frameworks, but they're to do with something else such as dots' colors either sizes.
Here's example image link to Feedly for iOS http://i.stack.imgur.com/wf595.jpg
Although this is an iPad version, basically iPhone one is the same. You see the green bar just below the status bar, if you slide pages the colored bar scrolls. It's much more like scrollbar.
Thanks.
Okay, so I unarchived the app and it turned out it's mainly made with HTMLs and converted using PhoneGap. I'm not going to use HTML in my app, my journey still goes on...
Putting all contents into an UIWebView (implementing in HTML & CSS) is generally a bad idea performance wise.
What Feedly seems to do is use an UIScrollView.
The ScrollView sends several events including when it's moved and tapped.
They then update the green scroll bar on top whenever the ScrollView is moved.
Likely, they will also load the actual contents within the ScrollView as the user approaches their position to conserve memory.
You can implement something like this yourself in a few days of coding work.
(Disclaimer: This is just how I would implement what you showed. How it is actually done - only Feedly knows.)
I'm trying to develop a grid-like application for the iPad. Has anyone seen a control that displays info in a grid? In the demos they use a grid-like layout in both the iBooks store and the pictures application.
Specifically in pictures, they are displaying a dynamic list of data in a grid.
I can work around it, of course, but I'd rather use a control if one exists. Thanks!
DTGridView:
http://www.danieltull.co.uk/blog/2009/10/28/dtgridview/
You should try AQGridView it does what you need.
Here are few screens of apps that use this library:
The people who know what controls are or or not in the 3.2 iPhone dev tools have all committed to Apple NDA so we can't tell you.
Steve is always watching.
If you have signed the NDA you should go to the Apple boards and ask.
You can however, make a gird like display very simply with the standard UITableview. Just have a tableviewcell subclass that displays columns. It took me about an hour to reproduce the photo picker display using that method.
Nope, you will have to create your own. People have been writing Home Screen compatible views though, so you might want to search for open source projects with that functionality.