[k][forum] Create final mockup for individual question view for support forums

VERIFIED FIXED in 2.2

Status

support.mozilla.org
Forum
VERIFIED FIXED
8 years ago
7 years ago

People

(Reporter: djst, Assigned: chowse)

Tracking

unspecified

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(6 attachments, 3 obsolete attachments)

(Reporter)

Description

8 years ago
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) wireframe is at http://people.mozilla.com/~nlee/sumo/forum-reboot/wireframes/post-view-v3.png.
(Reporter)

Updated

8 years ago
Blocks: 556287
(Reporter)

Updated

8 years ago
No longer blocks: 556287
Summary: [kitsune forum] Create final mockup for individual thread view → [k][forum] Create final mockup for individual thread view
(Assignee)

Comment 1

7 years ago
Created attachment 440514 [details]
Thread View Mock-up (User)

First draft, based on Neil's mock-ups.

Notes and comments:

* Button visual design is not final.

* The UI around the original message feels really cluttered right now. How would you feel about removing or minimizing (i.e. making expandable/collapsible) certain elements, like related questions, email/feed links, etc.?

* How will tags and related questions work in the broader system?

* I'm debating moving the 'N users have this problem' directly below the message, and the 'Post a Reply' button below the list of helpful responses. Having 'Post a Reply' be the first thing they see seems like it would encourage more 'Me Too' posts.

* We should probably discuss the 'Helpful' vs. 'Solution' language offline. I'm leaning more towards the 'Solution' side, but this could change the UI a bit (e.g. does this support positive and negative feedback?). In addition, what determines if a problem is 'solved' vs. having 'n solutions'?

* Are replies sorted chronologically or by helpfulness? Should this be configurable?
Assignee: nobody → chowse

Comment 2

