Processbook

More Information @ Small Screen Project Summary Preliminary research Process documentation Project documentation

More Information @ Small Screen

By Miso Kim

A Studio Project Submitted in Candidacy for the De-
gree of
Master of Design in Interaction Design

The School of Design
Carnegie Mellon University

Miso Kim, MDes in Interaction Design Candidate

Prof. Daniel Boyarski, Thesis Advisor

c 2005 Miso Kim
Carnegie Mellon University
Pittsburgh, Pennsylvania
May 2004


Project Summary

Project title Methodology Abstract
More Information @ Small Screen The potential of digital displays and the limitations of Throughout human history, the ways of representing
small screens suggest that the display of information information changed as the medium for communication
should be different from existing analog media. To ﬁnd developed. Both mobile phones and the Internet are rep-
Designer a design solution, the following research needs to be resentative communication mediums in the current age,
Miso Kim undertaken: and a recent development of mobile phones is toward
1. Theoretical Research Based on Readings convergence of other diverse media. The idea of embed-
ding a wireless Internet connection into a mobile phone
Advisor 1) The nature of information, focusing on form and is the core of this convergence.
structure.
Prof. Daniel Boyarski However, the fact that the Internet is based on image
2) The advantages and disadvantages of the tempo- and text raises a challenging design problem when dis-
ral nature of information representation in digital playing this data on a mobile device. These devices tend
Project start and end date media, compared to the ﬁxed representation in to have smaller screens, which is a limitation for display-
August 2004 ~ May 2005 analog media. ing complex visual information. Current developments in
3) The characteristics of Web-based information. high-resolution technology support the clear display of
2. Research on Examples, Technologies, and Issues text and images, but the task of presenting large amounts
Intended audience
of text on a small screen is a major challenge. I believe
People who are familiar with mobile phone technology Current and future technologies and issues related to that an exploration of this problem will contribute to the
this problem, such as small screen displays, resolu- development of mobile devices as integrated personal
tion, typography and type design, motion and com- media, which will lead to potential mega-media in the
Context munication. future.
Presenting web-based text in mobile phone I explored the challenge of presenting large amounts of
verbal information on a small screen, and created a com-
File name and format pelling experience as a digital prototype that represents
one solution to this problem.
smallscreen.swf


Preliminary Research

1. Screen size 1.1 in 1.8 in 2.3 in 2.7 in
The tension between the need for compact-size-
phone and the need for big screen decided the screen
sizes below:
• Usually: 1.8 in
• Largest: 2.3 in (selected for the project)
• PDA Phone: 2.7 in



2. Existing researches on readings on small screen • Screen size: large • Screen size: small • Screen size: small • Screen size: small
• Type size: large • Type size: large • Type size: small • Type size: small
1) Scrolling behavior caused by small screen brings
• Scroll: none • Scroll: vertical / horizontal • Scroll: vertical / horizontal • Scroll: vertical / horizontal
perceptional breaks
• Focused (attentive) activity: achieving goal,
searching for certain information, comprehensive
reading
• Unfocused (inattentive) activity: scanning for
things that interest them.
• “The effect of small screen is more obvious in
focused activity.”
• “Small screen users have to Interacted with the
display window to a much higher degree. They
paged backwards and forwards through the text
much more in the small screen, in an attempt to
orientate themselves, to provide context as they
progressed through the text.”
• “They have to carry far many scroll actions. Such
activity interrupts their primary tasks.”
2) Words per line is more important than number of
lines being presented
• “The full width display was read 25% faster than
the screen which was 1/3 the width. The impact
of varying the display height, however was very
much less dramatic.”

• Tomonari, Elson, Harpold, Stamper, Sukaviriya. Using small screen space more efﬁciently



3. Existing typography principles for legibility of
long body text
• Type size: 9~12 depending on the x-height, me-
dium weight.
• Line width: 18 and 24 picas, consisting of about
10~12 words. (type size 9~12 )
• Leading: 1 ~ 4 of the type size depending on the
typeface used. (type size 9~12 )
• Typeface: Serif type faces are preferred. (type size
9~12 )
• Typeface on digital display: Typefaces designed
for web, san-serif

