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.

 

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.

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.

Metadata

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 http://www.heroesandheartbreakers.com/blogs/2012/04/kindle-magic-or-how-to-organize-your-kindle-library, 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.

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.

 

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.

Tools

• Omnigraffle for wireframes. Template from https://www.graffletopia.com/stencils/459. Love the sketchy look of the template.