Implemented The position of key buttons next to the breadcrumb

[Grover]

I am gonna to have a break from XenForo in the time to come. I just want to put the following in the limelight, because I feel it is or will become an issue when using XenForo. I think XenForo is (almost) perfect when it comes to the UI/UX, but I feel this could need some attention before XF becomes Gold.

I am talking about the position of key buttons like [Post New Thread] or [Search Threads and Posts] next to the breadcrumb. I believe this is a fundamentally wrong position and I will show why I think that.

[Search Threads and Posts]
First, there is this example about the [Search Threads and Posts]-button:
http://xenforo.com/community/thread...ics.2082/#post-30259

The [Search Threads and Posts] button there is more or less unrecognizable as a button that should be pressed to get more search options. It gets overlooked, very understandably, by endusers. To prevent it from being overlooked, it has to be put more into the viewpoint of the enduser. And that means... as close to the information-area as possible, there where the eye-focus of the enduser is. Meaning: in the center of the screen (right above the search input fields for example), not somewhere in a corner where it is not visible/clear/intuitive enough.

[Post New Thread]
The same problem occurs when users need to post a New Thread, as pointed out by Shanj in the following discussion where a visual example is posted in:
http://xenforo.com/community/thread...ead.2538/#post-41403

Needless to say that this can become obviously problematic. I don't know how XenForo displays multiple subforums underneath each other, but I could imagine it would be like this:

I believe a good UI should make it as easy/intuitive as possible to post a thread. Posting threads is THE BASIS of forums in the first place. That's why I find it a bit remarkable that XenForo puts the KEY button for this in a really counter-productive and non-intuitive position. A button with such an importance should be placed right there where the focus of the endusers-eye is, the moment he/she wants to post a new thread. And that is as near to the existing threadtitles as possible.

