User blog:MisterWoodhouse/A deeper look at Navigation on FandomDesktop

Hey gang!

As promised in the introduction to FandomDesktop back in March, we’re continuing our More Is More approach to previewing the changes coming to Fandom and Gamepedia for desktop users later this Spring and into the Summer. More transparency, more design thinking, more in-depth looks at what is changing before the rollout. Today, we are looking at how navigation is evolving with FandomDesktop.

Community on Top
Local community links will be the first ones at the top of the screen, a change for both Fandom and Gamepedia so that top priority navigation affordance is given to communities. The global platform navigation of both sites has been first at the top for years and we are doing away with that for reasons I’ll go into later. Within the community header, which as you know is now customizable, you’ll have your menus and submenus for community content links.



For Gamepedia users this is a big change from having a left sidebar for community links, a practice that was adapted from Wikipedia. This was a vital piece of the new unified experience so we did a lot of research on the merits of the left sidebar versus the top menu navigation and looked at something called Interaction Cost to arrive at our design decision.

Interaction Cost is the sum of efforts - mental and physical - that users must deploy when interacting with a site in order to reach their goals. Scanning, reading, scrolling, and clicking are all forms of interaction cost, and when a user lands on a wiki page they have several potential paths to take, so right from the get-go the interaction cost slowly starts to build. In the end, the higher the cost spent in a single experience the less likely that user will have an enjoyable experience and return again in the future.

This is a very technical, research-based approach. If you just want the quick hits, here they are:


 * Lots of scrolling and scanning through links represents a high interaction cost
 * Logical flows through well-organized menus lowers the interaction cost and is more portable
 * Having a menus-based interface allows for more links without scrolling

With navigation being such a core part of the wiki experience we wanted to make sure users weren’t spending more effort than they needed to. If you look at the left sidebar approach on larger Gamepedia wikis, scanning the vertical sidebar and scrolling to get to the bottom of it adds up to a high interaction cost right up-front. While exposing all of the links in the sidebar may help uncover all the available links, it also drastically increases the scanning and scrolling cost to a point where it detracts from the user experience. Here’s an example of what we mean:



''An example of the interaction cost needed to use a left sidebar for community links. You can see the large cost spent upfront before navigating into a submenu.''

The best way to lower this navigation interaction cost is to simplify the experience by using logical flows through well-defined menus, a practice known as progressive disclosure, and to lay them out in a horizontal view for seamless scannability. An example of this could be on a TV wiki with defined menus for Characters, Seasons, and Cast. Under each menu there would be sub-menus for Heroes/Villians/etc, for Season 1/2/etc, and for Leads/Supports/Crew. This approach provides users with a quick snapshot of where they could navigate without overwhelming them with all the links at once. As the user prepares to make their next move we then expose more options for them to dive deeper. This progressive experience ensures the user only spends the interaction cost needed in order to perform the action. Here’s an example of what we mean:



''An example of the interaction cost needed to use a horizontal bar for community links. The initial cost is low and only increases when a user signals they want more by diving deeper into the navigation.''

Moving the community links to the top and away from the left sidebar also opens up more content area width while adding more “capacity” for local links (over 200 total!). With the new fluid design we give users control over how wide the content area is, but that wouldn’t work as well if we kept the community links on the left sidebar because of how much space it takes away from the width of the page. So as a result, by moving the community links to the top and using a slim left global sidebar, logged in users on historically Gamepedia wikis have the choice to get more content width than ever before while also having lots of links and tools at their disposal, even on scroll.

Navigation Always Within Reach
For both Fandom and Gamepedia another change with this new local navigation is that it scrolls with you as you go down the page. The community header rolls up into a themable compact bar and the content links remain at your fingertips, even on the really long pages, like ARK’s Taming page. So instead of that page having the Gamepedia global navigation scrolling with you at the top, you’ll have community content links.



The portability of the navigation also reinforces the local community identity by taking the local logo with you in the “pinned” navigation. Combined with the portability of the Table of Contents hover button, as detailed in the Article Page blog, we’ve made local navigation as portable as possible.

The Creator Toolbox
Some of you with eagle eyes noticed in previous blogs that the right rail is playing host to some editor tool links in the FandomDesktop design. Nice spot! That’s right, we’re surfacing some links focused on editor needs in the right rail so that you have better access to them when you’re navigating around the wiki.

