We need the visual and ux design for the subtopic landing page that fits the topic/subtopic iA we plan to roll out this quarter.
Created attachment 744477 [details] sumo - subtopic landing page variations - 01 Note: these mockups are very closely related to the mockups posted on the topic landing page (bug 867701). Most of the time, they will only make sense if you view the attachments in that bug first. These mockups visualizes the subtopic landing page. The problems I’m dealing with are twofold: * How do we let user know that s/he’s inside a child category, and it’s totally possible to go up to the parent. This concept may not be easy to grasp. * How do we let user know that there are other subtopics that s/he can try, if this one doesn’t solve the problem. Page 1: The subtopic is displayed as a smaller text under the parent topic. The parent topic is displayed as a link that user can click to go back up. Alternatively, user can click on the sidebar. Page 2: Same as page 1, but subtopic has an arrow icon to indicate hierarchy. Page 3: This is the continuation of attachment 744473 [details], page 5. Subtopics are displayed as a list below the title text. Other subtopics can be navigated to immediately, but it’s also possible to go up to the parent topic.
Those look good. Just for reference, our current super simple quick solution is: http://cl.ly/image/0A2Y2Y2F3G09 https://support.mozilla.org/en-US/products/firefox/tips We need to fix the breadcrumbs, among other things. But it would be interest to measure and later compare the effectiveness.
I like the 1st one. Simple an elegant. Some comments: - Breadcrumb and side bar are redundant. With this UI we may be able to remove the breadcrumb and simplify the UI. - When logged in as contributor, the side bar could be really crowded. We shouldn't compromise the design because of the contributor toolbar and maybe we can think on where the contributor bar needs to live. Contributors can tell us about it.
(In reply to Ibai Garcia [:ibai] from comment #3) > - When logged in as contributor, the side bar could be really crowded. We > shouldn't compromise the design because of the contributor toolbar and maybe > we can think on where the contributor bar needs to live. Contributors can > tell us about it. Good point! Kadir has already started exploring better UI for this menu: https://sumo.etherpad.mozilla.org/contributor-menu I am excited about moving it to the global top nav.
Just to clarify, we needed a place to store things and refer to them. The current attachments do not represent the current state of discussion. We'll share updated mockups shortly to get feedback.
Created attachment 746790 [details] sumo - subtopic landing page - 01 This is the mockup that incorporates all improvements made on the subtopic landing page, but previously scattered over many mockups (attachment 744477 [details]): * Subtopic name is highlighted with an arrow that mirrors the arrow we use in the sidebar navigation * Topic name on the content area is a link (colored blue), providing an easy way to go back up a level * Topic name on the sidebar has an arrow-shaped cutout even when the subtopic is selected (highlighted white), to help reinforce where user is at the moment. Clicking on the topic name here is also a way to go back up a level.
Okay, this is the mockup to comment on :) Bram, thinking about the sidebar a bit more, I was wondering: How do we want to handle elements that are not on top of the main topic list? Imagine you are on a subtopic of the "fix slowness..." topic. If we have static positions in the sidebar the highlight might be way down the page, since the "fix slowness..." topic has a large number of subtopics. On the other hand: if we move the currently displayed topic on top, the (large number of) subtopics of that item will push down all other main topics, which means that people wouldn't be able to cycle through the list of available topics easily. The same issue arises on the topic landing page. Maybe it just means that we have to keep the number of subtopics in check.
(In reply to Bram Pitoyo [:bram] from comment #6) > Created attachment 746790 [details] > sumo - subtopic landing page - 01 I like! * I think we need to change the breadcrumbs (basically remove the "Products and Services" crumb). * The page is going to get a bit long if we include the summary/description below the title. We currently have 14 articles in "Learn the Basics: get started" topic. You only included 5 in the mockup.
(In reply to Ricky Rosario [:rrosario, :r1cky] from comment #8) > (In reply to Bram Pitoyo [:bram] from comment #6) > > Created attachment 746790 [details] > > sumo - subtopic landing page - 01 > > I like! > > * I think we need to change the breadcrumbs (basically remove the "Products > and Services" crumb). True that! > * The page is going to get a bit long if we include the summary/description > below the title. We currently have 14 articles in "Learn the Basics: get > started" topic. You only included 5 in the mockup. Not sure about this, Google has 10 items on the results page, using lot's of space and several links for each item. Up to ~15 items should be fine IMHO. But it would be good to see how that looks in the mockup.
Re: Breadcrumb...there's a bug for that! https://bugzilla.mozilla.org/show_bug.cgi?id=867824 Content wise, this should be consistent with the topic landing page and some of them are longer than 14 items. We should explore how that looks...but it's probably too long as Ricky mentions. It's the trade off between users not reaching the bottom to find their article vs users not being able to make an informed decision before clicking because they only have the title. This could be a matter of testing both options. Regarding the side bar, I like it. I think it's a significant improvement over the previous version. Adding to Kadir's concern, what we see in this mock-up is a pretty favorable version. A possible solution is to promote to the top the actual topic, so the sidebar always shows: - Actual Topic -- Subtopics (this ones don't get reordered) - The rest of the topics It may be confusing to bump one topic at a time? Because we are reloading the page, this could probably work fine.
I share Ricky's concerns. If people were using the sidebar to get to this page it would be one thing but they aren't. The navigation changes from buttons in the middle of the page to an expanding and collapsing sidebar. I'm afraid we will loose people. Here's a super rough idea using one of Brams older explorations for the product page. We can use animation to help people make the connection. Here's what I'm thinking in this gif: 1. The product page features basically a sidebar that is expanded across most of the page. 2. As you hover over each topic, the subtopics expand, pushing the lower topics down. 3. When you select a topic, the giant sidebar shrinks to a normal sidebar keeping the indication of what you just selected visible the whole time. While that is happening we move hot topics off the page and bring in the list of articles.
Grrr - pasted in wrong comment. Disregard comment 11 I think the title of the page should be the subtopic and we should fix the breadcrumbs. On this page they should be: Home > Firefox > Learn the basics: Get started > Procedures to diagnose and fix problems (In reply to Ricky Rosario [:rrosario, :r1cky] from comment #8) > * The page is going to get a bit long if we include the summary/description > below the title. We currently have 14 articles in "Learn the Basics: get > started" topic. You only included 5 in the mockup. It's no different than including them on the topic pages. I think we should include them in both places or not at all.
(In reply to Verdi [:verdi] from comment #12) > Grrr - pasted in wrong comment. Disregard comment 11 > > I think the title of the page should be the subtopic and we should fix the > breadcrumbs. On this page they should be: Home > Firefox > Learn the basics: > Get started > Procedures to diagnose and fix problems Seconded!
Based on what we know, Rehan thinks this is 2pts.
This should go after a waffle flag to make sure that we can test it before it rolls out to everyone. Moving forward for all these changes that affect the overall experience of the site (multiple pages/products) we should do it in 2 steps: First after a flag so the team can perform a user acceptance test for a couple of days and once that's cleared we can remove the flag.
@Bram: Could I get the PSD for this?
Hi Rehan, I’ve made all the designs by using a combination of Firebug and the web inspector. The pros is that I can give you all the CSS values. The cons is that I can’t give you a Photoshop mockup. I assume that you need the values for: * Sidebar: selected topic zone * Sidebar: default background color and borders * Sidebar: font sizes for topics and subtopics * Content: font sizes for headings, subheads, article title and article summary And the asset for the arrow to the left side of the subhead. Is there anything else?
We haven't finished this yet, dropping to next sprint. Also, re-estimating to 1pt.
Here are the CSS values for items inside the subtopic landing page. Page title ---------- Subtopic font size: 24px Topic and subtopic sidebar -------------------------- Topic font size: 16px Subtopic font size: 13px Selected subtopic: bold Gradient value of the whole selected topic area (top to bottom): #c5c8cb to #d9dde0 Article list ------------ Heading font size: 18px Body text font size: 14px
Landed: https://github.com/mozilla/kitsune/commit/959530460368960255abadee70f5c5b468320cc6 Pushed to prod by me, right now.