<div dir="ltr"><div dir="ltr"><div class="gmail_default" style="font-size:small">Hi Tobias,</div><div class="gmail_default" style="font-size:small"><br></div><div class="gmail_default" style="font-size:small">I somehow missed that navigation gestures scheme. I would like to suggest also a forward swipe for accepting a dialog action, similar to swiping back. Its very well used on Sailfish and would fit with the other used gestures, as far as I can see.</div><div class="gmail_default" style="font-size:small"><br></div><div class="gmail_default" style="font-size:small">I agree with targeting main interaction pattern first and not worrying too much about very fine details when matching the platform. Thank you for the links, will look into it. But first, I'll focus on other aspects of interaction with the user.</div><div class="gmail_default" style="font-size:small"><br></div><div class="gmail_default" style="font-size:small">Cheers,</div><div class="gmail_default" style="font-size:small"><br></div><div class="gmail_default" style="font-size:small">Rinigus </div></div></div><br><div class="gmail_quote"><div dir="ltr">On Tue, Nov 20, 2018 at 2:29 AM Tobias Bernard <<a href="mailto:tobias.bernard@puri.sm">tobias.bernard@puri.sm</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div text="#000000" bgcolor="#FFFFFF">
<p>Hi Rinigus,<br>
</p>
<p>We do want a swipe gesture for going back in pages stacks in
addition to the button in the top left, it just hasn't been
implemented on the GTK side yet. For a bit more detail see
<a class="m_7838537654899593198moz-txt-link-freetext" href="https://gitlab.gnome.org/Teams/Design/os-mockups/blob/master/mobile-shell/mobile-shell-gestures.png" target="_blank">https://gitlab.gnome.org/Teams/Design/os-mockups/blob/master/mobile-shell/mobile-shell-gestures.png</a></p>
<p>As for general design guidance (patterns, visuals, spacing,
typography, etc.), have a look at the GNOME HIG
<a class="m_7838537654899593198moz-txt-link-freetext" href="https://developer.gnome.org/hig/stable/" target="_blank">https://developer.gnome.org/hig/stable/</a><br>
</p>
<p>In GTK you get a lot of this for free, probably similar to the
Sailfish style classes you mention, but of course it's more work
if you use a different toolkit. That said, I would not worry too
much about making your app look exactly like a GNOME app at this
point. If it works well and behaves in ways that are expected to
someone who is used to GNOME patterns, it's not that important
that the spacing or typography is a little bit different in some
places.</p>
<p>As for your concerns:</p>
<p>- We have discussed patterns for hiding the top bar in certain
situation, eg. when scrolling in a browser or in video players.
IIRC it hasn't been done yet because it would require a lot of
work in GTK to make it easily doable for app developers.<br>
</p>
<p>- Agreed, which is why we want a back gesture, it's just not
implemented yet :)<br>
</p>
<p>Cheers,<br>
Tobias<br>
</p>
<br>
<div class="m_7838537654899593198moz-cite-prefix">On 11/16/2018 01:26 PM, rinigus via
Librem-5-dev wrote:<br>
</div>
<blockquote type="cite">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div dir="ltr">
<div class="gmail_default" style="font-size:small">Hi,</div>
<div class="gmail_default" style="font-size:small"><br>
</div>
<div class="gmail_default" style="font-size:small">I
would like to ask about main application design
principles that are envisioned for L5. In
particular, applications that are not using
Gtk/Gnome libs and if they wish to follow the
same or similar user interaction as the targeted
platform. My questions and understanding of
current design are based on </div>
<div class="gmail_default" style="font-size:small"><br>
</div>
<div class="gmail_default" style="font-size:small">* <a href="https://gitlab.gnome.org/Teams/Design/os-mockups/blob/master/app-menu/patterns.png" target="_blank">https://gitlab.gnome.org/Teams/Design/os-mockups/blob/master/app-menu/patterns.png</a></div>
<div class="gmail_default" style="font-size:small">* <a href="https://developer.puri.sm/Apps/GNOME/Gtk+.html" target="_blank">https://developer.puri.sm/Apps/GNOME/Gtk+.html</a></div>
<div class="gmail_default" style="font-size:small">* <a href="https://developer.puri.sm/Apps/Constraints.html" target="_blank">https://developer.puri.sm/Apps/Constraints.html</a></div>
<div class="gmail_default" style="font-size:small">* <a href="https://developer.puri.sm/Design/Design_guidelines/Touch.html" target="_blank">https://developer.puri.sm/Design/Design_guidelines/Touch.html</a></div>
<div class="gmail_default" style="font-size:small"><br>
</div>
<div class="gmail_default" style="font-size:small">It
looks to me that the current guidelines imply:</div>
<div class="gmail_default" style="font-size:small"><br>
</div>
<div class="gmail_default" style="font-size:small">[1]
user will be able to swipe up from the bottom to
get main menu with all applications</div>
<div class="gmail_default" style="font-size:small">[2]
application has some kind of a top bar with its
name and menu symbols</div>
<div class="gmail_default" style="font-size:small">[3]
to get back from the application sub-page, there
is an arrow that can be clicked on the left top</div>
<div class="gmail_default" style="font-size:small"><br>
</div>
<div class="gmail_default" style="font-size:small">There
are no indications regarding swipes as a part of
interaction within applications. Namely, is it
envisioned that we can make "page stacks" and,
instead of reaching top left corner to go back,
can swipe the page out of the stack? </div>
<div class="gmail_default" style="font-size:small"><br>
</div>
<div class="gmail_default" style="font-size:small">As
an application developer, I am looking for some
kind of guidelines or will be happy to help
through the discussion and other means in
formulating them. While not fully open-source, I
would suggest to look into design guidelines of
SailfishOS, which are quite clearly (for me)
defined at <a href="https://sailfishos.org/design/navigation/" target="_blank">https://sailfishos.org/design/navigation/</a>
. In addition, on SFOS, we have rather extensive
specification of used theme colors, distances
between labels, font sizes, and such. For that,
we use a dedicated QML class <a href="https://sailfishos.org/develop/docs/silica/qml-sailfishsilica-sailfish-silica-theme.html" target="_blank">https://sailfishos.org/develop/docs/silica/qml-sailfishsilica-sailfish-silica-theme.html</a>
. Would be great to get some kind of similar
resource that can be queued for application
design.</div>
<div class="gmail_default" style="font-size:small"><br>
</div>
<div class="gmail_default" style="font-size:small">(Assuming
that I understand the principles correctly) As
for implied design principles [2] and [3], I
have few concerns</div>
<div class="gmail_default" style="font-size:small"><br>
</div>
<div class="gmail_default" style="font-size:small">*
having a top bar with application name is a
large waste of space, at least for some of the
applications. For example, web browser would not
need it and its probably the best to have as
much screen for reading as possible. For maps,
same applies - the content speaks for itself in
many cases.</div>
<div class="gmail_default" style="font-size:small"><br>
</div>
<div class="gmail_default" style="font-size:small">*
having an arrow on top left as an only way to
move back from the sub-page back, contradicts
easily reachable thumb range (<a href="https://developer.puri.sm/_images/p2f1.png" target="_blank">https://developer.puri.sm/_images/p2f1.png</a>)</div>
<div class="gmail_default" style="font-size:small"><br>
</div>
<div class="gmail_default" style="font-size:small">Best
wishes,</div>
<div class="gmail_default" style="font-size:small"><br>
</div>
<div class="gmail_default" style="font-size:small">Rinigus</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<fieldset class="m_7838537654899593198mimeAttachmentHeader"></fieldset>
<br>
<pre>_______________________________________________
Librem-5-dev mailing list
<a class="m_7838537654899593198moz-txt-link-abbreviated" href="mailto:Librem-5-dev@lists.community.puri.sm" target="_blank">Librem-5-dev@lists.community.puri.sm</a>
<a class="m_7838537654899593198moz-txt-link-freetext" href="https://lists.community.puri.sm/listinfo/librem-5-dev" target="_blank">https://lists.community.puri.sm/listinfo/librem-5-dev</a>
</pre>
</blockquote>
<br>
</div>
</blockquote></div>