leihu home

Anatomy of a Forum (part one)

imagined by: James Mathias

The modern message board has a certain look and feel, it’s a specific look, it’s been in use a long time, it’s comfortable and it’s friendly, nay familiar. The modern message board GUI is for lack of a better phrase; inundated to a point of almost no return. Software developers are afraid to stray too far for fear of user rebellion, message board administrators feel the same, afraid their user group will turn their collective backs on the community or software due to sweeping changes and tweaks. Unfortunately, this makes little sense and if it weren’t for a very vocal minority it would be a ridiculous notion of stagnancy and inability to develop something better, making daily and first time use easier and more intuitive. In this series, I intend to propose a better way; I’ll focus on one standard forum view per article, and try to back up my ideas, and ideals with solid arguments, in some cases I may fail miserably. Won’t you join me?

I’ve worked with message board software, as a hobby and professionally for five years, I’ve designed and launched over two-hundred and fifty message board skins; custom, experimental and pre-made. I’ve had the unique opportunity to experience forum software from several points of view and feel that I’ve amassed a hefty bag full of expertise in the design and GUI architecture of message board software. What I want to discuss in this premiere article is the standard forum index and how it can be improved on several levels.

Let’s start at the top, the brand, the header. What purpose does the logo and graphic brand serve? Other than advertisement, and an inaccessible link back to the forum index, I see no use or purpose for the branded header. Let’s strip it out. Now what should we put at the top then, I think, the most logical and user friendly choice is the welcome/login/register message.

Here’s my thought; Most people read from left to right, the first thing you do when you go to a forum is look at the top left corner and scan across–unless of course you’re a regular user and have been there so many times you have the forum software memorized–but we’re attempting to increase usability and help first time users to be less intimidated and more interested in returning.

In the top left corner, “Welcome, James Mathias ( log-out )” below that quick links to important stuff; “My Preferences” (user control panel) and “View New Posts” (only shows if there are new posts).

What about the top right, let’s not waste any usable space; I put a search field for quick and dirty keyword searches, below that I placed links for “Admin CP” (only shows for administrators), “Forum Index” (a way back home) and “Help/F.A.Q.” (link to built-in software F.A.Q.).

That’s it, the whole header. We’ve eliminated the software brand as unnecessary, we’ve moved the welcome and personal links up and to the left, and placed an accessible and quick search option in the top right. Not only are we off to a good start to making the forum, slimmer and more friendly but also more intuitive and easier to use, and we’ve barely begun. Already we have saved several hundred pixels of vertical screen space, without loss or compromise to functionality or features.

I’ve created a design mockup of what the forum index should look like and I will be linking to sectional screenshots throughout this article in order to better illustrate what I am talking about, the first screenshot is of the forum index top.

What’s next? Well In my opinion the next thing I want to see after the welcome message is the content. On the forum index what’s the content? The categories and forums, or in some cases a topic list depending on the feature set of the software. I personally like categories, and forums, they are not always needed, but they are a solid feature with very few drawbacks.

I assumed the software has categories and forums available—as most modern forum software does—when deciding how to display the categories and forums and what other information to display, some people like to have a ton of information available, and others prefer less. Our goal is to make the forum index better, more useful and less cluttered; we’re going to remove a great deal of what a standard forum might display on the index, in favor of creating a more useful display and something that will be less intimidating to the daily and first time user.

Since the forum index is just a listing of the available categories and forums within those categories, we’re going to concentrate on that information, without cluttering the display with useless items that can be displayed more logically in other areas.

We have to decide what it is we’re displaying. Many argue that a forum index is tabular data, well in some cases I can understand that, but a forum index listing is not really tabular data, in fact aside from listing the number of topics and replies, it really doesn’t fit the definition of tabular data at all. On the other hand it’s not really a list of items in the strictest since either, nor is it a definition list, semantically it’s a division of data, we have in most common cases, a forum name (header), a forum description (paragraph or sentence), a moderator (sentence), the number of topics and replies (numerical data), who and where the last post was made (paragraph), and varying other items of raw data, most of which is useless, and redundant.

As you can see for each forum we have a header, two to three paragraphs and two numbers. This is not a list and it’s not a table. I believe a category name should be displayed as a header (h2), and then each forum should be displayed as a division with a secondary header (h3) and paragraphs as necessary. In this situation marking up as a table or list or definition list is incorrect and won’t look the way it should when styles are off.

Which information should we strip out? I like the idea of getting rid of the number of replies, it’s useless and only confuses. We keep the number of topics because it is nice to know how many topics a forum has inside. As for the rest we’ll strip everything aside from, Forum name and description, last post made and any sub forum links.

