Design – Novelr

Category Archives: Design

Leaving The Book Behind

A trend that took me by surprise at Books in Browsers was how indebted to the book most browser-based eReaders are. Prime example: all the ebook readers that were demoed at the conference had artifacts like pages, page flipping, and book covers. The books that were displayed within these readers were literally embedded in the browser – each reader was this little self-contained bit of javascript, CSS and HTML5, and that was to be inserted into a webpage or a rendering engine the same way one would embed a Youtube video, or a Slideshare presentation.

I’m not convinced that this is necessary, or even advisable. I will admit, however, that I came to BiB with the notion that books would literally be in the browser – that the form of the book is the webpage, and the controls for reading the book were the browser’s controls; not some arbitrary chrome that you had to include for it to work.

Is the browser a good reader?

I think browsers as a reading interface work just fine, and that people today are used to reading things in a web browser. Much of surfing is text, after all. And I think that you can and should leverage this behaviour when designing for a browser-based book reading experience.

Think about it: when you have embeddable content like the Monocle reader, you’re constrained by the fact that you must read in a container within a container. It isn’t a website, which means that there’s a layer of abstraction that the reader must get used to.

Why not have that content live as a webpage? The user doesn’t have to relearn anything. The controls are intuitive: one link forward for the next chapter, and one link backwards for the chapter before. The user behaviour for using browsers, for clicking links to advance (and scrolling to read) have existed for more than a decade now. There’s no need to reference the model of the book when reading behaviour already exists for the webpage.

The exception to this, of course, is the mobile experience. The majority of mobile phones have terrible web interfaces. And so it may make sense to serve something like the Monocle reader when you’re in a mobile device like the iPad, or the iPhone.

I’m biased, of course – web fiction exists primarily in web page form, and experience has shown us that this is highly readable in the context of a computer browser. But a strong mobile reading experience for the form may still be lacking. And that’s where these new readers come in handy.

For the rest – I’d argue that webpages work just fine.

By Eli James | Comments (8)

Tuesday, 3 November, 2009

A Format For Online Fiction, Part 2

It’s been some time since I last wrote on a format for online fiction. In that time, however, several members of the web fiction community have already started work on their respective visions for this format. Some of them have chosen to develop an alternative system, coded from scratch; others have started work from the outside-in, choosing instead to build on a solid WordPress theme system. Diverse as these approaches are, all of the work being done at the moment are possible routes to a standard web fiction format, and for that I am thankful. This post is intended to be a follow-up to my original article on the format. I intend to discuss how such a format may look like, and then possibly convince you to adopt some of these elements into your own work today.

A Recap

Novelr’s been around for some time now, and in that time we’ve learnt quite a few things together. Let’s start off with a couple of things that we do know about presenting online fiction. Peel off that scalp and think back: what have we learnt together, exactly?

One of the first things we’ve got to remember is that reading online is crucially divided into two distinct stages. These stages exist in the offline, paper-book world as well, but they’re not as critical for the writer as they are on the Internet. The first stage is called the browsing stage. During this stage a potential reader skims content to determine if the work is worth reading or no. It isn’t just the opening text that the reader takes into account – in the browsing stage, it is everything from the subject matter to the included pictures to the size of the font to the weight of the book in the hands that goes into a reader’s evaluation. If the reader thinks the text is promising, he or she then moves into the second stage, the reading stage. You and I should know this – if you are a book lover, like I am, then you will recognize this stage as the one where you forget about the sun and the ocean and so get sunburnt with a shadow-image of a book burnt into your chest. The reading stage calls for complete attention on the text. Everything else – links, ads, sidebar text – are superfluous to the reading experience, and they fall to the periphery of a reader’s vision.

The second thing on presenting online fiction that we must remember is what I call the Picture Book Effect: credibility and perception of online content is shaped by the design/format in which that content is presented. In simpler terms: your readers judge your work by the visual cues you have on your site. There are deliberate differences between the New York Times and a celebrity gossip blog. Both appeal to different demographics, and so both have different visual cues. One is designed to be credible, the other is designed to be kinky. One is black and white, the other shocking pink. How readers view your site depends as much on the design of said site as it does on the text you have provided them with.

The third thing that we must recall are the basic principles of readable design. Large fonts, good contrast, clear colours. An intuitive site structure. What exactly these elements are and how you apply them is beyond the scope of this article – go read some of the previous Novelr posts on the topic, or pay a visit to the pros.

So what have we learnt? We have learnt that an ideal fiction format is designed around a browsing stage and a reading stage. We have learnt that the site must have a coherent visual identity, one that should – ideally, at least – complement the fiction. And thirdly, lastly, we have learnt that the site must be readable.

The Online Fiction Format

So what should an online fiction format look like? What elements should we include with it? In this we are faced with a complex task, and so it would be helpful to begin first by talking about what we wouldn’t need to include with the online fiction format.

The first thing we have no need to include is forcefully-readable text. This is simply pragmatic: it makes no sense to limit authors to one font over another, or to ban them from using font sizes below a certain cutoff-point. Neither can we stop writers from using electric pink or neon green in their prose. Most of us already know how to display our fiction in a readable manner. The ones who don’t will quickly learn from the lack of happy readers.

We don’t have to create distinct visual identities for each work. We also don’t have to adjust for all possible forms of presentation. Some writers will want innovative, highly experimental forms in which to present their fiction; this format does not serve them. It simple cannot: no format will attract or hold the interest of such mavericks for very long. This particular format will be for the majority of authors out there: the ones who want to write and who do not wish to worry too much about the underlying mechanics of code and presentation.

And so what should this format be like? At its most basic level, it should have two things:

It should be built to accommodate the two states: browsing and reading
It should be easy to customize, both visually and practically

We shall deal with these two elements in order.

By Eli James | Also posted in Blog Platforms, Publishing, Writing Web Fiction | Comments (4)

Thursday, 20 August, 2009

A Format For Online Fiction

When you go to a bookstore to buy a book you expect a number of things that the publisher – and the author – readily provide you with. You expect quality content – a good story or a good idea argued well, perhaps – but you also expect a number of things so rudimentary nobody actually thinks about them anymore. Consider the following:

you expect a cover
you expect soft pages you can flip
you expect binding of some sort
you expect book-smell (and this is a personal favourite of mine – I really really like the smell of new books) ”“
in short, you expect a standardised reading experience.

Compare this experience with that of online fiction. Granted, one of the main draws of the medium right now is that it is new, experimental, and that it doesn’t come with a set of preconceptions or constraints that may bind you if you so choose to write a dead-tree novel. But if you think about similar mediums that have matured, over the past few years, you’d realize that there exists a very particular growth pattern to which all these mediums follow before they became mainstream, one that we haven’t gotten to yet.

Clay Shirky best summed it up in his June 2009 TED talk:

What matters here isn’t technical capital. It’s social capital. These tools don’t get socially interesting until they get technologically boring. It isn’t when the shiny new tools show up that their uses start permeating society. It’s when everybody is able to take them for granted.

And this is the truth. Nobody really paid attention to blogging until WordPress and Blogger came along and made the technology – or, more importantly, the concept – boring. But it’s interesting to note that while blogging is staple to us now, in 1997 it was chaotic, and less of a movement than a collection of fringe geeks. Early blogs were literally ‘web-logs’ – records of links found on a person’s travels throughout the world wide web (and, yes, I am aware of how old-fashioned that sentence just sounded) and there really was no defined idea of what – and how – a blog should look like.

This has, of course, changed, in so far that even fringe communities like ours now write our fiction in the blog format. We know what blogs look like. We know how they work, and we know how to read them. Somewhere in between 1997 and 2001 the blog morphed from a collection of links to a reverse-chronological order of posts, with comments, trackbacks, RSS feeds and what have you … and this change enabled the mass adoption and acceptance of blogs and blogging. The blog became standardized. When you go to a blog now, you expect a number of things that all blogs provide you with – things that are by now so rudimentary that nobody thinks about them anymore. And in this way blogs resemble books: they deliver content in exactly the way you expect them to.

