Awebsite based on Infographic for Developing Students’ Reading Comprehension of Economic Issues

In the context of audio-visual redundancy theory, the current study examined the impact of news website design based on infographic that supports economic news for developing reading comprehension levels of Egyptian financial policy issue. The participants were 40 male/female students at Faculty of Specific Education, Mansoura University. Data was collected using reading comprehension test and System Usability Scale (SUS). The results revealed that static infographic was related with literal comprehension level, dynamic was related with creative comprehension level, and the interactive was related with deductive level, while the news without infographic was related with critical comprehension. Validity and reliability were verified before administrating the pre-post reading comprehension test. Moreover, there were statistically significant differences between the mean score of students in the experimental group on the pre-post reading comprehension tests in favor of the posttest. The value of (t) was 144.111; the overall system usability scale score obtained from the evaluators was 91%, indicating a high level of usability and system acceptance. Keywords— News Website Design, Infographic, Data Journalism and Economic Issues, Reading Comprehension, SUS


INTRODUCTION
Data journalism refers to computer-assisted reporting and is called data-driven journalism that emerged in various forms including statistical analysis, computer science, visual presentation, and web design. It is associated with some elements: (1) Technology (2) The new media that attract public attention towards news by offering compelling visuals (3) The openness of information sources.
In the context of data journalism, Journalists need to have an effective typographic structure in online newspaper layout; they found their stories among many and added the new dimensions to them to be the main tool for explaining the context of them. Simon Rogers defined it as journalism based on numbers and statistics to tell news stories through a collection of techniques that help journalists to present it in a best possible way and provide a large amount of data available and display in attractive designs for readers. ]1[ These elements explain the context in which data journalism can be nurtured, deepened and verified the information in terms of professional values. Thus, it is necessary to know infographic and how it is employed by practitioners and professionals with the appearance of infographic and its integration with typographic and technological elements. ] 2 [ It has become a key element in newspaper and website design ,and a new way of communication that helps readers quickly understand news stories and information processing easily by the varied icons and means of symbolization which making them more adaptable to new contexts by Modern technology and Internet. Bojko (2009) explained that infographic is a great value in journalistic texts that mixed to visual techniques in the construction of infographic to express information using a clearer and more objective language. This leads to reducing the amount of cognitive load, which includes data comprehension comparing with text supported with graphics by summarizing, clarifying information, and emphasizing the main results.]3[ Furthermore, some studies consider Infographic as the basis of data-journalism development, and not a traditional form of iconography, but rather a kind of news story as a preferred style compared with traditional forms of information presentation. Moreover, the development of a new strategy for reading and narration in a nonlinear way enables users to choose what he or she wants to read, that is because infographic language is based on verbal and visual symbols, which integrates with linear and nonlinear structure. It can combine print, audio and visual as well as adding new ways for communicating through the Internet.] 4 22[ indicated that individuals with high computational efficiency recall dynamic or interactive infographic than those with lower cognitive process (perception, recall and improving their reading, systematic processing , and spatial thinking) in less time compared to static type in the context of individual differences, media culture.
On the level of analysis studies, the study of ]23[showed that data and expression charts, maps, tables, and successive drawings are the most important elements of infographic in newspapers design. The study ]24[mentioned that the majority of linear charts is the best way compared with stock market variables in Shanghai, New York, Japan and Europe, while bar charts were the best forms of infographic that convey one or two related concepts in financial sector.
The researcher found many field studies applied to journalists and readers such as study of ]25[confirmed the importance of info graphic designs for improving people's thinking ways of graphic, informational, and storytelling concepts and as a new way that can help newspaper to convey complex ideas in a clear way.
On the other hand, ] 26[ ]27 ] [ 28[studies revealed that there is positive relationship between interactive graphics and exploring information and transition. It also increases news representation, participants' knowledge about topics. There were differences between groups who were exposed to news stories based on traditional narrative style and those who were exposed to infographics that support their understanding and recall of news content.
While few studies such as ] 29[ ] 30[ ]31[assured that the positive effect of interactive graphics is more than static in reducing misperception of voters' political perceptions, correcting their political misconception about US unemployment rates since Obama, and increasing samples' understanding. This is due to the importance of infograph to estimate the differences between individuals in addition to (3D) graphics are more comprehensible than circular and linear.
In general, the literature review shows that infographic is a vital aspect of presenting information in newspapers and websites, so the most studies related to journalistic uses of Infographic were foreign, but Arabic studies focused on using it in educational process, and few of them focus on newspaper design. Thus, there is a need for examining infographic type's effects on readers through different Arabic media environments such as newspapers and websites.

What are infographics?
Generally, infographic as a word consists of the words (info) and (graphic), it is shortened from expression of "information graphic".
It means visual presentations of information, data, and knowledge by using information, numbers, points, law and knowledge that can be presented with visual method as (charts, symbols, images, and maps). It is a comprehensive concept which describes an iconic -verbal text, words, numbers composed by verbal elements associated to graphical information (images, maps, graphics, symbols, etc..) that meet users' needs of information . ]32 [ Albers (2015) ]33[ defined it as an image on the Internet that carries a large amount of information in text or digital format and placed in a set of images in order to make information more understandable to the public. Eissa (2014) and Simicklas (2012) mentioned that the main characteristics of infographic are improving the communication with users, simplifying complicated data in which information is distributed in small and fragmented text blocks with many reading entry, transferring information from traditional form into interesting figures, and appreciating visibility using titles. It is also visual explanation which helps in understanding information in smoothly way and it does not require further explanation and clarification). ]32[

B.
Infographic and Audio-video redundancy theory Audio-video redundancy refers to the extent which the audio and video channels contain the same thing or different information but it is not duplicative. The concept applied to messages that contain both audio and visual information in which visual information usually runs from still pictures or text to moving pictures, and scrolling text, and audio information is spoken language information rather than natural sounds or music. ]34[ Many researchers divided audio video redundancy into three approaches for these reasons: (1) the presence of two channels rather than one channel focusing on presenting stimuli related to two channels. (2) an exact match in the contents of the audio and video channels using different representational forms. (3) The relationship in semantic meaning between audio and video channels. This approach suggested that the messages whose two channels carry exactly the same information become most redundant messages. It requires sometimes more capacity to support great understanding for viewers. There is indirect relation ship between audio-visual redundancy and the capacity requirements of message; because audio-visual redundancy is further complicated by the different operational definitions used to test the effects of redundancy. ]

35[
The theory is based on the hypothesis "the more synonyms between the two audio and visual channels is, the greater understanding of story is" ]36[. It has been found that there are two levels of redundancy which news stories can be presented through ideal combination combining sound and visual elements effectively such as infographic. It improves journalistic writing and develops websites design as basic means of telling news stories to be readable. ]37[

C.
Types

Static Infographic:
This type is usually used for reports and social media distribution. It combines text and images by presenting challenging concepts in the form of graphics, charts, maps, and other visual elements. Since these infographics include still images that don't require user input.

2.Dynamic Infographic:
It includes the same content as static type in which users not only view and read but also listen voice or music including animated display outputs. It is called semi interactive as information is presented in a linear sequence as animations or videos.
3.Interactive Infographic: It presents the same information as above mentioned types but within multimedia sources based on user's interaction that are searching for specific data, actively shaping the content displayed, and choosing easy information. It also can be narrative and explorative. Finally, this type usually is shown in web-based on user's choice.
Design of these types might be formed using 2D, and 3D that makes visual as harmony and innovative production and can shape amental vision for design by viewers.

structure anatomy of Infographic:
Roy (2009) describes the anatomy of infographic through three components as follows: • Visual: it has a strong relation with the design, Meanwhile, infographic design also has the priorities mix about the appeal, comprehension, and retention based on the purposes and the objectives of infographic. • Content: It can be divided into three parts:( introduction, main event, and conclusion).

Generation of infographic:
There were four generations of infographic: ]32[ 1) The first was organized in a linear form.
2) The second started to utilize hyperlinks and animations.
3) The third coincides with the emergence of first multimedia resources. 4) The fourth is identified by using databases and interactivity tools provided by Web 2.0 that transforms infographic as a tool can be utilized in multiple contexts, and allows information to be very well expressed and understood by the reader. This is illustrated in the following figure:

