HN Explorer

Code-free Website Tour Builder (drawium.com)

68 points by SeckinJohn ↗ HN
Hi everyone,

This is our new startup and we would love to hear what you think about it. We are trying to make it super-easy to create a tour for your website -- you can literally create a tour in under a minute.

We also show important statistics about your tour so that you can see how your users interact with it and improve it. (Statistics page will be launched very soon.)

So what do you think?

32 comments

[ 0.25 ms ] story [ 88.3 ms ] thread
SeckinJohn
Hi everyone,

This is our new startup and we would love to hear what you think about it. We are trying to make it super-easy to create a tour for your website -- you can literally create a tour in under a minute.

We also show important statistics about your tour so that you can see how your users interact with it and improve it. (Statistics page will be launched very soon.)

So, what do you think?

webbruce
I would definitely take off the sticky menu bar. I like the concept though.
SeckinJohn
You mean the "Quick Website Tour" button, right?

While creating a tour, after clicking the save button, you can customize it to remove that button and launch it by calling a JS function(Drawer.start_tutorial()).

Or you can also customize it to automatically launch on page load.

chrisacky
It seems to be quite effortless at creating them, so well done on achieving the "super-easy"-ness..

Some things which would be helpful and the information I couldn't find despite looking.

1) This comment applies to everything that I use, so it's not just relevant to your product. While free now, how do you plan to monetize. This is important for prospective users because time invested in your application could be wasted if you don't have an end goal in mind and end up discontinuing the product and making it unavailable for use. I think it's important for users to know that you are getting "something", to avoid a gowalla situation where you sign up 1000s of users and then can't convert.

So basically... I think that you should provide some insight into how you plan to charge. ie. Flat rate of X per month or something.

2) What's the page overhead. ie, While super easy, is it all loaded AMD style and super lightweight. What dependencies do you have. ie jQuery.

3) As a suggestion, you shouldn't just "encrypt" your JS source for this. I've just "decrypted" in about 15 seconds. Since everything you are doing is basically just JavaScript, you should consider implementing something like Typekit/Optimizely for how they serve up their JS files. If you don't want to go through this route, which would be perfectly understandable, then you should at least build your javascript, using something like closure or shrinksafe. But what you did by wrapping it in eval() is as good as useless and pointless. (EDIT, actually I can see you have shrinksafed it. I didn't actually look passed your CSS styles).

Overall, It works well, quite impressive.

SeckinJohn
I am glad you liked it.

1) Yeah this makes a lot of sense. We are planning to charge $0, $5, $20, $99 per month depending on the number of impressions your tutorial gets and the amount of support you need.

We might also sell the library on its own for a one-time fee. (this will probably be without analytics though).

jspaur
I'm unable to see this working in IE9. Works fine in Firefox and Chrome. Bummer, but IE9 makes up about 25% of the visits on my site, so no go yet.
SeckinJohn
Could you please give some more details about your system and what exactly happens when you try to launch the tour?

We just checked again and it seems to be working on our IE9.

aeeeee
I feel like the default twitter bootstrap color and style scheme is starting to get ridiculously overused, maybe it's all the new startup sites using it or maybe it's because I've been looking at a lot of hacker news links. I doubt that's the feedback you were looking for though :)
sycr
Similar to Joyride: http://www.zurb.com/playground/jquery_joyride_feature_tour_p...
SeckinJohn
This is interesting, thank you for sharing.

One of the core values we are providing is the hassle-free analytics we provide that lets you see core metrics like close-rates of individual explanation boxes, successful completion rate of the tour and the amount of time your users spend on each explanation box.

Also, being able to interactively build a tour for your website is really valuable especially if you are a marketer or a non-technical manager who wants to do this.

We also don't require IDs for elements which makes it very easy to try and iterate.

ben1040
I might consider moving the "Try it on this page" button up to the top, or making the "try it on your site" feature not require a login until you're ready to save your tour.

A lot of webapps today have conditioned me to just click the big "try it!" button without reading anything else. So, I clicked the "try on your site" button right away, but then gave up when I had to create an account.

On returning to the site a little later then I discovered the option to take a meta-tour of the tour-generating product, but it certainly wasn't the first thing I could find on the page.

SeckinJohn
Thank you, this was really helpful.

Just moved the "Try it on this page" button to the top.