Still, it is a interesting question whether these typog-
raphy principles for big paper and big screen would
still be applicable for small screens to achieve the best
legibility, especially considering that people bring the
screen closer to their eyes when looking at the mobile
phone screen. The distance between the eyes of people
reading text from books and computers and mobile
phone are different.
I wanted to ﬁnd out the answer for this question by
creating sets of prototypes and conducting test with
them. The typography principles I selected for this test
include Movement, Direction,Typeface, and Type Size.

• Rehe, Rolf. Typography: how to make it most legible
• Boyarski, Neuwirth, Forlizzi and Regli. A Study of Fonts Designed for Screen Display, CHI 98


Process 1: Movement

The temporal nature of digitally-displayed information
allows the element of time to be introduced into the
list of typography principles. Also, “movement” as the
result of designing time has a great potential to solve
the problem of excessive scrolling issue, as well as the
effective use of small space.

I began from the four basic movement behavior on the
right, and then generated diverse iterations and hybrids
• Typeface: Verdana regular • Typeface: Verdana bold
as I collected feedbacks from testers. Following three
• Type Size: small • Type Size: small
page shows the procedure.
• Type Behavior: scroll (per page) • Type Behavior: ﬂow (per line)

• Typeface: Verdana bold • Typeface: Verdana bold
• Type Size: medium • Type Size: large
• Type Behavior: RSVP (3 lines) • Type Behavior: RSVP (1 word)


Scroll Scroll Scroll Scroll Flow Flow RSVP
• Page by page • Half by half • Page by page • Line by line • Line by line • Line by line • Word by word
• Half grey • One line grey • One line highlight • Center line focus • Wider focus
Negative

Somewhat
negative

Somewhat
positive

Positive

Reader A • Had hard time relocating. • On the fourth page “Oh, I see how it
works. Now it’s pretty easy.”
• “This is what I meant.” • “Awesome! How about you make it
smoother?”
• Well... Don’t like the fact that He can’t
control.
• This works better for text. But I want
to know the total amount, and how
• Didn’t like this.

• Native Speaker • Concerned about the discrepancy • Why scrollbar? What’s the role of much left to read. • Said it’s not natural way of human
between the size and proportion of • Text too small scrollbar? What about alternative? • Preferred Scroll in general, but sug- • Mentioned about Flow (narrow) that reading. (word by word, he means)
• Fine Art scrollbar and the actual amount of - Measuring how long is the text. gested that the movement of the text it’s too much not using the space. Hard to remember what I just saw. Out
• Multimedia text. • Concerned about the discrepancy - Locating where in the text. should be smoother. “it’s like the news in the TV” of context.
between the size and proportion of - Feedback to how much of text is being
scrollbar and the actual amount of scrolled one time.
text.
• Suggestion to collaborate this with
highlight. Text before: grey. Text com-
ing: highlight.

Reader B • The ‘texture’ of the text is too heavy. • Frustrated at first. Why is it the same • Oh one line makes big difference! • Scroll (one line): text too small. This • This even better. I wear glasses. More • This is better. I like to see what was • NO. It’s not for reading.
I find my eyes jumping the words. text? Maybe you make it same to the last is good. All I’m reading is one line whitespace and enough leading make before and what will be next.
• International line so that I can see what’s coming make it better. it easier to read. Less stress. I like • It’s not the speed, but just hard to
• I always skim on the websites. If I • After getting used to the system, next. seeing one word at one time. • I would like to have some ‘breath’ follow. It’s not kind. Not gentle as the
• Interaction Design
need to read, I print. But this one found that she’s looking at only half • But Most of the screen is filled by though. one before. It’s just bombombom...
• Web design too hard to skim. How about high- of the screen. context info. • I like to keep it flow down, but want like screaming. Remember the rule of
lighting key words? to be able to go back, stop, change 5-7 chunking?
• Not using the screen effectively. • When changing from down key to up the speed. After for a while, I get
• Hard to locate where new text begins. key, the highlight jumps awkward. tired. Stay and move again.

