[tor-dev] Feedback on CollecTor web redesign

thomas lörtsch tl at rat.io
Wed Oct 21 08:35:08 UTC 2015


Hi Karsten,


great work! In general I like it there’s lots of text on one page as oppesed to having to wait for page loads every time my information need changes. And I like the clean looks.


But now some nitty gritty:


Since the page is very long it would benefit from internal navigation. You’ve got six H1 sections, the top field not including. Even if the last 4 are rather short (and would benefit from a common H1 heading like eg “Misc”) that’s much more than the average visitor can easily grasp and it’s tedious to scroll. A vertical bar, fixed to the top or between H1 sections, dark grey text on light grey background, wouldn’t be very intrusive and do the trick.

I’d shorten the text in the top field. “Your friendly data-collecting service in the Tor network. Welcome to CollecTor, your friendly data-collecting service in the Tor network.” is two times the same. Make the jocular "Welcome to CollecTor, your friendly data-collecting service in the Tor network.” the bold headline and start the text with the informative "CollecTor fetches data from…”.
And a little more generous spacing between the two blue buttons please.

I would drop the <hr>s altogether, but especially the first one before “Available descriptors". It’s not needed here and clutters the otherwise clean looks. The spacing is right here (assuming that the <hr> is replaced by a blank line). All the others <hr>s should be replaced by 2 blank lines.

In the table the links to “format" should look different from those to “recent” and “archived”, since a) they stay on the same page and b) they link to descriptions, not to raw data. Maybe change the background to light gray.

The text is visually hard to navigate because the headlines are too similar in size and surroundig white space. When scrolling fast - which such a long page needs - everything turns grey and it’s hard to spot even the H1 section breaks. Make H1 bigger and H3 smaller and the distinctions between H1, H3 and H3 will become much clearer. Maybe add a few px more leadig whitespace to H2 and H3. Add to that one more row of whitspace instead of the <hr> as proposed above and the page will get more air to breath and the eye more contrast to hold on to.
This would also incorporate Damians remark that some sub-headings should be combined with their top header. I don’t support his proposal to remove the H3 headings for special cases  since I think a stringent logical order is more important but visually he’s right and making the the H3 smaller and in fact more like bold text would solve that.

Well, that’s it for  start :-)


Cheers,
Thomas




On 20 Oct 2015, at 21:46, Karsten Loesing <karsten at torproject.org> wrote:

> Signed PGP part
> On 20/10/15 21:36, David Fifield wrote:
> > On Tue, Oct 20, 2015 at 09:31:38PM +0200, Karsten Loesing wrote:
> >> -----BEGIN PGP SIGNED MESSAGE----- Hash: SHA1
> >>
> >> Hi devs,
> >>
> >> I just finished a redesign of the CollecTor website and would
> >> appreciate your feedback:
> >>
> >> https://metrics.torproject.org/index2.html
> >
> > This URL is 404 for me.
> 
> Bah, sorry!  Let me try again and give you all new and old URLs:
> 
> New CollecTor website:
> 
>   https://collector.torproject.org/index2.html
> 
> Old CollecTor website:
> 
>   https://collector.torproject.org/index.html
> 
>   https://collector.torproject.org/formats.html
> 
> All the best,
> Karsten
> 
> _______________________________________________
> tor-dev mailing list
> tor-dev at lists.torproject.org
> https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-dev



+
thomas lörtsch + hospitalstr. 95 + d 22767 hamburg
+49 173 202 71 99 + tl at rat.io + tomlurge at someOtherServices

++
http://www.sueddeutsche.de/politik/1.2683186
+++
http://www.faz.net/aktuell/politik/fluechtlingskrise/kommentar-ueber-die-union-und-die-fluechtlinge-merkels-revolutionen-13856679.html
++++
http://www.useronboard.com/how-ashleymadison-onboards-new-users/

-------------- next part --------------
A non-text attachment was scrubbed...
Name: signature.asc
Type: application/pgp-signature
Size: 841 bytes
Desc: Message signed with OpenPGP using GPGMail
URL: <http://lists.torproject.org/pipermail/tor-dev/attachments/20151021/4ebed03b/attachment.sig>


More information about the tor-dev mailing list