Opened 3 years ago

Closed 3 years ago

#21381 closed enhancement (fixed)

CollecTor web-page should have new Metrics design

Reported by: iwakeh Owned by: metrics-team
Priority: Medium Milestone:
Component: Metrics/CollecTor Version:
Severity: Normal Keywords:
Cc: RaBe Actual Points:
Parent ID: Points:
Reviewer: Sponsor:

Description

web-page(s) and file listing (maybe) should have new Metrics design

Child Tickets

Change History (45)

comment:1 Changed 3 years ago by karsten

Right. A few thoughts:

  • I hear that people use the two blue buttons at the top a lot. Whatever we change, we should make sure that these buttons can be reached without scrolling down.
  • The lists under Parsing Libraries and Related Work should go away. We should instead include links to the Tor Metrics home page or the Tor Metrics development page in the introduction.
  • I guess the Support section can also go away, if we tell people to go to Tor Metrics for questions, suggestions, or other feedback.
  • Similar to the Onionoo page, I could imagine that we need some box with links to anchors on the page.

comment:2 Changed 3 years ago by iwakeh

That sounds good, and I second the emphasis on the archive- and recent-buttons.
A box for navigation might be sufficient. Maybe RaBe has some suggestions, too?

Should we include a link to the wiki mirror list or have mirrors listed here?

comment:3 in reply to:  2 Changed 3 years ago by karsten

Replying to iwakeh:

That sounds good, and I second the emphasis on the archive- and recent-buttons.
A box for navigation might be sufficient. Maybe RaBe has some suggestions, too?

Sounds good!

Should we include a link to the wiki mirror list or have mirrors listed here?

Yes, we should!

comment:4 Changed 3 years ago by RaBe

Just to have something that we can start talking about, I merged the metrics and collector page into this: collector.cc-ltd.net. I also added the design to the file list (just use one of the two buttons...).

I moved the anchor links to the main navigation, which is common for "one pagers". The icons are pretty random for now... I did not alter the content, it's mainly copy&paste :)

Let me know what you think!

comment:5 Changed 3 years ago by iwakeh

Neat!

I think some content elements will go away (like parsing libraries), but that's a different discussion.

Regarding the menu: could the menu bar just be moved to the top menu? (That's where metrics.tp.o has 'News' etc.)
That way the buttons would move up a little.

comment:6 Changed 3 years ago by RaBe

Since this is the navigation for the main content, I feel like it might be a bit too far away up there? For now, I decreased the headers size a bit (and added the missing mobile navigation) :)

comment:7 Changed 3 years ago by iwakeh

Thanks for the update!

Could you just remove the menu points for 'related work', 'parsing libraries', and 'support'?
These will be removed when we edit the content (see comment:1); and without them we get a better picture of the future site.

There is one more feature missing (comment:1): some box (or similar) with links to anchors on the page.
Is that troublesome to add?

comment:8 Changed 3 years ago by RaBe

I removed the three menu items and the affiliated content. Since the menu items ARE the anchor links, I did not add an additional box. But we could do that if needed, it'd look like here: metrics.cc-ltd.net/?page=examples - if we use a box like this for the three anchor links, we could remove the main menu. But I think it's nice to have the full width available for the content, especially the table list. What do you think? :)

comment:9 in reply to:  8 Changed 3 years ago by iwakeh

Replying to RaBe:

I removed the three menu items and the affiliated content.

Thanks :-)

Since the menu items ARE the anchor links, I did not add an additional box. But we could do that if needed, it'd look like here: metrics.cc-ltd.net/?page=examples - if we use a box like this for the three anchor links, we could remove the main menu. But I think it's nice to have the full width available for the content, especially the table list. What do you think? :)