What about the forum marker graphic? Huh Jim? I think they’re unnecessary and they add–in some cases–a great deal of bulk to the forum index. I would make the entire forum division change color to indicate new posts; in addition I would add a small “NEW!” in text, styled with CSS. Here’s a screenshot of the forum listing.

Lastly, the forum stats/online users/calendar information section, in my opinion this is the most ridiculous section of modern forum software. It’s only shown on the forum index, and it’s the biggest waste of screen space.

Commonly it has a few lines of text left justified with titles and sub titles, and basically it just tells us who’s online right this minute and how many posts and members the forum has, plus varying degrees of redundant and useless information. My idea for this section is to strip it to bare bones. All we really need to know is who’s online, nothing else is is really necessary but for statistic junkies we’ll leave in a single line of text declaring total posts and members. The best place for this line is below the forum list and above the who’s online box. We will put it on the right hand side across from the “mark as read”, “delete cookies” and “subscribe to RSS” links, which are useful.

We’ll display the who’s online box with a header, and a below that a “break-it-down” sentence of who’s on for which user type, and then a comma delimited list of members, whose names are clickable to the user’s profile. At the bottom of that box we put in the links for more detailed who’s online listings “Who’s Online Listing”, “Last Click” and the full member listing.

We’ll end with the software copyright, and that’s wraps up the forum index, with no redundancy, an improved flow and a sturdy base to build on. Screenshot of complete forum index

In closing, the above are my opinions, and the way I feel to best represent and display a forum index page. I don’t mind fielding more in depth questions about my ideas, or even debating certain aspects. You will notice that some common forum index features were omitted, this was purposeful and I have my reasons for each omission, some of which will be explained in later articles of this series, some only mentioned if I’m asked directly about them.

I hope this article was interesting and entertaining, I’d love to hear your feedback.

Next Week, Part Two: Topic Listing.

More of the Same

10 recent “Developmentally Able”


hung, orgyen yul-kyi nup-chang tsham
pema kesar dong-po la
ya-tshen ch’og-ki ngodrup nyey
pema jugne zhey-su trag
khortu khadro mangpo kor
khyed-kyi jeysu dag-drub kyee
chin-kyee lab-ch’ir shegsu sol

guru pedma siddhi hung

your comments

comments off

32 comments

Comments off for this entry.


stdmedia

Fantasitic! Can’t wait for the rest of the series!

James Mathias

Thanks,

I appreciate the comment. I hope everyone enjoys the series.

jinesh

think the number of PMs should also be included in the header dashboard. a lot of our members use private messaging..but then again, a forum might want to discourage posts which are not shared with the community.

have you taken a look at Vanilla?
has a very clean frontend. also stylegala’s forum index page.

looking forward to reading the rest of the articles in this series…especially if you have any suggestions for dealing with advertisements, the big, animated, banner kind..if the cost of running the forums is borne to a large extent by ad revenue, i’m sure it’s not something which can be easily scrubbed out smile

David Sissitka

I like it, in my opinion simplistic designs would encourage website owners to make a message board a part of their website, as apposed to being their website. It’s unlikely that a design like that would consist of hundreds of templates and stylesheets with more then a thousand lines, removing any intimidation from design customization. One thing does seem a bit odd to me though, the repetitious topic heading. It would be useful if a forum contained a lot of categories, but if someone has that many categories they could probably organize things more effeciently and avoid having categories just for the sake of having categories.

James Mathias

Hi Jinesh,

Private messages, are not in the overall scope of the idea, thus their exclusion from the header, I think message boards should be about open communication, not private communication, AIM and MSN handle that just fine I think.

As for Vanilla, it is good on the surface, but digging in becomes overly complex, in my opinion.

The articles will be dealing mostly with improving the flow and usability of forum software in general, and I won’t really be touching on any techniques for addons or skinning in this series.

David, I agree with the topic header being redundant.

Veracon

Though it’s really barely related, I just thought I’d point this out; what exactly is the definition of a ’forum’? Is it the actual site, or is it a category of posts? To eliminate this ’problem’ in a small, private piece of (Python) software, I’m simply calling the actual site a forum and each category, well, a category. Seems logical to me.

On the article, I think it’s very nice and you’ve got some great points. I can definitely understand what you mean by the main header being redundant, so your mockup here looks quite logical, in fact. Only thing I’d do would be highlighting the ’forum index’ link a bit more. I know about myself at least, that when I want to go to the index, I want to go there quick. So either making it a bit bigger or putting it in a more easily accessible place (thinking Fitt’s law, here) would do a great deal for someone like me.

James Mathias

I agree, the forum index link does need a bit more prominence in the layout.

But on the same note, if I am to single it out, it breaks the convention of the concept. I suppose it could be highlighted, to make it stand out more or it could be placed in a different location.

