bitolithic's blog

In this post we look at how we went from the text-based interface of ComicZeal V1.0 to the flowing comic covers of V3.0.

By the end of 2008 it was becoming obvious that to stand out and be successful on the app store applications needed to provide a rich graphical experience.

I was getting more and more requests to provide an interface similar to the ‘Classics’ app, which at that time hadn’t yet been released but was making waves with its innovative user interface (1). Classics displays a nicely rendered bookcase with multiple books on each shelf. The books can be re-organised by dragging and dropping them around the bookshelf.

What the people making the requests didn’t realise is that the functionality provided by ‘Classics’ doesn’t scale very well when there are thousands of books, or comics, to manage. We needed to provide a richer interface but still maintain the speed and organisational abilities that had been provided by the user interface so far.

To help us in this we enlisted Adam Shiver from Elixir Graphics and it was one of the best decisions we ever made. If you’re a single developer working in your study, or basement or whatever and you think you can do your own user interfaces let me tell you this; you cant. Start working from that assumption, if in addition to being a developer you have years of experience in graphics design then sure, maybe you can, otherwise find a professional to help you.

I described my requirements to Adam and within a couple of days he sent me this proof:

It was everything we wanted from the point of view of improving presentation and we decided to go down that road but limit the display to one comic per shelf. The differences between landscape and portrait comics, comics in boxes, comics in bags and the requirement to display text in a readable size AND run on a first generation iPhone made multiple comics per page too difficult.

Adam spent some time refining the mock-ups, I spent many a late night coding and by early February we were ready to release Comic Zeal 2.0. In addition to the new interface it had a number of speed improvements, a different comic storage method which made backups a lot faster and added the ability to rename and move comics.

Here’s what it looked like:

Once V2 had been out for a few months and maintenance for it wound down we started to work on V3.

Version 3 was to add the multiple books-per-shelf featured that we’d wanted for V2, it also had a redesigned comic selection interface that showed recently viewed and downloaded comics. We moved away from the bookshelf presentation as it was too difficult to reconcile it to the varying number of comics on the screen at one time.

Instead we enlisted Adam’s help again to develop an interface where the comics float over a fixed background.

The floating comic effect is normally quite subtle but they pop up when the interface goes into edit mode, when one is selected it pops down and trembles. Is it excited at being moved or scared to be deleted? No-one knows.

Version 3 was released in August 09 and this is what it looked like:

That brings us up to date! Next up Comic Zeal V4, for the iPad.

(1) Well, innovative for the iPhone. The bookshelf look was pioneered by Delicious Library, and as iBooks shows, even Apple are fans.