Visual Interface Practice – eBook Library

Since we started our poison blogs, I’ve been making an effort to gain a level up in visual design skills. One of my bald spots is typography. This is an area I’ve never had any intuition for… As a kid my handwriting was pretty horrid and it hasn’t really improved much since. I think the latent SHAME might be part of the reason I’ve generally avoided thinking about text and form together.

As a step towards rehabilitation 😛 I have been working through Designing with type – The Essential Guide to Typography by Craig, Scala and Bevington. It’s organised like a textbook so it works well as an introduction. I’m only about a quarter of the way through but I feel like it’s time to break things up with a mini project.

A visual interface for eBooker

This continues from the last post on eBooker UI. eBooker is a project Min’an was working on a some time ago. For more background info see the original post. This isn’t meant to be a pure typography project but hopefully I’ll be able to put some new knowledge to use.

Typography can get overwhelming. There are so many choices with such subtle variations that it’s quite tricky to figure out where to start. Whenever I’ve tried to make font choices in the past I just find myself constantly going back and forth comparing one to another. So to avoid drowning in choices, I’m going to limit myself to considering a few fonts for now. Designing with Type has a Chapter early on about five classic fonts which I’m going to use as an anchor. 

Garamond – Old style

Baskerville – Transitional style

Bodoni – Modern style

Century Expanded – Slab serif /Egyptian style

Helvetica – Sans serif style

Each was developed at a different time (Garamond as early as the 1600s) and it’s pretty cool to see how the iconic styles evolved. For example, Garamond was created when the paper and printing technologies were still quite primitive. The strokes are relatively thick and it looks kind of flowy due to its sloping serifs.

In contrast, when Bodoni was created, improved paper and printing technologies meant that there could be more contrast between thick and thin strokes. The resulting look is very sleek and dramatic.

If you’re curious, this article summarises the story of these classic fonts quite well. There is also a neat little eBook on the basics of typography with all the jargon explained in a fun and cheeky way.


The Results

A note on names: I thought it was odd that eBooker sounded more like an app that helps you make bookings than something to do with books. I quite liked Calibre’s name in that it doesn’t have anything to do with books necessarily but it’s still quite memorable and has the right feel to it. So, while doing the designs I also rounded up a few alternative names.

Brainstorm results – Type, colour and concepts.

More fleshed out VI designs

The interface was fleshed out using the wireframes from the previous post as a base. I spent most of the time playing with alternative looks and layouts and didn’t get a chance to do a complete set of screens. There are still lots of things bothering me about these attempts but no point being a perfectionist now. Hoping that when I look back on this after a few more months I will be able to see why certain things look a bit off.


Project a Fortnight – eBooker UI

Fellow poison blogger, Min’an (a.k.a. Potato-Y) recently devised a neat little regime for fending off perfectionist traps. The idea is to focus on one discrete project a fortnight, rapidly experimenting, building and learning. Then when the fortnight is up it’s time to move on, leaving all thoughts of enhancements and bug-weeding behind.

Last fortnight was spent working on eBooker, a web based ebook library. The results of his experiment can be seen in this show and tell post. At the same time, I was happily piggy backing off this project and approached the same problem from a user centred design perspective.

My idea of user research was lurking around on forums eavesdropping on Calibre users as well as having informal chats with friends and family who have an interest in eBook collections. All in all, a very hacky process but it still yielded some interesting insights. Here’s a summary along with bits and pieces of the mockups:


Recents and Favourites

People only attend to a small number of books at a time. These tend to half-read books and frequently used reference books. These should be easily accessible and not embedded in any deep hierarchies of organisation.

Grouping by recently accessed

One approach, grouping by recently accessed

Custom Categories

Custom categories reflect the user’s individual interest areas. It allows people to organise their books by context of use (such as work or hobby). This often supports the workflow better than the less personal author, publisher or even genre tags.
E.g. One user’s categories looked something like: Finance, Go (wei qi) instruction books, popular novels and technical reference books. The categories aren’t very uniform, Go is a much more specific category than popular novels, but they work for this individual. So long as these categories are few in number, manually managing them should be a satisfying rather than frustrating experience.

Custom Categories

Creating Custom Categories


When Min’an and I were bouncing some ideas at the beginning, we were puting a fair bit of thought into ways to populate metadata. It was an interesting technical problem with lots of hairy bits which made it interesting to think about. However, after chatting with a few potential users, it became apparent that having easy access to a book’s metadata is more important when you’re considering purchasing a book and not so much when the book is already in your collection.
Having said that, the group that I chatted to were older and tended to have smaller collections. To get a different perspective, I had a quick google online about how people managed their eBook colletions. Stumbled across these guys, wow, they are keeping collections numbering in the thousands. Now that feels like a very different use case the the one I’d been thinking about. If the user is searching for a specific book amongst thousands, complete metadata becomes a whole lot more important.

Mass editing metadata

Quick way to do mass editing of metadata

Searching versus Browsing

This depends on how many items you have in your library and how frequently you need to access them.
For small collections, people prefer to browse rather than search. Chances are, the user knows their modest collection fairly well and would prefer to scan and locate a book by recognition rather than make the effort to recall a title/author and type a keyword.
For very large collections on the otherhand, searching is a much appreciated perk of having an digital collection.
Regardless of library size, users still only regularly access a small subset of their collection at a time. For these recent or favourite items, browsing may still be prefered over searching.

