除了作为技术作家和技术记者的工作外，在过去的九年中，我还发布了一部动画片，该动画片吸引了技术和技术业务。在那段时间里，我学到了一个重要的教训，我称之为5秒规则：当读者观看我的一部动画片时，我有五秒钟的时间来获得含义并大笑。
下面的图1显示了一部演示此规则的卡通：
图1：5秒规则规定，图形必须在五秒钟内传达其含义。
5秒的统治迫使我专注于诸如卡通的意图，我在标题中使用了多少个单词，角色和框架的位置以及卡通的整体构造等。
此外，可以将此规则应用于技术插图。很少有技术插图旨在使人们发笑，但他们必须快速，准确地传达其预期意义。这意味着一个人不仅必须以视觉上明显的方式呈现信息，而且还必须以有意识和潜意识地处理信息的方式。结果，技术插画家必须采取更细微的方法来构建图形。
本文展示了创建技术插图时这种细微差别的作用。我们将创建一个技术插图，描述技术过程，然后在几个版本上进化该插图，每个版本都采用更细微的方法来使图形的内容更易读。
插图描述的技术过程是大多数开发团队中典型的技术过程，如下：
在Github中创建功能分支，然后在开发人员的计算机上查看该分支以进行一些工作。
开发人员对工作产品进行更改，并针对这些更改创建GitHub拉的请求。
拉动请求已批准，分支合并到主分支中。
将5秒规则应用于技术插图
图2是图形描绘上述过程的第一次尝试。请记住在此插图中吸引您的眼睛。
图2：说明GitHub中的特征分支过程。
我敢打赌，您的眼睛被吸引到绿色的“开始”圆圈和红色“端”圆圈。这是有道理的，因为这些颜色与整体插图的黑白方案相比脱颖而出。
绿色和红色的使用不是任意的。它们具有固有的含义，与交通信号灯中的颜色相关联：绿色表示“ go”，而红色表示“停止”。因此，读者的思想可能假设绿色起始圆圈表示某物的开始，红色端圆圈表示某事的终结。此外，从右侧指向右侧的箭头散发出的箭头告诉您的思想，将眼睛朝着下一个盒子的方向传播。
人们可能还会假设读者知道框及其中的文字描述了过程中的任务。图形下方的标题不仅强化了图形代表过程的观念，而且对这种理解至关重要。
字幕定义图形的上下文。为了从图形中得出更清晰的含义，读者更仔细地检查每个框。即使是对过程中有多少个步骤的简单确定，读者也需要计算需要时间的框数 - 并可能违反5秒规则，以在五秒钟内提供最大的含义。
下面的图3是技术插图的下一个迭代。请注意，添加为每个任务分配一个数字的蓝色圆圈。
图3：说明GitHub中的特征分支过程。
添加蓝色的编号圆圈扩展了前面引入的绿色/红色图案，并以加强任务序列的方式将读者的视线吸引到任务框。编号的圆圈还暗示了该过程中有多少个任务。读者不需要计算它们，只是在末端圆圈之前读取最终蓝色圆圈中的数字以确定任务数。
总体而言，读者的眼睛更快地遍历图形，并传达更多的含义。但是，尽管有一个无意识的问题，但存在一个问题。
英语阅读器的自然眼动是从左到右的。然而，在图3中，该过程的流动迫使读者的眼动向每行的读取方向交替：从左到右，从右到左，然后再次向右，然后再次向左到左至右。交替的阅读方向迫使英语阅读器下意识地调整其自然倾向，以从左到右阅读。
更复杂的问题是红端圆圈出现在图形的左侧。这进一步破坏了从左到右的阅读模式。
下面的图4是图3的修订版。请注意，从左到右读取的所有行上的任务框，红色端圆圈出现在图形的右侧。这两个更改都涉及读者对从左到右阅读模式的倾向。
图4：说明GitHub中的特征分支过程。
但是，我们引入了一个新问题：与阅读方向相比，有关眼睛偏爱接近性的潜在认知迷失方向。
下图5显示了插图的两个最新版本的并排比较：左侧的图3与右侧的交替阅读模式和图4及右右读取模式一致。这是迷失方向问题发挥作用的地方。
图5：与阅读方向相比，接近性问题。
在该图形的左侧，眼睛已经在任务3上，任务4在其下方。这鼓励读者的目光从右向左移动。实际上，如右侧图所示，将读者的眼睛一直移到左侧，从任务3到任务4，可能会更加困难。
诀窍是教读者的眼睛一直向左移动而不会产生额外的精神努力。为此，我们增加了任务3和任务4之间连接器箭头的厚度，这将眼睛吸引到连接器箭头，并“教”读者的眼睛移动到下一个任务，然后从左到右读取。
用可用性测试确认5秒规则
我们如何真正知道增加连接箭头的厚度是否真的有助于读者吸收图中的任务流？回答这个问题的最佳方法是进行可用性测试，其中每个图都会呈现给一组读者。
如何进行此类测试不在本文的范围之内。但是，可用性测试的目的是确定在最短时间内更易于理解哪个图。因此，可用性测试必须测量读者以定量方式吸收图形信息的速度。关于首选图的意见因读者而异。定量方法将产生更容易客观地分析的结果。
希望本文提供的示例将激发您花时间应用5秒的规则，以创建技术插图，使读者最容易快速，准确地吸收图形信息。