Unexploredhorizons.net (Revision 3.0)

10 years ago | ubersoft (Member)

Two months ago I posted a request for a site review, and ever since then I've been trying to figure out ways to make my site look less, um... "stark." I was a huge fan of boxes and lines, and it came off as kind of cluttered and distracting.

To that end, I've been working on ways to clean up the site and make it more usable. This is an incremental process, but this weekend I introduced the next "version" of my site at https://www.unexploredhorizons.net .

There are a few ways I've attempted to soften the overall look of the site, mostly by using the border-radius css element to add "rounded corners" to the design (which won't show up on any version of Internet Explorer below version 9, so IE users are still stuck with a blocky design). But what I've mostly focused on is the idea that I want to be able to display multiple stories on my site simultaneously.

Obviously this can be a challenge as far as the front page is concerned. It was already getting crowded just with the one story/podcast, and I was trying to ease up on clutter... so what I did was rework my drupal theme to include a features area that contained a tabbed block that could hold multiple chunks of content. So now I can have a tab for each story which will display the latest chapter, and I can put in navigation items to direct readers to related content. With Pay Me, Bug! I show the latest chapter and the latest podcast -- for the other two placeholders I show the prologue of two stories along with an info block related to the novel.

One of the advantages of the tabbed block is that I don't need to cram as much information in the sidebars. This is a good thing, though I haven't quite optimized that part of it yet.

The second thing I've done -- and this is still in very rudimentary form, I'm afraid, because I'm having technical issues with the module I'm using in Drupal to get this done -- is to create a "splash page" for the novel that contains links to all related information. This can be seen for Pay Me, Bug! here:


It's set up as a grid:

- top left is a graphic related to the novel (think of it as a placeholder for a novel jacket cover), along with a link to a little info on the novel itself

- top right is the most recent podcast (would be empty for novels without an associated podcast)

- center is the latest chapter, with an excerpt from that chapter on display

- bottom left contains "worldbuilding" entries (i.e., extra, world-related information that is relevant to but not directly included in the novel, or that goes into more detail of something mentioned in the novel)

- bottom right is the complete table of contents for the novel

Currently it isn't styled very well because Drupal is having an issue displaying css information that was displaying perfectly well last night. Even if it were, though, it was very rudimentary and needed work... (and the top left graphic is... terrible. I'm not an artist by any stretch of the imagination, which works heavily against me here). But you get the general idea -- it's a splash page where someone can see every piece of information related to a novel.

I think this will give me a good organizational model going forward -- the next step is to make the site integrate better visually, hopefully to make a reader more comfortable nosing around.

Anyway, if any of you have any comments or suggestions on this implementation I'd love to hear them!

Curveball (Updating)
A Rake by Starlight (Updating)

