Differences between revisions 99 and 100
Revision 99 as of 2011-01-16 15:29:07
Size: 34511
Editor: shoobe01
Comment:
Revision 100 as of 2011-01-16 20:20:33
Size: 34912
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 27: Line 27:
GRID AND TEMPLATES... HIERARCHY SET UP HERE>>>

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.
Developed hand in hand with the wrapper is the "grid." This is a regularized series of guides, defining the spacing and alignment of the main elements on the page. Some rules are inviolable, such as margins and some are specifically designed to offer options for special page layouts, or unexpected future changes.

From these are developed a series of templates, from which each page in the application, site or other process will be designed and built. This all encourages a consistent user and brand experience that supports content organization and layout, advertising requirements, navigation, and message display characteristics such as legibility and readability.
Line 34: Line 34:

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.

Unlike later sections, the Page patterns that will be discussed here are contained in only a single chapter:

Wrapper

The "wrapper" is a single template that is used to organize page information consistently across an entire site, application process or even the entire device OS. A consistent wrapper template lets the user learn the interface and become accustomed to finding certain information or interaction in the same place, increasing satisfaction while decreasing performance errors.

This chapter will discuss the following topics:

Digital Display Page Layout Principles

Developed hand in hand with the wrapper is the "grid." This is a regularized series of guides, defining the spacing and alignment of the main elements on the page. Some rules are inviolable, such as margins and some are specifically designed to offer options for special page layouts, or unexpected future changes.

From these are developed a series of templates, from which each page in the application, site or other process will be designed and built. This all encourages a consistent user and brand experience that supports 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

  • Mobile screen real estate is valuable. Avoid uses of banners, bars, images, and graphics that take up space without any specific use. This use may be secondary, such as communicating the hierarchy or structure, but the designer should always be able to describe the reason.
  • Lay out elements within a design hierarchy. There are optional versions, and some interactive types insist time is another component, but for simplicity it's: Position > Size > Shape > Contrast > Color > Form. The most important items are larger, higher, brighter, and so on.

  • Consider Gestalt Laws of Closure, Continuity, Figure and Ground, Proximity, Relative Size, Similarity, and Symmetry. These laws were created based on how we visually recognize and process patterns. See Part II Components for more detailed information.
  • Use consistent and simple navigation elements. People have limits to the amount of information they can store in their short term memory. Therefore, they automatically filter information that is important and stands out. Information elements that are excessively displayed and irrelevant will be ignored and overlooked.
  • Wayfinding is really rooted in real-world navigation, like getting around town, or finding the right room in a building. Kevin Lynch, an environmental psychologist, established five wayfinding elements that people use to identify their position: Paths, Edges, Nodes, Landmarks, and Districts. These same environmental elements are also referenced when navigating digital content on websites or mobile devices. Page numbers, titles, headers and footers, tabs, links and more provide a lot of help that we've inherited almost as a whole for interactive design.
  • Consider how users will view your page when plotting content. Generally, users will look for high-priority information in the upper left of the content area (Nielsen: 2010).
  • Multi-column text is not to meet some design style, but to restrict line length. And line lengths are not based on fixed sizes, or even percentages of page width, but on character count. Long lines are harder to read. Anything over about 60-65 characters (averaged) is the maximum length you want to use. Too short depends on how many long words you have.
  • Titles describe pages, elements within a page, and content sections. Use them consistently and appropriately.
  • Default text alignment is left. For right-to-left UI languages, the default text alignment is on the right.
  • Try to use bulleted information instead of a table.
  • The term false bottom, or false top, is interactive design specific, and refers to users thinking they are at the end of the content and not continuing to scroll. If text flows from one column to the next, or one page to the next, it must be designed so the relationship between them is clear. "Continued on page 86" is all but a hyperlink from the past, which has been inherited by interactive; "read the rest of this blog post" is basically the same thing.
  • Interactive systems have an additional challenge in that the page might be larger than the screen (or viewport as we often call it).

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.

  • Font – the physical character or characters that is produced and displayed.

  • Typeface- is a collection of characters - letters, numbers, symbols, punctuation marks, etc.

  • Glyph- the smallest shape of a character that still conveys its meaning.

  • Baseline- is the invisible guideline upon which the main body of text sits. Some letters may of course extend below the baseline, with descenders. Think g, j, q.

  • X-height- is the height of the main lowercase body from the baseline. It is usually defined as the size of the lower case letter x, hence the name. It excludes ascenders and descenders. For body copy in mobile and small-screen devices, the x-height must be between 65 and 80% of the cap height for readability.

  • Cap height- the distance from the baseline to the height of the capital letter (and often all ascenders). When measuring to determine 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 guide to 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. This is critical for non-English languages, to better support accent marks without excess leading or overlapping type.

  • Counters- the negative spaces formed inside characters, such as the shape in the middle of an O. Small type sizes, or heavy typefaces may cause counters to appear to fill in and look solid if they are too small, or complex.

  • Stress - adding curvature to the straight shapes of a letterform. This is generally not desired for mobile faces. At best, the small rendered size will simply blur out these subtleties. It could also make it impossible to render sharp letters at small sizes.

  • Stems- the main vertical or diagonal elements of a character.

  • Bowls- the main, generally curved area that forms an enclosed area for a letterform with a stem. Think of the round, enclosed areas on either type of the lower case a.

