1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Implemented The position of key buttons next to the breadcrumb

Discussion in 'Closed Suggestions' started by Grover, Aug 31, 2010.

  1. Grover

    Grover Well-Known Member

    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:

    wrong position of key buttons in XF.png

    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
     
    Margit, s2k, AlexandrosD and 12 others like this.
  2. Shanj

    Shanj Well-Known Member

    Yes I definitely think your approach is better Grover.
     
  3. Rob

    Rob Well-Known Member

    I think perhaps grover has a point but ONLY for the sake of existing users of forums because they have been preconditioned to the location of such buttons.

    That said however, the new thread button did take me a while to discover and you have to cater for people like me or I'll cry.
     
  4. Shanj

    Shanj Well-Known Member

    Yes it took me AGES to find it. I thought my membership was in some kind of newcomer status and I couldn't start a thread - I was waiting for an email to say my registration was completed.

    Then one day I found it. I was not very happy about that delay!
    Methinks som e will not bother ....
     
  5. Kier

    Kier XenForo Developer Staff Member

    The buttons next to the breadcrumb require restyling to make them more distinct, but I'm sticking with the placement until we have evaluated their visiblity with the updated style.
     
    Forsaken and Shanj like this.
  6. Shanj

    Shanj Well-Known Member

    Thanks Kier for the info.
    I do want that new thread button moved west though. For a Western right hander (the majority) it's intuitive to look left for key controls. Stuff on the right feels like extras or options rather than basics.
     
  7. Shadab

    Shadab Well-Known Member

    I agree that these call-to-action buttons placed to the right of breadcrumbs are not outright obvious. Although the design and location of the buttons is quite consistent with the design & layout; they blend into the design so much that we don't really take notice of it.

    Changing their location would be one possible solution. Ensuring that it's consistently placed on multiple pages (like forumdisplay, thread pages, conversations, etc) is important.

    If changing the location is difficult, then the buttons can be made to stand-out in their current position when looking at the overall page. This can be easily achieved by changing the colors of the button: background, text color, text shadow, etc. I experimented with the shades of orange that are prominent in the xenForo design, making the button's colors same as that of the quote box:

    CallToAction_Buttons.png

    Something like this would be in contrast to almost everything else in the header as shown in the mockups attached below. And they don't really look terrible. :)
     

    Attached Files:

  8. Kier

    Kier XenForo Developer Staff Member

    That's along the lines of what I was thinking about, Shadab, though I would use a gradient and some shadowing to make them look extra-buttony.
     
    Forsaken and Shadab like this.
  9. Forsaken

    Forsaken Well-Known Member

    Liked for the usage of buttony!
     
  10. Shanj

    Shanj Well-Known Member

    Oh well that's me stuck with a template edit to put it at the centre.
     
  11. Dean

    Dean Well-Known Member

    The picture in post #1 scares me. I could easily have 10 subforums, under a forum where posting is allowed. The new thread button would be quite far from the threads.
     
  12. Grover

    Grover Well-Known Member

    Thanks very much to look into it! For me, XF is already near perfect when it comes to the UI, except this (for me obvious) issue of these key buttons being placed outside of the context of user processes.


    ^this remark of Shadab is very clearly explaining the issue.

    Although this is in itself already an improvement indeed, it is still something that tries to 'work around' the fundamental misplacing of those buttons. Changing the colors does make them more visible, but in both my examples it would still not solve the issue of the buttons not being placed there where they belong: as close to the context of user processes.

    In both my examples I am afraid I have to do the same. It is not such a problem for [Reply to Thread] (a third example) for instance, because we have a 'Reply' link on every single posting. And we have the QuickReply box beneath the thread. But in the 2 key examples above... the [Post New Thread] and [Search Threads and Posts] buttons are the ONLY way to access important functionality. Key functionality that is: posting new threads is the core of a forum. And searching for those threads is obviously also essential functionality.

    I am looking forward to Gold.
     
  13. Shadab

    Shadab Well-Known Member

    The new button looks good. [​IMG]

    Although I'd prefer if the hover states were reversed:
    ie, light background by default, and a darker background on hover.
     
    Peggy likes this.
  14. Floris

    Floris Guest

  15. Kier

    Kier XenForo Developer Staff Member

    FWIW, I did originally have the hover state reversed, but it was nowhere near noticeable enough.
     
    Enigma likes this.
  16. Floris

    Floris Guest

    Seriously, this is the final design for that button? :( Oh well, it can't be 100% awesome all the time.
    Sorry to sound so negative about it.
     
  17. Kier

    Kier XenForo Developer Staff Member

    The old button didn't look like a button. What would you suggest?
     
    Enigma likes this.
  18. Floris

    Floris Guest

    The problem that I have with it isn't so much that the old one was better, they were obviously not clear enough - as known - but the new ones look like a copy paste from a web site that offers free css buttons.

    It's like you go to Steve Jobs with the Android and he goes 'great prototype, now let's make this into an Apple product'. The button isn't "xenforo" - you didn't quite 'nail it' just yet.

    I'd have to try a bunch of things out before I can just go 'this is what I would do', but currently while it does stand out more, it feels like it is either too much, too dark, or just doesn't feel xenforo, for me personally, it just feels like a step back actually.

    I will spend some time on this tonight and see if I can come up with something.
     
  19. Brogan

    Brogan XenForo Moderator Staff Member

    As a test, can you try it with the hover state reversed but use a darker colour instead of the very light blue?

    Perhaps the same blue as in the 2nd level menu bar #65A5D1 ?

    Edit: D'oh! Ignore me, it already is.
     
  20. Kier

    Kier XenForo Developer Staff Member

    This is the current CSS - what changes do you want to see?

    Code:
    a.callToAction
    {	
    	display: inline-block;
    	
    	line-height: 20px;
    	height: 20px;
    	
    	background: white;
    	border-radius: 6px;
    	border: 1px solid @primaryLight;
    	padding: 2px;
    	
    	box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
    	outline: 0 none;
    }
    
    	a.callToAction span
    	{
    		padding: 0 15px;
    		
    		display: block;	
    		border-radius: 3px;
    		background: @primaryMedium url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x center -7px;
    		
    		font-weight: bold;
    		font-family: @button.font-family;
    		font-size: 11px;
    		
    		color: @textCtrlBackground;
    	}
    	
    	a.callToAction:hover
    	{
    		text-decoration: none;
    	}
    
    		a.callToAction:hover span
    		{
    			background-color: @primaryLightish;
    		}
    	
    	a.callToAction:active
    	{
    		box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    		position: relative;
    		top: 2px;
    	}
     
    Dimka Linux and mjp like this.

Share This Page