命令行与GUI会议

2020-08-29 14:04:01

EV,您今天晚些时候有时间讨论命令行终端的新Web GUI吗?松弛的信息说。它来自我们的用户体验主管Alex,而问题中的产品就是SSH客户端。

我有点担心。命令行环境有一个庇护所,在那里我远离了基于浏览器的工具世界,找到了安宁和快乐。虽然很友好,但这个会议邀请闻起来像是一种“入侵”的味道,我在帮助亚历克斯的真诚愿望和为我心爱的CLI辩护的冲动之间左右为难,我和亚历克斯已经共事近10年了。

简单介绍一下背景:Alex一直致力于的开源项目是Teleport(想想类固醇上的SSH),它也支持Kubernetes和(很快!)。其他基础设施访问协议。有了基于浏览器的用户界面,我们就可以说“嘿,它也有Windows和iPad客户端!”此外,当使用未预安装任何SSH客户端的计算机时,工程师会欣赏通过浏览器进行SSH的功能。

Alex觉得我们有机会“革新CLI”,而我不确定我是否想让它“革命化”。

我尽量让自己听起来友好些,我说:“亚历克斯,航站楼并不真的需要用户界面。它只是一个黑匣子,应用程序可以在里面运行。“。

让我们确保航站楼的窗户有尽可能多的空间。

没有必要在它周围留出空格。每个像素都很重要,特别是垂直像素。

需要支持所有键盘快捷键。使用GNOME终端或MacOS终端作为灵感,但也可以考虑在周末使用没有窗口管理器的Raspberry PI。

我觉得做好了充分的准备,就出现在了我们的Zoom Call中。房间里还有其他几个工程师。一些人以前管理过Linux服务器,而另一些人的职业生涯更多的是编程。一些人做后端工作,另一些人做前端工作。体验水平也不同,MacOS和Linux通常是分开的。在这个群体中找到妥协几乎是不可能的,因为我们发现自己自然而然地分成了三个阵营:

快乐的GUI用户。有趣的是,总的来说,这些工程师对基于浏览器的编程(和系统管理)相当满意。我们称他们为“WebUI团队”。

运行终端的核心“CLI团队”将大部分时间最大化,甚至不使用制表符,更喜欢使用tmux进行多任务处理。

亚历克斯一个人在岛上。他并不坚定地属于任何阵营,但对用户体验抱有强烈的信念,他声称这些信念是普遍的,无论用户是不是工程师。

达成协议花了很多讨论。显然,我们都非常关心UI,并且每个人都对CLI SSH客户端需要如何行为有强烈的看法。最终,我们就实现达成一致,你可以向下滚动到这篇文章的底部,查看YouTube演示链接。

但如果你想听听我们讨论了哪些选项,下面是一些让谈话变得激烈的问题。

一种基于网络的终端的设计方案就像典型的网络用户界面一样,其区域被大量的负空间包围。即使是我们的旧用户界面也因为不只是一个盒子而有些“内疚”:

当我们讨论如何最大化可用终端区域并最小化其周围的“Chrome”时,WebUI人员一直将Teleport称为应用程序。CLI团队会回应说,“SSH客户端不是用户正在运行的应用程序。应用程序实际上在内部,所以客户端必须尽可能不可见。“。当然,两人都是对的。我们只是在处理许多嵌套的应用程序,每个应用程序都会占用屏幕的垂直空间:

桌面(顶部栏,有时是Dock)|->;浏览器(窗口栏+选项卡)|->;Teleport Web App(顶部导航栏)|->;Emacs(CLI应用程序)。

看看Emacs用户为了能够通过浏览器访问盒子而牺牲了多少垂直空间?对于某些屏幕尺寸来说,这可能是50%或更多!

然而,这是一个每个人在设计Web UI时都必须支付的表赌注税,最终,我们在这里没有发现任何妥协。

滚动也出现了:WebUI团队认为让终端窗口部分可见没什么大不了的,因为每个浏览器都提供滚动作为处理部分可见内容的一种方式。但是CLI用户会争辩说,SSH客户端必须再次淡入后台,并且不能干扰内部的应用程序(如Emacs)。

最后,我们决定在单独的浏览器选项卡中启动终端窗口,为它们在浏览器中提供尽可能多的垂直空间。此外,终端的工作区将始终等于浏览器页面大小,这与操作系统原生终端应用程序完全相同。

标签本身产生了另一种不同的意见。Web UI小组针对成功的基于Web的编程环境,倡导添加内置的Tab键,这样用户就可以通过按Ctrl+Shift+T之类的键打开新的选项卡。他们甚至使用GNOME终端和MacOS终端作为例子。

另一方面,争论说,用户已经有了两种创建标签的方式:浏览器本身提供标签,他们可以在现有的终端内运行tmux!

