Accessify Forum Demos
I've now uploaded a few demos, as mentioned yesterday. Very bare but they illustrate the general direction a new front-end could go in.
Share: 
This is my personal preference, but I really hate the columns view.
But then I don't like the other layout either, I prefer having a fairly standard forum layout.
The idea for the Most recent (or 'Latest') page might be a good idea. Would that be in addition to a standard 'latest posts' function?
my mind is on a permanent tangent
Share:
My vote (and thanks for the work btw Cerb) is for more space between elements than that shown at the links above. More vertical space (padding as twere) that is.
It would help hugely re readability for me.
(as is now is good in that respect)
[edit - just saw the column veiw and have to agree I'm afraid.
I might humbly suggest a devision of labour. Ben, you seem like you know markup backwards, but do we have someone whos main focus by trade is graphic designer? Let then make mock-up, then you build, Ben?
Just as suggestion, and not a slight at your skills Cerb.
]
Share:
Good lord, you could eat your dinner off that markup! It's clean as a whistle after a dramatic encounter with a tub of Brasso!
Did you remove some padding between the divs between tonight and yesterday? I seemed to remember there being gaps of white which I can't see now. (I prefer it without the gaps.)
I'm going to differ from Rich, and say that I quite like the non-standard message layout. One of my big bugbears with the traditional BB-style arrangement is that not only does it waste a big column of space just for the author's name, but that it often contains quite a lot of pointless extra stuff where you could just have the name and date. My favourite board has profile, email, private message, edit (even for posts you're not allowed to edit!) and quotation links above every post, and each is followed by information such as when a user registered, how many posts they've made and a link to report their post. So I very much like the cut-down layout with the name and date at the top, plain and simple. At most, I would say that you might consider including links to quote (saves plenty of keystrokes!), report (to help battle the spam) and link (handy for reference purposes) to individual posts at the end of each, but certainly no more than that.
I agree that some more padding (or maybe some line-height) would not go amiss, but for me there's something else which more directly impacts readability: there isn't quite enough contrast between the blue h2 background gradient and the somewhat darker blue background text, at least not at that font-weight. Changing the font-weight to bold for the h2s significantly improved readability, at least to my eyes. (Try it and see if you agree!)
Quick question: how are you indicating the current subforum within a topic? (Currently the site uses breadcrumbs, which I confess is one of my favourite orientation techniques.)
I really like where this is going, and think we're going to finish up with a board to be proud of. Good work, Cerbera!
Share:
These are just brainstorms in a teacup, so any feedback is gratefully received! 
I've only viewed them in Firefox 2, so they probably look wrong in IE, Opera, Safari and so forth.
| Rich Pedley wrote: |
| This is my personal preference, but I really hate the columns view. |
- On the homepage:
- Saves vertical space.
- It stays in a grid pretty well at 1024x768.
- Wraps naturally at 800x600.
- Opens out sensibly at 1,600x1,200.
- Saves vertical space.
- In topics:
- Line lengths become more normal.
- Stays in rows but shorter messages get a big gap below them.
- Doesn't save much scrolling.
- Line lengths become more normal.
- All columnar demos:
- Require an N-shaped reading pattern for 2 columns and M-shaped for 3-columns.
- F-shaped reading pattern is natural. A single column of main content fits that better.
- Columnar main content is unusual on the web.
- Require an N-shaped reading pattern for 2 columns and M-shaped for 3-columns.
| Rich Pedley wrote: |
| I prefer having a fairly standard forum layout. |
| jordan wrote: |
| One of my big bugbears with the traditional BB-style arrangement is that not only does it waste a big column of space just for the author's name, but that it often contains quite a lot of pointless extra stuff where you could just have the name and date. |
I'm figuring out what might go on each page to making them more useful. Specific feedback helps with that!
| Phil Teare wrote: |
| More vertical space (padding as twere) that is. |
| jordan wrote: |
| I agree that some more padding (or maybe some line-height) would not go amiss, [...] |
| jordan wrote: |
| Changing the font-weight to bold for the h2s significantly improved readability, at least to my eyes. |
| Phil Teare wrote: |
| Let then make mock-up, then you build, Ben? |
| jordan wrote: |
| Good lord, you could eat your dinner off that markup! |
| jordan wrote: |
| Quick question: how are you indicating the current subforum within a topic? |
| jordan wrote: |
| consider including links to quote (saves plenty of keystrokes!) |
Share:
Hello Ben,
There is one point I'd like to make: readability.
Line lengths of more than 12 to 15 words make for very difficult reading.
Often the topics are here are quite technical and do require fairly careful
study. Coming from a long-time use of messaging, going back to the days
of Compuserve, I still press return at the end of lines to preserve that
kind of readability.
When dealing with accessibility, the point here is not to strain the eyesight
of visitors, while I notice you have concerns in over-use of vertical space.
While I'm not sure about the columns view, they do provide much better
readability, especially for speed-reading. The drawback with them will
probably come when code examples are shown because there won't be
enough horizontal width.
Although I have a screen wider than 1024px width, I very rarely expand
my browser beyond that width. I guess that's because my preference is
still for reading pages in portrait rather than landscape format, but then
I'm just aged and old-fashioned.
Power to your elbow Ben - I don't envy you your task...
With Season's Greetings,
Share:
| Cerbera wrote: |
| I'm in two minds about it. How about when something useful is alongside a topic, such as the new *-reply demo? |
I like it, Ben. In fact, I really like it. Maybe even love it.
- Perhaps most importantly, it solves one of the most annoying problems of composing replies—the need to browse through previous posts—without forcing you to scroll away from your response; in fact, you can compose your reply side-by-side with the post you're responding to, which makes it very easy to reorient oneself as to the original context. (I could use it right now, in fact.)
- It fixes the rather inordinate line-length of the single-column view, which is something I was trying not to mention since you had plenty of feedback.
- Far less unsettling (it would take a while for me to be more specific, sorry!) than the columnar view.
If you wanted to make this extra fantastic, you could also have a nice Javascript feature which would quote the selected text, complete with author and neat link to the post. (Does our board software support citing a link with a quotation? I know some boards do.) Your markup should make the DOM magic for this much less nightmarish than I imagine it could be for other boards.
| Quote: |
| The demos use line-height: 1.5 which is the same as here, afaict. Please be specific! Small screenshots with side-by-side comparison, for example. |
Below I've included a very small image showing some of the changes I was thinking of.
- Added some padding below the h1.
- Bold font-weight for h2, and added some top/bottom padding.
- Added a margin below the h2.
You don't need to go for exactly what I've listed above, but these alterations improved my perception of readability and vertical rhythm. Another couple of suggestions (not pictured) are to add some padding under the address element containing the originator of a quotation (interesting choice, by the way—why not cite?), and perhaps increase the bottom-padding of the post div by a few tenths of an em.
| Quote: |
| The cleanliness of the HTML is a feature I want the real system to have. |
Mission accomplished, I would say!
| Quote: |
| Bold text in navigation bar. I thought it was obvious. |
I thought that might be what it was indicating, but it seemed incorrect that there should be only five subforums and no categories! Looking at the home page I can see that is indeed the case. I guess you want to streamline things a lot more than I expected in the next version!
Last edited by Jordan Gray on 16 Dec 2008 12:19 pm; edited 1 time in total
Share:
yeah sorry I should explain a bit more -so I'll go through each example.
http://projectcerbera.com/!dev/accessify/2008/viewtopic-12563-cols
My instinct is to read this newspaper style, left column, then right column. So this page disorientates me - severely. Even more so when you consider that posts will be of varying lengths.
Also with a design like this how would you cope with < pre >? Where would the quote link go? Also what about extra moderation links on a per post basis?
also:
http://projectcerbera.com/!dev/accessify/2008/viewtopic-9828-cols3
I have to scroll up and down more frequently to read the longer posts.
http://projectcerbera.com/!dev/accessify/2008/viewtopic-11292
better, just not my personal favourite. To me though it looks like a step back, and not 'flashy' enough. My personal preference is to have all the user stuff on one side - though even I'd agree that a lot of places have too much junk in there. To me the important things are:
name,
member/moderator/guest
and possibly:
number of posts,
location,
date of joining
I actually think an contact/email link is also important, but not everyone will agree with me over that one.
And yes I know all these details would be available in the profile.
http://projectcerbera.com/!dev/accessify/2008/home-recent
As a quick reference page that isn't bad, and looks a lot better than some I have seen. But the look of that one should fit in with the others, so I'd have to reserve judgement until later on.
http://projectcerbera.com/!dev/accessify/2008/home-cols
same as above - but this one could work as is. Specifically as it just the 5 most recent messages for each.
http://projectcerbera.com/!dev/accessify/2008/viewtopic-12563-login
&
http://projectcerbera.com/!dev/accessify/2008/viewtopic-12563-reply
Don't like the non-scrolling form - can't quite grasp 'why!' for that one. On first visit to the page it also makes me think I no longer have to scroll, because I am mentally assuming the form is at the bottom of the page...
my mind is on a permanent tangent
Share:
| Quote: |
| My instinct is to read this newspaper style, left column, then right column. So this page disorientates me - severely. Even more so when you consider that posts will be of varying lengths. |
Thanks—you've perfectly articulated my feelings. I don't have much to add except that the columns make the thread seem a little discontinuous and piecemeal, instead of flowing steadily. It's a good idea, but it's just too jarring for me.
| Rich Pedley wrote: |
| number of posts,
location, date of joining |
There are a couple of reasons I don't like these. One, they seem like unnecessary information; nice to know, sure, but not really important. Second, things like "number of posts" and "joining date" are probably meant as indicators of someone's authority… But really, far better metrics exist, e.g. how well-presented one's advice is, and the reaction of other posters. Simply, I can't help but feel they detract a little from the exchange of ideas.
Of course, that's a rather personal reason, but I do like the idea of moving away from all those little widgets and datapoints which pollute other message boards. I agree that individual moderation links are very useful, but most others I'd be happy never seeing.
| Quote: |
| Don't like the non-scrolling form - can't quite grasp 'why!' for that one. On first visit to the page it also makes me think I no longer have to scroll, because I am mentally assuming the form is at the bottom of the page... |
Think about it, though, Rich. Let's say you want to remind yourself of the original context of a particular sentence you're quoting. Do you scroll down to read it, or… Why not just look to the side and see the text, verbatim and properly-formatted?
It makes so much sense after a little while. Seriously, pretend you're replying to one of those posts, and think about how much easier it is than having a little iframe squished into the bottom of your screen—especially if your screen isn't that big!
I honestly think it's a great idea and will make the site stand apart. Sure, it has an initial "yikes" factor the first time you see it (I suppose you feel about it a little like I do about the columns), but this is one that certainly won't take long to become familiar with. I'm already wishing that was how we typed replies now!
Share:
on a reply screen, where traditionally the thread is repeated below, then I might be persuaded - however I think that a 50/50 split between form, and thread. might be worth looking at. probably ending up somewhere around the 33/66 mark.my mind is on a permanent tangent
Share:
(I had a power cut while writing this and Firefox lost the data. Please excuse me if I'm curt.)
| jordan wrote: | ||
|
- Your Profile for people who are signed in, replaced by Register or Log In for everyone else?
- Members would be the member list.
- Statistics may be too frivolous?
| Peter_LT wrote: |
| Line lengths of more than 12 to 15 words make for very difficult reading. |
| jordan wrote: |
| [...] the rather inordinate line-length of the single-column view [...] |
| jordan wrote: | ||
|
| Rich Pedley wrote: |
| To me the important things are: name, member/moderator/guest |
| jordan wrote: | ||
|
| Rich Pedley wrote: |
| On a reply screen [...] I might be persuaded. [...] Probably ending up somewhere around the 33/66 mark. |
- Merging the reply page into the topic pages makes replying more convenient.
- Using position: fixed on the reply form has all the advantages jordan mentions.
- Quote button would go at the right-hand end of the heading for that message. Streamlining with scripting sounds good but is beyond me.
- Controls for moderators and users shown in the viewtopic-*-mod demo, although incomplete.
- The demos put some instructions in the message box so you can get a feel for using it.
I've made a viewtopic-*-preview demo. The page would scrolled down by having #preview at the end of the URL when you preview it. I guess Edit could work like this, too? Maybe script a Live Preview feautre to make the Preview button unnecessary?
The viewtopic-*-login demos is what a guest should see when they try to add a reply. If they provide credentials which match an existing account, they get logged in and their message is added. Otherwise, they are sent to a Register Your Account page. (I haven't made a demo for that page yet.)
| jordan wrote: |
| Does our board software support citing a link with a quotation? |
My demos make the date and time a link to that entry. I think the number of entries per page should always be constant and large. It's a usability win in normal-length topics and lets normal fragment links work in any length of topic.
Forum Area Demo
Namely, the area-* demos. Clicking a date would give you a list of messages from that date from all areas. Try clicking checkboxes in the area-*-mod demo. Fitt's Law ftw!
Last edited by Ben Millard on 16 Dec 2008 08:28 pm; edited 1 time in total
Share:
Hi Cerbera,
If you wouldn't mind indulging me: could you add another demo page with the following Javascript referenced? (It shouldn't matter where, but my preference is at the bottom, like Yahoo!'s performance guidelines suggest.)
(Code removed by Cerbera. It's now in jordan's resizable <textarea> demo.)
It adds a quick preview of one of the features I suggested above: a resizeable reply field. It's not terribly well implemented (I hacked it together in spare minutes without a library), and certainly not bug-free (only works properly in Firefox), but it gives an idea of what I was talking about.
I got some way through an implementation of selectable quotations, too, and I may be able to make it work given a little patience. If you'd like, when the HTML is finalised, I could work on polishing a few of these Javascript features. I'll insist upon a library, though! 15K isn't much to pay for jquery's (gzipped) power.
PS: since you're a moderator, and since that's a lot of code, feel free to edit it out once you've grabbed it.
Share:
Anyone is free to create derivative works from my demos. Especially for scripting tests!
Resizing of form controls should be provided natively in the browser, imho. I know Firefox has the Resizeable Textarea Add-on since I use that a lot when on Accessify. Sadly, it seems Resizeable Form Fields got snuffed out.
(EDIT) The <textarea> now fills the available vertical space in all viewtopic-* demos. Yay CSS fixed positioning!
Added a bit more spacing around <h1>, <h2> and the "Foo wrote:" text.
(EDIT 2) Added an area-*-topic demo. This applies the UI for replying in viewtopic-* demos to creating a topic in an area-* demo.
Last edited by Ben Millard on 17 Dec 2008 08:39 pm; edited 3 times in total
Share:
It's a little late, so I'm restricting myself to just a quick explanation:
| Cerbera wrote: |
| Resizing of form controls should be provided natively in the browser, imho. |
Unfortunately, it doesn't work with a fixed position reply form. Without Javascript, there's no way to resize it such that the form won't hide the replies to the right if resized horizontally—the left margin on reply divs needs to be dynamically updated. Also, native support exists only in a handful of browsers (effectively, those based on Webkit) which account for perhaps seven percent of current market share—I expect it will be significantly higher for this site, but I doubt it will be more than a fifth.
Share:
Oh, you want it to work like splitter control. Well, the <textarea> is now full-height in pure CSS when using Firefox 2. It covers so much area that horizontal sizing seems unnecessary! But feel free to download a page and the CSS from my demos to try out any ideas you have.
As the direction for these demos becomes clearer, the CSS is getting smaller and more consistent. Still not figured out getting message controls positioned nicely outside of the moderator view. Correct source order and minimal HTML is a must...this ain't MediaWiki! float: right; and position: relative might work.
Lots more demos yet to be made. The current member list looks like it could be radically simplified. Perhaps even display it like a tag cloud? Oh wait, The Big Bang Theory is about to start!
(EDIT) I picked up a fever during the evening of the 18th. Might be a bit slow doing more updates.
Share: