February 6, 2006
Anatomy of a Forum (part two)
imagined by: James Mathias
Last week we began a discussion on the modern message board and its GUI, we talked about ways to improve this common and outdated user interface by making things slimmer, cleaner and more logical. There was extremely good feedback on the article and concepts overall, the only real complaint was that the concept lacked a design logo/brand. I feel a logo is not necessary to the overall software package, some argued that some administrators would want to leave the software as is, but replace the logo/brand with one of their own. My response was “I feel it’s just as easy to add a logo as it is to replace one”. Although, the more I think about it, I think there is a possible solution that would work well as a compromise, without real sacrifice.
Code the logo into the skin, but by default have it turned off in the admin control, then if the admin wants to have a logo to replace or a logo at all they can simply turn it on and upload their own image. This allows administrators that do not require or want the logo to leave it off, but gives less experienced administrators a way to apply a logo/brand with little to no html/css experience.
Now that that’s out of the way let’s talk about the topic list. This is the common succession from the forum index, but also in some cases this would be the default main page, so it’s important. My goal with the topic list view is the same as with this entire project, to make it as simple, clean and logical as possible.
To start we will have the same header section as the forum index, this would be a global part of the forum software, and appear in every area of the software.
Next we’ll need bread crumb navigation, this is a common part of modern and classic forum software alike.
For our concept I’m going to make the bread crumb navigation have a yellow “note card” background, to make it clear and obvious, the font is going to be large, but not huge, and only add links to the back trail, no need to link the title of the current area. Here’s a quick screenshot of the bread crumb navigation in relation to the global header.
Below the bread crumb I’d put the name of the forum we are currently in, I would make the size and color of this text match the category names on the forum index (for design consistency).
Across from the forum name, I would put the page navigation (if any) and the “start topic” link; I’ve highlighted the “start topic” link so it would stand out next to the page navigation. In the case that the topic is not paged I would have the phrase “single page topic” appear in its stead.
For the topic list itself, I’d keep the same flow and consistency from the forum index, with a couple of minor tweaks to accommodate the varied information.
I’d remove the topic description completely. I feel it’s not used enough to warrant display, and when it’s used it’s commonly repetitive and useless information. I would also strip out the author’s name, as it’s inconsequential to the topics validity, it can also be listed on the topic view itself so it’s not needed here, and it just causes clutter and often times confusion when coupled with the last reply information.
The last reply information would be displayed below the topic title with the yellow highlight, exception would be in the case of a closed topic, in which the last post information would be changed to “topic closed on: date” and the topic title would be struck through to indicate its no longer relevant to the topic list, and would automatically drop to the bottom of the overall listing.
New topics would be displayed at the top of the list in blue as with the forum index, and the blue “new” text icon.
Topics you’ve posted in would be marked with a blue “checkmark” icon, and topics with an attachment would be marked with an orange “paper clip” icon. Total replies would be listed as a large number on the right hand side of each row, and alternating background colors would offer visual separation between topics. Here’s a screenshot of the topic list as described.
Below the topic listing would be a second start topic link and page navigation, across from that on the left side would be a forum jump menu, to allow for quick forum changes. Below that I would place the “online users viewing this forum”, with the same links from the forum index, creating consistency of design with only changes in relative information to the view.
Some things I’ve left out; polls, hot topics, sorting options, moderation options, rules, topic pages.
I discarded polls, because I don’t believe that they are necessary or useful to forums. I can see where they might be useful to the administrator of the software for polling his member group, so I would not fight their inclusion, and if the software had them I would simply create a purple icon with a question mark on it to indicate topics with a poll attachment.
Hot topics were left out intentionally. I feel they shouldn’t have a place in forum software, the number of replies already indicates popularity of a topic, and the rank within the list shows activity, a separate icon or coloring for this type of topic is unnecessarily redundant.
Sorting options, I considered adding these, but then asked myself if the options are used enough to justify placing them inline to the topic list, when they could just as easily and more logically be placed in the users preferences. Now I know sometimes they are used to find a buried topic, but this can be done just as easily with the global search.
Moderation options, I don’t believe the topic view needs to have moderation options built inline, but I do understand the time saving benefits of having them, so again I would not fight their inclusion, and I would place them directly below the topic list with a pink background to highlight that they are not seen by everyone.
Rules were left out as they are not necessary to the topic list, the rules should be located in one central are of the software, and can be categorized on a forum to forum basis if the need arises, no need to clutter the topic view with information that is often ignored anyways.
Topic pages, this was left out because it’s not necessary, the topic itself will have the page navigation available. Showing the pages on the topic list is sloppy, but not 100% useless so I would not argue their inclusion and would display them to the left of the large replies number.
I think that pretty much covers it. Here is a full screenshot of the topic list view.
Please let me know your thoughts and opinions on this view, I am open to suggestions and comments as always, again thanks for reading I appreciate it.
Next week, part three: Topic Reading view.
Anatomy of a Forum (part two)
- 02.6.06 at 11:36amthrown down:
- James Mathiasimagined by:
- Developmentally Ablestored in:
- 382 peeps, 21 of whom commentedenjoyed by:
More of the Same
10 recent “Developmentally Able”
- Big Business Bulli…
⇒ on: Aug. 26, 2007 - 6pins has launched…
⇒ on: Apr. 19, 2007 - Steal Ma.gnolia
⇒ on: Apr. 4, 2007 - Getting Logitech…
⇒ on: Feb. 3, 2007 - Can I get that ico…
⇒ on: Dec. 21, 2006
- Help Wanted
⇒ on: Dec. 6, 2006 - 13 Applications of…
⇒ on: Nov. 16, 2006 - Will The Real Styl…
⇒ on: Jul. 9, 2006 - Mr. Alan Jax is an…
⇒ on: Jul. 9, 2006 - Links to Me Will b…
⇒ on: Jun. 27, 2006





