bbPress theme project: Design - wireframe/UI

[ryanhellyer]

Welcome to the intial phase of the official SitePoint bbPress theme development project.

For this initial stage of the development, we need to make some decisions about the overall UI (User Interface) and build a basic wireframe design. Once we have completed this stage, the graphic designers and CSS coders will be able to start their respective parts of the project.


Unlike most bbPress themes, ours will incorporate some functionality which has previously only been available as plugins, such as forum signatures, BB code buttons, report post buttons, resolved/unresolved buttons, members online display, smilies buttons, forum polls and forum stats. The UI/wireframe will need to encompass these extra 'non-standard' features.


If you have any opinions on how the theme should be laid out and how the UI should work, please post your comments below. If you would like to demonstrate something, feel free to post an image for us to see what you mean. Explaining things in words may be difficult, and as the saying goes "a picture paints a thousand words"! Once we have a good idea of where the basic features on the page will be we will prepare a crude wireframe HTML/CSS mock-up to demonstrate+test the functionality of the design.


Some of the factors we need to incorporate into the wireframe are:

• How wide? Fixed width, flexy width?
• Do we want a sidebar containing bbPress tags like in Kakumei?
• Gravatar on the left hand side or the right hand side of the posts?
• Where should forum signatures be? Underneath the gravatar? Underneath the post? Somewhere entirely different?
• Where the should the forum stats be displayed?
• Where should the search box be displayed?
• Should we have a forum "jumpbox"? If so, where should it/they be?
• Where should the breadcrumbs/linktree(s) be?
• Where should the forum menu(s) be? And should we even have a forum menu?
• Where should the login box be?

To help with inspiration, here are some links to various forum theme galleries:
bbPress themes
SMF themes
Vanilla themes
vBulletin themes
MyBB themes
phpBB themes


We are keen to get as much feedback as possible. Once all of your feedback has been collated and processed by SitePoint staff we'll be back with another exciting post detailing any decisions made, decisions yet to made and hopefully information about the next stage in this exciting project.

[armchaircritic]

Cool can't wait to get involved in this one. Should be some interesting thoughts shared about how a forum should function. This is probably going to be a major factor in how the design and UI is decided upon, but I'm all up for unconventional so long as it makes good sense.


I think in regard to the first bulleted point that the width should probably be fixed at a certain width, but could perhaps be allowed to contract to fit with 800x600 sized monitors. This is especially important for the design of a forum, since you can't tell where or by whom they will be deployed.

Well that's just my thoughts so far.

[BPartch]

Originally Posted by armchaircritic

This is especially important for the design of a forum, since you can't tell where or by whom they will be deployed.

I think for this reason it should be a fluid layout. As far as layout and design go, I think it should be made to look as much like real forum software (like vBulletin®) as possible.

* How wide? Fixed width, flexy width? 100%/Fluid
* Do we want a sidebar containing bbPress tags like in Kakumei? No, at the bottom above the stats
* Gravatar on the left hand side or the right hand side of the posts? Left
* Where should forum signatures be? Underneath the gravatar? Underneath the post? Somewhere entirely different? Underneath the post?
* Where the should the forum stats be displayed? Bottom
* Where should the search box be displayed? Top right
* Should we have a forum "jumpbox"? If so, where should it/they be? Indifferent personally, as I never use them but others might so I am flexible. Bottom right
* Where should the linktree(s) be? Not sure what the link trees are?
* Where should the forum menu(s) be? Again

Just my 2 cents!

[ryanhellyer]

Originally Posted by BPartch

vBulletin®

Heh, nice touch with the subscripted ® symbol!

Originally Posted by BPartch

I think for this reason it should be a fluid layout. As far as layout and design go, I think it should be made to look as much like real forum software (like vBulletin®) as possible.

Personally I'm of the opinion that forum softwares have matured to a point where the rough optimal layout has already been decided. Thousands of people have had a crack at forum layouts, and the most popular by far are the stereotypical layouts such as here at SitePoint.com.

Originally Posted by BPartch

* How wide? Fixed width, flexy width? 100%/Fluid

How about fluid, but with maximum and minimum widths? Actually a minimum width would almost definitely be required as the design would break eventually once I dropped to something extreme like 400px or so.

Originally Posted by BPartch