然后问题就变成了,如果您在shell中输入exit,该怎么办呢?您是否关闭了Teleport选项卡,最终在浏览器中出现空白页面?当用户键入Exit时,对浏览器页面关闭会有什么反应?如果那是最后一张账单呢?当你在网页上的黑框里键入exit时,如果浏览器消失了,你会觉得舒服吗?

最后,我们决定推出我们自己的内置选项卡来解决以下问题:

浏览器的内置选项卡可以很好地用于单击URL,但是如果您在SSH会话中,如何告诉浏览器为另一台计算机打开另一个选项卡呢?

这给了我们创新的能力:我们添加的跳转机制提供了一些功能,比如查看哪些服务器可用,您甚至可以看到是否有其他用户登录到您试图通过SSH连接到的机器上!

我们有什么革命性的东西吗?不是的。取而代之的是,我们意识到好的旧终端不需要太多的革命性改造。但我们尽了最大努力保留它所有令人敬畏的东西,并使其大部分都可以在Web浏览器中使用。

我们的一些想法没有容易或明显的实施。我们今天还在咀嚼它们。以下是几个例子:

如果用户在基于Web的SSH客户端的bash会话中键入ls,为什么他们不能单击显示的文件呢?如果可以,单击浏览器支持的任何媒体文件都可以让您播放它。话又说回来,SSH客户机的真正目的并不是做这些事情。我们还需要考虑安全问题,以及如何知道显示的内容是否实际上是一个文件。毕竟,终端最终只是在不了解其实际传输内容的情况下推送stdin/stderr/stdout。

我可以将文件放入黑色终端箱并启动文件传输吗?SSH支持这一点。让我们通过浏览器通过拖放来执行SCP!但是,再说一遍,这对安全有什么影响?您要上载到的当前目录是什么?

所有这些问题都没有令人信服的答案,所以我们决定谨慎行事。

但在这些对话中,有一个主题闪耀着光芒。我们中很少人对网络平台目前的局限性感到满意。

我会争辩说,做得不好的GUI绝对是一场噩梦。我的职业生涯始于开发桌面软件。苹果和微软过去都会发布指南,为他们的平台构建合适的GUI。我们的用户体验设计师和PM积极执行这些内容。

例如,在Windows上,每个功能都必须在主窗口的菜单中显示。通过将鼠标悬停在(甚至不是单击)每个菜单项上,您可以了解到每个功能的存在。Photoshop现在还是那样。这些选择背后是有逻辑的,拥有一组标准化的UI控件可以让用户更快地学习软件。

相比之下,现代网络“应用程序”是粗糙的。没有标准化的方法来发现任何东西。是纽扣吗?这是一个下拉列表吗?显示错误只是一个奇怪的背景吗?无缘无故地,东西会自动隐藏和自动出现,你必须移动鼠标,或者练习每次滑动的变化。热键是事后才想到的。即使调整浏览器的大小或滚动有时也会损坏一些东西。

我不打算指名道姓,但几年前我们尝试了一款基于网络的会议应用。UI太差了,近30%的人搞不懂如何加入。加入通话的方式是该页面需要提供的最基本的东西,但UX甚至让这一点变得不可能。

我是CLI第一人,但在我看来,一个做得好的GUI可以极大地拉平用户对新应用程序的学习曲线。然而,要做得好,需要一套特定的规则和惯例。

没有它们是很昂贵的。苹果和微软过去常常雇佣可用性专家,他们为每个人设计了指导方针。今天,如果您想要构建一流的用户体验,每次都是从头开始。

采用的速度。预定义的约定可加速用户学习。大多数Teleport用户没有意识到他们可以为SSH会话(记录的或活动的)添加书签。为什么?因为我们(错误地)依赖于人们的识别能力,即您看到的一切都是URL,并且URL可以被书签标记。但是,由于如此多的Web应用程序违反了这一简单的约定,用户已经不再信任URL。

浏览器技术有一些令人兴奋的发展。考虑到Web组装,但除了安全性和性能改进之外,我们还需要一套更一致且被广泛采用的可重用Web组件标准。

这些Web浏览器的限制在很大程度上指导了我们使用Teleport的新用户界面。他们引起了激烈的讨论,冗长的争论和冗长的解释,但我们最终得到了一些我们都满意的东西。

那么,我们最终得到了什么呢?您可以在YouTube上看到基于Web的SSH客户端的演示,甚至可以自己下载并试用。

那次会议开了好几次,都留下了一些伤疤!亚历克斯甚至就此写了自己的博客文章。但是,嘿-最终,我们建造了一些我们都可以引以为豪的东西。请随时在我们的Github页面上提出改进建议,顺便说一句,我们正在招聘!所以,如果你对如何“革新”你在Github上看到的内容有很多想法,请给我们留言。