For my doctorspost roster, which displays their year-roster, I was looking for a better way to provide documentation and/or help.
(1) Separate (electronic or printed) documentation is never where you need it, and ages really fast. Change the layout of a page and you should change the screenshots in the helpfiles.
(2) same goes for help pages you can call up in a browser.
So I was looking for something you could put on the page itself, independent of the available real estate.
If you could limit yourself to help based on the icons you use, you've tackled the quick ageing process of help-pages: used icons don't change at the same rate as page layouts, text or menu's.
Basically you'd like big red numbered arrow pointers pointing to the icon users need to click, telling them the order in which they need to process the screen and what to do once they clicked an icon.
But I wanted it to be generic AND users have be able to get rid of them once you don't need the help anymore.
! And of course...the helptext should come from a database, not some static HTML page you need to edit.
So I've come up with the following compromise:
Each screen gets an easily detectable floating helpbar with two buttons, open & close. Users can drag the helpbar anywhere on the screen, so it never has to be in the way. The helpbar resides next to the empty breadcrumb and search-bar area. The helpbar has a little opacity so you can see the text underneath.
BTW: I use Move Breadcrumbs to the left as is, and always have horizontal menu's at the top. The color codes I use fit nicely with my look and feel, so change them where needed.
If a user needs help, he or she clicks the Open/Help button and a helpbox appears. In the helpbox numbered help-rows appear with big fat round white on red numbers. (to help the user in a mindset, do this, then do that, etc. )
Next to the step number is room for the icon they need to click (if any). The icon enlarges when they hover over it. These icons are standard fontawesome and glyphcions that PHPMaker uses. In a next post I'll provide you with the SQL dump you can use to copy/paste into a MySQL console or runme.sql command file to create the tables in MySQL.
The last position on a help-row is the actual user instruction.
A helpbox can be filled for any PHP page your application has, and can have as many helprows you need. If you provide no helptext for a page, the helpbox displays 'Sorry, no helptext for this page'. When the user is finished with the help he/she can click the close button to get back the clean & small helpbar. Refreshing the page will bring back the help-bar to it's initial place and format. (the user can drag the bar anywhere and resize the box).
I've field tested this with my client and feedback is positive.
I've chunked the code you'll need into the following posts:
(1) The PHP code you'll need to make this happen & where to put it. (My own))
(2) The javascript you'll need to make the helpbox draggable. (w3schools)
(3) The CSS you'll need to make the Help-box DIV's. I've kept it simple and use two standard HTML buttons, so simple inline JS enough and no CSS needed. (w3schools & own tweaks)
(4) The SQL dumps to create the Help-tables. A helpbox uses two tables: a Helpcontainer, which is linked to the name of the PHP page, and the underlying Helpcontainer-rows, which are linked to the helpcontainer. The PHP code in (1) creates and populates the Help-box.
(5) The SQL dump needed to create the fa- and glyphicons used by the helpcontainer-rows.
I'm quite content with the result, so enjoy & please post any improvements you see!
Bob