Designs for portable screens

-making news delivery more accurate with portable device design

Ziqi Zhou

Abstract
News is through the media, the reporter's language and text description, making news and
information from all over the world be passed to the listeners. At present, more and more
people obtain news through portable devices such as mobile phones, computers, and tablets.
However, the unreasonable typographic design will reduce the readability of news and cause
information misleading and other problems, resulting in social injustice. Through good
webpage navigation and guidance, readers can quickly obtain information of interest,
improve reading efficiency, and establish an information network. In order to solve the above
problems, by analyzing the existing news webpage cases, analyzing the advantages and
disadvantages and readability of the webpage, find a way to improve the readability of the
news.

Keywords
News, readability, page design, portable devices, computers, tablets, mobile phones

1. Introduction
1.1 News and the role of news
According to Cheng Dong's new book, Second Generation Journalism, the definition of
journalism is divided into two layers:
a. The meaning of ontology: News is important information that lies first in the change of
objective things in the subject.
b. Epistemological meaning: News is important information that the subject perceives, or
disseminates, and receives for the audience the change of objective things.

Epistemological news includes:

a. Perceived news: important information about the change of objective things entering the
subject.
b. Media news: important information that enters the media system with symbols to spread
and changes in objective things received by the audience.

In summary, the news is transmitted to listeners through the media, through the language
expressions and text descriptions of journalists.

1.2 What does news do?

1.2.1 The essence of news is to deliver information
1.2.2 News expands the influence and interests of a beneficiary by promoting the claims of
one party
1.2.3 Political purposes to guide public opinion and thinking

1.3 How current device design/page design affects news dissemination

1.3.1 Misleading information
At present, more and more members of the public are accessing news through portable
devices such as mobile phones, computers, and tablets.

News in these devices tends to focus on news headlines and cover images to attract readers.
If people don't read all the articles they encounter when they read the news, and they
understand some articles only through title information and citation, it is easy for them being
misled and lead to bias if the title expresses only a part of the content of the article, such as
mentioning the cause of a matter or favoring the news content in the interests of a particular
group.

Therefore, the incompleteness of news headlines and citations is the main reason for
misleading readers, affecting the accuracy of news transmission, and ultimately leading to
conflicts and discrimination among people of different races and nationalities.

1.3.2 Readability reduced

Unreasonable screen interface design will also make it difficult for readers to understand the
content of the article. Due to the reading interface experience is too poor to read other
information source articles, resulting in the loss of reader quantities.

1.4 Why news needs to be delivered correctly

Through good web navigation and guidance, readers can quickly obtain the information of
interest, improve reading efficiency, establish an information network.

People need a more rational digital reading design to avoid the misleading nature of news,
so as to avoid being used as a doll in a social lying or political environment. In addition, the
increasingly closely linked international environment requires more people to know the truth,
rather than directing social problems to a particular group, organization, or region through
sensational headlines.

2. Typographical features and types of News in the available device

According to the common type of portable device for reading news, the content and form of
news materials are classified to discuss the design direction of news readability.

2.1 Category by the reading device

Usually, people can read the news on laptops, tablets, and mobile phones. In these devices,
you can also access news by browsing the web, reading news in specific apps, social media,
and magazine readers.

When reading news on the website, the experience of reading lateral devices on laptops and
tablets is similar. When reading on the mobile phone, people are usually used to a vertical
handheld mobile phone, and the size of the mobile phone screen is quite different from that
of tablets, computers, and other devices. Thus the reading experience and the design required
are very different, that is because each page on screen can carry less space, accessible reading
content is also reduced, readers often need to read longer portrait content.

Reading news in specific apps is more common on tablets and phones, and interface design
varies depending on the app.

2.2 Category by reading content

News can be divided into plain text, graphic (including text and pictures), and streaming
media (including title, audio, or video) (Ashuo, 2018).

3. Why design is needed

3.1 Readers' Reading Needs
3.1.1 Increasing time spent on devices
According to a survey conducted by the Pew Research Center in 2018, the percentage of
people using news websites, and social media, to get news increased significantly compared
to the percentage in 2016. For people who are 18-29-year-olds, they are more likely to learn
about news from news websites and social media. The group of 30-49-year-olds tends to
use news websites and television to learn the news. Most people who are older than 50
learn news on television.

20% 18% 16%

18% 20% 20%
25% 25% 26%

28% 33% 33%

57%
50% 49%

2016 2017 2018

television news website radio

social media print newspaper

Changes in the proportion of sources people learn the news from

(Elisa Shearer, December 10, 2018)
 90
80
70
60
50
40
30
20
10
0
19-29 30-49 50-64 65+

TV news website radio social media print newspapers

Comparison of news acquisition methods for different age groups

(Elisa Shearer, December 10, 2018)

3.1.2 Reading on devices is prone to dyslexia