Really it’s purpose overall is just to be a centrally located link back to the index, and in the strictest of terms it’s redundant for it to be on the forum index at all, as it leads nowhere, and on later views when the bread-crumb menu comes into play it’s even more so redundant.

But, I do see the flaw it “hiding” it with the other links.

Michael

That’s a really reall cool design, I love the idea of having that information at the top, its really nice.

I’ve just been hired for a new project which will contain in essence a discussion forum at its core level, with other areas to abstract away from the forum. I think I will try and implement some of your ideas into the project, although for this, I may need to add some form of header somewhere.

Love the ideas James! Can’t wait for next weeks"

James Mathias

Thanks Michael, I appreciate the comments.

Goof

Focussing on the header alone, and particularly leaving away the logo..

Personally i feel a logo should be part of a header. Shipped with the forum software is the default logo. But that’s usually the first (and often only) thing that people change. Having a default logo available means people that don’t want to dive too deep into skinning have an easy option of changing it.

Why a logo: recognizability.
Sure, people are used to having a logo on top of a forum which makes it a it of a habit. That can be changed. If all forums shipped without logos, people would get used to that soon enough.
Promotion/advertising is another part of it. People like to advertise their site, a logo/site header works well for that.
But the most important thing is the ability to quickly recognize what forum one is on. Judging that from contents, url or color schemes isn’t user-friendly, a site logo is.
Not many people tend to fully customize their board. Most leave it as default (except the logo change - which isn’t available in your new header). Without a logo change these forums will all look exactly the same. It’ll be hard to distinguish what forum you’re on currently when you have several browsers/tabs open.
That’s the software’s default skin, but applies to distributed skins as well.

Note that i’m not saying “logo image”. Wordpress for instance ships with a text header “logo” type thing which works well too.
But i personally feel omitting a logo would be a step in the wrong direction. My 2 cents smile

Daniel Wilhelm Murdoch

Good points all around, James. The only thing I slightly disagree with is the absence of some sort of branding header. As goof said, it’s usually the only thing, skin-wise, that peole tend to change to give it a branding touch even if it’s text-based.

Besides, let’s say you ship the package with a simple h1 header tag. Someone could easily modify the CSS rules for that particular tag to include a background image.

Good read nonetheless!

James Mathias

Hi Goof and Dan,

I disagree, I don’t believe a software package should come with a default skin, it should be a bare minimum look and feel so that it’s not ugly, but at the same time a solid, easy to alter/use base package.

If someone decides to not customize their forum, they can always add a logo above the board header, it’s as simple to add one as it would be to replace one.

As far as branding and being able to recognize the software being used, I believe that is only an issue with message board geeks (like you and me), the average user does not care, nor do they look for who built the software, they just want it to work smoothly and load fast.

Kennedy

I really like that design. I’ve got some questions, but they’ll need to wait until next week as they relate to the topic view.

As for the header, people would get used to it. I have been a member on a forum for over a year visiting regularily when only a week ago they changed the header link to go to the portal. Now I hate personally dislike the portal, so I just had to get used to clicking another link. Its really no big deal, as you just get used to it.


I’m loving the design though James, I have no complaints about it, it looks really good! smile

Peter Schrijver

The Header logo or text could fit in the middle between the login name and the search box. Or you could use a watermark logo in the header for a little recognition.

The biggest dutch forum http://gathering.tweakers.net/ has the abillity to turn on/of visual information. such as forum descriptions, number of topics, replies.

For example: forum descriptions are usefull for new members. If you are a longtime member you now what the category is about if a good catagory title is used.

If you’re talking about stripping useless info: What’s the use for the full login name? I just want to know if I’m logged in.

Why whaste space by showing the last topic info under the category description. You could show it on the right below the number of topics with a smaller font.

James Mathias

Hi Peter,

I don’t consider the welcome message useless information, it gives the user a sense of personalization and friendliness. The goal of this series is not to please individual tastes, it’s to overcome the stagnancy of the modern forum GUI and try and improve it’s ease of use and reduce overall redundancy and clutter.

Using very small fonts is not friendly, placing the last post info on the left under the name and description was done for logical reading flow, since the number of topics is borderline useless information, but still warranted by popular opinion I placed it to the right and large to fill empty space, to make it easy to discern/read at a glance. I believe moving the last post info to the right and making the number smaller is counter-intuitive to the logical reading flow.

Of course this is just my opinion, and the end administrator/designer would be after all able to make changes to the default look and feel at their leisure.

Dan

As an alternate perspective on the ’missing’ brand-logo:

In this concept, it was my impression that James was trying to promote making the forum a part of a greater web-site, as opposed to the sum-total of the web site?

