Back/forward button design ideas

[D0J0P]

I like the design choices for all the buttons you have in the browser, and the back/forward buttons look great, but I'm not sure how I feel about the white circle highlighting them as you hover your mouse over them. I like how the button itself darkens when you hover over them, like the other buttons, but the white circle alone feels slightly cheap or too flat. Maybe something could be added to it, or it could be replaced with something else. Maybe make it like the other buttons, like the menu button where it only darkens, or maybe add a shadow to it. I'm not sure, just putting ideas out there to help come up with new ways to design the button.

[luixxiul]

cc: @bradleyrichter for thought

[bradleyrichter]

This is on the polish-list. We'll try to take the hover states for all buttons up a notch, and especially the nav buttons.

@D0J0P Let me know what you think of this styling direction:

And a bit flatter version:

[bradleyrichter]

Windows version:

[D0J0P]

Thanks for the quick reply, Bradley!

I like the 2nd, flatter version that you've shown here. The only part I prefer in how the current design looks is the bookmarks icon. I like the bookmarks look right now. The only slight unease I have with the current bookmark icon is how it changes drastically when I hover over the address bar. But other than that, I prefer the way the bookmark is right now over the new concepts. I also like how the bookmarks icon right now turns orange, which is more consistent with the design theme than yellow. Either Brave orange or the shade of blue you have in the address bar would be fine.

As for the back/forward buttons, is that what it looks like when you hover over them, with the round boxes around it and shadows? That would be interesting to see it that way. It would at least be better than the way it is now, and with the horizontal menu doing the same thing over hovering, it would be consistent.

I like the look of the back/forward buttons now, but it's just the highlighted look that could use work. If it gets the same rounded box with shadows like the menu does, like what you've got in the concept, it could be good!

[bradleyrichter]

@D0J0P Thanks for the detailed feedback.

We want to move to a left-aligned arrangement with the URL and buttons so that things stay put when the auto-title switch happens. The current centered approach, as you mentioned, causes things to jump around. We have had numerous requests to keep the buttons visible in title-mode, and fix the jumping issue.

The other thing this does is provides a consistent grab-area in the title/URL bar, as well as making room for the extension bar.

If possible, I will make the bookmark button customizable for left/right but it won't be shown in title-mode on the right because it would be floating far out in space.

So are you more concerned about BM style or location? I like you argument about the color theme. Blue or orange may be the way to go then.

tx!

[D0J0P]

That makes sense on moving to an arrangement aligned on one side, so all your buttons are there and accessible. I guess I'm just used to seeing the bookmarks button on the right in every single browser in different places like address bars, extension buttons, and search bars.

My concern about the BM icon is the style more than the location. The location can probably be given an option to move it to the right, but the style is my concern. The style right now is great, it's flat and orange makes a lot more sense than yellow. Orange is great because that's Brave's overall color theme. Blue is also a good choice because the address bar, security icon, website loading time and URL selection is blue. Either color choice is fine.

I agree with keeping the size and locations of the icons in your new concept where they are, so as to keep them in one place and not jump around, so I wouldn't mind the current BM icon, but without it shrinking when I hover out of the address bar area.

If you have more new concepts to show, let me know!

[lucidNTR]

@bradleyrichter i created mockups of the designs you suggested. the problem is that it is really really hard to drag a window now because the only place to grab it is between the nav url form and the plugin icons. any ideas? this was much easier with the more minimal central title design.

[bradleyrichter]

@lucidNTR awesome. thanks for experimenting.

Can you try out the latest slack beta app for Mac and LMK what you think of how they implemented window dragging? I would like to use the same approach but not process the mouse-up after a drag action. (mouse would need to flag action state or use window location change flag to cancel mouse-up.)

The next best thing would be to allow dragging on any disabled button as well as on the unused URL box area.

[lucidNTR]

@bradleyrichter
the search in the slack app only grows once you enter the active state not on hover so you can click next to it to drag a bit better. Regarding the dragging on buttons: feels a bit weird and laggy in slack i think they made a custom move worker that tracks the mouse movement and then moves the window through the set window position api. i actually made such a move worker for another electron app that never shipped, so we could use that if we want to.

i also made mockups for a mix between your new navigation bar and the old kind of behaviour. but i added the part from slack where the form box only grows on entering. this hugeley solves the 'not knowing where to grab the window' problem.

tell me what you think...
normal state:

hover navigation bar:

gorw only on enter form:

[luixxiul]

I think this can be closed based on #5526 #5527

[bsclifton]

@luixxiul I agree 😄 I'll close for now

@D0J0P if you are able to get our latest release, can you try it out and let us know what you think? Feedback is very much appreciated. Thanks! 😄