444331 - [ForumUX] Easy-to-spot and use filters for forum browsing view

Status: VERIFIED FIXED

(support.mozilla.org :: Forum, task, P1)

Description

[David Tenser [:djst]]

The current forum filtering options are very useful to contributors, but they are placed in an awkward position and not very streamlined for the most typical use cases. 

It would be nice if we could move the filter functions up above the thread listing and use a similar layout as we're doing with the content customization for KB articles (SHOWFOR). Example:

Show: All posts | Unanswered posts | Unresolved posts | Posts I've participated in | Advanced...

Clicking on Advanced would reveal the traditional (current) filtering options for advanced filtering use cases.

I'd also suggest that the default view should be Unanswered posts, to make it as simple as possible for contributors to help out.

Comment 1

[Jason Barnabe (np)]

Sounds good, but I'd rather default to All since this is normal forum behaviour.

Comment 2

[David Tenser [:djst]]

This one requires a mockup/spec before we can commit to a milestone.

Comment 4

[David Tenser [:djst]]

Proposed new list of filters (same style as SHOWFOR UI); comments/suggestions welcome:

Show: Unresolved topics* | Topics with no reply | Topics I've posted in | All topics

*) Default

Comment 5

[Paul Craciunoiu [:paulc]]

We're waiting on Neil for this, right?

Comment 6

[David Tenser [:djst]]

Neil, what's your update here? We discussed it a couple of times but we're still waiting for a mockup. See comment 4 for the basic idea; we just need some pretty UI for it and your thoughts.

Comment 7

[Laura Thomson :laura]

Assigning to Neil for comment.

Comment 8

[Neil Lee [:neilio]]

Are these localized, or just in English?

Comment 9

[Neil Lee [:neilio]]

Attachment: Proposed layout

Okay, here's a quick run at how we could relocate these controls to make them more discoverable and usable. The actual fields within each select stays the same - I've just moved the select label into the menu itself to save space. The "reset" link does what you'd expect - it resets any user-set filters back to the defaults.

Comment 10

[David Tenser [:djst]]

Hey Neil -- see comment 0 and comment 4 for the basic idea here; we want something that requires one-click filtering based on the most common use cases. In other words, the current form of UI controls is too complicated, and moving it to the top, while a sure improvement to the current location, isn't what we need UI advice on.

Let me attach a quick mockup of potential UI so you can see what we're aiming towards here.

Comment 11

[David Tenser [:djst]]

Attachment: Simple mockup

This is essentially what I mean with one-click filtering options. Note that there is an Advanced link which should show the full form again (and that's where attachment 397631 [details] may be exactly what we want).

Comment 12

[Neil Lee [:neilio]]

Ah - I wasn't clear that part of this was to reduce the number of options. I'll  redo the design using the options in that mockup and post it later today.

Comment 13

[Neil Lee [:neilio]]

I've done some work on this, but I've realized I don't know what David's intent was with the "advanced" button - is this supposed to link to the advanced search page, or is it supposed to pull in more options to the current forum page?

Comment 14

[Laura Thomson :laura]

Cheng, do you know the answer to this?

Comment 15

[[:Cww]]

I THINK this the idea of the advanced is to let you customize the view.  But if that's hard to implement and we should direct to advanced search instead, that's fine.

Comment 16

[Paul Craciunoiu [:paulc]]

Neil, anything on this? What do you think of David's mockup?

Comment 17

[Paul Craciunoiu [:paulc]]

Attachment: v1

This patch:
* implements David's mockup (style, navigation list)
* keeps the old filters hidden by default, under "Advanced"
* rewrites "no replies" to actually work
* adds a {$tikiroot} to a URL (I got the chance)
* degrades gracefully to show the advanced search for non-JS users.

Comment 18

[James Socol [:jsocol, :james]]

I'm adding bug 520625 as a blocker on this, because if we're going to make the filters more visible, we need to make sure they work.

Comment 19

[Paul Craciunoiu [:paulc]]

Attachment: v2

This updates filters in pagination. Apparently, most of them were in there, but the variable names were just wrong. Cheng: this should also fix pagination when filtering by poster, which was apparently broken.

Comment 20

[David Tenser [:djst]]

(In reply to comment #13)
> I've done some work on this, but I've realized I don't know what David's intent
> was with the "advanced" button - is this supposed to link to the advanced
> search page, or is it supposed to pull in more options to the current forum
> page?

My intent with "advanced" was to reveal the current (ugly and complicated) form. The idea is to have one-click access to the most common filters, while retaining the ability to do more complex filters.

Comment 23

[James Socol [:jsocol, :james]]

Comment on attachment 404714 [details] [diff] [review]
v2

Works great. Tested both locally and on sumotools (where it's still applied if anyone wants to go see this in action).

Comment 24

[Paul Craciunoiu [:paulc]]

r53856 (trunk)
Woot!

Comment 25

[Stephen Donner [:stephend] Not actively reading bugmail]

Looks good on http://support-stage.mozilla.org/en-US/forum/4?thread_sort_mode=lastPost_desc&reply_state=none, but I want another pass with Vishal before I verify.

Comment 26

[David Tenser [:djst]]

I noticed a problem: if you sort the list by clicking a column header, the filter goes back to "All topics" again.

Much less important: not sure if the color blends in well with the rest of the site -- I see that this is what Neil originally suggested. Would it be better to use a similar blue tone as a part of the background (less cyan, more blue)? Or perhaps make it stand out by using a yellow tone from the search box? Or have it blend in completely with the column headers by making it gray. (Not important to get this bug in, but mentioning this for future consideration.)

Comment 27

[Stephen Donner [:stephend] Not actively reading bugmail]

I spun off bug 523746 for comment 26.

Comment 28

[Stephen Donner [:stephend] Not actively reading bugmail]

Testcases up for:

Topics with no replies: https://litmus.mozilla.org/show_test.cgi?id=9595
Unsolved topics: https://litmus.mozilla.org/show_test.cgi?id=9596
Solved topics: https://litmus.mozilla.org/show_test.cgi?id=9597
All topics: https://litmus.mozilla.org/show_test.cgi?id=9598
Switch between sort criteria: https://litmus.mozilla.org/show_test.cgi?id=9599

(With a few for "Advanced" on the way.)

Comment 29

[James Socol [:jsocol, :james]]

Reopening this until its blockers are resolved.

Comment 30

[James Socol [:jsocol, :james]]

We'll deal with the blockers later. We're not going to back this out, so Stephen, Vishal, I leave it to you.

Comment 31

[Stephen Donner [:stephend] Not actively reading bugmail]

Verified FIXED; bug 524793 and bug 524836 can live on their own.

Comment 32

[Paul Craciunoiu [:paulc]]

r54609 (prod)
Patch failed on fennec, so no commit there.