Show HN: Chardin.js, beautiful instructions for apps(heelhook.github.com)
heelhook.github.com
Show HN: Chardin.js, beautiful instructions for apps
http://heelhook.github.com/chardin.js/?hn
45 comments
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.
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.
Another option (Although much more complicated) would be to make the used data attributes configurable in the script.
Maximum flexibility for the end-user but a bit of a PITA for library developers.
Maximum flexibility for the end-user but a bit of a PITA for library developers.
This is the way to go, and really not that hard to implement for the library developers
Some sort of data attribute namespace, which is uniquely identified by a URI, and aliased within the document to shorter version? Might look something like this?
dans:chardin="http://heelhook.github.com/chardin.js/
I have a feeling that web community is not ready for something like this, maybe in a few years.
dans:chardin="http://heelhook.github.com/chardin.js/
I have a feeling that web community is not ready for something like this, maybe in a few years.
Looks really nice, but I always feel that if you need some kind of guided tour for your app, you've already shot yourself in the foot.
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!).
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!).
Also, some web apps are power tools for a specific group of employees, rather than a consumer-facing app. In college I worked on a dormitory reservation system that was fairly complex, and was only used by administrators and front desk workers (and they went through brief training for the system). I built a quick little "help mode" overlay system that worked well enough, but something like this would have been a great alternative.
True, there are certainly exceptions. I wouldn't want this on a social network, but something like a browser based 3D modeling tool is another story.
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.
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'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.
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 ;)
Very well done! I personally like this style of on-boarding versus the "tour" style where you have to click around a bunch of times to see everything. Again, nicely done!
Yeah, I loved the recent gmail new compose "tour" and used it as inspiration because I'm not too fond of multi-steps tours.
This is awesome, I literally was going to research javascript intro/tutorials today. Off to a great start!
Have you tested across browsers? I just need it to work in webkit/mozilla. maybe ie10.
Have you tested across browsers? I just need it to work in webkit/mozilla. maybe ie10.
And it works in IE8! Thanks for this.
Cool! Totally accidental as I don't have an IE to test on, so good to know! Thanks :)
http://www.browserstack.com/ has been great for me. I hated having to keep a bunch of windows VMs hanging around on my HDD just for IE testing.
I am always complaining on HN about Show HNs not working in IE8. This one is refreshing!!
[deleted]
I don't understand why there are some people who doesn't open source their work to help other people, but try to comment on goood things. Open source thing first, comment later, please. Thank you, good people.
Very cool!
I think it would be worth displaying each message one at a time with a delay in between (that way they could function as a sequential tour in addition to coach marks).
I think it would be worth displaying each message one at a time with a delay in between (that way they could function as a sequential tour in addition to coach marks).
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/
[0] http://usablica.github.com/intro.js/
Yeah, I contributed some code to that repo and wrote the rails gem for it[0] and I'm a fan of it, this is just a different take that I found works better for some use cases.
Thanks for sharing!
[0]: https://github.com/heelhook/intro.js-rails
Thanks for sharing!
[0]: https://github.com/heelhook/intro.js-rails
Definitely two excellent use cases and implementations of a similar idea (step-by-step "tour" v. full-page documentation/explanation), good job.
Really cool, can't wait to use it :)
A new one of these shows up on hacker news once a week, but this is the best one yet.
Overly picky, I know, but it doesn't cope with font size changes...
I just create a patch for that https://github.com/heelhook/chardin.js/pull/2
Or screen resizes (less picky)
Awesome :) This stuff is neatly done.
It doesn't open again in Firefox 20
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.
Simple and elegant, very nice :)
looks neat :). Good one.
really impressive
What is it with js libraries using data- tags without any kind of "namespacing". For example this library uses data-intro which could easily clash with other things in future.
Would it not be good for everyone to be a good citizen and instead do things like data-ch-intro? Just a few characters from your project name to reduce the chances of clashes.