So, what’s in this update?

Bug fixes, bug fixes, bug fixes

Despite the globally satisfactory rating (3.7/5 over 32 reviews), reading reviews and support emails, I know the Lovely Charts for iPad experience hasn’t been so lovely for some people, who’ve notably reported numerous crashes.
Believe me: I hate this more than anyone.
I’ve developed this the best I could, and tested it rather extensively, myself but also with the help of a bunch of awesome beta testers. During beta testing, many many bugs were uncovered, and fixed, but unfortunately this didn’t prevent other bugs to sneak in unnoticed.
Believe me again, as a developer, there’s very few things more frustrating than seeing crash reports that you didn’t notice, or worse, that you’re completely unable to reproduce despite hours of testing.
Now, thanks to crash logs and even more extensive testing, I’ve finally been able to track down a bunch of those nasty bugs, and believe this 1.2 update is pretty stable . No leaks show up in Instruments or when analyzing code, and I’m completely unable to crash the app myself even if I try very hard.

Formatting options

This has been the #1 feature request since the very first release. You can now style your diagrams with a bunch of options:

• Set text font, size, color, attributes (bold/italic)
• Set the stroke color for both symbols and links
• Add drop shadows to symbols

And as an extra, all those options can be saved into styles presets, that you can then apply to other items, either individually (select item > tap on desired style), or globally, ie “make all symbols pink with a blue, bold label” (select any item > double tap on desired style) .
Style presets can subsequently be deleted using a simple, standard swipe gesture on the style you wish to remove.

Focus mode

Initially, I envisioned Lovely Charts for iPad as a very simple app. A tool with limited options, that you’d use to quickly brainstorm or draft diagrams during meetings etc. This lead me to design a rather minimal, “as chromeless as possible” interface, favoring natural, intuitive gestures over buttons and typical UI artefacts.
Now, as the app matures, and additional features make their way into the app, preserving the elegant simplicity of the UI is only going to get more and more challenging.
So, how do I plan to address this? Well, first and foremost, by opposing a strong resistance to the temptation of too quickly adding too many features, and second, by introducing a new, pretty cool, “Focus Mode”, similar to what iA Writer offers.

Want to focus on your content, get maximum screen estate, and zero distraction? Simply swipe up near the top of the screen to get rid of both navigation and status bars.
Feel like changing some colors, formatting some text? Swipe down in that same zone, and recover access to everything you need.

I personally really like this new feature a lot. Offering a completely chromeless drawing experience is something I’ve been willing to do since the very beginning, so I’m happy !
What do you think?

Contextual actions

Last but not least, I’ve added a couple of action buttons at the bottom of the popover that shows up when you touch & hold and element: Delete, and Duplicate (symbols only). Delete first because it’s true that sometimes drawing a “Z” over a single element can be complicated, and Duplicate because it’s rather handy, especially when in “Focus Mode”, when you don’t have a direct access to formatting options.

So, after a pretty cool week 1, how have week 2 and 3 been going?
Well, not too bad, considering Christmas is probably not the best period for productivity apps anyway…

Summary

Here are weekly sales numbers for december 2011:

What gives, a little under 1500 units sold in 3 weeks.
Numbers where pretty low during Christmas (normal), but went back up right before New Year’s Eve, essentially thanks to the Japan store (see below).
The good news is numbers for week 4 (starting on 1/1/12) are already higher, despite the fact that we’re only tuesday.
Key take way from this first “month” is probably that almost a third of the sales happened on the launch day, confirming what everyone says, maximizing your launch’s impact is important. That being said, the way I see it, having a “soft” launch is a relatively good thing, giving me a window to fix stuff and improve the product without it being too much the center of attention.

Arigato, Japan

The last surprise of 2011 (besides spending NYE in the ER because my daughter’s attraction to coffee tables ^^) came from Japan, where most of my sales since the 30th have happened. Why?

Because the app got nicely reviewed by AppBank, an apps review site that’s apparently relatively popular in Japan. Lessons learned, again:

• Press matters. I had witnessed that with the German app store during week 1, this only confirms it.
• The App Store world is a local world. Thinking about it, it’s all logical, but this actually came a bit as a surprise to me, the world is not flat :). Your app can be scoring high in a specific store (Lovely Charts climbed to #9 Paid Productivity in the Japan App Store last week), and not even appearing in the top 300 for other stores. I should better get started with that french localization :)
• Twitter is hot in Japan. Actually no, I don’t really know about that, but something struck me when that AppBank’s review appeared: it got retweeted quite a bit, but most importantly, most of the japanese accounts that retweeted the info had a substantial followers count, many above 2K. Is this a known phenomenon?
• No one from AppBank asked me for a promo code. Don’t know if that’s usual, but anyway, thanks A LOT egaku, I definitely owe you a beer (at least) :)

What about updates?

Obviously, the last couple of weeks have been a bit slow, but I’ve nevertheless managed to find some time to make some progress with the upcoming update. Really happy with how it’s turning out! If my daughter stops falling sick and falling on tables, I should be able to push this update out quite soon, crossing fingers ! :)

Getting back to it now, so thanks again all for the amazing support and feedback, have a lovely 2012 !

App update

First things first, you’ll be happy to learn I’ve just submitted an update of the app, fixing a couple bugs here and there, and most importantly, adding an export to PDF option!
There will definitely be more updates in 2012, but I really wanted to get the first update out before the end of the year, mission accomplished (if it gets approved in time by Apple that is :)!

Sales

Yeah yeah, I know that’s all you curious bunch care about :)
So, here are the sales numbers for the Lovely Charts’ first week in the App Store:

872 sales in total.
As I said above, I pretty much had no idea what to expect, so I’m rather happy with how this turned out, thanks everyone :)
I have to admit the biggest surprise for me was to see how quickly sales dropped. I knew that was going to happen, but I guess I kind of hoped this would be a smoother fall :)
The App store is a cruel world, if you don’t make it to the top, be prepared to dive quickly in the abyss and stay there in the dark for a while…

Personally, I think that’s reasonable, and see this as an opportunity to fine tune and polish my app without being in the spotlights, overwhelmed by support requests etc. We’ll see later if and how swimming back up to the surface can be done :)

Small stores don’t count.

Before last week, I knew the US App store was definitely the most important, but I didn’t have any clue how that translated in sales.
When I saw Lovely Charts climbing to #5 Paid Productivity Apps in the Belgian store, just behind the usual Pages, Keynote and Numbers, I admit I got a bit excited :)…. But how many sales does that translate into? 21, doh.
In comparison, I sold 85 copies that day on the US app store, and that only took Lovely Charts to #29 in the Paid Productivity Apps charts.

Press matters

My biggest sales until now have been in the German App Store. Why?
Because it’s one of the biggest european stores
Because the launch happened at a “european time”, ie 11AM CET, which is the middle of the night for the US.
Because of that it essentially got retweeted by european twitter users.
Because then the app got reviewed by a bunch of german sites (danke!), and that brought Lovely Charts into the top 10 of the german app store.

Lessons learned: german people are awesome, launch when the US are awake, and focus on getting the US’ attention.

Reviews require thick skin and cold blood.

To be fair, I kind of like the App Store’s review system.
It’s often criticized because it’s pretty much a one way channel. You can’t respond to reviews, argue with commenters, defend yourself, and that is indeed a bit frustrating when facing unfair reviews.
On the other hand, it adds a certain distance and objectivity. Your app is out there on its own, and it has to speak for itself. That’s tough but that’s ok.

But it’s not perfect, and seeing one or two star reviews based on missing features that you don’t even pretend your app offers is indeed unpleasant :)
I have no problem admitting my app has flaws, and that there are features that are missing. It’s very true, it’s 1.0 (1.1 soon, PDF Export, check !), and it doesn’t pretend to be solving everyone’s problems.
But blaming it for not having features it doesn’t claim to have? That’s not fair.

The good news though, is that even the reviewers that left poor reviews seem to agree that the app works as intended, and that’s pretty much the most important to me.
Here’s a sample of what people who left poor (1) to average (3) reviews had to say: “It works as advertised“, “Drawing shapes is easy and works“, “Gestures are great. they make excellent shapes.”
I can live with “bad” reviews like that :)
Average is now at 3.5, with 8 out of 13 reviews scoring 4 or 5 stars, thanks everyone !

What’s next?

That all being said, there are indeed tons of things to improve/add/enhance, and I’m really really pumped up with motivation to transform what I consider a great start into a truly awesome app.

