Last Comment Bug 556287 - [k][forum] Create final mockup for the question list view for support forums
: [k][forum] Create final mockup for the question list view for support forums
Status: VERIFIED FIXED
:
Product: support.mozilla.org
Classification: Other
Component: Forum (show other bugs)
: unspecified
: All All
: -- normal (vote)
: 2.2
Assigned To: Chris Howse [:chowse]
:
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2010-03-31 08:59 PDT by David Tenser [:djst]
Modified: 2010-07-09 10:14 PDT (History)
5 users (show)
See Also:
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
Thread List Mockup (Not Logged In) (877.50 KB, image/png)
2010-04-20 12:46 PDT, Chris Howse [:chowse]
no flags Details
Thread List Mockup (Not Logged In) (432.64 KB, image/png)
2010-04-21 08:16 PDT, Chris Howse [:chowse]
no flags Details
Thread List Mockup (Not Logged In) (468.58 KB, image/png)
2010-04-23 14:17 PDT, Chris Howse [:chowse]
no flags Details
Thread List Mockup (Logged In) (521.35 KB, image/png)
2010-04-23 14:55 PDT, Chris Howse [:chowse]
no flags Details
Thread List Mockup (Logged In) (545.41 KB, image/png)
2010-05-03 19:33 PDT, Chris Howse [:chowse]
no flags Details

Description David Tenser [:djst] 2010-03-31 08:59:03 PDT
Now that we have wireframes for the new support forum, we need the actual mockups for our awesome webdev team to implement. 

The latest (possibly not final) wireframes are here

signed in (contributor view): 
http://people.mozilla.com/~nlee/sumo/forum-reboot/wireframes/contributor-view-v2.png

not signed in (user view): 
http://people.mozilla.com/~nlee/sumo/forum-reboot/wireframes/default-new-user.png
Comment 1 Chris Howse [:chowse] 2010-04-20 12:46:00 PDT
Created attachment 440296 [details]
Thread List Mockup (Not Logged In)

First version of the SUMO Thread view, based on Neil's mock-ups.

Please let me know any feedback you have, especially of the look & feel, since it will be propagated across all the other pages. 

Some notes and ideas:

* Added filtering/sorting options back to the top of the thread list. This is useful to have, particularly for contributors. By default, I'd recommend Most Requested (i.e. threads with the most followers) be the default option. For contributors, Unsolved or No Replies might be better.