F.
Infographic as visual form of news and reading comprehension: (Snow,2002) defined reading comprehension as the process which reader can draw and construct the object through its interaction with the written page, and therefore includes three components ]44[: (reader -readable textcontext).
It also defined by] 45[as "the process of interaction between the author's ideas and the cognitive background of readers which results in the creation of meaning", this concept divided into many levels as follows: • Literal Comprehension: refers to the ability of reader to understand what the writer put in the subject. • Deductive Comprehension: this level indicates the reader's ability to dive in the depths of the text; to extract meanings that were not explicitly stated by the author to define the meanings deeply. • Critical Comprehension: it means the ability of reader to analyze contents in a number of terms according to methods of the writer. • Creative Comprehension: It is done after understanding the meaning of the phenomenon, the reader begins to change some of his impressions, or behaviors, or directions according to gained information from the new topic. It is a process of smelting this information with its previous knowledge. ] 46[ ]47[ The visual perception of data in infographic is based on good, clear, accurate and meaningful information. On the other hand, it depends on shapes and colors that appear in the visual image, which makes news stories take a better form, taking into consideration what kind of data you have? Who is the targeted audience? What is the message should be delivered to the reader? What should be focused on?. The design of data based on infographic depends on the main elements such as colors, shapes, sizes and lines that are no less important than the data itself. This is due to its ability in showing and clarifying the vital message to readers and supporting their comprehension skills.

IV. PROBLEM DEFINITION
It is clear that data visualization is a process of translating, analyzing, interpreting, and linking information with each other through visual elements such as infographic ]48[. It is a part of visual communication possibilities and a mean of building information to increase readers' cognitive abilities and their understanding ]49[. Therefore, the researchers focused on the effects of infographic to communicate with user and provide him with information easily.
It is necessary to know how individuals can read, preserve and understand information in a simple way by converting words into visual language depending on web design. ]33[ The aim of this study is investigating the infographic types as a separate component in the context of proposed news website design for developing university students' reading comprehension levels of Egyptian financial policy issues representing in (pound Float -currency prices and deliberation-inflation-goods and services prices, etc.), and evaluating system usability through (SUS) questionnaire by communication and computer experts. This section of the paper describes the details of the proposed website design and the procedures including components, architecture, development and evaluation process, in the following sub-sections:

A. System Components
It is known that software includes both programs and data and it is defined as the intangible components that manage the resources by directing the target works to the electronic devices. In current study, in order to handle the tag information and control the readers, a Web-based application has been built using HTML, CSS, and word press. In view of employing different types of infographic in news websites design such as static or dynamic or interactive, this supports the presentation of the news more attractive and simplified, develops the user's reading level and their interaction. Thus, the focus of this study is testing the design of a website by employing the three types of infographic and and testing its impact on the levels of reading comprehension (literal-deductive -critical-creative) among sample. The researcher presents various designs of economic information according to infographic and without it. The researcher depends on word press, Html, and CSS language; and using web0.2 websites programs such as:(piktochat-Canva-Photoshop) which produce attractive design to build website and construct simple infographic types related to research issue.

B. Ssystem Architecture
The proposed system has been designed as user-server model. At first, admin and students are logging into proposed website. If the response is negative, the admin redirected to log in website in tab. So the admin is responsible for logging into website to manage its processes while, students are logging into website to browse its components according to experimental variables. Finally, both of them logging out of websites. A general block diagram for users side for proposed website architecture is shown in Fig.2. On the other hand, the server fetches and retrieves the needed data like economic news about Egyptian financial policy from database. The web portal in turn fetches the server database and retrieves the require data. Finally, server responds to user as requested from web browser. A general diagram for server side architecture is shown in Fig.3. The evaluation process has two dimensions: technical evaluation and actual evaluation of the system that will be reviewed in details as follows:

A)TECHNICAL EVALUATION
The proposed website has been evaluated using usability scale which mainly aims to measure the degree or extent to which system achieves its pre-set intended objectives.
The evaluation process of website has focused on the following aspects: • Accuracy: Does the proposed website able to present credible information to users in correct way?
• Efficiency: What is the required time that the website consume to complete all the required tasks?
• Simplicity: Is communicating with website users easy? In fact, the original SUS questionnaire has been adopted due to its reliability, simplicity, speed, cheap price and ease of use to the participants of this evaluation.
The statements of the original SUS items has been slightly modified to match the current study. The questionnaire used in this study consists of 10 questions exploring the functions of the system and has been presented to the evaluators.
In using SUS questionnaire, the participant selects a point from five points where point (1) refers to strongly Disagree, (2) Disagree, (3) neither Agree nor Disagree, (4) Agree (5) strongly Agree. All questionnaires were completed and calculated by statistical analysis. To calculate the total SUS score of each questionnaire filled by the participants, we depended on the presented rule [51] which includes the following steps: • For questions including 1, 3, 5, 7, and 9, we have subtracted (1) form user's response scale value.
• We have multiplied the sum of user's scores by (2.5) to obtain the SUS score in range 0 to 100. Infographic is used for data designing in newspapers as the equivalent element of writing style. It is based on information flow in a way that distinguishes it from traditional methods used to present it in a faster and clearer way, change readers' way of understanding of news. ]50[ ]1[ Finally, the obtained SUS scores from surrogate users involved in the system evaluation process is summarized below in the table as follow: The previous results indicated that four evaluators estimated the system overall performance greater than or equal to 95%, three evaluators estimated the system overall performance greater than or equal to 90%, two evaluators estimated the system overall performance greater than or equal to 80% , and one evaluator estimated the system overall performance greater than or equal to 70%. These results showed that the mean SUS score of all surrogate users in the experiment was 89.5% According to the study of [52] and [53], the obtained SUS score was more than the average of usability and it is excellent usability. whereas according to the SUS scores classification in [54], it is estimated as best imaginable usability.
From these superior results, we concluded that the proposed website is an effective tool that can be applied on a wider range in different Egyptian universities and other users who use infographic and web design to present various issued in easily ways and successful communication with users.

B)REAL EVALUATION
This section of the paper describes the way of applying experiment on students and its effect on their reading comprehension dimensions of economic issues, also the researcher focused on research methodology in the following sub-sections, we will review this part in more detail:

Study hypotheses:
H1: there were statistically significant differences between the mean score of students in the experimental group on the pre-post reading comprehension tests in favor of the posttest of economic issues according to infographic types. H2: There are statistically significant differences of the mean scores of experimental group according to the gender in the reading comprehension test of economic issues in the pre test. H3: There is correlation relationship between infographic types and students' reading comprehension dimensions of economic issues.

Type of the study:
This study is quasi-experimental studies that gives its interest to reach a scientific analysis and empirical evidence that contribute to the high degree of accuracy especially in the formulation of the output. The study aimed to identify the effect of designing proposed News websites based on infographic on students' reading comprehension levels of economic issues and calculate the differences between them according to employment of infographic type with various news.

Research sample:
The sample of study consisted to male and female students at the first grade at Faculty of Specific Education students, Mansoura University. (40) Respondents divided into (20 male, 20 female) with a low level of knowledge on the specific economic issues.

procedures and Measurement:
The researcher applied the knowledge scale of economic issues on (60) students before starting the experiment, twenty students with high knowledge level were excluded, then the (40) sample of students with low knowledge was accurately selected who obtained (3-9) marks of 20 mark. Comparisons can be made between them and adjust the variables that achieve the richness of results.
The researcher designed a news website based on different types of infographic that employment in economic news related to sub issues of Egyptian financial policy topic. In addition to online reading comprehension test through four dimensions (literal -deductive -critical -creative) is applied on the sample that answer the questions to compare their mean scores and assure the effectiveness of proposed websites through infographic types. The test includes 74 multiple-choice questions including four answers from the total score of the sample. The time of the test is 90 minutes to complete test items. The test is based on the review of relevant literature and an initial set of items was from the previous studies and were valid and reliable. Modifications were made with these items for attaining the desired objective in the study. The researcher also calculated the internal consistency of test items among sample to be applicable as following: Table showed that the correlation coefficient was statistically significant at level of 0.01 between the mean scores of sub-items and score of test, this means its applicability and use.
The Alpha-Cronbach's analysis was performed to analyze the reliability of the test and its values ranged from (0.8102) and (0.8365) which indicated the internal consistency of test dimension, but the results of statistical analysis indicated that the test had satisfactory reliability, facility, and high degree of stability in the following table: Through applying experiment and examining hypotheses the researcher found results as follow: To investigate the validity of the first hypothesis, the researcher calculated t values between mean scores of students' reading comprehension test of economic issues in pre and posttest application as follows: It is clear from the previous table that there are statistically significant differences between the mean scores of the sample in reading comprehension test of economic issues as a total score and as sub-dimensions that include (static infographic without news -news and static infographic -dynamic infographic -interactive news and infographic -news and dynamic infographic-interactive infographic-news without infographic). Where the values of (t) were significant in the level of 0.001, so the hypotheses are achieved. The diversity of elements in infographic such as lines, colors, drawings and graphics make reading easier and more understandable, especially when there is a correlation between information that encoded in the audio and visual channels together and the extent of their connection to the texts. The reading comprehension scores were weak in pre-test, but all the differences between the mean scores for the literal comprehension refer to that infographic facilitates information, and access to the abstracts of information related with economic issues.
To verify the validity of second hypothesis, the means scores of the students (males-females) in the experimental group were compared in the pre reading comprehension test of the economic issues by using the t. test as follows: From the previous table, there are statistically significant differences between the mean scores of males and females in pre literal reading comprehension level of economic issues in favor of males, where the values of (T) were significant at level of 0.05. There are no statistically significant differences between the mean scores of males and females in sub-dimensions of reading comprehension test and total score in pre tes.
The researcher used Pearson correlation to investigate the validity of the third hypothesis, and identify the relationship between infographic types and reading comprehension dimension of economic issues in next table: -There was a positive relationship of statistical significance between static infographic without news and literal and deductive comprehension levels of economic issues ، where it was (0.3 <p<0.7) which is significant at level 0.01. -There was a positive relationship of statistical significance between news and static infographic and critical comprehension levels of economic issues ، where it was (0.3 <p<0.7) which is significant at level 0.01. -There was a positive relationship of statistical significance between dynamic infographic and literal, critical and creative comprehension levels of economic issues, where it was (0.3 <p<0.7) which is significant at level 0.01. -There was a positive relationship of statistical significance between interactive infographic with news and literal and creative comprehension levels of economic issues, where it was (0.3 <p<0.7) which is significant at level 0.01. -There was a positive relationship of statistical significance between dynamic infographic with news and deductive, critical and creative comprehension of the economic issues, where the value of (t) was not significant at level of 0.05. -There was a positive relationship of statistical significance between interactive infographic and literal, deductive and critical comprehension levels of economic issues ، where it was (0.3 <p<0.7) which is significant at level 0.01. -There was a positive relationship of statistical significance between news without infographic and deductive and critical comprehension levels of economic issues ، where it was (0.3 <p<0.7) which is significant at level 0.01. -On the contrary ، there was no relationship between other types of infographic and sub-levels of reading comprehension