• And why not center? It’ weird to see • Put some ‘resting space’ between
the bottom all the time. But in this, paragraphs. But I don’t know where I
I can’t do it as quick. am or how long is the text. It will be
a problem in skimming.

• Why use scrollbar? • Need smoother transition. • Need a way for user control. • Need a way for user control. • Need chunking and context.
Further
Development
X X • Feedback needed also for coming text. • Why the highlight not center? • Too much empty space vs. whitespace
make me feel comfortable
• Need feedback for the length of the
text etc.

• If use scrollbar, be careful with the • “Resting space”
proportion.


Scroll Scroll Flow Flow RSVP RSVP Flow
• Page by page • Line by line • Line by line • Line by line • Word by word • Some chunking • Right to left
• One line grey • One line highlight • Center line focus • Wider focus • Fadeout
Negative

Somewhat
negative

Somewhat
positive

Positive

Reader C • Hard to say. Not obvious. It took me
some time to see what is the grey
• Text is pretty small. Depend on the
situation. If it’s e-mail, I would be
• I like the previous one that I could
see 3 lines in the middle. Give me
• Fast. I wanna be able to stop it. It’s
really hard to keep the pace. Speed.
• I feel like watching a commercial.
Something’s so strong. Emphasiz-
• A little easy too read but not much
difference. Doesn’t make me feel like
• This has similar issues. It’s like
commercial. Readable, still, predeter-
• Native Speaker line. I like that I can see one line more comfortable reading it line by some room for my pace. ing words. Really powerful. Article reading an article. mined. I wander who decides that. Ed-
from the previous page. How about line. If it’s news, I would like to skim would be too long to use this kind of ited. You have chosen what to tell me.
• Interaction Design arrow to show whether I’m going up it. (Preferred Scroll – grayline) I also method. I don’t have control. If it’s long text,
• Web design or down for reinforcing? want to know how many “pages” I I want the text stay as background (if
have left and the summary of content. news, objective)
(two lines or so ) so that I can decide
whether I shall read this or not. It’s
very important to know the length.
Why the highlight not in the middle?

Reader D • I really like it. This is what I always
needed. The frustration that I have
• I hate going line by line.. The only
reason that I do it is that I can not
• Ow! This is interesting. I like it. I’m
lazy. The focus is in the center and
• Still, I read much faster. But not
much annoying. This reminds me
• No. This is not. I have to skip over a
lot of words in my natural reading,
• Still so choppy. Increase my cognitive
load. I have to transfer words.
• The part for heading is interesting.
Nice that It comes from right that
• Native Speaker in web browsers is that I can never locate myself after pagedown. I don’t have to move my eyes. But I the news ticker in times square. It’s and this forces me to read even I can keep my eyes in the middle.
locate where I am when pagedown. read much faster than this. slow, but the space is big enough so the words like a, is, etc. (Cognitive Pretty natural.
• CPID The scroll is so arbitrary. • This lighter type works better in this you can catch up or wait to see the psychology)
• Web design lighting. But the bold may be better • And if I’m in a outside environment next. Briefing of the news and stock • But I wonder why it’s broken some
• This grey line gives great feedback. I when backlight. I’m too lazy to click like a bus, I may not be able to at- info etc. • This may work for poetry, but news place while I’m reading it. It looks so
know exactly what to do. Much like the small button every line by line. tend to this all the time. Need some articles, there are a lot of words significant. Also, the one line thing
reading a book. interactive ways to change the pace. • I need more of clear area, maybe 6~7 that I’ll want to skip. Not important make me almost read every spell of
And what if the focus was wider? lines? Still I think the first one was words. ‘terrorism’ instead of reading it as
• Typography good enough to read best, but this may be good for skim- one word. Not very annoying, though,
comfortably. ming headlines when I’m not willing compared to RSVP.
to be attentive.
• Also may be good for series of
headlines.

