A Page is the area that occupies the entire viewport of the mobile screen during its current state. Based on cultural norms of reading conventions and how people process information, we must design and layout page information accordingly. We also want to create information that is easily accessed, and easy to locate. Our users are not stationary, or focused entirely on the screen. They’re everywhere and they want information quickly and easy to manipulate.

The Page that will be discussed here is subdivided into the following chapter:

Wrapper

A wrapper is a template that is used to organize page information consistently across the OS. Using a wrapper allows information to be organized hierarchically on a page. This organization will relate to the user’s mental model of page structure to quickly increase learnability and satisfaction while decreasing performance errors.

This chapter will discuss the following topics:

Digital Display Page Layout Principles

Using page layouts can provide a consistent user and brand experience that support content organization and layout, advertising requirements, navigation, and message display characteristics such as legibility and readability.

Mobile users have specific tasks and goals. They require the information to be quickly located and effectively organized. Therefore, the page layouts need to reflect the mental models and schemas understood by the users. If these are ignored, users will become frustrated, unsatisfied with their experience, create miscues and errors, and might even give up!

Furthermore, using page layouts wisely, allows you to organize and place content effectively on valuable screen real estate where every pixel is important.

Page Layout Guidelines for Mobile Users

Message Display Characteristics and Legibility

Mobiles are used differently from desktops, and even most print use of type. They are closest, perhaps, to signage in that they must be comprehended by all user populations, under the broadest possible range of environmental conditions (e.g. poor lighting) and at a glance. The typical mobile user is working with the device in a highly interruptible manner, glancing at the screen for much of their interaction. The message display is competing with millions of other stimuli in our visual field. Therefore, they must be designed to stand out appropriately beginning with legibility.

A Brief Look Into Visual Perception

Legibility refers to the ease with which the elements, e. g. letters, numbers, symbols can be immediately detected, discriminated, identified from each other.

The information that is visually collected to achieve legibility, begins early in our visually perception process. In a parallel, bottom-up, top-down process, neural activity rides two information-driven waves concurrently. The first wave occurs within the bottom-up process. Information collected by the retinal image passes to the back of our brain along the optic nerve in a series of steps that begin pattern recognition.

Step 1. Features in our visual field, like size, orientation, color, and direction are processed by specific neurons. Millions of these features are processed and used to construct patterns.

Step 2. Patterns are formed from processed features depending on our attention demands. Here, visual space is divided up by color and texture. Feature chains become connected and form contours. Many of these cognitive pattern recognitions are described through Gestalt Principles.

Step 3. Objects most relevant to our current task, are formed after the pattern-processing stages filters them. These visually objects are stored in our working memory, which is limited in its capacity. Our working memory holds only about three visual objects in attention at one time. These visual objects are linked to other various kinds of information that we have previously stored.

While the first bottom-up wave is processing patterns, the second top-down wave is processing which information is relevant to us at that moment and is driven by a goal. In addition, we associate actions that are then primed for our behaviors. So through a series of associated visual and nonvisual information and action priming, we can perceive the complex world around us. For more information about how we perceive visual information, read Visual Thinking for Design.

Typographical Features, Baselines, and Measurements

When choosing the appropriate mobile type we must understand that each typeface has unique characteristics that affects its legibility across device screen technologies, reading distances, and screen sizes.

In order to create effective message displays that are legible for mobile displays, understanding the basic elements of type is important. The information that follows will assist you when choosing the appropriate typeface for your design.

Letterforms and Their Parts

Letter Height

During the letterpressing era of movable type, letters were created from cast sorts. These sorts were arranged together to form words and sentences. Each metal sort was designed to have a specific measurement. The letter’s height was measured from the top to the bottom of the sort, not the actual letter. This standard measurement became known as the type’s point size. On the sort, letter heights varied across typefaces, even though they may have shared the same sort height. Therefore, different typefaces may have the same point size, but the actual letter height may differ.

Today, we commonly use the point size system. We have also standardized type using picas, and ems.

Letter Width

Letter Width is known as set width. Set width measures the width of the letter and a small cushion.

NEED MORE --- NONE OF THIS... BRIEFLY DISCUSS FIXED VS. VARIABLE, PROS AND MOSTLY CONS, BRIEF MENTION THERE ARE REGULARIZED-WIDTH FACES THAT DON'T CHANGE WHEN YOU GO BOLD, BUT ALMOST ALL DO SO BE CAREFUL TO LEAVE ROOM FOR BIGGER BOLDS.

NOTE ABOUT ITALICS EXCEEDING THE LETTER SPACE, SO FALLING OFF DISPLAY AREA IN SOME CASES???

AND ***DO NOT*** STRETCH OR COMPRESS TYPE TO MAKE IT FIT, EVEN IF YOU HAVE THE TECHNICAL CAPABILITY. FIND A NARROW FACE OR JUST LIVE WITH IT...

Letter Spacing

Alignment

Alignment of type is used as a design tool, and to make the text fit appropriately. And "alignment" is the right word. We use left-align, right-align, and center.

Justified

Justification is a single entity with type adjusted to be straight on both the left and right sides. This is more readable on small columns, but less readable on longer columns, where "ragged right" or left-aligned type is better. When you justify type there will be changes to the kerning, between words and between letters, and if this is poorly done then the type becomes difficult to read. Fix this with wider columns, or tweaking the hyphenation rules.

