|
Size: 1370
Comment:
|
Size: 3863
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 6: | Line 6: |
| Text is accurate, and precise, for listing or otherwise describing people. However, they can be slow to read, and this is often undesirable in mobile context - scanability is often a key need. | Text is accurate, and precise, for listing or otherwise describing people. However, text labels can be slow to read, and this is often undesirable in mobile context - scanability is often a key need. |
| Line 10: | Line 10: |
| This pattern is addressed separately because the Avatar image represents a real person, not a concept or action, and Because in many casesthe image itself cannot be controlled by designs or the user of the device. | This pattern is addressed separately from the Icon or Indicator because the Avatar image represents a real person, not a concept or action, and Because in many casesthe image itself cannot be controlled by designs or the user of the device. |
| Line 14: | Line 14: |
| Photo | The two basic types of avatar are unusual in that they are by individual use,and both an -- and very often do -- appear in the same interface. The first, and most obvious, is any custom representation. This may be a photo, or a personalized icon or other graphic. |
| Line 16: | Line 16: |
| Icon | When no custom image is available, astir much first-time use, a generic icon, or set of icons, is often used instead, as a placeholder. Whenever possible, avoid truly generic icons. |
| Line 18: | Line 18: |
| Both my, and often are, used in the same interface. | As described in the Thumbnail List pattern, irrelevant images may be simply left out. The specifics of your interface will determine it this is a workable solution. During design, consider the likelihood of most or all items being populated with image content, and make decisions about use of Avatars accordingly. |
| Line 22: | Line 22: |
| can be clickable or not. follow the context, ant other patterns. If part of a selectable line item, do... if multiple items one the line, enh... make the action clear.... | Avatar images may be selectable or not. They must follow the general paradigm of the context in which they are used. If used in a line item, such as an address book, they my be selectable as an extension of the name, as a part of the whole line, or not at all. Always consider how clear the interaction which will follow selection of an Avatar can be communicated. If it is not perfectly clear, then add additional information, such as overlay labels DIDN'T WE DESCRIBE THIS SOMEWHERE I CAN REFERENCE? Otherwise, consider simply making the Avatar image display only. When uses alone, as the only reference to a user -- such as in threaded messaging or an SMS conversation -- the Avatar should always be selectable, and generally either display the user information, or offer option for interaction. |
| Line 26: | Line 30: |
| see Icon. .. label always, but usual by this is built in, so not a label so much as this is an explanatory icon For the text... | Since the image itself often cannot be created, the designer must be careful when selecting borders, background, sizes and aspect ratios. |
| Line 28: | Line 32: |
| Crop, Ctr. - No control our the photo, so... | Avatar images are almost always square, to account for both landscape and portrait orientation source photos, without masking (black bars) on port of the image. or inconsistencies in the display and alignment of page items. Generally, the long sides are cropped oft, and the short side is fitted to the image dimensions. Occasionally, it may be useful to crop the outer 10 or 20% of the whole image, to assure a recognizable face is in the image area. this depends more on the rendered size than the quality of source; smaller in eyes my to well with additional cropping. Though some Avatar selection systems allow manual image cropping, this --as well as photographing within the mobile device to generate images -- is not writhin the scope of discussion here. When practical, use Avatars alongside text labels. When selectable, use the existing paradigms, discussed undr Link, to denote an image is selectable. When no supporting label text is associated with an Avatar image, consider use of the Tooltip, when practical and supported. |
| Line 32: | Line 44: |
| Avoid using too many generic icons, or only have one as a placeholder, so they repeat and carry no meaning. | Avoid using too many generic icons, or only have one as a placeholder. Always keep in mind the value of the Avatar, and do not fill with arbitrary content to populate a flawed design. |
Problem
A glanceable representation of a person should be provided, for use in various contact-listing contexts.
Solution
Text is accurate, and precise, for listing or otherwise describing people. However, text labels can be slow to read, and this is often undesirable in mobile context - scanability is often a key need.
Much like the Indicator pattern, an Avatar is an iconic image used to represent or support the label for anindividual, such as a contact in the address book.
This pattern is addressed separately from the Icon or Indicator because the Avatar image represents a real person, not a concept or action, and Because in many casesthe image itself cannot be controlled by designs or the user of the device.
Variations
The two basic types of avatar are unusual in that they are by individual use,and both an -- and very often do -- appear in the same interface. The first, and most obvious, is any custom representation. This may be a photo, or a personalized icon or other graphic.
When no custom image is available, astir much first-time use, a generic icon, or set of icons, is often used instead, as a placeholder. Whenever possible, avoid truly generic icons.
As described in the Thumbnail List pattern, irrelevant images may be simply left out. The specifics of your interface will determine it this is a workable solution. During design, consider the likelihood of most or all items being populated with image content, and make decisions about use of Avatars accordingly.
Interaction Details
Avatar images may be selectable or not. They must follow the general paradigm of the context in which they are used. If used in a line item, such as an address book, they my be selectable as an extension of the name, as a part of the whole line, or not at all.
Always consider how clear the interaction which will follow selection of an Avatar can be communicated. If it is not perfectly clear, then add additional information, such as overlay labels DIDN'T WE DESCRIBE THIS SOMEWHERE I CAN REFERENCE? Otherwise, consider simply making the Avatar image display only.
When uses alone, as the only reference to a user -- such as in threaded messaging or an SMS conversation -- the Avatar should always be selectable, and generally either display the user information, or offer option for interaction.
Presentation Details
Since the image itself often cannot be created, the designer must be careful when selecting borders, background, sizes and aspect ratios.
Avatar images are almost always square, to account for both landscape and portrait orientation source photos, without masking (black bars) on port of the image. or inconsistencies in the display and alignment of page items.
Generally, the long sides are cropped oft, and the short side is fitted to the image dimensions. Occasionally, it may be useful to crop the outer 10 or 20% of the whole image, to assure a recognizable face is in the image area. this depends more on the rendered size than the quality of source; smaller in eyes my to well with additional cropping.
Though some Avatar selection systems allow manual image cropping, this --as well as photographing within the mobile device to generate images -- is not writhin the scope of discussion here.
When practical, use Avatars alongside text labels. When selectable, use the existing paradigms, discussed undr Link, to denote an image is selectable.
When no supporting label text is associated with an Avatar image, consider use of the Tooltip, when practical and supported.
Antipatterns
Avoid using too many generic icons, or only have one as a placeholder.
Always keep in mind the value of the Avatar, and do not fill with arbitrary content to populate a flawed design.