后台按顺序打印选项信息_按时间顺序排列浏览器选项卡以支持任务连续性

后台按顺序打印选项信息

Product teams working on Firefox at Mozilla have long been interested in helping people get things done, whether that’s completing homework for school, shopping for a pair of shoes, or doing one’s 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.

长期以来,Mozilla上使用Firefox的产品团队一直对帮助人们完成工作感兴趣,无论是完成学校的家庭作业,买一双鞋还是缴税。 我们对在浏览器产品中如何支持任务连续性,人们为完成任务所采取的各种步骤进行了深入投资。 而且我们知道,在我们的浏览器中,标签对于执行任务的人起着重要的作用。

Task continuity model

任务连续性模型

In 2015, Firefox researchers Gemma Petrie and Bill Selman developed a model to explain different types of task continuity strategies, which are represented in the middle of the diagram below.

2015年,Firefox研究人员Gemma Petrie和Bill Selman开发了一个模型来解释不同类型的任务连续性策略 ,这些模型在下图中的中间表示。

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.

被动策略包括诸如打开选项卡之类的行为,例如正在考虑购买的产品页面。 积极的策略包括采取行动,例如通过电子邮件将链接(例如,稍后要烹饪的食谱的链接)发送给自己。 共享策略可能涉及使用社交媒体与其他人共享新闻文章等内容。

Fast forward to this year and the team working on Firefox for iOS 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.

到了今年, iOS的Firefox开发团队对我们如何支持涉及打开选项卡的任务连续性感兴趣。 我们继续在用户研究中看到标签在任务连续性中发挥的重要作用,并且我们想探索如何使标签检索和总体标签管理更容易。

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.
此简短演示以某人购买食品加工商为例,说明了按时间顺序排列的Firefox for iOS中的标签排序逻辑。

Based on a trove of user research, the iOS team raised the following question:

基于大量的用户研究,iOS团队提出了以下问题:

Would ordering tabs chronologically in Firefox for iOS make it easier for people to stay organized and feel more in control of their tabs?

在iOS版Firefox中按时间顺序排列标签页是否会使人们更容易保持井井有条并更容易控制标签页?

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.

该团队于今年4月进行了由Elisabeth Klann领导的用户研究,以了解当前的标签行为并评估按时间顺序排列的标签的基本原型。

Image for post
A screenshot of the prototype used for the concept evaluation in April 2020, showing a fictional set of open tabs in Firefox for iOS
2020年4月用于概念评估的原型的屏幕快照,显示了Firefox for iOS虚构的一组打开选项卡

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.

我们在美国招募了10位成人参与者,其中一半已经在使用iOS的Firefox,一半在iPhone上使用Safari或Chrome作为主要浏览器。

What we learned from the first round of user research

我们从第一轮用户研究中学到了什么

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:

通过使用手机上的浏览器选项卡向参与者询问其现有行为,Firefox for iOS团队惊喜地听到参与者按时间描述了选项卡的顺序。 根据他们的标签习惯,参与者分为三类:

  • “I keep it clean” when the participant generally tried to avoid clutter and closed individual tabs often

    当参与者通常试图避免混乱并且经常关闭单个标签时,“我保持干净”
  • “I keep forgetting” when the participant was not conscious of accumulating tabs and typically closed tabs in batches when the experience became cumbersome

    当参与者意识不清时,当参与者不知道要累积标签时,通常会成批关闭标签,“我一直忘记”
  • “I keep tabs open for reference…short term” when the participant was more strategic in leaving tabs open for a few sessions until a task was complete

    当参与者更具策略性地将选项卡打开几个会话直到任务完成时,“我保持选项卡打开以供参考……短期”

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.

所有参与者都能够分辨出原型中选项卡的时间顺序,并报告说该顺序很有用,尤其是最新选项卡的时间顺序。 对于参与者而言,重要的是他们能够删除单个选项卡和一批选项卡,并且我们发现了使UI中更容易发现批处理删除的机会。 在这一轮用户研究之后,团队对Nicole Weber领导的选项卡设计进行了许多更改,这些选项已合并到iOS版Firefox的Beta版中。

Tab date stamps before and after the concept evaluation
One change made after the concept evaluation was to attach dates to the “Today” and “Yesterday” categories of open tabs and to change the “Older” label to the more specific “Last Week.”
在概念评估之后进行的一项更改是将日期附加到打开的选项卡的“今天”和“昨天”类别,并将“较旧”标签更改为更具体的“上周”。
Delete tab functionality before and after the concept evaluation
Another change made after the concept evaluation was to make the functionality for deleting a tab easier to access.
在概念评估之后进行的另一项更改是使删除选项卡的功能更易于访问。

Continuing to learn with a beta build in a diary study

在日记研究中继续通过beta版学习

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.

