480587 - Highlight the solution to a forum thread

Status: VERIFIED FIXED

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

Description

[Noah (NoahSUMO/SolidSnake) [:Noah]]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2a1pre) Gecko/20090226 Firefox/3.0
Build Identifier: 

Answers that are deemed as solving a problem via "This answer solved my problem", should be highlighted with a green background or some such. To give a quick visual and a better understanding that there's something special about the 2nd post in a thread marked solved. Right now the grey background doesn't alert me to anything, and I didn't notice that answer had solved the thread until I noticed the timestamp, which was out of order [which I also thought was a bug].

Reproducible: Always

Comment 1

[Paul Craciunoiu [:paulc]]

This seems like something to consider for UI improvements. Any suggestions?

Comment 2

[David Tenser [:djst]]

This has been discussed before but I don't think a bug was ever filed. 

Some ideas we have discussed include:

- Adding a prominent note at the top of the thread saying something like: "This topic has been resolved. <View solution>" -- the link would scroll down to the solution to the problem
- The reply that is the solution should be highlighted somehow, for example as a top banner/heading reading e.g.: "This post solved the problem in this topic."

Cc'ing Neil -- this is one of those bugs where your input would be really helpful.

Comment 3

[Paul Craciunoiu [:paulc]]

Awaiting Neil feedback. Meanwhile will think about it...

Comment 4

[David Tenser [:djst]]

Apple adds a blue little box with a green star at the beginning of the thread's parent post with the text "This question is answered." The post that is the solution to the problem is marked with the same green star.

http://discussions.apple.com/thread.jspa?threadID=1243940

However, they don't make it possible to easily jump to the solution, so I think we can use this as a case study but make something better. We should definitely have a link saying e.g. "Jump to the answer to this question." We might also want to reinforce that the thread is solved at the end of the parent post, which is where the reader will be after reading the question and confirming that it's the same issue he/she is having him/herself.

E.g. something like this:

Firefox 3.0.7 hangs/crashes on startup (even in Safe-Mode) 
Firefox version: 3.0.7 Operating system: Vista
 _______________________________________________
[This question has been answered. <View answer>.]
[_______________________________________________]


I'm using Vista, I believe I'm up to date on all software. Aside from that the subject above describes it pretty well. 

I kept it open for 20 minutes but it doesn't get any better. In the end I can send a crash report to Microsoft, but that's it. Since all extensions are disabled in Safe-Mode I'm guessing this doesn't have to do anything with 3rd party apps. Besides, I didn't install anything since the update. 

 _______________________________________________
[ <Jump to the answer to this question>         ]
[_______________________________________________]

Comment 5

[Paul Craciunoiu [:paulc]]

Sounds good. Looks like we'll need an icon or two, and some styling. David, since you have more ideas about this, would you like to do a mockup?

Comment 6

[Paul Craciunoiu [:paulc]]

Attachment: demo solved answer

How's this David? Courtesy of my brother's vision after I described the idea :)

Comment 7

[Majken Connor [:Kensie]]

Oooh! looks really good!

A few suggestions to make the top notification fit in with the current design, all referencing the search bars:

1. Make the outer border thinner to match.
2. Make the background a gradient.
3. Give it the same shadow as the search bars.
4. Use the same font as the search bars.

It'd be pretty cool if you could put the check mark image from the top notification under the username in the post that has the answer, or maybe next to the avatar.

Comment 8

[Paul Craciunoiu [:paulc]]

Attachment: demo solved answer 2

Again, with my brother's help. Here's another one.

Comment 9

[David Tenser [:djst]]

I think this looks terrific. Neil, any comments from a UX point of view?

Comment 10

[Neil Lee [:neilio]]

I think this is good as well (sorry for the delay, this got lost in bugmail). My suggestion would be to not colour the background of the entire solved topic, as that can reduce readability. Instead, maybe just add a smaller heading similar to the one at the top of the page (the "This topic has been resolved" banner) and then add a 2-3 pixel border around the entire topic to help visually distinguish it from the other replies.

Comment 11

[David Tenser [:djst]]

Would love to see this make it into 1.2, if possible.

Comment 12

[Paul Craciunoiu [:paulc]]

Should I ask my brother for a third mockup or is the latter fine?

Comment 13

[David Tenser [:djst]]

I personally think it's fine. Maybe we could brighten the background color up slightly to reduce the potential readability issue?

Comment 14