The same cannot be said for the blook. Or blog fiction. Think about it: when we publish fiction on WordPress/Blogger/Drupal, we are taking a system that was designed for something else entirely, and adapting that for the delivery of fiction. There is a difference between text and prose, and I believe that WordPress, and Blogger, and Drupal fail to make this distinction. How the author displays the work is up to him or her. Sometimes this works. Most of the time it doesn’t.

And you don’t have to look very far for evidence of this! Take two random works, any of the 300+ you can find on Web Fiction Guide, and compare their presentation styles. Some will have their chapter listings on the right, some will have it in the footer. Some display a splash page, some just hit you with a reverse-chronological order of posts; still others give you a link to the first episode in the sidebar. Whenever you read web fiction you are literally taking a dive into the dark – you don’t know what you’ll find, and you don’t know the context you’ll find it presented in. Imagine going to a bookstore to see books of all possible formats – some read right to left, some packaged in scrolls, others propped up and sold in ring files. This is terrible. It is already a huge challenge to find good content within the confines of the book as we know it. Likewise for online fiction – the diversity of presentation styles is is a huge mental block, particularly for the reader, and it’s one that I think we should do away with.

So Who Should Do It?

Let’s go back to the story of the blog. I told you that somewhere along the way – around 1997 to 2001 – the blog was transformed from a ‘web-log’ to the written format we accept and know today. Now I believe that this change did not happen via collective community movement. Nobody decided anything together. And so I’m not going to suggest some cliched ‘let’s decide now, together, what we’re going to change about this’ as a solution to this problem. If we look at blogging, we see that the change happened not because of the old-timers, it happened in spite of them. A bunch of newcomers – programmers – came together and wrote b2, cafelog, and then later on Movable Type and WordPress. This changed the nature of the blog. WordPress and Movable Type were easy-to-install platforms that lowered the bar to entry for many. More importantly, however, it put blogging on the map. The more bloggers started using WordPress/Movable Type (and it didn’t matter which, for the format was essentially the same) the more people read them; the more people read them, the more they started clicking these interesting little ‘powered by blogging engine‘ links; the more they knew blogging, the more they were inclined to blog; the more bloggers there were using that particular blogging format … and on the cycle went.

I believe that the easiest way to have a standardized online fiction format is for somebody to actually sit down and develop the system himself. And yes, that does sound rather difficult (!) but note that blogs are actually rather simple applications to write – ask any programmer if this is so and he’s likely to go d’oh at you. So while WordPress and Drupal are too bloated for our purposes, the former – being open source – is actually a good starting point on which to built a system on. The crux of the change is this: this app – whatever it is, or how it looks like (and I’ve got quite a few ideas on how it should look like), it should be good enough, and simple enough, and intuitive enough to meet all possible online fiction needs. And if it is all these things, mass adoption should follow, sooner or later, allowing writers to do what they do best in an environment that currently throws so many obstacles in the good writer’s way.

I’d like to close now, but in case this sounds like a lot of charity work, here’s something to think about: there is now a large publishing industry shift across the digital divide, particularly where authors and novels are concerned. Consider how beneficial – and how desirable – designing a system for writers to tell their stories would be … not only for the community, but for whoever so decides to be a developer of just such an app. WordPress, is, after all, making more than enough money to survive.

By Eli James | Also posted in Writing Web Fiction | Comments (75)

Saturday, 21 February, 2009

How To Design For Readers

Light_5 Mandy Brown (she of A Working Library) has written this fantastic piece in A List Apart Issue 278 that explains how people read on the Internet, and how designers should cater for these reading patterns. In it, she makes a very interesting distinction between browsing and reading, one that I think explains many of the design decisions I’d observed or made in the past. Some of these design decisions can be seen here on Novelr, but I’ll come back to that in a bit.

The underlying shtick in Mandy’s article is how readers evaluate before reading. She calls the first stage the browsing stage, where a reader looks for context-sensitive clues about the book/article/post at hand, to determine if it’s worth committing time and energy to. If it is, and the clues are favourable ones, then the reader moves on to the second stage – reading. The designer’s job is then to ensure the reader has enough contextual clues at the top of the page; remove all distractions at the middle, and provide further links at the end when the reader has come out of the (ooh I like this word!) reading trance and is looking for further content to consume.

