User blog:Rupert Giles/Prototype for a new article layout

Greetings, Wikians. As we wrap up 2014, I want to talk about where we're headed in the next year with some design ideas for the article page. We're at the very early stages of testing out some updates to the article layout, with the help of some generous communities.

Articles are by far the most common page type on all of Wikia and, for many users, the article is their “front door.” That is to say, these users arrive at Wikia via search, and their first experience with the site and that community is an article. Getting this experience right can be the difference between someone who becomes a regular Wikia user and someone who only visits one time.

Over the last year, we’ve been analyzing metrics and looking at the overall experience on the site, and we think there are some great opportunities to make things better. With articles accounting for most of Wikia’s traffic, what better place to focus our efforts?



Below, I've listed some of the key parts of this new layout, with a brief explanation of the motivation for each. Some of these changes are bold. Some may be welcome, and some may be controversial. We're still in the early stages and nothing is set in stone. It's likely that you'll have many questions that can't be definitively answered at this time. But it's important for us to put these updates in front of all types of users and see how things work or don't work, to help guide the next steps.

Your feedback is needed and extremely important to us. The normal channels for that are open, and we've also added a "Feedback" tab on the right side of article pages, on the two test communities. It's our hope that this will elicit feedback from users and readers who might not ordinarily let us know their thoughts.

So, without further ado, go ahead and check out the updates on Disney Wiki and American Horror Story Wiki!

Note that the changes are confined to article pages, with the exception of the local navigation updates.

Responsive Breakpoints
The new articles will move away from the fluid layout and on to more predictable responsive layouts. There will be a version of articles for mobile, tablet portrait, tablet landscape/desktop, and desktop XL, and each of these will be built on top of a 12-column "grid" that keeps the elements aligned.

Removing the Right Rail
The right rail has been Wikia’s domain for placing things like ads, video modules, and more ads, and it creates a separation between user contributed content and Wikia-specific content. In theory, this is a good idea but, in practice, the right rail has created some significant layout and UX (user experience) issues.

The intention behind removing the right rail is to bring your content front and center. Ads and various modules should smartly work around the content, rather than the other way around. It also allows us to deliver a better experience on multiple devices by no longer having to worry about a fixed space on all pages. This has already brought up lots of questions about how content elements are positioned on the page, and we're working on some solutions for those issues with the help of our test communities.

New Typography
Another big part of improving the reader experience across various devices is focusing on the default typography. This includes the choice of font-family, font-size, line length, line height, and other typographic features. The focus here is on overall readability no matter what device you are on. For example, the size of the font and the space between lines will be different if you are on a phone or a high resolution monitor. As with removing the right rail, this should lead to cleaner and more predictable experiences.

Local Navigation
With the update to the article page, we wanted to make sure that the local navigation got an update too. This new navigation will use the exact same content and theming you have today, but you will see it has a cleaner presentation and a more vertical approach to organizing content.

Left-side Tools
There are a lot of different things people can do with content on Wikia, but those features are currently scattered around on the page and sometimes hard to find. We wanted to unify these elements into a single location that will be easily accessible no matter where you are.

Content Recommendations
Wikia has such an amazing wealth of content, and with such a large audience of consumers we’ve seen a variety of ways in which people discover that content. Today, the top two ways of discovering content are through Search and in-article links, but there’s a third way of discovering content that is a bit underdeveloped. It currently exists as the “Read More” module and the “Around the Network” module you see at the bottom of the page. For the updated layout, we've combined these into a single module at the bottom of the page.

Advertising
Ads keep the content free and the lights on at Wikia. No matter what change we make to the site, we always have to be conscious of how ads will integrate into that experience. In an ideal world, the ads never feel like they are completely taking over the content. With this in mind, we made the choice to remove the right rail, but then we had to find a way to integrate the existing ads into the content in the smartest way possible.

Ads at the top of the page will remain unchanged from what’s there today, but the ads in the middle of the page will now be integrated into the content. Getting this experience right will be extremely important to the user experience. We want to make sure that the ads are properly spaced apart, that there aren’t too many of them (especially on shorter pages), that they don’t disrupt image/video placement, and that they are clearly called out as ads. It’s highly unlikely we will get this experience right on the first try, but know that we will be monitoring this closely and making appropriate updates as we go.

Pardon Our Dust
As with any new release there are likely to be bugs. Wikia is very complex and content can vary wildly from community to community so it’s likely that you will encounter issues with certain pages. We will be working with the test communities and will do our best to resolve these issues while this early prototype in progress.

Next Steps
We will be monitoring the prototype communities for user feedback, quantitative engagement data, revenue data, and impact on Google search results. We will work through December and January to improve on the experience, and then use what we have learned to guide decisions about the next steps.

Again, please check out Disney and American Horror Story; we'd love to hear your feedback!

Thanks for reading, I know this is a lot of information. Let us know what you think!