Navigation

The Right Order of Links on Your Navigation Bar

There’s a new Digg design and everyone wants to give their opinion about it. Some users like it, some hate it, but for me, I am more interested in what we can learn from the their new user interface.

Order of Global & Local Pages

There are two major design flaws I spotted in their navigation. The first one is with the order of their tabs. They chose to put “My News” before “Top News”, which is completely backwards. “Top News” is a global page that all users have access to whether they log in or not. It is also the default start page, which is why it should go first. “My News” is a local page that is accessible only if you are a registered user and logged in. Thus, it’s not relevant to users until they log in, which is why it should come after “Top News”. Putting the “My News” tab first makes users feel like they aren’t on the home page when they first enter. Instead, it feels like they entered the URL wrong, especially when the URL address defaults to “digg.com/news” instead of “digg.com”.

A best practice to follow is to put global menu items before local menu items in navigations. Global items are used more often than local items, since local items are only relevant to a limited number of users at a given time. By putting global menu items first, you’ll follow an order that feels more natural to users.

Separating Non-Related Buttons

The second design flaw with Digg’s navigation are the scope buttons that filter stories. When I initially looked at it, I didn’t realize “Top in 24 hours”, “7 Days” and “30 Days” were all related, and that they filtered the stories by popularity. Since they all dealt with time and were grouped with the same visual weight it led me to believe that they filtered stories by the time they get published. However, “Most Recent” is the only one that solely filters stories by time and not popularity. What would make this more clear is if the “Top in 24 hours”, “7 Days” and “30 Days” buttons were grouped together with a line that separated “Most Recent”.

Another best practice to follow is to group together items that function similarly and to separate items that function differently. This makes it clear to users how closely related items are when they are next to each other, so that they don’t misinterpret them.

Digg is still fixing bugs and making changes to their site. Who knows if they will fix these issues. Regardless of what happens to their site, these are valuable lessons on navigation design that we all can learn.


Book

Affiliate

elegant wordpress themes

This Post Has 9 Comments

  1. Viper Beam Reply

    Lets be serious here.
    No one changes the way we drive cars. The new digg has essentially put the gas pedal on the roof, the wheel faces backwards, people sit in the trunk and there is one 1 tire on the hood. No-one can use the new system effectively. Hello Reddit for me…

  2. Paul Reply

    My News is arguably still a global item, it is always there, for non logged users it encourages them to log in or register, which is likely there motivation.

    To me local means that an item is not always present on the menu, and therefore the position of the global item could potentially change position, causing confustion, this is not the case at digg.

    On the second point, you greatly over simplify the function of “most recent”. It is not just the most recent, it is populated using a algorithm, taking into account time, diggs, and comments.

    There is arguably a difference between that and the “top in x days” options, but it’s quite subtle, they do effectively have the same function and i don’t see any problem with them being grouped as the y are at the moment.

    • anthony Reply

      That’s not how I’m defining local and global. You’re arguing over semantics. Try to understand the concept.

      I think you are overcomplicating what most recent really means. Most recent means most recent. That’s it. If a site doesn’t give you the most recent items when it says most recent then there’s a problem with the algorithm. Systems should do the things they say.

      There is a HUGE problem with not grouping the popularity filters better. Their labels all relate to time, but one filters by TIME ONLY and the others by popularity. It’s important to make this clear.

  3. John Reply

    I agree, the way a interface is designed, it can change the user’s navigation and feeling of the website.

  4. cbsides Reply

    I agree with your assessment that the new design violates a couple common UI patterns, but I don’t think I’d categorize them as design flaws. I was expecting a slightly different article from the intro, “I am more inter­ested in what we can learn from their new user interface.”

    • anthony Reply

      The nuggets are in the article. I’ll pull them out for you in case you didn’t see.
      1. Order – make sure navigation tabs are ordered (left to right) by what’s global to the user to what’s local
      2. Grouping – Similar content filters can be grouped together horizontally, but if they perform different actions with the content visual separation should make this distinct.

  5. Andrew Reply

    Thanks for the post, interesting stuff! In terms of the tabs, it sounds like what you’re actually saying is that they’ve made a strategic mistake, not a UI mistake. Just like on sites like Twitter and Facebook, they want the main homepage to be the local page, and they expect the majority of their users to be logged in while they use the site. They don’t see it as just another feature. Digg, apparently, wants the fundamental usage pattern of the site to change from being just a place for browsing and Digging to being a place where it’s a better experience when you’re logged in and are aggregating stories from your favorite sources.

    Simply reversing the tabs wouldn’t make the UI correct.. For logged in users, the ‘My News’ is the homepage, (when you click the logo, you go to ‘My News’) and as such, it should be on the left, not the right.

    I agree that the tab positioning isn’t ideal at all. But how do you make the UI correct for a scenario where:

    1. the global page is primary for the non-logged in user
    2. the local page is primary for a logged in user
    3. in the logged in experience, you still need prominent access to the global page.

    That’s a much harder design problem to solve and I don’t see a quick fix from where they are now. But thanks for the post, very thought-provoking!

  6. Adam Kochanowicz Reply

    I would take this a step further and say that the “My News” shouldn’t be on that side of the page at all. I’m used to seeing personal options on the right side of the page, next to “Account.”

    On the other hand, this tab is meant to be a personalized version of the global (design-wise) news tab, so perhaps your intuition is correct.

    “…makes users feel like they aren’t on the home page when they first enter.”

    Bingo.

  7. Nathan Reply

    What about instances where the global information isn’t actually the most relevant, especially in cases where the user is already logged in and the personalized content is the main focus?

    In an interface for a social site I’m redesigning, the “global” tab shows ALL public posts from ALL users on the entire system. This may be interesting to some people, but should not be first, nor should it be the default view. Most users would probably only want to focus on posts by their friends (socially “local”), so that should be given prevalence. It would seem that the better rule would simply be consistent progression that emphasizes progress in the direction intended, whichever direction might that might be. As long as scope leads from limited to unlimited, local to global, small to large (or vice versa in each case), it should be fine as long as the sequence is best suited for the context.

    One instance where this breadcrumb hierarchy is horribly broken is when viewing an individual photo on Facebook. The links above the image are “Back to Album · John’s Photos · John’s Profile”. That sequence is completely backward.

    It really should be something more like: “John’s Profile > John’s Photo Albums > Back to This Album”

Leave a Reply to Nathan Cancel reply

Your email address will not be published. Required fields are marked *