MyBB Community Forums

Several decades of cruft has made what we commonly think of as a message board system incredibly convoluted. How many options do we really need? What do we keep out of tradition and not out of necessity?

The MyBB Humanization Project is my attempt at rethinking what a message board software needs. To create a message board to be used by humans, not by message board fanatics.

Of course, this is by no means complete. This is the start of what I hope will be a larger movement of developers and administrators being a bit more aggressive about forging their site's identities.

Let's begin.

Index Page

http://harajuju.net/
http://community.mybb.com/index.php

I won't embed images for the index pages since they're both so big. But let's talk about what we can do with the index page.

Generally, message boards display the views and posts in each forum. I don't think you need either of these, but if you must, keep only the posts in order to give a sense of activity. However, for most forums just the last post time is enough to gauge activity. If you're a new forum, having very low numbers doesn't look really good.

Use the space freed up by removing these two columns to display something dynamic. What you do here depends on what kind of content you serve, but don't do something lazy like "latest threads" or whatever. Try to make it visual.

As for forum stats, I don't have them here right now, but I will likely add the online list back soon -- but only to show users who have made at least one approved posts. You don't want an online list full of spammers. The section under "Board Statistics" is not useful to anyone except people judging your site. However, presenting that information makes it easier for a potential user to make an incorrect snap judgement. Let them read your content and form their opinion from there.

You need to have some call-out to unregistered members, but you need to make sure it's not obtrusive. If it hovers, or obscures content, or if you prevent me from viewing anything, I'm not coming back. Don't be hostile to your potential "customers." Would you enter a store that forces you to give them your e-mail address before you can get in the front door and see what's for sale?

Registration




Honestly, I hate signing up for MyBB forums. I find the process incredibly overwhelming. So I created a registration form I would be satisfied with. A few basic fields and no captcha, just a click. We get spam registrations, lots of them -- but with Spamalyser installed, they never get a post through. Having more users to prune is a decent cost for a frictionless user sign-up experience.

I also used the extra space to re-enforce the fact that signing up for my site is a good idea.

No permissions/Login




Is there a more loathsome page in all of MyBB than the no permission page? It doesn't give you any specific reason for why you've been blocked -- just that you have been, and it could be for any of these million reasons.

However, it's good to keep elements like New Topic visible to guests because it entices them to click and get engaged. Once clicked, a modal pop-up will appear prompting the user to log-in. For a user who has no account, they're given a short and friendly list of benefits and a reason to sign-up. If they don't want to, they can close the modal and continue reading.

Be friendly to your guests. They are your future users. Hopefully.

Thread Listing

Before we even get into this visually, let's talk about the word "thread." In the era of linear discussion views, the word thread is a leftover from a bygone area. It should be substituted with "topic" or "discussion".




The default thread view presents with a lot of information that we don't need. I think thread ratings are pretty universally reviled by admins. Post icons are cute but when 90% of topics don't set one it's a bit pointless, and it doesn't communicate much information. Prefixes are better.

Folder icons ... I don't know any use for these. I don't understand them at all. "Hot" can be determined by the number of replies. Topics with new posts will have an unread arrow and be bold. So they don't communicate any new information, and anything that requires a legend to be understood is a failure from a UX standpoint. So let's kill these.

Views isn't an important metric for me. If you must keep this, it should be viewable within the topic, by the topic creator. He would be the only person interested in this number. For webmasters, Google Analytics is more useful.

You don't need to do this, but I've actually added a reply button directly on the thread listing. This really depends on how the conversation flow on your community works. For me, it's very common that replies will be added to threads that the user has already totally read, so to have a reply button here makes sense.

New Thread




There isn't much to say about this. One important thing I did do was set the Subject field to autofocus when the page loads, so you can start typing without having to click. So once you click the New Thread button you don't have to pick up your mouse again.

Other than that, I'm display most of the same information as the default installation, but taking advantage of the fact that modern screens are widescreen. I've eliminated the smilies (will add them into the editor) and post icons (gone everywhere). Important clickable areas have been accentuated. The text input is much wider, which honestly makes writing much more comfortable.

Show Thread



I sort of aped the way the title is shown from some IPB themes, but I've also moved the Reply button and Subscribe button (called Follow here) into this box. The Follow button is given prominence in anticipation of upcoming notification plugins.

The pagination has been moved into the thead with the search, since the title is no longer there. I find this is way cleaner looking, but it will depend on the style of your site if this is a good idea or not.

The behaviour when you click Post a Reply is very different.