Letterforms and Their Parts

  • Serifs - are finishing details 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. However, in small mobile type, these may become undetectable, blurry, and decrease legibility due to the limits of screen pixel technologies.

  • San-Serifs – Are characters without serifs. For mobile type, sans-serif is often the default choice as it works well enough for all uses, at all sizes. For users that have poor vision, you may need to use san-serifs that include more visually distinct characters in certain cases.

  • Square Serifs - Square serifs use block serifs. Using these may be a good compromise, to assure the serifs display at the rendered sizes. Appropriate kerning is important to use for letter discrimination and legibility.

Letter Height and Measurements

During the letterpress era, letters were created from cast sorts, or blocks of lead, with the letter being a raised portion in the middle. 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, which could vary. This standard measurement became known as the type’s point size.

Today, type is still commonly referred to by it's size in points. Other related measures are also useful to know, and are increasingly supported b

  • Point - one point is 1/72nd of an inch or about .35 millimeters. It used to be a slightly odd number, but has been standardized on this with digital typesetting.

  • Pica- 12 points is one pica. Picas are not used to specify type, but can be used as a larger measure for any other dimensions of layout, such as spacing or column width.

  • Em - the height of the sort, which is still defined by an invisible box which contains the glyph shape. While a relative measure (it depends on the typeface and the size of the type being referenced) it is a general unit of measure, and distances and spacing can be referred to in "ems." Em-dashes are very long dashes.

  • En - simply half an em. Mostly encountered not as a unit of measure (though technically it is) but as a definition of a shorter dash. If it takes a short dash, use an en dash, not a hyphen. There are also 1/4 and 1/8th ems, used to define spaces, but they have no special names.

  • Twip - rarely used, but encountered deep in some interactive systems as a scale measure without need of decimals is the very small "Twip." This is, properly, 1/20th of a point, but sometimes has other meanings, so be careful when you encounter it.

  • Hairline - an old printing term, meaning the smallest consistently printable element, always a rule such as a line to separate columns. So, variable depending on the printing and other reproduction technology available, and not well supported with digital typesetting systems. For digital display, this has no explicit meaning. But the concept is valid, and it would be 1 pixel. Understand the limits of your technology and design to those.

Abbreviations for points and picas can be odd. When alone, "p" is for pica and "pt" is for point, but typographers have a convention (supported by all serious digital design tools still) of "picas" p "points." Such as 3p6. This may even be encountered as a way to express points without the preceeding zero, such as "p6." Type is always specified as points, such as "72pt."

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...

Spacing

Proper spacing between characters and lines of type is crucial to readability, but must often be handled automatically for interactive systems. Even well-designed ones must take into account multiple screen sizes and aspect ratios, and sometimes even user-controlled zoom. There is little room for the designer to individually kern letter pairs.

Instead, be aware of the issue, pick fonts that are well designed, and use type display tools that respect the embedded kerning tables and work well for the devices and functions you are designing.

