Animal card

When to use

• Any time an animal appears on a screen: in a list, a form, a picker or a record.
• People need to be sure which animal it is before they act.

When not to use

Anatomy

MC 1

IdentifierAnimal IDCommon nameScientific nameEnclosure

1. Photo · required; a grey block when there is no photo
2. Sex tag · required: M, F or U
3. CITES tag · when the species is CITES listed
4. Expand icon · required; opens the photo full size
5. Identifier · optional: ear tag, name or chip
6. Animal ID · required
7. Common name · required
8. Scientific name · required, italic
9. Enclosure · optional

Variants

States

Behaviour

• Tapping the expand icon opens the photo full size; tapping elsewhere opens the animal or picks it, depending on the screen.
• Every line is one line; long text ends in an ellipsis and the card keeps its height.
• The card stretches to the width it is given: a list column on tablet, the full form width in a form.
• The same card is used for every animal everywhere, so people learn one shape.
• Lists of animals use this full card with its 104 photo, one card per animal. There is no smaller animal row.

Phone and tablet

Content

Do and don't

M

Animal IDCommon nameScientific name

DoUse the same animal card for every animal.

CN

Common name

Animal ID

Don'tShow an animal as a person-style row with initials.

F

Animal IDCommon name that is long…Scientific name

DoEnd long lines in an ellipsis.

F

Animal IDCommon name that is long and wraps onto a second lineScientific name

Don'tLet a line wrap and push the card taller.

Related

Specs

Click a value to copy it.

Accessibility

• The photo has a text alternative: common name and animal ID.
• Sex is written as a letter on the tag, never shown by colour alone.
• Lines on Pale green score 8.0 (Identifier), 7.3 (Ink lines) and 3.4 (Scientific name) for readability. The scientific name is never the only way to identify the animal.
• The expand icon has its own label, "View photo", and a touch area of at least 44 around it.

Changes