Those are my last constructive suggestions I will put out for a while (XF is near perfect in it's UI/UX for me). Hopefully M&K can share a part of this vision and re-think a bit the positions of those key buttons. I believe it will make XF better.

Keep up the good work (developers + community) and see you again after XF Gold's release!

Grover.

Please do [like] this first posting if you think it is a good feature suggestion for XenForo

 

[erich37]

don´t worry, all my posts are either offensive or insulting

 

[dutchbb]

So it seems

 

[Defqon]

View attachment 3185

[Edit: changed call to action button to submit button, credit to Kier.]

I like this idea more than the "Post new Thread" button .

 

[khurt]

What about this
View attachment 3185

I had a really good initial reaction to this mockup ... Thought it looked great. People are probably looking for a way to post new thread from the top of the page rather than the bottom (in other words, they most likely wouldn't scan the entire thread list before looking for the button to start a new one). I like that what you've done is small enough to sit up at the top and not be completely overwhelming.

The thing I like about the version I made is that the user could conceivably create his entire thread from the threadlist view without visiting the advanced page unless they needed to add a poll or something. Putting all that stuff at the top of the page would be bulky. I agree with you there.

Perhaps Mike & Kier could come up with something similar to what you've mocked up, but expand it when the user starts typing a thread title. So, to elaborate:

1. If the user clicks the "post new thread" button in your mockup without supplying a title, they are taken to the advanced thread creation page
2. If the user starts typing a title, the area below the title box is expanded to present the user with the options typically found in quick reply. This allows them to create the text of the initial post of the thread without leaving the threadlist.

 

[erich37]

what about if the user starts typing the thread-title, then the area expands and shows all other options for writing a new thread (including Poll-options and all the other options we have for creating a new thread) ?

 

[erich37]

What about this

View attachment 3185

[Edit: changed call to action button to submit button, credit to Kier.]

thinking about it now, it is actually a great idea, dutchbb !
maybe change "Type thread title" towards "Type title of your New Thread" ?

 

[dutchbb]

Yeah it was just a quick mockup so I spend little time at details. The only problem that I have with it myself is that it's less clean than it is now...

 

[erich37]

what about putting that Title-field above the paging ?

 

[TrixieTang]

If you're going to remove the reply button from the top of threads then you might also want to remove it from the top of Personal Conversations so it will be consistent.

 

[erich37]

If you're going to remove the reply button from the top of threads then you might also want to remove it from the top of Personal Conversations so it will be consistent.

Agree to this !

The "Reply to Conversation"-button (located at the Bread-Crumb) at "Personal Conversations" should be removed.

That button is highly confusing.......

 

[Grover]

Agree to this !

The "Reply to Conversation"-button (located at the Bread-Crumb) at "Personal Conversations" should be removed.

That button is highly confusing.......

Count me in. It is as unnecessary as the [Reply to Thread] button was indeed.

 

[dutchbb]

Wouldn't miss it either, never used it. 'Reply' or quick reply are perfect on their own.

 

[Kier]

FWIW, I just implemented the tabbed search form UI, as I planned to do for ages but never seemed to get around to. It will be in Beta 4.

 

[Grover]

well, for the "Search" I anyway do not understand why there are 2 different search screens ? The "Search" and the "Search Threads and Posts".

It seems there are only a few search-options added when hitting "Search Threads and Posts".
Are those 2 different search-screens required to be separated or can those be merged into just one "Advanced Search"-page ?

http://xenforo.com/community/search/
http://xenforo.com/community/search/?type=post

Erich, I decided to put this question into a new discussion: http://xenforo.com/community/thread...everything-and-search-threads-and-posts.9449/

 

[Grover]

FWIW, I just implemented the tabbed search form UI, as I planned to do for ages but never seemed to get around to. It will be in Beta 4.

Thanks very much for listening to all the feedback in this interesting UI discussion. It has definitely made XF better:


■ [Search Threads and Posts]
The [Search Threads and Posts] button is now gone and replaced by convenient [tabs]:

old (incl. improvement suggestion)


new



■ [Reply to Thread]
The unnecessary [Reply to Thread] button is now gone.


■ [Reply to Conversation]
The unnecessary (and confusing) [Reply to Conversation] button is now gone also.


■ [Post New Thread]
That only leaves us with the [Post New Thread] button, still visible next to the breadcrumb. My vision for XenForo is that the product should get rid of all the buttons next to the breadcrumb, because that position is fundamentally 'wrong':


(real-life example here: http://xenforo.com/community/forums/bugs/)

I am hoping to see this last one button re-positioned in XenForo 1.0 Gold, then I believe the excellent UI of this product is near-perfect .

(■ [Start a New Conversation]
PS: not so important as the [Post New Thread]-button (because on the PC overview there are no sub-forums, so the position stays the same every time), but for consistency (and usability) reasons, please also change the position of the [Start a New Conversation]-button in the same way as the [Post New Thread]-button.)

 

[Grover]

Here are some examples how it will look when the important [Post New Thread]-button is moved to the left:

(Current design)
-



Example 1
-


Example 2-


Example 3
-


Example 4
-


Example 5
-


-
Take your pick...

 

[Paul B]

I'm afraid I don't like either of those.

The first one introduces another row of mostly white space with a tiny button on the left.
The second one just looks like someone made an incorrect template edit.

One possible place for it would be alongside the other links; Mark this forum read, etc.

But even then I'm not sure it would look right.

 

[Grover]

I'm afraid I don't like either of those.

The first one introduces another row of mostly white space with a tiny button on the left.

Yes, I was also a bit 'worried' about that. That's one of the reasons why I created Example 2.
However, Example 1 is still a big improvement over putting the [Post New Thread] button all the way to the right, next to the breadcrumb, as proven by the mockup here. I can do with this extra white space if it gives me the button back where it belongs: as close to the threadtitles as possible.

The second one just looks like someone made an incorrect template edit.

Not sure what is so incorrect about it. I like it... it is positioned close to the threadtitles and it makes the whole screen layout 'compact'. In other words: it prevents the white space that Example 1 comes with.

One possible place for it would be alongside the other links; Mark this forum read, etc.

But even then I'm not sure it would look right.

To be honest, that would be much worse then the examples I gave. Aesthetically it would look bad and at the same time it would position the button too much to the right. Again, the whole point of my advice is to get the button there where the user-interaction takes place: and this is: as close to the threadtitles as possible .

 

[Paul B]

Not sure what is so incorrect about it. I like it... it is positioned close to the threadtitles and it makes the whole screen layout 'compact'. In other words: it prevents the white space that Example 1 comes with.

Well for one it pushes the word "Title" out of alignment with the actual thread titles.
It just looks wrong.

To be honest, what would be much worse then the examples I gave. Aesthetically it would look bad and at the same time it would position the button too much to the right. Again, the whole point of my advice is to get the button there where the user-interaction takes place: and this is: as close to the threadtitles as possible .

Looks like we'll have to agree to disagree (again).

When I post a new thread, my mouse isn't over to the left where the thread titles are, more usually in the centre.
So moving it to the left or right makes no difference to me.

Given the choice, I prefer the current layout to any of the alternatives proposed thus far.

 

[Grover]

Well for one it pushes the word "Title" out of alignment with the actual thread titles.
It just looks wrong.

Well... I just added a third example. Look at it and not to be nitpicking, but the word 'Title' is not quite aligned in the original/current XenForo design either. It is aligned to the blue dot instead of the actual beginning of the Title...
I thought about the same when I first created the mockup, but this alignment argument doesn't really stand.

Looks like we'll have to agree to disagree (again).

No problem! That is what discussion are for .

When I post a new thread, my mouse isn't over to the left where the thread titles are, more usually in the centre.
So moving it to the left or right makes no difference to me. Given the choice, I prefer the current layout to any of the alternatives proposed thus far.

Are you aware of the screenshot I posted here? I started out like that for a reason... the whole point of this suggestion is to make it perfectly clear that the positioning of the button on the right is fundamentally flawed. (3 of them have already been removed by the developers partly thanks to our feedback). Imagine what would happen if our platform (which we want to be powered by XenForo) consists of lots of subforums (and my platforms happen to have that). Do you seriously prefer something like that to any of the 3 examples I posted above? That is a bit puzzling to me.