Typefaces for Screen Display

Back in 1975, AT&T wanted a new typeface to commemorate the company’s 100th anniversary. AT&T indicated that the requirements for the new typeface must fit more characters per line without reducing legibility to reduce paper consumption, reduce the need for abbreviations and two-line entries, increase legibility at the smaller point sizes, and be used for the phonebook directory. Matthew Carter, a type designer, got the job and created the new typeface Bell Centennial.

Carter’s new sans-serif typeface was more condensed, increased the x-height, and used more space in the open counters and bowls. Aware of the printing limitations, he used letters with deep ink traps, which allowed for the counterforms to be open making them more legible at smaller point sizes. His typeface was not effective at larger point sizes or on stock paper because the ink traps never filled completely. However, for its intended purpose, it was very effective in the phonebook directory.

This example explains that a particular typeface can be context specific. In 1975, available technology, the medium, and users were considered. As designers and developers today, these considerations remain throughout the design process. You need to understand that when choosing a typeface, context of use is key.

Challenges of Mobile Typography Today

Computer-based type, especially for internet display, has always been a challenge due to display technologies (resolution), availability of type, color and contrast reproduction variations and size variations. Mobile devices take these issues, magnify them, and add on a spate of unique environmental and use-pattern issues. The primary barrier is of technology, and the primary concern is of readability within the user's context.

While this challenge will slowly dissolve, it will always be present to some degree. Inexpensive devices, specialist devices (youth, elderly and ruggedized) and emerging markets needs, seem to indicate these issues will persist for another decade at least.

Technology Concerns

While some devices are beginning to allow effectively unlimited type selection, support vector glyphs, and have large amount of storage and running memory, most mobile devices are still resource and technology constrained. General issues of storage on the device, running memory, download times and cost of network access, limit availability of type for mobile application design. As almost all devices require raster (bitmap) faces, each size is loaded as a complete, different typeface. Most products end up with the device's default type, or with a very limited set of choices for their application.

Digital Fonts Today

Digital fonts used today are constrained by the technology display capabilities and the device OS. Most current mobile phones use anti-aliased fonts. Because of the display’s square pixel layout, anti-aliasing is used to render some of the pixels shades of gray along the edges of the letter. This helps users to perceive the letter as being smooth. Anti-aliased text is more legible when using larger font sizes for titles and headings; however, using anti-aliasing text in small font sizes tends to create a blurry image. Consider the mobile display’s capabilities when choosing the font size and font family because they might not be available for that mobile device.

Companies such as Microsoft, Bitstream, Monotype, and E-Ink have introduced their own type of font display technologies to improve readability for such devices. Some of these font technologies are constrained to a specific fixed arrangement of pixel display technology. ClearType, Microsoft’s subpixel rendering technology, is orientation specific and will not work on devices whose display orientation can change. However, ClearType works very well on LCD displays because of the fixed pixel layout. On some OS, there may be an "automatic" font setting which to detect if the display is an LCD or CRT to turn on or off sub-pixel rendering.

Font Rendering Technologies

The following are examples of some of the available rendering technologies used to improve type legibility on digital displays.

Legibility Guidelines for Mobile Devices

Message Display Readability

As we have discussed above, legibility is determined by how we can detect, discriminate and identify visual elements. But legibility is not the end to this process of designing effective mobile displays. We must make sure they are readable. When readability is achieved, the user can then evaluate and comprehend the meaning of the display.

Readability is based on the ease and understanding of text. It is determined by whether objects in the display have been seen before. Thus, readability is affected by the message’s choice of words, the sentence structure, appropriate language, and the reading goals of the user (Easterby, 1984).

Reading Modes

In September 2004 Punchcut worked with QUALCOMM to develop a typographic strategy with respect to their custom user interfaces within its mobile operating system and applications. In that study, Punchcut determined three modes of reading and understanding behavior that occur within the mobile context (Benson, 2006).

These modes consider the duration and size of focus for textual attention.

Language Requires Context

These three modes are based within the context of the user’s goals. Just like a user’s goals require context, so does the meaning of language derived from the message’s choice of words. Without context, the intended message displays meaning may become misunderstood.

In our everyday context, we must derive meaning from other’s intentions, utterances, eye movements, prosody, body language, facial expressions, and changes in lexicon (McGee, 2001). When context uses more individual pieces, the less ambiguity we will encounter in the messages meaning.

In mobile devices today, we may not have all of those contextual aids available to help us derive meaning. The mobile user is presented only with the aids the device’s OS, technology, or the designer’s intention have provided.

Readability Guidelines for Message Displays

The following guidelines and suggestions should be considered when designing readable mobile displays.

Vocabulary

Images as Aids

Truncation

Line Length

Getting Started

You now have a general understanding that a page is an area that occupies the viewport of a mobile display. Pages can use a wrapper template to organize information consistently across the OS that will allow for satisfying user experience. When making design decisions, everything in this page section must be considered, even if you don't have control (not building an OS). You must know what it might do to your design. Consider your user’s goals and cognitive abilities, page layout guidelines, and the importance of legibility and readability in message displays.

The Wrapper chapter in this part will provide specific information on theory, tactics, and illustrate examples of appropriate design patterns. And always remember to read the anti-patterns, to make sure you don't misuse or over-use a pattern.