Hi all,
I am embarking on designing an initial overlay “Tutorial” for users of one of my apps. I want this to be an elaborate tutorial on first run since my app is targeting non technical users. I have seen some tutorial overlays that are very cool and I am searching ideas to start. If you have a screen shot of a overlay tutorial you have implemented would you be so kind as to share it?
Thank you in advance!
Mike
Mike,
Not exactly a “Tutorial”, but here’s a link to screen captures for a “Setup Wizard” that get’s run on first launch of my astronomical video camera control software.
http://www.miloslick.com/MallinCam_Setup_Wizard.html
It is designed to give first time users a quick way to set up all the essential options in the software as well as providing a quick explanation of the hardware connections and requirements. It’s a lot of text, but for something like this (or for a tutorial) I don’t see a way around it. One thing you might want to consider is streaming a screencast to a tutorial window. You can obviously direct their web browser to the screencast on your website, but I think an embedded viewer looks more professional.
I’m interested to see how others do this…
Cheers.
-bill k
Also not exactly a tutorial, but this is how we implemented our help system in our software. It adapts to the real time data when the user get’s stuck. We got some great feedback from the users and we almost don’t have to give any support using this system.
Here is a video that shows the help (+/- 00:30 seconds into the video)
I regularly use an HTMLViewer that loads a small local HTML web site. It is extremely easy to maintain using Kompozer, add pictures, etc. Users are accustomed to the browser interface, so they do not need to learn the tutorial commands…
[quote=88512:@William Koperwhats]Mike,
Not exactly a “Tutorial”, but here’s a link to screen captures for a “Setup Wizard” that get’s run on first launch of my astronomical video camera control software.
http://www.miloslick.com/MallinCam_Setup_Wizard.html
It is designed to give first time users a quick way to set up all the essential options in the software as well as providing a quick explanation of the hardware connections and requirements. It’s a lot of text, but for something like this (or for a tutorial) I don’t see a way around it. One thing you might want to consider is streaming a screencast to a tutorial window. You can obviously direct their web browser to the screencast on your website, but I think an embedded viewer looks more professional.
I’m interested to see how others do this…
Cheers.
-bill k[/quote]
Very nice and thank you Bill!
[quote=88514:@Alain Bailleul]Also not exactly a tutorial, but this is how we implemented our help system in our software. It adapts to the real time data when the user get’s stuck. We got some great feedback from the users and we almost don’t have to give any support using this system.
Here is a video that shows the help (+/- 00:30 seconds into the video)
https://alwaysbusycorner.wordpress.com/2013/08/02/realbasicxojo-an-implementation-of-a-help-system-at-one-two/[/quote]
Thank you Alain!
The following is an intro sequence I used on a small Mac productivity app from the MAS. The sequence is minimalist style (as is the app) and is not “elaborate” nor a tutorial overlay. Also, this was an Xcode app, not a Xojo app, although I’d like to port it to Xojo if I get time.
So, probably not much help 
Thanks Gavin! That looks great
For my main application I use a WordPress web site. I have links setup for the Help Menus and a Help Icon in the Tool Bar. The user can select to use his browser or the built in HTML Viewer. Link below is one of the pages.
Though I can’t remember where (what app) it was, my favorite experience with a start up tutorial was designed so that arrows pointed to the actual things to click on the screen. One pointed to the StatusItem, then when you clicked it would point to the next important object. It was really clever, and made it very obvious exactly what and where you were clicking.
@William: what are you doing on your website???
WEB SITE ACCESS BLOCKED
Your access to the web site www.miloslick.com has been blocked and logged according to the ACME Security Policy.
This site belongs to the restricted category: Malicious Sites
[quote=88580:@Beatrix Willius]@William: what are you doing on your website???
WEB SITE ACCESS BLOCKED
Your access to the web site www.miloslick.com has been blocked and logged according to the ACME Security Policy.
This site belongs to the restricted category: Malicious Sites[/quote]
Works fine for me (NC US)
Not exactly a tutorial but could be extended to do so.
I embedded html5 web pages developed using Hype on a Mac to display some info about how to use the application CoutMyWords .
I use the same pages in the header here CountMyWords Homepage
I figured I would update my original posts with screen shots of how the Tutorial overlay screens came out for one of my apps. I always liked how Google Docs had implemented their version of the tutorial overlay which lead me to this.
Very nice @Mike Cotrone ! Looks cool! Do these overlays come up over the actual app?
Hi Alain and thank you I very much appreciate it. On the first run my add (NET_Toolkit) will follow these steps in a purposeful order.
The app navigation is handled via the icon on the status bar. Via the User Preference settings a user may choose to auto-launch any one of the tools in the toolkit. At this point the startup will happen as:
Interesting question.
Wouldn’t it be a good idea to use the GSPopoverWindow and have it give you set of instructions? Once it detects you followed them correctly it proceeds to the next overlay.
[quote=134917:@Mike Cotrone]
[/quote]
Which font did you use? Cannot find this.