A Page is the area that occupies the entire viewport of the mobile screen during its current state. On a page, information is organized, displayed, and interacted with on mobile devices anytime and in some cases anywhere. Therefore, design principles must be considered to ensure the usability standards: effectiveness, efficiency, and satisfaction.
Effectiveness: The extent to which a goal, objective, or task is achieved.
Efficiency: The level of effort required to accomplish objectives, goals, or tasks.
Satisfaction: The level of comfort a user feels during or after achieving those objectives, goals, or tasks.
Through our prior knowledge, past experiences, and cultural norms, our mental models of how we are expected to interact with objects, are formed.
For example, when we pick up a book to read, we expect it to follow certain rules. The book will have an architecture from beginning to its end. It will organize its content using titles, chapters, headings, paragraphs, sentences, words, pictures, captions, etc. In our culture, we expect to read from left to right, top to bottom.
Information on mobile devices, follow the same rules. However, the mobile user’s needs, their context of use, and mobile device technology characteristics add more rules to consider.
- Mobile users want information that is quickly accessed. Talk about environmental context.
- Mobile device screen real estate is valuable. Talk about range of screen sizes. And this information can be read in other parts to the book.
- Information must be easily detected, discriminated, and recognized.
Challenges of Mobile Typography
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.
Technology
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.
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.
Usability
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 type elements must be immediately findable, readable and comprehendible.
This is different from the technical challenge in that it is inherent in the mobile device. Users will always interact with their devices in this manner, so it must always be addressed, regardless of the technical implementation.
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/m2), footlambert (ftL), mililambert (mL), and Nit (nt). Riggs (1971) notes that in starlight (luminance of .0003 cd/m2) 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/m2. If you view a white piece of paper in an office light , you will probably measure a value of only 50 cd/m2. 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
Conspicuity, while involving legibility, 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.
Spatial coding (grouping)
Shape coding
Color coding
Color can be used both to classify and emphasize information displayed on a screen. When using color for these things, you need to understand that we have limits in our processing abilities that affect our signal detection.
In 18xx, A German psychologist Ewald Hering theorized that there are six elementary colors that are arranged perceptually as opponent pairs along three axes. These pairs are: black-white, red-green, and yellow-blue. Each color either is positive (excitatory) or negative (inhibitor). These opponent colors are never perceived at the same time because the visual system cannot be simultaneously excited and inhibited.
Our modern color theory stems off of this. Today, we know that the input from the cones is processed intro three distinct channels: The luminance channel (black-white) is based on input from all of the cones. We have two chromatic channels. The red-green channel is based on the difference of long and middle-wavelength cone signals. The yellow-blue channel is based on the difference between the short-wavelength cons and the sum of the other two (Ware, 2000).
In 1986, Post and Green created an experiment to test how subjects could effectively name 210 colors on a computer screen. The results of that test that are worth noting are:
- The pure monitor red was actually named orange most of the time.
- A true red color required the addition of a blue monitor primary.
- Eight colors out of the 210 were consistently named, suggesting that only a small number of colors should be used to label categories.
Color for Labeling, or more technically – nominal information coding, is used to because color can be an effective way to make objects easy to remember and visually classify. Perceptual factors to be considered in choosing a set of color labels:
Distinctness:
Unique hues: Based on the Opponent Theory, they are: Red, Green, Yellow, Blue, Black, and White.
Contrast with background: Our eyes are edge detectors. When we have objects that must be in front of a variety of backgrounds, it may be beneficial to have a thin white or black border around the color-coded object. Consider the reasons why alert street signs, have the border, too.
Color blindness: About 7% of males and only 0.5% of females are color blind in some way. The most common is being red-green colorblind.
Number: We are limited in the number of color-codes we can rapidly perceive. Studies recommend use between five and ten codes.
Field Size: Object size affects how you should color code. Small color-coded objects less than half a degree of visual angle and in the yellow-blue direction range should not be used to avoid the small-field colorblindness.
Conventions: When using color-naming conventions, be cautious of cultural differences. Common conventions are: red =hot, danger, blue=cold, green=life, environmental, go. In China, red =life, good fortune, green =death.
Temporal coding
Size coding
Pictograms, maps, images
Attention/target value
Conspicuity Guidelines For Mobile Devices
- Use colors with high contrast between the text and the background. Optimal legibility requires black text on a white background, and White text on black background is effective as well.
- For text contrast, the International Standards Organization (ISO 9241, part 3) recommends a minimum of 3:1 luminance ratio of text and background. Though a ratio of 10:1 is preferred (Ware, 2000).
- When having text on background, purely chromatic differences are not suitable for displaying any kind of fine detail. You must have a considerable luminance contrast in addition to color contrast.
- When large areas of color-coding are needed, like with map regions, use colors with low saturation.
- Small objects that are color-coded should use high-saturation.
- The majority of colorblind people cannot distinguish colors that differ in the red-green direction.
- Recommended colors for color-coding: 1. Red, 2. Green, 3. Yellow, 4. Blue, 5. Black, 6. White, 7. Pink, 8. Cyan, 9. Gray, 10. Orange, 11. Brown, 12. Purple (Ware, 2000).
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.