784614 - [redesign] Support Forum

Status: RESOLVED FIXED

(support.mozilla.org :: Questions, task)

Description

[Bram Pitoyo [:bram]]

Apply new style to /questions*

There are some designs already posted on bug 762255, but since there are quite a bit of feedbacks, and the actual design work involved more time and mockups, I will post the mockups here to avoid overwhelming everyone on the CC list.

Discussions should also happen in this bug.

Only the final design will be posted on bug 762255.

Comment 1

[Bram Pitoyo [:bram]]

Attachment: support forum - thread list view - layout variations

Here are some layout variations for the thread list view of the support forum.

The concerns we are trying to address here are:
*  Displaying time and date for both the last reply and the original question (it will help contributor determine whether a question needs attention or not)
* Showing more of the question snippet (it will help contributor decide whether to open a thread or not)
* Indicating questions that are solved, responded to and not responded yet (it will help contributor get to the most important questions first, and skip the solved or contributed ones)

The very last box (#4 from the top) indicates what our current design would look like if given a new skin. There’s no element repositioning or anything. I put it there to compare and contrast whether the new UIs work better against the old.

Comment 2

[Ibai Garcia [:ibai]]

FWIW, number 2 is the cleanest and easiest to read IMHO.

Comment 3

[Bram Pitoyo [:bram]]

Attachment: support forum - individual thread

Here’s a new mockup of the individual thread view. It is designed to fix these issues that all of you had voiced:

* Showing the solution in full right below the question was a very helpful change
* Give more context to the “Read more” links, and increase the chances of people clicking on them and reading the answers
* It will be good to allow one-time or random visitors to vote on helpfulness

What’s new in this version:
* Chosen solution is put directly below the question, in full-length
* Helpful replies are partly displayed (2 lines instead of just 1 line)
* The biggest change of all: the sentence “x out of y people found this reply helpful” has been replaced by a heart icon followed by a number
* Having this heart-and-number system helps new user determine the goodness of a helpful reply by simply scanning
* The Helpful/Not Helpful buttons is moved to the bottom of each reply. The wording is changed to something shorter: “Was this helpful to you? [Yes] [No]”. This positioning will allow first-time users to discover this feature, and make it more likely for them to rate answers
* The Helpfulness score is displayed besides the [Yes] [No] buttons. The score will change after user clicks on either button. “Yes” means +1, and “No” means -1. User will be able to see the number change, so it’s a good way to help them learn our Helpfulness system
* The button that indicates “Does this reply solve the problem” is put to the side of the thread, because it’s a rarer occurrence. We might even be able to take it out entirely and just do it by email, if we want.

Comment 4

[Bram Pitoyo [:bram]]

Attachment: support forum - thread list view

I have taken Ibai’s feedback on comment 2, and make the thread list view even cleaner.

You’ll notice that a lot of informations like:
* Posted by
* Tags
* What does the checkmark and plus icons mean

are missing from the design.

This is because I plan to add them via hover. You’ll see it on the next attachment.

Comment 5

[Bram Pitoyo [:bram]]

Attachment: support forum - thread list view - hover

1. When your mouse hovers over each thread, the “Posted by” and “Tags” field will show up.

2. When your mouse hovers over the checkmark and plus icons, a caption that explain what the icons mean will show up.


Comment on #1:
The only reason I hid “Posted by” and “Tags” under hover is to keep the view as clean as possible. However, our contributors may prefer seeing all of the informations on all threads, at all times.

If they prefer to see everything, I am perfectly okay with not hiding “Posted by” and “Tags” under hover.

Comment 6

[Bram Pitoyo [:bram]]

Attachment: support forum - thread list view - caption

This mockup has caption texts that describe the various features of this thread list view, and why it helps make a contributor’s life easier.

Direct benefit for contributors:
* See if a question has been solved by looking for a green checkbox icon
* See if s/he has contributed to a question by looking for a blue plus icon
* Determine if a question needs immediate attention by looking for the yellow numbers on the side of each question
* How do you see all of the articles you have solved? Look for threads that have BOTH the checkmark and the plus colored. Very simple.

Benefit for us, SUMO team:
* Seeing plusses go from blank to colored, and seeing yellow numbers turn to black, will help incentivize contributors to respond to threads
* It’s ready for the karma system. We can simply say “Every checkbox gets you 50 karma. Every plus gets you 30 karma. Answer to any question with a yellow number gets you 20 karma” etc. It makes it easy to visualize how the karma system works
* Want to know what issues are the top issues this week/month (so we can turn it into articles, provide better answers, lock it, etc.) ? Look for the yellow numbers on the “Have this problem” field
* The space occupied by the checkmark and the plus can be used to put a lock icon to indicate that the thread is locked – and other indicators, too

I hope these mockups communicated the reasons why highlighting various bits of informations in the design, when combined, will make optimize our forums to work better for contributors.

Comment 7

[Bram Pitoyo [:bram]]

Forgot to mention on attachment 654916 [details] that I use relative timing (1 minute ago, 3 hours ago, 5 days ago, etc.) rather than absolute (August 24, 2012 5:55:09 PM +1200).

This is to make it consistent with the individual thread view, as well as make the thread list easier to parse. A contributor doesn’t need to know the exact minute and second of a question’s posting or response time. The info that will help the most is whether a certain amount of time has elapsed (24 hours, 1 week, etc.) – to display this, I chose relative timing.

Comment 8

[Bram Pitoyo [:bram]]

Attachment: support forum - individual thread - empty

This mockup is a blank slate version of attachment 654536 [details].

Attachment 654536 [details] portrays a reasonably complex scenario, where the question is already solved, has several helpful answers, and was replied to by the owner. In addition to this, every answer on that page has a status icon attached to it (question owner, solution chosen, helpful answer, etc.)

That page may look daunting to a new contributor or first-time user because there are so many colors and icons.

This blank slate view gives some context. It is what shows up when a user just created a question, or a contributor opens a question that has no reply.

Realistically, most users will see a page that’s more complex than this blank slate (has more posts), but less complex than attachment 654536 [details] (has less visual indicators)

Comment 9

[Kadir Topal [:atopal]]

Bram, this is excellent work, I love it! 

Just one thing: relative dates can be problematic for trouble shooting. When it says that a question was asked 2 weeks ago, you can't tell if that was for example before or after a new Flash version was released. There is an interesting take on it here: http://aaronparecki.com/2012/236/article/1/you-should-not-be-displaying-relative-dates

Changing that would be my only suggestion. If there are no further comments, I think we can start implementing it.

Comment 10

[:ibai]

Great stuff!!

Regarding the suggestion to hide Tags until a hover happens, I will recommend against it. Tags are a really important part of the preview of the thread and help understand really quick if they threads is relevant to you or not. If you don't use filters (and many contributors don't) it helps discard some topics where you are not really familiar.

