Content uploaded by Junko Ichino
Author content
All content in this area was uploaded by Junko Ichino on May 16, 2018
Content may be subject to copyright.
Ichino, J., Takeuchi, K., and Isahara, H.
Paper:
Psychological Effects of Color in Overview+Detail
Document Interface
Junko Ichino∗, Kazuhiro Takeuchi∗∗ , and Hitoshi Isahara∗∗∗
∗The University of Electro-Communications
1-5-1 Chofugaoka, Chofu, Tokyo 182-8585, Japan
E-mail: ichino@is.uec.ac.jp
∗∗Osaka Electro-Communication University
∗∗∗Toyohashi University of Technology
[Received April 9, 2010; accepted June 24, 2010]
Online documents have two major advantages over
paper documents: hypertext links and the larger vol-
ume of data space made possible by online references.
However, electronic media are not necessarily prefer-
able to paper media in all circumstances. Many people
print out online documents before reading. Here, we
attempt to create a document interface to support on-
line reading. After analyzing cue information used to
accelerate the reading of online documents, how the
system should present the documents, and how the
documents should be managed by users, we propose
an online document interface that removes hindrances
and supports active reading. We also employ the psy-
chological effects of color in order to realize this in-
terface. Moreover, we confirm the effectiveness of our
proposed color interface by comparing it with both a
randomly colored and colorless interface.
Keywords: online documents, reading, color,
overview+detail, information visualization
1. Introduction
The advantages of online documents are their hierar-
chical text structure (hypertext), which cannot be real-
ized on paper, and their larger volume of available data
space. The use of online documentshas spread in people’s
daily lives, not only in companies but also in schools and
homes. Therefore, much of the mental activity of read-
ing, that until recently was done on paper or notes, is now
done on computer displays.
However, electronic media are not necessarily better
than paper media in all circumstances. Many people still
print online documents out on paper before reading them.
Computer users must pay attention to small details, such
as how to move the mouse pointer toward the small slider
on the right side of the screen when using the scroll bar,
or they may find it difficult to follow a display when they
move the scroll wheel on the mouse too much. Conse-
quently, these extra computer tasks make it difficult for
users to concentrate on the original task of reading.
If the interface can remove hindrances to reading and
support active reading, we believe the interface will fur-
ther the user’s reading comprehension [1–3]. The pur-
pose of our study is to activate users’ cognitive activities
of reading by analyzing both the obstruction factors and
the facilitory factors of a user’s reading.
In the following section, we analyze the information
that provides cues for internal reorganization of docu-
ments, how to present this cue information and documents
to readers, and how to enable users to browse the cue in-
formation and documents in a manner that enhances the
readability of online documents and does not interfere
with reading. In Section 3, we study an online document
interface for reading support and demonstrate the inter-
face. In Section 4, we demonstrate the effectiveness of
the interface method compared with a general interface.
In the last section, we provide a summary of our findings.
2. Text Representation of Online Document
We analyzed the reading of online documents. Our
study focused on the function of browsing the text dis-
played on one page in a Web browser. Considering ex-
isting circumstances and earlier studies on online docu-
ments, we first asked the following questions:
•Effective Cue Information: What elements of cue in-
formation accelerate active reading?
•Smooth Presentation of Information: How should a
document and its cue information be represented in
order to support rather than prevent active reading?
•Smooth Browsing: How should a document and its
cue information be managed by a user in a limited
space so as not to hinder the reading of it?
These issues are treated in Sections 2.1, 2.2, and 2.3, re-
spectively.
2.1. Effective Cue Information
We classified cue information for accelerating active
reading into three types: text structure, intention of the
860 Journal of Advanced Computational Intelligence Vol.14 No.7, 2010
and Intelligent Informatics
Psychological Effects of Color in Overview+Detail Document Interface
writer, and text message. We then analyzed each piece of
information. We will also explore whether cue informa-
tion can be automatically extracted to implement a practi-
cal user interface.
Text structure
A text consists of sentences strung together in one-
dimensional lines. Generally, a person’s reading process
of a text follows a set pattern. First, a person takes in
pieces of information one after another from a text. Then,
he attaches relationships to them. Finally, he creates a
structure summarized semantically from the text read. By
applying the method of calculating similarities between
texts that is currently in practical use in the field of in-
formation retrieval, the relationships between texts can be
extracted somewhat mechanically. In our study, the rele-
vance between partial units of a text is expressed as a text
structure.
Intention of the writer
Text can also be regarded as a medium of information
exchange between a writer and reader. For example, with
an exam prep book, an author often emphasizes parts of
the text to the reader by underlining them or changing
their color. Information can be expressed on multiple lev-
els by using such methods of expression. While various
viewpoints can be considered as intentional information
from the writer, we adopted the concept of often-used im-
portant sentences based on the field of Automatic Summa-
rization [4]. In our study, parts that the writer or readers
consider to be important for the understanding the content
are expressed as the intentions of the writer.
Text message
A text can be divided into two parts: the subjective part
in which a writer expresses his opinion, and the objec-
tive part in which he uses concrete examples. The lat-
ter is information that can be imagined and judged easily
from everyday experience. If we read a text after guess-
ing what content is being treated, then understanding will
progress [5]. We believe that specifying which parts of a
text have a high level of concreteness promotes a user’s
understanding. Moreover, at the sentence level, this infor-
mation can be evaluated somewhat formally [6].
2.2. Smooth Presentation of Information
A person who is solving a problem uses not only inter-
nal knowledge about it but also external knowledge, such
as figures or colors [7]. This means that, in combination
with the internal knowledge, presenting some elements of
information about a certain object using external repre-
sentations will help the problem-solving process. The in-
formation in a text is represented as streams of characters
that have a one-dimensional structure. Our idea is to help
readers to reconstruct text information in their minds by
presenting some elements of cue information regarding
the text as external representations (see Fig. 1).
A user needs to learn how to match the visual informa-
tion shown with the cue information. If the visual infor-
Fig. 1. Reconstruction of text information.
mation is complicated, it could burden the user’s memory.
This is because the user would have to keep it in mind by
thinking “this visual information corresponded with the
cue information for XXX,” for example. Therefore, the
most suitable presentation method is also one that asso-
ciates certain semantic relationships between visual infor-
mation and cue information.
Let us next consider what is required to use visual in-
formation as a cue in such a way that it does not disrupt
the intrinsic behavior of reading text. For the cue to not
interfere with reading, the reader must be able to perceive
the cue information while continuing to follow the string
of characters. This requires heightening the visibility of
the cue. However, when the presentation of the informa-
tion is highly stimulating, such as when it is extremely
remarkable or it changes dynamically, the reader may slip
out of reflective thinking. In this case, the most suitable
presentation method is one that can be perceived easily
but that does not divert the user’s attention too much.
In summary, the requirements for cue information are:
visual information, ease of interpretation, and perceptibil-
ity to a level that does not overly divert attention.
For a document, we consider it important that a reader
interpret the contents actively, we do not apply summa-
rization or other processing of the original online text.
When text is read on a display, it is known that the effec-
tive divisional unit of a document is a segment unit [8].
Even when reading paper copy, it is hard to follow when
themes are broken up by pages, so in most cases chapters
and sections begin on new pages. Division of a docu-
ment is thus established techniques for visually demarcat-
ing text, and their effects are by no means trivial. Based
on these finding, in this study we have visually broken up
the text in paragraph units.
2.3. Smooth Browsing
To identify the requirements for unobstructed browser
reading, we analyzed conventional interfaces using Don-
ald Norman’s Seven Stages of Action model to determine
which conditions were conduciveto smooth browsing and
which were not [9]. For this analysis, we subdivided the
actions involved in reading text using an online docu-
ment interface into four basic actions. Then, to clarify
the relative weaknesses of the overview+detail interface,
the scroll interface, and wheel mouse interface, we com-
pared how the three interfaces handle these four basic ac-
Vol.14 No.7, 2010 Journal of Advanced Computational Intelligence 861
and Intelligent Informatics
Ichino, J., Takeuchi, K., and Isahara, H.
tions. The requirements identified through this analysis
are summarized below.
Check of the present reading position
When a user thinks “I want to read the part where it
talks about XXX,” he will first check where he is presently
located in the text as a whole. A user must be able to eas-
ily perceive an object that shows the present location amid
the whole and that easily specifies the present position.
Guess of the position of a target destination
After checking the present position, the user next tries
to guess the location of the part he wants to read in the
text as a whole. A user remembers the rough location of
the part he wants to read. He then plans how to operate
a movement object and whether it changes from one state
to another. The mark function makes it easy to quickly re-
member the location of content already read while making
this easy for the user to perceive at the same time.
Preparation for a move operation
The user next tries to touch an object to change the con-
tents of the display screen. To make it easy for the user
to reach an object to be moved, the user must be able to
easily perceive the area he intends to select.
Move operation
This final basic action involves actually switching the
displayed content on the screen by manipulating the dis-
play switching mechanism. The reader must be capable of
executing this action without subsequently looking at the
switching mechanism in order to continue reading with
minimum disruption. After jumping to a different place
in the document, the place where the reader wants to read
must be clearly apparent (perceptible).
3. User Interface Design
3.1. Psychological Effects of Color
Color not only has the effect of giving the user a favor-
able impression but also offers various other psychologi-
cal effects as well. We reviewed the literature [10] on the
psychological effects of color. The main effects we used
are summarized below.
Sensory effects of color
These effects involve the discrimination of colors first,
after physical colors stimulate the eyes. Humans can visu-
ally discriminate about 7.5 million colors. Furthermore, a
color can be described in three ways: hue, saturation, and
lightness, which humans can recognize intuitively. “Hue”
expresses the basic quality of the color, such as red or
blue. “Saturation” refers to the strength of the color, and
“lightness” is the lightness or darkness of the color. We
focused highly on this capability humans have to discrim-
inate colors.
Perceptual effects of color
These effects occur in response to the influence of the
Fig. 2. Proposed overview+detail document interface.
stimulus of neighboring colors spatially or in time. We
observed one of these effects, the feature that a highly
saturated color is especially conspicuous.
Feeling effects of color
These effects are classified into perceptual-feeling ef-
fects and emotional-feeling effects. Perceptual-feeling ef-
fects are based on the inherent characteristics of a person’s
vision system. Emotional-feeling effects are effects that
are uniquely possessed by an individual. We observed
one perceptual-feeling effect, a feeling of hard and soft
where the lower (higher) the lightness, the harder (softer)
the person feels it is.
Using colors carefully can become a very powerful
means of bringing a user’s attention to important points,
summarizing information, and classifying information. It
is not easy to create such effects by means other than
color. We believe that the readability of a document can
be improved by using the above-mentioned effects.
3.2. User Interface Design
Based on the analysis outlined in the previous section,
we designed the user interface. In this research, the op-
eration design performed satisfies the requirements de-
scribed in Section 2.3 by applying and improving the
overview+detail type interface said to be most suitable for
electronic documents [11].
3.2.1. Presentation of the Document and Cue Information
To display a document organized into paragraphs, we
enclosed each paragraph in a Web page with a colored
border that expressed the three above-mentioned items of
cue information (the detail frame, Fig. 2,left). Tothe
right of the detail frame, we displayed the overview frame,
reduced to a size that could display the entire document.
The same colors used as borders for each paragraph in
the detail frame were used for background colors in the
overview frame (see Fig. 2, right).
862 Journal of Advanced Computational Intelligence Vol.14 No.7, 2010
and Intelligent Informatics
Psychological Effects of Color in Overview+Detail Document Interface
We produced the following information displayed as
cue information for reading awareness:
•Relevance between paragraphs: Which paragraph is
related to which other paragraph?
•Importance of a paragraph: In which paragraph is the
writer’s opinion especially evident?
•Concreteness of paragraphs: which paragraphs con-
tain specific examples and applications?
To meet the requirement that cue information be dis-
played so the user may easily perceive it while reading
a document but that it not create a distraction, we dis-
played the cue information visually using colors. More-
over, to meet the requirement that cue information remind
the user of the semantic content, we used the various ef-
fects of color mentioned in Section 3.1 above. We made
the three attributes of a color – hue, saturation, and light-
ness – correspond to the three elements of cue information
– Relevance, Importance, and Concreteness, respectively.
Fig. 3 illustrates how one color can express the three
elements of cue information simultaneouslythrough com-
parison with its surrounding colors. Since a user needs
to recognize the distance between paragraphs, we made
Relevance correspond to hues sentiently arranged at equal
intervals (see Fig. 4). For example, a user can intuitively
grasp that the Relevance of paragraphs shown in light blue
and bluish green is high, while the Relevance of para-
graphs shown in light blue and purplish red is low (see
Fig. 3, upper left). For Importance, saturation is most suit-
able since saturation and the degree of awareness are re-
lated. A paragraph with high Importance assigned a color
with high saturation can attract a user’s attention imme-
diately (see Fig. 3, center left). For Concreteness, light-
ness is most suitable. We generally think of books with
lots of concrete or specific expressions as light, and doc-
uments containing abstract content as hard. Given this
general perception of ordinary people that “concrete con-
tent is light,” we adopted the perceptual effect of color
that “lower brightness correlates with harder, while higher
brightness correlates with lighter,” thus using lightness as
a way of representing the concreteness of paragraphs. By
assigning a color with high lightness to a paragraph with
high Concreteness, a user can easily discriminate the con-
creteness of a paragraph (see Fig. 3, lower left).
3.2.2. Smooth Browsing
Check of the present reading position: To make it easy
to perceive the present reading position, we enclosed the
paragraph of the overview frame currently being read with
a gray border (see Fig. 2, right). Moreover, after the
position is perceived, to specify where the present loca-
tion is in the whole text as a whole, this feature of the
overview+detail type interface can be used as it exists.
Guess of the position of a target destination:Thecolors
assigned to paragraphs are associated with three kinds of
cue information, and thus have meaning. This also serves
Fig. 3. Expression of cue information using the psycholog-
ical effects of color.
Fig. 4. Hue circle.
as a marker reminding the reader of which passages have
already been read.
Preparation for a move operation: To make the pointable
area for switching the display very apparent, we made the
pointable area in the overview frame the entire paragraph.
Not only is it larger, but the fact that the paragraphs have
different colors makes it even easier to identify. Finally,
to ensure the reader knows that the pointer is within the
pointable area, as the pointer enters a paragraph in the
overview frame, all the adjacent paragraphs are enclosed
in gray frames (see the third paragraph up from the bottom
of the overview frame in Fig. 2).
Move operation: Once the pointer is directed at a para-
graph in the overview frame, the operation proceeds auto-
matically without the reader having to look at the pointer
or the overview frame; the content in the detail frame
switches over automatically to the selected paragraph as
soon as the pointer is directed at a paragraph in the
overview frame (see middle of the detail frame in Fig. 2).
4. Experiment
The aim of the present experiment is to determine
whether or not an online document interface using the
psychological effects of color is effective. Therefore,
we designed our experiment based on the following two
viewpoints.
Vol.14 No.7, 2010 Journal of Advanced Computational Intelligence 863
and Intelligent Informatics
Ichino, J., Takeuchi, K., and Isahara, H.
Spatial encoding of text
One of the weak points of online document interfaces
compared with paper documents is that it is difficult to
grasp where the current reading position is [12]. A num-
ber of findings are consistent with the idea that spatial
encoding of text in two dimensions is related to mem-
ory. For example, such spatial encoding can help im-
prove readers’ subsequent recall of information in long
texts [13]. This idea is considered to be useful to read-
ers during the comprehension phase. Viewed in this light,
many studies that compared the differences between in-
terfaces on PCs [14] and PDAs [15] ask readers the spa-
tial position of text information. From a similar stand-
point, we also investigated whether the proposed method
has an effect on the spatial encoding of text information
(sentence-location task).
Interface availability
Spatial encoding of text is intended to measure mem-
ory of the spatial position of the text. We also need to
confirm whether spatial encoding is a cue to being able to
recall text information and whether such spatial encoding
is immediately available on the proposed interface. In this
experiment, we set up a task that asks the subject to insert
some words in blanks in a reading text and to analyze the
time required to fill in the blanks and the efficiency of pen
operation in doing so (sentence-completion task).
4.1. Method
4.1.1. Design
Three types of screen presentations (display modes)
were used in this research:
(1) Proposed color mode: Participants read a document
with colored paragraphs, the colors of which are de-
termined based on the proposed technique.
(2) Random color mode: Participants read a document
with colored paragraphs, the colors of which are the
same as those used for the Proposed color mode but
randomly arranged.
(3) Colorless mode: Participants read a document with-
out any colored paragraphs.
4.1.2. Participants
Sixteen men and women in their 20s and 30s partici-
pated in the experiment. All participants used a computer
on a regular basis. All read a document in each of the
above display modes, reading the document one time per
display mode.
4.1.3. Interfaces
All display modes – Proposed color, Random color, and
Colorless – were displayed using a pen tablet liquid crys-
tal display. The display size, resolution, and brightness of
the display window were identical among the three dis-
play modes. The working conditions of the stylus pens
Fig. 5. Scene from the experiment.
Fig. 6. Screenshots of display windows.
were also the same. We also used a laptop PC to explain
to the participants the sentence-location and sentence-
completion tasks to be conducted after the reading task.
The software used to present the document was Mi-
crosoft Internet Explorer Ver.6. The type of interface was
the overview+detail type in all display modes.
Scenes from the experiment and screenshots from In-
ternet Explorer are shown in Figs. 5 and 6, respectively.
4.1.4. Documents and Tasks
Documents: Three editorial articles were prepared, each
of which consisted of about 3,500 to 3,800 characters and
16 to 18 paragraphs.
Coloring to the document: Prior to the experiment, we
enlisted 12 raters (not subjects) who knew nothing about
the experimental conditions, and we asked them to rate
all of the paragraphs in all three documents in terms of
relevance, importance, and concreteness. According to
the majority opinion of the raters, we then applied colors
to the paragraphs based on the principles of the proposed
scheme described earlier.
Sentence-location task: Participants were asked to indi-
cate where a sentence was located in the previously read
document. We chose 16 test sentences from each docu-
ment. To determine whether the reader’s ability to spa-
tially encode text information relies on spatial cues of hue
(relevance), saturation (importance), and lightness (con-
creteness), we classified the 16 sentences into four cate-
gories (see Tab l e 1 ). These 16 sentences were presented
in random order.
Sentence-completion task: Participants were then asked
864 Journal of Advanced Computational Intelligence Vol.14 No.7, 2010
and Intelligent Informatics
Psychological Effects of Color in Overview+Detail Document Interface
Table 1. Type and number of sentences in sentence-location
task.
Sentence in each category Number of
questions
Relevance Nearby sentence where the relevance (hue)
of neighboring paragraphs changes a lot
4
Importance Sentence in a paragraph with high impor-
tance (saturation)
4
Concreteness Sentence in a paragraph with high concrete-
ness (lightness)
4
Other Sentence applicable to none of the above 4
Tot al 1 6
Table 2. Type and number of sentences in sentence-
completion task.
Sentence in each category Number of
questions
Quotation
sentences
Sentence as quoted directly from the document 10
Copulative
sentences
(a) Sentence connecting two or three sentences
in two paragraphs whose relevance is high (hue
is similar) and is neighboring
2
(b) Sentence connecting two or three sentences
in two paragraphs whose relevance is low (hue
is not similar) and is neighboring
2
(c) Sentence connecting two or three sentences
in two paragraphs whose relevance is high and
is not neighboring
2
(d) Sentence connecting two or three sentences
in two paragraphs whose relevance is low and
is not neighboring
2
Tot al 1 8
to fill in blanks in sentences with words from the previ-
ously read document. We chose 18 test sentences from
each document. We classified the 18 sentences into two
categories. Ten of the sentences were quoted directly
from the document (hereinafter, “quotation sentences”),
and the other eight sentences were related to two or three
sentences quoted from the documents (hereinafter, “cop-
ulative sentences”) (see Tab le 2 ). To determine whether
a reader’s ability to recall text information relies on hue
(relevance), we classified eight copulative sentences into
four subcategories. Quotation sentences were presented
first, followed by copulative sentences. The sentences in
each category were presented in random order.
4.1.5. Procedures
Each subject participated in the experiment for an in-
terval of 5 hours or more and experienced all three dis-
play modes. Subjects, documents, and display modes
were combined so that the number of subjects assigned
to each document and each display mode would cover all
16 sentence-location tasks. The order in which the ex-
periment was conducted was set up so that any effects of
documents or display modes on the order would be bal-
anced among the subjects.
Training: Before starting the experiment, the subjects
were given a brief introduction regarding the three dis-
play modes and how they worked. We also provided the
subjects with concrete examples of the two types of tests
Fig. 7. Sentence-location task.
after the reading task, and instructed them how to operate
the displays, and allowed them time to practice.
Reading task: Before reading the experimental document,
participants were told that they would have to read a doc-
ument “well enough to understand it and to be able to
answer questions about it later.” The time limit per read-
ing was 40 minutes, and participants were free to use the
overview+detail interface arrows as desired. Backtrack-
ing was allowed.
Sentence-location task: After reading the document, par-
ticipants had to locate each of the 16 test sentences in
the response box, which was a snapshot of the overview
frame, except that each line of the document had been
replaced with a straight line. The tool prepared for the
sentence-location task is shown in Fig. 7. The test sen-
tences were displayed one by one in a predefined, random
order in a box (see Fig. 7, left). Participants were told to
use the mouse to click on lines in the response box (see
Fig. 7, right) to indicate what they thought were the loca-
tions of the sentences in the document. Before starting,
the experimenter insisted that participants try to find the
exact location of each sentence “right down to the very
line” and to “think carefully before clicking because an-
swers could not be changed.” The test sentence box and
response box were of the same size in all display modes.
Once a subject had responded, the next sentence was writ-
ten over the first in the test sentence box, and the response
box no longer showed any signs of the previously chosen
location. There was no overall time limit on the test.
Sentence-completion task: After having located the sen-
tences, participants then had to fill in blanks in sentences
with words from each of the 18 test sentences. The tool
prepared for this task is shown in Fig. 8. The two cate-
gories were shown in the order of quotation sentences and
copulative sentences, and test sentences were displayed
one by one in a predefined random order in a box (see
Fig. 8, top). Participants were told to use the keyboard to
Vol.14 No.7, 2010 Journal of Advanced Computational Intelligence 865
and Intelligent Informatics
Ichino, J., Takeuchi, K., and Isahara, H.
Fig. 8. Sentence-completion task.
insert words in the blanks in the sentences (see Fig. 8, bot-
tom) while referring to the document on the tablet display.
Before starting, the participants were told to “answer cor-
rectly and as quickly as possible.”
4.1.6. Measures
Pointing accuracy: In the sentence-location task, we de-
termined the number of times the subjects identified the
correct locations, number of lines off if they answered in-
correctly.
Sentence-completion time and pen operation:Forthe
sentence-completion task, the time taken to fill in the
blanks was recorded for each subject in each test. Ad-
ditionally, the number of taps and the distance each sub-
ject moved the stylus pen while filling in the blanks were
captured.
4.2. Results
4.2.1. Standardization and Multiple Comparison Test
Before comparing data among the display modes, it is
necessary to absorb the difference between the three doc-
uments used in the experiment. For each document, a
z-score was calculated; this standardized the 16 partic-
ipants’ data so that the average and standard deviation
might be set to 0 and 1, respectively. Then, the derived
z-scores were regrouped for all the display modes.
The Dunnet test, used when comparing one contrast
group with all other groups, was used for the multiple
comparison test. The Proposed color mode was compared
with the Random color mode and Colorless mode.
4.2.2. Pointing Accuracy
Fig. 9 shows averages and standard errors for number
of lines off from the correct locations indicated by the
groups of subjects in the sentence-location task. One can
see that in the relevance problems dealing with sentences
near the boundary of paragraphs whose relevance (hue)
changes abruptly and in the importance problems involv-
ing sentences in the more important (saturation) para-
graphs, the average number of lines off is significantly
smaller for the Proposed color mode than for the Ran-
dom color and the Colorless mode. On the other hand,
Fig. 9. Mean difference between locations chosen in re-
sponse box and real sentence locations.
Fig. 10. Duration of sentence-completion task.
Fig. 11. Number of taps in sentence-completion task.
from the responses to the concreteness problems involv-
ing sentences in the more concrete (lightness) paragraphs,
we did not observe any significant differences among the
three-color modes.
4.2.3. Sentence-Completion Time and Pen Operation
Regarding pen operation, on the whole, the Proposed
color mode differs much more from the Random color
mode than from the Colorless mode.
Tim e : For copulative sentences, the Proposed color mode
allowed participants to fill in the blanks significantly
faster than the Random color mode. For quotation sen-
tences, there was no significant difference between the
Proposed color mode and the others (see Fig. 10).
Number of taps: For copulative sentences, the Proposed
color mode produced significantly fewer taps than the
Random color mode. For quotation sentences, there
was no significant difference between the Proposed color
mode and the others (see Fig. 11).
866 Journal of Advanced Computational Intelligence Vol.14 No.7, 2010
and Intelligent Informatics
Psychological Effects of Color in Overview+Detail Document Interface
Fig. 12. Distance pen moved in sentence-completion task.
Fig. 13. Distance pen moved in sentence-completion task
(copulative sentences).
Move distance of pen: For both quotation sentences and
copulative sentences, the Proposed color mode produced
significantly shorter pen distances than the Random color
mode. For quotation sentences, the Proposed color mode
produced significantly shorter pen distances than the Col-
orless mode (see Fig. 12).
Focusing on the pen movement distance, we compared
the sub-categories of the copulative sentence problem (see
Fig. 13). Comparing Problems (a) and (b) using sentences
from adjacent paragraphs, we found that the Proposed
color mode was extremely effective in (a) using sentences
from paragraphs that were more closely related (i.e., had
similar hues). Similarly we found that in Problems (c)
and (d) using sentences from paragraphs that were non-
adjacent, the Proposed color mode was quite effective in
(c) using sentences from paragraphs that were closely re-
lated. The significance was especially marked in Problem
(c) using sentences from paragraphs that were not adja-
cent to each other.
4.3. Discussion
Data from the sentence-location task showed that read-
ers located sentences in the Proposed color mode environ-
ment better than in the Random color mode or Colorless
mode display environments. Results were especially good
for sentences that were near where the relevance (hue)
of neighboring paragraphs changed significantly and the
sentence was located in a paragraph with high importance
(saturation). This result indicates that the presentation of
relevance (hue) and importance (saturation) has an effect
on the spatial encoding of a text. Furthermore, regard-
ing concreteness (lightness), the Proposed color mode did
not have the intended effect, producing almost the same
results as the Random color mode. It is necessary to re-
consider the relations between concreteness and reading.
Data from the sentence-completion task showed that
readers in the Proposed color mode environment searched
out specific parts in less time and with fewer pen opera-
tions than parts in the Random color mode environment.
This result shows that color can communicate information
and improve the operation of an interface if well-intended
colors are used. The distance the pen was moved was par-
ticularly small in the test that asked readers to search for
sentences in paragraphs with high relevance but that were
not adjacent. This result shows that information regarding
the relevanceamong the paragraphs presented as a hue has
an effect at the time of movement to distant paragraphs.
The copulative-sentence test performed after that, rather
than the quotation-sentence test, also had an effect. This
suggests the likelihood of a study effect.
5. Conclusion
Cue information for active reading, intelligible repre-
sentation of a document, and operation that does not pre-
vent reading was analyzed. Based on our analysis, an on-
line document interface that removes hindrances to read-
ing and promotes active reading was proposed.
The effectiveness of the proposed color interface was
confirmed by comparing it with both a randomly colored
interface and a colorless interface. “Proposed color, Ran-
dom colored interface, and Colorless interface” is used all
through this paper until the last paragraph. Our experi-
ment confirmed that the spatial encoding of text and the
operation of the interface were improved by making color
(hue and saturation) correspond to features of the text (rel-
evance and importance). In other words, we confirmed
that progress was made in the readability of online docu-
ments by appropriately using the psychological effects of
color.
References:
[1] J. Ichino, K. Takeuchi, and H. Isahara, “Color-coded Document
Catcher: Proposal for a support system for reading online docu-
ments using the psychological effects of color,” Human Interface
Symposium 2004, pp. 139-142, 2004.
[2] J. Ichino, K. Takeuchi, and H. Isahara, “Color-coded Document
Catcher: Interface for Reading Online Documents Using the Psy-
chological Effects of Color,” CDROM Proc. 11th Int. Conf. on
Human-Computer Interaction (HCII2005), ten-page paper, 2005.
[3] J. Ichino, K. Takeuchi, and H. Isahara, “Effects of the Psychological
Effects of Color in Overview+Detail Document Interface,” Trans. of
Information Processing Society of Japan, Vol.47, No.4, pp. 1303-
1315, 2006.
[4] I. Mani, “Automatic Summarization,” John Benjamins, 2001.
[5] K. Hisahara, “Promotion of reading for knowledge acquisition,” In
G. Hatano (Ed.), Training of Self-study Capability: The New Role
of Schools, pp. 122-136, University of Tokyo Press, 1980.
[6] F. Minami, “Structure of Present-day Japanese (11th ed.),”
Daishukan, 1998.
[7] J. Zhang and D. A. Norman, “Representations in distributed cogni-
tive tasks,” Cognitive Science, Vol.18, pp. 87-122, 1994.
Vol.14 No.7, 2010 Journal of Advanced Computational Intelligence 867
and Intelligent Informatics
Ichino, J., Takeuchi, K., and Isahara, H.
[8] J. Pynte and G. Noizet, “Optimal segmentation for sentences dis-
played on a video screen,” Processing of Visible Language, Vol.2,
pp. 376-385, Plenum Press, 1980.
[9] D. A. Norman, “The Psychology of Everyday Things,” Basic
Books, 1988.
[10] T. Yamanaka, “The Foundation of Color Science,” Bunka-shobo
Hakubunsha, 1997.
[11] K. Hornbæk and E. Frøkjær, “Reading patterns and usability in vi-
sualizations of electronic documents,” ACM Trans. on Computer-
Human Interaction, Vol.10, No.2, ACM Press, pp. 119-149, 2003.
[12] K. O’Hara and A. Sellen, “A comparison of reading paper and on-
line documents,” Proc. CHI’97, pp. 335-342, ACM Press, 1997.
[13] A. E. Lovelace and D. S. Southall, “Memory for words in prose
and their locations on the page,” Memory and Cognition, Vol.11,
pp. 429-434, 1983.
[14] A. Piolat, J. Roussey, and O. Thunin, “Effects of screen presentation
on text reading and revising,” Int. J. of Human-Computer Studies,
Vol.47, pp. 565-589, 1997.
[15] K. O’Hara, A. Sellen, and R. Bentley, “Supporting memory for
spatial location while reading from small displays,” Proc. CHI’99,
pp. 220-221, ACM Press, 1999.
Name:
Junko Ichino
Affiliation:
Graduate School of Information Systems, The
University of Electro-Communications
Address:
1-5-1 Chofugaoka, Chofu, Tokyo 182-8585, Japan
Brief Biographical History:
1996-1998 M.S. in Engineering, University of Electro-Communications
1998-2001 System Engineer, Dai Nippon Printing Co., Ltd.
2001-2006 System Engineer / Project Reader, TIS Inc.
2003-2006 Researcher, National Institute of Information and
Communications Technology (NICT)
2004-2007 Ph.D. in Engineering, Kobe University
2007- Assistant Professor, University of Electro-Communications
Main Works:
•“Improvement of Member’s Concentration during Discussion,” Proc.
HCII2009, LNCS 5617, pp. 59-68, 2009.
•“Support for seamless linkage between less-detailed and more-detailed
representations for comic design,” Proc. CHI2009, pp. 3979-3984, 2009.
•“Face-to-face Single Display Groupware Encouraging Positive
Participation,” Adjunct Proc. UIST2006, 2006.
Membership in Academic Societies:
•The Association for Computing Machinery (ACM)
•Information Processing Society of Japan (IPSJ)
•Human Interface Society
•Japan Society for Fuzzy Theory and Intelligent Informatics (SOFT)
Name:
Kazuhiro Takeuchi
Affiliation:
Department of Engineering Informatics, Osaka
Electro-Communication University
Address:
18-8 Hatsu-cho, Neyagawa, Osaka 572-8530, Japan
Brief Biographical History:
2002-2006 National Institute of Information and Communications
Technology (NICT)
2007- Department of Engineering Informatics, Osaka
Electro-Communication University
Main Works:
•“A Model of Discourse Segmentation and Segment Title Assignment for
Lecture Speech Indexing,” IEICE Trans. on Information and Systems,
Vol.E90-D, No.10, pp. 1601-1610, 2007.
•“Virach Sornlertlamvanich: Digital Libraries in Asian Languages – A
TCL Initiative,” Proc. ICADL 2003, pp. 365-372, 2003.
Membership in Academic Societies:
•Information Processing Society of Japan (IPSJ)
•The Institute of Electronics, Information and Communication Engineers
(IEICE)
Name:
Hitoshi Isahara
Affiliation:
Information and Media Center, Toyohashi Uni-
versity of Technology
Address:
1-1 Hibarigaoka, Tempaku, Toyohashi, Aichi 441-8580, Japan
Brief Biographical History:
1995-2009 National Institute of Information and Communications
Technology (NICT)
2009- Toyohashi University of Technology
Main Works:
•“Using Short Dependency Relations from Auto-Parsed Data for Chinese
Dependency Parsing,” ACM Trans. Asian Lang. Inf. Process. Vol.8, No.3,
2009.
•“An Error-Driven Word-Character Hybrid Model for Joint Chinese Word
Segmentation and POS Tagging,” Proc. ACL-IJCNLP 2009, 2009.
Membership in Academic Societies:
•Information Processing Society of Japan (IPSJ)
•The Association for Natural Language Processing
•The Japanese Society for Artificial Intelligence (JSAI)
•Japanese Cognitive Science Society (JCSS)
•The Association for Computational Linguistics
868 Journal of Advanced Computational Intelligence Vol.14 No.7, 2010
and Intelligent Informatics