It takes you directly to the Quick Reply form! The Quick Reply is now the default reply mode on my site. I think most of us find we use this much more than the New Reply page -- it is enough for most posts. However, if you want to switch over, the "Preview Post" button has been repurposed as a "Full Editor" button, which switches to the full editor and takes your post with you.

I'm not even going to talk about the "modern" style of postbit. To me, it's indefensible to repeatedly interrupt the viewer's reading with repetitive profile information. With the classic postbit, you can easily identify the author of a post by scanning the name/avatar almost unconsciously. With the new style of postbit you have to constantly adjust your position.

Other than that, there's more minimization of information here. It never made sense to me that author related buttons are shown at the bottom of the post and not in the author information, so that's been killed entirely. I've only left the useful information: the rep score (useful for me as it's very popular on my site, and allows you quickly assess how valuable someone's input is) and the link to send a message. Anything else is secondary information that can be viewed in the profile.

The signature is forced into small text and a lighter color to keep the focus on the content. I also don't allow images on my site's signatures for similar reasons.

The postbit controls are faded out until you hover over them, in order to not distract your reading:



User Control Panel








The hard truth is -- and I think most of the MyBB team is already aware of this -- the default User CP sucks. It has a mind boggling 21 menu items. By splitting off PMs into its own section and consolidating some information, my version has just 5.

Before we get into what's left, here's what's been eliminated from the User CP:

• Forum subscriptions: Does anyone subscribe to entire forums?
  
• Custom user titles -- they're fun and cute, but really unnecessary. Users already have a username, avatar, and signature to express themselves.
  
• Contact information: IM is not very popular anymore. Users can exchange this information through PM, anyway. Networking and blog sites are more important.
  
• Away information. Most people don't use it even when they're gone, or forget to turn it off once they're back.
  
• Hide me from who's online: Not sure why you'd want to do this especially since people can still see the last time you visited.
  
• Hide your e-mail from other members: Since I've disabled e-mail sending through the board, we don't need this.
  
• Only receive private messages from users on my Buddy List: it's dangerous to use this when buddy list uptake is so low, so it's gone for now.
  
• Notify me by email when I receive a new Private Message: I've disabled big notifications. The inbox icon at the top of the page simply gains an unread marker.
  
• Default thread subscription: This is not around for now, but there are plans to add it back once notifications system is up.
  
• Date/Time format: The format I picked is fine. Who cares about stuff like this?
  
• DST settings: If you live in a place that has DST, you probably use it.
  
• Almost everything from Thread View options is gone. As an administrator, it's my job to decide what the best user experience is.
  
• Other options: none of these are useful for me.
  

What we're left with is a lean profile system that fits the profile and settings onto a single page. So far, nobody has lamented any of the missing things. I suspect most users don't care about them. Your mileage may vary.

Sadly, avatar, signature, username, password and e-mail are still broken off into separate pages since I couldn't find an adequate solution. Would love to do it via modal.

Profile




The profile is another extreme weak point of MyBB. I've made it a lot sleeker and simpler by removing useless information and focusing more on user-submitted information than statistics. This approach is much more human. I'd like to introduce some type of activity feed in the future.

---

Messaging




The PM system -- which I've renamed to the more appropriate "Messaging" -- is really inadequate. Sadly, it's impossible for me to introduce threaded PMing, which is a bit shocking considering a forum is literally threads of responses unified by a single subject. Nonetheless, I've done some cool things.

• PM notification bar is gone -- instead, an unread message counter will show next to your Inbox in the header if you have new messages. Read it when you feel like it.
  
• We have a nice new nav, totally separated from the User CP nav. Four easy to understand options, with two secondary options underneath. The class of each setting changes if you're currently on that page.
  
• Your friends are shown at the side via an iframe. Users who are offline have faded avatars.
  
• Thanks to Omar G, you can now see a preview of each message! Anything within quote tags is automatically stripped out, leaving you with only the respondent's message.
  
• The entire row of each message is a clickable link.
  

Unsurprisingly, the message page follows the design language established elsewhere. Including a Quick Reply PM plugin here makes responding much faster.

---

For now, that's all I have to show. There were other things done too, such as making the language file much friendlier, but there's not much to say about that here.

Everything I've done here is something pretty much anyone can do. If you're a theme author and would like incorporate my ideas and/or code into a theme you are building, I'd like to collaborate with you, so please get in touch with me. My goal is to release a beautiful, high quality theme to be used as a "foundation" for admins to customize and make their own.

Thanks to ...

• Yumi and RateU from MyBB Hacks -- without them, almost nothing you see here would have been possible.
  
