Lovely Charts

So, there’s already been a couple of lovely articles written on Lovely Charts on the web and I’ve even had the honor of being interviewed a couple of times, so really, there shouldn’t be any big fuss to make out of this, but honestly, despite the growing aura of web publications, seeing your name on glossy paper still has this little special dimension… And when it’s completely unexpected and you’re just reading a magazine you bought 15 minutes earlier because you enjoy reading it, without knowing anything about its content, it really becomes one hell of a nice surprise !

Thanks to the Bizz Magazine team for the lovely mention !

So, today is probably not the best day for such an important announcement, but I swear this is not a bad April 1st joke, it’s for real !
Since about 15 minutes, premium users can now take advantage of “Lovely Charts’ n°1 most wanted feature of all times” AKA the ability to import images (JPG, PNG, GIF) into Lovely Charts and use those like any other symbol.

I’m so excited by this feature I can barely write this post up, this is only a first step towards making Lovely Charts an extensible platform, but it’s a GREAT step, as it really opens a whole new level of possibilities!
I quickly made the little diagram below to give some idea of the immense potential of this new feature (please ignore the diagram’s content, it’s not meant to be 100% complete or correct):

Even if our own tests show that it’s already quite robust and usable, I consider the feature to be in Beta status for now, please let me know if you encounter any issues of any kind with it, by dropping me an email at beta at lovelycharts.com.

At the moment, the following limitations apply:

• This feature is accessible to Premium account holders only.
• Libraries are limited to a total of 10Mb
• Individual uploaded files are limited to 2Mb per file
• Import is limited to JPG, PNG, and GIF files

These limitations are not carved in stone by anyway, so also don’t hesitate to let me know how you feel about these limitations, either via email, or via a comment on this blog.

Now, it’s time for some serious diagramming fun!

So, besides architecting Lovely Charts 2.0, I have this biiiiiiiig list of things I want/need to work on: new features to add, existing stuff to improve or change… Thanks to your incredible feedback, I’ve been able over the last weeks/months to gain a pretty good understanding of what was most desired or criticized; but now, how do I take actions on this and concretely decide on what to work on next?

Well, I did two things last week to help me out with this prioritization process:

• Classical “Risk/Reward” evaluations: looking at the entire feature/enhancement requests list, A.) what would be the reward(s) if I added/improved feature XYZ? Would it improve the user experience, global quality, the free > premium conversion rate, …? Then, B.) what are the assoicated risks? Is it highly complex or is it easy to do? Does it have “strings attached” in terms of infrastructure costs or requirements, how heavily could it impact the existing code base, etc?
• Spiking. A spike is a technique often used in Agile processes when a story can’t be properly estimated because of its technical complexity or novelty. It’s about exploring options, prototyping, builidng POCs, (in-)validating ideas, in short doing what’s necessary in order to figure out appropriate solutions to complex and/or little-known problems, and consequently make informed decisions.

Spiking in particular, has been of tremendous value, as it really helped prioritizing features and assessing attached risks based on a early, thorough understanding of the issues at hand, I can’t recommend strongly enough you give it a try if you’ve never done it.

What have I spiked this week? Well, I notably investigated SVG export, and realized it wasn’t going to be difficult to implement per se but that it would nevertheless require some serious testing to get it right across the entire library set and accompanying options, which lead me to give a high Risk threshold to this feature.
But I also started seriously considering options for Lovely Charts’ most desired feature of all times: Importing custom symbols (images, vector flash files…), and definitely established the architecture was flexible enough to accomodate it with very minimal effort! The picture above is a screenshot of my spike’s result showing an image of Lovely Charts’ home page being imported and used in a diagram.

