623904 - Update questions app to new theme

Status: VERIFIED FIXED

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

Description

[Ricky Rosario [:rrosario, :r1cky]]

The questions app needs updating to blend in better with the new theme on the rest of SUMO. To get there, we are going to need some direction from UX (chowse?).

Comment 2

[Chris Howse [:chowse]]

First version:

http://people.mozilla.com/~chowse/drop/sumo/questions/v1/questions.html
http://people.mozilla.com/~chowse/drop/sumo/questions/v1/thread.html

Still needs some tweaks, but wanted to get this in front of SUMOdev to see if it's correct and comprehensive.

(I would not recommend using the HTML/CSS verbatim. It's been labelled arbitrarily and is very unorganized.)

Comment 3

[Chris Howse [:chowse]]

Updates based on people's feedback:

http://people.mozilla.com/~chowse/drop/sumo/questions/v2/

Comment 4

[James Socol [:jsocol, :james]]

I actually have a bunch of questions still:

* I thought we were dropping the "Forum" part of "Firefox Help / Forum" since it's a model not used elsewhere on the site.

* Pagination: is there no way to left align that? This should be consistent across all of SUMO.

* The sidebar boxes are different. Not only do they have different content (which is fine) but the background color is #CCE2F3 instead of #CDE6F5, the border radius is .25em instead of 10px, and the headings are #3A4692 instead of #32559B.

* The separator under the sub header is unique and not used anywhere else on the site.

* The blue backgrounds are not used anywhere else on the site.

* The speech bubble motif is only used on Army of Awesome, and the bubbles are different there.

* Breadcrumbs which are used on the rest of the site are missing.

* The editor buttons [1] are out of date. [2]
[1] http://people.mozilla.com/~chowse/drop/sumo/questions/v2/thread.html#thread-add-reply
[2] https://support.allizom.org/en-US/questions/774528#question-reply (must be logged in)


All of these things contribute to this section still feeling _different_, when the goal was to make Questions feel like it was part of the same site as SUMO. And many of them mean that Questions will continue to need custom CSS for common elements instead of using the (now common) styles.

Is the intent that the rest of the site will match the styles in these mockups? I know that was the intent around the buttons, since those are used across mozilla.com as well.

Comment 5

[Chris Howse [:chowse]]

(In reply to comment #4)
> I actually have a bunch of questions still:
> 
> * I thought we were dropping the "Forum" part of "Firefox Help / Forum" since
> it's a model not used elsewhere on the site.

It was removed on the Thread mockup, but I overlooked the Questions page. It's corrected now.


> * Pagination: is there no way to left align that? This should be consistent
> across all of SUMO.

Corrected. As long as it's scannable, I'm fine with a left- or center-aligned pager. In this case, though, it should be indented to match the surrounding content.


> * The sidebar boxes are different. Not only do they have different content
> (which is fine) but the background color is #CCE2F3 instead of #CDE6F5, the
> border radius is .25em instead of 10px, and the headings are #3A4692 instead of
> #32559B.

Corrected. Color were taken from PSDs, which were apparently slightly different.


> * The separator under the sub header is unique and not used anywhere else on
> the site.

This was a deliberate design decision. There is no 'edge' between the page heading and content like there is for the KB, and Questions doesn't have a large heading block (like AoA or .com's brochure pages). A thin separator was the best way I found to separate heading from content.


> * The blue backgrounds are not used anywhere else on the site.

Another design decision:

* The speech balloons needed a slightly contrasting color below them to
  make them more legible. This could be inverted (e.g. blue on white), but
  then different colors would be needed for solutions and best replies.

* There needed to be a way of clustering different groups of messages. A
  colored block seemed more practical than dividers.


> * The speech bubble motif is only used on Army of Awesome, and the bubbles are
> different there.

I'm attempting to adapt that style of speech bubble to questions, but it is fairly complex and will require a.) border-images, b.) a bunch of absolutely positioned divs, or c.) several backgrounds and a fixed width. I wanted to address the layout first.


> * Breadcrumbs which are used on the rest of the site are missing.

I'll try to add these back, but this ties into the difficulty that spurred the separator mentioned above. Breadcrumbs tend to appear as a menu or are attached to a header, which will be a bit tricker on the Thread page.


> * The editor buttons [1] are out of date. [2]
> [1]
> http://people.mozilla.com/~chowse/drop/sumo/questions/v2/thread.html#thread-add-reply
> [2] https://support.allizom.org/en-US/questions/774528#question-reply (must be
> logged in)

