Drupal Articles » Public Info for Neverside Development » Screenshots » Screenshots of a forum topic/thread


By David - Posted on 28 February 2009

These are screenshots of a topic/thread on the new site, as well as various features and elements.

The first is a full-length screenshot of entire sample page (so the file is quite large, about 1MB):
http://www.davidnewkerk.com/files/img/forum-topic-p1.png

I've taken the advice given by James as well as various others into account, and (compared to the previous example) tried to improve the contrast in some problem areas such as the inactive tabs and the footer. I decided to add a subtle glow below the tabs/logo region of the header to enliven and warm up the colors a bit. In case anyone has a concern about the color of the inactive tabs - I have a version with brighter tabs, and tested it with everyone I could get to look at it... they all preferred the version shown in this example over the brighter inactive tabs, however I'm open to continuing to try additional versions.

The following two smaller images are from page 2 of the topic. At the top left of sub-pages of a topic, there is a toggle link which causes the text of the initial post to be displayed for reference if desired:
http://www.davidnewkerk.com/files/img/forum-topic-p2.png
http://www.davidnewkerk.com/files/img/forum-topic-p2-toggle.png

A few other items worth pointing out/explaining:

  • There is a "Mark as Answered" link in the left side of a topic's primary post. This option is visible to the original topic's creator and the staff/moderators, but not other users. When making a forum topic, a checkbox is available that lets you mark the topic as a question (as compared to random talk or whatever). When checked, the topic will additionally be included on a separate "Unanswered questions" listing, so those looking to help someone can browse the list (down the line I hope add a user points system to incentivize helping other people, the earned points being possible to exchange for... well I haven't got quite that far yet haha). Once a question has been answered, the user (or a moderator) can click the "Mark as Answered" link to toggle its status instantly with AJAX (or if clicked accidentally or if the question needs to be re-opened, clicking again reverses the change).
  • I've added tabs for "Community" and "Groups". The Community page may be something I'll actually wait until post-release for, but down the line will be a central section bringing together the latest and best from all the various facets of the community, art, information, blogs, etc. This isn't a big priority for the moment. The Groups on the other hand will be part of the initial release. This will harness Organic Groups - I'll tell you more about this a bit later (in the mean time, there are some example links on the project's page to sites that use it).
  • I've removed a few of the icons that were listed alongside "Post new topic" and the other links in the previous screenshot. Instead, I've decided to unify a collection of important links to provide quick access to the majority of a user's personal "stuff" on the site, making these links available at all times throughout the site, in the same place, at the top right of the screen. I've labeled this the User panel. This top right corner (and the menu below it, described below) is essentially meant to be "the" place where a user can look when the want to do something (such as create new content) or find something (bookmarked pages, friends, messages, etc). The remaining custom icons for Post new topic as well as one for posting a Poll have been remade with improved sharpness.
  • Directly below the User panel, the "local menu tasks" appear. What shows here depends on the context and the permissions of the user. If a user is the creator of a given page, they may have an Edit option here. Depending on the type of page (e.g. besides forum topics) additional options may appear here. Moderators/admins will see Edit at all times, as well as a variety of other options such as a link to send the current topic into the Featured Discussions listing. For those familiar with Drupal and curious - I've done away with the View tab.
  • I've changed the Search forum topics link to "Search discussions" since the link will slide out a form that searches both the forum as well as group discussions.
  • The Post reply form includes buttons for easily inserting or wrapping selected text with HTML. Basic HTML tags are permitted and filtered, no more BBcode. Clicking some buttons opens a small modal dialog box for entering the required data, and other buttons (such as for Headings) toggle a clickable preview of the heading sizes. There is also a Preview button with which the post can be seen instantly in rendered HTML, to screen for accidental errors. I don't have time right now, but I'd like to spend a little more time down the line either finding or making some of the buttons better (since it's a bit mix-and-match right now... though the original buttons were horrendous haha).
  • Avatars are 100x100px (larger images can be uploaded by the user, and will be scaled and cropped automatically if needed). There is also a selection of default avatars I made for people to choose from (more can be added as well). Old NS avatars won't be coming along to the new site, as most are significantly smaller than 100x100.
  • There's a Private Message system, and a link below each user's avatar/name to send them a PM.
  • The first post in a topic is highlighted in blue. Subsequent posts by the topic's author are also highlighted in the same way.
  • Users can "Report" posts as abuse, spam, etc. Moderators are shown a list of flagged topics, comments, and users so they can act accordingly. See a small screenshot.

Anyhow, I hope you guys like it, and as always let me know your feedback and ideas.

Tags — 

That looks really great, I'm getting very excited to see the finished product. That design is very well done, it's inviting and easy on the eyes. At first I was kind of skeptical about going with a CMS for Neverside, but after doing research and some of my own work with Drupal and realizing it isn't just a CMS, but more a great framework, it seems that it was the right choice. Keep up the great work, I'll be checking back on a regular basis waiting for the release!

Looks fantastic! I can't wait to try it out!

Dave, this is looking really excellent, and certainly surpassing any forum designs I've seen out there. It still needs some work in the details though.. The header looks better, but the first thing that caught my eye were the inactive tabs. They look anacronous, reminiscent of a tab style we've already seen. Because of this, they don't flow well with the rest of the design. Keep messing around with them and I think you will get it. Another small thing is that the contrast is too low for the text and current tab. A darker grey will work fine here.

The main posts look great and I like how you've recognized the Original Poster with a blue background for his post. From your "abuse" screenshot, I see you have the box overlapping the underlying post boxes; this looks kind of tacky. I think a more elegant approach would be to fade the "Report abuse" text into the green box that said "Flagged for Staff Review". I'm sure you've seen this before on other website, and you could use this is other areas of Neverside as well. As a usability issue, it always pisses me off going to different websites trying to go through the pages of content. Please put the links for the different pages of the thread at the top and bottom, and make the "previous" and "first" and "next" and "last" links always show up on the left and right sides, respectively. This gives a uniform place for the link even though the number of pages may change per thread.

The footer really looks like you just threw it together. Some attention should be paid here too. Perhaps looking at some really great footers will spark your imagination: http://www.smashingmagazine.com/2008/04/08/footers-in-modern-web-design-... . For now, I would space out the columns evenly and so they line up with the grid of the rest of the website.

The right sidebar looks all wrong.. I think you should abandon the all-encompassing box that extends to the bottom for separate boxes for each header-ed section. Right now, the headers look good, but they don't stand out because they're set inside the box. I actually wrote a post about the "share this" box but lost it and it didn't post. Basically, tweak the whitespace and grid layout and it will look fine.

Keep up the good work Dave!

David's picture

Thanks for the feedback James :)

Re: tabs
I'll try a little darker text on the active tab. Unless I get (or get pointed to) a cool idea, I'm going to leave the rest of the tabs as is "for now". I could get hung up on it for a long time (already too long) and I don't want to delay finishing the site. I'm open though to you or anyone pointing me to examples of what might be cool, or even if you want, I can give you a .psd of the tabs to let you try a few ideas on (in fact here's the tabs psd). If you or anyone send me some visual examples of what you have in mind, or even make new tabs, etc, then I'll consider changing them ahead of release. After release I'll still be open to collaborating on the design as well.

Re: abuse text/message
Unfortunately the overall behavior here is largely dictated by the Flag module which powers this feature. You can see in the flag module sample image from the project page, how the text of the flag link fades/toggles between a "do this" and "undo this" kind of state, and a message appears below the link after it's clicked. I can ask/look into more advanced theming options for the output, though I can't promise there'll be an immediate solution. If not, then I can submit a feature request for the module, or one of our own PHP guys can submit a patch even to add the option (I'm sure they'd accept it).

Re: pagers
Though it's not an available feature by default to put pagers at the top (dunno why), I believe I've found some code snippets to do this, and I'll try them out (it "is" a feature in the Advanced Forum module, but I'm not using that, as I'm trying to make the forum "the right way" not just emulate vB/phpBB/etc). Another issue on this is figuring out how to get it to work in the design without borking the layout... any ideas would be welcome. So far as the format of the pagers themselves, see the bottom of page 2 of the news on drupal.org to view how they are output. Page 1 pagers are a bit different (they don't have back/first, since you're on the first page already). This looks to me like it does what you're explaining, though let me know. I wouldn't doubt that how they are output is possible to modify (most of everything in Drupal is), though I'm not sure how. On a side note regarding pagers, I've made ours a bit bigger than normal, partly to cure a pet peeve of mine... on some sites the pagers are so small you have trouble even clicking them with a mouse (not the case in Drupal, but in general). Since I use the web on my iPhone and friends/family's other mobile phones so much I've also become aware that pagers are incredibly hard to click the right one (e.g. by touch, stylus, etc). So I've made them a bit bigger and with a little extra margin between each to accommodate this a little better. Of course down the line there can be a mobile style sheet too/instead (though at least on the iPhone I do like being able to still "use" a site without being forced to use a mobile version).

Re: footer
Though it hasn't had quite the TLC of some other areas, I can assure you I didn't just throw it together ;) It's been rather difficult to get it to behave nicely in this fluid width setup. In any case I'm looking at the example link you sent. As I mentioned with the tabs, I'm open to collaboration on the design, so if you have specific ideas, or want to do a bit of work on the footer (now or after release) that would be awesome. I'm spread pretty thin right now (particularly since taxes are approaching and I won't have enough to pay 'em unless I do some other jobs haha), so any specific help would be appreciated. If you'd like to rework the footer, or even just do a rough sketch/wireframe of what you might like me to do, that would be very cool. Let me know if you'd like to do this... if not I'll still try to find someone to throw some ideas/samples at it.

Re: sidebar
Is what you mean, wrap each block with the box/background (in the way the top "share this" area is), but separate them, and drop the faux column? Would you say wrap it with the current box, keeping headings in them as is, or rework the boxes to include the faded-corner aspect of the heading? One thing I've noted (before I added the faux column) was that the below-the-fold forum posts felt a little drab and offset without the color of the sidebar there. One idea I may try is wrapping the full content/sidebar area (e.g. below the breadcrumbs) in a div with a subtle background color (kind of like this design which I saw from the Footer designs link you gave)... dunno, worth a try to see how it looks, and see if it resolves the drab/offset issues that exist without the sidebar without causing new issues of its own.

Re: share this box
I see some issues which I think you're referring to. Will tweak.

Anyhow, again thanks for the feedback. I hope you'll consider throwing a few ideas or mockups my way for the tabs and footer, though if not it's ok.
Talk to you soon :)

David's picture

Thought a bit about how to pull off the top pager in the layout, without messing up the flow of things... here's my idea (so far):

1) Take away the "Search discussions" link/icon from where it is, and either make it part of the "Share this" block, or alternately (since I'm not sure if or how I can work it in with the Share this stuff) I might try adding the "Search discussions" option into the top right of the secondary nav bar (possibly with a more subtle or no icon), below the search form... which of course adds the benefit of keeping the "search related stuff" placed in the same area. This will cause the remaining two links/icons to fit above the right sidebar.

2) At a reduced size (I think), add the pagers at the top right of the content area (so it would be: breadcrumbs to the left top edge of the content area, pager to the right top edge of the content area, and the two remaining post topic/poll links above the sidebar).