通过beta版本,这是Firefox的iOS早期版本,带有按时间顺序排列的选项卡,并且仅供研究参与者使用,Mozilla团队希望进行另一轮用户研究,以了解按时间顺序排列的选项卡的感知和用途,这一次是在现实世界中与参与者使用他们自己的设备而不是原型的预先设计的标签进行交互。 我们招募了10名新的参与者,分别是加拿大和美国的成年人,再一次是已经在iPhone上使用Firefox的人和其他浏览器的人。

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:

参与者将按日期顺序使用iOS版Firefox的Beta版作为主要的iPhone浏览器使用了三天,并在每一天结束时回答了有关他们在网页之间和整个Firefox之间迁移的经验的简短调查。 调查问题包括:

  • Did you use Firefox Beta to visit more than one web page today?

    您今天是否使用Firefox Beta访问多个网页?
  • Thinking about when you moved between tabs you were using today, was there anything particularly easy, difficult, and/or confusing about that?

    考虑一下您今天在使用的两个选项卡之间移动时,是否有任何特别简单,困难和/或令人困惑的东西?
  • 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?

    您是否重新浏览了昨天或昨天之前的任何标签? 如果是这样,您能否描述您在做什么以及重新访问该较旧标签的感觉?

After three days, we interviewed participants to discuss their survey responses and overall experience with chronological tabs.

三天后,我们采访了参加者,以按时间顺序的标签讨论了他们的调查回答和总体经验。

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 — the thumbnail image, page title and/or URL, and date stamp in a list-like format — that 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:

从第二轮用户研究中,我们了解到,虽然标签的时间顺序似乎没有中断任何工作流程,但它是标签本身的整体设计-缩略图,页面标题和/或URL以及日期戳一种类似于列表的格式—与现有的设计(例如iPhone上Safari中未注明日期,无标题,类似甲板的选项卡)相比,选项卡更加有用。 一位与会者解释说,选项卡的格式使她想起了她想完成的任务。 她说:

“So 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’s right. And then I went back and did that task.”

“因此,这种布局吸引了我,因为我要回到页面上。 我当时想,哦,是的,我也去了那个。 那就对了。 然后我回去做那个任务。”

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.

另一位参与者还说,在回到所有打开的标签的小图像视图时,他想起了他前一天正在购物的鞋子以及他想返回购物的愿望。 在我们采访期间,他带着鞋子回到了标签页。

Image for post
Participant C1’s open tabs in Firefox Beta, including a tab with a thumbnail of a shoe 参与者C1在Firefox Beta中的打开选项卡,包括带有鞋子缩略图的选项卡

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.

但是,在某些情况下,建议的设计失败了。 由于未填充缩略图,一个错误使一些选项卡变得难以理解。 另外,一些参与者在他们的设备上使用了放大的文本,而我们预计这种设置不会导致标签标题和URL被截断。 未填充缩略图且标签标题被截断的参与者很难识别标签。 我们还发现了一个机会,我们知道这也是台式机浏览器中的一个机会,当一个人有多个看起来相似的选项卡时,尤其是在缩略图级别,例如几个亚马逊页面或不同零售商的页面,这些选项可以使选项卡更易于辨认对于相同的产品。

Image for post
Participant C3’s open tabs in Firefox Beta with blank thumbnail images and truncated tab titles and URLs 参与者C3在Firefox Beta中的打开选项卡,其中空白缩略图,选项卡标题和URL均被截断

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 — the 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.

在我们积极致力于修复与缩略图相关的错误的同时,了解设计欠佳的情况也很有帮助-关键的要点是设计的不同部分,日期戳,缩略图,页面标题和URL协同工作,以帮助人们记住他们访问过的页面以及这些访问的上下文。

Next: Setting out to understand if iOS findings carry over to other platforms

下一步:着手了解iOS的发现是否会延续到其他平台

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:

由Ashley Thomas领导的团队计划继续按时间顺序排列标签,例如研究如何使标签元数据更可靠地填充,并计划用户研究以评估Android,平板电脑和台式机上的拟议设计。 团队希望在未来几周内提出的一些问题包括:

  • Are there ways to improve further the accessibility of the proposed design?

    有没有办法进一步改善拟议设计的可及性?
  • Will complex workflows common to larger form factors help us uncover new insights about chronological tabs?

    大型外形通用的复杂工作流程是否可以帮助我们发现有关按时间顺序排列的标签的新见解?
  • Is tab functionality most helpful when it is the same across platforms or might platform-specific designs better support task continuity?

    当跨平台相同时,选项卡功能是否最有用?或者特定于平台的设计可以更好地支持任务连续性吗?
  • Are there other ways of sorting tabs that would support people’s workflows?

    还有其他对选项卡进行排序的方式来支持人们的工作流程吗?

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.

感谢Firefox for iOS团队和许多Mozillians,包括iOS团队以外的人,他们对本文的早期草稿进行了回顾并提供了宝贵的反馈意见。

Also published on the Firefox UX blog

也发布在Firefox UX博客上

翻译自: https://medium.com/firefox-ux/ordering-browser-tabs-chronologically-to-support-task-continuity-203d0e7f5deb

后台按顺序打印选项信息

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值