This has been pointed out and I'm working to correct this.


> All of these things contribute to this section still feeling _different_, when
> the goal was to make Questions feel like it was part of the same site as SUMO.

I think you overestimate how sensitive people will be to these differences. The site shares the same branding, color, typography, and nav as the rest of SUMO-- nothing to indicate that you've left the support site. Many of these differences are byproducts of the fact that a forum (Questions) will look and behave differently from a wiki (KB) or news feed (AoA). 


> And many of them mean that Questions will continue to need custom CSS for
> common elements instead of using the (now common) styles.

Except for the some of the common nav/form elements mentioned above, what parts weren't going to require custom CSS? What parts of Questions were to be used elsewhere?


> Is the intent that the rest of the site will match the styles in these mockups?
> I know that was the intent around the buttons, since those are used across
> mozilla.com as well.

Certain elements I think would benefit becoming standards. Some others I'm in the process of modifying so they better fit the site's current design. We can discuss the particulars offline.

Comment 6

[James Socol [:jsocol, :james]]

(In reply to comment #5)
> It was removed on the Thread mockup, but I overlooked the Questions page. It's
> corrected now.

Woot!

> Corrected. As long as it's scannable, I'm fine with a left- or center-aligned
> pager. In this case, though, it should be indented to match the surrounding
> content.

Yay!

> Corrected. Color were taken from PSDs, which were apparently slightly
> different.

\o/

> > * The separator under the sub header is unique and not used anywhere else on
> > the site.
> 
> This was a deliberate design decision. There is no 'edge' between the page
> heading and content like there is for the KB, and Questions doesn't have a
> large heading block (like AoA or .com's brochure pages). A thin separator was
> the best way I found to separate heading from content.

OK, I get that on the thread pages, though the list of questions does seem to have a strong visual separation.

Should we look at doing something like this elsewhere, like on search[1] or chat[2], instead of using the KB-style separator? (Those are both examples of visual separation with breadcrumbs, btw.)

[1] https://support-release.allizom.org/en-US/search?q=test
[2] https://support-release.allizom.org/en-US/chat

> > * The blue backgrounds are not used anywhere else on the site.
> 
> Another design decision:
> 
> * The speech balloons needed a slightly contrasting color below them to
>   make them more legible. This could be inverted (e.g. blue on white), but
>   then different colors would be needed for solutions and best replies.

OK, I get that.

> * There needed to be a way of clustering different groups of messages. A
>   colored block seemed more practical than dividers.

I get the solution and most helpful groupings. The weird part to me is the full-width blue background in the thread view, since the only other full-width thing we do is the footer. Again, is it a motif that you think is useful elsewhere on the site?

> > * The speech bubble motif is only used on Army of Awesome, and the bubbles are
> > different there.
> 
> I'm attempting to adapt that style of speech bubble to questions, but it is
> fairly complex and will require a.) border-images, b.) a bunch of absolutely
> positioned divs, or c.) several backgrounds and a fixed width. I wanted to
> address the layout first.

I definitely prefer the style that doesn't require any of that weirdness, i.e., the flexible bubbles you've created already. This was a pretty minor complaint.

> > * Breadcrumbs which are used on the rest of the site are missing.
> 
> I'll try to add these back, but this ties into the difficulty that spurred the
> separator mentioned above. Breadcrumbs tend to appear as a menu or are attached
> to a header, which will be a bit tricker on the Thread page.

The breadcrumbs we have now usually live just above the blue/white border of the content (cf the links above and [3])

[3] https://support-release.allizom.org/en-US/forums/contributors/607622

> This has been pointed out and I'm working to correct this.

Win!

> > All of these things contribute to this section still feeling _different_, when
> > the goal was to make Questions feel like it was part of the same site as SUMO.
> 
> I think you overestimate how sensitive people will be to these differences. The
> site shares the same branding, color, typography, and nav as the rest of SUMO--
> nothing to indicate that you've left the support site. Many of these
> differences are byproducts of the fact that a forum (Questions) will look and
> behave differently from a wiki (KB) or news feed (AoA).

