{"id":123,"date":"2011-10-31T16:30:39","date_gmt":"2011-10-31T15:30:39","guid":{"rendered":"http:\/\/blogs.igalia.com\/femorandeira\/?p=123"},"modified":"2013-04-17T17:10:41","modified_gmt":"2013-04-17T15:10:41","slug":"123","status":"publish","type":"post","link":"https:\/\/blogs.igalia.com\/femorandeira\/2011\/10\/31\/123\/","title":{"rendered":"First ideas for a better GNOME browser"},"content":{"rendered":"<p>Following up on my <a href=\"http:\/\/blogs.igalia.com\/femorandeira\/2011\/10\/14\/first-readings-on-web-browsing\/\">last post<\/a>, I want to share a few ideas that could improve the use of the Web from GNOME. Many of these come from other people and I am trying to combine them into one coherent package.<\/p>\n<p>The first goal would be to offer better support for common Web browsing patterns, revisitation and exploration. Specifically, this means supporting web applications, a more convenient and agile presentation for favourites, better history and bookmarks management, better tab management within the browser window for pages that are related to the same tasks, and better tab management from the Shell to help the user align the different sets of tabs with his current activities and interests.<\/p>\n<p>The second goal would be to do so in a way that is not cumbersome and complex, but light and consistent.<\/p>\n<h2>Web apps<\/h2>\n<p><a href=\"http:\/\/blogs.gnome.org\/xan\/2011\/10\/19\/the-next-million-apps\/\">Most of the next million apps written will be web applications<\/a>. The browser should acknowledge this, allowing the user to turn a Web site into an application that can be accessed like any other.<\/p>\n<div id=\"attachment_124\" style=\"width: 410px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/gmailapp.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-124\" class=\"size-full wp-image-124\" src=\"http:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/gmailapp.png\" alt=\"Launcher for GMail app in Gnome Shell\" width=\"400\" height=\"200\" srcset=\"https:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/gmailapp.png 400w, https:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/gmailapp-300x150.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><p id=\"caption-attachment-124\" class=\"wp-caption-text\">Launcher for a GMail app.<\/p><\/div>\n<h2>Revisitation: Home and History<\/h2>\n<p>As noted in my previous post, there are different kinds of Web revisitation; one of them comprises sites that we visit often because they lead to new information, which is not exactly the same as storing a linking to a page because of the information that it contains at the moment of reading (e.g. an article). In a manner similar to <a href=\"http:\/\/blog.mozilla.com\/faaborg\/2011\/04\/13\/the-firefox-home-tab\/\">what Firefox does<\/a>, I propose to have a Home tab as the starting point for browsing. This tab could include a search field, links to recent pages and groups of pages, favourites and Reading List. Being able to define a page as &#8220;favourite&#8221; and &#8220;pin&#8221; it to the Home page would ease mid- and long-term revisitation, which makes up for a large percentage of our activity in the Web.<\/p>\n<p>The Home tab would be a way to get to new content, but what about returning to sites that were visited some time ago? Next to the Home tab, we could place a History&amp;Bookmarks tab that offered a rich search interface to retrieve pages that have already been seen.<\/p>\n<div id=\"attachment_126\" style=\"width: 490px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/hometab1.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-126\" class=\"size-full wp-image-126\" src=\"http:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/hometab1.png\" alt=\"Home and History tabs\" width=\"480\" height=\"240\" srcset=\"https:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/hometab1.png 480w, https:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/hometab1-300x150.png 300w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/a><p id=\"caption-attachment-126\" class=\"wp-caption-text\">Tabs on top, with Home and History on the top left.<\/p><\/div>\n<h2>Fine-grain tab management<\/h2>\n<p>Modern browsers are placing their tabs on top <a href=\"http:\/\/blog.mozilla.com\/faaborg\/2010\/06\/24\/why-tabs-are-on-top-in-firefox-4\/\">with good reason<\/a>. The main advantage is that this helps establish a visual hierarchy inside the browser window that  reinforces the proper mental model, so that controls that operate on the same  scope are grouped together. To decide which controls should be given priority in the interface, we could use <a href=\"https:\/\/testpilot.mozillalabs.com\/testcases\/menu-item-usage\/aggregated-data.html\">usage data<\/a> <a href=\"http:\/\/blog.mozilla.com\/faaborg\/2010\/03\/23\/visualizing-usage-of-the-firefox-menu-bar\/\">from Firefox<\/a> as a guide, always keeping in mind that we cannot assume that everybody will know how to use all the available shortcuts (e.g. a similar <a href=\"http:\/\/blog.mozilla.com\/metrics\/2011\/08\/25\/do-90-of-people-not-use-ctrlf\/\">study<\/a> found that over 80% of users never used Ctrl+F to search). Browser-level functionality (New Window, Preferences, Quit&#8230;) could be moved to the application menu.<\/p>\n<p>Tabs provide a number of benefits that make them a convenient way to organise your Web browsing. However, one of their problems is that as their number grows, it can become difficult to go back to a certain tab; a way to improve this situation could be to show a thumbnail of the tab&#8217;s content on mouse-over, allowing for a quick scan of open tabs without having to open them one by one.<\/p>\n<div id=\"attachment_127\" style=\"width: 490px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/tabthumb.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-127\" class=\"size-full wp-image-127\" src=\"http:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/tabthumb.png\" alt=\"Tab thumbnail on mouse-over\" width=\"480\" height=\"240\" srcset=\"https:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/tabthumb.png 480w, https:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/tabthumb-300x150.png 300w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/a><p id=\"caption-attachment-127\" class=\"wp-caption-text\">Tab thumbnail on mouse-over.<\/p><\/div>\n<p>There is a difference between following a link and opening it in a new tab. In the first case, the original page is still visible and readily accessible; in the second, it has disappeared from the UI and has to be kept in the user&#8217;s memory, to be accessed again via the Back button. These two different actions can allow the user to create a curated version of their trail through the Web, one that does not contain all the pages that they have visited but just those that have been deemed important. These tab trees are an important feature but tab-focused interfaces (e.g. <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/tree-style-tab\/\">tree-style tabs<\/a>, <a href=\"http:\/\/www.azarask.in\/blog\/post\/firefoxnext-tabs-on-the-side\/\">other<\/a> <a href=\"http:\/\/www.informationarchitects.jp\/en\/designing-firefox-32\/\">ideas<\/a>) might be far too complex. A compromise could be to include a visual hint at the existence of different tab groups, but without making it the main point of the interface.<\/p>\n<div id=\"attachment_128\" style=\"width: 490px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/tabgroups.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-128\" class=\"size-full wp-image-128\" src=\"http:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/tabgroups.png\" alt=\"Tab groups\" width=\"480\" height=\"100\" srcset=\"https:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/tabgroups.png 480w, https:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/tabgroups-300x62.png 300w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/a><p id=\"caption-attachment-128\" class=\"wp-caption-text\">Without text, can you tell which of these tabs are related?<\/p><\/div>\n<h2>Coarse-grain tab management<\/h2>\n<p>Tabs are a good way of structuring your browsing when their number is low enough (research shows that an usual number of open tabs is around 6). When their number grows, you can have trouble because there are simply too many unrelated tabs in one window. So we have a problem with the organisation of a lot of content that is related to different activities: well, the GNOME Shell is a solution for that. I propose to allow high-level management of Web tabs directly from the Shell Overview (not too different from <a href=\"http:\/\/www.azarask.in\/blog\/post\/designing-tab-candy\/\">Panorama<\/a> with a bit of <a href=\"https:\/\/wiki.mozilla.org\/User:Broccauley\/Fixing_TabCandy\">this<\/a>), providing an overview of the open tabs and supporting their movement between different browser windows and workspaces.<\/p>\n<div id=\"attachment_130\" style=\"width: 490px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/shelloverview.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-130\" class=\"size-full wp-image-130\" src=\"http:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/shelloverview.png\" alt=\"Epiphany in Shell overview\" width=\"480\" height=\"360\" srcset=\"https:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/shelloverview.png 480w, https:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/shelloverview-300x225.png 300w, https:\/\/blogs.igalia.com\/femorandeira\/files\/2011\/10\/shelloverview-400x300.png 400w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/a><p id=\"caption-attachment-130\" class=\"wp-caption-text\">Epiphany window in the Shell overview, displaying the open tabs.<\/p><\/div>\n<h2>Wrap-up<\/h2>\n<p>I have tried to describe a situation where Web browsing is more tightly integrated with the desktop. There is still a lot of work to do: detailed functionality needs to be refined, assumptions need to be verified, mockups and prototypes need to be created and evaluated&#8230;<\/p>\n<p>A browser is a very complex application to design, but luckily there is a lot of knowledge already available that should help us generate ideas and make informed decisions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Following up on my last post, I want to share a few ideas that could improve the use of the Web from GNOME. Many of these come from other people and I am trying to combine them into one coherent package. The first goal would be to offer better support for common Web browsing patterns, [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,7,9,15,16,27],"tags":[],"class_list":["post-123","post","type-post","status-publish","format-standard","hentry","category-design","category-free-software","category-gnome","category-igalia","category-planet-gnome","category-planetigalia","category-webbrowsing"],"_links":{"self":[{"href":"https:\/\/blogs.igalia.com\/femorandeira\/wp-json\/wp\/v2\/posts\/123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.igalia.com\/femorandeira\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.igalia.com\/femorandeira\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.igalia.com\/femorandeira\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.igalia.com\/femorandeira\/wp-json\/wp\/v2\/comments?post=123"}],"version-history":[{"count":2,"href":"https:\/\/blogs.igalia.com\/femorandeira\/wp-json\/wp\/v2\/posts\/123\/revisions"}],"predecessor-version":[{"id":400,"href":"https:\/\/blogs.igalia.com\/femorandeira\/wp-json\/wp\/v2\/posts\/123\/revisions\/400"}],"wp:attachment":[{"href":"https:\/\/blogs.igalia.com\/femorandeira\/wp-json\/wp\/v2\/media?parent=123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.igalia.com\/femorandeira\/wp-json\/wp\/v2\/categories?post=123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.igalia.com\/femorandeira\/wp-json\/wp\/v2\/tags?post=123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}