<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body text="#000000" bgcolor="#FFFFFF">
    Hello!<br>
    <br>
    As we talked before, we want to have some coherence between the new
    Probe and new Explorer. The best approach for this kind of massive
    data one-page layout has the most important content in the hero
    zone. Then, it starts to expand on technical data once the user
    begins to scroll, which means that they have more interest in what
    they are reading. To find it out, let's start with two simple
    questions: What is the essential data on this page? And, what are
    people looking for when they arrive at this page?. Then, does these
    match?<br>
    <br>
    I think that will be useful design with real data. The content must
    shape the layout. We cannot map *all* the cases (well, you can), but
    it can help on having a quick overview of how the layout gets broken
    when you have more or less content or which is the best way to
    approach a kind of data. A quick example is on the country page,
    where you have four digits measurement qty, and the real number is
    more close to nine figures. That will break your layout.<br>
    <br>
    In general, I would avoid the two columns. Based on the content I
    see at the mocks, is perfectly fine if we try a one full-width block
    per section.<br>
    <br>
    Another thing to consider is a sub-navigation. It will help users to
    find specific sections more accessible. With a sub-navigation, you
    can extend your data without sacrifice users time scrolling to see
    what they are looking for. A fixed left column menu or classic pill
    tabs at the top could make the work.<br>
    <br>
    *Web Connectivity Measurement / HTTP Invalid Request Line
    Measurement*<br>
    Why don't we have here a top header color based on the results of
    the measure as we have on Probe now?<br>
    <br>
    *NDT Speed Test / DASH Streaming*<br>
    In addition to all the previous comments, I think that line graphs
    are beautiful, and you could go full-width on them. We can have the
    same line graph but different options to display, like pills
    filters. In this specific case, having upload and download lines
    showing at the same time allow users to compare both.<br>
    <br>
    I made a rough wireframe to show what I'm thinking of<br>
    <a class="moz-txt-link-freetext" href="https://share.riseup.net/#q84X6Qr_puDOkLeJXem45Q">https://share.riseup.net/#q84X6Qr_puDOkLeJXem45Q</a><br>
    <br>
    Let me know what do you think!<br>
    <br>
    <br>
    A<br>
    <br>
    <div class="moz-cite-prefix">On 11/12/18 5:26 PM, Elio Qoshi wrote:<br>
    </div>
    <blockquote type="cite"
cite="mid:CAJCXAMgeZw+odQmzyWd_SoYqpZcOqQGr7Mvpx5PzSt51s3OtgA@mail.gmail.com">
      <pre wrap="">As a little side note: Feedback on layout, structure and readability are
most helpful at this point! Thanks again!

On Mon, Nov 12, 2018 at 7:37 PM Elio Qoshi <a class="moz-txt-link-rfc2396E" href="mailto:elio@openobservatory.org"><elio@openobservatory.org></a> wrote:

</pre>
      <blockquote type="cite">
        <pre wrap="">Hi there!

At OONI we are currently shifting focus to the development of the revamped
OONI Explorer as the mobile apps are currently being polished for a release
soon.

I'd like to invite you to have a look at the current mockups with a
special focus on the Measurement Pages at the bottom:

<a class="moz-txt-link-freetext" href="https://design.ooni.io/mockups/explorer">https://design.ooni.io/mockups/explorer</a>

Your feedback is highly appreciated and will help us move forward with the
next iteration. It would be even greater if you could send us your feedback
by the next UX Meeting tomorrow! You can comment as a guest on pages
similarly to Marvel. You also don't need to sign in for that.

Thanks in advance!

</pre>
      </blockquote>
      <pre wrap="">
</pre>
      <br>
      <fieldset class="mimeAttachmentHeader"></fieldset>
      <br>
      <pre wrap="">_______________________________________________
UX mailing list
<a class="moz-txt-link-abbreviated" href="mailto:UX@lists.torproject.org">UX@lists.torproject.org</a>
<a class="moz-txt-link-freetext" href="https://lists.torproject.org/cgi-bin/mailman/listinfo/ux">https://lists.torproject.org/cgi-bin/mailman/listinfo/ux</a>
</pre>
    </blockquote>
    <br>
  </body>
</html>