Skip to content
hasenj edited this page Aug 21, 2010 · 3 revisions

Introduction

MangaReader is an experiment in UI design. It’s a project to create a manga reader that I personally would love using.

The driving principles behind the design and implementation are:

  • Fast and responsive
  • Non-clutter UI
  • Don’t make me click

In other words: effeciency.

Effeciency in performance. Effeciency in user interaction. Effeciency in using screen real-estate.

What does all that mean anyway?

Scrolling Through Pages

You don’t have to think about the 'image file' representing the next page; you shouldn't have to manually jump from file to file. You just scroll down, and the next page naturally and effortlessly comes up.

This useful not only for reading, but also for quickly skimming: you can get a quick feel for what the manga is like by quickly scrolling through a bunch of pages.

Responsiveness

On disk, a manga is organized as files inside folders (inside folders) inside a root folder. Images represent individual pages, where as folders represent chapters (and volumes).

To provide the scrolling functionality, images must be loaded recursively. But that’s silly: loading all these images will take a considerable amount of time and make the program unresponsive. Even if we do it in a background thread, there will still be the problem of eating too much memory.

A lot of care went into building a mechanism that can load images contextually, so that only images around the “current” image are ever loaded. As the user scrolls up or down, images get unloaded and new images get loaded seamlessly in the background. It’s important that this whole thing is seemless so that the user would never guess that so much work is being done to load/unload images.

Simple UI

The UI is not cluttered with useless menus. In fact, as of now, there are no buttons at all, only the viewing area. This is mostly due to laziness =P as I’m not much of a GUI kinda guy.

However, it’s also partly intended. This manga reader will never have thick toolbars.

To be honest, this is one of the areas I’m still exploring.

Eventually I intend to have a single toolbar, with possibly a chrome-like statusbar; something that’s hidden most of the time, only appears when you hover its area. I might have the toolbar almost hidden as well, maybe making it transparent or thin when the mouse is not near it.

That tools bar would allow access to bookmarks, the manga database, and things like that.

Clone this wiki locally