Realizing this definitely allowed me to reduce the risk level I had previously perceived as attached to this, so given the fact that this feature has maximal reward value, I think it’s perfectly reasonable to decide to implement it now, and even announce it!
So that’s what’s coming up next: the ability to upload your own symbols and thereby extend the library and tune it to your specific needs.
That being said, even if my spike validated the fact that it was feasible at a reasonable cost, it’s still a significant piece of work, so you won’t see it immediately, but I believe you can reasonably expect it (ie, a beta version) by the end of the month!

As promised last time, let’s welcome with this week’s release a couple of additions to the various symbols libraries:

• There is now a scrollbar symbol in the Wireframes library.
• Vertical & Horizontal annotations symbols were added to the Basics library
• But most of the additions have been made to the Flowcharting library, notably including most-wanted swimlanes symbols (vertical & horizontal), an Activity symbol, and a couple of various miscalleneous process-related symbols such as External Entity, Loop, and External Reference.

I just made a little diagram using the new vertical swimlane symbol and the activities symbol, let me know what you think of it:



Besides, I’ve also fixed a couple of things in the app itself, notably restoring the proper functioning of keyboard shortcuts (on a limited set of browsers unfortunately) that broke with a silly typo I made in last week’s patch.

Please continue to let me know of issues you encounter or features you desperately need, it really plays in the prioritization process!

That being said, let me conclude this post with some insider information on what’s going on at the Lovely Charts headquarters (note to self, post a picture of home office, including canine co-worker^^): the last weeks have just been absolutely crazy! Besides working on regular updates, patches and additions to the current Lovely Charts version, I’m also dedicating quite a significant portion of my time to the architecture and development of version 2, which will notably include a complete revision of the editor component. Progress has been pretty awesome lately, so I can’t resist the temptation of showing you this sneak screenshot revealing quite a bit on what’s coming (automated layouts amongst other things):



”Looking” cool, no?

Jérôme

Even if the updates list is not huge, I’m pretty happy with today’s release as it fixes a lot of relatively minor (and well, let’s face it, some major ones as well ^^) issues that could have lead to a frustrating user experience… So this is really a nice step in the right direction.
Here is what has been added/fixed in this release:

• Proper controls updates when updating the selection: There used to be an issue where property controls, such as fill or stroke colour for example, did not properly update when you selected different objects. Not a huge deal on its own, except it came with the side effect that if you had picked the red colour, selected a green item and wanted to make it red, you had to pick first a different colour before being able to assign the red colour to that item. This is now FIXED.
• Allowed the connection labels to be multiline.
• Fixed a bug with the Alt Gr key that was particularly annoying for users using that key a lot to enter special characters, such as Polish characters for example.
• Finally added support of the BACKSPACE key for deleting objects on Apple computers. Sorry guys, I used to ignore you don’t have a DELETE key
• Enforced the file name validator I mentionned last time to prevent you from ignoring it
• Fixed a couple of copywriting errors on the homepage (Thanks Michael!), and changed the “Try it” button to a “Login” button, as some users reportedly found it confusing
• Fixed some bugs with some connection drawing corner cases
• I want to be very careful with this one, as I’ve already thought so many times I had fixed it, but I think the infamous “orphan symbol causing strange export results” has finally been eliminated ! (Crossing fingers)

In the next days, I’ll focus on adding some “most-wanted” symbols to the library, so if you have some specific symbols you desperately want to see in here, now is the best moment to let me know !

So, the last couple of weeks have been pretty wild, with tons of emails flowing in, user feedback to digest and customers to support (thank you all!), all that while still trying to deliver on a running consulting engagement, crazy times!
The good news however is that, starting tomorrow, I’ll have a lot more time to work on Lovely Charts’ future and polish up this lovely experience, so you should normally get to see more and more frequent and important updates in the upcoming weeks!
Nevertheless, with the intention of adhering to the agile motto of “Release Early, Release Often”, I’m happy to bring you today the following small improvements:

• PDF Export (premium accounts only): Premium account holders now can export their diagrams directly in the PDF format, for quick and easy distribution and printing. This is a quick, temporary solution where diagrams are simply embedded as PNG bitmaps into PDF documents, it’s not yet the full-blown vector PDF export I know some people expect, but obviously this requires a lot more work. Bear with me, my intention is still to have vector export in (PDF, SVG, maybe EPS?) at some point.
• Enhanced connection snapping: “high quality output” being a core driver to the project, we need to make it easy for you to create diagrams where items are properly aligned, where connections “snap” to the center or corners of symbols etc etc… Therefore, one thing that was missing previously was an easy and proper way of creating straight connections that were perfectly horizontal or vertical when not connecting remarkable points such as centers or corners. This is now a shortcoming of the past, connections that used to be almost horizontal or vertical will now be perfectly horizontal or vertical !
• Diagrams are now ordered by creation date, in descending order, so the most recent ones always show on top.
• Fixed a couple of bugs with some symbols, such as the Horizontal Arrow which used to expand on its own when editing its label, or the Text symbols that did not allow for horizontal text alignment!
• Fixed a bug that caused saved diagrams to appear as empty when opened back.
• Fixed a bug with UI controls focus that could occasionaly lead to strange UI behaviours, given some very specific scenarios.
• Added a validator to the export form to prevent users from specifying invalid file names, which previously failed silently
• Fixed a bug with connections Z-layer ordering which resulted in some strange results from time to time

Please continue to let me know if you encounter any issues with Lovely Charts, or think of a feature you need, I love it!

Even though I intend to keep maintaining this blog as a primary communication channel for updates and the general roadmap for Lovely Charts I realize it’s still a rather inefficient channel for real conversations and instant updates (especially since I’m pretty bad at replying at blog comments ^^)…

Luckily, the web today offers lots of great services that can help companies like mine communicate in the most natural way with its customers community… So, let’s use those !

For a start, you can follow me on Twitter, as @lovely_djay, or become a Lovely Charts fan on Facebook, I’m looking forward to kick off some great discussions over there!

First of all, a huge thank you to all those who provided feedback over last week. I’m sorry I haven’t been able to reply to all, but the response has been pretty overwhelming with dozens of emails flowing in every couple of hours, pretty hard to keep up with!
That being said, be ensured I have been reading all of your feedback, suggestions, bug reports, comments and feature requests, which have helped me establish a clear list of priorities for next steps, leading me today into releasing the first post-launch update.

Version 1.0.1 Release Notes:

• Now supporting a pretty extended character set, including cyrillic alphabet (and thus Russian), German, Czech, Hungarian, Italian, Spanish, Portuguese, Polish, Romanian, Swedish, Norwegian and Turkish special characters! Being absolutely no expert at any of these languages, I am not 100% certain all needed characters have been included, so please let me know if anything is missing for you ! All my excuses to asian users, but the (very large) character sets you guys require are not in yet, but that’s the next thing on my list.
• Fixed a couple of typos here and there in email templates
• Removed passwords from confirmation emails for security reasons
• Changed the preloader’s ugly background color. I promess I’ll skin the preloader some time, but in all honesty I haven’t flagged this as being highest priority, sorry for the purists
• Fixed a bug in the Document, PaperTape and Data Storage symbols that made them expand wildly when typing in labels
• Last but not least, I think I finally got rid of a very annoying bug that I thought had been eradicated during the beta, but not. That bug resulted in strange export results where the exported image looked very small, which was caused by an “orphan” symbol that got placed at the top left corner of the drawing grid for a previously unidentified reason. I don’t want to claim victory too soon because this has been a real tough one to track down and eliminate, but I think I’ve nailed it !

Coming up next, in yet undefined order: AIR offline version, custom symbols upload (for premium accounts), expanded symbols libraries (for premium accounts), PDF export, direct printing, emailing to friends and co-workers, asian alphabets support, and many many many more things, but quality first !

