Last modified: 2012-08-04 21:11:02 UTC
Created attachment 10653 [details] Streamlined reader view of the feedback page Here are a number of formatting tweaks we propose to streamline the feedback page design, make it look simpler, fit better on small screens and avoid overlap between UI elements. See preliminary mockups attached below (new prototype and CSS code to be provided shortly by Pau Giner). 1. Overall * Add 'on' in the page title: 'Feedback on Drew Barrymore' (instead of 'Feedback: Drew Barrymore'). * Keep new warning messages implemented separately by Matthias (which removed the red 'Beta' label for now) * Say '<x> posts about this page' below the title (instead of '96 feedback posts on this article'--we cannot use the 'article' word, because of internationalization policies) * Slide 'Showing' to left-align it with above text * Use these font styles and colors for indicating selected filters: - selected filter should be black and bold, same font style as 'Showing' (e.g.: 'All comments' in mockup) - the other filter link should be blue, for consistency with other links (e.g.: 'Most relevant' in mockup) * When selecting a filter, show the yellow 'Loading' label above the toolbar, to the right of the filter selection menu (instead of below the toolbar). * Change toolbar and tab color to match upcoming prototype from Pau Giner (hold off on that item until then) * Simplify 'Sort by' options as follows: - Relevant [most relevant posts shown first] - Newest [most recent posts shown first] - Oldest [earliest posts shown first] * If recommended by Pau Giner, switch the 'Sort by' selector to be a drop-down menu (hold off on that item until we get Pau's updated prototype). * Don't show '0% helpful' next to any helpful labels - only show this label if more than one person marked it as helpful (this also excludes showing '100% helpful' if only one person marked it as such). * Don't show '(0)' next to any flag labels - only show the number if it's higher than zero. * Show '(x)' counter next to flag labels in same light gray font style and size as for 'y% helpful' and don't include a link under that counter (continue to include a link behind 'Flag as abuse' and 'Flagged for abuse', though). * Remove the red color under 'Flag this post' when a post has been flagged 3 times (it seems more confusing than helpful, based on what Chris reported last week). * Only show 'Featured' or 'Resolved', whichever was selected last (don't show both one on top of another, to save space). * Implement the CSS code recommended by Pau Giner to make the UI more compact and prevent objects from overlapping each other (hold off on that item until we get Pau's updated prototype). 2. Reader View Only * Don't show readers any other filter options besides 'Most relevant' and 'All comments' (simply remove the 'More filters' menu for readers, but not for editors) * Don't show readers any '(66% helpful)' numbers next to helpful labels (only show them to editors) * Don't show readers any '(x)' numbers next to flag labels (only show them to editors - I think we're doing this already, just putting this here for confirmation) 3. Editor View Only * Show editors the tools available for their user rights (with a greater height for each post for oversighters than for editors, based on the number of tools available to them). * Show editors any '(66% helpful)' numbers next to helpful labels (except 0%) * Show editors any '(x)' numbers next to flag labels (except 0) * Show gray labels for 'Hidden' and 'Oversighted' (just like 'Featured' or 'Resolved' labels, for editors only) * Show link called 'See Central Feedback Page >' at the bottom of this *article* feedback page (below the 'See More Posts' bar, same font size and style as 'See feedback page' on the permalink page). To see a *preliminary* version of Pau Giner's prototype, download this Zip file: http://dl.dropbox.com/u/30377416/prototypes/feedback-tool/article-feedback/tabbed/article-feedback-changes.zip (but please hold off until Pau's next prototype to implement the changes indicated above as dependent on that new prototype).
Created attachment 10654 [details] Streamlined editor view of the feedback page
As discussed, we would like to update the CSS for the feedback page based on Pau Giner's latest prototype: r2.zip">http://dl.dropbox.com/u/30377416/prototypes/feedback-tool/article-feedback/tabbed/article-feedback-changes-r2.zip We will also adopt Pau's new design for the top toolbar (see attached mockup: 'article-feedback-page-mockup-new-tab-design-pau-giner-05-29.png'), which changes the color scheme and makes tabs less prominent (just highlighting the line segment below the option). The width of the toolbar has been also reduced to allow a more compact view without elements overlapping. We will also implement a standard drop-down menu for the 'Sort by', as shown in your mockup, to make the UI more compact for small screens. We discussed implementing HTML drop-downs with the developers, but they said that it would require a lot more work with only minimal benefits, so we will postpone this idea for future releases, as well as the toggle button ideas. Lastly, we will also make the flag counter more explicit by displaying '(x flags') as a separate label to the right of the 'Flag as abuse' link. That label can still turn red after 3 flags (to indicate that a certain number of users have flagged the post.) These new requirements supersede any of the specifications above, in the event of conflicts. All other specifications will be implemented as described above. We encourage developers to start with the easiest requirements, so we can deploy them next week, and email us if you find serious issues with any of the above requests, so we can find workarounds.
Created attachment 10668 [details] article-feedback-page-mockup-new-tab-design-pau-giner-05-29.png
One more formatting tweak for the 'central' feedback page only, please: At the top of each post on that page, add a link to the permalink page under the word 'feedback', as shown in this example: '69.84.16.62 posted <feedback> to Razor cut3 minutes ago | Details' This will be exactly the same link as used under the word 'details', but it makes it part of the main sentence, rather than showing it as a minor label with a small font after that sentence. It is fine to keep the word 'Details' with its current link, as we have it now. To be clear, this change would only be for the 'central' feedback page, not to the article feedback page.
Some clarifications regarding the HTML prototypes I made: I isolated the CSS adjustments in a single file (modifications.css) which overrides existing CSS rules. The provided file is not intended to be included as is but to indicate which rules to be modified and added for each change. I also had to modify the HTML structure of the page to achieve some changes. The modifications I made were: * Remove separators for filters. * The Select element for filters has been wrapped by a div with id="select-wrapper" * Featured label has been included as part of the header of the post (inside the div with class="articleFeedbackv5-comment-head") The image bg-special-row.png was also modified to match the reduction in with for the tool bar (and it has been directly linked in the CSS).
Thanks, Pau, that is really helpful! We have one more request for a feedback page tweak from Howie, related to the '(x% helpful)' feature. He would like us to display the numbers of 'yes' and 'no' answers somehow, so people can get a sense of how meaningful the percentage is. Our proposal is to add this info as a tool tip, so that it appears when you hover over (x% helpful). This would be the same exact info we used to display before we switched to percentages, as shown in this example: '3 yes / 2 no' If there are any issues with displaying this info as a tool tip, perhaps a fall-back solution could be to make this a toggle link, and to display the info next to the link on the first click, then hide it on the second click. This is a medium-priority request, though it would be nice to have it by next week's deployment, if it's easy to do.
This commit has all of the css and markup changes, except for the percent-helpful change: https://gerrit.wikimedia.org/r/#/c/9523/
Missed the flag as abuse change as well -- will add with helpful
The two missing tasks are done, pushed to prototype, and submitted to the same gerrit commit.
Hi guys, As discussed, here is the list of feedback page formatting tweaks that were not deployed to production on Tuesday. It would be great if we could get them done for next Tuesday's deployment, if feasible. Let me know if you would like to pull out any of these tasks into a separate ticket. Thanks. 1. Overall * Add 'on' in the page title: 'Feedback on Drew Barrymore' (instead of 'Feedback: Drew Barrymore'). * Say '<x> posts about this page' below the title (instead of '96 feedback posts on this article'--we cannot use the 'article' word, because of internationalization policies) * Slide 'Showing' to left-align it with above text * Use these font styles and colors for indicating selected filters: - selected filter should be black and bold, same font style as 'Showing' (e.g.: 'All comments' in mockup) - the other filter link should be blue, for consistency with other links (e.g.: 'Most relevant' in mockup) This essentially reverses the color scheme we are now using for these two filter links. * Increase the width of the 'More filters' drop-down menu by about 50 pixels, to show the widest item in that menu ('Oversight-requested'), including a 4-digit counter). Increase the page minimum width by 50 pixels (up to 900), to make that happen without collisions. * Remove some of the filters that begin with 'un-', as requested in this Bugzilla ticket: https://bugzilla.wikimedia.org/show_bug.cgi?id=36920 ('Un-featured, Un-resolved, Un-hidden, Oversight-unrequested, Un-oversighted') * When selecting a filter, show the yellow 'Loading' label above the toolbar, to the right of the filter selection menu (instead of below the toolbar). * Don't show '0% helpful' next to any helpful labels - only show this label if more than one person marked it as helpful (this also excludes showing '100% helpful' if only one person marked it as such). * Show the numbers of 'yes' and 'no' answers, so people can get a sense of how meaningful the percentage is. This additional helpfulness info will be displayed as a tool tip, so that it appears when you hover over (x% helpful). This would be the same exact info we used to show before we switched to percentages, as shown in this example: '3 yes / 2 no' * Don't show '(0)' next to any flag labels - only show the number if it's higher than zero. * Show '(x)' counter next to flag labels in same light gray font style and size as for 'y% helpful' and don't include a link under that counter (continue to include a link behind 'Flag as abuse' and 'Flagged for abuse', though). * Only show 'Featured' or 'Resolved', whichever was selected last (don't show both one on top of another, to save space). 2. Reader View Only * Don't show readers the drop-down menu for 'More filters'. This means that readers will only have two filter options: 'Most relevant' and 'All comments' (simply remove the 'More filters' drop-down menu for readers, but not for editors). * Simplify 'Sort by' drop-down menu options to only show these for readers: - Relevant [most relevant posts shown first] - Irrelevant [least relevant posts shown first] - ---- (include divider in drop-down) - Newest [most recent posts shown first] - Oldest [earliest posts shown first] [Note that we are trying to use shorter words here, to remove visual clutter, hence the request to NOT use 'Highest relevance', which is too long. We cannot use 'Most relevant' either, because it would be redundant with the filter by the same name. It is OK to keep all the other sorting options in code, even if they are not shown in this menu, for when we get a chance to implement URL parameters for filtering/sorting.] * Don't show readers any '(66% helpful)' numbers next to helpful labels (only show them to editors and up) * Don't show readers any '(x)' numbers next to flag labels (only show them to editors - I think we're doing this already, just putting this here for confirmation) 3. Editor View Only * Show editors, monitors and oversighters the tools available for their user rights (with a greater height for each post for oversighters than for editors, based on the number of tools available to them). * If it's easy, show two more 'Sort by' menu items for editors and up, as so: - Relevant [most relevant posts shown first] - Irrelevant [least relevant posts shown first] - ---- (include divider in drop-down) - Newest [most recent posts shown first] - Oldest [earliest posts shown first] - ---- (include divider in drop-down) - Helpful [most helpful posts shown first] - Unhelpful [least helpful posts shown first] * Show editors any '(66% helpful)' numbers next to helpful labels (except 0%) * Show editors any '(x)' numbers next to flag labels (except 0) * Show gray labels for 'Hidden' and 'Oversighted' (just like 'Featured' or 'Resolved' labels, for editors only) * Show link called 'See Central Feedback Page >' at the bottom of this *article* feedback page (below the 'See More Posts' bar, same font size and style as 'See feedback page' on the permalink page). 4. Central Feedback Page * At the top of each post on that page, add a link to the permalink page under the word 'feedback', as shown in this example: '69.84.16.62 posted <feedback> to Razor cut3 minutes ago | Details' This will be exactly the same link as used under the word 'details', but it makes it part of the main sentence, rather than showing it as a minor label with a small font after that sentence. It is fine to keep the word 'Details' with its current link, as we have it now. To be clear, this change would only be for the 'central' feedback page, not to the article feedback page.
*** Bug 36920 has been marked as a duplicate of this bug. ***
To follow up on our phone conversation today, here are some adjustments From editor view section: * Show gray labels for 'Hidden' and 'Oversighted' (just like 'Featured' or 'Resolved' labels, for editors only). Since we cannot easily track which action was taken last, let's follow this hierarchy, so if any of these labels is present, the highest ranked label in the hierarchy will be shown instead of the others: 1- Oversighted 2- Hidden 3- Resolved 4- Featured * Show link called 'See more feedback from other pages' at the bottom of this *article* feedback page (below the 'See More Posts' bar -- instead of 'See Central Feedback Page >', no angle brackets or chevrons) From Central Feedback Page section: * Remove this request: At the top of each post on that page, add a link to the permalink page under the word 'feedback'. No longer needed, per discussion with Pau Giner.
We also agreed to drop this requirement to avoid wrapping in the filter/sort section: * When selecting a filter, show the yellow 'Loading' label above the toolbar, to the right of the filter selection menu (instead of below the toolbar).
*** Bug 37357 has been marked as a duplicate of this bug. ***
Completed and submitted to gerrit: https://gerrit.wikimedia.org/r/#/c/10940/