If so, surely a design with no logo-strip could be more easily placed into the overall “brand” design of your site? I for one would personally love it if forums slotted into my existing design more easily and with much less modification required.

That way, the main site design could act as my “wrapper” and the forum would just fit in place along with every other section of my site.

Dan

Forgot to mention, great article James. Will be looking out for the rest of the series. smile

James Mathias

Thanks Dan,

That is part of my motivation and a terrific side effect of the main goal of just stripping out unecessary, vertical space exhausting “features” that are for all intents and purposes not only redundant but also quite useless.

A full width, 100 pixel high logo that does nothing more than take up vertical and horizontal space, links back to the forum index and advertises the creators of the software, just doesn’t make sense to me.

Goof

But 100px high header images make you look leet…

Daniel Murdoch

l33t no leet.

Kennedy

I do like the idea of having the logo still, as I like the link back to the index. and I also agree that it does let you know whose forums it is, straightaway.

Michael

I’ve started work on my project which I am to attempt most of what you have described James, and so far its going well, alot of the crap can be removed via the settings. And simple skin edits should do the rest, I just hope I can make it look at least half as good as yours! (You should consider making some skins like it wink )

James Mathias

Well, good luck Michael.

Please don’t make an exact copy of what I’ve done here, but please do take the concepts and run with them.

Michael

Thanks.

God no I wouldn’t make an exact copy! I’m using your designs as inspiration for mine, with many changes, adding a logo in there, and so on. Making good use of the minimalistic concepts. Nearer completion I’ll let you have a look before it goes live if you would like.

smile

James Mathias

Naw, I trust you. I hope it comes out well for you!

Dan

I read earlier that you’re making the new MyTopix skin.

Is that going to use these concepts? big grin

James Mathias

Yes, I have been approached to redesign the default MyTopix skin, the project has not yet commenced, and there are no guarantees, but I should be starting the project soon if all goes smoothly.

The skin will use as many of my concepts as I can get in there without protest, I do not plan on fighting for anything specific, so if the client decides to do things differently I won’t push it, it is afterall their decision.

Dietrich

Overall looking nice, although I don’t like the big topic counts.

In fact, it looks a bit like a merge between the Phorum and miniBB looks:
- http://www.phorum.org/phorum5/
- http://www.minibb.net/forums/index.html

About Vanilla, the forum looks good and simple, just as this layout does, but the software itself does not bring much new, compared to others. But that’s another story.

James Mathias

Hi Dietrich,

I do not see how it’s a merge between those two forums, sorry, but it doesn’t look like like either, nor a mixture of both.

I don’t necessarily think that anything “new” is needed in forum software, just improvements to the base.

I think most forum software developers are wasting time trying to compete and add the most new features, when in fact the time would be better spent improving and optimizing the base software.

This series of articles is about making improvments, sometimes obvious and sometimes unpopular.

I am just tired of having two hundred choices that cram in everything they can, as opposed to one or two choices that do forums really well.

Dietrich

I didn’t really mean litteraly “merge” but it’s a mixture of Phorum’s simplicity and the light colours of miniBB. In fact, it could just be the new Phorum layout (thought they still needed a new one).

I agree forums don’t need all the new functionality IPB and vB has, the forum I develop myself is also meant to be simple and easy and limited to the essential, I don’t care about the rare new features that in fact nobody will use. Although, there are lots of “new” projects who only seem to be looking at IPB and vB and offer less “new” things, I mean new approaches to things: topic tagging, plugin system, etc…

That’s what I mean with Vanilla offering less new, it doesn’t really differ much from regular light forum software like miniBB or Phorum, it just has a sleek interface and uses a sort of Active topics page instead of a forum index. No tagging, no Ajax, etc.

Dietrich

Forgot to say: bbPress is actually the only one I know of who actually tries to launch something “new”: topic tagging. Yes, I keep repeating it, but I think this is one of the best ideas to improve or even change the basic idea of forums, at this time bbPress still uses categories+tags, the first actual forum software which makes it able to only use tags does not exist yet. Although, I am working on making this possible in the next major version of UseBB. I suggest you keep an eye on it. wink

Cheers.

James Mathias

I understand what you are saying, and I agree about using tag’s, but I also think that tag’s and categories should be used in tandem.

I look at categories as a specific categorization, and tag’s as keywords, so I see a place for both in forum or any software that uses either. The smaller the peices we can split things into, literally the faster and easier we can find those things, in my opinion.

As for the color scheme, I used the blues and greys for my examples because it’s the most calming and popular color scheme and I wanted the examples to have mass appeal.

As for bbPress, I cannot give any sort of opinion one way or another on the software, as it is not been released in a final stable version.

comments off

32 comments