How to choose layout and color?


A Study on Reading Efficiency

Position: researcher in a group of three
Keywords: design of experiment, statistics, eye tracking
Research Report.pdf (in Chinese)


Introduction

This investigation focuses on two influential factors on reading: layout and color. Based on literature review, we found out that there had been no research that fell into the field of Chinese reading. This inspired us to design experiments and employ eye-tracking device (SMI RED) to answer the question.

My jobs include optimizing the flow of the current app following usability principles, prototyping for new features, and conducting user research.


Design of experiment

We chose two levels of color and 4 levels of layout, which made 8 different levels. The two levels of color (balck&white and colored) split the experiment into 2 groups and acted as comparison to each other. Each of the participants would be in one of the two groups to test the relative effect of different layout (the location of a picture in a paragraph) by reading 4 passages under the given color condition.

The experiment materials were under the same topic, and of similar length (approximately 700 Chinese characters). To further eliminate the influence of different material and the order of reading, we employed Latin-Square method. Operation Manager

The chart below shows the combination of material number and the level of layout for the 8 participants in each color group.


Participant
Number

Combination of material and layout

1

1 up

2 down

3 left

4 right

2

3 right

4 up

1 down

2 left

3

1 left

2 right

3 up

4 down

4

3 down

4 left

1 right

2 up

5

2 up

3 down

4 left

1 right

6

4 right

1 up

2 down

3 left

7

2 left

3 right

4 up

1 down

8

4 down

1 left

2 right

3 up


The study included the following three KPIs:

  • Fixation points
  • Fixation duration
  • Reading efficiency, which was derived using the following calculation:



To study the effect of different layouts, we compared the fixation points, fixation duration and reading efficiency respectively under the two color levels using Fisher LSD method.

Results

  • Fisher LSD analysis



  • Heat Map results


  • Conclusions

     

     

    KPI

    Color

    Black &White

    Fixation Points

    Less when the picture is on the right of the page

    Less when on the right, more when on the top

    Fixation Duartion

    Longer when the picture is on top or at bottom, but not significant.

    Longer when the picture is on top or bottom, but not significant.

    Reading Efficiency

    Best when the picture is at bottom of the page, then left, right and top.

    Best when the picture is on the right of the page, then bottom, left and top.

    Heat Map

    Picture on the top attracts the most attention when reading

    Picture on the left attracts the most attention when reading

    From the result above, we came to the conclusion that:

  • For colored pictures, the best layout is to locate the picture at the bottom; if less favorably, to locate it on the left, right or top successively.
  • For black and white pictures, the best layout is to locate the picture on the right; if less favorably, to locate it at the bottom, on the top, or on the left successively.


  • Back to Portfolio   or, try the following links :