V5 UI: Top Navigation Bar, part 1

Published December 18, 2009
Advertisement

Today I'm going to begin talking about V5's top navigation bar. The navbar is really going to be your primary means for getting around the site, so it's important that we get it right. There's a lot of functionality packed in there! I'm not going to show you everything today, but we'll cover enough to be worth talking about.

Without further ado, here's how the bar might look when I'm logged in:

Let's break down what you're seeing there. I'm afraid I'm not going to talk about the arrows or box-with-numbers buttons today; those will come in a future entry.

Userbox

The first thing, on the left end of the bar, is my userbox. One of the things that V5 will put more focus on is your identity within the site, and to do that, we need consistent and recognizable representations of people that we can easily slot in wherever we need to. You can see that the userbox shows my name, a small version of my avatar, and a couple of my 'badges' - little graphics that represent certain things about my status or achievements. Moderatorship, for example, might be represented by a little sherrif's badge; but we could also use them for people who've won contests, or created the day's IOTD, or have been nominated as poster-of-the-month. There's a lot of flexibility in the concept. The number of badges a person has might get quite large, so only their top three will be displayed in theur userbox; they can pick which three of their badges they want displayed there.

Clicking on a userbox is also a way to get quick interaction with a user. In the case of the nav bar, because it's my own userbox, what it shows me is a dropdown menu with links to my profile, my preferences, quick access to post to my journal or gallery, and so on. Note that this is a menu that will appear when the box is clicked; we're not using rollovers for the nav bar, so it should function smoothly on touch-screen devices or things like the Wii.

Quick Nav

The next button on the bar opens up the Quick Nav.

Now, one of the key ideas in V5 is that navigation of the site shouldn't be a fixed hierarchy any more. Google said it best - "search, don't sort." Maintaining a fixed taxonomy of topics, particularly in a field that has fairly fast-changing technology, is really difficult; you can see from our existing forums that there's a lot of imbalance. Furthermore, the present site also strongly segregates content by what type of content it is - article, thread, journal entry, etc - and that's really not that important to a person who's just trying to find something out.

It's also the case that the things a person is interested in looking at don't change drastically from visit to visit. Most people have a specialty or a current topic that they're presently focused on learning about or that they're most interested to discuss. Everybody has their own personal way they want to use the site. In V5, we want to do what we can to learn what that way is for each user, and customize the site accordingly - present interesting or useful content to them without them even needing to search for it.

To that end, the new site homepage is going to be something you can customize - and will, in fact, customize itself - to bring the content that's most interesting to you, to the forefront of the site. It's going to be your own personal portal to GDNet.

The Quick Nav is like a cut-down version of your homepage:

On the left, you can see three 'content hubs' - each hub is a portal to the site based around a particular topic, like 'Artificial Intelligence' or 'Shadowing' or 'XNA' - defined by the GDNet staff, but automatically updating and indexing new content throughout the site. The site will suggest hubs to you based on the content you've been looking at, or you can 'pin' a hub to always appear in your Quick Nav. As well as the hub title, you can see links to the three most recently updated or created content items in that hub - kind of an 'Active Topics,' but only for one particular subject area, and not restricted to just forum threads.

On the right, you've got two sections: Bookmarks, which lists individual content items that you've bookmarked for whatever reason - you get notifications when a bookmarked item is updated or changed, so you can use bookmarks to 'watch' things that you're interested in. Below that is a 'Recently viewed' section, and that simply lists all content items that you recently viewed, which could be handy if you were reading an article at work, then get home and want to quickly find it again to carry on reading.

Don't be misled by the way that the things in the mockup are all articles, by the way - this panel will show any and all content items, from articles and discussion threads, to events, products, and people.

Search

I've already explained how search is going to be a big focal point of the new site - so, understandably, we need to make searching for content as easy as possible. The rightmost box on the nav bar is a search box. It's a text box that you can type your search into, but when you click on it, you'll also get this panel appearing:

Before you've typed anything into the search box, this is what you'll see. (Once you've typed in a search and hit enter, it'll change to a quick view of the top search results).

Down the left column are your 'saved searches.' These are your own personal 'views' of the site that you've built and saved in the past; for example, maybe you come to the site to answer questions about Python, so you built a search that finds you "all topics and journal entries about Python programming in which the average participant level is beginner." We'll provide a number of prebuilt saved searches that you can use to browse if you're not sure what you're looking for yet.

The right column lists searches you've recently performed; you can hit the pushpin icon in the top right corner to turn the search into a saved search.

As you can see, both saved and recent searches also all display the top three results for each search, so you can quickly jump directly to the content you're interested in instead of having to go via a search results page.

Conclusion

That's it for today. I'm not sure what I'll talk about next; any requests?

"Search don't sort" is kind of a terrifying thing to get into, particularly if you're used to static content hierarchies. The idea of content just existing in this soupy ether, discoverable only if people are looking for it, feels very unsafe - "what about all the content that nobody's looking for?!" Then you read that back to yourself, and realise how silly it sounds. It requires a good search engine, of course, but on a site that already has reasonably good metadata, high-calibre content and a reasonably focused topic area, it's not as tall an order as it might seem.

The biggest risk that Search Don't Sort poses is to people who aren't really looking for anything; 'browsers,' in the purest sense. It's very important to make sure that users who don't have any particular information need in mind, still have the means to just float through the content at random. As you'll see in future posts, though, I think we've got this fairly well covered.

0 likes 7 comments

Comments

Washu
I sure do like them cached results.
December 18, 2009 03:34 PM
brandonman
Love it! Take your time superpig, that looks like it's indescribably tough to be coding up. Very thankful for all the work you're doing!
December 19, 2009 11:33 AM
krez
I've been getting worried every time you bring up the "search don't sort" motto, as I am one of the "browsers". I'm glad you are keeping people like me in mind, since I spend an inordinate amount of time reading the forums here without any particular direction or goal, and I'm looking forward to the future post where you explain how you are accounting for it (and I hope it isn't really "random").
That said, all of this looks nifty as hell and very useful for the times when I am looking for something, or keeping up with a specific topic.
December 20, 2009 02:25 AM
sauyadav
I am also of browser category, so I am bit worried about 'search, don't sort.' motto, but I am sure there will be lots of new things for me too. Hey, please do add a dark theme for night browsing. Also, I browse at 800*600 resolution, & I don't have any other option, will new design require any minimum screen size?

Best of the very best of Luck for work on new design!

~¤~
December 20, 2009 07:57 AM
dmatter
Love it! Will the search engine need to be be proprietary or, say, Google?
December 20, 2009 11:29 AM
superpig
Quote:Original post by sauyadav
Also, I browse at 800*600 resolution, & I don't have any other option, will new design require any minimum screen size?
We're building the site to be fluid and to scale up and down to different resolutions, but there are limits. Hopefully, the site will continue to be usable on 800x600, but we're not officially trying to support it - only about 0.5% of our users have resolutions that low.
December 21, 2009 04:24 PM
superpig
Quote:Original post by dmatter
Will the search engine need to be be proprietary or, say, Google?
Proprietary. Google's stuff is fine for indexing a generic web of linked documents, but it doesn't let you 'target' results in the way that we want. It can't be made to select content that is at a level of complexity suitable for the user, for example, or to elevate content that is geographically nearby.
December 21, 2009 04:28 PM
You must log in to join the conversation.
Don't have a GameDev.net account? Sign up!
Profile
Author
Advertisement
Advertisement