I was frustrated by how annoying other options for digital whiteboarding were. Most cases I (and others I know) just fell back to using a physical whiteboard, or overusing words when a quick picture would do the job much better. In brief, I felt the existing apps out there didn't do enough to enhance our ability to communicate visually.
So I rethought what the UI should be to make it easier, faster and more natural to use. And here's the result. It's in Flash but is still relatively lightweight. I feel tempted to list out all the unique features, but I'd rather you give it a spin and let me know what you think.
Absolutely fantastic so far (all things considered)... can't wait for a permission structure so we can actually use this thing behind closed doors (virtually of course)!!
We have fought night and day with different products and solutions that just aren't flexible, require crappy proprietary software (eBeam), or too problematic and don't function as intended. And they all share a common trait as you've already called out: "just not natural enough".
Pay attention to your competitor's mistakes, just don't get too wrapped up chasing their tail. So many bad solutions right now. While you missed first to market, it doesn't matter -- just make it the best. Good luck! You certainly have my support and vote of confidence... I would be very interested in private beta.
ps. I could see this being a prime candidate for acquisition by Adobe for integration into Adobe Acrobat Connect, that is... if that don't rob you. :)
Ok, that's an awesome collaborative whiteboard. Nice to propose a simple UI for it. Suggestions:
1. Manual save, on the toolbar. For the savaholics!
2. It's somewhat fast at refreshing, but have a dedicated Refresh button on the toolbar, not under the Share panel. If I'm working with some friends and they're all editing, I want to refresh it. Kind of like when you know Twhirl/any other desktop Twitter client is going to fetch new tweets automatically, but you still feel like refreshing.
2.1. Alternatively, let me move the Share Panel around. This could be an option you implement in conjunction with the above.
2.2. Alternatively, have a refresh button only when the document is shared.
3. When you save current document automatically, show it in the documents dock, just to give people reassurance, and to familiarize them with the UI.
4. Anglular (Z, etc) vectors turn into angles, not rectangles.
4.1. Freehand mode by default.
--EDIT--
5. I realize it's hard (with regard to the sharing and synchronization of the whiteboard shared users), and probably something to think about for the future, but uploading of images to use as objects would be extremely useful in, say, mocking up UIs collaboratively, or diagramming.
6. Maybe make the text feature more noticeable by making a text tool button on the toolbar. Most people will learn using the app by trying it, not by watching the video. (I didn't, at least.)
This is impressive. Great work with it, I will be definitely using it!
1. Good idea, was considering that anyway as a way to reduce my database load, as opposed to saving every 4 seconds (if you change the drawing) which is what I'm currently doing. (I'm a hardware engineer and this is my first webapp: I just found out writes to the database are really really slow. Will explore memcached optimizations too.)
2. The intent of the refresh button is for when you're sharing the drawing with others (I initially wanted realtime refresh, but got worried about performance). Hence I put the button under the share panel. But I guess you're right, you would need to refresh more often than you'd need to see who else you're sharing with or to add people for sharing...
2.1 This should be trivial. Will do :).
3. (Not sure if you saw the video or already know this.) The pane on the left is the library pane (or "documents dock") that shows all your saved drawings. The idea is the current drawing is just like any other drawing in the library, just that it's got the focus for now. Or is this idea non-intuitive?
4. The issue is how often would you want to draw angular vectors, compared to rectangles. As an "optimization" for the UI, I allow users to draw a rectangle with just 2 sides rather than all 4 sides (which also works), because I expect them to be very common.
Thanks so much for the feedback! And I'm elated that you'd actually use it!
EDIT
5. You're the third person that asked for this feature, so now it's on my near-term to-do list. I don't think it's hard; just to eat the cost of the bandwidth and storage (which currently is very low).
6. Hmmm... I personally hate revisiting the toolbar each time I have to enter text, so I don't (yet) agree. This is on my "wait for more users to ask for this feature" list :).
1. I'd also expect that database writes are ridiculously slow when you're talking realish-time collaboration.
3. Got your point. I noticed that it was only pushing the current document to the documents pane when I was creating a new document. I'm used to the Google Docs approach - that is, if you make a new document and change it, it'll be in your documents, saved. Maybe, though, your approach may work better in this aspect.
4. Yeah, that makes sense. I think it's only a problem if you're a new user and are just messing around with it, the real usage of angular vectors is probably very little :)
6. I jumped right in without watching the video, and I got pretty frustrated when I wanted to type text and didn't see a toolbar option. I didn't even think about just typing. I do think you should add it, then "power users" will figure out that you can just start typing.
I actually got how to use the text straight away - Please don't change that to force people to use the tool bar to put it into text mode - that would be very frustrating!
I think that it should stay in the auto-shape mode by default. Its really the killer feature of your product and I'd keep it that way.
If you added a sick & quick way to do circuit diagrams, a lot of EE students would love you. They might not pay a lot for it, but you'd get their mindshare.
* I know the shared library feature is for that. Somebody would make a bunch of circuit elements and I could use them. For circuits, thinner lines would be necessary (or less fuzzy lines at least).
Thanks! As a EE myself, the ideal feature for circuit diagrams would be "auto right-angle route and connect" (hope that made sense). Visio/Omnigraffle have this. I wonder how many non-EEs (or non-techies) would need that.
There is collaboration functionality already. Click the "Share" button on the top-right. It's not truly real-time yet though. (You either share offline, or if working online together, you have to hit the annoying refresh button).
I need to figure out long-polling/Comet and see if I can make true real-time work.
Thanks! I was thinking of a similar pricing plan. I worried that companies wouldn't be comfortable with the security issues of having their drawings on my servers though. Any tips on what I could do to make the service secure, and to make them trust me?
Btw, just like Basecamp is the anti-Project, I'd like to think of Dabbleboard as the anti-Visio (or anti-Netmeeting-whiteboard) :).
Make sure the logo is professional looking! I am only half kidding.
But apart from that, why not just go ahead and try pitching it to them as it is? There's tons of value in here even without adding security. If you later figure out that security issues make or break the deal, then you can revisit this issue (or keep working on it in parallel.)
I could give you a million things you could do to really improve the security of your service, but the reality is there are a couple of superficial things you can do right now that will get you over the marketing hump on security:
* Deliver all content over HTTPS.
* Have big long random strings of hex characters in the URLs.
Yeah I should do the https thing. At least makes the transfer secure.
I already do a bit of random strings. Try sharing a drawing, the link it produces includes a 16character code that must match for the sharee to be able to access the drawing.
It doesn't really add any meaningful security. The real security issues with your app are going to be in your code, not on the wire. But it's a strong psychological signal.
It's the same with the random IDs. Generate UUIDs with SHA1 or something, and make them show up in the URL bar. The signal is, "there's no simple integer counter here where if I incr it, I get some other customer's data".
Thanks! Btw, you can currently download a .png format for free, which I hope you'll be able to print with any program on your computer, or convert to pdf. Do you think there's value in doing a direct conversion to pdf?
Converting to Visio though probably will be a nightmare coz of MS's ugly proprietary format. Just coz of the complexity of doing this, in spite of its value, it'll probably be lower on my priority list.
Btw, currently this goes a little more head-to-head with whiteboarding apps like Netmeeting or Webex's whiteboards (or even MSN messenger's built in whiteboard), and less with tools like Visio/Omnigraffle, that have to be much more sophisticated and give users much more control to make pretty diagrams.
You might be surprised. There are multiple 3p apps that can edit and save Visio. The brand value of collaborative online Visio diagrams for businesses might be pretty large.
My hunch is that a lot of business users wouldn't know what to do with a PNG, but they would know how to open, print, and redistribute a PDF. (PNG support is built into Windows, but my guess is that most non-technical users don't know that.)
1. I was surprised when all my drawings turned into squares. Freehand mode should probably be the default since that's what most people will expect from a whiteboard.
2. You don't recognize triangles.
3. Instead of having two modes, could you just have freehand mode with shape buttons in the toolbar? I say this because the shape recognition didn't work that well and I ended up needing to customize the shapes anyway.
4. You should mark where the last click was. I moved my mouse after clicking and had no idea where the text would show up.
1. Hmm... I'm not sure of that. That's definitely what users expect of bad whiteboards like MS Paint, the one in Netmeeting, etc. I think most whiteboarding involves drawing block diagrams and such (or maybe that's just the engineer in me talking). Could you share what types of drawings you typically do?
2. This is planned.
3. Well I need to improve my shape recognition algorithm then. One of the key features IMO that makes this more natural to use is that you don't have to keep revisiting the toolbar (you can do a lot by never visiting it). Could you elaborate a bit on what shapes you were trying to draw, and what they ended up into, so I know what to fix in my shape recognition algo?
I had the same thing on #1, just assumed I could draw freeform first.I didn't expect it to take my freehand and make it into a line or circle.
I'm not sure that's a "bad" thing, because people figure it out pretty quickly. Made me hesitate at first, though, because I thought maybe there was no freeform drawing at all which turned me off. Might be more intuitive if you lit up the Freeform button with a speech bubble when they draw their first item and it autoshapes for them. Or maybe turn the cursor or somesuch into something that indicated we were drawing shapes.
3. I hope that when you update the algorithm you will include ovals/others shapes that can be drawn at a tilt. (or maybe tilted later on demand?)
Whenever I tried to draw tilted ovals they un-tilted and became really big.
PS This is one of the best Ask YC posts I've seen so far. Everybody likes helping in this kind of discussion--its also obvious that you value every bit of feedback.
Thanks! I'm not sure I'd be able to update the algorithm to automatically detect tilt. That would probably have to be a tool you use after drawing (like the "group" button).
I'm curious, what types of drawing would you need tilt/skew in?
1) Constrain aspect ratio on resize when holding down a control key.
2) I really like the way it guesses that you're trying to draw a circle when your freehand is sufficiently curved. A neat addition to this would be bezier spline interpolation for smooth curves if it's clear that the user isn't drawing a closed loop.
3) Import existing image as shape.
4) Shapes library (for things like ER diagrams, UML, etc...)
1) This is planned. Will also snap to grid when moving objects.
2) I want to do this. But as I said in another comment, I just need to figure out the UI for enabling the user to change the curvature of the line.
3) You're now the fourth person that asked for this :). It's definitely on my to-do list now.
4) I'm hoping the community will produce this. Anyone can do "Share -> Make Public" and then the drawings will show up in the Public Library. You can then copy anyone else's drawing into your own personal library. (I do plan to add better functionality for searching/tagging items in the public library eventually. It just didn't matter yet coz no one has anything there so far.)
it would be very cool to have real time sharing -- or a few seconds behind -- so that it could be used during a phone call for collaborative brainstorming...
Thanks. It does have this, the "few seconds behind" version :), though you have to click a button (Share -> Refresh) to refresh the drawing. Try using the "Share" functionality with a friend after signing up.
I really really want to be able to use this without signing up. I just need a link to give a friend so they can spontaneously collaborate with me. The diagram doesn't need to persist past that session, so long as we can both save a png. The spontaneity and ease of use is a killer feature for me.
Not bad.
Why everything I draw must be a circle, square or line. Sometimes i need a curvy line, or a angled one. Don't force everything.
Need shapes. More of them.
Visio is a pretty decent tool, (Omnigraffe for macs is good too), try to copy some features they have, but make them a simpler as possible.
Then allow me to export it in different formats, Visio being one of them, as it seems it is the tool used the most.
Thanks! Other shapes are planned: diamonds and triangles for sure. I want curved lines but haven't figured out the UI for them yet (I'd need an additional handle compared to straight lines, to allow the user to change the control point and hence the curvature.)
Yep Visio and Omnigraffle are definitely the heavyweights of drawing. They have lots more features; which in particular do you think are most important? (I think even stuff like solid/gradient shapes & shadows are superfluous, but I'm just one user :)).
shadows are useful. just make your block-shapes have a shadow by default (like omnigraffle) and it completely changes how smooth and professional even the simplest of diagrams look.
Sure, I could consider a default shadow. But I'm reluctant to clutter the UI by giving the user a gazillion options for shadows, none of which help you communicate your ideas any better.
this is incredibly slick. i love how easy it feels. one major problem i faced -- once an object is selected, i thought dragging would move it, but of course it doesn't. That created a bunch of unneeded shapes for me.
Yeah I'm in two minds about that. The problem arises coz of my "optimization" where I automatically figure out whether you want to:
1. Select: click without dragging.
2. Draw: click while dragging.
All other drawing apps have separate tools in the toolbar for select and draw (and even more for square/circle/text... yeesh). And I want to minimize your visits to the toolbar.
If I made it drag instead of draw in your example, then I'd need a "select" tool again :(.
Or I could choose the middle ground: if an object is already selected (i.e. not just being hovered over), then I do a move instead of a draw. Would this help?
Yes. On first thought, at least, this seems like exactly the right way to do it.
Very nice job, by the way. It might be the first "critique my startup" post I've seen here where I took a look and (a) it made sense, and (b) didn't suck. Actually, it's a lot better than not sucking; it's fast and immediately usable and generally feels better than average.
Edit: the name dabbleboard is sort of crowded by dabble.com and dabbledb.com, though. My first thought was that it was an offshoot of one of these.
You can already do that, altho I need to make it more obvious. Click Share -> Make Public. Now you have a public webpage you can link to, and you can directly embed the image in blogs too. (The latter part is non-obvious but you'll discover if you check source :)... tonite I'll fix this so that the public link reflects this option explicitly).
Awesome! One more request: let the power users get a little button they can put on their sites (say, right above a rich text area) that, when clicked, brings up an empty border in a javascript pseudo-popup. After creating the drawing, it would automatically be included in the text field (or something to that effect). Sorry if I'm not clear on what I mean...
This is pretty awesome! Very usable, not too many features but the ones you really need and they work really well. I can totally see this maximized on a virtual whiteboard too.
It would be pretty cool to have access to apps like this for integration with 3rd party sites. Even if they left the original site and went to yours but saved back to where they came from, that would be very useful. I know www.snipshot.com does exactly that for image editing and it works well. Perhaps that could be a paid service idea... :)
Thanks! That's an interesting feature, hadn't thought of that. At first thought, I actually don't think it'd be technically too difficult either, just need to make a clean API.
This is cool. I was able to figure it out in about 30 seconds. The text is a bit off... I assumed that there should be a toolbar button. Maybe it would just give you instructions...
I didn't realize I should click and type. Instead I looked for a toolbar button. But once a figured out how to do it (by reading another comment, actually), I really liked it.
To accommodate that style of learning, you could have a 'text' button in the toolbar whose only purpose is to give the user a message stating that they need to simply click and type.
I'm trying to solve this problem by loading my default drawing (which loads when you aren't signed in), the one with all the instructions. I should make the instruction for how to enter text ("Click anywhere and start typing to enter text") more visible I guess.
I like it (though I can't say I have much use for a digital whiteboard). It would be nice if it would automatically resize to your window size, though; the bottom is just under the bottom of my window and scrolling just for that little bit that isn't really necessary is annoying. Perhaps this could include a button to extend the space if necessary (perhaps only inside the box, too, rather than extending the whole page).
Thanks! I have a UI problem with resizing. If you have to see a drawing made by a friend who used a bigger window, you'd see a truncated drawing. The obvious solution here is to have canvas you can zoom-in/zoom-out of, AND allow horizontal/vertical panning (like Google Maps). I think that would clutter the UI and make using it annoying.
So I decided to support only the size that I felt would fit in 95% of browser windows. The Dabbleboard drawing+drawing_toolbar+drawing_title fit exactly in a 1024x768 window with the browser's address bar, bookmarks bar, and tab bar all enabled.
Nice job! I made a related project when I first began web programming and javascript about 2 years ago, though I've since mostly abandoned it (http://boxily.com) -- it's only javascript so I couldn't do all the neat flash things you do here.
I'm with you though, most digital whiteboards do suck, and everyone seems to try to do one :)
A couple features that would be cool:
1. SVG export? Maybe not in high demand, but the engineer in me loves vector graphics.
2. Line thickness? Something to think about.
3. I like what crescendo mentioned as well.
1. svg export would be easier than visio export, but has less market value. So overall I don't know which to do first :).
2. There's just 2 thicknesses supported so far. How much more control do you think you'd need (3 levels?, 4 levels?)? I'm intentionally limiting your options so you don't have to waste time trying to decide what thickness line to choose. We don't have this problem with a real whiteboard :). (Plus it keeps the toolbar simple and uncluttered.)
1. You're referring to the move/replicate/scale/delete handles, right? I could probably add that.
2. The visual differentiation so far is that the toggle buttons are clumped together. There's one "bug" though: the top and bottom edges of a group should be straight lines. (I actually have a good reason for this bug :).)
3. You mean resizing in quantized amounts (e.g. 10pixels) rather than continuously right? If yes, this is planned.
4. Yeah this can be annoying, and I don't have a good solution for this yet (I'm reluctant to add a "select" button in the toolbar like all other drawing apps). But I'm hoping you don't have to do this often since you can use "Group" functionality.
5. Snap to grid is planned.
6. I used iShowU on the Mac and uploaded to Viddler (thank God they eat the BW cost for nothing in return). When you embed your Viddler video, make sure to select the same resolution as your original capture; scaling it will ruin it. I used the built-in mic on my MBP, so the audio sucks; will invest in a better mic soon.
Sorry about that. I've heard one or two other instances. So much for the Flash player being consistent :(.
I have 10.5.2 and the same version of Firefox. I don't have a way to debug this right now (can only afford one mac), but I'll try to replicate the hang in other browsers.
The problem is that no one is going to remember your site when they actually need a whiteboard or share it with their friends. To fix that, give it a purpose instead of leaving it as a blank canvas for people to use. For example, you could use the whiteboard as the basis for a iSketch (http://isketch.net) ripoff, while making it clear that people can use the whiteboard on its own. People will use it and share it with their friends and you'll end up with more users for your core product. There are plenty of other ways to achieve the same goal.
The downside is that whatever you come up with to get users may suck away too much time and effort from improving the product itself. You can always outsource the building of such add-ons by providing an API and directing users to your site that way.
I have flashblock installed (Firefox 2), and when the site first loads up the flash box is offscreen on the right. I had to scroll to the right, press "play", and then the box went to the right location.
Your circle-detection code is a bit overzealous. I put it in arrow mode and tried to draw a bunch of arrows from one side of the canvas to the other, and if my lines were even a little bit curved, it turned them into ovals. It should really only turn it into an oval if the user has changed direction substantially during the drawing.
Yes, the problem is that I don't support curved lines yet. (Do let me know if you intended it to be a straight line and the algo still messed up.) Sounds like everyone wants curved lines, so back to the drawing board -ahem dabbleboard-. Will definitely find a way to add it.
132 comments
[ 12.5 ms ] story [ 840 ms ] threadSo I rethought what the UI should be to make it easier, faster and more natural to use. And here's the result. It's in Flash but is still relatively lightweight. I feel tempted to list out all the unique features, but I'd rather you give it a spin and let me know what you think.
You can see the video at: http://www.dabbleboard.com/main/video
We have fought night and day with different products and solutions that just aren't flexible, require crappy proprietary software (eBeam), or too problematic and don't function as intended. And they all share a common trait as you've already called out: "just not natural enough".
Pay attention to your competitor's mistakes, just don't get too wrapped up chasing their tail. So many bad solutions right now. While you missed first to market, it doesn't matter -- just make it the best. Good luck! You certainly have my support and vote of confidence... I would be very interested in private beta.
ps. I could see this being a prime candidate for acquisition by Adobe for integration into Adobe Acrobat Connect, that is... if that don't rob you. :)
1. Manual save, on the toolbar. For the savaholics!
2. It's somewhat fast at refreshing, but have a dedicated Refresh button on the toolbar, not under the Share panel. If I'm working with some friends and they're all editing, I want to refresh it. Kind of like when you know Twhirl/any other desktop Twitter client is going to fetch new tweets automatically, but you still feel like refreshing.
2.1. Alternatively, let me move the Share Panel around. This could be an option you implement in conjunction with the above.
2.2. Alternatively, have a refresh button only when the document is shared.
3. When you save current document automatically, show it in the documents dock, just to give people reassurance, and to familiarize them with the UI.
4. Anglular (Z, etc) vectors turn into angles, not rectangles.
4.1. Freehand mode by default.
--EDIT--
5. I realize it's hard (with regard to the sharing and synchronization of the whiteboard shared users), and probably something to think about for the future, but uploading of images to use as objects would be extremely useful in, say, mocking up UIs collaboratively, or diagramming.
6. Maybe make the text feature more noticeable by making a text tool button on the toolbar. Most people will learn using the app by trying it, not by watching the video. (I didn't, at least.)
This is impressive. Great work with it, I will be definitely using it!
1. Good idea, was considering that anyway as a way to reduce my database load, as opposed to saving every 4 seconds (if you change the drawing) which is what I'm currently doing. (I'm a hardware engineer and this is my first webapp: I just found out writes to the database are really really slow. Will explore memcached optimizations too.)
2. The intent of the refresh button is for when you're sharing the drawing with others (I initially wanted realtime refresh, but got worried about performance). Hence I put the button under the share panel. But I guess you're right, you would need to refresh more often than you'd need to see who else you're sharing with or to add people for sharing...
2.1 This should be trivial. Will do :).
3. (Not sure if you saw the video or already know this.) The pane on the left is the library pane (or "documents dock") that shows all your saved drawings. The idea is the current drawing is just like any other drawing in the library, just that it's got the focus for now. Or is this idea non-intuitive?
4. The issue is how often would you want to draw angular vectors, compared to rectangles. As an "optimization" for the UI, I allow users to draw a rectangle with just 2 sides rather than all 4 sides (which also works), because I expect them to be very common.
Thanks so much for the feedback! And I'm elated that you'd actually use it!
EDIT
5. You're the third person that asked for this feature, so now it's on my near-term to-do list. I don't think it's hard; just to eat the cost of the bandwidth and storage (which currently is very low).
6. Hmmm... I personally hate revisiting the toolbar each time I have to enter text, so I don't (yet) agree. This is on my "wait for more users to ask for this feature" list :).
3. Got your point. I noticed that it was only pushing the current document to the documents pane when I was creating a new document. I'm used to the Google Docs approach - that is, if you make a new document and change it, it'll be in your documents, saved. Maybe, though, your approach may work better in this aspect.
4. Yeah, that makes sense. I think it's only a problem if you're a new user and are just messing around with it, the real usage of angular vectors is probably very little :)
No problem - best of luck!
EDIT -
6. That's true - definitely agree with you there.
"You can add text anywhere just by clicking and start to type. So no need for this pesky button!"
And then fade the text button away or even better destroy it with an explosion animation and then keep track of it in the session/user login.
If you added a sick & quick way to do circuit diagrams, a lot of EE students would love you. They might not pay a lot for it, but you'd get their mindshare. * I know the shared library feature is for that. Somebody would make a bunch of circuit elements and I could use them. For circuits, thinner lines would be necessary (or less fuzzy lines at least).
sounds cool, especially if it's live
I need to figure out long-polling/Comet and see if I can make true real-time work.
Btw, just like Basecamp is the anti-Project, I'd like to think of Dabbleboard as the anti-Visio (or anti-Netmeeting-whiteboard) :).
But apart from that, why not just go ahead and try pitching it to them as it is? There's tons of value in here even without adding security. If you later figure out that security issues make or break the deal, then you can revisit this issue (or keep working on it in parallel.)
* Deliver all content over HTTPS.
* Have big long random strings of hex characters in the URLs.
I already do a bit of random strings. Try sharing a drawing, the link it produces includes a 16character code that must match for the sharee to be able to access the drawing.
It's the same with the random IDs. Generate UUIDs with SHA1 or something, and make them show up in the URL bar. The signal is, "there's no simple integer counter here where if I incr it, I get some other customer's data".
EDIT: PS Very cool.
Converting to Visio though probably will be a nightmare coz of MS's ugly proprietary format. Just coz of the complexity of doing this, in spite of its value, it'll probably be lower on my priority list.
Btw, currently this goes a little more head-to-head with whiteboarding apps like Netmeeting or Webex's whiteboards (or even MSN messenger's built in whiteboard), and less with tools like Visio/Omnigraffle, that have to be much more sophisticated and give users much more control to make pretty diagrams.
Add sub-accounts if you target SMBs.
2. You don't recognize triangles.
3. Instead of having two modes, could you just have freehand mode with shape buttons in the toolbar? I say this because the shape recognition didn't work that well and I ended up needing to customize the shapes anyway.
4. You should mark where the last click was. I moved my mouse after clicking and had no idea where the text would show up.
1. Hmm... I'm not sure of that. That's definitely what users expect of bad whiteboards like MS Paint, the one in Netmeeting, etc. I think most whiteboarding involves drawing block diagrams and such (or maybe that's just the engineer in me talking). Could you share what types of drawings you typically do?
2. This is planned.
3. Well I need to improve my shape recognition algorithm then. One of the key features IMO that makes this more natural to use is that you don't have to keep revisiting the toolbar (you can do a lot by never visiting it). Could you elaborate a bit on what shapes you were trying to draw, and what they ended up into, so I know what to fix in my shape recognition algo?
4. Good idea. I should do that.
I had the same thing on #1, just assumed I could draw freeform first.I didn't expect it to take my freehand and make it into a line or circle.
I'm not sure that's a "bad" thing, because people figure it out pretty quickly. Made me hesitate at first, though, because I thought maybe there was no freeform drawing at all which turned me off. Might be more intuitive if you lit up the Freeform button with a speech bubble when they draw their first item and it autoshapes for them. Or maybe turn the cursor or somesuch into something that indicated we were drawing shapes.
Looks pretty slick. Good work.
3. I hope that when you update the algorithm you will include ovals/others shapes that can be drawn at a tilt. (or maybe tilted later on demand?)
Whenever I tried to draw tilted ovals they un-tilted and became really big.
PS This is one of the best Ask YC posts I've seen so far. Everybody likes helping in this kind of discussion--its also obvious that you value every bit of feedback.
I'm curious, what types of drawing would you need tilt/skew in?
1) Constrain aspect ratio on resize when holding down a control key.
2) I really like the way it guesses that you're trying to draw a circle when your freehand is sufficiently curved. A neat addition to this would be bezier spline interpolation for smooth curves if it's clear that the user isn't drawing a closed loop.
3) Import existing image as shape.
4) Shapes library (for things like ER diagrams, UML, etc...)
1) This is planned. Will also snap to grid when moving objects.
2) I want to do this. But as I said in another comment, I just need to figure out the UI for enabling the user to change the curvature of the line.
3) You're now the fourth person that asked for this :). It's definitely on my to-do list now.
4) I'm hoping the community will produce this. Anyone can do "Share -> Make Public" and then the drawings will show up in the Public Library. You can then copy anyone else's drawing into your own personal library. (I do plan to add better functionality for searching/tagging items in the public library eventually. It just didn't matter yet coz no one has anything there so far.)
Then allow me to export it in different formats, Visio being one of them, as it seems it is the tool used the most.
Yep Visio and Omnigraffle are definitely the heavyweights of drawing. They have lots more features; which in particular do you think are most important? (I think even stuff like solid/gradient shapes & shadows are superfluous, but I'm just one user :)).
All other drawing apps have separate tools in the toolbar for select and draw (and even more for square/circle/text... yeesh). And I want to minimize your visits to the toolbar.
If I made it drag instead of draw in your example, then I'd need a "select" tool again :(.
Or I could choose the middle ground: if an object is already selected (i.e. not just being hovered over), then I do a move instead of a draw. Would this help?
Very nice job, by the way. It might be the first "critique my startup" post I've seen here where I took a look and (a) it made sense, and (b) didn't suck. Actually, it's a lot better than not sucking; it's fast and immediately usable and generally feels better than average.
Edit: the name dabbleboard is sort of crowded by dabble.com and dabbledb.com, though. My first thought was that it was an offshoot of one of these.
You can already do that, altho I need to make it more obvious. Click Share -> Make Public. Now you have a public webpage you can link to, and you can directly embed the image in blogs too. (The latter part is non-obvious but you'll discover if you check source :)... tonite I'll fix this so that the public link reflects this option explicitly).
EDIT: I think Lux explained it a bit better in this post: http://news.ycombinator.com/item?id=202849
Only problem I found so far:
I started a drawing, clicked sign up to share it and it was gone.
It would be pretty cool to have access to apps like this for integration with 3rd party sites. Even if they left the original site and went to yours but saved back to where they came from, that would be very useful. I know www.snipshot.com does exactly that for image editing and it works well. Perhaps that could be a paid service idea... :)
Sorry for being dumb, but I didn't follow. Could you clarify? Thanks a lot!
To accommodate that style of learning, you could have a 'text' button in the toolbar whose only purpose is to give the user a message stating that they need to simply click and type.
So I decided to support only the size that I felt would fit in 95% of browser windows. The Dabbleboard drawing+drawing_toolbar+drawing_title fit exactly in a 1024x768 window with the browser's address bar, bookmarks bar, and tab bar all enabled.
I'm with you though, most digital whiteboards do suck, and everyone seems to try to do one :)
A couple features that would be cool:
1. SVG export? Maybe not in high demand, but the engineer in me loves vector graphics. 2. Line thickness? Something to think about. 3. I like what crescendo mentioned as well.
Good luck! -Justin
2. There's just 2 thicknesses supported so far. How much more control do you think you'd need (3 levels?, 4 levels?)? I'm intentionally limiting your options so you don't have to waste time trying to decide what thickness line to choose. We don't have this problem with a real whiteboard :). (Plus it keeps the toolbar simple and uncluttered.)
I've used www.vyew.com a few times as a guest - the other super feature they have which you might consider is inbuilt VoIP.
Great effort!
1. Tooltips or a statusbar at the bottom which tell you what a button does when you mouse-over it.
2. Some visual differentiation between normal buttons (new, download, etc.) and toggle buttons (freehand, arrow mode, etc.)
3. Proportional resizing with shift or control (as others have mentioned)
4. Easier way to multiple-select objects rather than shift-clicking each one
5. Snapping between different objects (perhaps toggleable) and/or a grid
6. What software did you use for creating the demo screencast? It looks good (and I might need to record a screencast for my startup soon...)
1. You're referring to the move/replicate/scale/delete handles, right? I could probably add that.
2. The visual differentiation so far is that the toggle buttons are clumped together. There's one "bug" though: the top and bottom edges of a group should be straight lines. (I actually have a good reason for this bug :).)
3. You mean resizing in quantized amounts (e.g. 10pixels) rather than continuously right? If yes, this is planned.
4. Yeah this can be annoying, and I don't have a good solution for this yet (I'm reluctant to add a "select" button in the toolbar like all other drawing apps). But I'm hoping you don't have to do this often since you can use "Group" functionality.
5. Snap to grid is planned.
6. I used iShowU on the Mac and uploaded to Viddler (thank God they eat the BW cost for nothing in return). When you embed your Viddler video, make sure to select the same resolution as your original capture; scaling it will ruin it. I used the built-in mic on my MBP, so the audio sucks; will invest in a better mic soon.
how do i add more image assets on the left?
I have 10.5.2 and the same version of Firefox. I don't have a way to debug this right now (can only afford one mac), but I'll try to replicate the hang in other browsers.
The downside is that whatever you come up with to get users may suck away too much time and effort from improving the product itself. You can always outsource the building of such add-ons by providing an API and directing users to your site that way.
Edit: There's also a typo (harware)