|
Size: 6028
Comment:
|
← Revision 101 as of 2013-04-10 23:57:01 ⇥
Size: 5689
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 1: | Line 1: |
| Components are a section or subsection of a designed space. They take up a significant portion of the screen, and may be as large as the viewport (or, depending on your point of view, larger). | {{{#!html |
| Line 3: | Line 3: |
| Components are concerned with displaying large amounts of information, or allowing the user to interact with the system is some significant, primary manner. Combining them, with the small, reusable, interactive or display '''Widgets''' (see that section) gives an unlimited number of options for design. | <div class="saleshead"> <div class="block" id="left"> <a href="http://4ourth.com/wiki/4ourth%20Mobile%20Touch%20Template"> <div class="salesLeft"> <h3>4ourth Mobile Touch Template</h3> <p>Design for people, not pixels with this handy, wallet-sized inspection and design tool, only $10. <span>Order yours now</span></p> </div> </a> </div> <div class="block" id="right"> <a href="http://4ourth.com/wiki/Mobile%20Design%20Patterns%20Poster"> <div class="salesRight"> <h3>Mobile Interaction Design Patterns Poster</h3> <p>Every pattern from the book and this wiki, plus easy-to-follow relationships, and key information on sizes for readability and touch. <span>Order now</span></p> </div> </a> </div> <div class="salespad"> </div> </div> }}} |
| Line 6: | Line 27: |
| == Understanding How Visual Information is Perceived == Our visual perception model is complex. Our human mind is like a leaky bucket. It holds plenty of information, but can easily let information slip away and spill out. If we can understand how our mind works, and it’s limits, we can create visual information displays that limit our information loss and mental load during decision making processes. Basically, information processing involves these major processes. 1. Sensation 2. Perceptual Processing 3. Memory: Sensory Memory, Short-term or working memory, and Long term Memory. 4. Intellection 5. Movement Control |
[[http://www.amazon.com/gp/product/1449394639/ref=as_li_tf_tl?ie=UTF8&tag=4ourthmobile-20&linkCode=as2&camp=217145&creative=399373&creativeASIN=1449394639|{{attachment:wiki-banner-book.png|Click here to buy from Amazon.|align="right"}}]]''Components'', as described here, are a section or subsection of a designed interactive space. They take up a significant portion of the screen and may be as large as the viewport (or larger) or, when smaller, may appear to be in front of other displayed information. |
| Line 15: | Line 29: |
| This chapter will provide you brief information on Sensation and Perceptual Processing and how understanding them can provide you a framework to designing better visual displays. | Components must display a range of information types—images, ordered data, expandable lists, and notifications. They also allow the user to interact with the system in some significant, primary manner. Combining them with small, reusable, interactive, or display widgets gives the designer an almost unlimited number of options. |
| Line 17: | Line 31: |
| Sensation is a process referring to the capture and transformation of information required for the process of perception to begin (Bailey 1996). Each of our sensors (eyes, ears, nose, skin, mouth) collects information, or stimuli, uniquely but all will transform the stimulus energy into a form the brain can process. | The components that we will discuss in Part II are subdivided into the following chapters: * '''Chapter 2, [[Display of Information]]''' * '''Chapter 3, [[Control and Confirmation]]''' * '''Chapter 4, [[Revealing More Information]]''' |
| Line 19: | Line 36: |
| All of these senses respond selectively to certain types of stimuli. There are four types of stimuli our bodies can sense: Electromagnetic, Mechanical, Thermal, and Chemical. Each of these stimuli can be collected through different senses. Electromagnetic stimuli can be collected through vision. Mechanical stimuli can be collected by hearing, touch, pain, vestibular, and kinesthetic. Thermal by cold and warmth. Chemical by taste and smell (Ellingstad, 1972). | == Types of Components == |
| Line 21: | Line 38: |
| Our sensory processing has limits. For example, we can only see wavelengths between 400 and 700 nanometers. Our thermal sensors respond only to infrared wavelengths. Our skin temperature is about 91.4 degrees F and stimuli at this temperature do not cause a noticeable thermal sensation. However, below 60 degrees F, the skin will transmit a cold feeling and above 105 degrees, the skin will transmit a hot feeling. | === Components for Display of Information === When you display information you need to reflect the user’s mental model and mimic the way the user organizes and processes knowledge. Information displayed on mobile user interfaces that ignores this principle causes the user to become lost, confused, frustrated, and unwilling to keep using your product. Patterns found in [[Display of Information|Chapter 2]], such as [[Vertical List]] and [[Infinite List]], provide simple, well-understood solutions for displaying lots of information in a structured and contained manner which doesn’t overtax the user’s mental load. These patterns also provide solutions to arranging content where screen real estate is so valuable that every pixel counts. To prevent that, this chapter will explain research-based frameworks, tactical examples, and descriptive mobile patterns to use. |
| Line 23: | Line 41: |
| Our sense of touch (pressure) is experienced when an object contacts our skin. The skin within certain locations, can identify where the object is, its size and shape, and its movement. (**talk in detail about this in chapter of Navigation and Gesturing?**) For more information on sensory limits, refer to Chapter 3: Sensing and Responding (Bailey, 1996). | === Components for Control and Confirmation === Humans make mistakes. As designers, we can create effective interfaces that can prevent costly human error resulting in loss of user-entered data. When costly human error is possible, we should create modal constraints and decision points to prevent errors before they happen. Patterns found in [[Control and Confirmation|Chapter 3]], such as [[Confirmation]] and [[Exit Guard]], provide solutions that help prevent human error which can lead to the loss of important data the user has tediously typed on his tiny mobile device. You should always consider the context of the user’s goals and current tasks when incorporating confirmation controls. But if you overuse these constraints and decision points during low-risk situations, you will frustrate the user by increasing his processing time and mental load, and delaying or stopping his task. |
| Line 25: | Line 44: |
| This chapter details patterns on Displaying information. Therefore, it is beneficial to discuss in greater detail the sense of vision, how it works, and it’s limits. The human eye. Many people use the analogy that our eye works similar to a camera. Both eye and camera have a lens, an aperture (pupil), and film (retina). However, the similarity stops there. Because the image that is shown on the back of our retina does not resemble our perception of it. |
=== Components that Reveal More Information === When we design to reveal more information, we need to be conscious of the limitations of the devices, networks, and our human abilities. Screen size will limit the amount of information that can be displayed simultaneously. A device’s OS, and the framework within which you have to work, will limit the types of interactions available. Hardware constrains the viewport size, input methods, processing speed, and loading times. Our memory limits cause us to filter, store, and process only relevant information over a period of time. You can use patterns such as [[Windowshade]] and [[Pop-Up]] to work around these limitations. They provide solutions you can use to reveal additional information when the user chooses, without having to saturate the screen full of content. |
| Line 30: | Line 48: |
| == How Does the Eye Work? == The eye is an organ responsible for vision. It first collects, filters, and focuses light. Our eyes can only experience a narrow band of radiation in the electromagnetic spectrum. |
== Getting Started == You now have a general sense of what components are and how they relate to information display. The component-related chapters will provide specific information on theory and tactics, and illustrate examples of appropriate design patterns you can apply to specific situations. And as always, remember to read the antipatterns, to make sure you don’t misuse or overuse a pattern. |
| Line 33: | Line 51: |
| The narrow range is approximately 400 nanometers (where we can perceive the violet color) to about 700 nanometers (where red is perceived). The focused beam of light is then projected onto the back part of our retina where it contacts photoreceptors, known as rods and cones. These receptors are light sensitive. The cones are used for seeing when there is bright light and are color sensitive. The rods are sensitive to dim lighting and are not color sensitive. These receptors convert light into electro-chemical signals which travel along the optic nerve to the brain for processing. | |
| Line 35: | Line 52: |
| The eye is sensitive to stimuli in many ways at any moment, including the size of stimulus, its brightness and contrast, and the part of the retina that is stimulated. | |
| Line 37: | Line 53: |
| As a designer, it’s important to understand how these stimuli can affect and influence our design decisions.******* The size of the stimulus is measured with visual angle. This is the angle formed at the eye by the viewed object. The visual angle can be calculated using the following formula: Visual Angle (minutes of arc) = (3438)(length of the object perpendicular to the line of sight)/distance from the front of the eye to the object. Visual angle is typically measured in degrees of arc where one degree=60’(minutes of arc), and 1 minute of arc=60”(seconds of arc). | |
| Line 39: | Line 54: |
| With an understanding of visual angle, we can determine the appropriate size of visual elements including character size viewed at specific distances. According to Human Factors Society (1988), the following visual angles are recommended for reading tasks: When reading speed is important, the minimum visual angle should not be less than 16 minutes of arc and not greater than 24 minutes of arc. When reading speed is not important, the visual angle can be as small as 10 minutes of arc. Characters should never be less than 10 minutes of arc or greater than 45 minutes of arc. So, let’s assume I’m designing a text that is to be read quickly on a mobile device with a viewing distance of 30 centimeters(11.8 inches). The equation would look like this: Length= 16 minutes of arc(30)/3438. The smallest acceptable character height would then = .14cm. or about 10 points. Now, other factors that need to be addressed when designing character size on mobile is 1: The distance changes all of the time, and 2: Glare and wobble affects legibility. This will be further addressed in another chapter******* | ------- Next: '''[[Display of Information]]''' ------- = Discuss & Add = Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here. == Examples == If you want to add examples (and we occasionally do also) add them here. == Make a new section == Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account. |
Components, as described here, are a section or subsection of a designed interactive space. They take up a significant portion of the screen and may be as large as the viewport (or larger) or, when smaller, may appear to be in front of other displayed information.
Components must display a range of information types—images, ordered data, expandable lists, and notifications. They also allow the user to interact with the system in some significant, primary manner. Combining them with small, reusable, interactive, or display widgets gives the designer an almost unlimited number of options.
The components that we will discuss in Part II are subdivided into the following chapters:
Chapter 2, Display of Information
Chapter 3, Control and Confirmation
Chapter 4, Revealing More Information
Types of Components
Components for Display of Information
When you display information you need to reflect the user’s mental model and mimic the way the user organizes and processes knowledge. Information displayed on mobile user interfaces that ignores this principle causes the user to become lost, confused, frustrated, and unwilling to keep using your product. Patterns found in Chapter 2, such as Vertical List and Infinite List, provide simple, well-understood solutions for displaying lots of information in a structured and contained manner which doesn’t overtax the user’s mental load. These patterns also provide solutions to arranging content where screen real estate is so valuable that every pixel counts. To prevent that, this chapter will explain research-based frameworks, tactical examples, and descriptive mobile patterns to use.
Components for Control and Confirmation
Humans make mistakes. As designers, we can create effective interfaces that can prevent costly human error resulting in loss of user-entered data. When costly human error is possible, we should create modal constraints and decision points to prevent errors before they happen. Patterns found in Chapter 3, such as Confirmation and Exit Guard, provide solutions that help prevent human error which can lead to the loss of important data the user has tediously typed on his tiny mobile device. You should always consider the context of the user’s goals and current tasks when incorporating confirmation controls. But if you overuse these constraints and decision points during low-risk situations, you will frustrate the user by increasing his processing time and mental load, and delaying or stopping his task.
Components that Reveal More Information
When we design to reveal more information, we need to be conscious of the limitations of the devices, networks, and our human abilities. Screen size will limit the amount of information that can be displayed simultaneously. A device’s OS, and the framework within which you have to work, will limit the types of interactions available. Hardware constrains the viewport size, input methods, processing speed, and loading times. Our memory limits cause us to filter, store, and process only relevant information over a period of time. You can use patterns such as Windowshade and Pop-Up to work around these limitations. They provide solutions you can use to reveal additional information when the user chooses, without having to saturate the screen full of content.
Getting Started
You now have a general sense of what components are and how they relate to information display. The component-related chapters will provide specific information on theory and tactics, and illustrate examples of appropriate design patterns you can apply to specific situations. And as always, remember to read the antipatterns, to make sure you don’t misuse or overuse a pattern.
Next: Display of Information
Discuss & Add
Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here.
Examples
If you want to add examples (and we occasionally do also) add them here.
Make a new section
Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.