[Paul Craciunoiu [:paulc]]

Sound good. I'll do that and show it up on staging for review. Hopefully I'll have time, by the end of this week.

Comment 15

[Paul Craciunoiu [:paulc]]

r26106 - committed about 3 hours ago.

It seems that minify's css is not updating again (may need IT on this). Once it shows up, you may check it out at https://support-stage.mozilla.org/tiki-view_forum_thread.php?forumId=1&comments_parentId=252717&login#mark

I was hoping to have a live demo on staging (hence why I waited), but I'll post a screenshot instead.

I think we should think about including the text we had in the additional box at the top in the new design:
----
This thread has been closed as solved. If the steps outlined below do not help with your Firefox issue, please try <a>searching again</a> or <a>start a new thread</a>.
----

Comment 16

[Paul Craciunoiu [:paulc]]

Attachment: demo implemented (top)

Comment 17

[Paul Craciunoiu [:paulc]]

Attachment: demo implemented (bottom)

Comment 18

[[:Cww]]

Rather than "Resolved" can we instead have "This solution has been verified" or even just "Verified solution"

Comment 19

[Paul Craciunoiu [:paulc]]

Yay, the minify's finally been updated! See it at the url in comment 15.

I can replace "Resolved" with "Verified solution". I'd like to have the whole list of desired changes before I commit again. See comment 15 again, we should merge the two boxes.

Comment 20

[Majken Connor [:Kensie]]

(In reply to comment #18)
> Rather than "Resolved" can we instead have "This solution has been verified" or
> even just "Verified solution"

I think that's going in the wrong direction. The text should be friendlier. "This answer worked!" or something like that.

Comment 21

[David Tenser [:djst]]

"This answer solved the problem."

Comment 22

[Paul Craciunoiu [:paulc]]

r26301
Thanks David, after our conversation I've done the following changes:
* "Resolved!" to "This answer solved the problem."
* Switch font sizes between "This problem has been resolved." and "See solution!"
* Make the above two both of the same color (the darker green from "This problem has been resolved")
* Remove yellow notification box from top and leave it on bottom only
* Replace "resolved" with "solved" to be consistent
Again, I hope I didn't forget anything.

Comment 23

[Paul Craciunoiu [:paulc]]

Ah yes, and:
* Make the background color lighter for the solution thread
(It had already been committed, I forgot to mention it)

Comment 24

[Paul Craciunoiu [:paulc]]

David, if you could take a final look and give it a go, I'll commit this to 1.2 on prod as soon as we push 1.1 out the door :)

Comment 25

[David Tenser [:djst]]

Where can this be tested / seen?

Also, you'll want to submit a patch and ask for review (always!).

Comment 26

[Paul Craciunoiu [:paulc]]

(In reply to comment #25)
> Where can this be tested / seen?
> 
> Also, you'll want to submit a patch and ask for review (always!).

See comment 15. Gotta run now, but I'll land a patch after my final today... :)

Comment 27

[Paul Craciunoiu [:paulc]]

Attachment: prod-read patch

Patch of all changes. Attachment with images to follow.

Comment 28

[Paul Craciunoiu [:paulc]]

Attachment: solvedtopic images, goes in webroot/styles/mozfr

Comment 29

[Laura Thomson :laura]

Comment on attachment 382239 [details] [diff] [review]
prod-read patch

I think there are bits missing from the patch. I checked out prod and applied the patch.  You can see it here:
http://laura.dm-sumotools01.mozilla.org/tiki-view_forum_thread.php?locale=en-US&comments_parentId=369220&forumId=1

Comment 30

[Paul Craciunoiu [:paulc]]

Attachment: v2

The former yellow-box at the top was still showing up. Note that the actual answer thread in the post is not highlighted unless it has been marked by "This answer solved my problem". I believe many of the answered threads do not actually have a solved thread set, but that's not in the scope of this bug, AFAICT.

Comment 31

[Laura Thomson :laura]

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

Commit ASAP please.

Comment 32

[Paul Craciunoiu [:paulc]]

r28317 for prod

Comment 33

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

Noah, when you have a chance, would you mind taking a look at this on staging?  (Comment 15 should do the trick.)  Thanks!

Comment 34

[Noah (NoahSUMO/SolidSnake) [:Noah]]

Looks great! Thanks Paul!

Comment 35

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

I tested this too; looks good.

Verified FIXED (and thanks, Noah).