Another open question is the visual weight of the "I have this problem too" button. The more I think about it, my take is that while that button is useful for users who want to "track" that issue, we should encourage users to add more context by explaining their case, that could lead us to: a) More information about the case described by the OP or b) recognize that the "me too" is more of a "almost me too" and act accordingly. The way is presented now, the button is so big that I'm almost tempted to press it...just because. Perhaps there's a reason I'm missing.

Regarding Red as color selection for the OP. Is this for a reason? (Green for solution, Yellow for helpful...Red for OP). In the context it seems to reflect that is a bad answer. Maybe we can use Blue that is a color that we are using across the interface as highlight without much connotations apart from being a call to action when it's a button.

Finally, something that will be really "neat" is to hide the editing buttons/menu until the user starts to type anything in the reply box. I never tried to code this but it doesn't seem to be hard to do (I might be wrong). The buttons could be distracting for a newbie.

Comment 11

[Bram Pitoyo [:bram]]

Kadir and Ibai, thanks for your feedback about relative timing and the hide tags! I have included them both in the latest revision, which, because it is final, I will post on bug 762255, in a little bit.

Ibai,


> Another open question is the visual weight of the "I have this problem too"

The visual weight of the “I have this problem, too” button is prominent, because it is also similarly prominent on our current design. As you know, I am basing much of the redesign on our old design. This button is another instance where I thought “things were done a certain way for a reason, so I am going to leave it alone the new design”.

Now that I know that clicking on “I have this problem” will put you on the CC list, and that we want to encourage user to provide more informations rather than just CC themselves, I can try designing the button so that they are more actionable.

Here are a few options. Let me know what you think if one or all of them are worth exploring?
* Make the button smaller, and/or reduce the visual weight by changing the color to white
* Clarify what the button actually does by changing the label to say “Please keep me updated on this problem”
* After clicking the box, a block of text will say ”Thanks! Now [provide more information about your problem]”, where “please provide more information” is a link that leads to the reply text box below


> Regarding Red as color selection for the OP. Is this for a reason?

The “plus” symbol that indicates contribution is also colored blue. But this mostly applies to contributors. You’ve made your point clear. Changing it to blue is more friendly and also more neutral. Thanks for the idea!


> hide the editing buttons/menu until the user starts to type anything in
> the reply box

I think we plan to remove all rich-text editing controls from all all user-visible textbox. I have recommended this to reduce confusion and make text editing as straightforward as possible. I think this will solve the problem of needing to hide certain elements from distracting new users.

Comment 12

[Bram Pitoyo [:bram]]

Attachment: support forum - individual thread

Changelog:
* Question owner is now colored blue
* “I have this problem, too!” is renamed “Keep me updated on this problem” and colored white to reduce visual weight

Comment 13

[Bram Pitoyo [:bram]]

Attachment: support forum - individual thread - pressed

After pressing the “Keep me updated on this problem” button, the button will disappear and show a link called “Help us solve this problem by describing your case”. This link will lead user to the anchor of the reply box.

Comment 14

[madalina]

This look great, I have no additional comments on it

Comment 15

[Kadir Topal [:atopal]]

Thanks for the additional feedback Ibai, and thanks for the quick response, Bram!

To give some background about the "me too" button, the intention was to:

1. reduce the number of unnecessary comments
2. easily quantify the number of people having the same issue, instead of counting comments
3. Let contributors focus on the biggest issues, based on "me too" votes.

I like the idea of reducing the weight by changing the color to something more neutral, but I'd hold off on further changes. Especially asking people to add a comment is pretty much the opposite of the intention of that button. I'm not saying that the way the "me too" button works today is perfect or even works well, and we should certainly make that part of the long term forum discussion, but we should restrict the focus here to get this done by the 17th sprint.

Ibai, can you live with that? Otherwise I think this is done, and we can ask SUMOdev to include this in the 17th sprint.

Comment 16

[:ibai]

Fair enough! Removing that could change heavily how the forum is used and we need to have a more general plan before moving forward with these type of changes. 

Bram, the changes look awesome!

Comment 17

[Bram Pitoyo [:bram]]

Ok. Good! I have no additional comment on it, and will upload the last wireframe (the individual thread view) over on bug 762255.

Comment 18

[Ricky Rosario [:rrosario, :r1cky]]

Rehan landed this a while back in Bug 781254