• Omar G for his support and, in particular, the plugin for message previews.
  
• Pirata Nervo for the development of the Haralooks plugin.
  
• Tomm M for his MyNetwork Post Rep plugin and his continued support.
  
• Yaldaram for his support and custom plugin development.
  
• My staff member, Galism, for creating some new iconography and artwork.
  
• Font-Awesome's great icon library.
  

I look forward to hearing everyone's thoughts on this!

Great post brad. I must admit I haven't quite had time to read it all, but I've skim read it and what I saw looked god. I'll have a proper read later.

I like how you're removing crap - I've generally thought there to be too much anyway.
You'll probably get plenty of positive feedback, so I'll just focus on my criticisms:

• How well does the signup page work with Javascript disabled? In particular, I suspect Javascript is being used to display the "Username", "Password" etc text, but what happens when it's disabled? Only other method I can think of is HTML5 placeholders, which isn't supported in any stable version of IE anyway. Actually, it may be possible with hacky CSS, but I wouldn't be so sure IE supports that either.
  
• The 'error: log-in' page partially serves the purpose of notifying users that they need to log in. If I click on a link to a thread then a login page comes up, it can be confusing - at least having a message clarifies why I cannot see the thread. A short message should be suffice - no need for all the bullet points (though the bullet points in this post is required)
  
• Paging links - MyBB's suck in the forumdisplay, but you should make them bigger. Not everyone has perfect skills with a mouse, so make the click target larger. Especially useful for people browsing on touchscreens
  
• Your new thread seems to favour widescreen monitors, as you've mentioned - true that they're becomming commonplace (though not universally, eg iPad is 4:3) but not everyone has their browser fullscreen'd
  
• MyBB's standard for submit buttons is to have them below the form and centered. I suppose you've switched them everywhere to be on the right column (except profile page)? Interesting to note is that the new reply, it's aligned to right-bottom, whilst in quick reply, it's right-top. Not a UX concern, but just being anal about consistency.
  

• Quote:The postbit controls are faded out until you hover over them

  Just note that hover effects aren't viable with touchscreens
  
• It's interesting that you changed a "single column" layout to "two column" for your new thread page, but did the opposite for the profile page. Change for the sake of change?
  
• You've got yet another layout for the private messaging. I would consider that PMs should resemble the forumdisplay layout, but you've got the new thread button on the top-right, but new PM button on the top-left. The author/subject is a little confusing as there's no obvious distinction between the two. I personally prefer your forumdisplay layout.
  
• Stripping out cruft is fun, yes, but some things that may seem useless could be nice to keep. Stuff like thread view counts may be mostly pointless, but can provide interesting statistics for users (not just the topic creator), just like images, colours etc. Not really a UX issue, and different people will have different tastes, but perhaps something to keep in mind.
  

Hope that gives some ideas.

This thread has definitely given me some new ideas to go along with my old ones, like editing the "No Permissions" pages. Thanks brad!

As Yumi points out there are some weaknesses to your designs, Brad. But, ultimately, this is a perfect example of how to customise MyBB to your genre. While some of your changes might not be suitable for some I hope others realise that you can push the boundaries of what you can do with a forum to make it truly unique.

From a professional mode; if you released a forum software that behaved with your changes, I think you'd be getting people asking for the things you've removed. Maybe when 2.0 comes along with shared activities, improvements to reputation, a centralised User CP and a much better profile your changes will feel much more at home in a forum.

(2012-07-10, 10:20 AM)Yumi Wrote: [ -> ]How well does the signup page work with Javascript disabled? In particular, I suspect Javascript is being used to display the "Username", "Password" etc text, but what happens when it's disabled? Only other method I can think of is HTML5 placeholders, which isn't supported in any stable version of IE anyway. Actually, it may be possible with hacky CSS, but I wouldn't be so sure IE supports that either.

Actually, I am using the placeholder element -- and I wasn't aware of IE's abysmal support for it. I guess I'll hit the drawing board again on that.

Quote:The 'error: log-in' page partially serves the purpose of notifying users that they need to log in. If I click on a link to a thread then a login page comes up, it can be confusing - at least having a message clarifies why I cannot see the thread. A short message should be suffice - no need for all the bullet points (though the bullet points in this post is required)

I'm not sure if you miswrote, but just in case, this window would never come up (on my implementation) when clicking on a thread. Only on actions -- e.g. New Topic, Post a Reply, Quote, would it appear. That said, I like the idea of adding an error message, though I wouldn't be satisfied to add it unless I could customize it for each attempted action.