Mandy also provides some suggestions on how to ‘lure’ the reader in – some of them things that I hadn’t considered within a browsing/reading dichotomy. She suggests pictures to establish context, pullquotes, or typographic tricks: the whole paragraph set to a larger font, for instance. I personally lean towards visual lures – many of my posts in Novelr used to have picture leaders, although the new redesign (the current one) has now enough visual power to draw a reader into the text, and I’ve largely dispensed with that.

There are also lures that she haven’t discussed; ones that I’d like to point out here: site identity, for instance, and strong writing. Site identity (and how to create it; a.k.a the Picture Book Effect) I’ve talked about before, and I think remains the major subconscious element in the browsing stage. People who visit well-designed websites know that the owner has taken care to present his or her work, and with such care comes the assumption that the content on such a site must be good, so buckle up and prime eyeballs for reading quick! As for the second lure: the benefit of a strong first line/paragraph should be familiar to all writers who’re reading this, so I guess I’ll spare you the monotony of listening to me drone on about something you already know well.

As an aside: I found myself identifying with these design decisions mainly because I’d included almost all of them in Novelr’s redesign – without consciously thinking about them (imagine my surprise!). Novelr’s sidebar is purposely set to grey, with text smaller than the site norm (and in sans-serif, for legibility), to ensure that reader attention remains on post content. The post content is itself presented in large Georgia. And the sidebar is purposely kept short, so that for a majority of the article length the reader is left alone with just prose. There are problems with this design, I’ll admit, and I now wonder how much more to tweak … first paragraph in caps, anyone?

By Eli James | Also posted in Writing Web Fiction | Comments (6)

Thursday, 22 May, 2008

Blooking Has A Community

Happy Community Not so long ago I wrote Blooking Needs A Community, which served as a clarion call to the blooking world to start getting our act together. Now, nearly one year down the road, I’m happy to say that we have.

I only realized this about two weeks ago, after escaping from total boredom studying to start browsing through the list of blooks I had earmarked as ‘must read’. I caught up with The Legion of Nothing and The Mutants, and then I returned to Pages Unbound for an inkling on how the blooking world was getting along.

You have to understand where I was coming from. I had spent the past 6 months or so scribbling articles on paper and then jumping online for 30 minute intervals to publish them. I hadn’t had much time to do much else, much to my chagrin, and this little trip around the blog fiction sphere was eye opening.

It was great. The commenting sections of both blooks had more or less the same people hanging around them, as did their profile pages on Pages Unbound. I saw an even better indicator of a community in PU: a living, breathing forum. It isn’t very user friendly (I have to try to get Lexy to change the software) but it is a start.

Where To From Here?

This spirit of commenting on the various blogs of the blooking world bodes well for us. It makes it easier for writers to learn from each other, plus it also gives readers ample opportunity to site hop. I’ve no doubt that this (along with Pages Unbound) will keep our community alive and kicking for a long time to come.

So where do we go from here? A community gives us several advantages and allows us to do a few things that we could not do before. Exciting stuff, isn’t it? Here’s a look at some areas I feel we still have much to do:

1. Presentation

I’ll be talking a lot about design soon, about how and why it is important on the Internet, particularly if we’re writing and we want to be read. Yes, I have mentioned this before – readibility and fonts and the like, but there are a few ideas I’ve been working on that I’d like to share. Chief amongst this is the concept of a visual identity and how it makes writing that much stronger.

2. Reaching Out

I did a post not too long ago about how important it is to reach beyond our target audience – to convert non blook readers, if you will. I realized I may sound a little like an evangelist (oh hear The Lord now, ye flock of unfaithful sheep) but it’s something that must be done if blooking’s going to advance. Advertising is one option we have, but there are many more that we can explore.

By Eli James | Also posted in Writing Web Fiction | Comments (24)

Friday, 26 October, 2007

Design: Improving Readability Without Lifting A Pencil (Part 2)

eye This post is part 2 of a two part series on improving blook readability.

In Part 1 we’ve taken a look at some designs that focus reader attention on the writing of a site, as opposed to designs distracting from it. Today we’re going to go through the common points these designs have: something that anyone with a little bit of time (free from writing, that is) can figure out on their own.

