cancel
Showing results for 
Search instead for 
Did you mean: 
batata
Strollin' around
Status: In review

The latest controversial proton redesign added new two lines tabs, however it haven't been put to great use.

I think we can do better and at the same time bring back the compact mode by merging the search bar and the tab bar.

00.png

While we put the url directly into the tabs, other icons could go in the tool bar, making a better use of the window surface.

01.png

The url is a clickable text area

02.png

and expands to show the full search bar when we start typing.

03.png

21 Comments
brochard
Making moves

Such a cool concept to think about, at first glance the first problems I have with it are
- Too little horizontal space if you have more than 3 tabs

- Too little horizontal space if you have multiple extensions

- No easy access to the search bar

- the domain name isn't very obvious (usually used to prevent phishing)

- the URL is where the sound indicator is right now, so one of them has to move

(I think it would work well with vertical tabs but it's not my thing)

With improvements I'm sure it could go somewhere tho

steel835
Familiar face

tabs still could hide the url (i wish the address bar could do that and show address on hover, because titles are too lengthy for tabs nowadays. Yandex Browser does that, looks nice)

Looks like unified tab strip in Safari, and I kinda like it https://9to5mac.com/2021/11/05/safari-in-macos-monterey-whats-new-how-it-works/. Though I'm not sure that current tab should look like an addressbar, the fact that it expands to an address bar on click when it's active is enough for me.

batata
Strollin' around

@brochard

The number of visible tabs depends on the user, how many icons/extensions are shown ? do you browse windowed or fullscreen ? what's your screen res ? on a 4k display there’s plenty of space !

I probably didn't think about all the use cases but for the domain name we could set a min width on the active tab to have it always visible, for the sound indicator we could place the 🔊 icon below the favicon.

Ultimately the compact mode could just be optional, also the personal bar would still be a thing and could be used to declutter the tab bar for those who prefer it that way, it would remain customizable.

 

@steel835 

Yeah I got some inspiration from safari, combined with the fact that firefox tabs can have two lines of text I think it can be great.

Anonymous
Not applicable

Please put compact size back. I activated it by goin into about:config.

why the hell would you remove that option??

paulocarlosjose
Strollin' around

this idea is amazing

paulocarlosjose
Strollin' around

@batata @steel835 @brochard @everyone Pleaseeeeeeeeeeeeeeeee look at this idea Hi all! I have this idea: "compact bookmark"... if have new-compact-design:

compact_bookmark.png

paulocarlosjose
Strollin' around

I have a revolutionary idea. Based on the compact design for Mozilla Firefox. Here:

redesign1_firefox_compact.png

Key points of this idea:

  1. There is no toolbar. This toolbar is hidden, it only appears when the user clicks on the tab. If the user does not click on the tab, the toolbar will not appear.
  2. This is super interesting, most users have never used a computer in their lives, only mobile. If this is true, it would be worthwhile to have a compact design for Firefox, as it would be very important to have that part of mobile users using Firefox. This is the first thing the user sees:

ideafirefoxcompact2.png

Notes

  1. This allows for greater productivity.
  2. In addition to letting mobile users know how to use Firefox.
  3. This is great for users' health, it doesn't strain the eyes.
  4. Browsers like Safari and Minimal have a compact concept. However Safari and Minimal browser were still not as good as Mozilla Firefox in terms of ui/ux proposed here.
  5. As I said before, if the user clicks on the tab, the toolbar appears below.

user navigation

  1. Normal view: Toolbar retracted.
  2. Hover over the bar - Toolbar uncovered
  3. Address bar on focus (Click on tab or open a New Tab - toolbar extended)

For software developers - Functional requirement:

  1. Option to customize the toolbar display.
  2. Note: Customizing the toolbar includes the option to show or not show the Toolbar.

References

  1. https://www.apple.com/br/safari/
  2. https://minbrowser.org/
  3. https://www.makeuseof.com/tag/alternative-chromium-browsers/
  4. I'm not promoting another browser like Safari, MinBrowser when leaving the reference link, I'm just referencing to you guys understand what I'm talking about
steel835
Familiar face

Not sure about boosting productivity or making it easier for mobile users, since it's about saving space trading off more clicks + this doesn't quite look like mobile. However, showing lower toolbar on hover is an interesting idea.

I tried to imagine a true compact mode though, almost as in @batata idea, here's what I imagined (sorry for russian on the screenshots, but I think the idea is clear w/o needing to understand the language):

steel835_0-1650668985968.png
Second level of toolbar is not displayed, but tab-bar now contains the most important buttons (forward button can auto-hide to save space). Other buttons, like bookmark, reader mode, extension buttons are hidden under a menu button.

I was also thinking about possibility that the tab bar could be customizable just as the lower toolbar (like moving buttons, tab strip element, etc) - that would be beyond awesome - users could put some additional buttons that they need there. Near app menu button, for example.

Tabs can use the second level label to show a hint on how to open the addressbar: shown always on active new tabs and on hover for tabs that aren't new. If user double-clicks the active tab (or once-clicks, based on config setting, I just see that users can click it to focus on the window, and not expect to see something else happening) the address bar shows on top of the tab-strip. Tabs are visible underneath it, but semi-transparent - as a hint to user that they can close the address bar by clicking back on the tabs:

steel835_2-1650669804615.png

What I didn't solve here are the encryption lock and tracker shield buttons - they don't belong on tabs or near them (compact mode is compact), could also end up in the app menu of course, but the lock is the important icon that shows whether the connection is safe, therefore should bring the user's attention if it's not. Maybe a small red badge with a lock/exclamation mark near tab favicon and show a warning on hover (for example in the panel with tab previews from another idea)?

What do you think?

paulocarlosjose
Strollin' around

@batata @steel835 @brochard Hi ... how are you guys? So ... This is the concept for compact bookmarks. What do you think of this idea?

FirefoxDesktopLight_Idea.png

Concept

  • Navigation is in this symbol '>'
  • By clicking on this symbol '>' - You access the input field
  • By default all Bookmark is saved automatically
  • By default you can only remove if you click on the X icon
  • If you want to call the Favorites Manager you must click the Maximize the screen icon.
  • I tried to unite these 3 concepts: "WYSIWYG- What You See Is What You Get", "KISS(Keep it Simple, Stupid)" and "Less is more".

 

The report of the design and user experience

  1. The main advantage of this Bookmark interface is minimalism and productivity.
  2. There is a view that the user does not need to fill in all the bookmark fields in the compact design as a report here.
  3. By default the 'name' field is auto filled based on the HTML metatag called 'title'
  4. And the bookmark 'tag' field is auto filled with the HTML target tag with the name attribute = "keywords" and with the content attribute
  5. The bookmark 'type' field is populated based on the link, for example if you save a bookmark with a link.mp3 this is the audio type - By default the browser interprets the links of the type: documents, video, audio or general links or links No tags or links without notes or links without keyword.
  6. The only field that the user fills if you want these fields: Color, Keyword, Collection, Note.
  7. By default these fields such as: name, tag, location, type, note that I have already said are filled automatically, what little life and user time to fill something manual.
  8. I created the color field to identify custom links, it is very common in programs like raindrop you create links with colors to identify certain links that do not have field like tag, location, type, collection, keyword.
  9. The 'collection' field serves to identify multiple determined links, would be like a folder / subfolder - the crucial difference of this I think is very important is that it works with a tag system too, but it would be close to what you use in things like Gmail
  10. One thing I thought is that you do not need a button to save Bookmarks in Mozilla Firefox, my idea would be that bookmarks would be saved automatically ... so there is no save bookmarks field.
  11. Another differential in this interface would be that you can expand the Bookmark window this basically serves for you to call the library window that has all the links you want to access.
  12. If you want to delete a link is easy, just click on the star icon and you remove or add the bookmark ... this can be as good and so easy ... in my view maybe this helps the community of Mozilla Firefox users.
  13. In total are 8 text type input fields, the fields are these: Name, Tags, Location, Type, Collection, Color, Note, Keyword. Each field explained above the proposing and because it exists. I hope to help the community of Mozilla Firefox with the compact bookmarks interface inspired by the concept of compact design.
  14. I forgot to talk about the location field, before there was a treeview - a tree list of folders where the user selects where Bookmark will be saved. I find a mistake and an error use a folder system, a tag system is much freer and better. So both the Location field and the Collection field functions as a tag system, the difference between the two Collection and Location fields, is that the Location field is for you to save the links like the Gmail Label system, where you have folders and subfolders, but this is represented as tag.
  15. Example: Let's assume you want to save a link in the following folder: Google / Link ... That would be the same as typing 'Google, Search' - Did you see the folder system like Label? This is the interesting point and my productive view of design and user experience. The concept of Gmail labels does not make it possible to have folders with the same name or better it is not possible to have labels with the same name. So the Collection type field was created that allows the user to create how many collections you want with equal or different names.

 

Notes

  1. The links I add here in the post are for bibliographic reference, I am not being paid or promoted by any company.

 

References

  1. Link ... from the graphical interface of Mozilla Firefox, where I inspired and created the Compact B...
  2. https://en.wikipedia.org/wiki/WYSIWYG
  3. https://en.wikipedia.org/wiki/KISS_principle
  4. https://www.houzz.com/magazine/less-is-more-6-principles-of-minimalist-design-stsetivw-vs~447394
  5. https://www.red-dot-design-museum.org/essen/exhibitions/detail/596/less-is-more-aspects-of-minimal-d...
  6. https://blog.alexdevero.com/less-is-more/
  7. https://designshack.net/articles/layouts/minimal-design-how-to-design-more-with-less/
  8. https://www.tutorialspoint.com/html/html_meta_tags.htm
  9. https://www.w3schools.com/tags/tag_meta.asp
  10. https://support.google.com/mail/answer/118708
  11. https://www.gmass.co/blog/gmail-labels/
  12. https://medium.com/reviewmonster/raindrop-a-beautiful-all-in-one-bookmark-manager-fcfc5783d6ed
batata
Strollin' around

To elaborate a bit more on my original idea

  • We could put the hamburger button on the left because it looks a bit weird next to the reduce button (at least on windows)
  • The same way the download icon is hidden unless we're downloading we could hide the back and forward buttons unless there's something in the history
  • The refresh and fav button could be on the tab (and visible only on hover maybe ?)
  • The many icons that can appear on the left of the address bar could be fused all together in one single tabbed panel. The displayed icon would change based on priority :
    Sans titre.png
    (btw the Extension label could be removed and only show the extension name)

Which gives an even slicker look :

99.png