Opened 7 years ago

Closed 7 years ago

#6679 closed defect (implemented)

Make Compass' website interface more intuitive

Reported by: asn Owned by: gsathya
Priority: Medium Milestone:
Component: Metrics/Compass Version:
Severity: Keywords:
Cc: gsathya, karsten Actual Points:
Parent ID: Points:
Reviewer: Sponsor:

Description

For starters: I'm not exactly sure what compass.tpo is supposed to do. I saw it mentioned in #6662 but when I visited the website I was quite confused.

Some comments:

a) Maybe the front page of compass should explain what it's supposed to do (like atlas does).

b) I'm not sure what the results are when I hit 'Submit'. I get a list of relays, but I'm not sure why they are there or why they are sorted this way.

c) What is 'CW'? It seems that the default sorting is based on 'CW'. Maybe when you mouseover 'CW' it should display a small description of what it means (same for P_guard etc.).

d) Initially I thought that AS39138 was the default value of AS, but it seems like it's an example. Maybe the example should be mentioned on the right of the text box (after the "select only relays from AS number" description)?

e) What is the 'cancel' button supposed to be doing?

BTW I understand that compass is a new service and that it's perfectly normal for its UI to not be super user-friendly yet.

Child Tickets

Change History (11)

comment:1 in reply to:  description ; Changed 7 years ago by karsten

Summary: Compass UI is not very intuitiveMake Compass' website interface more intuitive

Replying to asn:

For starters: I'm not exactly sure what compass.tpo is supposed to do. I saw it mentioned in #6662 but when I visited the website I was quite confused.

Some comments:

Thanks for the feedback! Some issues are already known, so I'm going to add the ticket numbers here. Others are new. They are rather small, so we can probably keep them in this ticket.

a) Maybe the front page of compass should explain what it's supposed to do (like atlas does).

#6639

b) I'm not sure what the results are when I hit 'Submit'. I get a list of relays, but I'm not sure why they are there or why they are sorted this way.

This may become more when #6618 is implemented. If not, we can change the default "Submit" to something more meaningful, and maybe add some text.

c) What is 'CW'? It seems that the default sorting is based on 'CW'. Maybe when you mouseover 'CW' it should display a small description of what it means (same for P_guard etc.).

CW stands for consensus weight. We might as well write it out in full there. Or we could add mouseovers for a few things. P_guard is the probability to be picked for the guard position. You're right, these need mouseovers.

d) Initially I thought that AS39138 was the default value of AS, but it seems like it's an example. Maybe the example should be mentioned on the right of the text box (after the "select only relays from AS number" description)?

Agreed, this could be made more clear.

e) What is the 'cancel' button supposed to be doing?

A fine question. I guess it's there because it's the default to have Submit and Cancel. It can go away.

BTW I understand that compass is a new service and that it's perfectly normal for its UI to not be super user-friendly yet.

Thanks for your feedback. That's very valuable!

comment:2 in reply to:  1 ; Changed 7 years ago by gsathya

Replying to karsten:

Replying to asn:

b) I'm not sure what the results are when I hit 'Submit'. I get a list of relays, but I'm not sure why they are there or why they are sorted this way.

This may become more when #6618 is implemented. If not, we can change the default "Submit" to something more meaningful, and maybe add some text.

Not sure how #6618 fixes this. Possibly the About page should contain information on what happens behind the scenes.

c) What is 'CW'? It seems that the default sorting is based on 'CW'. Maybe when you mouseover 'CW' it should display a small description of what it means (same for P_guard etc.).

CW stands for consensus weight. We might as well write it out in full there. Or we could add mouseovers for a few things. P_guard is the probability to be picked for the guard position. You're right, these need mouseovers.

Tooltips(http://twitter.github.com/bootstrap/javascript.html#tooltips) or Popover(http://twitter.github.com/bootstrap/javascript.html#popovers)?

d) Initially I thought that AS39138 was the default value of AS, but it seems like it's an example. Maybe the example should be mentioned on the right of the text box (after the "select only relays from AS number" description)?

Agreed, this could be made more clear.

This is supposed to provide an example of how the input should be. That's why it's greyed out(the input default is black). This is the standard web convention for forms. Here's a google account sign up page - http://i.imgur.com/LaJWn.png
If this is still confusing, I'll change it.

e) What is the 'cancel' button supposed to be doing?

A fine question. I guess it's there because it's the default to have Submit and Cancel. It can go away.

It's supposed to be a "Reset" button. I should possibly rename it to "Reset" then.

BTW I understand that compass is a new service and that it's perfectly normal for its UI to not be super user-friendly yet.

Thanks for your feedback. That's very valuable!

Thanks for the feedback :)

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

Replying to gsathya:

Replying to karsten:

Replying to asn:

b) I'm not sure what the results are when I hit 'Submit'. I get a list of relays, but I'm not sure why they are there or why they are sorted this way.

This may become more when #6618 is implemented. If not, we can change the default "Submit" to something more meaningful, and maybe add some text.

Not sure how #6618 fixes this. Possibly the About page should contain information on what happens behind the scenes.

Ah, my idea that #6618 fixes this was that the results list in combination with search fields might help people interpret what this is all about. Of course, the About page would help a lot, too.

