This post is by no means meant to be criticism, but rather an opinion on raising questions we couldn’t get answers to.
So on day 2 I got Federico Mena and Garrett LeSage to try out my prototype. While we noticed some nice features there were also some very unclear ones too. Today we concentrated on the “Tabs” and “Top Panel”, which is what is covered by the prototype.
The Good:
- Minimalism. It really is easy on the eyes in a way. Reducing the chaos of tabs is relaxing.
- Having a shrunk version of of the pages you got open in the “Pages” helps you navigate easier, than navigating via page titles. Its links switching apps in GNOME Shell pretty cool.,
- Blends in with the other designs of the core GNOME apps.
The Unclear:
Overview
A lot of usability is unclear. Let us take this “Pages” screen (from the wiki https://live.gnome.org/Design/Apps/Web) as an example:
It is not clear which one are really the currently open pages and which one are the “Recent”, since the “Recent” button is highlighted. We are not even sure if the upper one represents the currently open pages. If not then where are the tabs? If yes then based on the mockup there is this horizontal line splitting the view in two:
Our interpretation of these mock-ups which looked the following (keep in mind its a functional prototype which means some things are not fully implemented):
(the implementation doesn’t show screenshots of recent stuff since its hard to query those, I replaced them with empty buttons).
So the way to differ according to the (real looking) mock-ups in the wiki is to give the upper section of the view a toolbar style. Seems fair and IMHO opinion it looks nice. Problem however is how distinguishable is it from the the lower “Recent” section? How big does this view get? If I have 20 tabs open that is a lot of scrolling to be done to find one of my open pages, and even more to be done to get to the “Recent” stuff (which is not opened anymore)…
That being said the lower recent section (the real recent stuff) has to be defined better. Is it:
a) going to represent “History”: Bad idea because my history is huge and this won’t even scale.
b) just a predefined of maximum amount of recent pages. How do I find my History then?
Navigating through Pages:
While the mock ups introduce a new and very nice way for recognizing the websites you have open. It kinda takes you out of the focus. One thing I like about tabs is that I have what I am working on in Focus. And by just moving my eyes I can read the label of the tabs and decide if I want to navigate to a new tab or not. With the current mock up I would have to zoom out of my current page and back in. Not sure how good or bad this is.
As far as we could tell the designs are inspired by several other projects by Apple, litl, Pre, Chrome, etc… Some use tabs some don’t… Honestly all of those that use tabs are more intuitive in our opinion. Maybe because I am used to them, this might change.
Creating new Pages:
How do I create pages? Based on the mock ups I will need to use the search bar as seen below.
How we understood it is the search bar will search through the history and open pages too to find what I want… This is just brilliant (and I am not being sarcastic). If I can’t find what we are looking for in the History, there is a “Search” via Google (or anything else of your choice). This is very common for non-techies to now use the url bar and instead do the following:
- Always use the search entry next to the URL bar in Firefox
- Type “Gmail” or “Facebook” or “Youtube” or “cuevana” there, in the search entry
- Pick the first link from Google, which is “of course” the right one, and goes on with life
The only corner case I see here is if I know the URL. How does this work? Do I really need to go through Google. Is there no easy way to create a new page (please don’t tell me menus).
As for the sorting according to the wiki will be done wither via recent or frequent and will the results will be either presented as a grid or linearly… Its still on the Tod o list.
Closing new Pages:
There was no obvious way but I guess having a small x on the corner of a page button to close it would make sense. So no biggie.
Viewing a page:
Its pretty standard and the reduced noise in the panel makes it comfortable however it still feels like wasted space. While I agree with Mathias Hasselmann on the principal of the flaws that he addressed in the following illustration,
he must have not gone through the whole wiki… When you click on the Facebook label it will expand into a URL bar. Not sure what to think of this idea. The button on the VERY right is confusing. It is supposed to be a share button but since there is so much empty space I expected it to be a close button. The panel does not give the impression of a real panel. However this might change since a URL bar might replace it indefinitely due to some comments by the WebKit-Gtk team on “phishing”.
Last comments:
I still can’t make up my mind on the design whether it is good or bad. It has potential but needs to be tested through, before it is decided that its going to be the “Web browser for GNOME”. In a lot of way the ideas make sense but they don’t seem practical all the time. Visually appealing does not always make the functionality usable. I know some other ideas emerged during the Desktop Summit by Hylke Bons and Garrett LeSage on an alternative view for Epiphany.

What I like about this is I understand it from the first look. I know how to create a new page how to navigate through stuff etc… However I do miss the thumbnails from the Web design a bit. And again where is my URL bar? Yet I LOVE THE SIDEBAR. You can check out more of the duos work here.
I think (my stupid opinion) it is to early to decide that “Web” should be the new Web browser for GNOME. I can not see where “Web” will offer me something better than Chrome or Firefox other than integration with the GNOME platform. Web won’t make me ditch Epiphany. But if Epiphany is gone I am not sure I want switch to Web yet. It is missing the Umpf!
That being said I am done with the first phase of prototyping and you can get my code from git (you kinda need Zeitgeist for the history part since I don’t feel like hacking a DB for a prototype). You can grab the prototype from https://github.com/seiflotfy/gnome-prototypes… Again I need to underline that the implementation is a prototype which means limited (very limited) functionality to just play with the designs. The code will not be maintained and will be thrown away.




