Show HN: Chardin.js, beautiful instructions for apps

I think that's an interesting point, and certainly a problem that will grow as data attributes become even more widely used.

Perhaps there's even use for a little database that keeps track of the different data attributes used by different libraries so that authors could easily find out if their name of choice will collide with someone else's, at least as a forewarning to its user about possible incompatibilities.

Not necessarily. I do agree that requiring a tour can be an indication that your app is too complex, but sometimes its just a good opportunity to display some light marketing (as in, show stuff behind your app that might be abstracted from the interface in order to avoid cluttering it).

In the use case I built Chardin.js for, I'm using it to display stuff that happens behind the scenes that the user is abstracted for, but I still want the user to know its happening (perception of value is almost as important as value delivered!).

Not at all. Anything sufficiently novel is going to need explanation.

Just look at the tutorials in video games, which get you started. Or for a great example, try out the new Mailbox app -- they do a fantastic job of explaining how the swipes work. In certain cases, a little investment in "training" pays far greater dividends later on.

Of course, there are plenty of apps/sites that aren't novel enough to need this, where everything is straightforward.

Sometimes you don't have any choice. On Android, for example, you have to follow the design guidelines if you want to get featured. However the design guidelines say your actions should be tiny unobtrusive icons in the action bar. Users miss these all the time in user testing in my experience. If you made them big, glossy, 3D looking buttons people would find them, but then you'd violate guidelines. So often we have to put these tutorial overlays up instead with big white arrows over a darkened screen pointing out the actions.

I'm working on an app that has one page that's quite complicated (but in my opinion really easy to use once you've learned how it works). Basically you're outlining the structure of a document, so you have to create a table of contents for the document in a left hand pane (33% width) and then mark corresponding regions on the right hand pane using your mouse, and there are buttons on the left pane to store/load a region corresponding to an entry in your table of contents. As two separate pages the workflow is a little awkward because logically the two steps are related, but when we put the two pages together we found that there was no place to put instructions. I ended up putting in one of those guided tour scripts where you click around to go through it. The thing is once you've used it once it's really obvious what to do and the UI is pretty efficient but you need some way of explaining the interface the first time, and I think something like this is better than wasting a lot of space on instructions.

(I'd link to the app to make it clearer, but it's still a work in progress and at the moment I need to control the number of people using it so we can figure out how it scales before launching it to the world - plus it's really an educational application for instructors so most people wouldn't be interested).

I always feel that such glib attempts at one-upmanship are a good indication of immaturity.

Or perhaps you don't get involved in producing anything with non-trivial functionality? Because anything simple enough not to need instruction is probably too trivial to be worth using.

There is nothing intuitive in life except fear of heights and (possibly) the location of your mother's milk, all else is learnt.

Snapseed (iOS, Android) has a great and simple user interface that you need to be taught to use first.

unless your app is an app on creating and showcasing guided tours ;)

Yeah, I loved the recent gmail new compose "tour" and used it as inspiration because I'm not too fond of multi-steps tours.

It does work on webkit/mozilla. I don't have access to IE10 though, so don't know about it.

Someone else reported that it works on IE8, so I'd guess it should also work on ie10

Cool! Totally accidental as I don't have an IE to test on, so good to know! Thanks :)

I am always complaining on HN about Show HNs not working in IE8. This one is refreshing!!

Something similar to that was posted on HN a few weeks ago, unfortunately I don't have the discussion link but I did star the repo[0]

[0] http://usablica.github.com/intro.js/

Thanks! Yeah, I haven't implemented the resizing support, mind filing an issue?

Thanks!

I just create a patch for that https://github.com/heelhook/chardin.js/pull/2

Or screen resizes (less picky)

I see that too, and the open again behaviour is flaky in Chrome as well - the label switches to say "See More on Github" but the instructions still tell you that's the toggle button, and the link to "Open it again" (which actually toggles) is covered by the overlay but still active.

Or 19