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

Lack of Interest Cleaner reduced header with same functionality

Discussion in 'Closed Suggestions' started by Marcus, Sep 25, 2011.

  1. Marcus

    Marcus Well-Known Member

    In my xenforo installation, I removed the header left line (Home ... Help) and the second line (Mark Forums Read ... What's New?) completely. It serves no purpose to me, there is too much clutter. This is the screenshot explaining all the redundant elements (some are even left out).

    redundant.PNG

    • Search forums -> SEARCH...
    • Home -> Home (navigation)
    • Forums -> Forums (navigation)
    • Community logo -> Community title -> Community link rewritten as "Home" (navigation)
    • Log Out -> Username dropdown
    • Members is a one of the less used element in every community. Great for spambots.
    • Watched threads <-> What's new are similar and should be combined
    Suggestion: Combine all these redundant elements into one for each redundance group. As a general rule, prefer the navigation bar (Home > Forums). Concentrate on reducing vertical width (widescreen users -> moves content to the top).
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    You're confusing lots of different elements there, from the logo to the navigation bar, to the breadcrumbs, to the board title.

    There are good reasons why all of these separate elements exist.

    It's clear from your recent suggestion threads that you want a completely stripped down interface, but don't expect a lot of these suggestions to make it into the core, as they are your personal preference.

    Those are my comments as a user/customer, not a moderator.
     
  3. Marcus

    Marcus Well-Known Member

    Brogan, thanks for your feedback! You are definitely right - I am interesting in a completely stripped down interface while having the exactly same functionality.

    I have opened this suggestion for discussing it. Of course general opinions like "I don't like your suggestion in general or I like your suggestion in general" are also nice. Do you have arguments for or against my suggestions? For me being completely new to xenforo it is also important to learn about the general design ideas behind this software.
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Well my main point is to do with the elements having separate functionality.

    The logo for example can be used to link to the forum or a separate home page.

    The navigation bar elements are common throughout all pages and allow quick navigation to any page from any page.

    The breadcrumbs allow navigation within the same hierarchy, and are also used for SEO microdata.

    The board title is also used for SEO as it is the H1 title.
     
    Marcus likes this.
  5. Marcus

    Marcus Well-Known Member

    Thanks for the insights to the current xenforo design.

    • The last microdata should always be H1. You can very easy achieve this by "css h1: display:inline". I see the latest element is always displayed large as separate element under the breadcrumbs. That's also good. For forum start page, the breadcrumbs should be Home > Community Forums (as H1). Or Home> \n Community Forums. The first would be only consistent if xf design would not create outstanding last breadcrumbs as it does corrently. The last one is consistent with the current design but looks bad. The current implementation looks good but is not consistent with only displaying the latest breadcrumb once - large below the breadcrumbs. Instead the latest breadcrumb ("Community Forums") is displayed within the breadcrumb, too. See screenshot screenshot.PNG . The middle element should not be displayed with the current xf design philosophy - from what I understand.
    • As my suggestion is to mainly use the breadcrumbs to display nodes, SEO microdata would be in my suggestion also (as the H1 see above).
    • Don't both the logo and the "Home" not always point to the same link target? Then both can be combined, at least on non-start-pages like forum start page or home start page.
     
  6. Digital Doctor

    Digital Doctor Well-Known Member

    You might be able to achieve what you are after from the solutions in this thread.
    http://xenforo.com/community/threads/eliminate-the-breadcrumb-in-non-forum-areas.5949/

    Overall, a design philosophy that both vBulletin and xenForo both share (much more so than other forum software) is:
    pro navbar (even a subnav bar!!)
    less menus

    This would definitely create the "clutter" you
    I've also suggested moving the Members and Help Tabs.

    Note: There is a move by Microsoft away from menus towards a Context-dependent button bar. A button bar's design is not dissimilar to the navbar/subnav bar.
     
    Marcus likes this.
  7. Marcus

    Marcus Well-Known Member

    Digital Doctor, very interesting. I removed the header with the exception of the (1) logged-in user links on the top right and the (2) general search box. The navigation is completely removed. I achieved this by changing template navigation to
    Code:
    <div id="navigation" class="pageWidth">
    <xen:edithint template="navigation.css" />
    
        <div class="pageContent">
            <nav>
    
    <!-- -->  <xen:if is="{$visitor.user_id}">
    <div class="navTabs">
        <ul class="publicTabs">
    
            <!-- home -->
            <xen:if is="{$showHomeLink}">
                <li class="navTab home PopupClosed"><a href="{$homeLink}" class="navLink">{xen:phrase home}</a></li>
            </xen:if>
    
            <!-- extra tabs: home -->
            <xen:if is="{$extraTabs.home}">
            <xen:foreach loop="$extraTabs.home" key="$extraTabId" value="$extraTab">
                <xen:if is="{$extraTab.linksTemplate}">
                    <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
    
                    <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                    <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>
    
                    <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
                        <div class="primaryContent menuHeader">
                            <h3>{$extraTab.title}</h3>
                            <div class="muted">{xen:phrase quick_links}</div>
                        </div>
                        {xen:raw $extraTab.linksTemplate}
                    </div>
                </li>
                <xen:else />
                    <li class="navTab {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                        <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                        <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                    </li>
                </xen:if>
            </xen:foreach>
            </xen:if>
    
            <!-- extra tabs: middle -->
            <xen:if is="{$extraTabs.middle}">
            <xen:foreach loop="$extraTabs.middle" key="$extraTabId" value="$extraTab">
                <xen:if is="{$extraTab.linksTemplate}">
                    <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
    
                    <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                    <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>
    
                    <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
                        <div class="primaryContent menuHeader">
                            <h3>{$extraTab.title}</h3>
                            <div class="muted">{xen:phrase quick_links}</div>
                        </div>
                        {xen:raw $extraTab.linksTemplate}
                    </div>
                </li>
                <xen:else />
                    <li class="navTab {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                        <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                        <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                    </li>
                </xen:if>
            </xen:foreach>
            </xen:if>
    
            <!-- extra tabs: end -->
            <xen:if is="{$extraTabs.end}">
            <xen:foreach loop="$extraTabs.end" key="$extraTabId" value="$extraTab">
                <xen:if is="{$extraTab.linksTemplate}">
                    <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
    
                    <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                    <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>
    
                    <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
                        <div class="primaryContent menuHeader">
                            <h3>{$extraTab.title}</h3>
                            <div class="muted">{xen:phrase quick_links}</div>
                        </div>
                        {xen:raw $extraTab.linksTemplate}
                    </div>
                </li>
                <xen:else />
                    <li class="navTab {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                        <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                        <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                    </li>
                </xen:if>
            </xen:foreach>
            </xen:if>
    
            <!-- no selection -->
            <xen:if is="!{$selectedTab}">
                <li class="navTab selected"><div class="tabLinks"></div></li>
            </xen:if>
    
        </ul>
    
        <xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>
    </div>
    <!-- --> </xen:if>
    
    <span class="helper"></span>
    
            </nav>
        </div>
    </div>
    I thought of only using breadcrumbs.

    I like the idea of context sensitive button bars very much. The xenforo "button bar" on top is the same for forum view, thread view etc. It should change for a thread. If you see a thread, there should be thread options. If you view a forum you should see forum options. You get the idea :)
     
  8. Floris

    Floris Guest

    Having read only 50% of this thread, I agree that the "twitter top bar" approach to mixing up the logo of a site with the main tabs, can result in a clutter free header. However, there won't be space for the majority of boards then to have a bigger header, or space for adsense sized image/text-column advertisements.

    Having the page therefor with the UI of

    [header]
    - [logo] [ads]
    - [tabs]
    -- [tabs: submenus]
    - [breadcrumbs]
    - [current page]
    -- [current page: description]
    [end header]

    will make more sense.

    The "twitter" approach would be:

    [header]
    - [logo] [tabs]
    - no ads, no submenu, no breadcrumbs, no mention of current page]
    [end header]

    Ads are then forced to alternative positions, such as the content. But they have their own dedicated spots.

    Submenus are forced to not be visible until perhaps hovered over, undesirable in a community setup with a lot of features.

    Breadcrumbs are important on a community setup, merging it with the title actually complicates this UI.

    The UX that twitter enforces works, their content IS your frontpage.
    This UX of twitter does not work on a community.

    If you have no home page, the home tab isn't needed. You can remove members tab if you're not interested in sharing that. Or move it to the forums sub menu. You could replace Help-tab with (?) a help icon. Or move it to the footer.

    The fact in my opinion remains that the UI is demanding for a vertical structure, despite that it clutters up the header.

    Things like 'log out' appears to be very important to people to have. And from a security point of view: has my support to be separate. However, in my personal preference I would certainly remove it, push it into the user-bar in the top where you first logged in (now lets you log out), or just under the personal account dropdown.

    Decluttering the tabs an their sub links can help you achieve an easier navigation of the site. But that only applies to sites that go for a clean interface and require no additional links to additional sections.

    Yes, members tab can be moved under forums, but you compromise by removing certain links.
    No, you can't really put "arcade" or "gallery" or "blog" or "chat" as a sub link under a tab, or under the forums tab, you end up cluttering that line up. Having a tab called "Sections" with them as a dropdown might work, but isn't inviting.

    Compromising the UI has a direct result on the UX, and the default setup of xenforo supports the average forum usage, with flexibility through customization to get what the exceptions want.
     
  9. Marcus

    Marcus Well-Known Member

    This is how it looks with the change in template navigation (template edit from post #7) for guests:
    screenshot.png

    And for logged in users:

    screenshot logged in.png

    Still some work to do, the breadcrumbs will be removed on forum start page completely. I just like how clean it looks.
     
  10. Floris

    Floris Guest

    How does your audience know where to go now?
     
  11. Marcus

    Marcus Well-Known Member

    (1) The breadcrumb is displayed on every page with the exception of the start page.
    (2) In addition, the bread crumb has the redundant (or additional-functional) navigation popup.
    (3) Furthermore, the footer includes the breadcrumbs a second time.
     
  12. Floris

    Floris Guest

    Where can I find help, or a list of members to see who the top posters are?
     
    Marcus likes this.
  13. Marcus

    Marcus Well-Known Member

    You don't. You would ask in my personal help forum where your threads are private. You don't see top posters :)
     
  14. Floris

    Floris Guest

    Ok. I understand.
     
    Marcus likes this.

Share This Page