Skip to content
PaperFren

Does a friendly screen layout help students learn better?

Adding pleasant visual elements to specific areas of a learning screen helps students pay more attention and learn better than styling the entire interface.

Source

An eye tracking study: positive emotional interface design facilitates learning outcomes in multimedia learning?

Peng X, Xu Q, Chen Y, et al. · International journal of educational technology in higher education · 2021

doi.org/10.1186/s41239-021-00274-xRead the full paper ↗5 citationscc by

What they did

The researchers evaluated how 83 college students learned from a digital lesson on lightning across three different layout conditions. These conditions included a neutral baseline, a complete interface makeover with warm colors and cartoon-like icons, and a version where these visual features were limited to a local area. The authors tracked eye movements during learning and tested students' recall, comprehension, and problem-solving skills afterwards.

What they found

The local emotional layout resulted in better recall and problem-solving compared to both the holistic layout and the neutral design. Surprisingly, neither emotional interface layout successfully increased positive emotions. However, the local layout led students to focus more attention on written texts and study content, while also prompting them to invest more mental effort.

The limits

What it doesn't show

The study cannot prove why the local layout outperformed the holistic layout, though the authors suggest the holistic design may have felt too restrictive or distracting. Additionally, because the study was set in a controlled laboratory with a specific science topic and a homogeneous group of college students, the findings might not translate to different subjects, age groups, or real-world classrooms. Lastly, the researchers relied on self-reports to measure emotion, leaving the precise psychological mechanisms behind these layouts unclear.

Key terms

Multimedia learning
A method of instruction that combines both words, such as spoken or written text, and pictures, such as static graphics or dynamic animations.
Emotional design
The practice of using visual features like warm colors, round shapes, and friendly icons in learning materials to influence a learner's mood and motivation.
Cognitive Affective Theory of Learning with Media (CATLM)
A framework proposing that learning with technology is shaped by cognitive, motivational, and emotional factors working together.
Eye tracking
A technology that measures and records where a person is looking, how long they focus on specific areas, and the path their eyes follow.
Areas of Interest (AOIs)
Specific, pre-defined sections of a visual display that researchers isolate to measure and analyze eye-movement data.
Cognitive load
The amount of mental effort and working memory resources required to process information and complete a learning task.

Flashcards

1 / 35

Want these cards to stick?

Save the deck to NoteFren and study it with spaced repetition.

Save these cards to NoteFren— study “Does a friendly screen layout help students learn better?” with spaced repetition

Quiz yourself

1 / 10

According to the Cognitive Affective Theory of Learning with Media (CATLM), what three factors must be jointly considered to construct coherent mental representations?

Common questions

Why didn't the friendly design actually make students feel happier?

The researchers suggested that altering only the outer interface might not have been a strong enough emotional trigger compared to redesigning the actual study content itself. It is also possible that a mix of different visual elements overwhelmed the students' feelings instead of boosting them.

How does a local layout differ from a holistic layout?

A local layout places friendly features like warm colors and smiling icons in a specific, confined area of the screen. In contrast, a holistic layout applies these emotional elements across the entire page, including background overlays and borders.

Why did the local design lead to better learning than the holistic design?

The eye-tracking data showed that the local layout encouraged students to spend more time focusing on the text. The holistic layout might have been too visually distracting, whereas the local layout kept students engaged without cluttering their field of vision.

What kind of topic did the students learn during this study?

The students completed a science lesson explaining how lightning forms, which was presented across several static text-and-picture chapters.

More on Online learning