New postbit coming!
After several days of thinking and sketching (and re-thinking), I've put together a new postbit template (the postbit is the template that gets repeated for every post on the site: name, avatar, message content, buttons, etc).
Below I've attached screenshots of a sample post in the current template and the one I plan to switch to this weekend.
Here's a breakdown of what I did and why I did it.
===============================================
Left-justified the name, user title, avatar, and post count
Having the names line up makes it easier to peruse who posted in a thread, and it creates a standard-width margin on the left. I can then use this margin for special icons or indicators, e.g. to mark where the author of a news item replies in the comments.
Removed staff name-bolding, "Admin" title, and Team icon
The name bolding is a too-subtle distinction for staff. Also, I may use that left margin again to add a "staff" icon or indicator of some sort. If you want to pimp your F@H, use your sig
It doesn't need to be mandatory in the postbit. Alternatively, I may add some sort of icon under sigs to the far left of the Quote buttons. Hmm, more thinking...
Reduced the blue dividing bar to a line
Removes clutter from the thread without sacrificing the "landmark" of the post seperator. I may make it thicker still; I'll have to look at it more in-context with multiple/long posts.
Removed the post # and indicator icon, linked the date/time
The post # is extraneous information, and linking the date/time instead is a convention across the web, including Twitter. The date/time will bold for new posts instead of a special icon in the top left.
Moved "Edit" and "Report" to top right and made text links instead of buttons.
In the last six years, I've hit "Edit" instead of "Quote & Reply" about 500 times (and I don't think that's an exaggeration). That's crappy usability. The Edit link matches the front page and takes up less space, away from the "main" buttons that everyone is gunning for. Also, it takes some of the visual weight off the row of buttons. This is good because the buttons aren't the point of postbit - it's about the content!
===================================================
Overall motivators
The postbit should be about posts Most of these changes serve to focus attention on the post's content rather than all the gizmos surrounding it. It should also, overall, reduce the length of discussions.
Very importantly, it creates a very legible and clean template that can be easily replicated on the front page and in the blogs. I will be recoding it in semantic HTML rather than it being table-based (very 2001), too.
"Well crap, what DIDN'T you change?"
The personality of the site, of course. Having 100px avatars, user titles, and unrestricted signatures that are customizable from day 1 sets a very different tone on Icrontic than anywhere else on the web, and I suppressed my desire for order and spartan design in favor of making sure the individuals of our community still have plenty of space to shine through. :bigggrin:
The focus of this redesign was usability, readability, and portability without changing what makes this Icrontic. I'm rearranging the furniture but not throwing away your favorite sofa.
Below I've attached screenshots of a sample post in the current template and the one I plan to switch to this weekend.
Here's a breakdown of what I did and why I did it.
===============================================
Left-justified the name, user title, avatar, and post count
Having the names line up makes it easier to peruse who posted in a thread, and it creates a standard-width margin on the left. I can then use this margin for special icons or indicators, e.g. to mark where the author of a news item replies in the comments.
Removed staff name-bolding, "Admin" title, and Team icon
The name bolding is a too-subtle distinction for staff. Also, I may use that left margin again to add a "staff" icon or indicator of some sort. If you want to pimp your F@H, use your sig
It doesn't need to be mandatory in the postbit. Alternatively, I may add some sort of icon under sigs to the far left of the Quote buttons. Hmm, more thinking...Reduced the blue dividing bar to a line
Removes clutter from the thread without sacrificing the "landmark" of the post seperator. I may make it thicker still; I'll have to look at it more in-context with multiple/long posts.
Removed the post # and indicator icon, linked the date/time
The post # is extraneous information, and linking the date/time instead is a convention across the web, including Twitter. The date/time will bold for new posts instead of a special icon in the top left.
Moved "Edit" and "Report" to top right and made text links instead of buttons.
In the last six years, I've hit "Edit" instead of "Quote & Reply" about 500 times (and I don't think that's an exaggeration). That's crappy usability. The Edit link matches the front page and takes up less space, away from the "main" buttons that everyone is gunning for. Also, it takes some of the visual weight off the row of buttons. This is good because the buttons aren't the point of postbit - it's about the content!
===================================================
Overall motivators
The postbit should be about posts
Most of these changes serve to focus attention on the post's content rather than all the gizmos surrounding it. It should also, overall, reduce the length of discussions.Very importantly, it creates a very legible and clean template that can be easily replicated on the front page and in the blogs. I will be recoding it in semantic HTML rather than it being table-based (very 2001), too.
"Well crap, what DIDN'T you change?"
The personality of the site, of course. Having 100px avatars, user titles, and unrestricted signatures that are customizable from day 1 sets a very different tone on Icrontic than anywhere else on the web, and I suppressed my desire for order and spartan design in favor of making sure the individuals of our community still have plenty of space to shine through. :bigggrin:
The focus of this redesign was usability, readability, and portability without changing what makes this Icrontic. I'm rearranging the furniture but not throwing away your favorite sofa.
0
Comments
Edit: The edit link also seems in a weird place, maybe its just me though :/
This is what I'm thinking. It doesn't look as cool, but it opens up all kinds of options for other stylistic visual cues that wouldn't look right centered.
The thin bar will take a bit to get used to, but I like all the changes.
The blue divider... I'd like a bit more than what you have in the second but less than current would be fine. As long as there is some space before and after the divider... maybe attach a new snapshot of how multiple posts look with the new style. See how it all looks with multiple posts.
The post number was useful because it was a hyperlink to the individual post, so if you wanted to link somebody to a specific reply, it was a snap. Can we reproduce that functionality in some other fashion if we're going to remove the post number?
Aside from that, I'm digging everything else. Like others, a thicker separator would be nice, but it's not world-ending.
It looks like the link is going on the timestamp instead.
@Q: You can always tell people to read a certain date/time, instead. It's not as easy to type out, but it's more accurate, more contextually relevant, and matches conventions in other media.
How is a time/date format more accurate than a single number?
Das ist gut!
NEEDS MOAR BAR!
Just kidding. Looks lovely. If I were a man I'd kiss you.
Matt, looks fine with the thicker bar.
LIN
Nice work, Keebs! I have a feeling the forums are going to look really clean after the template change.
/me chuckles.
/me panics and raaaages.
Just a note, not a complaint.
Edit: ah, the time stamp is in bold if it's unread. It's comparatively harder to see when I'm scrolling by quickly, but I can live with it.