Web UI预测行为

图片

应当立即指出,本文只是主观地思考如何看待并实现知道用户在特定时刻在做什么的界面元素的行为。 但是,通过一些研究和实施来支持思想。 走吧



在Internet诞生之初,网站在样式化基本界面元素时并未寻求个性化。 差异很小,因此页面的组成相当一致。

图片

每个链接看起来像一个链接,一个按钮像一个按钮,以及一个复选框像一个复选框。 用户知道他的动作会导致什么,因为他对每个元素的操作原理都有清晰的认识。

无论链接来自何处,无论从导航菜单还是从描述文字中,链接都应发送到另一页。 该按钮可能会通过向服务器发送请求来更改当前页面的内容。 该复选框的状态很可能不会以任何方式影响内容,直到我们按按钮进行一些使用该状态的操作为止。 因此,用户只要看一下界面元素就足够了,以便以很高的概率了解如何与之交互以及它将导致什么。

图片

现代网站为用户提供了大量难题。 所有链接看起来完全不同,按钮看起来不像按钮,依此类推。 要了解一条线是否为链接,用户必须将其悬停在其上才能看到颜色变为更具对比度的颜色。 要了解元素是否为按钮,我们还可以将鼠标悬停以查看填充色调的变化。 有了各种菜单的元素,一切也变得很复杂,其中有些可能会扩展一个附加子菜单,而有些则不会,尽管从外观上看它们是相同的。

但是,我们很快就习惯了经常使用的接口,不再对元素的功能感到困惑。 接口的整体连续性起着主要作用。 看了上面的页面后,我们很可能会立即意识到带有“ Find”字样的黄色箭头不仅是装饰元素,还是一个按钮,尽管它看起来根本不像标准的HTML按钮。 因此,就可预测性和个性而言,大多数资源已经达成了用户认可的稳定共识。

另一方面,获得一个界面可以提前告诉用户元素的详细信息或为它执行部分日常工作将是很有趣的。 光标移向菜单项-您可以预先扩展子菜单,从而加快与界面的交互,用户将光标移至按钮-您可以加载仅在单击后才需要的其他内容。 本文的标题比较了标准界面(左)和预测性界面。

一个简单的视觉测试表明,通过分析光标速度及其导数,可以在一定数量的步骤中预测运动方向和止挡的坐标。 假设以相对于加速度大小的恒定频率触发运动事件,则在接近目标时速度会降低。 因此,您可以提前找出用户计划的操作,从而获得已经宣布的收益。

图片

因此,问题包括两个任务:确定光标的将来坐标和确定用户的意图(悬停,单击,突出显示等)。 所有这些数据应仅在对光标坐标的先前值进行分析的基础上获得。

图片

主要任务是评估光标移动的方向,而不是预测停止力矩,这是一个更复杂的问题。 作为对噪声量的参数的估计,可以通过大量已知方法解决计算运动方向的问题。

我想到的第一个选择是移动平均滤波器。 平均速度在以前的时刻,您可以在下面获得其值。 可以根据某个定律(线性,指数,指数)对先前的值进行加权,以增强最近状态的影响,从而减少更远的值的贡献。

另一种选择是使用递归算法,例如粒子过滤器 。 为了评估光标的速度,过滤器针对速度的当前值(也称为粒子)创建了许多假设。 最初,这些假设是完全随机的,但在此过程中,过滤器会删除无效的假设,并在重新分配阶段定期根据可靠的假设生成新的假设。 因此,从一组假设中,仅保留最接近速度真实值的那些假设。

在下面的示例中,当移动每个粒子的光标进行可视化时,半径值直接与其重量成正比。 因此,重颗粒浓度最高的区域代表了光标移动的最可能方向。


但是,所获得的移动方向不足以确定用户的意图。 由于界面元素的密度很高,因此光标路径可能会覆盖其中的许多元素,这将导致大量的预测算法误报。 在这里,机器学习方法应运而生,即递归神经网络。

光标的坐标是一系列高度相关的值。 当运动变慢时,时间轴上相邻位置的坐标之间的差异因事件而异。 在运动开始时,趋势很明显-坐标间隔增加了。 可能以可接受的精度,通过检查路径不同部分的导数的值并基于这些值的行为对响应阈值进行编码,可以解析地解决此问题。 但从本质上来说,光标位置的坐标序列看起来像一个数据集,非常适合长期短期记忆网络的操作原理。

LSTM网络是递归神经网络的一种特定类型的体系结构,适用于训练长期依赖性。 网络模块在多个状态下存储信息的能力使此操作变得容易。 因此,网络可以根据例如光标放慢的时间,放慢的时间,放慢开始时光标速度的变化等来识别标志。 这些标志表示在某些操作(例如,单击按钮)期间用户行为的特定模式。

图片

因此,通过连续分析在粒子过滤器和神经网络的输出处获得的数据,我们得到了一个时刻,例如当您将光标移到下拉菜单以在下一秒将其打开时,您可以显示一个下拉菜单。 针对每个鼠标事件执行此分析,很难错过合适的时机。

图片

LSTM网络培训可以在以下过程中获得的数据集上进行:分析用户行为,执行一系列旨在与界面交互时识别其功能的任务:单击按钮,将光标移到链接上,打开菜单等。 以下是仅基于粒子过滤器而不进行神经网络分析触发预测元素矩阵的示例。

图片

下面的动画演示了神经网络对预测用户行为的过程的贡献。 误报变得更少了。

图片

通常,任务归结为两个数量之间的平衡-行为与其预测之间的时间间隔以及错误数量(误报和遗漏)。 两种极端情况是选择页面上的所有元素(最大预测周期,大量错误),或者使算法在用户采取行动时立即起作用(零预测周期和丢失错误)。

图片

这些图显示了归一化为最大值的结果,因为用户的速度是完全独立的,并且错误的数量取决于所讨论的接口。 移动平均和粒子滤波算法显示出大致相似的结果。 第二个更加精确,尤其是在使用触摸板的情况下。 最终,所有这些选项都可能高度依赖于特定的用户和设备。

图片

总而言之,这是一个有关HTML元素的预测行为的小演示,它远非理想,但有一点启示。


当然,在此类任务中,至关重要的是要在功能和可预测性之间取得平衡。 如果最终的行为对于用户而言尚不清楚,则所引起的刺激将使所有努力无效。 很难谈论是否有可能使学习算法的过程对于用户来说是不可见的,例如,在用户与页面界面进行通信的第一阶段中,以便使用经过训练的算法,然后使界面元素具有预测性。 在任何情况下,由于每个人的个性特点,都需要额外的培训,这是额外研究的主题。

Source: https://habr.com/ru/post/zh-CN433564/


All Articles