Tooltips(http://twitter.github.com/bootstrap/javascript.html#tooltips) or Popover(http://twitter.github.com/bootstrap/javascript.html#popovers)?

Oh, popovers are tempting. Though we'll have to be careful not to add too much information. We could start with the field descriptions on Onionoo's protocol page and cut out as much as we can while still keeping it informative.

And maybe we should avoid abbreviations in column headers and write "consensus weight", "guard probability", "middle probability", "exit probability", "country", and "autonomous system". That would already clear up some confusion, I bet.

d) Initially I thought that AS39138 was the default value of AS, but it seems like it's an example. Maybe the example should be mentioned on the right of the text box (after the "select only relays from AS number" description)?

Agreed, this could be made more clear.

This is supposed to provide an example of how the input should be. That's why it's greyed out(the input default is black). This is the standard web convention for forms. Here's a google account sign up page - http://i.imgur.com/LaJWn.png
If this is still confusing, I'll change it.

Are you sure it's correctly greyed out? When using DigitalColor Meter, I get the same RGB values for an example and an actual input value.

e) What is the 'cancel' button supposed to be doing?

A fine question. I guess it's there because it's the default to have Submit and Cancel. It can go away.

It's supposed to be a "Reset" button. I should possibly rename it to "Reset" then.

Sure, "Reset" would be better.

comment:4 in reply to:  3 ; Changed 7 years ago by gsathya

Owner: set to gsathya
Status: newassigned

Replying to karsten:

Replying to gsathya:
Ah, my idea that #6618 fixes this was that the results list in combination with search fields might help people interpret what this is all about. Of course, the About page would help a lot, too.

Gotcha!

Tooltips(http://twitter.github.com/bootstrap/javascript.html#tooltips) or Popover(http://twitter.github.com/bootstrap/javascript.html#popovers)?

Oh, popovers are tempting. Though we'll have to be careful not to add too much information. We could start with the field descriptions on Onionoo's protocol page and cut out as much as we can while still keeping it informative.

Sounds good. asn liked tooltips better I think. I'm ok with either. Let me know which to use

And maybe we should avoid abbreviations in column headers and write "consensus weight", "guard probability", "middle probability", "exit probability", "country", and "autonomous system". That would already clear up some confusion, I bet.

Okay. Initially I didn't have space and the table extended out of the container that's why I abbreviated them. I'll see if this is still the case now that we've reduced the fingerprint size.

Are you sure it's correctly greyed out? When using DigitalColor Meter, I get the same RGB values for an example and an actual input value.

Not sure if your screen is calibrated properly? My DigitalColor Meter tells me it's different - http://imgur.com/a/HtztE

e) What is the 'cancel' button supposed to be doing?

Sure, "Reset" would be better.

Okay will change!

Thanks!

comment:5 in reply to:  4 Changed 7 years ago by karsten

Replying to gsathya:

Sounds good. asn liked tooltips better I think. I'm ok with either. Let me know which to use

Sure, let's try tooltips then. It shouldn't be too hard to change that later if we realize we need more space.

And maybe we should avoid abbreviations in column headers and write "consensus weight", "guard probability", "middle probability", "exit probability", "country", and "autonomous system". That would already clear up some confusion, I bet.

Okay. Initially I didn't have space and the table extended out of the container that's why I abbreviated them. I'll see if this is still the case now that we've reduced the fingerprint size.

Sounds good.

Are you sure it's correctly greyed out? When using DigitalColor Meter, I get the same RGB values for an example and an actual input value.

Not sure if your screen is calibrated properly? My DigitalColor Meter tells me it's different - http://imgur.com/a/HtztE

Hmmm. I get the darker gray for both cases. This is Firefox 14.0.1. No clue why it doesn't use the lighter gray for the example. Feel free to ignore if this is not an easy fix.

comment:6 Changed 7 years ago by gsathya

Status: assignedneeds_revision

Please review my bug_6697 branch and let me know if there's anything else to change! Thanks!

comment:7 Changed 7 years ago by gsathya

Status: needs_revisionneeds_review

comment:8 Changed 7 years ago by karsten

Status: needs_reviewneeds_revision

Reset button and text field colors look better. Merged and deployed those two changes.

But why do the table headers with tooltips now look like links? Is it possible to add tooltips without turning the underlying text into links? That's how Atlas uses them, e.g., uptime in the results view and in the details view. Also, the tooltip for CW should be something like "Relative bandwidth weight assigned to this relay by the directory authorities compared to the total bandwidth weights in the network".

comment:9 in reply to:  8 ; Changed 7 years ago by gsathya

Status: needs_revisionneeds_review

Replying to karsten:

Reset button and text field colors look better. Merged and deployed those two changes.

But why do the table headers with tooltips now look like links?

I thought it wouldn't be obvious that hovering over it might produce more info/text unless you made it look different from other text. I thought of adding a '?', but that was kinda ugly. Anyway, fixed.

https://github.com/gsathya/compass/compare/bug_6679

comment:10 in reply to:  9 ; Changed 7 years ago by karsten

Replying to gsathya:

I thought it wouldn't be obvious that hovering over it might produce more info/text unless you made it look different from other text. I thought of adding a '?', but that was kinda ugly. Anyway, fixed.

I agree that it's not entirely obvious that there's info text for these five column headers. I bet if we add tooltips for more column headers or in other places, people will get used to it quite quickly.

https://github.com/gsathya/compass/compare/bug_6679

Thanks! Merged and deployed.

It looks like this concludes the ticket, right? If so, please close.

comment:11 in reply to:  10 Changed 7 years ago by gsathya

Resolution: implemented
Status: needs_reviewclosed

Replying to karsten:

Thanks! Merged and deployed.

Thanks! :)

It looks like this concludes the ticket, right? If so, please close.

Yep. Closing.

Note: See TracTickets for help on using tickets.