A Page is the area that occupies the entire viewport of the screen during its current state. It organizes information while considering:

• Display technology.
• Navigation structures and interactions.
• Message display characteristics.

Message Display Characteristics

Legibility

Refers to the ease with which the elements (letters, numbers, symbols, etc.) can be detected and discriminated from one another.

Font design

Font vs. Typeface

Typeface is a collection of characters-letters, numbers, symbols, punctuation marks, etc. In contrast, a font is a physical thing, the description of the typeface-in computer code, photographic film, or metal-used to image the type (Felici: 2003). When choosing the appropriate display font, we must understand the difference between anti-aliased and bitmapped letters because these affect legibility.

Ant-aliasing renders some of 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.

Baselines and Measurements

• Baseline- is the axis where the main body of text sits. Some letters may slightly extend below the baseline

• X-height- is the height of the main lowercase body from the baseline. It is the size of the lower case letter x. It excludes ascenders and descenders. For Mobile and Small-Screen Devices, the x-height must be between 65 and 80% of the cap height.

• Cap height- is the distance from the baseline to the height of the capital letter and the ascender. When figuring a font’s point size, the cap height is used.

• Descender Line-The descender is the part of a letter that extends below the baseline. The descender line is the axis in which all descenders within the font family rest against. For Mobile and Small-Screen Devices, do not use excessive descenders – avoid exceeding 15 - 20% of the cap-height, to avoid excessive leading.

• Ascender- An ascender is part of the letter that extends above the x-height. For Mobile and Small-Screen Devices, do not have ascenders above the cap height – critical for non-English languages

Letterforms and their parts

• Serifs - are finishing flourishes at the ends of a character’s main stroke. They extend outward. They are not solely decorative. They also help with our ability to discriminate other characters that make up lines of text. Serif faces are more readable for large blocks of type than sans serif faces. If your application is one filled with news articles, or something similar, consider if a serif face might work.

• San-Serifs - For mobile type, sans-serif is often the default choice as it works well enough for all uses, at all sizes.

• Square Serifs - Square serifs may be a good compromise, to assure the serifs display at the rendered sizes.

Letter height

Measure, Point Size, and Leading

Measure refers to the width of the column that type is set in.

Letter Height:

Points-One point equals 1/72 of an inch or .35 milimeters.

Pica-12 points equal one pica. A pica is the unit usually used to measure the width of columns.

Em-During the letterpressing era, letters were created from cast sorts. In metal type, the height from the top to the bottom of the metal sort was known as its point size. In digital type, the Em

Letter Width: Letter Width is known as set width. Set width measures the width of the letter and a small cushion. During the 18th century, standardizing the measuring of type began. When

Upper/lower case

=== Stroke width/weight ===

Letter/line spacing

Contrast

Illumination/luminance: Brightness refers to our subjective perception of how bright an object is.

Luminance is the measure of light an object gives emits from its surface. Luminance is measured in different units such as candela (cd/m^{2), footlambert (ftL), mililambert (mL), and Nit (nt). Riggs (1971) notes that in starlight (luminance of .0003 cd/m}2) we can see the white pages of a book but not the writing on them. The recommended luminance standard for measuring acuity is 85 cd/m^2 (Olzak and Thomas, 1996).

Remember that Luminance and Brightness are unrelated. For example, if you lay out a piece of black paper in full sunlight on a bright day, you may measure a value of 1000 cd/m^{2. If you view a white piece of paper in an office light , you will probably measure a value of only 50 cd/m}2. Thus, a black object on a bright day outside may reflect 20 times more light than white paper in the office (Ware, 2000).

Legibility Guidelines for Mobile Devices

• Avoid using all caps for text. Users read paragraphs in all caps about 10% slower than mixed cases. (Nielsen, 2000).
• Try and use plain-color backgrounds with text because graphical or pattern backgrounds interfere with the eye’s ability to discriminate the difference.
• Sans-serif is often the default choice as it works well enough for all uses, at all sizes. Consider using Helvetica (iPhone’s default typeface), Verdana is also good while it has a larger x-height and simpler curves than Helvetica.
• Almost all text should be left justified.
• Strong counters (or "counter-forms") – often, using squared-off shapes for small counters is a good idea
• Use typefaces with un-stressed forms – straight, even-width lines.

Conspicuity

In addition to involving legibility, it also implies other display characteristics. It is nicely summed up by the notion of signal/noise ratio–the ease with which a given piece of information is detectable in the presence of other competing information.

• Design presentation:
• Spatial coding (grouping)
• Shape coding
• Color coding
• Temporal coding
• Size coding
• Pictograms, maps, images
• Attention/target value

Readability

In the display of messages we can affect another property of the message– its readability–by the actual choice of words, the sentence structure and the appropriate language(s).

• Communication
• Language
• Words
• Syntax
• Reading goals: Skim, scan, search, comprehension, evaluation

Pleasurability

(branding, compatibility, appropriateness, experience) Good user experience, consistent with the visual character of the surrounding architecture, appropriate ‘style’ to the activity, emotional and aesthetic benefits.

• Holistic viewpoint of ‘user’
• Based-on individual users’ interests, experiences, and activities
• User relevance and participation
• Text vs. subtext

Comprehension: Understanding the meaning of a given display so that an associated consequent course of action is both apparent and possible. Comprehension involves recognition as a necessary but not sufficient condition.

User Characteristics

Looking and Finding: Detection and Discrimination. Detection: Determining the presence of an object, target or symbol.

Descrimination: Determining that differences exists; discriminating between target objects and non-target objects is determining differences on the basis of which identifications can be made.

Identifying: Identification: Attributing a name or meaning to some object target or signal. Discrimination and identification are often parallel processes, but in psychological terms they make different demands of the presented information.

Recognizing: Recognition: Determining whether objects in the display have been seen before. Identification often accompanies recognition.