{"id":4413,"date":"2020-07-31T10:08:59","date_gmt":"2020-07-31T14:08:59","guid":{"rendered":"https:\/\/blog.mozilla.org\/ux\/?p=4413"},"modified":"2020-07-31T14:29:09","modified_gmt":"2020-07-31T18:29:09","slug":"ordering-browser-tabs-chronologically-to-support-task-continuity","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/ux\/2020\/07\/ordering-browser-tabs-chronologically-to-support-task-continuity\/","title":{"rendered":"Ordering Browser Tabs Chronologically to Support Task Continuity"},"content":{"rendered":"<p class=\"graf graf--p\">Product teams working on <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.mozilla.org\/en-US\/firefox\/new\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-href=\"https:\/\/www.mozilla.org\/en-US\/firefox\/new\/\">Firefox at Mozilla<\/a> have long been interested in helping people get things done, whether that\u2019s completing homework for school, shopping for a pair of shoes, or doing one\u2019s taxes. We are deeply invested in how we can support task continuity, the various steps that people take in getting things done, in our browser products. And we know that in our browsers, tabs play an important role for people carrying out tasks.<\/p>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Task continuity model<\/strong><\/p>\n<p class=\"graf graf--p\">In 2015, Firefox researchers Gemma Petrie and Bill Selman developed a model to explain different types of <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/blog.mozilla.org\/ux\/2015\/04\/task-continuity\/\" target=\"_blank\" rel=\"noopener noreferrer\" data-href=\"https:\/\/blog.mozilla.org\/ux\/2015\/04\/task-continuity\/\">task continuity strategies<\/a>, which are represented in the middle of the diagram below.<\/p>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image aligncenter\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/0*DEd-VvxFptL7OAVf\" alt=\"Task continuity model diagram\" width=\"848\" height=\"534\" data-image-id=\"0*DEd-VvxFptL7OAVf\" data-width=\"848\" data-height=\"534\" data-is-featured=\"true\" \/><\/figure>\n<p class=\"graf graf--p\">Passive strategies include behaviors like leaving a tab open, such as a page for a product that one is considering purchasing. Active strategies include actions like emailing a link, for example a link to a recipe to cook at a later time, to oneself. Share strategies might involve using social media to share content, such as a news article, with other people.<\/p>\n<p class=\"graf graf--p\">Fast forward to this year and the team working on <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/www.google.com\/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=&amp;ved=2ahUKEwi1ptTk_vXqAhUtXhUIHQriBgEQFjAnegQIAhAB&amp;url=https%3A%2F%2Fapps.apple.com%2Fus%2Fapp%2Ffirefox-private-safe-browser%2Fid989804926&amp;usg=AOvVaw2LKtWGStqvNG-wWvrVX0Hg\" target=\"_blank\" rel=\"noopener noreferrer\" data-href=\"https:\/\/www.google.com\/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=&amp;ved=2ahUKEwi1ptTk_vXqAhUtXhUIHQriBgEQFjAnegQIAhAB&amp;url=https%3A%2F%2Fapps.apple.com%2Fus%2Fapp%2Ffirefox-private-safe-browser%2Fid989804926&amp;usg=AOvVaw2LKtWGStqvNG-wWvrVX0Hg\">Firefox for iOS<\/a> was interested in how we might support task continuity involving leaving tabs open. We continued to see in user research the important role that tabs play in task continuity, and we wanted to explore how to make tab retrieval and overall tab management easier.<\/p>\n<p class=\"graf graf--p\">In most web browsers on smartphones, tabs are ordered based on when a person first opened them, with the oldest tabs on one end of the interface (top, bottom, left, or right) and the newest tabs stacking to the opposite end of the interface. This ordering logic gets more complex if a new tab is prompted to open when someone taps on a link in an existing tab. A site may be designed to launch links in new tabs or a person may choose to open new tabs for links. The new tab, in that case, typically will open immediately next to the tab where the link was tapped, pushing all other later tabs toward the other end of the interface. All of this gets even trickier when managing more than just a few tabs. This brief demonstration illustrates tab ordering logic in Firefox for iOS before chronological tabs using the example of someone shopping for a food processor.<\/p>\n<figure class=\"graf graf--figure graf--iframe\">\n<div class=\"aspectRatioPlaceholder is-locked\">\n<div class=\"iframeContainer\">\n<div style=\"text-align: center;\">\n<p><iframe loading=\"lazy\" title=\"Tabs Example\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Sj34uM7BZqg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<\/div>\n<\/div>\n<\/div><figcaption class=\"imageCaption\"><\/figcaption><\/figure>\n<p class=\"graf graf--p\">Based on a trove of user research, the iOS team raised the following question:<\/p>\n<blockquote class=\"graf graf--blockquote\"><p>Would ordering tabs chronologically in Firefox for iOS make it easier for people to stay organized and feel more in control of their tabs?<\/p><\/blockquote>\n<p class=\"graf graf--p\">The team conducted user research, led by Elisabeth Klann, in April of this year to understand current tab behaviors and to evaluate a basic prototype of the concept of chronological tabs.<\/p>\n<figure class=\"graf graf--figure\">\n<div style=\"width: 390px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*Ik3Xr88bZpa4MmUdmo4wjg.png\" alt=\"\" width=\"380\" height=\"624\" data-image-id=\"1*Ik3Xr88bZpa4MmUdmo4wjg.png\" data-width=\"380\" data-height=\"624\" \/><p class=\"wp-caption-text\">A screenshot of the prototype used for the concept evaluation in April 2020, showing a fictional set of open tabs in Firefox for\u00a0iOS<\/p><\/div>\n<p>We recruited 10 adult participants in the US, half of whom were already using Firefox for iOS and half of whom used either Safari or Chrome as their main browser on their iPhone.<\/figure>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">What we learned from the first round of user research<\/strong><\/p>\n<p class=\"graf graf--p\">From asking participants about their existing behaviors with browser tabs on their phones, the Firefox for iOS team was pleasantly surprised to hear participants describe the order of their tabs in terms of time. Participants fell into three categories in terms of their tab habits:<\/p>\n<ul class=\"postList\">\n<li class=\"graf graf--li graf--startsWithDoubleQuote\">\u201cI keep it clean\u201d when the participant generally tried to avoid clutter and closed individual tabs often<\/li>\n<li class=\"graf graf--li graf--startsWithDoubleQuote\">\u201cI keep forgetting\u201d when the participant was not conscious of accumulating tabs and typically closed tabs in batches when the experience became cumbersome<\/li>\n<li class=\"graf graf--li graf--startsWithDoubleQuote\">\u201cI keep tabs open for reference\u2026short term\u201d when the participant was more strategic in leaving tabs open for a few sessions until a task was complete<\/li>\n<\/ul>\n<p class=\"graf graf--p\">All participants were able to discern the chronological ordering of tabs in the prototype and reported that the ordering was helpful, particularly the chronological ordering of the most recent tabs. It was important to participants that they be able to delete single tabs and batches of tabs, and we identified an opportunity for making batch deletion more discoverable in the UI. Following this round of user research, the team made numerous changes to the tab design, led by Nicole Weber, which were incorporated into a beta build of Firefox for iOS.<\/p>\n<figure class=\"graf graf--figure\">\n<p><div style=\"width: 1610px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/0*rUe2RXT3-DsTDDNI\" alt=\"Tab date stamps before and after the concept evaluation\" width=\"1600\" height=\"1138\" data-image-id=\"0*rUe2RXT3-DsTDDNI\" data-width=\"1600\" data-height=\"1138\" \/><p class=\"wp-caption-text\">One change made after the concept evaluation was to attach dates to the \u201cToday\u201d and \u201cYesterday\u201d categories of open tabs and to change the \u201cOlder\u201d label to the more specific \u201cLast\u00a0Week.\u201d<\/p><\/div><\/figure>\n<figure class=\"graf graf--figure\">\n<p><div style=\"width: 1610px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/0*Y6qlpmfBU_T8p9YA\" alt=\"Delete tab functionality before and after the concept evaluation\" width=\"1600\" height=\"1138\" data-image-id=\"0*Y6qlpmfBU_T8p9YA\" data-width=\"1600\" data-height=\"1138\" \/><p class=\"wp-caption-text\">Another change made after the concept evaluation was to make the functionality for deleting a tab easier to\u00a0access.<\/p><\/div><\/figure>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Continuing to learn with a beta build in a diary study<\/strong><\/p>\n<p class=\"graf graf--p\">With the beta build, an early version of Firefox for iOS with chronological tabs and only available to research participants, the Mozilla team wanted to do another round of user research to understand the perceptions and utility of chronological tabs, this time in the real-world context with participants using their own devices rather than the pre-designed tabs of a prototype. We recruited 10 new participants, adults in Canada and the US and again a mix of people already using Firefox on their iPhones and people using other browsers.<\/p>\n<p class=\"graf graf--p\">Participants used the beta build of Firefox for iOS with chronological tabs as their primary iPhone browser for three days and answered a brief survey at the end of each of those days about their experience moving between web pages and of Firefox overall. Survey questions included:<\/p>\n<ul class=\"postList\">\n<li class=\"graf graf--li\">Did you use Firefox Beta to visit more than one web page today?<\/li>\n<li class=\"graf graf--li\">Thinking about when you moved between tabs you were using today, was there anything particularly easy, difficult, and\/or confusing about that?<\/li>\n<li class=\"graf graf--li\">Did you revisit any tabs from yesterday or before yesterday? If so, can you please describe what you were doing and what it was like to revisit that older tab?<\/li>\n<\/ul>\n<p class=\"graf graf--p\">After three days, we interviewed participants to discuss their survey responses and overall experience with chronological tabs.<\/p>\n<p class=\"graf graf--p\">From the second round of user research, we learned that while the chronological order of tabs did not seem to break any workflows, it was the overall design of the tabs themselves\u200a\u2014\u200athe thumbnail image, page title and\/or URL, and date stamp in a list-like format\u200a\u2014\u200athat made tabs more helpful than existing designs such as the undated, untitled, deck-like tabs in Safari on iPhone. One participant explained that the formatting of the tabs reminded her of tasks she wanted to complete. She said:<\/p>\n<blockquote class=\"graf graf--blockquote graf--startsWithDoubleQuote\"><p>\u201cSo is it was this layout that kind of nudged me because I was going back to a page. And I was like, oh yeah, I went to that one, too. That\u2019s right. And then I went back and did that task.\u201d<\/p><\/blockquote>\n<p class=\"graf graf--p\">Another participant also said, in going back to the view of all of his open tabs with the small images, he remembered the shoes he was shopping for the day before and his desire to return to that shopping. He returned to the tab with the shoes during our interview.<\/p>\n<figure class=\"graf graf--figure\">\n<div style=\"width: 372px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*xQPkW0V255wKe25BeSbIeA.png\" alt=\"\" width=\"362\" height=\"787\" data-image-id=\"1*xQPkW0V255wKe25BeSbIeA.png\" data-width=\"362\" data-height=\"787\" \/><p class=\"wp-caption-text\">Participant C1\u2019s open tabs in Firefox Beta, including a tab with a thumbnail of a\u00a0shoe<\/p><\/div>\n<p>There were instances, however, when the proposed design broke. A bug rendered some tabs unintelligible due to thumbnail images not populating. Also, several participants used enlarged text on their devices, a setting we did not anticipate that resulted in truncated tab titles and URLs. Participants for whom thumbnails were not populating and tab titles were truncated had a particularly difficult time discerning tabs. We also identified an opportunity, which we know is also an opportunity in the desktop browser, to make tabs more discernible in situations when a person has multiple tabs that look similar, particularly at thumbnail scale, like several Amazon pages or pages from different retailers all for the same product.<\/figure>\n<figure class=\"graf graf--figure\">\n<div style=\"width: 383px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*2rUAxutP0_R1sZU-fRbXpw.png\" alt=\"\" width=\"373\" height=\"655\" data-image-id=\"1*2rUAxutP0_R1sZU-fRbXpw.png\" data-width=\"373\" data-height=\"655\" \/><p class=\"wp-caption-text\">Participant C3\u2019s open tabs in Firefox Beta with blank thumbnail images and truncated tab titles and\u00a0URLs<\/p><\/div>\n<p>While we are actively working on fixing the bug related to the thumbnail images, it was nevertheless helpful to learn about situations where the design fell short\u200a\u2014\u200athe key takeaway being that the different parts of the design, the date stamps, the thumbnail image, the page title, and the URL work in concert to help people remember pages they have visited and the context for those visits.<\/figure>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Next: Setting out to understand if iOS findings carry over to other platforms<\/strong><\/p>\n<p class=\"graf graf--p\">The team, led by Ashley Thomas, plans to continue work on chronological tabs, such as investigating how we can make tab meta data populate more reliably and planning user research to evaluate the proposed design on Android, tablets, and desktop. Some of the questions the team is excited to pursue in coming weeks include:<\/p>\n<ul class=\"postList\">\n<li class=\"graf graf--li\">Are there ways to improve further the accessibility of the proposed design?<\/li>\n<li class=\"graf graf--li\">Will complex workflows common to larger form factors help us uncover new insights about chronological tabs?<\/li>\n<li class=\"graf graf--li\">Is tab functionality most helpful when it is the same across platforms or might platform-specific designs better support task continuity?<\/li>\n<li class=\"graf graf--li\">Are there other ways of sorting tabs that would support people\u2019s workflows?<\/li>\n<\/ul>\n<p class=\"graf graf--p\">Thank you to the Firefox for iOS team and the many Mozillians, including people outside of the iOS team, who reviewed and provided valuable feedback on an early draft of this post.<\/p>\n<p>Originally published on\u00a0<a href=\"https:\/\/medium.com\/firefox-ux\/ordering-browser-tabs-chronologically-to-support-task-continuity-203d0e7f5deb\">medium.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Product teams working on Firefox at Mozilla have long been interested in helping people get things done, whether that\u2019s completing homework for school, shopping for a pair of shoes, or &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/ux\/2020\/07\/ordering-browser-tabs-chronologically-to-support-task-continuity\/\">Read more<\/a><\/p>\n","protected":false},"author":1627,"featured_media":4415,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[246,4498,9594],"tags":[440712],"coauthors":[52911],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/4413"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/users\/1627"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/comments?post=4413"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/4413\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/media\/4415"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/media?parent=4413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/categories?post=4413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/tags?post=4413"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/coauthors?post=4413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}