search

starfish-app / Starfish

A Gemini browser for elementary OS.
gemini://josipantolis.from.hr/starfish/
GNU General Public License v3.0
22 stars 1 forks source link

Headerbar Design Tweaks #27

Closed thatcher-gaming closed 2 years ago

thatcher-gaming commented 2 years ago

just a little design patch to make the headerbar look a bit more consistent with other elementary browsers (e.g. epiphany, ephemeral)

Screenshot

Antolius commented 2 years ago

Thank you for this pull request @thatcher-gaming !

I'll have to think about the proposed changes. From usability standpoint I'm more interested in coherent experience inside the Starfish then across different browsers on the platform.

For example, I think "relative navigation buttons" (i.e. go back, forward, up and to the root) should look alike and be all grouped together. For me it made sense to place this navigation on the left hand side.

I'd also like to keep number of buttons (relatively) balanced around the URL entry widget.

Antolius commented 2 years ago

Ok, I think I have an idea about this. There are two things at play here:

1. Icon style

Essentially a choice between black and while symbolic icons vs colorful icons. In this regard I may have been a bit too playful with my original icon choice. By picking symbolic icons browsers like epiphany and ephemeral keep the UI subdued and give more emphasis to the web page content. In Gemini the content is usually less colorful than on web, but that doesn't mean browser UI should be more distracting.

Conclusion: We should switch to symbolic icons for go back, go forwards, go up, go to root, home, find and refresh / stop buttons. I'd like to keep icons inside the URL entry, bookmarks and open menu buttons in color for emphasis (plus symbolic bookmarks icons are kinda broken with bookmark-new switching metaphors).

2. Button order

In this regard I think we should keep "navigation" style buttons together. Like I mentioned, back, forward, up and root all relate to the current browsing session (either history or URL structure of the current Gemini pod). So I'd like to keep them together.

On the other hand there are reload/stop and find buttons. They let you perform an action "against" the currently loaded page. So I'd like to keep them together, and close to the URL entry.

Lastly, there are home and bookmarks buttons. They take you to some other place, help you navigate away from the current pod. So I'd like to keep them together.

Conclusion: I suggest we order icons like this:

[go-previous] [go-next] [go-up] [go-top]    [empty space]    [URL entry] [reload/stop] [find]    [empty space]     [home] [bookmarks] [open-menu]

@thatcher-gaming how does this sound to you? Would this seem intuitive to you as a user? Would resemblance to other browsers be strong enough to be of help?

thatcher-gaming commented 2 years ago

Ok, I think I have an idea about this. There are two things at play here:

1. Icon style

Essentially a choice between black and while symbolic icons vs colorful icons. In this regard I may have been a bit too playful with my original icon choice. By picking symbolic icons browsers like epiphany and ephemeral keep the UI subdued and give more emphasis to the web page content. In Gemini the content is usually less colorful than on web, but that doesn't mean browser UI should be more distracting.

Conclusion: We should switch to symbolic icons for go back, go forwards, go up, go to root, home, find and refresh / stop buttons. I'd like to keep icons inside the URL entry, bookmarks and open menu buttons in color for emphasis (plus symbolic bookmarks icons are kinda broken with bookmark-new switching metaphors). Yep, agree here.

2. Button order

In this regard I think we should keep "navigation" style buttons together. Like I mentioned, back, forward, up and root all relate to the current browsing session (either history or URL structure of the current Gemini pod). So I'd like to keep them together.

On the other hand there are reload/stop and find buttons. They let you perform an action "against" the currently loaded page. So I'd like to keep them together, and close to the URL entry.

Lastly, there are home and bookmarks buttons. They take you to some other place, help you navigate away from the current pod. So I'd like to keep them together.

Conclusion: I suggest we order icons like this:

[go-previous] [go-next] [go-up] [go-top]    [empty space]    [URL entry] [reload/stop] [find]    [empty space]     [home] [bookmarks] [open-menu]

@thatcher-gaming how does this sound to you? Would this seem intuitive to you as a user? Would resemblance to other browsers be strong enough to be of help? Make sense to me! My only thought is that it might make sense to remove the find button from the headerbar and just have it accessible via the browser menu/keyboard shortcut, since I think most people will just end up using the keyboard shortcut anyway instead of reaching for the mouse to click on a target in the headerbar and then going back to the keyboard to make their search (that might just be me though).

-- Reply to this email directly or view it on GitHub: https://github.com/starfish-app/Starfish/pull/27#issuecomment-1005238888 You are receiving this because you were mentioned.

Message ID: @.***>

Antolius commented 2 years ago

My only thought is that it might make sense to remove the find button from the headerbar and just have it accessible via the browser menu/keyboard shortcut, since I think most people will just end up using the keyboard shortcut anyway instead of reaching for the mouse to click on a target in the headerbar and then going back to the keyboard to make their search (that might just be me though)

Good point! Let's move the find action to a menu item. (Keyboard shortcut is already set up in the main window class.)

Suzie97 commented 2 years ago

What is the purpose of the go-up and go-down buttons and how do they differ from standard back and forward buttons? I looked at the code a little for some idea, but a human explanation would be better.

Antolius commented 2 years ago

It's actually go-up and go-top (referred to as "go to root" in-app). They are used for "URL based navigation". I wrote a post on my gemlog (i.e. Gemini blog) a while back in which I go in-depth about my own thoughts on navigation patterns in Gemini (it includes a few links to other people's writing on the topic): gemini://josipantolis.from.hr/gemlog/devlog-04-re-small-request-to-geminauts.gmi

For example, staring from a specific gemlog post gemini://josipantolis.from.hr/gemlog/devlog-04-re-small-request-to-geminauts.gmi:

Implementation can be found in Session and Uri classes.

Suzie97 commented 2 years ago
  • Going up leads to gemini://josipantolis.from.hr/gemlog/, which is a page listing all gemlog entries.
  • Going to top / root leads to gemini://josipantolis.from.hr, which is the index page of the entire pod (i.e. domain).

Implementation can be found in Session and Uri classes.

What do you think about using a path/url bar like the one in elementary Files? It shows the current path, but clicking on an empty portion inside it turns it into a text entry where the path can be modified.

If a particular folder name on the path bar is clicked, then files navigates to that folder.

This could work for starfish as well, users can click on the root in the url bar to go-root, or click on the previous page to go-up. And if they click on an empty portion inside it, or double click on it, it'll turn into a text entry.

Antolius commented 2 years ago

@Suzie97 I love the URI breadcrumbs idea, but let's move that discussion into a dedicated issue: #29 For this PR let's the go up and go to root buttons in the headerbar, just turn them into symbolic icons and move them a bit.