June 1st, 2010
In-Content UI Visual Unification
One of the UX team’s priorities for Firefox 4(and beyond) has been working towards getting more of the secondary UI into the browser as in-content UI. This can be seen already with the work being done on the new Add-ons manager.
Examples of in-content UI already present include session restore, about:config, new add-ons manager, network error pages and phishing/malware warning pages. Future possibilities for integration are things like preferences, the library, home tab, tabcandy and about:firefox.
This creates a lot of various interfaces going into the same conceptual space. I have been exploring ways to visually unify them and establish an “in-content UI” style. There is a lot of flexibility for different things within the style. It could do a variety of nice things and still be easily identifiable as “hey that’s Firefox incontent-ui!” (exclamation point because it’s exciting stuff!).
The goal is to create something that looks appealing, connects the variety of different types of UI, is recognizably in-content UI and can be styled per platform.
Some design notes:
- “Soft” textured background
- Tab and page are all one unified texture
- Drilldown breadcrumb navigation
- Inset style for UI content and outset/floating style for notifications
- Colored location bar based on type of notification
Note: This is not intended to be comprehensive or final.
Additional Note: I turned off the lightbox so these thumbnails link directly to fullsize images.
Preferences
Windows
![[Preferences] Base](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/win7-preferences-base.jpg "[Preferences] Base")
![[Preferences] Advanced » Network](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/win7-preferences-network.jpg "[Preferences] Advanced » Network")
![[Preferences] Advanced » Network » Offline Storage Exceptions](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/win7-preferences-exceptions.jpg "[Preferences] Advanced » Network » Offline Storage Exceptions")
Mac
![[Preferences] Base](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/mac-preferences-base.jpg "[Preferences] Base")
![[Preferences] Advanced » Network](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/mac-preferences-network.jpg "[Preferences] Advanced » Network")
![[Preferences] Advanced » Network » Offline Storage Exceptions](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/mac-preferences-exceptions.jpg "[Preferences] Advanced » Network » Offline Storage Exceptions")
Add-ons Manager
Windows
![[Add-ons Manager] Extension Isolated](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/win7-extension-isolated.jpg "[Add-ons Manager] Extension Isolated")
![[Add-ons Manager] Extensions View - Grid](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/win7-extensions-view-grid.jpg "[Add-ons Manager] Extensions View - Grid")
![[Add-ons Manager] Extensions View - Large List](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/win7-extensions-view-list-large.jpg "[Add-ons Manager] Extensions View - Large List")
![[Add-ons Manager] Extensions View - Large Small](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/win7-extensions-view-list-small.jpg "[Add-ons Manager] Extensions View - Large Small")
Mac
![[Add-ons Manager] Extension Isolated](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/mac-extension-isolated.jpg "[Add-ons Manager] Extension Isolated")
![[Add-ons Manager] Extensions View - Grid](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/mac-extensions-view-grid.jpg "[Add-ons Manager] Extensions View - Grid")
![[Add-ons Manager] Extensions View - Large List](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/mac-extensions-view-list-large.jpg "[Add-ons Manager] Extensions View - Large List")
![[Add-ons Manager] Extensions View - Large Small](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/mac-extensions-view-list-small.jpg "[Add-ons Manager] Extensions View - Large Small")
Network Error/Phishing
Windows
Mac
about:config
Windows
Mac
Session Restore
Windows
Mac
TabCandy
Windows
![[TabCandy] Glass](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/win7-tabcandy-glass.jpg "[TabCandy] Glass")
![[TabCandy] Textured](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/win7-tabcandy-textured.jpg "[TabCandy] Textured")
Mac
![[TabCandy] Metal](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/mac-tabcandy-metal.jpg "[TabCandy] Glass")
![[TabCandy] Textured](http://www.stephenhorlander.com/images/blog-posts/incontent-ui/mac-tabcandy-textured.jpg "[TabCandy] Textured")
Update:
I meant to mention that the Windows versions of the Photoshop files can be found on the SVN server:
http://svn.mozilla.org/design/projects/newtheme/strata/i06/
…(Win7)-(Aero)-(InContentUI)-(AboutConfig).psd
…(Win7)-(Aero)-(InContentUI)-(AddonsManagerExtensionSelected).psd
…(Win7)-(Aero)-(InContentUI)-(AddonsManagerExtensionsGrid.psd
…(Win7)-(Aero)-(InContentUI)-(AddonsManagerExtensionsListLarge).psd
…(Win7)-(Aero)-(InContentUI)-(AddonsManagerExtensionsListSmall).psd
…(Win7)-(Aero)-(InContentUI)-(NetError).psd
…(Win7)-(Aero)-(InContentUI)-(PhishingMalware).psd
…(Win7)-(Aero)-(InContentUI)-(PreferencesBase).psd
…(Win7)-(Aero)-(InContentUI)-(PreferencesNetwork).psd
…(Win7)-(Aero)-(InContentUI)-(PreferencesNetworkExceptions).psd
…(Win7)-(Aero)-(InContentUI)-(SessionRestore).psd
…(Win7)-(Aero)-(InContentUI)-(TabCandy-Glass).psd
…(Win7)-(Aero)-(InContentUI)-(TabCandy-Textured).psd
Tags: Experimental Mac Mockups SVN Windows
This entry was posted on Tuesday, June 1st, 2010 at 11:04 am and is filed under Firefox. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.
Nice!!!
Looks easy to use it.
[]‘s
I like the overall design but the mockups for the addons manager and the preferences scare me. It feels like “too much”. I don’t want to see Firefox turning into a (more) bloated program.
Nice. But can you get rid of that Cross texture in the Windows version and add the much nicer Mac texture to it.
Those UIs really looks appealing, and its great that Firefox is running away from the current interface.
But its sad that Linux is still being treated as second class citizens. I hope to see pics of Linux alongside Mac and Windows.
BTW keep up the great work!
@Thomas: This isn’t really indicative of final interaction and layout. More of an example of what kinds of things you could do within the context of an in-content UI.
Preferences for example could do with a lot of streamlining and refinement . However the general idea is that you navigate through your preferences. Much the same as you do now only you can go back/forward, it keeps track of your path and you can search. However that might not necessarily be the best approach to in-content preferences. If we had the whole browser space to work with we could do a bunch of things to make navigating preferences much nicer.
I hope this is a good place to give some immediate feedback.
I think the most pressing aspect about unification, is the ability to easily and clearly tell the user what is an in-content UI tab and what is a normal tab. Inside the tab, the ideas put forth here are all pretty awesome and good looking, but the most important part is really to tell the user, when he’s looking at another tab, that the preferences tab is not a normal page.
@Thales: Thanks. Designing for Linux tends to take a little longer because it doesn’t have the same kind of official baseline aesthetic as Mac or Windows. Designing something that will fit into a variety of Linux environments takes a little more thought.
“Wow!” is what I kept thinking when I saw this mock-ups. They look great! I can see why you’re excited about them.
Since the UI for the new Add-ons Manager has already landed, is this UI going to be pushed aside until Firefox 4.1 (or whatever) is being worked on?
You’ll also want to restyle the scrollbars, no? ;P
Looks awesome, as always!
@Tiago Sá: As shown in the mockups the idea is that the tabs and the content have a consistent and distinctive unified texture/color which would apply to all in-content UI. I would be interested in hearing any other ideas for making it obvious that the browser level tabs are special and not just webpages. Maybe aligning them to the right and segregating them from other tabs.
What is tab candy?
[...] mehr Mockups findet ihr wie immer bei Stephen. Ich bin wie immer hellauf von seinen Arbeiten begeistert und hoffe, dass diese auch so umgesetzt [...]
I really hope that the final version of FF4 will look something close to those above.
Just when users have the continued threat of fake UI like tabnapping and various other scary shit, you go and screw with people’s minds by giving away the long-held tradition of application-scoped UI being presented as a clear, often modal, UI.
Congratulations on leaving your average user completely mystified when this goes live. Love to see how you enforce modal UI and if you don’t, how you communicate to people that settings they’ve changed are immediately applicable.
Is there anything that you UI designers can do that doesn’t isolate users by changing fundamental application concepts? It seems not. First there’s get rid of the status bar, now get rid of all standard application-level UI. Why don’t you just rename it Chromefox and contribute tot he chromium project?
[...] 4 – Neue Designstudien Ich freue mich riesig darauf: In-Content UI Visual Unification Chromatic Pixel __________________ Windows 7 Professional | Opera 10.60a1 Snapshot | FF 3.6.3 | TB 3.0.4 | Avira [...]
Hi,
everything would be fine, when Mozilla want to build an own Operating system
But Firefox is is still only a citizen of other systems and therefore have i really big problems with this new preferences/options concept.
Many extensions have now their own preferences windows, panels .. whatever. A really confusing situation. A new global kind of way for these settings would be great, but i think it should be a part of the Add-ons manager and not, like in this concept, a part of the preferences/options window.
Cheers
Looks great, but isn’t this a huge possible security issue, as other webpages (phishing,…) could relatively easy imitate the preferences UI?
@Ferdinand
http://azarask.in/projects/tabcandy/
@Dominic Spitaler: That is why it takes over the browser chrome and changes the way the tab looks a web page can’t do that. A website could open a faux preferences window now if it was so inclined.
Out of interest, why isn’t Mozilla emulating the ‘native’ breadcrumbs found in each system’s vendor applications rather than reinventing the wheel?
It seems unfortunately common that in recent years designers of all the major web browsers want to leave their ‘stamp’ on the system rather than blending into the background like all decent applications do. There won’t be a single major browser left that even pretends to use a native UI once FF4 comes out. I’m not sure what I will end up doing – stick with FF3.6 and eventually switch to IE9, probably. If I wanted a non-native UI, I would have switched to Chrome already, which utterly destroys Firefox in terms of performance.
[...] Horlander published new mockups on the proposed in-content UI. The Firefox team decided long ago to remove most dialogues and [...]
The Addons ones are kinda funny. In some cases, its all unified with the tab, in some cases there is a line to separate the search stuff from the tab, and in some cases, there’s a line and an extra bar of sorting options. And there’s no example of just the “addons” pane.
Stephen.
I had been working on a few mockups of mine for a redesigned Preferences panel. But I had given up because I wasn’t up to date with what was actually going on. Now that I see it’s all still to be decided, I have changed one of my previous mockups to match your design (which, again, is awesome). This is what I came up with:
http://img340.imageshack.us/img340/9374/92653417.png
THIS IS NOT OFFICIAL IN ANY WAY! THIS IS MY OWN CONCEPT OF HOW THE MAIN PREF PANEL SHOULD LOOK LIKE!
So the question I ask is: should I keep “converting” the rest of my mockups (the other panels, basically) to match your (awesome) design, or should I just give up and GTFO because I’m nobody?
P.S.: I guess I should say that the main idea behind that mockup is (other than the organization and presentation, of course), the four new categories of preferences, as opposed to the 7 or 8 categories we have now. I feel it’s a clear improvement over the current preferences panel, but I don’t know how far Mozilla is willing to go, for support reasons (because – continuity related – ease of use is pretty much outweighed by how easy to use my proposal actually is). Here’s looking forward to your reply.
[10] I’m suggesting to create icon in titlebar when options are opened. Pressing it again will act as clicking on taskabr icon, that means minimazing it into titlebar. To close, you will just click on cross button inside tab.
How could I open a page from about:config/sessionrestore, since there is no urlbar, back button or bookmarks bar?
I think these mock-ups look great. I tend to like jboriss two pane approach for the add-on manager mockups though, and I think it would be appropriate for preferences too. The library kind of needs this I suppose, and actually, I think the add-on manager does too. A merge of jboriss’ structure and the Horlander elegance would be awesome.
As for the fear of confusion between web content and browser chrome, perhaps a more distinct color could be used for these tabs? Orange might be a bit too loud, but if the content got more space, only the toolbar and a 10px or so border would be necessary. I think that would signal the difference enough.
One problem might be that the screen might look to “modal”. At least the “Network Error/Phishing” seem as if you would have to dismiss them before you can e.g. enter a new url (but e.g. for the connection error, pressing the only visible button would most likely make the same screen to reappear).
So you might want to make the content seem as part of the page not layered on top (e.g. by removing the borders).
Hi,
i love it! Very nice Style of Firefox
Interesting! But be careful about that stuff with the url and the domain name… Chrome is trying something even less extreme than that (removing http://) and that caused an uproar because you gotta make it copy the invisible http:// when the user wants it, and not when the user doesn’t (and it is difficult to determine when that is!). IMO (in BOTH browsers) it should be fully text-editable, like Windows Vista/7 Explorer’s location bar, when you select it. Then you can also see exactly what you are getting when you copy.
OK… _REALLY REALLY NICE_
But when can we get those theme ?
The phishing mockup looks modal, as if the only thing you can do is click “Try Again”. It’s no longer obvious that you can close the tab.
@ everyone complaining about the lack of a location bar:
Right now, you can’t see the location of the preferences screen either, can you? And you don’t complain. And right now, it’s possible for a site to completely fake a preferences screen. With in-content UI, it won’t be possible, because sites can’t force the tab not to show the tool bar. So it’s an improvement in terms of security, in the end. Including the tool bar would probably only make things harder for the user to tell which tab is a site and which tab is an in-content UI.
Will this ever make it in? It seems like a stretch at this point with the amount of work the UX Team has yet to do. Someone should start on this right away.
These all look awesome!
I like the Network Error/Phishing pages and the Add-on Manager looks way better.
Along with making Firefox faster, the new theme and look to all the features should really be a high priority to get most yous can done for Firefox 4. At the moment development for Firefox 4 seems very behind.
Rather than “hey that’s Firefox incontent-ui!”, I instead get more of a “hey what app am I in again?” – there just isn’t enough chrome left for me to tell. The only thing in common between win7-preferences-base.jpg and win7-neterror.jpg is the tab strip, and that is vertically compressed. Yes, there’s a small orange Firefox menu thing, but it’s positioned to be inside the window caption area and my eyes glaze over because it assumes that area is never useful – Opera gets around this by having their menu button stick below the normal height and compressing the rest of it. Not that their way necessarily works well either…
[...] via [...]
Looks nice, but the windows version really shouldn’t have angled “arrow” looking tabs/bread crumbs, that’s an OSX thing.
[...] designer Stephen Horlander published Firefox interface mock-ups that illustrate how the browser could look with some options set through a preferences tab rather [...]
@ Mook
That’s a very valid point… Maybe getting a Firefox logo in the background (slight watermark) would do it… I am a fan of those solutions, but they may not be the best. But in the end, I think making the in-content tabs’ UI more similar to the normal tabs’ UI would make it even harder for the user to notice he’s not seeing a site, but a pref panel (or whatever).
@ KriLL3
I think they look great, and since Windows doesn’t really have anything similar (its breadcrumps or whatever they’re called work differently), I don’t see why we should keep them for Windows.
[...] designer Stephen Horlander published Firefox interface mock-ups that illustrate how the browser could look with some options set through a preferences tab rather [...]
[...] blogu Stephena Horlandera zamieszczono przykładowe zrzuty ekranu prezentujące zmiany, które [...]
[...] designer Stephen Horlander has published Firefox interface mock-ups that illustrate how the browser could look with some options set through a preferences tab rather [...]
@Tiago Sá: I really like what you have done. I haven’t had time to digest it completely yet but I will respond to the thread you started in dev.usability.
Thanks a lot Stephen. I really appreciate you taking the time to do it.
BTW, the mockup I posted in dev.usability has been updated, and is not just like the one I posted here
There’s also some design going on for the home tab and how to deal with multiple home tabs from previous Firefox versions, but that’s Limi’s field.
Thanks again.
Agreed with Jesse above, the Network Error/Phishing mockups look modal and it’s because of the dropshadow. I think if you take away the dropshadow or make it less prominent, the dialog would look less modal.
I think the network error / phishing should be flat with the the rest of the chrome as in the rest of the other example. It makes for a more consistent language for presenting native, safe firefox info. As it is, I can imagine the error message being spoofed by other sites.
Have I missed a post about tabcandy? This looks like some of what I’ve been talking to @boriss about for a while, but I’m not certain. If there hasn’t been a more detailed post, then I would be interested in hearing what you had in mind for this.
Overall, I think the ui revisions are very positive. I just hope the under the hood developments are as good.
My overall impression is the new design is fresh and cool. Many compare it with Chrome, but I think new Firefox design looks more native than Chrome. But there are points I don’t like.
First of all, I believe in navigation bar in prefs the last item should look like an arrow to, so it will look like |Menu1>Menu2>Menu3> (note the last >). Currently your arrow looks broken (you have only a half of it) or hampered(?). Also how will this navigation line look with old “tabs below urlbar” layout (as I understand it’ll still be available)?
But I think that this hierarchical thing in prefs looks quite complicated for the user. What do you think about using some other techniques (once prefs is a large tab even with possible scrolling not a small window)? For example, what about expandable/collapsible submenus. Say, you have “[+] Saved Passwords”, and when you click on [+], list of saved passwords expands, pushing down what was below it. (After reading comments carefully, I found that Tiago Sá proposed similar design, but I don’t think, it’s convenient to have all the options being expandable. I would better have category tabs on top like it’s in Firefox now, with expandable areas inside them, replacing current modal windows).
Other thing is that on the right of big orange Firefox button there’s lot of empty space. It’s especially noticeable once you removed window caption. Maybe, you should put this orange button somewhere else, or make it smaller?
New error dialogs really look like modal (possibly because of shadows). I think old “flat” approach (like in Restore Session) is better.
And to differentiate between chrome and content tabs, maybe, you can change chrome tab color and transparency.
Hope my comment was helpful.
The angled dividers between the pref tabs look to me like they are communicating a path, like folders and subfolders in a tree hierarchy for a file system browser (or other type of breadcrumbs).
linux and where, this means that new look will be only for Mac and Windows?
@ Crazy-EyE
A problem I can immediately see with all options being expandable, as you propose, is when the user has so many of them expanded, he is able to navigate through them effectively anymore. The page would become too tall (an we all know what tall pages need: an index, and that’s not good for this case). But despite that being a big problem, it’s the only problem I can see with your idea… Maybe it can be addressed directly.
Still, I don’t think my own idea will be harder to navigate through (for the unexperienced user) than the current prefs panel (I think it will be easier even, but never mind that). And I think that the back and forth buttons, even more than the navigation bar itself, will help the user a lot. The navigation bar has the advantage of matching the help users find everywhere, to go into Tools > Options > Advanced > General > Accessibility, for example. Of course the number of stages (is that what they’re called?) should be reduced, where possible, and I think my design helps, but it’s good that it’s the a similar design.
[...] el futuro administrador de extensiones, pero ahora el diseñador Stephen Horlander nos confirma que ese cambio es parte de una tendencia que reemplazará la mayoría de los cuadros de [...]
hmmm, looks nice.
But what i don`t like are the tabs forr all Preferences. Why not a “Backstage” like in the upcoming Offics 2010? I think this will summarize all preferences better.
The mock-ups are beautiful as usual, but the sad things is that probably more than half of it won’t make it in, ever. In the mock-ups for the new extension manager we see a quite customized location bar, for example (http://jboriss.files.wordpress.com/2010/04/addons_manager_but_not_final_1.png), but so far we got a pretty bad implementation that just contains the necessary. That’s not how you create a good browser, details like those are very important. The mock-up creators are doing a great job, but when it comes to the implementation it looks worse and degraded. In my opinion, Mozilla should hire someone with the specific task of making sure that everything changed and added in mock-ups are present in the final release.
(Yes, I am aware of that the new extension manager still needs a lot of work, and probably will get, but I still wonder if that specifically customized location bar, for example, will be present in the final release.)
Looks good. Please show Linux the same love.
@ Tiago Sá
I’m not for, I’m against all options being expandable! From the picture you posted here, I concluded that you want to place all the options in the expandable panels. And I said I think it’s bad idea. Then I proposed to use them only for sub-sub-sub-menus, replacing small separate modal windows in current Firefox (3.6), like in my example of “Saved Passwords”.
And in general, I want to point out that once we have tab instead of window for preferences it’s possible to make prefs page look like modern interactive web page, not only using with navigation (back/forward), but also scrolling, resizable elements (since we don’t have to change window size), links to other in-content UI (Addons Manager etc.), maybe even kind of sidebar for help.
[...] 1 chuyên viên thiết kế của Mozilla, Stephen Horlander, thì giao diện Firefox 4.0 sẽ không còn các hộp thoại nữa mà tất cả sẽ nằm [...]
[...] publicaron en Chromatic pixel unas cuantas capturas del nuevo contenido en pestañas de Firefox 4. La idea básicamente consiste [...]
[...] ¡Gracias a Martian007 por el aviso! Más información | Stephen Horlander [...]
I just fell in love with Firefox all over again. I’m looking at it in a whole new light. Now lets get this to wipe out chrome!! Stephen you are the shit!
Please, do not hard-code any backgrounds or font colours. You lock out the disabled when you do this.
Grey text on white is a UI disaster (Tab Candy screens). Impossible for some people to read.
Looking great! I love the more native look for Mac, currently do not use Firefox because it doesn’t fit in with its hideous huge backbutton. Hope these changes make it in FF4 and I might start using FF again (provided it is as fast as Chrome/Safari/Opera)
one word… BEAUTIFUL
Terrible
. Why should I change my habitudes?
This is the re-fresh from firefox i have been waiting for, i moved to chrome about 6 months ago, and its my main browser.. been wanting a reason to move back to firefox!
@ Johnny
You can set Firefox do display small icons, if you like. That makes it less charismatic, more like a Mac app…
[...] In-Content UI Visual Unification [...]
No GNU/Linux version is always sad, very very sad
We are waiting for Linux version.
Looks awesome.. !!
I am desperately waiting for this.. Firefox 4 !!
[...] Horlander, jenž se v Mozilla Corporation věnuje návrhu uživatelského rozhraní, zveřejnil na stránkách svého blogu hned několik screenshotů z aktuálního návrhu podoby prostřední připravovaného [...]
woooow awesome, nice job
[...] Ada perubahan besar dalam browser Firefox 4, mereka berani melakukan perubahan di tampilan atau user interface. Browser yang paling banyak diunduh di dunia, menghilangkan menu box atau kotak dialog. Walapun Firefox 4 masih dalam tahap pengembangan, berita ini telah dipublikasikan oleh Stephen Horlander desainer Firefox di blognya. [...]
Great UI Design!
Firefox 4 is amazing!
[...] le finestre di dialogo che verranno trasformate in versione inline. Il design Stephen Horlander ha pubblicato sul suo blog alcuni esempi che illustrano molto bene la direzione [...]
Hello, looks nice!
Don’t forget that lot of Mozilla contributors and employees are under Linux.
Don’t forget that lot of people use Firefox thanks to a friend, or a family member which use Linux.
The double “!!” for “DANGER!!” is ugly. Just one is correct: “DANGER!”.
Consistency and functionality should be the way for future developments. Humility in doing its job the best it can it’s what I want from firefox.
Every app has a menu. Screen sizes are going up. Let’s keep a menu. Same goes for preference dialogs. Tab candy? Tabs are ephemeral. Most people would not have anything like the categorized tabs in the mockup.
Usability improvements are possible without glamor. Let me pin a few tabs and close the rest. Colorize and visually prioritize differently tabs that are getting old from tabs I am using. Let me enlarge part of page, like this text box, so that I can write better. Help me clean and correct bookmarks that become broken. I can think of many more.
If you want to develop a skin that does any sort of unusual things, you’re welcome, but Firefox has many other needs.
For example it needs to integrate with password managers and system notifications, better powersaving and performances.
Also there is one platform where firefox is king and somehow it seems considered less important than other platforms where firefox will always be second to the default browser.
Bottom line, I don’t like what I see.
kann mann denn schon denn neuen Firefox irgendwo herunterladen und ich finde denn neuen firefox viel schöner von der aufmachung super gemacht
This mockup looks really cool, i think this will really bring Firefox forward to become one of the best browsers on the market, which he is already for me and all the community. I would just have the suggestion, why do you not merge the url bar with the search bar. I am allready using an addon doing this, but its not that practical because it can’t distinguish between search terms and urls sometimes. I find this would make the design of firefox even more clearer and in earlier mockups it was also intended like that that you would have a search inside your url bar, i just find it a waste of space to have a url field and then an extra field for your search, why not combine both.
Thanks for hearing my suggestion
really looking forward to see Firefox 4.0
definitely shouldn’t have two !s after danger, don’t even think it should be in capitals. otherwise, the design is incredible – nice work.
[...] le finestre di dialogo che verranno trasformate in versione inline. Il design Stephen Horlander ha pubblicato sul suo blog alcuni esempi che illustrano molto bene la direzione [...]
I hope you will make it so that every aspect of the Firefox 4 interface can be reverted to how it is in Firefox 3.
The main reason I continue to use Firefox over Chrome is because of the interface. If you take that reason away then I’ll switch to chrome to take advantage of its superior performance and lower memory usage.
I really do feel that you should be addressing Firefox’s performance issues rather than endlessly tweaking (destroying?) the interface.
[...] In-Content UI Visual Unification « Chromatic Pixel 2010/06/06 shin コメントする コメントへ via blog.stephenhorlander.com [...]
Richard, I’m sorry to break it up to you, but Firefox is the king of memory usage. Chrome is actually the browser that uses it the most:
http://dotnetperls.com/chrome-memory
http://lifehacker.com/5457242/browser-speed-tests-firefox-36-chrome-4-opera-105-and-extensions
You’re welcome to switch anytime you want, but don’t expect chrome to be lighter
And where are the Linux Mockups? Come on, just design for Ubuntu, Fedora and OpenSuse, all done, many eople just use KDE/GNOME. No complex things. Just degisn for GTK. KDE guys rulez!! And would create some patchs to fix problems.
Tiago Sá, that may be true in benchmarks, but not in real life.
Firefox seems to have serious problems when it comes to freeing memory.
Try it yourself : Open Firefox, browse the Web several hours with it without closing it once, and then look at its memory usage. It is amazingly high.
The other day, I left FF open 2 days without restart. When I checked, I had three tabs open. Firefox was using _more than 1 GB of RAM_. Then I closed it, and opened it again. The memory usage was ~80 MB. There’s something very, very wrong in the way FF handles closed tabs…
[...] Do you like screenshots? Stephen Horlander has put together ALL the screenshots! Check out the new theme mockups and in-content unification work. [...]
No Aethec, no. YOUR Firefox may be having problems with memory. Mine and and everyone else’s doesn’t (extept for that of the people with problems like yours). If you’re having problems with RAM usage, you probably have a faulty add-on installed. You can try running Firefox in safe mode to easily disable all add-ons and check for yourself. If you need help, refer to support.mozilla.org (F1 in your keyboard).
My Firefox is running for two weeks now, without loads and loads of extension (70+) and probably 15 tabs now, and it’s using up 260MB of RAM. It would be using 160MB if I wasn’t using those 70+ extensions (as I’ve seen for myself).
Again: IF YOU’RE HAVING PROBLEMS WITH RAM AND FIREFOX!!! THAT’S A FAULTY ADD-ON YOU HAVE INSTALLED!!! IT’S NOT FIREFOX’S NORMAL BEHAVIOR!!! (that’s to reach more people
I’m not trying to scream at you Aethec).
[...] Do you like screenshots? Stephen Horlander has put together ALL the screenshots! Check out the new theme mockups and in-content unification work. [...]
Well, the problem is that there are a lot of people having high FF memory usage. Searching “firefox memory leak” returns 11 millions results on Google. I don’t think one of those 11 millions pages is actually an answer from Mozilla on the matter.
And we have no way to find out what exactly is the problem other than “disable one addon, use FF for hours, look at mem usage, repeat with another addon”. I’m not sure if I really want to do this ; besides, if I have to use no add-ons, I don’t see the point in using FF (since the cool stuff such as D2D and an awesome UI is not there yet)
bugzilla.mozilla.org has more than 200 open bugs in Firefox talking about “memory leak”. The oldest was opened in June 2005, and is still unfixed and unassigned.
One of them seems to be exactly what I’m encountering : Opening lots of links in new tabs results in leaks. Too bad this one is unfixed, unassigned and marked as PPC OSX-only (I use Windows).
It’s really very much irrelevant whatever you say until you don’t rule out add-ons as the cause. If running without add-ons sees the same problem, THEN you may want to look at Firefox (or your Firewall, or your Antivirus, or spyware…) for the source of the problem, but not before.
An easy way to test is to disable all add-ons (plugins, extensions and themes) and try to replicate the issue. If they disappear, enable one add-on at a time until you find the problem. It’s time consuming, but it’s easy, and most of the times you only need to disable one add-on, not all.
Again, I say that I have absolutely no problems with Firefox, so this is not Firefox’s normal behavior, and is triggered by some outside factor.
As for those bugs you talk about, I did a quick search and most of them are unconfirmed… You know, people will install outdated versions of Flash or Java or shady add-ons, then see their Firefox go 1GB on the RAM and they’ll complain. Rightly so! But that doesn’t mean the problem is with Firefox. I mean, when you install some crappy software in your computer that bogs it down, you don’t complain to your OS manufacturer that their OS is crap, do you?
Here a mockup i made by myself to have the maximum of a webpage, perhaps it can help you for the further steps in designing Firefox 4.0.
http://commons.wikimedia.org/wiki/File:Firefox4.0_modified.png
Thanks for hearing me
Cef
[...] it seems the Mozilla team has made a very good job enhancing the design. Check some more, and get to know more about Firefox 4.0 new features. Filed in Internet | Tags: design, firefox, [...]
Is the whole browser going to be laced with Aero effects? I see faint Glass streaking in just about all of the Windows shots.
Cef : Interesting idea ; however, some space is needed at the top, because else you can’t drag the window
Tiago Sà : Then why are all those bugs on Bugzilla if nobody can confirm them ? I’d expect a 5-years-old bug to be closed if nobody was able to confirm it…Maybe I’ll take some time to try safe mode one day. But since the only addons that actually change something every time a page is loaded – ABP and Stylish – don’t have any memory-related bugs on mozdev.org, I don’t see any possible culprit.
If you want our users to update FireFox return to the classic gui. We all hate the new one.
You’ll need to go for SUMO for support, Aethec, but there are plenty of “unsuspecting” add-ons that can cause this issue. Anything that is not on addons.mozilla.org (like AVG safe crap and Google Toolcrap and Yahoo Toolcrap) is a suspect, Flash is a suspect, Java is a suspect, Silverlight is a suspect (any plugin is a suspect), and so on and so on.
Looks great, but how about a complete breadcrumb bar for the url itself?
@Talis: We discussed this option quite a bit. I think it has great potential but it probably won’t be a Firefox 4 feature.
“Looks great, but how about a complete breadcrumb bar for the url itself?”
“@Talis: We discussed this option quite a bit. I think it has great potential but it probably won’t be a Firefox 4 feature.”
Explain, please!
There’s a phenomenal extension called Locationbar2 that does that.
What wallpaper is that exactly being shown in these screen shots?
@Aethek: how about dragging and dropping it at the Firefox logo:)
I just saw a mockup on the net and i really don’t see sence in having the title of a site twice, because thats a wasting of space and doesn’t give much sence. I have red that Chrome has such a feature in which you can have the upper space disappear or reappear, that would be a useful feature for Firefox too, because then you could choose if you want the space at the Top or not.
http://www.chip.de/news/Firefox-Developer-Preview-mit-neuen-Funktionen_43375446.html
@Cef
You could use Hide Caption ( https://addons.mozilla.org/en-US/firefox/addon/9256/ ) or Hide Caption Titlebar Plus ( https://addons.mozilla.org/en-US/firefox/addon/13505/ ).
I use Tree Style Tabs, so hiding the titlebar is a big no-no for me.
[...] chystaného prohlížeče Mozilla Firefox 4.0. Zájemci se tak mohou podívat na zvažovaný výchozí vzhled pro Windows Vista a Windows 7 a také pro Linux nebo Mac OS X. Cílem opět je, aby i nový Mozilla Firefox maximálně zapadl do [...]
[...] die sich zudem auf Windows beschränkt. Weitere Bereiche sowie Macintosh-Screenshots gibt es im Blog von Stephen Horlander. Tags: Firefox [...]
Looking at those UI, it seems that we will no more be able to see a site title, but only a small portion of it. That’s a severe BUG mate! I want to see the site title as it is part of the content of a site, it’s not a decoration.
Hey Stephen… Hello there.
I just say here [ https://wiki.mozilla.org/Firefox/Projects/Preferences_UI ] that preferences redesign is only meant for after Firefox 4.0. So since this isn’t a priority (in-content still is, though, I gather), you can cook it on your own pace. The mockups are out there as they are, and if Imageshack deletes them, contact me at tiago.morbus.sa in my gmail. I mean, it’s just an idea, you guys are brilliant, and I can’t really do anything otherwise I’d be building patches a long time ago.
Good luck Stephen! Hope the new theme development is going steady
It is one I made for these screenshots.
Actually, when I used chrome first, I utterly disliked the in-content UI for addons and preferences, and downloads etc. I usually browse by keeping 20+ tabs open on webpages, it would be confusing to handle preferences in tabs. And I’m sure many think like me, I wonder, wouldn’t it be better to improve the way secondary-ui are right now? I really love my preferences pop un with tabs inside. I would just love to be able to interact with webpages while I have the dialog pop-up open.
Arisa, you’ll be able to tear out the in-content UI tab and make it a new window, if that suites you better. I think it’ll look pretty neat too.
[...] Firefox 4 mockup: http://blog.stephenhorlander.com/2010/06/01/in-content-ui-visual-unification/ [...]
does anyone have the background wallpaper used in this mockup?
http://www.stephenhorlander.com/images/blog-posts/incontent-ui/win7-neterror.jpg
I REALLY LOVE IT
if yes please send it to me on windows(dot)romania@yahoo(dot)com
[...] d’informations et d’images disponibles sur le blog de Stephen horlander Si vous avez aimé cet article, partagez-le. [...]
Hey Stephen,
i wanted to suggest an improvement to the actual tab concept. We saw in the past that the Tabbar was improved in the way that now it is expanding from his opening. I had a similar idea, but a bit different. How about if you would type in a url in Url bar and under the url bar would appear a little preview thumbnail of the webpage, you click on it and the webpage expands from a preview thumbnail to the actual size of the homepage. I know this would just be a little effect, but i find this would make the Tab concept a bit more interesting, you would see a tab grow from a preview thumbnail to the actual page, like looking at something growing, that would a little bit impress the people, and make a nice little effect.
I don’t know just wanted to suggest that idea and share it with the community
feel free to leave a comment
here is the link :commons.wikimedia.org/wiki/File:Firefox_tab_suggestion.png
Greetings Cef
Regarding the breadcrumbs on Windows7, rather than the mac style bread crumbs, if there any chance of using native Windows style breadcrumbs?
I don’t like the idea of “Tab Candy”. There is already something in every OS to group together several tabs and that is called a WINDOW!!! Why not allow the user to label each window instead? – much simpler!
IE8′s coloured tab grouping is a much better solution as well – it happens automatically without the user having to worry about it.
Hello everybody!
I don’t understand one thing about this wonderful style…will it be the default style for the new Firefox 4 when the final release will be out?
I’m a mac user and thanks to this interface i’m thinking to switch to firefox from Safari thanks to this style!
Is this visual unification coming for the download manager ang the history/bookmarks manager (like Google Chrome) ?
[...] [...]
[...] itself. How can it be made clear when an add-on needs attention or action? Stephen Horlander first experimented with adding subtle coloring and diagonal stripes to each add-on. In the latest nightlies, this [...]
[...] a Martian007 por el aviso! Más información | Stephen Horlander Anunciate aquí MAX_show('CP3'); var sizepostad = $("#roba-post .ad").height(); if ( [...]
[...] Plus d’informations et d’images disponibles sur le blog de Stephen horlander [...]
[...] en las ventanas de complementos con el interface “In-Content”. Con la idea de unificar toda la [...]
[...] if it does, version 11 will be the real Firefox update to look forward to, thanks to a long-awaited in-content UI change, a panel-based download manager and web apps [...]