There are many second level headlines, which would be reachable from the box (that's what the example does). So, the box would contain more than the three menu items.

I see the problem about the width, but the page is really long and one can get easily lost. The table wastes a lot of space for the button links. Could that be improved? Then the box on the left would have room. The paragraphs with text are short enough to not pose a problem, when there is a box on the right, I think.
What other options do we have for structuring the page better?

comment:10 Changed 3 years ago by RaBe

Ah, I see. I added a side nav box with anchors for the data formats section. We could also think about putting the three content sections at three separate pages...

comment:11 Changed 3 years ago by karsten

Joining the party a bit late here. Nice prototype you have there! That's already pretty close, I'd say. Some suggestions and thoughts:

  • How about we take out the nav bar at the top and use a single side nav box with anchors for the entire page? The main reason for taking out the nav bar is that we could keep that navigational element for navigating between pages as a consistent element on metrics-related pages. And if a page consists only of a single, long page, then there's no need for a nav bar and we use a nav box instead.
  • Another advantage of not using a nav bar is that it will be easier to add new sections, without having to hunt for new icons. (I'm also thinking of the other metrics-related sites here.)
  • Compared to the current side nav box, the box I have in mind would need two, or better three hierarchy levels, like:
    • Available Descriptors
    • Data Formats
      • Tor Relay Descriptors
        • Relay Server Descriptors
        • Relay Extra-info Descriptors
        • ...
  • If possible, the text should float around the side nav box, so that it only reduces horizontal space on the first screen or so, not on the screens further down below. No idea what CSS tricks that requires, if any.
  • Unrelated to navigation, I think we'll need to put a link to Tor Metrics somewhere as well as a link to the Tor website. The latter also applies to the Tor Metrics website which still lacks a link to the Tor website.

comment:12 Changed 3 years ago by RaBe

Status: newassigned

I don't think a main navigation for a one page navigation is "wrong". You see many websites nowadays who do this... However, I understand that it does work another way on the metrics page. So, we also could split the page into three separate pages?

Here's the version just with the data formats anchor box floating "in the text" (but still one page), as you suggested:

collector.cc-ltd.net/#data-formats

Also, I made a version with the whole menu as an anchor box. It doesn't float here, because the next element is a table, and that wouldn't work out...

collector.cc-ltd.net/onepager.php (2 levels - moved to mobile menu on XS devices)
collector.cc-ltd.net/onepager2.php (3 levels, but I think that's a bit too much)

(Yeah, for now I kept the icons, for optical reasons :) )

Let me know what you think!

comment:13 Changed 3 years ago by karsten

Hmm, this is tricky. Neither of the three suggestions is bad, but I'm also not a big fan of either of them:

  • I still think that we should reserve the navigation bar for actual pages.
  • I don't think that we should split the current single page into three, because that wouldn't distribute the content equally; it's like writing a book with three chapters: prologue, the big story chapter, epilogue.
  • I could rather see us split up the page into six subpages that are currently contained in the big story chapter: Relay Descriptors, Bridge Descriptors, Hidden/Onion Service Descriptors, BridgeDB, TorDNSEL, Torperf; plus another two that we might add sooner or later: Webstats and Bwauth. But I also believe that's a bit of overkill.
  • The current navigation side boxes next to the jumbotron don't really fit into the general page design.
  • The table under "Available Descriptors" is already like a table of contents, except for the "Automated Downloads" part at the end.
  • I'm still concerned about having to find new icons.

Suggestion: How about we simply drop all navigational elements like the navigation bar and the navigation side box and leave the big table with buttons at the page start for people to navigate?

One tiny downside is that we'd have to come up with a similar solution for the Onionoo page which is quite long. Though, hmm, maybe we can just keep the table of contents there.

Too unfancy?

comment:14 in reply to:  13 Changed 3 years ago by iwakeh

Replying to karsten:

Hmm, this is tricky. Neither of the three suggestions is bad, but I'm also not a big fan of either of them:

  • I still think that we should reserve the navigation bar for actual pages.

Agreed.

  • I don't think that we should split the current single page into three, because that wouldn't distribute the content equally; it's like writing a book with three chapters: prologue, the big story chapter, epilogue.

True. And, one major advantage of one-pagers is browser search (which I use often).

  • I could rather see us split up the page into six subpages that are currently contained in the big story chapter: Relay Descriptors, Bridge Descriptors, Hidden/Onion Service Descriptors, BridgeDB, TorDNSEL, Torperf; plus another two that we might add sooner or later: Webstats and Bwauth. But I also believe that's a bit of overkill.

True, that is too much.

  • The current navigation side boxes next to the jumbotron don't really fit into the general page design.
  • The table under "Available Descriptors" is already like a table of contents, except for the "Automated Downloads" part at the end.
  • I'm still concerned about having to find new icons.

All valid concerns.

Suggestion: How about we simply drop all navigational elements like the navigation bar and the navigation side box and leave the big table with buttons at the page start for people to navigate?

Yep, that makes sense.

One tiny downside is that we'd have to come up with a similar solution for the Onionoo page which is quite long. Though, hmm, maybe we can just keep the table of contents there.

Yes, keep the contents table and rely on browser search ;-)

Too unfancy?

Not at all, the new lean style ;-)

