867702 - Need visual and ux design for subtopic landing page

Status: RESOLVED FIXED

(support.mozilla.org :: Knowledge Base Software, task, P2)

Description

[Kadir Topal [:atopal]]

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.

Comment 1

[Bram Pitoyo [:bram]]

Attachment: 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.

Comment 2

[Ricky Rosario [:rrosario, :r1cky]]

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.

Comment 3

[Ibai Garcia [:ibai]]

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.

Comment 4

[Ricky Rosario [:rrosario, :r1cky]]

(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.

Comment 5

[Kadir Topal [:atopal]]

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.

Comment 6

[Bram Pitoyo [:bram]]

Attachment: 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.

Comment 7

[Kadir Topal [:atopal]]

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.

Comment 8

[Ricky Rosario [:rrosario, :r1cky]]

(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.

Comment 9

[Kadir Topal [:atopal]]

(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.

Comment 10

[Ibai Garcia [:ibai]]

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.

Comment 11

[Verdi [:verdi] Best to slack me]

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.

Comment 12

[Verdi [:verdi] Best to slack me]

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.

Comment 13

[Kadir Topal [:atopal]]

(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!

Comment 14

[Ricky Rosario [:rrosario, :r1cky]]

Based on what we know, Rehan thinks this is 2pts.

Comment 15

[Ibai Garcia [:ibai]]

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.

Comment 16

[Rehan Dalal (Inactive)]

@Bram: Could I get the PSD for this?

Comment 17

[Bram Pitoyo [:bram]]

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?

Comment 18

[Ricky Rosario [:rrosario, :r1cky]]

We haven't finished this yet, dropping to next sprint. Also, re-estimating to 1pt.

Comment 19

[Bram Pitoyo [:bram]]

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

Comment 20

[Rehan Dalal (Inactive)]

Landed:
https://github.com/mozilla/kitsune/commit/959530460368960255abadee70f5c5b468320cc6

Pushed to prod by me, right now.