Quote:Paging links - MyBB's suck in the forumdisplay, but you should make them bigger. Not everyone has perfect skills with a mouse, so make the click target larger. Especially useful for people browsing on touchscreens

The page numbers are about the same as in the default, but the arrows are too small, I agree.

Quote:Your new thread seems to favour widescreen monitors, as you've mentioned - true that they're becomming commonplace (though not universally, eg iPad is 4:3) but not everyone has their browser fullscreen'd

I don't have my browser full screen either, but it downscales pretty nicely. There's room for improvement on the downscaling though. I'll continue to work on it.

Quote:MyBB's standard for submit buttons is to have them below the form and centered. I suppose you've switched them everywhere to be on the right column (except profile page)? Interesting to note is that the new reply, it's aligned to right-bottom, whilst in quick reply, it's right-top. Not a UX concern, but just being anal about consistency.
It's interesting that you changed a "single column" layout to "two column" for your new thread page, but did the opposite for the profile page. Change for the sake of change?

It's not change for the sake of change as much as it is change depending on the context. For the New Topic, it's easy to fit all of the content on the screen with zero scrolling, but it's not possible for the User CP. What I would like to do actually is have the Save Changes button floating on the right and follow the user's scrolling. I wasn't satisfied with the implementations I could come up with, but I'll continue to work on it.

Quote:You've got yet another layout for the private messaging. I would consider that PMs should resemble the forumdisplay layout, but you've got the new thread button on the top-right, but new PM button on the top-left. The author/subject is a little confusing as there's no obvious distinction between the two. I personally prefer your forumdisplay layout.

There's definitely too many interaction models here. I'm not totally happy with the message design yet. I should note however that the "full" editor resembles my posting pages more closely.

http://i.imgur.com/LpPd6.png

Quote:Stripping out cruft is fun, yes, but some things that may seem useless could be nice to keep. Stuff like thread view counts may be mostly pointless, but can provide interesting statistics for users (not just the topic creator), just like images, colours etc. Not really a UX issue, and different people will have different tastes, but perhaps something to keep in mind.

I agree, and I'll come back to this in a second.

(2012-07-10, 10:55 AM)Tomm M Wrote: [ -> ]As Yumi points out there are some weaknesses to your designs, Brad.

Well, I never expected there wouldn't be, haha. This is the first pass at building a better foundation, and I plan to iterate on it when I find ways to make improvements. I think overall, though, it has less weaknesses than the current MyBB designs.

Quote:But, ultimately, this is a perfect example of how to customise MyBB to your genre. While some of your changes might not be suitable for some I hope others realise that you can push the boundaries of what you can do with a forum to make it truly unique.

From a professional mode; if you released a forum software that behaved with your changes, I think you'd be getting people asking for the things you've removed. Maybe when 2.0 comes along with shared activities, improvements to reputation, a centralised User CP and a much better profile your changes will feel much more at home in a forum.

I agree that releasing this as-is would be a disaster waiting to happen, and my goal here wasn't to say, "All of these things are useless and you should get rid of them," although some of it is. But ultimately it depends on the audience you're serving and what the priorities are for your site. A webmaster forum would probably find this interface way too simple, and some people genuinely like things like view counts.

Of course, at some point admins have to make decisions to cut things that some people may like. There is no such thing as no compromise.

What I really want from this is for people to get inspired. Forum admins are generally pretty lazy and expect everything to be perfect out of the box. This attitude needs to change. To run a great site, you need to put more work into making it your own.

Quote:How well does the signup page work with Javascript disabled? In particular, I suspect Javascript is being used to display the "Username", "Password" etc text, but what happens when it's disabled? Only other method I can think of is HTML5 placeholders, which isn't supported in any stable version of IE anyway. Actually, it may be possible with hacky CSS, but I wouldn't be so sure IE supports that either.

If you have JavaScript disabled it just takes you to member.php?action=login. The other login panel kinda gets in the way because the JavaScript is not hiding it anymore, but that can be fixed. The average Joe who pops up on fashion forums doesn't know how to disable JavaScript anyway.

For real, people who disable Javascript is not a huge concern for me when half of the site's functionality (e.g. liking posts) relies on Javascript.

Great thread with a lot of useful tips to make it better for users who are not experienced with forums. Your mixed reviews come from that we are all admins too but I do agree with what you have done here!

One of the things I love the most that you did was simplify the registration page. I'll be spending some time editing mine as well to make it simpler and more fun, rather than a flurry of options and preferences. I mean, members can change those later as well.