search

catchpoint / WebPageTest

Official repository for WebPageTest
Other
3.07k stars 715 forks source link

Design of multistep result pages #653

Closed sburnicki closed 8 years ago

sburnicki commented 8 years ago

I want to start to implement multistep support (#618) in the different result pages. Before getting started, I'd like to discuss the way the results hould be presented.

With multistep, the results per page increase. The way we chose in our fork before was to to just display all the results of all steps below each other (per run/view).

image

For some pages, we provided quicklinks on the top for better navigation on the page.

image

On the details page we also show all step results per run, but grouped (waterfalls, connection views, request details). This way it's for example possible to quickly compare waterfalls of different steps. We introduced an "accordeon" to load the different results asynchronously and avoid long loading times.

image

I'm also open for new ideas to make the results overseeable. If nobody has better ideas, I'd implement the pages similar to our fork.

pmeenan commented 8 years ago

Sounds good to me. Only piece I'm not sure about are the grades. I wouldn't want multiple rows of grades all in the header because it would push all of the other content out of view. Maybe average all of the grades for the one at the top and then include the per-step gradings with the individual results (or only on the details page to avoid over-cluttering the main results page).

pmeenan commented 8 years ago

Not sure but it might be nice to auto-expand the first waterfall accordion.

Also, the quicklinks for the "customize waterfall" and "view all images" should probably just go to the actual destination pages since they are just links.

sburnicki commented 8 years ago

Average grades in the header make sense. The first screenshot is actually from the performance review page, where grades for all steps are presented.

Regarding the waterfalls: I also think it makes sense to auto-expand the first waterfall. With step-specific anchor links (which are also used in quicklinks), the target accordeon also gets automatically expanded.

And I agree that quicklinks for "customize waterfall" and "view all images" should be the "real" links.