When we look at good, content-focused sites we notice that a lot is done to make it easier for the reader to read. It thus goes without saying that the fonts in which content is written in play a big role in determining site readability. Our hope, of course, is that when a site is easy to read more readers will give the writing a fighting chance – to prevent them from clicking the back button or – worse – flying off to some distant corner of the web, never to return.

Typography – the messy business of fonts

typeography page in a Mac If you don’t already know, typography on the web is an embarrassment. There are only about 6 fonts in use, and at least one of them should be buried at the bottom of the ocean. These fonts are Georgia, Verdana, Arial Times New Roman, Trebuchet and Comic Sans.

Let’s go over them quickly:

Novelr uses Georgia. I like Georgia. It is the font of choice for many design blogs, and it still holds a certain visual appeal for some people (eg: me). It reads wonderfully in larger sizes, though legibility takes a beating when it is scaled down to smaller ones.
Verdana was created for on-screen reading, and it does that job very well. It is a big font by nature but remains clear even when brought down to very small sizes. It is the font most used by blogs.
Arial is like that old Ford your grandfather used to drive around in. It isn’t glamorous but it gets the job done. Arial is designed for on-screen reading, and is used almost everywhere on the web – Wikipedia, for instance, and any Google search results page. It is a very reliable, readable font, but it slightly uninspired.
Times New Roman was overused on the Internet way back 1990s. It can still be used, but only after some major CSS tweaking, and even then as post headers. Otherwise stay far, far away from it.
Trebuchet is described by Microsoft as ‘good for web design’, and I’m inclined to agree. It may not be as widely used, and it might not turn up in some non-Windows computers, but it is a curvier alternative to Verdana or Arial. In Windows it is the default font for title bars.
Comics Sans should be burned in hell. Do not touch.

By Eli James | Also posted in Writing Web Fiction | Comments (8)

Thursday, 25 October, 2007

Design: Improving Readability Without Lifting A Pencil (Part 1)

eyes This post is part 1 of a two part series on improving blook readability.

Have you ever tried reading a Project Gutenberg novel? Yes? No? They deliver classics (well written and of superior quality, I must add) to you in a variety of formats. Amongst those is the ubiquitous HTML file: the webpage. Let me describe it to you: the story is one page long. It is unstyled, unpaged, and the font is Times New Roman.

I can never get past the fourth paragraph.

Most of us stop in the middle of our writing to see how our words read (You don’t?! Then what are you doing here? This blog is for writers!). But have you ever stopped to consider how your words look? Typography, whitespace and colour are terms alien to our worn fingers, and rightly so: designers are supposed to be the ones grappling with these elements, aren’t they? Why the hell should us writers think about the way our words look?

There is a simple answer to this: because we have to. As bloggers/blookers we operate little publications of our own, and we’re in charge of every facet of them: how our words read as well as how they look. I’ve talked about how 1st impressions matter on the web, and how this is of particular relevance to blog fiction writers: we have content that is not as accessible to the average online reader, because we are telling a story.

With that out of the way let’s take a look at designs that focus attention on the writing, as well as a few others that wow you but fail to make you read, and one that is just plain impossible.

The New York Times Online

New_York_Times_homepage
Always a good example to start off with, The NYT website (powered by WordPress, no less) has done a great job with its redesign. Stories are divided into bite sized pieces on multiple pages, pictures – when used – boost the impact of the text, and the fonts used are a beautiful, big Georgia. Keep this in mind: typography (fonts) play a big role in determining the accessibility of online writing.

useit.com

You must be wondering why I’ve included this ~~ugly~~ ~~monstrosity~~ website to our list of examples. Jakob Nielson is a renowned authority on design and web usability, and his minimalist website reflects his design principles. Think of it like this: if NYT is a pleasing cocktail, useit.com is concentrated fruit syrup. The lack of links and the simple layout actually forces you to read what Nielson wants: his content. No distracting blog roll, and the only non-article links are the navigation at the top and the bottom of the page. It works. Another thing you’d notice about useit is its big Verdana font. Big means easy to read. Verdana looks good. Again, it works.

By Eli James | Also posted in Writing Web Fiction | Comments (11)