A small plea to remember screen ratios which are *not* wider than they are tall, in the case of Hylke / Garrett’s design. I have my screens in portrait orientation. A sidebar-centric design would leave me with a very narrow view of the actual page.
I’d like the Web workflow to resemble the Shell workflow:
The pages overview should show the “Queue” view by default (“queue”, the replacement for tabs, being the equivalent to “Windows” in the Shell), and the queue should use a spatial view like the one described here: https://live.gnome.org/Epiphany/FeatureDesign/DesignConcept
If there are no pages in the queue, then the “Queue” tab should be hidden (as it’s empty) and the “Recent” tab should be shown instead.
Also like in the shell, searching should be invoked by just typing and not require clicking in a search box.
Anyway, looking forward to what comes of this — glad to see innovation.
Thanks for the update. I am about to try the prototype (if jhbuild doesn’t choke on any required package), however:
– From what I see here, I really, seriously miss the URL bar. I very often use it to copy & paste URLs or type them directly (and it doesn’t make sense to make a bookmark for a use-once URL, e.g., when testing a website and stuff); it’s not essential to have it on all the time, but I’d appreciate if it wasn’t necessarily always hidden behind a mouse click or CTRL+L. An option to turn it on permanently (just like the location bar in Nautilus) would be acceptable tho.
– Speaking of which: where is the ‘Preferences’ button/menu entry? Will the Web configuration window(s) be folded into gnome-control-center?
– Easy cut-copy-paste for mouse users?
– Is the design really suited to large bookmark collections? It is likely to require quite some scrolling to get what you want. Typing to filter the icon view is fine as long as you remember *something* about the bookmark you are looking for. Which brings me to …
– What about bookmark categories/tags? In epiphany, I use them heavily to quickily find the pages I need (by prefixing the bookmark name with multiple [$FOO] tags, say “[GNOME] [Jhbuild] Manual”) but they are not exactly well-integrated in epiphany (you have to go to the Bookmark Editor and use the mouse… gah
) It would be nice to get them right from the start.
– Seriously now, NO TABS??? Just kidding
Anyway, I take that CTRL+PageUp/PageDown won’t work anymore, right? The workflow depicted in the GNOME Live page looks more complex than that (involves exiting to the overview page, hopefully with a key press, TABbing, etc.) I often work with two close tabs (similar to using :vs in vim) and switch between them with the aforementioned key combinations to easily compare/reread/check out references/etc. The sidebar in the GUADEC design seems a sensible way to lay out tabs, and would support this kind of switch-between-close-tabs workflow.
- Off-topic but on my wishlist: integrated online bookmark syncing?
I really appreciate the lets-try-a-working-prototype-and-make-it-public workflow. It renders the design process a bit more controllable. Thanks for doing it.
I really like the idea of this web specific “overview”. Do you have any plans to assign a gesture or a hot corner to display the currently opened pages in an overview (is the queue for displaying the opened pages?)
Hi, I thought of a great solution for my problem of having hundreds of tabs open. In chrome it’s possible to drag the tab out
and make a new window. What if you would drag the tab down and a drawer would open below the location bar with
categories you have chosen. And with that the tab would close and be added to the category. Let me ascii art it out for you:
******************************************************************
* Slashdot * +Planet G+ * Facebook * *
******************************************************************
* * planet.gnome.org *
******************************************************************
* *
* *
******************************************************************
* Slashdot * + + * Facebook * *
******************************************************************
* * p * +Planet G+ * org *
******************************************************************
* ************* ************ ************* *
* * Read late * * Work * * Javascript * *
* ************* ************ ************* *
******************************************************************
* *
* *
******************************************************************
* Slashdot * + + * Facebook * *
******************************************************************
* * planet.gnome.org *
******************************************************************
* ************* ************ ************* *
* * +Planet G+ * * Work * * Javascript * *
* ************* ************ ************* *
******************************************************************
* *
* *
******************************************************************
* +Slashdot+ * Facebook * *
******************************************************************
* * slashdot.org *
******************************************************************
* ************* ************ ************* *
* * Read late * * Work * * Javascript * *
* ************* ************ ************* *
******************************************************************
* *
* *
******************************************************************
* +Slashdot+ * Facebook * *
******************************************************************
* * slashdot.org *
******************************************************************
* *
* *
of course all the spaces went away but you get the picture
One thing that I desire that is not so UI-oriented is to have epiphany be able to replicate Google Chrome’s ability block plugins-by-default.
This is invaluable.
I depend on some things that are undesirable to have running on untrusted websites. Things like Java and Flash. I really do not want to trust my browser to run those as they are not safe. In the past I would have two browsers. One with the plugins enabled and one with it disabled. Later on browsers like Firefox and Chrome could use flashblock-type extensions to disable flash elements on the website. However, like pop-up blockers, they were not perfect and did not stop everything.
Chrome’s ability to simply block all plugins at the browser level is vastly superior approach.
From a usability standpoint one of things to keep in mind is that many websites will not display a ‘blocked plugin’ of ‘flash block’ type icon on many flash elements. They are hidden, or possibly behind other elements, or the website has javascript that tries to take into account users that are not using flash. So having the ability to enable plugin support for a entire DNS name is important.
Thank you. I hope in the future Epiphany will be caught back up to were Firefox and Chrome are. I enjoyed using it in the past.
Here is how you enable blocked plugins on Chrome:
http://www.google.com/support/chrome/bin/answer.py?answer=142064
It does feel like you’re recreating Gnome Shell’s activities overview, but then con(s)t(r)ained in a window. Maybe it’s not feasible, but could it be integrated in Gnome Shell’s overview? Maybe – would bring up all web pages, whereas just brings up all app windows?
I think epiphany does indeed need a redesign, so I’m glad this is happening, that said, it’d be nice if this effort went towards applications that REALLY need help (like GIMP/Pitivi–those are extremely complicated apps that could really use the help of gnome and additionally FLOSS doesn’t really have great answers to photoshop/vegas–making yet another web browser doesn’t seem like the best use of resources, but you’ve already questioned this with your comment about what “Web” actually offers).
A few comments:
1)the sidebar doesn’t make much sense to me– you typically wouldn’t use that while are browsing (hence the use of Back rather than Close)– since GS requires compositing take advantage of it and use an overlay– this is something that firefox should do but I suppose they don’t since they can’t assume compositing;really, I see no reason to force tab views into such a tiny area
2)related to the previous comment are the tiny close buttons on the sidebar tabs– those look similar in size to GS’s overview close buttons and those too are hard to hit (for me)–however if you use an overview you can use a different UI element to close windows (what I would prefer is something like android 4′s swiping to left or right, or in our case, dragging to the screen edge, and perhaps offer the option to use the lasso to close bunches of minmapped windows at once)
3)not having an explicit url bar is confusing (I think this was taken from honeycomb, and it is confusing there as well)–one shouldn’t have to scrub the page to figure out what is clickable, and, moreover, having somehthing that highlights as a button doesn’t scream “CLICK ME! I turn into a text input area!”
4)the name Pages doesn’t connote, to me, that all my open web pages are there– in fact, I clicked on it not knowing what to expect
5)I don’t know what the far right icon is supposed to do– it must be of extreme importance and something that you must use since it is one of only 5 UI elements but it is off to the side…it seems strange
6)I don’t know what Queue is for
7)I don’t know which pages are active or not, and it’s not clear how to bookmark a page
8)in Pages it wasn’t immediately obvious how to get back to the page I was just on… I spent a few moments looking for a Back button, then despaired, and eventually realised it must be one of the minmaps below (but trying to figure out which minmap is which isn’t easy if you are looking at pages primarily composed of text)
In short, please, take advantage of GS’s technology, otherwise there is no point in creating a browser that is basically like Chrome/Firefox expect without their advantages (plugins/speed). If you want to go the route of apple-like integration you need to do it in a way that nothing else can without using your platform. For Apple, they use quartz for rendering (not just displaying like is currently done) so scrolling is super snappy. They integrate core audio/video so multimedia works seamlessly in browser. I’m sure there’s more but I don’t use apple often enough to pick out the finer points, but if you start with those things you will automatically offer a better linux experience than ANY other browser on linux.
As for the interface, think about what people do on the web, then think about what you’d LIKE to be able to do. For me, I’d like gestures so I wouldn’t have to keep trying to click tiny buttons (you really only need a few to capture the majority of actions, and they can be simulated by right-clicking and doing a gesture is the PC itself doesn’t support gestures). I’d also like a way of grouping pages together, like tasks, and being able to only view the pages in that area (firefox does something similar, but it is a little clumsy). This would be an in browser version of GS’s window management, obviously, so it should make sense to introduce as few new control methods as possible (but no less than are needed).
Best/Liam
Just realized my sentence was partly stripped:
“Maybe – would bring up all web pages, whereas just brings up all app windows?”
should be:
“Maybe Alt–Super would bring up all web pages, whereas just Super brings up all app windows?”
If minimalism is what we want, then lets get rid of back/forward buttons.
When I have “feeling” that I will need to go back somewhere (e.g. search results) I open links in new tabs. Perhaps the new Epiphany could do something smart here such that going explicit back/forward buttons are not needed.
A. Automatically open a new “page” when switching domains (leaving the origin page open in your pages overview).
B. Or just present the complete navigation history nicely in the pages overview (i think there’s some overlap here with A)
[...] más detalles en la página oficial del proyecto o en el blog de Seif Lofty, que ya tiene un pequeño prototipo funcionando, y esperamos que pronto podamos probar alguna versión preliminar de un navegador que, esperemos, [...]
Excellent goods from you, man. I’ve understand your stuff prior to and you are just too wonderful. I really like what you have bought right here, really like what you are stating and the way in which during which you say it. You make it entertaining and you still care for to keep it wise. I cant wait to read much more from you. That is actually a terrific site.