539742 - Revise front page and navigation

Status: RESOLVED FIXED

(Socorro :: General, task)

Description

[Michael Morgan [:morgamic]]

Tracking bug for front page and navigation improvements.

Comment 1

[Michael Morgan [:morgamic]]

The front page doesn't show very much helpful information and funnels people towards the query form.  While the query form is useful, I think we can help people find what they need a little better.

Ideas for what we could add:
- top movers widget: show the signatures (per-product) that had the largest delta between yesterday and today
- ADU widget: show crashes per 1k ADU per product (sparklines)
- new crashes: show crashes that were new this week or today
- extinct crashes: show crashes that were here yesterday but gone today?

Comment 2

[Michael Morgan [:morgamic]]

As far as navigation, we're doing okay but the "trend reports" menu doesn't have much context, and there's really no way to know that we've got a sticky application/version.  The introduction of a horizontal submenu once a sticky application is chosen might help, or some other idea to better separate trend reports from production selection.

Comment 3

[Chris Howse [:chowse]]

Mocks for updated top-level nav are available here:
http://people.mozilla.org/~chowse/drop/socorro/nav/v1/
These should clarify the connection between products/versions and trend reports, without complicating current navigation. Since all reports currently use the full width of the browser, I'm limiting these changes to the top header.

Here's a rundown:

http://people.mozilla.org/~chowse/drop/socorro/nav/v1/nav_top.png
Primary navigation for selecting a product. Shown on the front page. Provides shortcuts for selecting the most common versions.

http://people.mozilla.org/~chowse/drop/socorro/nav/v1/nav_secondary.png
Secondary navigation for selecting a particular version or report. Shown everywhere that a product has been selected (namely, everywhere by the Front Page and Advanced Search page).

http://people.mozilla.org/~chowse/drop/socorro/nav/v1/nav_states.png
The various states of the top nav bar and when/where they appear.

Questions and feedback welcome.

(Also: I'm currently finalizing Overview pages [i.e. dashboards] for the Front Page, a single product, and a single version. I'll be providing mocks as well as ideas for what they should contain. If you have any requests or suggestions [in addition to those in comment #2], please let me know.)

Comment 4

[Ryan Snyder [:ryansnyder] [:rsnyder] [:rysny]]

I like it.   I think secondary nav is going to help immensely with making the site easy to navigate.

The only thing I find a bit awkward is having both a dropdown menu and a secondary nav.  What if...  When the user hovers over a product element, instead of having a dropdown menu the secondary nav for that product appeared?

Are we supporting Sunbird?

Comment 5

[Chris Howse [:chowse]]

(In reply to comment #4)
> The only thing I find a bit awkward is having both a dropdown menu and a
> secondary nav.  What if...  When the user hovers over a product element,
> instead of having a dropdown menu the secondary nav for that product appeared?

I understand this is a bit counter-intuitive, but it was a calculated usability decision. The "show secondary nav on hover" approach has a few problems:

1.) The secondary nav menu is long and narrow, making it a difficult region to navigate the mouse within. If the secondary nav exhibits typical menu behavior (i.e. it reverts/vanishes once the mouse leaves its space), this becomes extremely annoying to interact with. There are heuristics that can make this more manageable (buffer zones, sticky menus), but they have problems of their own.

2.) The secondary nav menu for each product is very similar, almost to the point that changes might go unnoticed. The combination of the drop-down and page refresh makes the choices and change more visible.

3.) Since clicking anything in the secondary nav causes an instant page refresh, you can only change one thing: the version or the report. Thus, you're not saving any more clicks than with the drop-down (well, unless you change product & report at the same time). That, and you must do it with smaller click targets.

For an example of this in action, take a look at the top nav on this site: http://bit.ly/9Xyvc

Comment 6

[Chris Howse [:chowse]]

Some overview/dashboard mocks:

Front Page: http://people.mozilla.org/~chowse/drop/socorro/nav/v1/overview_front.png
Product Page: http://people.mozilla.org/~chowse/drop/socorro/nav/v1/overview_product.png

Starting simple, trying to preserve the functionality of the current Top Crashers page, but also add:
* ADU charts for the most common products/versions
* The ability to see top movers and domains/URLs as well as top crashers from the dashboard.
* A placeholder panel for adding more data, navigation, or copy.