Entry points for things like What Links Here, Page Information, and Wiki Guidelines will live in the right rail, decoupling tools from content links. The standard entry point for Wiki Guidelines has been a big ask from the community since the introduction of the Wiki Rules and Blocking Policy, so this is a great way to surface it in the context of editing.

This is just a start for what the right rail can do for navigation, especially for logged-in users. As mentioned before, we’ll be experimenting quite a bit with the right rail to provide even more value to you. We’ll also have a special blog soon that is just about creator tools, including some of what you can expect after FandomDesktop launches.

Going Global
One of the biggest things noticed about FandomDesktop was that we are moving the global navigation into a narrow left sidebar, a move that we’re really excited about and believe has a lot of potential. But why did we move it? Well, in earlier design explorations we looked at a number of options that included the global navigation at the top, which when coupled with local navigation and ads, added to the vertical weight pushing the content down. This layer cake also detracted from the immersive community experience we were aiming for. On top of all of that, having the global nav at the top did not mesh with our desire to have the local navigation scroll with the user.



Our research has shown that the on-scroll experience is just as important as the top-of-page experience, and if the global nav remained on top, we’d basically have two options for how things could look on scroll. One is that you have two navs stacked on top of each other, which wasn’t a great approach from both an aesthetic and functionality standpoint. The other is a similar approach to FandomMobile where the two navs merge together into one when you scroll, with the Fandom logo on the left and the wiki name and navigation to the right of it. While this approach has some promise to it -- it was actually a pretty cool way to connect the global brand and the local wiki identity together -- the downside is a loss of visibility to site-wide links. In the end the best solution to have the local links scrolling and reduce the overall vertical weight was to move the global navigation into an icon-focused sidebar that reduces the overall area of the element for most displays, but also makes it more prominent and retains all functionality when you scroll.

What about search, profile, and notifications?
Let me take this opportunity to thank you all for the incredible feedback you’ve given us since Community Connect and the first wide public preview of FandomDesktop. It’s been so helpful and we’ve already been able to make tweaks to the different parts of the designs as a result of it, for example as you’ve seen with the right rail toggle for logged in users. Search, Profile, and Notifications are the three things we’ve received the most constructive feedback on with the left global sidebar.

Profile is in a new spot for everyone at the bottom of the left sidebar. We think this is a change that, while seemingly jarring in the abstract, will become more comfortable with experience. It is a similar positioning to analogous features on other platforms, as we confirmed in our competitive analysis, but we’re eager to get your thoughts on it as you go hands on with the new experience during the opt-in period. And keeping with the “always within reach theme” this location in the sidebar ensures you’ll always have quick access to it.



Search now has unified entry points in the top of the global navigation sidebar, as well as in the community header (a placement we added to FandomDesktop as a result of community feedback!). On Fandom, it was in the global navigation. On Gamepedia, it was at the top of the local page. Now, everyone has persistent search entry points always available on screen that take you to a focused experience. We have more Search work to do and a dedicated team that can’t wait to start that work later this year, so stay tuned for more to come on that front.

Notifications are likewise on the global navigation sidebar, but more work needs to be done to unify the notification systems between Fandom and Gamepedia wikis. We have learned a lot from the Reverb notification system on Gamepedia and we’ll be starting a specific project to tackle notification systems unification later this year. The notifications will all be in the same place with FandomDesktop, however.



Change Gives Rise To Opportunity
More is More isn’t just a slogan to describe what we’re doing. It’s also about how we’re operating. More change means more opportunity, but it also means more accountability. These are some of the biggest changes we’re making, no matter which platform you came from. The fact that there has been so much change to the platform over the last year is why it’s more important than ever to make sure we’re incorporating your feedback, like with the collapsible right rail, content width options for users, and, in the case of the navigation, adding in a new search entry point to the community header.

When the time comes later this spring, go hands on with the new design and tell us what you think. We’ll continue to work with you to make the experience even better.

As always, I’m happy to take your questions now.

de:Benutzer_Blog:SpacePucky/Ein_Blick_auf_Navigationen_mit_FandomDesktop