The key spacing attributes are:

  • Kerning - the space between any two characters. Ideally, this is automatically generated and follows well-established principles laid out by the type designer, and set forth in a kerning table.

  • Tracking - is the overall inter-character spacing for a block of text. Tracking has a parent relationship to kerning, if both are defined.

  • Leading - the amount of vertical space from one baseline to the next baseline. Larger leading can often increase readability in poor conditions, such as low light or in motion, but too much can make it impossible to understand that two lines are related to each other. Larger than default leading can be used to make improperly-long long lines of text more readable, if they are otherwise unavoidable.

Alignment

Alignment of type is used as a design tool, and to make the text fit appropriately. All type is "aligned." Some is justified, but this is a subset. Available types of alignment are:

Make these actually BE aligned, not bullets, in the Word document. In here if we can figure out the controls, as well.

  • Left align - The most common alignment by far. Aside from tabbed in first lines of a paragraph, and so on, all type is aligned to a single invisible vertical guideline. The type continues to the right until no more complete words can fit, and then it breaks to the next line. The irregular right side makes it also sometimes called "flush left" and/or "ragged right." Hyphenation can be used to make the "rags" less dramatic, but interactive systems have poor or no automatic justification currently.

  • Right align - The opposite of left align, sometimes called "flush right." Used for special design purposes or to set apart small amounts of type.

  • Center - Most used for titles and other items that easily fit the space. For items longer than a line, the same rule about breaking as in left align is used, but there is no straight side, and both edges are ragged. Note that the rags are perfectly symmetrical.

  • Justify left - Only really available when optical typesetting appeared, and most successful in the digital age, this uses line by line tracking (and sometimes kerning) controls to, essentially, remove the ragged right side from the left-aligned type by stretching and squeezing the amount of text on one line to make them even, or "flush" on both sides. Hyphenation is also heavily relied on to make the lines of more even length. This does not preclude first lines of paragraphs being indented and other spacing for design purposes. How last lines are handled varies stylistically, but usually is allowed to be "ragged," with the conventional tracking.

  • Justify right - identical to justify-left, but flipped so the straight edge is on the right.

For narrow columns, texts with long words (such as technical jargon) or for systems with poor tracking control (such as those that only adjust inter-word spacing) distracting "rivers" of whitespace may appear in the text. If this is common, justification may not be suitable.

Do not use monospaced fonts and additional spaces to simulate justified paragraphs. This is highly unreadable.

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 instead of becoming filled with ink; this also reduced ink usage, a serious consideration by those who buy ink by the truckload. His typeface was not effective at larger point sizes or on stock paper because the ink traps, little gaps in the corners of the counters, would not fill in could be seen.