comment:15 Changed 3 years ago by RaBe

So here's an update: collector.cc-ltd.net

I removed any navigation elements, added an icon to the buttons to clearify they're clickable and adjusted the content table (linked the first item, split the table, merged the two button columns). I'm not sure if we should keep the table heading at all, or even repeat it on every table section?

comment:16 Changed 3 years ago by karsten

Looks good to me! If iwakeh (or somebody) else don't raise any concerns, I'll apply this design to the CollecTor page later this weekend. I'd just try out what looks better with respect to table headings, but those are things we can still tweak after applying the main design. Thanks a lot!

comment:17 Changed 3 years ago by iwakeh

Neat!
This will be fine with the table headlines edited.

Maybe, when tweaking have a visual marker for data that is only available as archive?

comment:18 in reply to:  17 ; Changed 3 years ago by karsten

Replying to iwakeh:

Neat!
This will be fine with the table headlines edited.

Yep!

Maybe, when tweaking have a visual marker for data that is only available as archive?

Plausible. Can you give an example how that would look like?

Here's a related idea: we could add a column for the interval for which we have data. That could contain entries like "October 2008 to date" for data that is available under archive or recent or "June 2011 to July 2014" for data that is only available under archive.

comment:19 in reply to:  18 Changed 3 years ago by iwakeh

Replying to karsten:

...

Maybe, when tweaking have a visual marker for data that is only available as archive?

Plausible. Can you give an example how that would look like?

The missing recent-buttons just looked odd;
I didn't have any idea how, but your suggestion about the dates of availability triggered one (see below).

Here's a related idea: we could add a column for the interval for which we have data. That could contain entries like "October 2008 to date" for data that is available under archive or recent or "June 2011 to July 2014" for data that is only available under archive.

Rather not another column; the three column setup is fine. This information could be placed in the first column below the descriptor name and/or where there is no recent-button (only where there are no recent collections anymore) or just a not available sign/text like "only archived" instead of the empty field.

comment:20 Changed 3 years ago by karsten

Status: assignedneeds_revision

There, I applied the design to the CollecTor website. I spotted a few problems, most of them minor:

  • It looks like the recent button in the "Available Descriptors" table is 1px lower than the archive button next to it.
  • The syntax highlighting of directory listing pages indicates there's one </div> too much or something. Maybe related, the table background on directory listing pages shouldn't be gray.
  • None of the pages is W3C compliant, e.g., https://validator.w3.org/nu/?doc=https%3A%2F%2Fcollector.torproject.org%2F. If I had some easy recommendations how to fix these issues, I could probably fix most of them myself. (The same goes for the Metrics website, but that probably deserves its own ticket once this one is resolved.)

What else needs fixing?

iwakeh, would you want to take the code and try out your suggestion on your mirror? You'll find the code here.

comment:21 Changed 3 years ago by iwakeh

Here a very simple suggestion; the n/a could be replaced with an icon.

  • Main page: All the recent- and archive-buttons seem to be unaligned by pixel values. It varies with browser window size.
  • Directory listing: The headings "last modified" and "size" are not above the column they belong to.

