Exploring design ideas for Epiphany — interactively

Some time ago, I wrote a small functional prototype to explore some of the design ideas for the evolution of the GNOME Web browser (maintained by my colleagues at Igalia). I thought that it would be a good idea to show these experiments to a wider public.

The basic idea by the GNOME designers is that, instead of tabs, open pages would be placed in an overview: you would click on a thumbnail there to return to a certain web page, and clicking again on “Pages” would take you back to the overview. A possible evolution of this would be to integrate bookmarks and reading lists in that overview.

This first video shows the interaction as described in the current design: in the overview, open pages are shown in a horizontal list, which gets reordered so that the leftmost element in the list corresponds to the last open tab. Note how the thumbnail is updated whenever we go back to “Pages”, and how the list scrolls to the left to show the most recently opened sites.

(link to video)

I also implemented an alternative UI where the open pages are arranged in a static 2D grid. Here it is:

(link to video)

This little application was written in a bit over 200 lines of QML. The code is available here:

The project folder includes compiled binaries that should work on, at least, 64-bit Debian and Ubuntu. Just uncompress it and run

cd Ephy ; ./Ephy

Note that if you want to build it yourself, you will need the qt4, qt-webkit and qmlviewer development libraries for your distribution; then, you can just run

make distclean ; qmake && make

  1. Fabian says:

    I like the 2D-grid view mode a lot more, the horizontal list leaves too much vertical space unused. However, I think the grind view should also get updated with the last visited page on the upper left corner and the ones visited before sitting next to it.

    • LG says:

      The left vertical space is not likely to stay empty. The last visited pages might be displayed there (see the design page).

      This work is great !

  2. vincent vega says:

    Guess tabs, that all people are used to are too mainstream now.

  3. Tor says:

    I think this resembles Firefox Tab Groups a lot.

  4. Leif says:

    Why not just leverage the existing GNOME Shell windowing system and make each “page” a unique window that appears in the overview.

  5. daniel svensson says:

    This kind of overview makes it very tricky if you have 60-80 open pages, which at least isn’t uncommon for me. Something that would make said overview a lot nicer for both casual- and powerusers would be to go ahead with any of your pages implementation, but in addition to that, also allow the user to type directly when opening the pages view, and what the user types, would match substrings of the URL, substrings of the title, and possibly also content of the pages, and then filter down the visible pages. Such a feature exists as an extension in both firefox and chrome and is *very* handy if you’re a person who doesn’t close tabs very often.

  6. Étienne BERSAC says:

    Hi,

    How to create new « tabs » from a link ? How to get feedback from other pages (say gmail, etc.) ?

    Regards,
    Étienne

  7. How do you keep track of what you’ve read or not?

    Usually I open links in new tabs to read them later and *close* them as I finish reading. If the thumbnail remains in the list, how would I know whether I still need to read the page?

    Note that I’m not against this design, I just need to be sure that it will support my needs.

  8. Hoschi says:

    I appreciated your work! Epiphany seem to become “better” compared to other GNOME-Applications like Nautilus (got really worse with 3.6). The new launch page with the thumbnails is very nice and works smooth, certificats are now shown (after years) and the removal of the window borders in maximized state is just a sane and good idea.

    You can and should and try your new UI with Epiphany, but please:
    DO NOT REMOVE TABS!

    If you do that, you will damage Epiphany. In Nautilus the immediate respons where forks. In case of Epiphany it will just alienate the users. If Epiphany and GNOME is lacking something, it are features, features, features and of course options in the UI.

    What would be really necessary are working bookmarks. With the removal of the toolbar in 3.4 is stopped using bookmarks at all, because the system with popup windows for handling bookmarks is just unusable.

    Integrated your new features. Just don’t remove the good ones!
    Tabs where the best idea for UIs ever. It just a shame the the Tabs occured in File-, Web-Browsers and Texteditors just so late (how long we really use them, five years?).

  9. Andreas says:

    Please do not remove tabs…

    Besides the points already made:
    – Keeping track of large amounts of tabs
    – differentiating read from unread recent pages
    – handling large amounts of tabs
    – Sticking to convention is better than any innovation when it comes to UI-Design (though not always true, here it should be considered)

    I’d like to add:
    – Tab-Change requires 1 Click, Your way requires 2 Clicks
    What this does is double the amount of effort for a user to perform a task. Anyone with only the slightest idea of UI-Design should see this
    – Tabs allow for key-board shortcuts !!! Add this instead !!!
    Firefox e.g. allows for STRG+TAB, STRG+SHIFT+TAB and ALT+1..0 all of which I use VERY often (having my most important tabs at the beginning)
    I don’t even want to get into Nautilus’s removal of Backspace or removal of STRL+L in the recent-view (which I never used once, but requires me to click on some folder first)

    Sorry for ranting your post out of all the posts, but it just had to get out…
    Maybe GNOME design could need a better process to include feedback and thoughts of the community… I know I’m not a UI expert, but as many other I could have CONSTRUCTIVE criticism available…

  10. femorandeira says:

    Hi, everybody, and thanks for the feedback.

    It is important to clarify that my main interest when doing this was to explore techniques to try out design ideas.

    GNOME is a distributed community, so it is often very hard to communicate these things properly when everybody is on remote. Design studios do a lot of work face to face with pen&paper for a good reason. With a bit of QML and Gimp, I was able to quickly sketch an idea in a way that makes it possible to visualize and share it easily. This route is also a way to help us move away from opinion and into a more informed discussion, something which I feel is sorely lacking these days.

    A few comments:

    Fabian : what LG said. Maybe it makes sense to split the overview into “Pages” (open tabs) and “Bookmarks”, with a dedicated button for each. The current design makes it so you would need several clicks/taps to see your bookmarks.

    Leif : It doesn’t scale well. For me, the Shell navigation is fine for around a dozen windows or less. A dedicated UI can leverage a lot of helpful information about your browsing and relations among pages.

    daniel svensson : In my experience, if you have 60-80 tabs on a desktop, nothing beats tree-style tabs (Firefox extension). I would love to have an UI around that idea, but I am not sure of how to evolve it to accommodate other kinds of users and other form factors beyond me and my laptop.

    Alexandre Franke : The thumbnail remains in the list because, in this little experiment, the number of open pages is fixed 🙂

    Hoschi and Andreas : The original design is not mine. I did this work to help evaluate and evolve it. Also, bear in mind that tabs are problematic when there are too many of them; in this example, the grid can comfortably accommodate 15 open pages.

    • Hoschi says:

      Thanks for your response. You answered us, but you told us (as every GNOME-Developer) that you ignore what we told you, the users ofnGNOME, told you.

      Again: Add.what you want to Epiphany, if your design is good it will gain success. But tabs are inferior! The are incredibly fast, common to everyone and does require one click or a keyboard accelerator.

      Please! We are NOT AGAINST YOU! But GNOME will not survive if the developers keep removing common and sane features. We are not against the future and new ideas. But the way of removal of important features will destroy GNOME. Community is a not single person or decision, but we are reaching now a point were the broad range of people will lost the patience. Every lost feature means at least one lost user. Or more…

      Thanks for responding. This is much more than other responsible people do!

  11. While these ideas are interesting, I’m also very sceptical of removing tabs. Right now I have fifteen tabs open in Firefox. To be honest, most of them are there because Firefox saves the session and I need to read them later, they might have been there already for several weeks. In that regard, a queue feature might indeed be useful.

    However, tabs require only one click. Your design first requires another click to the pages, then I have to look among all the large thumbnails were the website is, then I need to click that. That’s a few extra steps, so tabs are still superior if you ask me.

    • femorandeira says:

      It is true that having a tab bar always visible has benefits besides quick access: for instance, you don’t need to remember the pages that you have open because a quick look at the tab bar will remind you. If that list is not visible, the UI might be actually forcing you to keep the list in your head: the interface looks cleaner but the user’s cognitive effort increases!

      However, this does not mean that tabs (at least in the “traditional” way) are a perfect solution, since they stop being useful when you have too many of them. Try opening a dozen pages in Epiphany to see what I mean.

      The solution that is currently in the GNOME wiki does not fare much better, as shown in my first video. Replacing the horizontal list with a grid, as shown in the second video, seems to work better. The option that I personally use is the “Tree Style Tab” extension for Firefox, which places tabs on the side and organizes them in trees.

      As somebody mentioned, Firefox Panorama used a two-level UI as well; it structured open pages in groups so that when you opened one of them, you would get tabs but only for the pages in that group. I think that Safari for Mac OS allows you to group open pages as well.

      The point is that they way that we browse the Web is actually pretty complex, browsers still have a lot of room for improvement and there are plenty of routes to explore.

  12. Ken says:

    I echo the feeling that tabs are not going to be replaced very easily, especially from the view point of the casual/average user. I dread a browser without tabs and would be very quick to abandon a browser if it did away with tabs.

    With the vertical space taken up by the title/action bar (the bar with the “Pages” button), you could easily fit 2 rows of tabs, thereby fitting a usable 20 tab system without the need for scrolling. In it’s current rendering in your video, it is just an awful waste of space if not used for tabs.

    Since we are thinking outside the box, and keeping with this tabless theme. Why not abandon the entire “one browser window” idea altogether? Have every page open in its own window and let gnome shell handle the window presentation/selection? Throw the mouse to the top RIGHT corner and you are presented with a dynamically sized overview of only all open web browser windows. This way, as you finish with a page and you close the window, it will not show in the overview any more, and you could also close windows directly from this overview mode. I’m not sure, however, how gnome shell would handle a possible 80 windows open.

  1. […] order to have some more material to talk about, I have revisited my interactive sketch for navigating among open pages in […]