* Do we want a sidebar containing bbPress tags like in Kakumei? No, at the bottom above the stats

Ohh, good idea, I like that. That pushes them below the fold, but still leaves them in position to be of use to those who want to use them.

Originally Posted by BPartch

* Gravatar on the left hand side or the right hand side of the posts? Left

Yep, I think the right hand side would be a little weird.

Incidentally, we could easily add an option somewhere in the admin panel to flip it to other side if required. This would make the theme a little more user friendly for those wanting to make drastic changes such as that, or even allow their own users to change it themselves depending on their preference. But by default, I think it should be set to left.

Originally Posted by BPartch

* Where should forum signatures be? Underneath the gravatar? Underneath the post? Somewhere entirely different? Underneath the post?

The only area in which I would drastically veer away from a stereotypical layout would be to make the signature area less prominent. Big fat forum signatures are useful at places like here at SitePoint.com, but most forums are not geared for web developers and so the signatures are usually just used for a simple catch phrase rather than for an extensive list of interesting links.

This is also something we could provide a switch for in the admin panel, but by default I think having it as a small section below the gravatar would be best. I suspect most people will disagree with me on this. Signatures are almost always below the post so it's what people are used to I suppose. Or maybe it's better for some reason perhaps ...

Originally Posted by BPartch

* Where the should the forum stats be displayed? Bottom

I also say bottom, but only on the main forum index. I don't think they need to be displayed on every page.

Originally Posted by BPartch

* Where should the search box be displayed? Top right

In the header? Or in some sort of navigation menu?

Originally Posted by BPartch

* Should we have a forum "jumpbox"? If so, where should it/they be? Indifferent personally, as I never use them but others might so I am flexible. Bottom right

Yeah, I don't tend to use them either. I stripped them out of a forum once, but I was bombed with PM's from grumpy forum users complaining that the forum was broken and they could no longer switch between forums anymore. So it seems that for some people, they are the only way they know to change forums.

Some forums add two of them, one above the content and one below. Since I never use them I'd go for one below the content. It does provide a convenient navigation point at the bottom of the page so that users don't need to scroll back to the top whereas it seems kinda redundant at the top if there is a linktree there.

Originally Posted by BPartch

* Where should the linktree(s) be? Not sure what the link trees are?

If you look a the top of this forum topic, there is a series of links which say "SitePoint Forums > Forum Index > Design Your Site > Web Page Design". Those are the link tree.

I think it would be well situated below the main menu (if there is one) above the main chunk of content.

Originally Posted by BPartch

* Where should the forum menu(s) be? Again

If you look at the top of this page again, there is a series of links in a big blue bar which say "Home Articles Books Kits Videos Blogs Contests Marketplace Forums Reference". There is also another menu below the linktree which says "SitePoint Forums > Forum Index > Design Your Site > Web Page Design > bbPress theme project: Design - wireframe/UI".

vBulletin® is much more feature rich (bloated?) than bbPress and so has a lot more stuff to stick in a menu. SitePoint.com also has a lot more than just a forum on it which also adds to the amount of stuff the need in their navigation.

So I suspect we'd only need one menu for the bbPress theme. I'd place it below the main header but above the linktree.

Originally Posted by BPartch

Just my 2 cents!

Thanks for the two cents

[ryanhellyer]

Please excuse the crudity of the diagram, but here is a very basic mockup of what I had in mind.


I was assuming that the jump boxes, tags, stats etc. would not be displayed on the thread pages and that stats would only be displayed on the main forum index.

[BPartch]

Originally Posted by ryanhellyer

Heh, nice touch with the subscripted ® symbol!

I just copied it from the bottom of the page and it appeared there.

Originally Posted by ryanhellyer

Personally I'm of the opinion that forum softwares have matured to a point where the rough optimal layout has already been decided. Thousands of people have had a crack at forum layouts, and the most popular by far are the stereotypical layouts such as here at SitePoint.com.

That's what I meant, make it look like a regular forum.

Originally Posted by ryanhellyer

How about fluid, but with maximum and minimum widths? Actually a minimum width would almost definitely be required as the design would break eventually once I dropped to something extreme like 400px or so.

I meant it should take up the entire view port and be flexible, like SP is.

Originally Posted by ryanhellyer

I also say bottom, but only on the main forum index. I don't think they need to be displayed on every page.