Thoughts?

Holy shit dude, awesome.

Dave, this is looking really excellent, and certainly surpassing any forum designs I've seen out there. It still needs some work in the details though.. The header looks better, but the first thing that caught my eye were the inactive tabs. They look anacronous, reminiscent of a tab style we've already seen. Because of this, they don't flow well with the rest of the design. Keep messing around with them and I think you will get it. Another small thing is that the contrast is too low for the text and current tab. A darker grey will work fine here.

The main posts look great and I like how you've recognized the Original Poster with a blue background for his post. From your "abuse" screenshot, I see you have the box overlapping the underlying post boxes; this looks kind of tacky. I think a more elegant approach would be to fade the "Report abuse" text into the green box that said "Flagged for Staff Review". I'm sure you've seen this before on other website, and you could use this is other areas of Neverside as well. As a usability issue, it always pisses me off going to different websites trying to go through the pages of content. Please put the links for the different pages of the thread at the top and bottom, and make the "previous" and "first" and "next" and "last" links always show up on the left and right sides, respectively. This gives a uniform place for the link even though the number of pages may change per thread.

The footer really looks like you just threw it together. Some attention should be paid here too. Perhaps looking at some really great footers will spark your imagination: http://www.smashingmagazine.com/2008/04/08/footers-in-modern-web-design-... . For now, I would space out the columns evenly, and so they line up with the grid of the rest of the website.

The right sidebar looks all wrong.. I think you should abandon the all-encompassing box that extends to the bottom for separate boxes for each header-ed section. Right now, the headers look good, but they don't stand out because they're set inside the box. I actually wrote a post about the "share this" box but lost it and it didn't post. Basically, tweak the whitespace and grid layout and it will look fine.

The first post in a topic is highlighted in blue. Subsequent posts by the topic’s author are also highlighted in the same way.

This I consider sexy. Looks awesome Dave!

Looks great! Can't wait til' it's finished.

Any updates on this?

I used to be a member at Neverside.com. Now it's 2012 and I've wondered when Neverside.com will re-open again?