{"id":335,"date":"2013-01-29T18:26:25","date_gmt":"2013-01-29T17:26:25","guid":{"rendered":"http:\/\/blogs.igalia.com\/femorandeira\/?p=335"},"modified":"2013-04-17T17:10:05","modified_gmt":"2013-04-17T15:10:05","slug":"a-few-more-ideas-for-web-navigation-and-a-talk-at-fosdem","status":"publish","type":"post","link":"https:\/\/blogs.igalia.com\/femorandeira\/2013\/01\/29\/a-few-more-ideas-for-web-navigation-and-a-talk-at-fosdem\/","title":{"rendered":"A few more ideas for Web navigation &#8211; and a talk at FOSDEM"},"content":{"rendered":"<p>I will be in Brussels next weekend to attend <a href=\"https:\/\/fosdem.org\/2013\/\">FOSDEM<\/a> and give an updated version of the &#8220;Sketching Interactions&#8221; talk that I delivered at GUADEC (<a href=\"http:\/\/blogs.igalia.com\/femorandeira\/2012\/07\/31\/sketching-interactions-talk-at-guadec-2012\/\">summary<\/a>).<\/p>\n<p>In order to have some more material to talk about, I have revisited my <a href=\"http:\/\/blogs.igalia.com\/femorandeira\/2012\/11\/14\/ephy-sketch\/\">interactive sketch<\/a> for navigating among open pages in Epiphany.<\/p>\n<p>To recap: the problem that we are looking into is how to manage open pages in your Web browser. This is commonly done with tabs, but these have some problems: they display very little information, are hard to use in touch screens, and scale badly.<\/p>\n<p>To illustrate this last point, here is how 15 open pages would look in Epiphany right now:<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/blogs.igalia.com\/femorandeira\/files\/2013\/01\/ephy_15tabs.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-343\" src=\"http:\/\/blogs.igalia.com\/femorandeira\/files\/2013\/01\/ephy_15tabs-1024x380.png\" alt=\"Epiphany Web browser with 15 tabs open\" width=\"512\" height=\"170\" \/><\/a><\/p>\n<p>Hardly ideal.<\/p>\n<p>This work looks into alternative in-app navigation among open pages that would (hopefully!) improve Web browsing. I started by prototyping the <a href=\"https:\/\/live.gnome.org\/Design\/Apps\/Web\">current proposal in the GNOME wiki<\/a> and have continued from there. From the previous iteration, it seemed that a grid view might be a good solution for choosing among open pages:<\/p>\n<div id=\"attachment_357\" style=\"width: 522px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blogs.igalia.com\/femorandeira\/files\/2013\/01\/ephy-grid.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-357\" class=\"wp-image-357\" src=\"http:\/\/blogs.igalia.com\/femorandeira\/files\/2013\/01\/ephy-grid.png\" alt=\"Epiphany interactive sketch, grid with open pages\" width=\"512\" height=\"384\" srcset=\"https:\/\/blogs.igalia.com\/femorandeira\/files\/2013\/01\/ephy-grid.png 1024w, https:\/\/blogs.igalia.com\/femorandeira\/files\/2013\/01\/ephy-grid-300x225.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><p id=\"caption-attachment-357\" class=\"wp-caption-text\">Grid with open pages<\/p><\/div>\n<p>I have extended that idea with a &#8220;New Page&#8221; view that would allow the user to review and search among his bookmarks, recently visited pages, reading list, etc. For now, this view just offers a fixed list of sites to illustrate how navigation would work, but it wouldn&#8217;t be hard to extend it to try more complex behaviour:<\/p>\n<div id=\"attachment_358\" style=\"width: 522px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blogs.igalia.com\/femorandeira\/files\/2013\/01\/ephy-newpage.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-358\" class=\"wp-image-358\" src=\"http:\/\/blogs.igalia.com\/femorandeira\/files\/2013\/01\/ephy-newpage.png\" alt=\"Epiphany interactive sketch, New Page view\" width=\"512\" height=\"384\" srcset=\"https:\/\/blogs.igalia.com\/femorandeira\/files\/2013\/01\/ephy-newpage.png 1024w, https:\/\/blogs.igalia.com\/femorandeira\/files\/2013\/01\/ephy-newpage-300x225.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><p id=\"caption-attachment-358\" class=\"wp-caption-text\">New Page view<\/p><\/div>\n<p>You can get the code <a href=\"http:\/\/people.igalia.com\/femorandeira\/files\/Ephy_20130129.tar.gz\">here<\/a>.<\/p>\n<p>And this is how it looks in action:<\/p>\n<p><iframe loading=\"lazy\" title=\"Epiphany interactive sketch - FOSDEM 2013\" src=\"https:\/\/player.vimeo.com\/video\/58463484?dnt=1&amp;app_id=122963\" width=\"500\" height=\"375\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe><\/p>\n<p>(<a href=\"http:\/\/vimeo.com\/58463484\">link to video<\/a>)<\/p>\n<p>Part of the reason for working on this was to offer some ideas to my Igalia colleagues and other members of the GNOME community who are working on Epiphany and\u00a0WebKitGTK+. The other part was to encourage people to try out ideas, not just argue about them. Too much time is lost <em>arguing<\/em> when we could be <em>showing<\/em>.<\/p>\n<p>This can be done quickly and inexpensively: in this particular example, in 300+ lines of QML.\u00a0The key is to focus on doing just the bare minimum to portray the experience that we are interested in. Because these sketches are quickly and cheap, they enable us to explore and discard many ideas easily.<\/p>\n<p>Communication of design ideas and decisions is specially complex in a distributed community like GNOME. Interactive sketches like the one here could help improve this situation.<\/p>\n<p>See you in Brussels!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I will be in Brussels next weekend to attend FOSDEM and give an updated version of the &#8220;Sketching Interactions&#8221; talk that I delivered at GUADEC (summary). In order to have some more material to talk about, I have revisited my interactive sketch for navigating among open pages in Epiphany. To recap: the problem that we [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,7,15,16,27],"tags":[],"class_list":["post-335","post","type-post","status-publish","format-standard","hentry","category-design","category-free-software","category-gnome","category-planet-gnome","category-planetigalia","category-webbrowsing"],"_links":{"self":[{"href":"https:\/\/blogs.igalia.com\/femorandeira\/wp-json\/wp\/v2\/posts\/335","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=335"}],"version-history":[{"count":33,"href":"https:\/\/blogs.igalia.com\/femorandeira\/wp-json\/wp\/v2\/posts\/335\/revisions"}],"predecessor-version":[{"id":397,"href":"https:\/\/blogs.igalia.com\/femorandeira\/wp-json\/wp\/v2\/posts\/335\/revisions\/397"}],"wp:attachment":[{"href":"https:\/\/blogs.igalia.com\/femorandeira\/wp-json\/wp\/v2\/media?parent=335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.igalia.com\/femorandeira\/wp-json\/wp\/v2\/categories?post=335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.igalia.com\/femorandeira\/wp-json\/wp\/v2\/tags?post=335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}