Further • How about arrow to show whether I’m • Would be good for attentive reading, • Need a way for user control. • Need a way for user control. • Hopeless? • Feels “too creative” and “not objec-

Development
going up or down for reinforcing? like e-mail.

• Feedback needed for how many
• Would be good for skimming, like
headlines, briefing of the news and
X tive”

• May be good for series of headlines.
“pages” left stock info etc. (inattentive skimming.) It will be
important to present good chunk of
• Summary needed for news kind of info • Need even more of clear area. info.
to decide whether to read or not.


Scroll Scroll Flow Flow Flow RSVP Flow
• Page by page • Line by line • Page by page • Line by line • Line by line • Some chunking • Right to left
• Two lines grey • One line highlight • Smooth transition • Wider focus • Wider focus • Fadeout
Negative

Somewhat
negative

Somewhat
positive

Positive

Reader E • It took me while to understand that
it’s page by page. Because so much
• I don’t like the line by line neither.
Yellow highlight as indicator good at
• I recommend this. My favorite. Now
seeing this, I like the to keep one line
• This is nice. (People tend to click the
key immediately and get disappointed
• It’s kind of choppy. I don’t like this. I won’t remember
anything. Visually it’s not enough text
No. Too creative for plain text. Also, the
direction is reversed from how I read.
• Native Speaker amount of text, I do a lot of skim- the beginning, but becomes annoying from last screen better. Keep the last by the fact that they can’t control. • What’s the background yellow? Oh, that I can remember. Separated too The fading not necessary.
ming. So much info. and unnecessary after while. line. I do like this a lot. Nice speed, But she just drew herself back and it’s shifting to right. I like the idea, much.
• CPID too. Serif definitely better. I love the watched it.) It each people can but seems to be a little bet distract-
• English background • Connection between screen is unnec- • Font better than the one before, but motion. No problem with the direction change the speed, this will be the ing. Expected to be a image. When
essary once I figure out that it’s page too light. The scrollbar change too of the bar. one. It doesn’t make me feel antsy sometimes there’s one word per line
by page. So much text-I get bored. small that I make myself click fast to that I have to change. ‘cause it works annoys me. Slow...
I wanna see more of lines by lines get feedback. • What if you try up to down? I really by itself.
changes. It’s too passive... wanna like the new bar. Scrollbar is too
more manipulation. Need more tracker. specific.

Reader F • A lot of text. The width is too small.
Type looks very small to me to. Why
• Font: letters are more clear but text
overall is too light. Harder to read.
• Georgia is nicer. • I like this best. Little fast, but I
think this is good. I want to be able
• Little slow. • This is not working. RSVP is good
idea, but this must be finessed more.
Oh, no. Not so much. I don’t see how
this make the reading any better. But
• Native Speaker not use horizontal screen? What Try crispy. Too tired to go line by • I lose which one I was looking at. to have control. If I can control, or • The typesize is the best among what It’s like robot is talking to me. Text, the one line thing has potentials. What
about Lucina Grande instead of Ver- line. It it’s always at the bottom, not Last line has to be highlighted when stop, I like this a lot. Up slower the I saw so far. is just there and I phrase... is natural. about meta-stream with three lines at
• Interaction Design dana? Verdana is made of pixels and needed. The edge will do that. What I press the down key. speed, down to faster, some point If the RSVP does it good, it’s good. one time? Main story, footnote, ad-
• Web design looks bad when rasterized. Lucina is about the center? That’ll be landmark. it reversed. I don’t think the white • Frame rate is too low, too. But now, it’s like Steven Hawking ditional info.
taller. Tall typeface and less lines. Re- • I like the navigation bar. It’s right space is bad. But if needed, progress talking to me. As long as it’s in good
minds me of the bible... the last word • If it’s list, really need to be able to that we don’t need scrollbar. It’s for bar can stay in the whitespace. • At first, I thought the color is vertical way, it may work.
is the first word in the next page. One see all things at one time. Unless I mouse. But progress is usually up or and then I began wonder why slope. I
word at the bottom. It confuses me, have to remember and go back. It’s right... not conventional. • When reading thoroughly, I like that I only know that it’s some sort of prog-
though, in the line. I get to read the the problem of voice system. It’s hard like that it preset info to me. I don’t ress. Didn’t grab the intention. But
line twice. Also, took a few lines to to grab the whole thing. Especially need to manipulate it constantly. It’s it’s in the background and moving
figure out the system. when I have to make a decision. Also like reading book. Compared to scroll, very slowly. Not a deterrence reading
need to know how long the text is. it like buckle vs. spoon. the text.