Browsing for fun

Browsing a library for no particular purpose is an enjoyable pastime. People aren’t always trying to search for a specific book. Sometimes they just enjoy thumbing through a collection of inspiration under a subject of interest. It’s not all about efficiency. This is where having complete metadata makes the experience more pleasant.

Quick flipping

This is more to do with reading than organising but there is a frustrating thing with eBooks where you don’t necesarily read from beginning to end. Reference books and textbooks are a pain to use in digital format because quickly getting from one section to another requires so much effort. You either have to bring up a menu to jump to a section or bookmark (which breaks your flow and distracts you from the content) or thumb/click/scroll through the pages until you get to where you want (tedious repeated physical actions).
When I have a physical text book, I can quickly shuffle through the pages until I roughly get to the section I’m interested in, then flip more slowly to hone in on the specific page I want. What I like is that it gets me to places quickly yet it doesn’t break my train of thought.

Quick Flipping

Quick flipping and skipping pages


In Hindsight

  • Trying to do a UI process backwards is tricky. The project started out as a motivator for building an interesting tool from a technical point of view. Trying to then turn that project into something with a real user need felt like a bit of fakery at times… Still with some patchy research and a bit of intuition there was enough to go on make some interesting design choices.
  • Working on the usability and the visual interface aspects at the same time slowed down progress. I refer to usability as designing an interface to support user goals, context and workflow. In contrast, visual design involves looking more at the aesthetic elements. Doing these in tandem required a lot of hat switching which was distracting. Sometimes I’d make a decision based on user workflow but then other times I would feel compelled to put something in because I could see a nice way to style it later. Going forwards, I’m going to make more of a conscious effort to separate the two. For this project I’ll post up my visual interface experiments separately.
  • Lurking around on forums/blogs was surprisingly useful for open ended user research. It’s not particularly efficient and won’t answer specific questions but you can learn a lot while trawling through complaints and rants!
  • Limitations of static wire framing. I found very it difficult to convey a design that involves a bit of movement, like pages flipping as you hover your cursor across the screen, with static images. I would really like to try some more interactive mockups later.




Stop Pondering. Just Start already…

This is the part where I set aside time to hone an awesome skill that I really like to have and then spend all my time researching about the skill instead of practicing it.


Time spent researching and exploring isn’t a bad thing. It’s just that researching and exploring seems to be synonymous with procrastination for me. I spend way too much time pondering about where to start and planning out where to go from there.

So in an effort to just make a start, I’ve been picking a random topic that seems reasonable for a beginner and posting the results of my practice (that’s what tonal studies was about). 



My school of one – In pursuit of long term progress

Self learning is becoming pretty accessible thanks to an ever growing pool of online teaching resources and special interest communities. Curious minds can happily delve into new disciplines without the need for formal instruction.

But just because it’s accessible doesn’t mean it’s easy!

I’m a developer/designer by training but I want to delve further into fine arts and visual communication. I often find myself trawling through you tube tutorials, online courses, blogs and forums for hours on end. Usually this just results in my brain melting into a defeated puddle of goo that wants to do nothing more than vegetate over something trashy.

I could happily chew through a mountain of information but then after a day or so not much of that information seems particularly important anymore. Okay, so I got some good conversation starters out of it and I did feel more up to date and connected with the world for a short time but what if I want a greater sense of long term progress?

At this point, I’d like to poll for suggestions! Do you suffer from similar hang ups or have you figured out a system that works for you?

I can think of more than a few bad habits I’d like to change in my own approach to learning and so have started a list of self prescribed suggestions. *Sheepish laugh*

Learning Pickles – I am exploring these pickles one at a time.



Mousey Momento

Two months ago we adopted a trio of mini fur balls. Jackie, Ginny and Piggy, originally named Chuku, Chupi and Chia (which we had trouble getting our heads around) spent much of their time munching on grains, puffing their bedding and making endearing little noises.

It has been a fun few months, for us humans at least, the mice are probably a little fed up with all our cooing. Sadly, during this time Jackie developed a very aggressive tumour and had to be put down this morning. 

As a momento, I compiled a video of all the mousey things the three of them got up to. 

Mousey Momentos


Poison Post!

Last week, some good friends of mine relocated half way across the world. Before they left we made something of a pledge. We talked of finally starting that blog we had each always intended to create.

The mature line of our conversation sounded something like, “If you do one, I’ll do one.” So here’s the deal, one of us sets the ball rolling with a single post and the other has to respond with their own post within a week. Otherwise they die a horrid death by poison post (insert more meaningful penalty here). The posts themselves don’t necessarily have to be related, the point is just to keep the activity going.

This is a chance to end the procrastination, to tell perfectionism to just go sit quietly in a corner somewhere and stop bothering us for a bit. If nothing else, it’s not a bad way to keep in touch asynchronously.

So Min’an, it’s your turn. Link your post to a comment here so we can follow the chain. I’ll even suggest some random topics in case the cold has frozen your brain: 

  • Self learning
  • House Husbands
  • Keeping warm in Sweden