Read responses...


  1. Chris Poirier (Moderator)

    Posted 10 years ago

    Once you get to the text, it's better, but the top of the page is extremely busy, to the point of making me want to flee the site immediately. And the home page has even more of that problem. For my tastes, you still need to declutter.


  2. ubersoft (Member)

    Posted 10 years ago

    OK, what specific elements would you remove? If I restricted myself to two columns (wide left for news articles, narrow right for widgets like search, paypal) below the tabbed list, would that be better?

    Or when you say "top of the page" do you mean the tabbed feature block itself? I have on my list to remove a number of layers of borders and to simplify the display of data in there in order minimize the amount of "looking inside" someone has to do.

    Or is "top of the page" even higher up, where the logo/banner ads are? I'd thought that by putting the ad directly to the right of the logo it would save space and remove some of the gaping chasm of nothing that the old site design had, but that could be working against me.

    This is an iterative process. I'll get there eventually.

    Curveball (Updating)
    A Rake by Starlight (Updating)
  3. Chris Poirier (Moderator)

    Posted 10 years ago

    Well, in terms of a fiction site, you need the text, and you need a way for the reader to get to it quickly and easily. And that's about it.

    When I said the top of the page, I meant everything above what your reader is there for. On your table of contents page, there is so much unnecessary stuff above the chapter links that they don't even appear in the first screenful. On your reading page, you have 3 (three!) levels of branding and 3 (three!) separate menus before the text even starts. And, for me at least, the first line of text is the *last* thing my eye lands on—even your sidebars are given more visual weight and space. Like I said, you need to declutter: yes remove borders, but also remove *stuff*.


  4. Robert Rodgers (Member)

    Posted 10 years ago

    One suggestion you might consider--and I realize Drupal is probably ill-suited toward this--but I'd throw away pretty much everything not central to navigating the stor(y/ies) on the pages where the stor(y/ies) aren't featured, and consolidate all the navigation options (including podcasts) into a single bar above and below the main story text. PREVIOUS | TABLE OF CONTENTS | PODCAST | NEXT <-- with 'podcast' linking to whatever podcast links up with this particular chapter, and table of contents leading to a page that neatly divides your story up into chapters for readers to navigate.

    It's been my experience that every click someone has to make to reach your content is bad; ideally, the main link to your site should lead *immediately* to the content the readers want, with all the other superficial stuff (paypal, podcasts, navigation, chapters) stored in a neat little side-bar or one click away.

  5. Jim Zoetewey (Moderator)

    Posted 10 years ago

    With regards to the comments about making the site feel less overwhelming to your potential readers, here's where I'd start:

    Set a maximum width for your page.

    Currently, your site adjusts to the width of the browser viewing it. In once sense this is good in that flexibility is a virtue (in my mind at least), but in another it helps things feel cluttered in that if you've got a really wide screen set at a high resolution, it gets hard to follow a line of text. Plus,the additional column (when it's also wide) makes for another level of distraction.

    It might also have the side effect of forcing you to decide which of the many elements on the page are the most important, and which can be somewhere else.

    I couldn't help but notice your twitter feed in which you were talking about making changes to your site. You wondered (forgive the paraphrase) if someone who couldn't handle a your website was really the sort of reader you wanted.

    My thoughts on that are that there are many people who aren't particularly web-savvy who are fairly sophisticated in terms of the writing they'll understand/enjoy. I'd say that you don't want to remove those people from your potential readers.

    Mind you, at the moment, I'm the last person who should complain about a website that feels cluttered. Mine's currently a mess that way, but I'm planning to change that.

  6. ubersoft (Member)

    Posted 10 years ago

    The twitter thing was a tongue-in-cheek comment based on my webcomic audience. :)

    Curveball (Updating)
    A Rake by Starlight (Updating)
  7. ubersoft (Member)

    Posted 10 years ago

    Gah, sorry about this, I got into navel-gazing-infodump-rambling mode so I apologize for the wall of text.

    I'm pretty sure I'm going to have to take a hit in specific usability for any single story in order to achieve some other general design goals. Based on the feedback I get here I've been able to inch closer and closer to simplicity, but I don't think I'll ever get there, I'll just get less where I was. It's good to have y'all pointing out where the site unravels in the terms of what works with web fiction, but it also underscores that a number of things that appear to be considered incidental to webfiction content aren't things I consider incidental at all.

    For example, Robert identified the podcast widget as being secondary content, and I'm not convinced that's true. Based on some initial (and so far rudimentary) observations, there are people who are visiting the site and downloading the podcast without reading the text. There is, essentially, a "podcast audience" that is separate from the "web fiction audience," and I'm currently developing both. I don't consider the potential for reaching an audience who wouldn't normally bother incidental at all (though it looks like in order to effectively reach the audience I'll have to take voice lessons).

    The other thing I'm trying to explore, and it's hit-or-miss because I'm a fairly pedestrian designer, is that the web gives you options for "knitting together stories" that a printed book doesn't. For example: what would happen if J.R.R. Tolkien had originally published the Lord of the Rings on the web? It would be possible to update the entire tapestry of Middle Earth while he was telling the story without having to stick it in the end of the book as four or five inches of appendices. My intent with Pay Me, Bug! is to add more depth to the backstory by publishing a series of worldbuilding articles ("An Informal Guide to Known Space") that isn't required knowledge for understanding what's happening in the book, but is extra stuff that fleshes out the setting for people who like that stuff. One of the other stubs I've just put up ("Northlander") takes place in another created universe I want to do the same sort of thing with. The web makes it far easier to do that sort of thing, especially when the story is being published in serial fashion, but there needs to be a way to make it all accessible, which I'm having trouble with.

    But the downside of contextualizing all that information is that it requires an interface that is different from an interface that focuses on the story alone.

    And then the other thing I'm trying to figure out is how to set up the site so I can have multiple stories updating in roughly the same time -- currently I'm updating Pay Me, Bug! once a week but I've set up stubs for an urban fantasy and a more tradition fantasy that I intend to update semi-regularly at the same time, mostly because I'm curious to see how that'll work out. But the downside to that is a further dilution of the interface. I'm trying to balance that by creating splash pages for each story, and will eventually be creating subdomains for them (i.e., paymebug.unexploredhorizons.net, pointsbetween.unexploredhorizons.net, northlander.unexploredhorizons.net, etc., none of which are active yet) so that the splash pages can be used as entry pages once that gets worked out.

    I've seen a number of sites that host multiple stories in a number of ways. Alexander's Dream Fantastic looks like it's set up to take the "blogroll" approach, so that when a story updates it's latest update jumps to the top of the page. Other sites have dedicated areas for the story and go to great lengths to "hide" everything else so that if you get a direct link it looks like the site was created for that story, and that story alone.

    I want a middle road. I'm not sure how usable a middle road is, but in the best-case scenario readers can access the story and focus on the story, but there are things on the periphery that indicate there are other stories, and you can go there as well. And since Unexploredhorizons.net is part of EvisceratiNet, I include branding at the top to let readers go to my other sites...

    ... and while that may legitimately seem like clutter, because that branding is consistent on all three sites I do get traffic from the other sites to this one. And this site has the lowest "bounce rate" (statistically) of all three.

    Again, I work at a deficit here because my design skills are not up to the task of hitting all these points at a first pass, but my basic feeling is that in order for all this to work my site will not be able to meet the level of simplicity that has been identified as a working standard for web fiction. At the same time, though, I need to keep trying to make the site simpler in order to make it easy for people to find things.

    I do think I'll eventually wind up creating a metric that represents exactly how much Chris hates the design. It will eternally approach but never actually reach zero. ;-D

    Curveball (Updating)
    A Rake by Starlight (Updating)
  8. Jim Zoetewey (Moderator)

    Posted 10 years ago

    Just for the record, it might be worth looking at things other than the standard way things are done.

    Amber Simmons does a great job of really using the web with her writing. Take a look at http://www.loveandwartx.com. She does a great job of presenting more than just the story.

  9. ubersoft (Member)

    Posted 10 years ago

    Oooo... that site extremely cool. Thanks for the link! Are there any other sites doing similar things you can recommend?

    Curveball (Updating)
    A Rake by Starlight (Updating)
  10. Jim Zoetewey (Moderator)

    Posted 10 years ago

    I wish there were.

    In an ideal world, I'd be doing that myself. By profession I'm a web developer (on the technical rather than design end), but I tend to use templates created by others rather than doing it myself. Basically I don't want to use my writing time to do what I do during the rest of my week.

    That being said, I think we need to be re-imagining what a website for a story needs to be. I think it can be a great deal more than a wall of text.

    Oddly enough, some people listed in Epiguide (http://www.epiguide.com/forums/) make creative use of the web too. Alas, I don't have any specific examples. That's just an impression I've gotten.

  11. ubersoft (Member)

    Posted 10 years ago

    One of the problems in doing stuff like that is new ways of displaying things invariably break usability rules... until they work. And generally a lot of stuff doesn't work before it does. I went through that a lot with ubersoft.net and I'm reasonably satisfied with the way it works now with one exception that sticks in my craw. I guess I'm using unexploredhorizons.net as a beta platform, too. :)

    Curveball (Updating)
    A Rake by Starlight (Updating)
  12. Tahjir (Member)

    Posted 10 years ago

    Personally I don't mind the clutter that much, but I have to agree about the way the text spreads out on a wide-screen monitor. It doesn't seem that bad at first but after a few paragraphs my eyes start going all wonky. I like your colour scheme though, it's nice not having tons of colour distracting you when you're trying to read.

    Apocalyptic Urban Fantasy
  13. ubersoft (Member)

    Posted 10 years ago

    I think I was able to find a workable compromise for the text. My site is still fluid-width, but the text of a story, wherever it appears, is fixed at 600px. So if you were to go into Chapter 14 (for example) and maximize your browser window you'd see that the text width doesn't change.

    Also, I've cleaned up the Pay Me, Bug! splash page quite a bit: https://www.unexploredhorizons.net/novel/pay-me-bug

    I probably need to reduce the size of the graphic but overall I think it's easier to see everything, and should work perfectly well as a template for other stories.

    Curveball (Updating)
    A Rake by Starlight (Updating)
  14. Alexander.Hollins (Member)

    Posted 10 years ago

    well, dreamfantastic itself just presents all the stories, down the road, its going to be a bookshelf system and story finding system, more than anything. Then each individual story gets its own blog.


You must log in to post.