comment:22 Changed 3 years ago by RaBe

To fix the unaligned issue, please just add the class "pull-left" to the recent buttons.

For the grey file list, there are TWO </div> missing after the closing </table>.

The last modified and size columns have "align=right" set, remove this to align the columns properly. You might want to add a width to the "Name"'s table header: <th style="width:80%;">

comment:23 in reply to:  22 Changed 3 years ago by karsten

Replying to RaBe:

To fix the unaligned issue, please just add the class "pull-left" to the recent buttons.

Fixed!

For the grey file list, there are TWO </div> missing after the closing </table>.

Fixed!

The last modified and size columns have "align=right" set, remove this to align the columns properly. You might want to add a width to the "Name"'s table header: <th style="width:80%;">

I'm afraid we don't have control over those tags, because they are automatically generated by Apache. We need to accept everything between <table> and </table> and work around that by modifying the stylesheet. Is that possible?

comment:24 Changed 3 years ago by RaBe

Add these two lines to the "CollecTor-specific Styles"

.filelist table tr th:first-of-type { width:80%; }
.filelist table tr td { text-align:left; }

comment:25 in reply to:  24 ; Changed 3 years ago by karsten

Replying to RaBe:

Add these two lines to the "CollecTor-specific Styles"

.filelist table tr th:first-of-type { width:80%; }
.filelist table tr td { text-align:left; }

Fixed!

comment:26 in reply to:  25 ; Changed 3 years ago by iwakeh

Replying to karsten:

Replying to RaBe:

Add these two lines to the "CollecTor-specific Styles"

.filelist table tr th:first-of-type { width:80%; }
.filelist table tr td { text-align:left; }

Fixed!

Added the other tweaks and this to my CollecTor, too.
Except that the date looks better when using only 60% for the first column, i.e.
.filelist table tr th:first-of-type { width:60%; }

comment:27 in reply to:  26 Changed 3 years ago by karsten

Replying to iwakeh:

Replying to karsten:

Replying to RaBe:

Add these two lines to the "CollecTor-specific Styles"

.filelist table tr th:first-of-type { width:80%; }
.filelist table tr td { text-align:left; }

Fixed!

Added the other tweaks and this to my CollecTor, too.
Except that the date looks better when using only 60% for the first column, i.e.
.filelist table tr th:first-of-type { width:60%; }

Okay, changed in my redesign branch, too. Maybe stash your changes, pull from that branch, and reapply your changes, just to be sure you have all fixes so far. (For example, you still have the gray background because of two missing </div>.) And maybe you have other changes you didn't mention yet?

Here's the (short) list of remaining issues:

  • We should either find a prettier solution than writing "n/a", or we should decide that leaving the spot blank is the best we can do.
  • We should at least try to make all pages W3C compliant, except if that's too hard.

comment:28 Changed 3 years ago by karsten

Just pushed another minor fix.

Remaining issues:

  • We should either find a prettier solution than writing "n/a", or we should decide that leaving the spot blank is the best we can do.
  • Looks like the main W3C compliance issue on index.html is: "Error: The font element is obsolete. Use CSS instead." What's the best fix here?

comment:29 Changed 3 years ago by RaBe

Instead of <font color="#666">...</font> you could use <span style="color:#666;">...</span>. However, I think you can remove the font tag without replacement anyway, I'm not sure why we would want grey colored text there :)

comment:30 Changed 3 years ago by karsten

Actually, good question! Made it black, warnings are gone!

Okay, down to one:

  • We should either find a prettier solution than writing "n/a", or we should decide that leaving the spot blank is the best we can do.

iwakeh, what do you think about that one? How much do you care about this issue? :)

comment:31 Changed 3 years ago by iwakeh

I don't feel strong about it, but just one last attempt of an idea :-)
Maybe, grey recent button without the >?

And, my other suggestion is adding the dates to those descriptor names that only have archives, like: Version 2 Network Statuses, 2005 to 2012