As I said above, PDF export is coming your way.
After that, I’m not going to commit to anything or tell you yet what will be next, but for your information, here are the most requested items on my list:

• More libraries
• Font control (size, color etc)
• Undo/redo

I’ll see what I can do :)… Looking forward to 2012 with great plans for the app, I wish you all with a bit of advance an awesome christmas and happy new year!

That product, is Lovely Charts for iPad, and it’s with a great pleasure that I’m announcing to the world today.

I’m really, really, really excited about this new app.
Despite its apparent simplicity, this product probably embodies the best the original vision I had for Lovely Charts: “making it super easy to create good looking diagrams”.

Check the video above, try the app if you like what you see, then please let me know what you think :)

Now, this is very probably the last release of 2010, so I’d like to use the opportunity of this blog post to wish you all, in the name of the entire Lovely Charts team (yes, all 3 of us, see below) the very best for the upcoming year!

In the Online Edition, you could import images, JPG or PNG.
In the Desktop app, you can import images, JPG or PNG, either from your filesystem (File > Import… or by drag&drop) or from Iconfinder, but also vector symbols (SWF), meaning those can be resized as needed without ever loosing any quality.
The libraries you create by importing external assets can subsequently be exported as independent files (.lcl), which you can then share among your teams, friends and colleagues.

Because examples are worth a lot more than words, here are a couple libraries you can add today to your installed copy of Lovely Charts:

1. Webalys GUI Library

This awesome set of GUI vector elements was originally created by Vincent Le Moign of Webalys.com, as an Illustrator library: User Interface Design Framework.
Vincent was kind enough to allow me to convert his library to Lovely Charts, so that’s what I did ^^
If you like it, make sure you pay a visit to Vincent’s website, on top of being the (very) nice guy who designed this lib, he’s also a great freelance UI designer and the author of this absolutely fabulous Icon Library, which I think you should all buy :).

> Download User Interface Design Framework. Once downloaded, simply drag&drop it onto Lovely Charts to install it, or use the File > Import menu option.

2. CISCO Network Topology Icons

I’ll be the first to admit I know pretty much nothing about computer networks, so I guess it’s only normal that the default Network Diagrams library that comes with Lovely Charts is rather incomplete, to say the least.
Never mind, CISCO provides an exhaustive and “official” symbols library for drawing network topologies, which I took the liberty of converting to Lovely Charts Library format. Cool, no?

> Download CISCO Network Icons. Once downloaded, simply drag&drop it onto Lovely Charts to install it, or use the File > Import menu option.

Creating your own

Now, how do you create your own vector libraries? I’ll dive into the details in a later post, but here’s a quick breakdown:

• A Lovely Charts symbol is just a Flash library symbol, except it’s been “exported” (ie given a class name) so that it’s accessible from Lovely Charts.
• Knowing that, the easiest way to create a new library is to 1. create a new Flash file, 2. create your symbols, 3. make sure those symbols get class names (see below), and 4. publish your SWF file
• The published Flash file must be AS3
• If you wish to create advanced symbols, using the drawing API, or implementing some custom logic in their own classes, please get in touch, and I’ll provide you with some material to get started, before I find the time to write a proper tutorial.
• Don’t try to access global properties such as stage or methods of the parenting app, as this will throw errors

Lovely Charts currently allows you to import images (JPG, PNG, or GIF) and SWF files. To import, use the File > Import menu option, or simply drag&drop the file(s) you wish to import onto the app. A dialog will open, where you’ll be able to review and check the list of symbols you will import.
Unchecking a symbol means it won’t be made visible in the library.
When you select a symbol in the list, you can define some options for it, such as its name, and the relative position of the label it’ll get in Lovely Charts.
Once you’re done reviewing, give your new library a name, or import the assets into an existing lib, and press OK!

If you’d rather not read, just click here and watch the video, it does its job quite well, me thinks^^.

Anyway, what’s in this new version? Tons, probably too much to list without boring everyone.
To summarize, I like to think about this release as the grown-up version of V1 (which btw still powers the online app).
I’ve always said my core intention with Lovely Charts was to make it easy for people to communicate visually, with diagrams that look good even if you don’t have the slightest design skill… So, how does this translate in new features?