Agreed!

Originally Posted by ryanhellyer

In the header? Or in some sort of navigation menu?

The webpage, like SP has it.

Originally Posted by ryanhellyer

If you look a the top of this forum topic, there is a series of links which say "SitePoint Forums > Forum Index > Design Your Site > Web Page Design". Those are the link tree.

Oh the breadcrumb!

Originally Posted by ryanhellyer

I think it would be well situated below the main menu (if there is one) above the main chunk of content.

Agreed

Originally Posted by ryanhellyer

If you look at the top of this page again, there is a series of links in a big blue bar which say "Home Articles Books Kits Videos Blogs Contests Marketplace Forums Reference". There is also another menu below the linktree which says "SitePoint Forums > Forum Index > Design Your Site > Web Page Design > bbPress theme project: Design - wireframe/UI".

I do know what a menu is I did not see one on the default bbPress template and that is what I was using as a reference to design a layout for it.

Originally Posted by ryanhellyer

Thanks for the two cents

Have 2 more...

[BPartch]

Originally Posted by ryanhellyer

Please excuse the crudity of the diagram, but here is a very basic mockup of what I had in mind.

Crude? I like it, especially the avatar, it bears a striking resemblance to me?

No seriously, I like it, Does the sig wrap under the avatar in your vision or stretch out under the post area?

[ryanhellyer]

The signature would wrap under the gravatar area.

A potential hiccup to this layout is that very short posts do leave a larger area of white space under the posts themselves. I use a variant of this style of layout on my support forum and haven't noticed that being a problem, however my forum also has a fairly skinny fixed width setup so that effect wouldn't be as noticeable in comparison to a fluid width design.

[ryanhellyer]

Originally Posted by BPartch

I meant it should take up the entire view port and be flexible, like SP is.

How do you feel about the layout becoming overly stretched at very wide browser widths? Or do you think that users who open their browsers that wide should have the option to view the site super wide if they choose to? I've always tended to put a maximum width in (say 1600px) to stop the design from looking weird when the window is expanded too far, I'm undecided as to whether that is a good idea or not.

Originally Posted by BPartch

The webpage, like SP has it.

SitePoint has two, one in the header and one in the skinny sub-menu below the linktree/breadcrumbs. Since bbPress is quite a small software, the theme isn't likely to have too much stuff to place in the menu, so there is likely to be room to fit a search box in there (like this), or it could be placed into the header like the big search box in the top right of the header here on SitePoint.

Originally Posted by BPartch

Oh the breadcrumb!

Oh yeah, I forgot that's what people tend to call them. I'm too used to digging into SMF themes which refer to it as a "linktree".

Originally Posted by BPartch

I do know what a menu is I did not see one on the default bbPress template and that is what I was using as a reference to design a layout for it.