When reading newspapers and paper books, the information in the article is passed through
not only through text but also through tactile experience, sound, the size of the book, the
thickness of the paper, the location of the content in the book, etc. , these factors in the
human brain automatically form text navigation, and in the brain to form a coherent
understanding of the map (Ferris, 2013).

When reading on an electronic screen, the information scrolls up and down on the same
screen, and when the person's vision focuses on the text content, there is no other auxiliary
information reference. After a long period of reading, the screen distracts people, and the
efficiency of reading comprehension decreases.

3.1.3 Aesthetic needs

News website users tend to prefer more conventional designs, i.e. orderly, clear display of
reading in limited screen space. Exaggerated forms and colors can make the reader's mental
state uncomfortable (Jakob, 2011).

3.2 User experience requirements-navigation design

3.2.1 Navigation of the home page of the website
The navigation on the first page of the website is designed to guide users, give them a quick
understanding of the website's functionality, and provide convenient positioning to access
the information page.

3.2.2 Navigation of news pages

The navigation of news text pages can be used as an index for locating the content of an
article, usually determined by the article's hierarchical title. Through the reference page
navigation, the reader can quickly establish the logic and structure of the article, more
convenient to understand the content and views of the article.
4. How to improve the readability of news reading on a portable device
By illustrating the layout of news pages on portable devices, analyzing the reading experience
in different devices, finding the reasons for affecting the readability of news, and finding the
key points to improve the website to improve the readability.

4.1 News website page design on computers and tablets

4.1.1 Home page form
The home page of the news refers to the promotion of daily highlights, recommended news,
and other news on the front page of the website. The main purpose of this page content is
to attract readers' attention and stay to increase the amount of news content read.

The form can be divided into the following: the first includes the title and citation or summary
of the content; the second includes the title, photos, citation or content summary; and the
third includes the title, video or audio

The picture below shows the home page layout comparison of the Guardian and the Age

Screenshot from the Guardian and the Age, edited by the author

Comparing the typographical characteristics of the two, it can be clearly found that the layout
of the news with a photo nearby is more attractive to attract reading interest. And readers
may be more likely to ignore stories that just have headlines, and the Guardian, in order to
address this problem, emphasizes news categories and keywords in bold red font in front of
news headlines. The right-hand side of the Age recommends reading slots according to the
time of release, which emphasizes the timeliness of news.

In addition, comparing the layout of the two pages, the Guardian emphasizes one message.
The Age is almost equally divided into four columns, and the gap between each column is
very small, which makes the reader not intuitively aware of which part to focus on, as the four
columns do not have a very prominent part. This is similar to reading the contents of a
magazine in three columns on the screen. This can lead to confusion in the reader's reading
order and damage the readability.
4.1.2 News content page design-screen available space and functions
When reading web news, readers need to clearly see the reading content, and find the site
accessibility features. Therefore, it is very important to understand the screen partition of the
news page.

a. Available space for computer and tablet screens in normal conditions

When the browser adapts to the screen width, the screen can be divided into the title area,
body area, bottom bar, the left bar, and right column. According to the design features of
different news websites, the above contents are slightly adjusted.

b. When reading news on computer and narrowing the width of the browser
When according to the user's needs, the browser width is narrowed, the article layout needs
to be adjusted to adapt to the screen space, at this time, the browser's reading space can be
divided into, the title area, the body area, the bottom bar area.

4.2 Design in the News App on the mobile phone - screen space and functionality
The reading area in the mobile news app can be divided into the title, text, and the left area
of the sidebar. One of the main ways to get news on mobile phones is social media, such as
Twitter and Facebook. People enter the news page of the website through links in social
media. The page layout and function of the news reading page on the website are divided
into three parts, the title information, the content, and the bottom bar.

4.3 Navigation design

Navigation is an important tool for e-book reading, providing readers with the ability to
quickly locate a reading location. Reading navigator can also be applied to web articles,
especially when readers read long articles, navigation assistance can let the reader have a
clearer understanding of the structure of the article.

4.4 Take the Australia edition of The Guardian, for example, to analyze the characteristics
and ways of promoting web news
4.4.1 Comparison of reading results at three browser widths
a. In the state where the browser matches the width of the computer, that is, the browser
width is the same as the width of the screen, the left side of the screen is column information,
and provides web page functionality that interacts with social media. The middle section is
the title plus content, and on the right is the advertizement and the recommended news. This
news page provides a collection of news, including 6 short stories. Each short news takes up
one screen page, including a photo and half the caption slot.

In this state, the page is more blank, wasting a lot of basic space. For example, in the column
space on the left, there is almost no other information in the process of looking down at the
screen. The sidebar on the right, on the contrary, occupies too much space, advertising is also
based on the reader's habit of browsing the web advertising recommendations, rather than
the page itself recommended products. Too narrow content space prevents the reader from
focusing on the content of the article and will be distracted by invalid advertising information
on the right.