• Automatic layouts. Need an org.chart, or a sitemap, with all items properly, pixel-perfectly aligned? One-click of a button
• Import from text files. You’d rather draft out the structure in a text file first, THEN worry about drawing a sitemap? Easy.
• Iconfinder integration. Need some fancy icon but you don’t know where to find one? Simply hit Ctrl (Cmd on Mac) + F, and instantly access a repository of over 185,000 great looking icons, ready to grab and insert in your own diagrams.
• Pick your own fonts.
• Enhanced connections: now pixel-perfect, and controllable via, well, control points.
• Drawing guides. Align and regularly space symbols without thinking about it. It just snaps.
• Import images AND vector symbols
• Create & Share your own libraries. More on this in an upcoming blog post
• …

I could go on for hours, but I think the video, and above all the FREE demo, both do a way better job at giving you a sense of what’s in this new version, so please do me a favor, go ahead and try it out!

First, you need to create a text file in your favourite text editor, something like Notepad on Windows or TextEdit on Macs.
In that text file, you’ll put down the diagram’s structure as simple tabbed text, like this:

This is pretty explicit, right? New items are added on a different line, and child items are added to their parent by placing them below, indented by tabs.
Give that file the name you want and save it as simple text (ie, not rich text), preferably encoded as Unicode/UTF8, especially if you have special characters and/or accents in your labels.

Once you have a text file ready, all you need to do is import it, either by drag&dropping the file onto an open instance of Lovely Charts, or via the File > Import… (Cmd+R or Ctrl+R) menu option: pick your file, and you’re done!

The generated diagram will be automatically laid out as a vertical tree, but you can obviously modify it as you want, or apply different layouts, as explained here.

Let’s say you’re creating a diagram on social networks, and thus need some good-looking icons for all those networks out there. Obviously you could start browsing the web, download each network’s logo as an individual image and subsequently import those. But there’s an easier way :
Simply hit Ctrl+F (Cmd+F on a Mac), or go to Help > Search Iconfinder.net, and instantly access one of the, if not the web’s largest icon repository, with over 186,700 royalty-free icons.
Type in what you’re looking for in the search box, say “facebook”:

When you see an icon you like, you can just simply “add it to your basket” by drag&dropping it to the “Import the following symbols” box on the right. But that’s not all: below each symbol you’ll see a little folder icon you can click on to view the content of the iconset that symbol belongs to.
This is particularly useful in our case, where we need to find icons for multiple social networks, so I’ll just click on that folder icon below a symbol I like for its style and tada, sexy, similarly styled icons for all major social networks:

I’ll then drag the symbols I need to the import box, and once I’m done, define how I’d like to import those symbols, and hit Import!

Once imported, my new library will then show up in your LIBRARY panel, as shown below:

Applying a single layout

This is the simplest way to use automatic layouts. Say you have created the following sitemap, and want to arrange it all nicely and properly:

All you need to do is pick the layout you’d like to apply in the LAYOUT panel that’s at the top right of the user interface…

… and tada! Here’s what I get with an horizontal tree layout applied with a 50px horizontal gap and 15px vertical gap:

Cool, right? Note that, if you make changes to your diagram, adding or removing items, you can always re-apply the same layout by hitting the little checkmark button next to the layout settings.

Creating composite layouts

Now, applying a unique layout to an entire diagram is quite cool and simple, but sometimes you’ll want to mix up layouts and create more elaborate compositions, applying one particular layout to some items, and another layout to the rest.
Lovely Charts lets you do that very simply, by applying layouts to selected items only.

Looking at our previous example, applying a classical vertical tree layout to our sitemap would result in something pretty difficult to use, with a small height but very wide:

A typical way of arranging such a sitemap would be to apply a tree layout to the home page and first-level sections and then a hierarchical layout to all child items beyond the first level (sections):

In order to do this, all you need to is select a section and its child, and apply a Hierarchical layout to it:

Note that if you haven’t selected anything when selecting a layout, Lovely Charts will just apply the layout to everything as we’ve seen in the first place.
Automatic layouts can be applied to pretty much any kind of diagrams, but it will fail if you have any kind of “circular references”, ie connections linking back a child to one of its ascendants, like in the following example:

In such cases, you’ll need to first delete the connection linking the bottom right child to the top item before you can apply an automatic layout. Once the connection removed, you’ll be able to apply any kind of layout, after what you can always re-create all necessary connections.