This will come as old news for those who already noticed or learned the news via some early twitter buzz or a couple of lovely , lovely, lovely articles (thank you all!!!), but I’m still proud to announce here that, as of 01 February 2009, Lovely Charts is fully available for all, at http://my.lovelycharts.com!

This marks the beginning of a new exciting and challenging era that I’ve really been looking forward to during these last 2 years spent designing and developping Lovely Charts… As experienced as I am with RIA training, consulting, design and development, the art f building and developing a product-based business is definitely lot less familiar grounds to me, but that’s precisely what makes it an even more exciting challenge, one that I am willing to meet !

Now, besides the announcement, there’s also a couple of other things I would like to use this post for:

First, a big big big big thank you I never took the time to express,

• To all the beta testers who provided amazing feedback during the beta period. Lovely Charts is still not perfect, but I don’t know of any software that is, even those with armies of developers and QA engineers behind them :). User feedback is definitely the most valuable asset to any software, I think I’ll never thank you girls and guys enough!
• To Ben from Deaxon for the gorgeous presentation website. If you ever need an interaction designer with a strange haircut but a great sense of humor and above all amazing talent and eye for detail, then Ben’s the man you need.
• To Renaud for the drop dead gorgeous symbols library. The guy is so talented you would normally hate him, if only he wasn’t one of the nicest person on earth.
• To Kristian, for the initial motivation and always great discussions
• To Mark James, for his famous icons library I’ve, as many many others, shamelessly abused in many areas of the app. Amazing work.
• To Adobe Systems, for the fantastic Flash platform and tools, but also for indirectly funding this adventure by occasionally employing my humble consulting services
• To my fantastic wife Marie for her love, support, and sound advices. Grou !
• Finally, to all, friends and family, but also complete strangers, for support and feedback. This has been a great adventure so far, and it’s only getting started!

Second, I’ll try to give more details on how things move on a regular basis on this blog, but I would like to very quickly give a first update on what’s coming up next in Lovely Charts:

• Extended character support. I know a lot of users have been frustrated by the fact that Lovely Charts only currently support a basic character set (basically Basic Latin)… With Lovely Charts still being a web application, and character embedding being a tricky question when it comes to embedding very large character sets such as asian alphabets, I can’t promess now we’ll soon support all the languages of the world, but I can say we’ll work on this. Concretely, I think german, nordics, and extended latin characters will be supported very soon, this week still maybe!
• Custom icons. This is probably the most sought-after feature, and I definitely understand why. It was deliberately kept out of this release so that V1 could get released, but don’t worry, I know it’s wanted, and this will be in soon!
• PDF Export, and direct emailing will be added soon as well
• Last but not least, an AIR version is in the works, which will allow its users to work offline and save editable diagrams locally, while retaining the ability to share and collaborate when connected.

There’s definitely a lot more to say and do, but I think that should already be a couple of great first steps!

Beware, great (and scary) news coming! The beta period is coming to an end, everything seems pretty much in place and we are now kind of ready to launch :)… Just a couple of last minute fine tuning touches to bring, and we’ll be fully available for all ! Stay tuned for the BIG announcement coming up very soon !

Meanwhile, I would like to use the opportunity given by this blog post to announce the addition of a new and sexy feature to Lovely Charts: Rich Text Formatting.

This is one of these features I’ve been pushing back on since the beginning for various reasons, amongts which notably the fact that I didn’t want to clutter the user interface with “futile” features. But user feedback, and realworld usage of the app have pretty much convinced us of the necessity and added value of such a feature, so we have been considering this for quite a while now, but it’s been far from trivial.

The top bar of the application holds all controls impacting the visual aspect of symbols and connections, and it’s been deliberately constrained to the strictly necessary.
But even then, in a “small but average” screen resolution such as 1024*768, the top bar pretty much uses all the available space, so adding extra controls would have obviously implied quite a bit of reorganization work…

Please take a look at the video below to see what solution we came up with and implemented, and let us know what you think, I personally think it’s pretty cool and efficient !