Good point, it hadn't occured to me that bbPress doesn't have a menu by default. In that case I'll add that to the list of questions in the original post as we'll need to decide if we need one of them two (I think it's a good idea).



I'm also wondering about the login/logout box now too. Perhaps something like the login box used on GetShopped could be used? Or would a more typical setup with a login box in the header or below the menu be more suitable? Any opinions?

[ryanhellyer]

Originally Posted by BPartch

Crude? I like it, especially the avatar, it bears a striking resemblance to me?

I was thinking of you when I drew it



Here's an actual mockup made in HTML/CSS (only tested in Chrome):
http://bbtheme.net/ryan/wireframe/display.html

Note: this is a crude demo of a potential wireframe, NOT a suggestion for the final look or HTML/CSS (someone is bound to get confused )

[ryanhellyer]

Any feedback on my crude wireframe mockup so far? Don't be shy! The more criticism the better.

I actually forgot to add a menu to it which is kinda stupid considering that is what I was suggesting! If there aren't any criticisms of what I've posted so far I'll start polishing it up a little bit and maybe create a few more templates to show how other types of pages could function.

[BPartch]

Other than the position of the signature (which i like better below the post content) i think it looks fine.

[kohoutek]

• How wide? Fixed width, flexy width?

In my opinion it should be a fluid width, just like on Sitepoint.

• Do we want a sidebar containing bbPress tags like in Kakumei?

Personally, I'd prefer them on the right side or below the fold instead of the left .

• Gravatar on the left hand side or the right hand side of the posts?

On the left.

• Where should forum signatures be? Underneath the gravatar?

Below a user's post. The signatures can become long, so I don't think it's a good idea to have them under the avatar.

• Where the should the forum stats be displayed?

Below the fold (footer area).

• Where should the search box be displayed?

Above the fold. Perhaps just above the content but below the top navigation.

• Should we have a forum "jumpbox"? If so, where should it/they be?

I don't know how many people use this function. I never use it, but that isn't exactly telling.

• Where should the breadcrumbs/linktree(s) be?

They should be on the left side, below the masthead and the search would do well being on the right (so breadcrumbs on the left, nav on the right and below the main nav).

• Where should the forum menu(s) be? And should we even have a forum menu?

I see the question was asked but the example you gave was the breadcrumb? If you mean forum menu such as My Sitepoint Newsletter FAQ, then I think they should be at the top.

• Where should the login box be?

At the very top.

[BlakeAnthony]

Originally Posted by ryanhellyer

Please excuse the crudity of the diagram, but here is a very basic mockup of what I had in mind.


I was assuming that the jump boxes, tags, stats etc. would not be displayed on the thread pages and that stats would only be displayed on the main forum index.

I like this. Would you like me to code that up for you ryan?

[ryanhellyer]

Originally Posted by BlakeAnthony

I like this. Would you like me to code that up for you ryan?

I've already mocked most of it up in HTML/CSS already.
http://bbtheme.net/ryan/wireframe/display.html

There will also be a separate HTML/CSS phase to the project, at that point Dan Schulz will be leading the development of the markup and CSS side of things so anything done at this stage is really just for demo'ing so that we can see how everything works.

[BlakeAnthony]

Originally Posted by ryanhellyer

I've already mocked most of it up in HTML/CSS already.
http://bbtheme.net/ryan/wireframe/display.html

There will also be a separate HTML/CSS phase to the project, at that point Dan Schulz will be leading the development of the markup and CSS side of things so anything done at this stage is really just for demo'ing so that we can see how everything works.

Very nicely, structured and presentated with CSS.

[ryanhellyer]

New mockup wireframe with some of the features/changes suggested above:

http://bbtheme.net/ryan/wireframe/display2.html

[ryanhellyer]

And another new mockup. I've changed a few minor things in this one include the position of the "edit" buttons.

[kohoutek]

Very nice!

The tags on the right. What are these? Are these for thread tools or content tags?

[ryanhellyer]

Originally Posted by kohoutek

Very nice!

The tags on the right. What are these? Are these for thread tools or content tags?

They're content tags. Basically you can tag a post with a label. SitePoint has a similar system but it's not as "built in" as the system in bbPress is. Most bbPress themes seem to come with a tag cloud for users to track down particular posts of interest, they're often useful for support forums.

[ryanhellyer]

They may be better off down the bottom of the page rather than at the top possibly. They're not something most people tend to use anyway.

[kohoutek]

Originally Posted by ryanhellyer

They're content tags. Basically you can tag a post with a label. SitePoint has a similar system but it's not as "built in" as the system in bbPress is. Most bbPress themes seem to come with a tag cloud for users to track down particular posts of interest, they're often useful for support forums.

Ah, okay. Thanks for clarifying.

Anyway, I've put together a rough composition. Lots of things misisng, but perhaps it's of some use to explain what I meant.

[ryanhellyer]

Heh, that looks pretty good actually

What do you guys think of the tags though? Do we need them in a big block like that? I rarely (in fact never) use them so have never seen the point in having them on most sites apart from things like support forums. Perhaps they would be better of near the bottom where the stats block is sitting at the moment?

Your idea of moving the menu to the top is an interesting one. My demo has the menu sitting in quite a prominent position, but in reality the menu of a forum is rarely a particularly important part of the site since the most important content is within the forum itself and not in the menu.

[kohoutek]

When I want to do the most common operations, such as logging in or out, or viewing my profile, I look at the top, hence why I placed the main menu there. But it's certainly subject to debate.

[FLJerseyBoy]

Hope the project (very cool, btw) will think REAL hard about optimizing the CSS for mobile devices. Agree with those who say, Well, forum look-and-feel is pretty much what people are used to now -- don't tamper with it too much. But not enough thought (IMO) has gone into making this look-and-feel right for those tiny little screens.