But, if no one else likes these ideas ... ;-)

comment:32 Changed 3 years ago by RaBe

You could just add the class "disabled" to an "n/a" recent button to show it's not available right now. But I'd prefer the empty space :)

comment:33 in reply to:  32 ; Changed 3 years ago by iwakeh

Replying to RaBe:

You could just add the class "disabled" to an "n/a" recent button to show it's not available right now. But I'd prefer the empty space :)

I'll try that :-)

A more important question: Is there a way to have to edit only one place in order to display 'CollecTor Mirror' instead of just 'CollecTor' everywhere (all titles and the header)?

comment:34 in reply to:  31 Changed 3 years ago by karsten

Replying to iwakeh:

I don't feel strong about it, but just one last attempt of an idea :-)
Maybe, grey recent button without the >?

I'm not sure if that wouldn't lead to confusion where users would expect that recent data is usually available, just not now. Or maybe on other mirrors, not this one. Leaving the space blank when the other lines have a button in that place should be obvious.

And, my other suggestion is adding the dates to those descriptor names that only have archives, like: Version 2 Network Statuses, 2005 to 2012

I like this idea, because it's mine it adds new information that could be useful for users. Though I would prefer to add this information to all descriptor types, because it's still useful to know for which time we're serving version 1, 2, or 3 directories/statuses. I just don't know where to add this information in a way that doesn't clutter the interface too much. Happy to add this information if somebody suggests where to add it.

Note that this doesn't fully solve the issue of missing buttons. The reason why there are no recent directory key certificates is that they are published very rarely and there size is tiny, so there's no real point in providing just the certificates for the past 3 or even 30 days. Similarly, we might consider providing just the latest auxiliary data that we have, like reverse DNS lookup data, without providing an archive.

But, if no one else likes these ideas ... ;-)

comment:35 in reply to:  33 ; Changed 3 years ago by karsten

Replying to iwakeh:

A more important question: Is there a way to have to edit only one place in order to display 'CollecTor Mirror' instead of just 'CollecTor' everywhere (all titles and the header)?

I'm afraid the only way is to write a tiny script for this, possibly one that uses sed.

comment:36 in reply to:  35 Changed 3 years ago by iwakeh

Replying to karsten:

Replying to iwakeh:

A more important question: Is there a way to have to edit only one place in order to display 'CollecTor Mirror' instead of just 'CollecTor' everywhere (all titles and the header)?

I'm afraid the only way is to write a tiny script for this, possibly one that uses sed.

no script :-)

I have an "absent" button now ;-)
But, no further discussion necessary, just leave it empty on the main version.

Yes, the dates were your idea, full credit! I simplified it to just years to clarify the missing button. But it's hard to add all information without cluttering the table.

Last edited 3 years ago by iwakeh (previous) (diff)

comment:37 Changed 3 years ago by karsten

No, let's try to avoid differences between the main version and the mirror. We can find a compromise! :)

I was just kidding with the dates being great, because they were my idea. Sorry, I just didn't know how to include an emoticon in the strikethrough without chopping the head in two... ;) And I have to be honest, it was not entirely my idea. Here's a related website which inspired me: http://www.caida.org/data/overview/. Should we give this another try?

comment:38 in reply to:  37 ; Changed 3 years ago by iwakeh

Replying to karsten:

No, let's try to avoid differences between the main version and the mirror. We can find a compromise! :)