International Journal of Engineering Research & Technology (IJERT)
ISSN: 2278-0181 http://www.ijert.org of economic issues ، where the values of Pearson correlation was not statistically significant at the level of 0,05 ، So that the hypothesis was partially fulfilled.
Finally, the researcher calculated ETA Square (ή 2 ); to know the effect size of designing news websites design based on infographic on reading comprehension of economic issues, and identify the differences or the correlation size regardless of results confidence degree as follow: VII. CONLUSION It is clear that researcher add infographic elements such as (charts, lines, colors, graphics, voice, videos and interactive media) as a distinctive feature of web design. It becomes a key element in presenting journalistic information that supports the link with readers and the familiarity of details. It also contributes to increasing the representation by audio and video channels accompanied with information that increased reading comprehension levels confirming the result of current study.
The presentation form of infographic as visual appeals based on numbers, mechanisms and statistics, must be transmitted to the readers with visual desires in a short amount of time. In the field of economics, to simplify the complex information, the current study found that dynamic and interactive infographic types is able to stimulate the processing of information affecting on understanding issues compared to static presentation in the content of news stories. Infographic types are selected based on the nature of information that improve the communication with users by combining visual elements with news text to increase their reading comprehension levels of economic issues, capture complex ideas, knowledge in easily visual format, deliver maximum information in minimum amount of time .
The results show that students viewed news stories based on infographic types and news without it that varied in redundancy between the two channels. The more synonyms between audio and visual channels were related with higher reading comprehension scores in the high-redundancy condition. This research contributes to increasing number of studies that investigate semantic of infographic effects on different academic levels and different issues. Future studies could include experiments that examine infographic effects on different variables, such as higher-order thinking skills, engagement, systematic thinking, meta-cognitive process, and self-confidence. The Students' perceptions of infographic could also be investigated through interviews and questionnaires. REFERENCE