Further • Try Lucina Grande and bigger fontsize. • List (when making a decision) need
to be together or must have a way to
•Serif working better. • Need a way for user control. • Background color not clear meaning
what.
• Observe native speaker reading • Feels “too creative”

Development • Go back to wide screen? go back. • Keep attention to the last word when • How long the wheel? • Try mixing with Flow? • Fading not necessary.
moving • Typesize the best.
• May not need the indicator all the • Why highlight not in center? • Progress bar in the white space? • The one line thing has potentials.
time. • Progress bar not conventional? What about meta-stream with three
• Bold font works better. • Would be good for “reading thorough- lines at one time? Main story, foot-
• Try one word, instead of one line. ly” situation. note, additional info...


Process 1: Movement Attentive Reading

Based on the user testing and feedback, 4 movement
were selected as the most effective “typography” for
different context of use.

Email

Scroll Scroll
Small Chunks • Page by page • Page by page
Big Chunks
of information
of information
(List, Outline) (Body Text)

News

Flow Flow
• Right to left • Page by page
• Fadeout • Smooth transition

Inattentive Reading


Process 2: Direction

The handheld nature of small device adds another ele- Manual Scroll Automatic Flow
ment to the typography principles for small screen. The • Horizontal • Horizontal
direction of the screen (vertical or horizontal) signiﬁ-
cantly affects the number of words per line. I assumed
that changing the direction of the mobile phone screen
from vertical to horizontal may feed to the small screen
problem that I learned in Preliminary Research phase,
and the testing result in next page clearly shows that
the answer is “yes.”

For the test of direction, typeface, and typesize, I used
Flashlite program to make them actually work in a
mobile phone. Every time of the testing, 4 texts of same
difﬁculty were presented in different mixture with the
variable being tested for the purpose of fair result.

Manual Scroll Automatic Flow
• Horizontal • Horizontal

��

��
��

��
��
��

��
��
��

��

��
��
��
��
��
��

��

��

��
��
��
��

��

��
��
��

��
��
��
��
Project Summary

��

��
��

��
��
��
Preliminary research

��
��
��
��
��
��

��

��
��
��
��
��

��
Process documentation

��

��

��
��
��
��

��

��
Project documentation

��
��
��
��

��
��
��


Process 3: Typeface

Horizontal screen was selected in the last testing. The Verdana Regular Verdana Bold
next step was to ﬁnd out whether there is a prefer-
ence between Serif and Sanserif, and Regular and Bold.
Georgia and Verdana, which were designed for screen-
display, were used for the test.
The result shows that there’s clear preference to Sanserif
over Serif in small screen environment. However, prefer-
ence for Regular or Bold varied from people to people.
For this project, I selected Verdana Bold for next phase
for the universality, because it was the preference of
the older people.

Georgia Regular Georgia Bold

��
��

��
��
��
��

��
��
��

��
��

��
��

��

��
��

��
��
��

��
��
��
Project Summary

��
��
��

��

��
��

��
��
��

��
Preliminary research

��
��
��
��

��

��
��
��
��
��

��
Process documentation

��

��

��
��
��
��

��
��
��

��
Project documentation

��
��
��


Process 4: Type Size

The next step was to study appropriate type size. Font 7 point 8.5 point 10 point
size from 6pt to 20pt was given to the users in the
steps of 0.5 pt. The users were be able go between the
different type sizes when they press the button. And I
asked them to tell me which font they fell comfortable
to read, at which point they feel like the font is too
small, and at which point they the font feels too big.
The result shows that people’s preference varies greatly
by ages, taste, and environmental situation. This result
suggest that there must be a way for people to be able
to change the font size based on their need and context
of use.

11.5 point 13 point 14.5 point


� ��

��
��
��
��

��
��
��
��
��

��
��
��
��
��

��
��
��
��
��
��
��

��
��
��
��

��
��
��
��
��

��
��
��
��

��
��
��
��
��


Process 5: Interface

The researches so far shows that the typography to
make the text on small screen most legible are
• Automatic flow for attentive reading / Manual
scroll for inattentive reading
• Horizontal
• Verdana Regular / Bold
• Typeface between 8.5~12.5

After the collecting information about the typography,
the next step was to build an interface to use them “The position of the squares now seems to have some connection
altogether. I tested 5 users, whose feedbacks are quoted with the coming text.”
"It’s too slow. And I need to see the title and name together.” “Wow! This is cool!”
below the screens on the right side. “Too many color for such a tiny screen. And the image takes up so
“I need to see the name first, before I see the title.” “I like this a lot. Totally makes sense.” much space.”
“What’s the blue line at the bottom? Ah, it’s changing. I think it “It will be interesting to see what happens when combining this “The black text still catches my eyes when it goes away. The coming
indicates amount.” feature with zoom-in and zoom-out.” one is fine.”

“This is very effective.” “The text should begin from the middle...” “Good idea. The transition startled me, though. What about making
the transition more smooth?”
“Nice transition.” “It’s too much work if I have to press 5 times down anytime I want
to stop. And “Back” or “Previous’ will make more sense than “exit” if “I don’t know where to put my eyes when the font changes.”
I go back to main menu when I press it.”
“Uhm. It’s quite easy, once I figure out.”


Visual Documentation of the Project

Text stays in the same direction when the user rotates
the device. This way, the user can read the text in the
direction they like. And when he changes the direction,
the trasition is natural and intuitive.



The list ﬂows from right to left. It gets highlighted as it
approaches to the center of the screen. As it moves out
of the screen to the left, it fades out.

The boxes in the right under corner indicates how many
pages the selected list.

As the user push the button down to read the next line
of the list, the ﬁrst list stops and the newly selected
line begins to move.



When the user wants to skip the list and quickly glance,
or look for something, he can push the button to the
right or left. Then the list will quickly move to show the
next one.

When pressing the button, the user can enter into the
selected list, and read the content.



As the user presses the button, the list makes a smooth
transition to become the title of the body part.



As the body text begins to ﬂow, the boxes in the right
side indicates which page the user is looking at now,
and how many pages does this e-mail has in total.

The user can control the speed by pushing the but-
ton downward to make it faster, or pushing the button
upward to make it faster.



The user can stop the ﬂow of the text by pressing the
button. Also, he can control the size of the text by
pushing the button to the left to decrease the size
of the text, and pushing the button the the right to
increase the size of the text.



The user can go back to the main menu any time by
pressing the Back button.



As the user pushes the button down to view the list of
the news, the list under e-mail dissapears to save the
space. When the user press the button when a list is
highlighted, the screen shows the content of the list.



The list trasits into title text to introduce the body text
following. And when the user pushes the buttom down-
ward, the screen moves to the next page of the text
with a smooth transition.

Pushing button upward will show the previos page. And
increading and decreading the text size works the same
to reading e-mail.

Processbook

More Related Content

Viewers also liked (8)

Similar to Processbook (20)

More from kimmiso (20)

Recently uploaded (20)

Processbook