Interface Saliency Evaluation: MATLAB Saliency

Designers knows that the most important elements on the interface should have the highest saliency, but how do you evaluate the saliency? By experience? By visual inspection? And how do you convince others?

Associate Professor, Antti Oulasvirta introduced Itti & Koch saliency model, which can be used to analyze displays and media for the most“attention-grabbing” regions and elements, in the lecture of User Interface.

Here the task is, design advertisements that draw the attention of the user as the first thing he/she sees the interface but immediately after that guide the attention to the most important part of the UI. Advertisement → Main part of the interface. And we used the tool of MATLAB Saliency for the evaluation.

MATLAB Saliency provides a salience/saliency map for an image by three algorithms, showing the GBVS map, most salients part, and salient map overlayed image. Detailed instruction of using this tool is shown in the link as well.

 

I used Google Translate page for the redesign, for it has a precise interface, without advertisement original, and the most important thing is, it fits the saliency task. The main part of the screen is the lightest part of the GBVS map, which means the highest saliency.

figure 1

Figure 1

 

Then I tried to put the advertisement on different parts of the screen, mainly considering above and below the translation area, and calculate the saliency map.

When the advertisement is at the top of the screen (Figure 2), the highest saliency is still at the “translate” button. When the advertisement is below the translation area (Figure 3), it becomes the most eye-tracking element, followed by the “translate” button, which is the right solution.

The whole interface design is shown in Figure 4.

figure 2

Figure 2

figure 3

Figure 3

figure 4
Figure 4

发表评论

电子邮件地址不会被公开。 必填项已用*标注