分散注意力效應 split-attention effect

概念

相同的訊息分散在不同的位置，導致我們需要來回參照訊息之間關係的一種現象。所以我們應盡量避免將相同的訊息擺放在不同的位置，以免將認知資源浪費在分散注意力效應上。

範例一

這個例子是關於管理task的程式碼，我們可以看到程式碼上方的註解，將task的status分為幾種狀態：0代表pending；1代表in progress；2代表completed。而當我們看到程式碼中的status，會發現當看到status的數字，需要將數字參照上方註解對應status代表的含意，這樣會浪費認知資源在整合訊息上。

優化前之task管理程式碼

/**
 * task status
 * 0: pending
 * 1: in progress
 * 2: completed
 */
const task = Task.get();

if (task.status === 0) {
  task.status = 1;
  task.process();
  task.status = 2;
}

因此我們可試著改寫程式碼，避免來回參照的情況產生。我們將status的變數直接用有意義的字串去處理，這樣在程式碼中，空間上是整合在一起的，因此就避免了來回參照的情況發生。

優化後之task管理程式碼

const task = Task.get();

if (task.status === 'pending') {
  task.status = 'inProgress';
  task.process();
  task.status = 'completed';
}

範例二

這個例子是關於createUser的function使用，createUser function的第一個參數是name，第二個參數是gender，第三個參數是email。

在使用createUser function時，將參數按照順序擺放，就會將參數對應到name, gender, email。

優化前之createUser程式碼

function createUser(name, gender, email) {
  // do something...
}

createUser('Foo', 'M', '[e-mail]');

但這樣會有個問題，就是我們在看到createUser時，無法直覺的知道參數內容的含意，需要回推到之前的程式碼，觀察參數擺放的順序，得知參數的含意。

這樣會產生分散注意力的效應，因此我們可以將程式碼優化，利用解構的處理方式，根據解構的特性，這樣在使用createUser function時，可以直覺的知道每一個解構的參數，所代表的含意。

優化後之createUser程式碼

function createUser({name, gender, email}) {
  // do something...
}

createUser({
  name: 'Foo', 
  gender: 'M',
  email: '[e-mail]',
});