* I didn't include the 'Search the Forum'/'Ask a Question' box, since I'm still debating whether to use the massive orange block (see http://support.mozilla.com/en-US/forum/1) or the more textual version in Neil's mocks. In addition, will asking a question continue to use the current modal pop-up approach?

* There's no indicator of thread replies (other than the latest response) in the mockups. Is this deliberate?

* The 'Solved' and 'N Solutions' decals were made larger and placed on the right to avoid overflowing the thread title. I may move these back beside the title if they're too easy to miss.
Comment 2 [:Cww] 2010-04-20 13:30:00 PDT
(In reply to comment #1)

HOT!  This is awesome.  I can't wait to see the logged in view.  Here are some comments from me:

> In addition, will asking a question continue to use the current modal
pop-up approach?

Yes, at least for now.  If you have ideas for how to make it better/more awesome, that'd be good to hear about but given the current timeline and resources, that seems like something that could wait til future releases.

> * There's no indicator of thread replies (other than the latest response) in
the mockups. Is this deliberate?

What users probably care more about is if the thread has replies that have been marked helpful (what we term here solutions but may need rewording to be more clear).  We should definitely note the number of replies in the more elaborate view we show logged in users.

General comments: 
* I think we're leaving out the popular/recent articles in the sidebar for now as we haven't developed the kitsune KB yet. 
* We should probably have a link/button to ask a new question
* For followers, we mean people who said "I also have this problem" in the past 7 days.  It's a terminology thing that I think we haven't nailed down but I'd like to hear your thought on whether there may be a better way to convey this?
* The striped background on some threads is a little distracting, can we make it solid or just darken the lines between them instead?

Again, it looks awesome.  I can't wait to see the next rev.
Comment 3 [:Cww] 2010-04-20 13:56:02 PDT
After further consideration (and discussion with djst) I'm going to backtrack just a little.  It'd be useful for users to know that a thread has replies even if none are marked helpful yet.  Can we do this instead:

If a thread is solved by the OP, show SOLVED
Otherwise, if a thread has helpful replies, show XX SOLUTIONS (or helpful replies or whatever wording works best)
Otherwise if a thread has any replies, show XX REPLIES
Otherwise show nothing.
Comment 4 Chris Howse [:chowse] 2010-04-21 08:16:51 PDT
Created attachment 440500 [details]
Thread List Mockup (Not Logged In)

Updated mockup based on your feedback.

* Removed the Popular/Recent Article sidebars, replaced them with large CTAs for searching the forum and posting a question.

* Removed striped background behind threads. Readability might not be as pronounced in implementation (Firefox renders text sharper than OmniGraffle).

* Added a 'N Replies' decal for threads with replies but no solutions.

* I removed the truncated message text from each thread. I think fitting more questions in view is preferable to showing a (probably insufficient) snippet of the question details.

* Replaced Next/Prev pagination with an actual Pager.


Notes and questions:

* The 'Ask a Question' button needs a better visual design, but I will revisit this later.

* Was the search field in the upper-right corner (labeled 'Search Mozilla Support') intended to search the Support site, or just the forum? If the latter, the 'Search' sidebar may be redundant.

* 'Followers' probably isn't the best choice of words-- something like 'N people also had this problem' would be better. Right now, I'm trying to figure out how to fit something so verbose into the design.

* I'm considering adding the 'Me Too' option for each thread to this page as well. Having to click through to get to it seems like a deterrent to using it. Can you guys think of any counterpoints?

* Is there any reason for the 7-day threshold on follower counts?
Comment 5 [:Cww] 2010-04-21 10:34:03 PDT
(In reply to comment #4)
* Was the search field in the upper-right corner (labeled 'Search Mozilla
Support') intended to search the Support site, or just the forum? If the
latter, the 'Search' sidebar may be redundant.

I think it was for the site as a whole but I agree that two search boxes looks weird anyhow.

* Is there any reason for the 7-day threshold on follower counts?

We wanted the sorting to make sense.  If we just had (and sorted by) total follower counts, then certain issues would stay at the top all the time.  However if we sorted by followers in the past 7 days and showed total, the list would look unsorted.

* I'm considering adding the 'Me Too' option for each thread to this page as
well. Having to click through to get to it seems like a deterrent to using it.
Can you guys think of any counterpoints?

I can think of two: 1) That seems to promote "me too"-ing lots of posts, how would that help anything from the user's perspective?  2) How will the enter-your-email address thing work?  Part of the me-too is so you can get email updates from a thread.

* I removed the truncated message text from each thread. I think fitting more
questions in view is preferable to showing a (probably insufficient) snippet of
the question details.

I disagree only because lots of people put really little information in their titles: "crash" "Firefox sucks" "Not working" The details snippet can help flesh that out.  We can perhaps gain some vertical space by cutting out the blank inch under the heading.

* Replaced Next/Prev pagination with an actual Pager.

Is there a reason why someone would want a pager vs next/previous?  (I'm not saying we shouldn't do this but I'd like to know why you made the change)

I think if we put back the snippets, we're pretty much there on this mockup (Awesome!).
Comment 6 Chris Howse [:chowse] 2010-04-23 13:36:51 PDT
(In reply to comment #5)
> (In reply to comment #4)
> * Was the search field in the upper-right corner (labeled 'Search Mozilla
> Support') intended to search the Support site, or just the forum? If the
> latter, the 'Search' sidebar may be redundant.
> 
> I think it was for the site as a whole but I agree that two search boxes looks
> weird anyhow.

Site Search includes the forums, right? If so, I'm tempted to remove the Search sidebar. Ideally, users will have already performed a search before they reach the forum. If the user needs to search the forum alone, this might make more sense as an option/link in the site search results.

> * Is there any reason for the 7-day threshold on follower counts?
> 
> We wanted the sorting to make sense.  If we just had (and sorted by) total
> follower counts, then certain issues would stay at the top all the time. 
> However if we sorted by followers in the past 7 days and showed total, the list
> would look unsorted.

Could both be supported? Most requested in the last 7 days seems useful for contributors, but most requested of all time would be useful for users.

Also, in addition to a 7-day threshold, have you considered an ordering that decays with time, similar to Reddit's 'hot' sorting? (http://code.reddit.com/browser/r2/r2/lib/db/sorts.py#L37)

> * I'm considering adding the 'Me Too' option for each thread to this page as
> well. Having to click through to get to it seems like a deterrent to using it.
> Can you guys think of any counterpoints?
> 
> I can think of two: 1) That seems to promote "me too"-ing lots of posts, how
> would that help anything from the user's perspective?  2) How will the
> enter-your-email address thing work?  Part of the me-too is so you can get
> email updates from a thread.

1.) True, but having the Me Too hidden on a second page might prevent people from using the feature in the first place. . 2.) The same way it will likely be done on the Thread page, with a pop-up or expanding section. 

> 
> * I removed the truncated message text from each thread. I think fitting more
> questions in view is preferable to showing a (probably insufficient) snippet of
> the question details.
> 
> I disagree only because lots of people put really little information in their
> titles: "crash" "Firefox sucks" "Not working" The details snippet can help
> flesh that out.  We can perhaps gain some vertical space by cutting out the
> blank inch under the heading.

Not a problem. I've noticed that the 'Ask a Question' pop-up includes some tips on how to phrase your 'question' (i.e. title). Has this lead to any improvement?

> 
> * Replaced Next/Prev pagination with an actual Pager.
> 
> Is there a reason why someone would want a pager vs next/previous?  (I'm not
> saying we shouldn't do this but I'd like to know why you made the change)

In the Thread List view, there's probably not significantly more benefit than a simple next/previous (except possibly jumping to the start of the list after browsing through a few pages). This was more for consistency with the Thread View page.

> I think if we put back the snippets, we're pretty much there on this mockup
> (Awesome!).

I'll be posting an update with these changes in just a moment.
Comment 7 Chris Howse [:chowse] 2010-04-23 14:17:32 PDT
Created attachment 441156 [details]
 Thread List Mockup (Not Logged In)

Updates based on latest feedback. Snippets are back, search sidebar removed, replaced 'N followers' with 'N people have this problem', and improved the visual design of the button.

One last idea I'd like to float: adding a visual cue to indicate how many people have a problem. If you look at the last 2 threads, more sad faces are added to indicate how many followers a bug has (up to 3 smileys). It might take some experimentation to find the right visual-to-follower ratio, so perhaps something for a future iteration.
Comment 8 Chris Howse [:chowse] 2010-04-23 14:55:41 PDT
Created attachment 441176 [details]
Thread List Mockup (Logged In)

Thread list for logged in users (contributors).

Minor differences w/ the logged out view, namely:

* Links to one's Profile and to Sign Out in the top-right corner.
* A list of Top Contributors This Week in the sidebar.
* A filtering option for looking at only threads one has created/replied to.
* A decal highlighting threads the user created/replied to.
Comment 9 [:Cww] 2010-05-03 14:22:33 PDT
We talked about also showing stuff like OS/Firefox version (maybe also an icon for mobile vs desktop) and tags in this view for logged in users.  Is that possible or will it be too cluttered?
Comment 10 Chris Howse [:chowse] 2010-05-03 19:33:39 PDT
Created attachment 443272 [details]
Thread List Mockup (Logged In)

(In reply to comment #9)
> We talked about also showing stuff like OS/Firefox version (maybe also an icon
> for mobile vs desktop) and tags in this view for logged in users.  Is that
> possible or will it be too cluttered?

Here's a logged in view w/ system details and tags. I opted not to add icons since I found them a little too distracting, but if the details are not visible enough as is, we can reuse the same icons from the thread page.
Comment 11 Tiago Sá 2010-05-06 12:06:06 PDT
Is the top contributors really that relevant? I think a tag cloud would be much more helpful. Keep the top contributors, as it entices people to contribute, but don't leave the important things out.
Comment 14 Rebecca Billings [:rbillings] 2010-07-09 10:14:01 PDT
Verified implementation

Note You need to log in before you can comment on or make changes to this bug.