Screenshot from the Guardian, edited by the author

b. When adjusting the browser width to the left sidebar disappears, the page layout is much
more compact than in the first case. The function on the right is still advertising and
recommended reading. The content on the left is merged with the title and body. Because
the content part of the area of the total visual range of the proportion is large, sidebar
distraction of the reader's role is also weakened. Readability is better than the first layout.

Screenshot from the Guardian, edited by the author

c. When adjusting the browser width to a minimum, the page range is left with only the title
and body parts. The recommended reading section is moved to the bottom of the page, the
ad map is scaled-down and arranged in the body range. The typography effect is almost
identical to the page read on the mobile phone. The difference is that the phone layout text
is more concentrated, the page width is narrower, and when reading in the bottom bar section
there is always an ad pop-up window.
 Screenshot from the Guardian, edited by the author

d. Web layout promotion recommendations

In the first case, adjust the page density, reduce the width of the left and right columns, let
the content area accounts for more than 60% of the entire space page. This reduces the
interference of unwanted information when the reader reads the content. In addition,
navigation can be added in the left column so that readers can have a faster and clearer
understanding of the content of the article based on the navigation, and can be located to
the part of the article they are interested in at any time.

In the second case, the distance between the content part and the right sidebar can be
appropriately increased, and the width of the right sidebar can be reduced appropriately so
that the visual effect of the adjustment layout looks cleaner and more refreshing.

In the second and third cases, the navigation can be laid out at the top left of the page, in the
form of floating windows.

5. Conclusion
With the increasing of readers who read the news on portable devices, the readability
requirements for news websites also increase. In order to give readers a better visual effect
and a more intuitive understanding of news content and structure, it is necessary to
reasonably layout the proportional relationship of the page area and increases the application
of the navigator appropriately. In addition, on the front page of the news website, readers
should be used to get their readers' attention through typography, rather than using
exaggerated, guided, and biased titles to attract readers.

Besides, on the homepage of the news website, it is necessary to increase the reader's
attention through better typography, rather than using exaggerated, guiding, radical
headlines to attract readers.
References

1. Gemma Walsh (2016) Screen and Paper Reading Research – A Literature Review,
Australian Academic & Research Libraries, 47:3, 160-173, DOI:
10.1080/00048623.2016.1227661

2. Ferris Jabr on April 11, 2013, The Reading Brain in the Digital Age: The Science of Paper
versus Screens, viewed 6 May 2020,
<https://www.scientificamerican.com/article/reading-paper-screens/>

3. stoop, & kreutzer, & Kircz, Joost. (2013). Reading and learning from screens versus print:
a study in changing habits. New Library World. 114. 371-383. 10.1108/NLW-04-2013-
0034.

4. Salmerón, Ladislao & Strømsø, Helge & Kammerer, Yvonne & Stadtler, Marc & van den
Broek, Paul. (2018). Comprehension processes in digital reading. 10.1075/swll.17.04sal.
Comprehension processes in digital reading

5. Kate Moran on December 11, 2016, Reading Content on Mobile Devices, viewed 6 May
2020, <https://www.nngroup.com/articles/mobile-content/>

6. Jakob Nielsen on May 8, 2011, Utilize Available Screen Space, viewed 6 May 2020,
<https://www.nngroup.com/articles/utilize-available-screen-space/>

7. Nielsen Norman Group, n.d. Web Page UX Design, viewed 6 May 2020,
<https://www.nngroup.com/courses/web-page-design/?lm=utilize-available-screen-
space&pt=article>

8. Raluca Budiu on July 16, 2017, Mobile Subnavigation, viewed 6 May 2020,
<https://www.nngroup.com/articles/mobile-subnavigation/>

9. Nielsen Norman Group, n.d. Tablet Website and Application UX, viewed 6 May 2020,
<https://www.nngroup.com/reports/tablets/>

10. Myllylahti, Merja & Treadwell, Greg. (2020). Trust in News in NZ report.
10.13140/RG.2.2.28156.69766.

11. Amy Mitchell, December 3, 2018, Americans Still Prefer Watching to Reading the News
– and Mostly Still Through Television, viewed 6 May 2020,
<https://www.journalism.org/2018/12/03/americans-still-prefer-watching-to-reading-
the-news-and-mostly-still-through-television/>
12. Elisa Shearer, December 10, 2018, Social media outpaces print newspapers in the U.S. as
a news source, viewed 6 May 2020, <https://www.pewresearch.org/fact-
tank/2018/12/10/social-media-outpaces-print-newspapers-in-the-u-s-as-a-news-
source/>

13. Pew Research Center, June 25, 2019, Network News Fact Sheet, viewed 6 May 2020,
<https://www.journalism.org/fact-sheet/network-news/>

14. Pew Research Center, July 23, 2019, Digital News Fact Sheet, viewed 6 May 2020,
<https://www.journalism.org/fact-sheet/digital-news/>