Opened 8 years ago

Closed 6 years ago

#3749 closed enhancement (implemented)

integrate html redesign into check.tpo

Reported by: phobos Owned by: Sebastian
Priority: Medium Milestone:
Component: Applications/Tor Check Version:
Severity: Keywords:
Cc: mikeperry, jmtodaro Actual Points:
Parent ID: #4381 Points:
Reviewer: Sponsor:

Description

A new design for check.tpo is done, see #1598. The html needs to be integrated into the existing codebase. The new html and images are available at https://svn.torproject.org/svn/projects/misc/phobos/2011-check_redesign_files.tar.gz

Child Tickets

Change History (16)

comment:1 Changed 8 years ago by mikeperry

Cc: mikeperry added

We need a third page design for the upgrade notice from #2285.

Also, what about translations?

comment:2 Changed 8 years ago by mikeperry

To be more of a nitpick, I think two of the three boxes of text on http://jmtodaro.com/tor/check/success.html are irrelevant for TBB users. The rightmost one might still be nice, but how to balance it against #3962?

Perhaps we can just replace all 3 boxes with the searchbox, and find a more succinct way to tell people how they can help below that searchbox, where we mention Tor is a non-profit.

comment:3 Changed 8 years ago by karsten

Milestone: Tor Check Enhancements
Parent ID: #4381

Assigning as a child ticket to the project ticket that replaces the "Tor Check Enhancements" milestone.

comment:4 Changed 8 years ago by Sebastian

Owner: changed from nickm to Sebastian
Status: newassigned

comment:5 Changed 8 years ago by aagbsn

Status: assignedneeds_information

code:

https://github.com/aagbsn/TorCheck

live example:

https://check.extc.org

What is blocking:

TorBEL has a few remaining bugs, although periodic rebooting could be a workaround.
TorBEL really drags my VM down, so the live example above isn't a good example of performance.
Translations: none other than cut-n-paste google-translate spanish

Things we need:

Where will check.tpo be deployed? A VM?
Official git repo.

comment:6 Changed 8 years ago by aagbsn

I added some of the translated strings from check.tpo; and noticed that the redesign doesn't always accommodate longer strings. See for example:

https://check.extc.org?lang=uk or https://check.extc.org?lang=ro

Thoughts?

comment:7 Changed 8 years ago by Sebastian

Hrm, that needs to be addressed by Jeremy, it seems...

Also, do we really want to overload the page even more by starting to advertise for random stuff like duckduckgo?

comment:8 in reply to:  7 Changed 8 years ago by aagbsn

Replying to Sebastian:

Hrm, that needs to be addressed by Jeremy, it seems...

Also, do we really want to overload the page even more by starting to advertise for random stuff like duckduckgo?

See #3962

comment:9 Changed 8 years ago by phobos

Cc: jmtodaro added

Yes, we can advertise ddg.

Added jeremy to the thread.

comment:10 Changed 8 years ago by jmtodaro

I believe I can fix the longer string issue fairly easily. I've just cloned aagbsn's repo on github, so I'll work on that.

I also would like to submit a few ideas for feedback concerning the ddg integration and update checking. Here are a few mockups of what I have in mind:

ddg integration: http://tor.jmtodaro.com/TorCheck03a-success.png

update notification: http://tor.jmtodaro.com/TorCheck03a-update.png

These would be changes to the css only, nothing too fancy. I intend to work these updates in as well, if there are no objections.

comment:11 in reply to:  10 ; Changed 8 years ago by aagbsn

Replying to jmtodaro:

I also would like to submit a few ideas for feedback concerning the ddg integration and update checking. Here are a few mockups of what I have in mind:

ddg integration: http://tor.jmtodaro.com/TorCheck03a-success.png

This looks good. I avoided simply embedding their iframe though, because it loads so slowly that the search box doesn't appear for a few seconds after the rest of check.tpo loads.

update notification: http://tor.jmtodaro.com/TorCheck03a-update.png

I like the look of this a lot better than what I did. Are there any other visual eye-catching tricks you can employ? For example, TorCheck only shows DDG search if the user is using Tor and up to date. If they aren't up to date, the 'update available' message replaces the search box. I think we should encourage users to take care of updating ASAP. One of the ways we can do that is by limiting the choices (urls, searchboxes, etc) that a user can make. Thoughts?

These would be changes to the css only, nothing too fancy. I intend to work these updates in as well, if there are no objections.

No objections, your work is much appreciated!

comment:12 in reply to:  11 ; Changed 8 years ago by jmtodaro

Replying to aagbsn:

This looks good. I avoided simply embedding their iframe though, because it loads so slowly that the search box doesn't appear for a few seconds after the rest of check.tpo loads.

Okay I will keep this in mind. I haven't yet researched our options for embedding the actual search box, but I feel this is he best way to integrate it into the design.

I like the look of this a lot better than what I did. Are there any other visual eye-catching tricks you can employ? For example, TorCheck only shows DDG search if the user is using Tor and up to date. If they aren't up to date, the 'update available' message replaces the search box. I think we should encourage users to take care of updating ASAP. One of the ways we can do that is by limiting the choices (urls, searchboxes, etc) that a user can make. Thoughts?

We could use choice limiting tricks, but I'm personally not a big fan of the idea. I don't think Tor Check should try to force a user to update by removing functionality. There are legitimate reasons why someone can't update TBB right this very minute, and are willing to accept the risks associated with not updating immediately. Why break the page for these users? I see the removing of expected functionality (the search box) as a sort of 'punishment' unless you update. You can't force anyone to update this way, and it will just annoy users who have gotten used to using Tor Check as an actual 'start page'. I think it would be better to keep the search consistent between the 'success' and 'update' pages. But these are just my thoughts on the matter.

I like the method I suggested because it is clean, noticeable, and not too annoying. It also almost gives the illusion that the browser itself is recommending the update. I'm not opposed to wording it more strongly or making it a bit more noticeable.

Another thought, an alternative could be to make the update page into it's own page, similar to the success page (with search), but maybe yellow or orange background instead of green with the 'Congratulations!' text replaced with something like 'Attention! You are connected to Tor, but your version out-of-date' and a prominent download link. This way there is no question they will notice that an update is available, but the page still works as expected if for whatever reason they cannot update immediately?

comment:13 in reply to:  12 Changed 8 years ago by Sebastian

Replying to jmtodaro:

Replying to aagbsn:

This looks good. I avoided simply embedding their iframe though, because it loads so slowly that the search box doesn't appear for a few seconds after the rest of check.tpo loads.

Okay I will keep this in mind. I haven't yet researched our options for embedding the actual search box, but I feel this is he best way to integrate it into the design.

Yeah, not embedding any external resource is quite important, not just because of load speed issues, but also because we leak all our users.

comment:14 Changed 8 years ago by jmtodaro

I've just sent a pull request to aagbsn on github with a fix for the long string issue and an updated search box on the success page. Here's a preview of how it should look:

http://tor.jmtodaro.com/check/success.html

I only updated the html that uses external css (templates/success.html)...I think we'd probably be safe to get rid of the pages with the css internalized (templates/success_css.html etc).

Any further thoughts on how we want to handle the update page?

comment:15 Changed 8 years ago by runa

What's the status on this? We should generate/update the .pot file and push new strings to Transifex as well.

comment:16 Changed 6 years ago by arlolra

Resolution: implemented
Status: needs_informationclosed
Note: See TracTickets for help on using tickets.