A few questions for Socorro's users:
* Does this expose data that's useful to you at a glance, or does it still require constant drill-downs?
* What data do you want to see side-by-side? For example, on both pages, you can see the Top Crashers for 3 versions next to each other. Is this useful, or would it be better to show the Top Crashers, Top Movers, and Top Domains for a single version? Or is there another combination of products/versions/reports that you'd like to see?
* What types of questions do you typically try to answer with Socorro? Are there any types of tasks that would be a good fit for Socorro, but are too difficult with the current interface? Are these problems with locating the right information, the way the information's presented, or other causes?

Comment 7

[Chris Howse [:chowse]]

Other ideas for front-page content:
* Correlation data (especially for plug-ins) once it's integrated.
* Bugs: list of Bugzilla entries associated with crash signatures. In particular:
  * Open bugs associated with high-occurrence crash signatures.
  * Recently fixed bugs linked to crash signatures.

Comment 8

[Austin King [:ozten]]

(In reply to comment #7)
Correlation data is integrated. Given a Product, Version, and Signature you can get the different reports.

See "Correlation tab" in
https://crash-stats.stage.mozilla.com/report/index/f45958d5-2a70-420e-a3d7-e974d2100107#modver

Comment 9

[Ryan Snyder [:ryansnyder] [:rsnyder] [:rysny]]

I'm making progress on integrating the navigation and overall design in the sandbox.  Most of the controllers will need some refactoring in order to make sure we're not repeating code.  And I'm holding off on some pieces, like the dropdown navigation, as I'm grabbing all of the low hanging fruit at the moment.  I'll continue to hack away.  

http://rsnyder.khan.mozilla.org/reporter/products/Firefox

Looking forward to people's responses about the overview/dashboard mockups.

Comment 10

[Austin King [:ozten]]

(In reply to comment #7)
chowse - do you need anything else to finalize the designs?

Comment 11

[Ryan Snyder [:ryansnyder] [:rsnyder] [:rysny]]

Attachment: Patch 1 for 539742

Attached is the 1st patch for the new UI / template.  We're still awaiting final changes from chowse.  But, this patch includes much of the 1st version of his template, a decent amount of refactoring in the Controllers / Models, and a CSS file that has been organized and trimmed.

I would prefer to push this to stage relatively soon, so that we can get a few more people to interact with the new design and to determine whether there is any CSS that was incorrectly removed.

Comment 12

[Chris Howse [:chowse]]

(In reply to comment #10)
> chowse - do you need anything else to finalize the designs?
Nope, think I have everything I need. Finishing the product+version overview and visual design.

Comment 13

[Chris Howse [:chowse]]

Updated dashboard wireframes:

http://people.mozilla.org/~chowse/drop/socorro/nav/v1/overview_front.png
http://people.mozilla.org/~chowse/drop/socorro/nav/v1/overview_product.png
http://people.mozilla.org/~chowse/drop/socorro/nav/v1/overview_version.png

Each follows a similar template: crashes/ADU in the top-left, recent bugs in the top-right, and top crashers on the bottom.

To fill the previous placeholder, I've added a panel containing lists of bugs (associated w/ crash signatures) that have been recently opened or fixed:

http://people.mozilla.org/~chowse/drop/socorro/nav/v1/panel_bugs.png

Ryan, does something like this seem feasible? If not, we can forgo the extra panel and have the chart span the width of the page.

Visual designs are almost finished, and will be posted for you review shortly.

Comment 14

[Ryan Snyder [:ryansnyder] [:rsnyder] [:rysny]]

Attachment: Patch 2 for 539742

Merging svn changes per Austin's request.  Minor updates to ensure that ADU graphs are displaying properly.

Comment 15

[Austin King [:ozten]]

(In reply to comment #13)
Using Ryan's current patch, I expect a "Search Resent Crashes" link or button when I'm on the dashboard view, but within the context of a specific version.

I see the advanced search button, but this would link directly to the search results.

Also clicking Adv Search, when already on a Prod/Version should set those in the Adv Search form.

Comment 16

[Austin King [:ozten]]

Comment on attachment 424329 [details] [diff] [review]
Patch 2 for 539742

General Comments:
Great cleanup work! Nice html. 

for url helper methods (site, redirect) you use 
'foo' instead of '/foo'. Does it matter? I've been using url::site('/foo') everywhere.

products controller line: 127 - Make urls more RESTful. All required parameters should be part of the url and make optional parameters either query string parameters or  arguments with default values.

Nice clean controller. I like site::url in the controller, cleans up the view a little

views/product/products.php line:7 - prefix link with $base_url prepared by the controller
On /products Clicking a product has the wrong url

js/socorro/nav.js line:9 
Clicking More Reports option loads
/topcrasher/byurl/Firefox/More%20Reports
this function should ignore that value.

Great work!

Comment 17

[Chris Howse [:chowse]]

First high-fidelity mockup:

http://people.mozilla.org/~chowse/drop/socorro/nav/v1/vis/sample.png

Sliced images + style guide forthcoming.

Comment 18

[Chris Howse [:chowse]]

Style guide:

http://people.mozilla.org/~chowse/drop/socorro/nav/v1/vis/style.html

Fonts, colors, and images for all the UI. Will add chart styles and a footer shortly, but what's there now should suffice.

Comment 19

[Ryan Snyder [:ryansnyder] [:rsnyder] [:rysny]]

Thanks Chris!  Looking great...

Added the nav updates in my sandbox...

http://rsnyder.khan.mozilla.org/reporter

Will fine tune some pieces on my end and send back to Austin for a code review in the next couple of days.

Comment 20

[Ryan Snyder [:ryansnyder] [:rsnyder] [:rysny]]

Attachment: Patch 3 for 539742

Attached is patch number 3.

The bugzilla activity stream was going to be a bit difficult to implement in a short amount of time, so instead I added top changing top crashers.

Thanks Austin for the prior code review.  The only piece left untouched from your recommendations is the RESTful request.  All calls run through index() on the Products Controller so that there is a unified place that we can verify valid products and versions.  I think it should suffice...

Comment 21

[Austin King [:ozten]]

Comment on attachment 424935 [details] [diff] [review]
Patch 3 for 539742

Great work! Nice cleanup and good organization.

Let's try to get a lot of usability feedback when this hits stage.

Comment 22

[Austin King [:ozten]]

One minor knit is - remove the arrow from the currently focused product, since there is no drop down menu when you hover over that arrow.

Comment 23

[Ryan Snyder [:ryansnyder] [:rsnyder] [:rysny]]

Thanks Austin.

I updated the 1.5 Upgrade notes:
http://code.google.com/p/socorro/wiki/SocorroUpgrade#Socorro_1.5

Will need to ensure that the products.php config is copied over on stage.

==

Adding         webapp-php/application/config/products.php-dist
Sending        webapp-php/application/config/routes.php
Sending        webapp-php/application/controllers/daily.php
Sending        webapp-php/application/controllers/home.php
Adding         webapp-php/application/controllers/products.php
Sending        webapp-php/application/controllers/query.php
Sending        webapp-php/application/controllers/topcrasher.php
Sending        webapp-php/application/libraries/MY_Controller.php
Sending        webapp-php/application/models/daily.php
Sending        webapp-php/application/models/topcrashers.php
Adding         webapp-php/application/views/common/dashboard_product.php
Sending        webapp-php/application/views/daily/daily_crash_data_by_os.php
Sending        webapp-php/application/views/daily/daily_crash_data_by_version.php
Sending        webapp-php/application/views/daily/daily_search.php
Sending        webapp-php/application/views/daily/index.php
Deleting       webapp-php/application/views/home/dashboard.php
Sending        webapp-php/application/views/layout.php
Adding         webapp-php/application/views/products
Adding         webapp-php/application/views/products/product.php
Adding         webapp-php/application/views/products/product_version.php
Adding         webapp-php/application/views/products/products.php
Sending        webapp-php/application/views/topcrasher/byversion.php
Sending        webapp-php/css/daily.css
Sending        webapp-php/css/screen.css
Adding         webapp-php/img/2.0
Adding  (bin)  webapp-php/img/2.0/down-selected.png
Adding  (bin)  webapp-php/img/2.0/down.png
Adding  (bin)  webapp-php/img/2.0/footer-bg.png
Adding  (bin)  webapp-php/img/2.0/header-bg.png
Adding  (bin)  webapp-php/img/2.0/logo.png
Adding  (bin)  webapp-php/img/2.0/mozilla.png
Adding  (bin)  webapp-php/img/2.0/panel-bg.png
Adding  (bin)  webapp-php/img/2.0/product-bg.png
Adding  (bin)  webapp-php/img/2.0/product-selected-bg.png
Adding  (bin)  webapp-php/img/2.0/search.png
Adding  (bin)  webapp-php/img/2.0/title.png
Adding  (bin)  webapp-php/img/2.0/version-bg.png
Sending        webapp-php/js/socorro/dashboard.js
Sending        webapp-php/js/socorro/nav.js
Transmitting file data ....................................
Committed revision r1746.