|
Size: 3924
Comment:
|
Size: 4998
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 1: | Line 1: |
| 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. |
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. |
| Line 6: | Line 3: |
| == Mobile Display Elements == === 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 * Upper/lower case * Letter height * X-height * Stroke width/weight * Letter/line spacing * Contrast * Illumination/luminance: |
The Page that will be discussed here is subdivided into the following chapter: * '''Chapter 2, [[Wrapper]]''' == 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. |
| Line 18: | Line 8: |
| This chapter will discuss the following topics: | |
| Line 19: | Line 10: |
| Brightness refers to our subjective perception of how bright an object is. | * Templates. * The Concept of a Wrapper. * Context is Key. * Scenario: Yearbook Application. * Patterns for Wrapper: ''[[Scroll]], [[Annunciator Row]], [[Notifications]], [[Titles]], [[Revealable Menu]], [[Fixed Menu]], [[Home & Idle Screens]], [[Lock Screen]], [[Interstitial Screen]], and [[Advertising]]''. |
| Line 21: | Line 16: |
| 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). 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). |
== 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. |
| Line 24: | Line 19: |
| 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). | 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! |
| Line 26: | Line 21: |
| '''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. | Furthermore, using page layouts wisely, allows you to organize and place content effectively on valuable screen real estate where every pixel is important. |
| Line 28: | Line 23: |
| * Design presentation: * Spatial coding (grouping) * Shape coding * Color coding * Temporal coding * Size coding * Pictograms, maps, images * Attention/target value |
== Page Layout Guidelines for Mobile Users == * Mobile screen real estate is valuable. Avoid uses of pointless banners, bars, useless images, and graphics that take up space. * Lay out elements with 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. |
| Line 37: | Line 30: |
| '''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. |
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. * ANNUNCIATOR ROWS * 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). * PARALLAX |
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:
Chapter 2, Wrapper
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:
- Templates.
- The Concept of a Wrapper.
- Context is Key.
- Scenario: Yearbook Application.
Patterns for Wrapper: Scroll, Annunciator Row, Notifications, Titles, Revealable Menu, Fixed Menu, Home & Idle Screens, Lock Screen, Interstitial Screen, and Advertising.
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
- Mobile screen real estate is valuable. Avoid uses of pointless banners, bars, useless images, and graphics that take up space.
Lay out elements with 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.
- ANNUNCIATOR ROWS
- 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).
- PARALLAX