7 years ago
(In reply to comment #1)
* The UI around the original message feels really cluttered right now. How
would you feel about removing or minimizing (i.e. making
expandable/collapsible) certain elements, like related questions, email/feed
links, etc.?

I'd be up for it but we should talk about what we think each approach emphasizes


* How will tags and related questions work in the broader system?

Tags make for better search results and helps populate related questions.  Related questions are a key component of the workflow: if the current thread isn't a match to the user's problem, we should encourage that he find a matching threads vs posting a new one.

* I'm debating moving the 'N users have this problem' directly below the
message, and the 'Post a Reply' button below the list of helpful responses.
Having 'Post a Reply' be the first thing they see seems like it would encourage
more 'Me Too' posts.

I agree.  That seems like a good change.  Bear in mind that if they aren't logged in, though, they won't get a post a reply button at all.

* We should probably discuss the 'Helpful' vs. 'Solution' language offline. I'm
leaning more towards the 'Solution' side, but this could change the UI a bit
(e.g. does this support positive and negative feedback?). In addition, what
determines if a problem is 'solved' vs. having 'n solutions'?

A solved problem is marked so by the OP but we've found that only 10% of OPs come back and actually mark threads so we needed a secondary mechanism to float up useful threads which we do by letting anyone mark a thread as helpful.

* Are replies sorted chronologically or by helpfulness? Should this be
configurable?

Chronologically, because troubleshooting can sometimes involve a fair bit of back and forth and we are trying to promote interaction between contributors, a chronological layout makes the most sense.  To help the problem of burying the most helpful items, we have the "top posts" section at the top.
I saw a lot of collapsed areas already. This is just a gentle reminder that anything collapsed, we also need to see expanded, so we know what goes there.
(Assignee)

Comment 4

7 years ago
Created attachment 441426 [details]
Thread View Mock-up (User)
Attachment #440514 - Attachment is obsolete: true
(Assignee)

Comment 5

7 years ago
Created attachment 441427 [details]
Thread View States & Pop-ups
(Assignee)

Comment 6

7 years ago
Created attachment 441873 [details]
Thread View Mock-up (User)
Attachment #441426 - Attachment is obsolete: true
(Assignee)

Comment 7

7 years ago
Created attachment 441877 [details]
Thread View States & Pop-ups
Attachment #441427 - Attachment is obsolete: true
(Assignee)

Comment 8

7 years ago
Created attachment 441879 [details]
Thread View Mock-up (Thread Creator)
(Assignee)

Comment 9

7 years ago
Created attachment 441880 [details]
Thread View Mock-up (Admin)
(Assignee)

Comment 10

7 years ago
Created attachment 441936 [details]
Thread View Mock-up (Editing)

Comment 11

7 years ago
A few points from going through the PRD and noting discrepancies (These are all tiny features, can we mock up how they'd look?):
* Any replies from the original poster of the question should be also highlighted differently -- e.g. they should use the same background color as the original question at the start of the thread.
* The reply that has the most helpful votes should get a special highlight to make it stand out of the rest.  (We're now linking from the top of the page.  Is this enough or should we highlight as well?)
* Moderators should be able to see how many people marked a reply as unhelpful so we can quickly identify bad solutions.  (May be a P2 if hard to implement)
* Users are asked what their level of computer skill is as well as how long they've been using Firefox.  How will we display that data?
(Assignee)

Comment 12

7 years ago
Created attachment 443273 [details]
Extra Reply Details

(In reply to comment #11)
> * Any replies from the original poster of the question should be also
> highlighted differently -- e.g. they should use the same background color as
> the original question at the start of the thread.

(See attached mockup) I've added a blue background to replies by the original author, and added an 'Author' label below it's avatar. The 'Helpful' options are also removed from these replies, but they still can be reported, edited, or deleted.


> * The reply that has the most helpful votes should get a special highlight to
> make it stand out of the rest.  (We're now linking from the top of the page. 
> Is this enough or should we highlight as well?)

(See attached mockup) I'd recommend a green background, even if we include it at the top of the page. I've only done this for the solution, though.

For other replies accessed through links, you may consider a brighten transition (http://bit.ly/cwA3MO). After clicking the link, we initially highlight the targeted reply (I'd recommend light yellow). After a few seconds, the highlight fades back into white. This is enough to highlight the intended reply without being a visual distraction afterwards.


> * Moderators should be able to see how many people marked a reply as unhelpful
> so we can quickly identify bad solutions.  (May be a P2 if hard to implement)

Check the original mock-ups again. Each reply is labeled as 'X out of Y found this helpful', so it is possible to know how many people didn't find it helpful (with a little mental arithmetic). If you want to make this clearer for moderators, we can change the color of the text from green to red after it crosses a certain threshold (e.g. <50% found it helpful and at least 4 people voted).


> * Users are asked what their level of computer skill is as well as how long
> they've been using Firefox.  How will we display that data?

You'll have to explain to me what these choices are, as I can't find them on the current site. But most likely, it will show up in the right sidebar at the top, along with system details.
One thing I just noticed, that we forgot to include, is the ability lock/delete a thread when viewing an individual thread. 
Use-cases:
- Reading a discussion and seeing that it has gotten out of hand, and wanting to lock it. Especially if I want to post something in the thread saying that I'm locking it.
- Someone reports a post (spam) which is a new thread posted a day ago (i.e. somewhere on page 7 of thread list view)
Summary: [k][forum] Create final mockup for individual thread view → [k][forum] Create final mockup for individual question view for support forums
Target Milestone: --- → 2.2

Comment 14

7 years ago
On the "most helpful replies", the poster should come after the post rather than before (since it's not nearly as relevant).

In my opinion, of course.
Test cases for review [these can be moved out when implementation bugs are written]:
https://litmus.mozilla.org/manage_testcases.cgi?testcase_id=12006
https://litmus.mozilla.org/manage_testcases.cgi?testcase_id=12007
https://litmus.mozilla.org/manage_testcases.cgi?testcase_id=12008
https://litmus.mozilla.org/manage_testcases.cgi?testcase_id=12009
https://litmus.mozilla.org/manage_testcases.cgi?testcase_id=11946
https://litmus.mozilla.org/manage_testcases.cgi?testcase_id=11999
https://litmus.mozilla.org/manage_testcases.cgi?testcase_id=12000
https://litmus.mozilla.org/manage_testcases.cgi?testcase_id=12001
https://litmus.mozilla.org/manage_testcases.cgi?testcase_id=12002
https://litmus.mozilla.org/manage_testcases.cgi?testcase_id=12003
https://litmus.mozilla.org/manage_testcases.cgi?testcase_id=12005
Better case link format: 
https://litmus.mozilla.org/show_test.cgi?id=12006
etc.
Status: NEW → RESOLVED
Last Resolved: 7 years ago
Resolution: --- → FIXED
Verified implementation
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.