Branding and typography yes, color mostly, but the nav in the rest of the site is usually a combination of tabs (KB, user profiles) and breadcrumbs. The global header nav isn't SUMO nav, and we're trying to reduce it's visual footprint (starting with bug 624695).

> > And many of them mean that Questions will continue to need custom CSS for
> > common elements instead of using the (now common) styles.
> 
> Except for the some of the common nav/form elements mentioned above, what parts
> weren't going to require custom CSS? What parts of Questions were to be used
> elsewhere?

Most of them you addressed above. Now the things that will require overriding in Questions are just:

* The separator below the header.
* The right-most column on the thread view.

> Certain elements I think would benefit becoming standards. Some others I'm in
> the process of modifying so they better fit the site's current design. We can
> discuss the particulars offline.

Ping me whenever.

Comment 7

[Ricky Rosario [:rrosario, :r1cky]]

(In reply to comment #6)
> I get the solution and most helpful groupings. The weird part to me is the
> full-width blue background in the thread view, since the only other full-width
> thing we do is the footer. Again, is it a motif that you think is useful
> elsewhere on the site?

Oh thanks for explicitly pointing out full-width background. That might be pretty painful to implement. It would require some rethinking our DOM structure and template CSS because right now the container of all the content (between the header and footer) has a fixed width. It would be awesome if we could lose that :-P.

Comment 8

[Chris Howse [:chowse]]

Latest mockups:
http://people.mozilla.org/~chowse/drop/sumo/questions/v3/

Tracked changes:
https://github.com/chowse/sumo-questions-mockup

The only remaining change I have planned is to fix the 'markup' toolbar used in posting replies. Let me know if there's anything else missing.


@jsocol @rrosario: I had a responses prepared for you individual points, but
I think I can simplify things down to these 2 points:

* For most details, it's a question of where Questions should be more like
  the style of SUMO's existing apps, or they should adopt the conventions used
  in these mocks. While there are several things I'd like to see the latter
  applied, I don't have the time or details currently to pursue them. So I've
  adjusted things in the Questions mock to match existing elements in other
  SUMO apps, except where I think they'd affect the design too negatively.
  When we decide to update these elements, we can do them across the board.

* Speaking of which: changing the global header (bug 624695) is going to free 
  up a lot of space. This would also probably be the best opportunity on some
  header and navigation conventions for all apps on SUMO, including Questions.
  But this may have to wait until the "nav tab" design is finalized and we
  know how much space we have to work with (e.g could we fit a horizontal
  menu at the top of the page?)

Comment 9

[James Socol [:jsocol, :james]]

(In reply to comment #8)
> Latest mockups:
> http://people.mozilla.org/~chowse/drop/sumo/questions/v3/

I like this revision a lot.


> * For most details, it's a question of where Questions should be more like
>   the style of SUMO's existing apps, or they should adopt the conventions used
>   in these mocks. While there are several things I'd like to see the latter
>   applied, I don't have the time or details currently to pursue them. So I've
>   adjusted things in the Questions mock to match existing elements in other
>   SUMO apps, except where I think they'd affect the design too negatively.
>   When we decide to update these elements, we can do them across the board.

Are there any simple things you think we should adopt across SUMO sooner than later? The button design is a great example: that will be easier to update across the board than just do for Questions.

I would at some point love to steal

> * Speaking of which: changing the global header (bug 624695) is going to free 
>   up a lot of space.

We're just going with the thinner header from [1], not the tab from [2] yet.

[1] https://addons.mozilla.org/en-US/firefox/
[2] https://addons.mozilla.org/en-US/thunderbird/

> This would also probably be the best opportunity on some
>   header and navigation conventions for all apps on SUMO, including Questions.
>   But this may have to wait until the "nav tab" design is finalized and we
>   know how much space we have to work with (e.g could we fit a horizontal
>   menu at the top of the page?)

When that's ready, I think we should take a hard look at SUMO's on-site nav from the home page on down.

Comment 10

[Ricky Rosario [:rrosario, :r1cky]]

Landed on master \o/
https://github.com/jsocol/kitsune/commit/58817ce19573009d5872f505c18f869eaa355f5c

Comment 11

[Rebecca Billings [:rbillings]]

Verified new questions design has been implemented, will file bugs separately