The reason why we require a login at that stage is because we generate a custom tour-creator library for your user, so, we need you to create an account.

AndrewHampton
I know stack overflow gets around this by creating an account for every visitor and keeping track of which account you are by using a cookie. If you later decided to sign up, your credentials replace the cookie for figuring out who you are.
webwright
Better yet "see it in action". Users don't want to try something until they understand it a bit.
SeckinJohn
Done. Thanks!
roryokane
I think the "See It in Action!" button could be better placed, though I'm not sure exactly how. This is where I looked when I saw the site: : "Promote your website's most important content", "Create A Tour For Your Website", "What is it?" and read bold text in content, "Features" and read bold text in content, "Try it on your website", switch to HN comments. I never saw the "See It in Action!" button; the "Try it on your website" button attracted me more. Perhaps the "See" button should be bigger and centered, or right-aligned like the "Try" button, or have a border around it.
SeckinJohn
I just made the "See It in Action!" button bigger and red.

I think this version is better than what it used to be. Thank you for the suggestion :)

tomkinstinch
I like this a lot.

I haven't tried making a tour yet (got turned off when I saw I needed an account), so I'm not sure what options are available, but...

I feel like there could be more visual emphasis on the content being isolated. The Drawium annotations look a bit too similar to the content. Maybe that is because the background color of the demo page is close to that of the annotations, or maybe it is because the annotations appear to be in the same layer as the highlighted content (perhaps a light-color shadow would make the annotations stand out more?). It would be more difficult to implement, but I wonder if having a softer edge around highlighted content would help (gradient fade to black). Or maybe add a shadow around the highlighted area to "raise" it out of the page?

Maybe timed transitions would help. What if the transparent overlay fades in around the content being shown before the tooltip, rather than appearing instantly and at the same time? Isolate first, then explain. I see that the API offers additional options. It would be nice if the demo tour on the homepage includes a variety of these options.

I also instinctively tried to use the left/right arrow keys on my keyboard navigate through the demo tour. Next/previous key bindings may helpful.

It's not clear how far along in the tour I was. How many elements is the tour explaining? Do I have to click "Next" a hundred more times? What if there is a number somewhere in each annotation showing progress (eg. "3/8").

SeckinJohn
Thank you very much for this awesome feedback!

We had implemented key bindings for an older version but then we removed it since we thought we would have to explain that too. Now after thinking more about it, I think we can do it and power users like you will figure it out on their own :)

Showing tour progress will definitely be implemented very soon.

As for putting more emphasis on the isolated content, I think it makes a lot of sense -- we will be experimenting with what you suggested and will figure out what we can do about this.

switz
No code is a cool thing to say, but it also means less customization. I tried it on my AJAX heavy site and couldn't really do anything due to the fact that user interaction dictates what to tell them. If I tell them to click on one of the following things, then I can't control what to say to them after the click without some sort of javascript event hook.
SeckinJohn
We also provide the library and you can create explanation boxes with it. You can even draw circles around elements, point arrows to important things etc. with it.

This is how you would create a tipbox: Drawer.explain('element_id', {'title': 'Hey!', 'content': 'This button is awesome'});

It will detect the positioning etc. automatically for you so you don't have to bother checking the window width etc.

For more info: http://drawium.com/pages/details

switz
Very cool! I did not see that. Thanks.
berkay
Well done! It would help to see what can be done with it without having to create one yourself, like sample tutorials for couple of sites.
SeckinJohn
We should really have this. Thank you for the suggestion.

PS: "Tesekkurler" :-)

whymsicalburito
I really do not like that you require a username to signup, email should be enough.
simonbrown
Anyone have any idea why it has a bad WOT score?

http://www.mywot.com/en/scorecard/drawium.com

SeckinJohn
I do :)

One of our founders was supposed to create a thread on the AmberJack.org forum to show drawium to others(amberjack is like an outdated version of drawium). He apparently sent private messages to ~10 users there which was redirected as emails. One of them went ahead and gave us a bad WOT score and also let us know. We apologized and resolved the issue with him since then but the WOT score remains there.

I will see if he can fix that. (I am not sure if that's even possible)

SeckinJohn
hmm, apparently he already fixed that and marked it as "Good customer experience" but I am not sure why WOT still says "Warning! This site has a poor reputation.". Maybe it gets updated at a fixed time of the day or something.