Oh, I'm only playing and intended to remove the differences once the new version is on master.
(BTW the third mirror doesn't feature the web pages at all.) I think once there is an embedded simple web-server, the mirrors will be easily identified as such, but otherwise all look the same.

I was just kidding with the dates being great, because they were my idea. Sorry, I just didn't know how to include an emoticon in the strikethrough without chopping the head in two... ;) And I have to be honest, it was not entirely my idea. Here's a related website which inspired me: http://www.caida.org/data/overview/. Should we give this another try?

hmm, the caida site features 'vintage web-design'. I don't even see how it inspired your idea?

The table could just contain the years of availability and the textual descriptions can be edited to tell more about the availability. That way all information is there on the page.

comment:39 in reply to:  38 Changed 3 years ago by karsten

Replying to iwakeh:

Replying to karsten:

No, let's try to avoid differences between the main version and the mirror. We can find a compromise! :)

Oh, I'm only playing and intended to remove the differences once the new version is on master.
(BTW the third mirror doesn't feature the web pages at all.) I think once there is an embedded simple web-server, the mirrors will be easily identified as such, but otherwise all look the same.

Ah, that sounds good!

I was just kidding with the dates being great, because they were my idea. Sorry, I just didn't know how to include an emoticon in the strikethrough without chopping the head in two... ;) And I have to be honest, it was not entirely my idea. Here's a related website which inspired me: http://www.caida.org/data/overview/. Should we give this another try?

hmm, the caida site features 'vintage web-design'. I don't even see how it inspired your idea?

Heh, the part that inspired me is that they offer "ongoing" (start, no end), "one-time snapshot" (start == end), and "complete" (start and end) data sets. In a way, we have the same, with current descriptor types being in the "ongoing" category, older descriptor types in the "complete" category, and non-displayed experiment data sets in the "one-time snapshot" category. (I didn't mention the last part, because the concept seemed useful just for the first two parts.)

The table could just contain the years of availability and the textual descriptions can be edited to tell more about the availability. That way all information is there on the page.

Sounds like a good plan, if I understand it correctly. Though I'd also want to include months in the table, because that's the time unit we use in our archives.

RaBe, would you be able to put together a simple prototype from the description above?

comment:40 Changed 3 years ago by RaBe

I'm not 100% sure this is what you want, but I put an expiry date to the descriptors that have no recent button, so no interface cluttering at all: collector.cc-ltd.net

If you wanted something else, please give me a brief summary :)

comment:41 Changed 3 years ago by karsten

Hmm, I'm not sure. I see how it saves space to put the expiry date in the free spot. But it seems counter-intuitive to include additional data that is only relevant for the archive in the place that is otherwise used for recent descriptors. And note that we didn't stop collecting directory key certificates, we just don't provide recent ones because they are published so infrequently that we can put them all in a single tarball under archive.

I think I still prefer leaving the spot of the recent button blank whenever we don't have recent descriptors. Either that, or we should include start and possibly end dates for all descriptor types.

comment:42 in reply to:  41 Changed 3 years ago by iwakeh

Replying to karsten:

Hmm, I'm not sure. I see how it saves space to put the expiry date in the free spot. But it seems counter-intuitive to include additional data that is only relevant for the archive in the place that is otherwise used for recent descriptors. And note that we didn't stop collecting directory key certificates, we just don't provide recent ones because they are published so infrequently that we can put them all in a single tarball under archive.

I think I still prefer leaving the spot of the recent button blank whenever we don't have recent descriptors. Either that, or we should include start and possibly end dates for all descriptor types.

Yes, just leave it blank.
An idea for the certificates: the first column could be Directory Key Certificates, archive only.
That would be similar to those with dates of availability.

comment:43 Changed 3 years ago by karsten

Okay, let's just leave it blank. The first column, "Descriptor Type", should just contain the descriptor type. And if somebody really wonders why there's no recent button for certificates, they should follow the link and read the 2 sentences of text.

Does that mean we have addressed all issues and suggestions above?

comment:44 in reply to:  43 Changed 3 years ago by iwakeh

Status: needs_revisionmerge_ready

Replying to karsten:

Okay, let's just leave it blank. The first column, "Descriptor Type", should just contain the descriptor type. And if somebody really wonders why there's no recent button for certificates, they should follow the link and read the 2 sentences of text.

Does that mean we have addressed all issues and suggestions above?

Yes, all done.

comment:45 Changed 3 years ago by karsten

Resolution: fixed
Status: merge_readyclosed

Great, squashed and merged into master. Closing. Thanks, RaBe and iwakeh!!

Note: See TracTickets for help on using tickets.