your comments
add comment
21 comments
Feb. 06, 2006 (12:33pm) [#1]
Michael
Looking good James! I’ve personally removed the bread crums for the project I’m working on (although thats because of the project) and I’ve also removed one of the new topic icons.
I love the way you have done it - it looks really beautiful, and if you are going to be re-designing mytopix, I think there could be some serious, and well needed, shaking up in the forum industry!
Feb. 06, 2006 (12:39pm) [#2]
James Mathias
Hi Michael,
Thanks.
The breadcrumbs are not vital to every system, but they make a useful addition to the software so that’s why I use them, in the concept.
Feb. 06, 2006 (3:36pm) [#3]
Dietrich
Good work. It covers pretty much my opinion on forum software. No polls, no topic descriptions, etc. Although, you may want to add the topic author in the title attribute of the topic link.
It looks very “Web 2.0”-alike (big fonts, light colours) and that’s what people want these days.
Feb. 06, 2006 (4:45pm) [#4]
Jamie
Do i need to comment? You know exactly how i’m going to react by now, all your work is phenomenal! Keep it up, i cant wait till next week!
I hope you make this software fully working too
:p
Lovely!!
Feb. 06, 2006 (4:51pm) [#5]
James Mathias
Dietrich, Thanks, web 2.0 though? maybe in style but not in coding not a drop of ajax would be found in this software. I do like the idea about the author in the title on the link.
Jamie, Thanks. As for making the sofware work, you never know.
Feb. 07, 2006 (2:36am) [#6]
Kennedy
Nice, I really like the layout.
Feb. 07, 2006 (11:38am) [#7]
James
Really good! Didn’t get a chance to comment last week but it’s certainly.. effective.
Feb. 07, 2006 (12:52pm) [#8]
James Mathias
Kennedy, James, Thanks, I appreciate the good feedback!
Feb. 09, 2006 (3:21pm) [#9]
Goof
Purely for moderation easy it’ll be easy to have it displayed who started the topic. Troublesome users can more easilly be tracked that way. It beats going to the profile page (listing members -> finding the member -> finding all posts by that member) or through a search page and then finding all that member’s posts, looking at them without seeing which you’ve allready read (the onces where you saw that it’s wasn’t a trouble post by that member). But that’s for ease of moderating on a very busy forum. On “normal” forums you’ll go through each unread topic as a mod/admin and keep up with the community. It’s not fool proof, sure, but still a handy tool imo.
For those large forums though, as long as the variable to display the topic starter is available it can probably be added easilly to the skin.
I do understand your reasoning. It doesn’t matter who started a topic for the topic itself. And with that i agree.
But then again, who posted last doesn’t matter either
Feb. 09, 2006 (8:25pm) [#10]
James Mathias
Hi Goof,
Who started a topic is not necessary in the topic list, even for the reson you list. I for one don’t want people singling me out every time I make a topic, without first giving the topic a chance, social ridicule happens to extreme degree on forums, and this will help prevent at least the initial disregard for a topic based on it’s starter.
Also if a user is that much trouble perhaps a ban is more appropiate.
As for the last poster, that information is important because it tells a browser at a glance the last action taken and by whom in a topic, as the new post marker is not always reliable, as we IPB users all know.
Feb. 10, 2006 (10:30pm) [#11]
Paul
I’ve made a lot of forum skins and whilst I’ve never come up with the ideas you have here or really put the effort into doing so. For a long time I’ve felt the frustration that would lead to these ideas.
With every new version of a given software there seems to be more and more to skin. More and more crammed into the interface.
It looks bad, is harder to fit in and style and harder to make comprehensible.
As such I don’t think i can really disagree with much if anything you say.
I would argue though that both the index and topic listing can be detailed lists. I’m not saying it’s the way it should be. I do think it can validly be so though.
After all the description, last action and number of topics/replies can all be described in one paragraph contained in the < dd >
In short though I’m a believer.
To try and find something constructive though. One nitpick, the topics/replies numbers are displayed as just that. Numbers. There’s nothing to describe what those numbers refer to.
I havemade a couple of stripped down skins for my own use in the past, maybe with your inspiration i’d dare to offer one to the public in future.
Feb. 10, 2006 (10:50pm) [#12]
Nick Adams
A small critique would be that the Next button for the pagination is too close to the Start Topic button. A fast clicker might accidentally click one instead of the other. Maybe the pagination nav could be centered in the area between the drop menu and the Start Topic button. Just a thought.
Feb. 10, 2006 (11:08pm) [#13]
James Mathias
Hi Paul,
Yeah the numbers have no identifier, which is definately a flaw, I am working on a idea to rectify that for sure. The articles are not so much to push a mark up style or preference but more so to create a concept to follow. However I do disagree that the data is fit for a definition list, a definition list should be a list of titles with definitions, IMO. Of course it is definately up to the designer/coder to make that call, I will not fault someone for having a differing opinion to my own.
Hi Nick,
Yes I agree, I will be applying a correction to that part of the concept in the coding stage, the screenshots are purely Photoshop mock ups, so some things that can be tweaked in the coding stage will be.
Thanks guys, I appreciate the comments very much.
Feb. 11, 2006 (1:32am) [#14]
Paul
I know this is a pedantic off topic point and again I don’t disagree with your mark up as good practice.
However I just wanted to try and explain why I believe definition lists can be a valid method also. In case I can win you over.
“A definition list should be a list of titles with definitions”
I’d say rather a list of definitions and descriptions.
In a definition list the title, < dt >, is the definition. Definition Title.
The < dd > Is not a definition but a Definition Description. A description of the title.
So the Definition Title could be the forum/topic title and everything else describes that in more detail.
I think that the < dd > part of the list being a description rather than the definition leaves it very open to interpretations.
This forum is about beans and contains 3 topics. The last post being made today.
Seems to fit in ok to me as a description where as if it were a definition I’d be more hesitant.
Sorry to appear so argumentative and to be off topic. I’m sure if I read this later it’ll embarrass me.
Of course I do have a motive for going on about it. As I have made a few skins using definition lists.
Oh and I’m very much looking forward to the rest of the Anatomy series. I’ll not be making any posts about mark up no matter what comes of it. The concepts I’m fully behind so far.
Feb. 11, 2006 (1:54am) [#15]
James Mathias
I see your point, I still don’t think it’s the best way to mark it up, but as I said, I am less concerned with the mark up choices as I am with the actual usability.
I hope you enjoy the rest of the series, it’s going to be fairly long winded in the end.
I fixed your post and deleted the second one. Thanks again for the comments I do appreciate them.
Feb. 11, 2006 (4:23am) [#16]
Marko Mihelcic
wow nice GUI , I hope it see’s life
Feb. 11, 2006 (5:25am) [#17]
James Mathias
Thanks Marko!
I appreciate it! Hey when are you going interview me for Mcville? jk… sorta
Feb. 11, 2006 (11:14am) [#18]
mcsolas
Re Forum Rules: Yeah they dont need to be included in the ui, if need be, people moderators can write the rules and make them a sticky. Easy.
Regarding no logo: Its an interesting point. I think there needs to be a distinction made between forums that are:
1. ’the site themselves’ .. as many forums are what shows up when you type in that domain name (ex: www.site.com shows you a forum )
2. a part of a larger site (ex: www.site.com/forums/ )
The need to post the logo will vary depending on the forums role in that site ( or if the forum IS the site).
Personally, I like the ’click logo to go home’ navagation as its fairly common across the web. I think that ’not so savvy’ users also might get lost without it, especially if the forum is a part of a larger site.
Feb. 11, 2006 (12:36pm) [#19]
James Mathias
Yes, I see the point, and that is why I proposed the solution at the beginning of this part of the series. on/off switch for a coded logo, set to off by default.
Also I partly believe that forums should not–in any case–be your only content. I know it happens however and I know it’ll most likely never be completely phased out (forum only sites), thus my compromise, although hesitantly.
Feb. 13, 2006 (7:04am) [#20]
Tinus
I like how BBPress works. It’s light, fast and easy to skin. It’s as clean as possible and that’s the way i like it. See for an example this forum.
I also like the Site Overlay feature in Google Analytics. It tells me that only a few links matter and that the topics in ’latest activity’ are the most popular.
A fast and easy search function is also a MUST HAVE. People tend to search more and more as your forum grows.
Feb. 13, 2006 (12:11pm) [#21]
James Mathias
Hi Tinus,
I agree about the search functionality being tight and a must have. But it needs to be simple and easy to use as well.
add comment
21 comments