English
English

The application and trend of marquee elements on the website

Why a marquee?

In addition to traditional use in TV news broadcasts, video games, stations, and commercial district building advertisements, in recent years, the use of marquees has begun to rise on domestic and foreign websites. Marquees are now being incorporated into brand official websites, event-type websites, and even e-commerce websites. This article will explore the role and future trends of marquees in user experience from the perspectives of human factors engineering, cognitive psychology, and emotional design.

Background of the Marquee

The marquee, also known as the news ticker or subtitle marquee, is usually used to display breaking news or real-time messages, and in buildings or indoor spaces, it is used to display information.

The marquee typically consists of dynamic text information that slides from right to left and spans across the screen. In Taiwan, due to the reading context of Chinese characters, there is also an interactive vertical way of reading, as well as different entry and exit directions based on different language reading characteristics.

The news ticker did not originally provide a good cognitive experience, until the 1980s with the development of technology, and began to gradually display emergency or warning messages related to weather, sports scores, and stocks on TV news.

Marquee Design Principles

  • Human Factors Engineering

  • Cognitive Psychology

  • Emotional Design

Human Factors Engineering: Visual Structure

Entering the first field of marquee research is to understand how humans perceive information. Vision is the first barrier for people to receive and interpret information, and the main perception functions can be further divided into: visual, auditory, tactile, olfactory, and gustatory. Among the five categories of perception, vision accounts for 80% of information reception. Vision can be considered as the first gateway for humans to contact environmental objects (the concept of visual animals also stems from this).

The main function of vision is to judge color and depth perception. Color is perceived by the eyes and generated by the brain, while depth perception requires the transmission of signals through binoculars or dynamic information to reach the visual cortex layer of the brain.

Visual structure can be simply divided into two parts: eye muscle movement and visual boundaries:

  • Eye Muscles

In fact, the mechanism of eye movement has a significant physical impact on vertical and horizontal marquees. Horizontal marquee lights are relatively more friendly to the eyes than vertical marquee lights, because there are six eye muscles in total, but only two muscles control horizontal movement. With the fatigue generated by reading from left to right relatively lower than reading vertically.

Basic theory of eye muscles:

  1. Superior rectus: makes the eyeball move upwards

  2. Inferior rectus: makes the eyeball move downwards

  3. Lateral rectus: makes the eyeball move to the left

  4. Medial rectus: makes the eyeball move to the right

  5. Superior oblique: makes the eyeball move obliquely upwards

  6. Inferior oblique: makes the eyeball move obliquely downwards

  • Central Fovea and Visual Boundaries

The central fovea and visual boundaries come from the distribution and function of cone cells and rod cells in the retina. There are more rod cells than cone cells, but the reason why the eyeball cannot distinguish objects in darker places is the distribution of these two types of cells.

Cone cells are distributed more in the macula of the retina towards the periphery, and their main function is color discrimination, so their function is better in bright light environments.

Rod cells are distributed around the center of the retina and are more sensitive to light, so they mainly function in night vision.

In summary, the central fovea is where we see information.

  • Visual Boundaries

Before discussing visual boundaries, we must first mention the 'blind spot.' The blind spot is located near the central fovea of the eyeball, and is a gap where nothing can be seen. It is located at the exit of the retinal nerves and blood vessels behind the eyeball. Because there are no rod cells or cone cells in the blind spot, we cannot see objects that fall into this area. However, when the visual distance and focus begin to change, the object will be visible again, so the blind spot is not a fixed distance.

The main function of visual boundaries is to guide the central fovea, perceive dynamic objects, and see clearly in the dark. (The marquee theme only discusses guiding the central fovea and perceiving dynamic objects)

Guiding the Central Fovea

Close your eyes and recall, walking on the street with concentration, suddenly needing to check if you have reached the destination street, suddenly seeing a blurry object that looks like the street sign from your memory, where will the eyes move unconsciously? Visual boundaries can provide clues with low resolution to guide eye movement.

Perceiving Dynamic Objects

At this moment, a cat suddenly runs past, and the eyes will unconsciously look towards the direction of the cat. This ability originates from the process of evolution, as primitive humans relied on hunting for survival, evolving the ability to perceive dynamic objects.

So, what is the relationship between the blind spot, visual boundaries, and the marquee?

When we focus on looking at an object, the eyes cannot pay attention to other objects around, and the marquee happens to allow the visual boundaries to guide the eyes to see the information.

認知學:資訊獲取

Cognition is the mental function of processing information through thinking. The cognitive process can be natural or artificial, conscious or unconscious; it uses existing knowledge and generates new knowledge. In psychology, cognition refers to the process of acquiring knowledge through mental activities such as forming concepts, perception, judgment, or imagination, that is, the mental function of individual thinking and information processing.

— Retrieved from Wikipedia

Designing a marquee requires attention to cognitive load concerns. A marquee can strengthen cognition, capture attention, but may also cause eye fatigue and increased readability difficulty. The characteristic of transmitting messages with a marquee is that it can convey multiple longer text messages at once, and is less affected by the size of the carrier. However, attention should be paid to the reading speed during design. Reading too quickly can create reading difficulty, while reading too slowly may lead to impatience. Therefore, the optimal speed should vary with the length of the transmitted text and be tested.
Emotion: Emotions generated during the process of obtaining information by readers
The dynamic nature of the marquee easily triggers several emotions in readers:
  • Urgency
  • Impatience
  • Numbness
A marquee used for announcements can let recipients know about urgent messages. However, when the marquee is too fast or frequent, it can easily create impatience and lead to avoidance, or directly ignore the message.
Redefining the Marquee: Web Applications
In the past, the marquee was commonly seen on TV news or used in mobile games to inform about the latest news. In recent years, the marquee has returned to the embrace of designers, giving it new definitions and applications. Because of its dynamic nature, it can guide eye fixation. In addition to announcement messages, it has also begun to be used for brand vision advocacy, such as advocating attention to Covid-19, special promotions, etc., and has begun to unfold new uses.
Typography website:
Users can preview fonts on the Landing page without entering the secondary page to preview the fonts. (https://extraset.ch/page-typefaces/)
E-commercial Website :
Used for product names and in conjunction with product features (https://futuremood.com/)
Event Campaign:
Promote the activities to create more memorable points for the users (oiw.no)
Branding Website:
Strengthen brand image and other information (https://www.andrewleguay.com/)

Contact

copyright @Roey

Contact

copyright @Roey