For its intended purpose, at small sizes, in poor paper, it was very effective. A particular typeface often must be selected, or designed, for the specific context. 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.

  • Headlines, especially large ones, will often need to be a different typeface or font than the body copy.
  • Italics have been ineffective on digital displays, but very high resolutions will allow their increasing use. Consider them carefully, and understand the difference between a simple oblique version of a font, and a true italic.
  • Type can express a hierarchy beyond just size and weight. Should your captions, or bullet lists use another size, weight, style or font?
  • As in the Bell Centennial example, legibility, readability and appropriateness are key. If making type small enough makes it illegible, maybe this can be solved with a new font, instead of larger type.
  • Show restraint. Designers mock designs with too many fonts as "ransom notes." There is no hard and fast rule on a number, though.

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.

  • ESQ Mobile Fonts by Monotype Imaging (http://www.monotypeimaging.com) are optimized for smart phone and feature phone displays in addition to other consumer electronics and embedded systems. ESQ Fonts also include WorldType, which offer wide language support on mobile devices.

  • Bitstream Font Technology by Bitstream (http://www.bitstream.com) uses Font Fusion and Panorama technologies optimized for resource-constrained mobile devices.

  • Apple Advanced Typography, or AAT, is Apple Inc's (http://developer.apple.com/fonts) advanced font rendering software. It is a set of extensions to the TrueType outline font standard, with similar smartfont features to the OpenType font format.

  • ClearType by Microsoft (http://www.microsoft.com/typography/default.mspx) has greater pixel control by turning on and off each of the colors in the pixel. This makes on-screen text more detailed and increases legibility.

  • TrueType is an outline font standard originally developed by Apple Computer in the late 1980s. TrueType is common for fonts on both the Mac OS and Microsoft Windows operating systems. TrueType was developed to ensure a high control of how fonts are displayed down to individual pixels.

Be aware of display technology. ePaper, for example, is a series of technologies used for electronic digital displays such as eReaders (note that "E-Ink" is but one of many brands, and is not a generic label). ePaper generally relies on reflected, not emitted light, by suspending particles in a liquid; a charge causes the dark particles to rise and be visible, or bi-color particles to rotate from light to dark (technologies vary) and display dark areas on a lighter surface, much like ink on paper. While the stochastic nature of the display elements, contrast and low speed of the display change make ePaper design very different, current display technologies can only drive them with conventional backplane technology, so pixels are effectively square, as with all other display types.

While ePaper is a dramatic departure, every display technology has it's unique attributes. OLED and AMOLED displays, for another example, are lit-pixel displays (without a backlight). White text on black will, unlike a backlit display, use much less power than black text on white. This may be a key design consideration for those devices.

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).
  • With age, the pupil shrinks, allowing less light to enter the eye. By the age of 80, the pupil’s reaction to dim light becomes virtually nil (Nini: 2006). Use typefaces that have more visually distinct characters in certain cases, while still maintaining a desired unity of form.
  • Older viewers with aging eyesight can benefit from typefaces that have consistent stroke widths, open counterforms, pronounced ascenders and descenders, and wider horizontal proportions, More distinct forms for each character (such as tails on the lowercase letters “t” and “j”).
  • 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. Serifs may or may not help with readability, so there is no special reason to use them. Consider using default faces that carry through the sensibility of the OS, such as Helvetica (iPhone’s default typeface). Verdana is also good, as it has a larger x-height and simpler shapes, designed specifically for on-screen readability. There are numerous mobile-specific faces as well.
  • Almost all text should be left justified, only items such as titles centered.
  • Use typefaces that have strong and open 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.
  • Consider how different pixel densities across mobile platforms affect physical sizes of elements. Using Ems to define the size of fonts in CSS may provide ease.

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.

  • Glance- users are in “Go” mode and they need quick access to frequent and/or critical tasks. Their focus is distracted and minimally on the task at hand. Users rely on shape and pattern recognition in this mode.

  • Scan- users are sorting and selecting, scrolling through lists of choices and options. They apply more focus than when glancing but not their entire focus.

  • Read- users are reviewing and comprehending information, and apply their entire focus on desired information.

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

  • For on-page elements -- such as the text of Titles, Menus, and Notifications -- use vocabulary that will be familiar to your user. Do not use internal jargon or branded phrasing only familiar to the company and it’s stakeholders.
  • Use vocabulary specific to the task at hand. General and vague titles will create confusion.
  • Strive for no help or "FAQ" documentation. With clear enough labels, you can often avoid explaining in a secondary method.

Images as Aids

  • Images can provide additional visual aids to reinforce a message’s intended meaning. When needed, use images that are clear in meaning. Do not use images that have arbitrary meanings or require learning.
  • Image meanings are socially and culturally created. Even the best icons will not be understood for some users. Using images alone without text labels may result in varying interpretations.

Truncation

  • Do not truncate text of softkey labels and menus.
  • Use word wrapping whenever for displaying long texts in paragraph.
  • Truncate text if it does not fit in a line and not supposed to display in two lines. Add three dots(...) if truncation is required. ELLIPSIS CHARACTER, NOT THREE PERIODS... AND NEVER EVER 2 OR FOUR OR FIVE PERIODS.
  • MORE TRUNCATION RULES, PICK FROM DMC SPEC MAYBE...
  • MARQUEE USE????

Line Length

I have never seen any controversy with this one. 50-60 characters is optimal. If you need longer lines, increase leading, but there are limits to how far you can go. Around 120 characters there's no point and it's just hard to scan that far. Tell me about your research if you have something else.

  • Much research has been done about what is the optimal line length for readability rate. Studies on line length report faster reading with longer lines, and point to the number of characters as the variable responsible for the differences, rather than physical line length (Dyson, 2004).
  • Users’ subjective judgments and performance do not always correlate. Studies have shown that users may prefer shorter line lengths, but may actually read faster with longer lines.
  • The optimal line length varies around a multitude of factors. These factors include: display size, line size, type size, kerning, color, margins, columns, and visual acuity.

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.

Page (last edited 2013-04-10 23:51:06 by localhost)