UX and UI Guidelines
Icons
The Museum uses the Material Design icons, plus a few from a community created Material Design set. The table below indicates which icons are used for each function. Most icons will appear in a button or as part of an AV player.
File names in this package are referred to below.
Icon Usage
In general, use outline versions of icons, contained in a button, where available. Filled in icons should be used when the icon is directly covering the content (therefore making the icon harder to see if it was an outline) - such as a play icon over a video, or a pointer / eye icon used over a map.
Let your project manager know if you need to use an icon that isn’t specified on this page. Please propose an icon from the original Material Design icons or the community created set.
Please adhere to the following guidelines around icon usage.
| Icon | File name | Usage |
|---|---|---|
| NAVIGATION | navigation-icons | These icons are the basis of most interactives. |
 |
chevron-up, chevron-down, chevron-left, chevron-right | Use chevrons for scrolling, or moving between items which are part of the same page/frame/content grouping. e.g. as part of a lightbox, on a timeline. These do not need to be labelled. |
 |
arrow-forward, arrow-back, arrow-up, arrow-down | Arrows are used for going to a different section/piece of content in the interactive. The back arrow is used for going to back to the previous element in the IA. Arrows should be labelled clearly. Refer to the UI text section for labeling. |
 |
home | Used to take users back to the main screen. Must have clear labelling. Consider use of back arrows instead for IAs that are not too deep. |
 |
help, help-outline | Ideally, interactives should not require a help button due to clear and elegant UX. However, use this icon where instruction is needed. |
 |
magnify | The magnify icon can be used as a button can be placed over images as a sign to expand the image. |
 |
plus, minus | In general, visitors should be able to pinch and zoom, and if you need zoom icons, turn the plus and minus signs into flat square buttons. |
 |
search | Used for typed search boxes. |
 |
close | This does not need a button around it unless that fits with your design. |
| AV CONTROLS | av_controls | Use these to create AV players with your interactive. Do not use fast forward buttons - visitors should be able to toggle by dragging the time marker (as in YouTube). |
 |
play-circle | This should be used in the centre of videos, as a layer on top of the video preview. |
 |
headphones | As with the play circle, this should be used to indicate audio content. |
 |
play,pause | Use the play arrow as a button to launch a video (choose between this and play circle overlaid on video preview), or at the AV control along the bottom of videos. When a visitor hits pause, video pauses and icon changes to play icon. |
 |
volume-on, volume-off, volume-up, volume-down | In most circumstances, volume should be set to a suitable level for the gallery space and not possible to adjust. Contact your project manager. Volume on should appear after a visitor touches volume off, and vice versa. |
 |
replay | Replay the AV item |
 |
subtitles | Toggle subtitles on off, and use as menu for different languages if required |
| CONTENT | content-icons | Content specific icons. |
 |
map-point, map-point-multiple | Used to show a point on a map. Multiple point icon for zoomed out view of a cluster of points. If different points on a map show different types of content, look to use different icons for each content type, or consider creating custom icons. |
 |
eye | For use as points on non-map surfaces, such as objects. |
 |
create | Used if visitor has the opportunity to draw or make something within the interactive. Clearly label what they will create. |
 |
undo | Used in creation process to undo last visitor input. |
 |
backspace | For undoing typed visitor inputs |
 |
send | For sharing, sending, or submitting selections or user created content. Must be clearly labelled, e.g. Share to Facebook, Submit your design |
 |
camera | To indicate visitor photo opportunities. Clearly label. |
Buttons
Buttons can comprise of icons and/or text. Buttons with text should have a rounded, weighted border, buttons with icons and text should have a square border. No outline is also an option if that fits best with your design.
Please adhere to the Material Design button guidelines, noting the following:
- The exact dp/pixel guidelines do not have to be matched
- Select from the three button types as appropriate: floating action, raised, flat
- Do not use capitals – use sentence case
UI Text
Cues and calls-to-action
Te Papa have guidelines on creating a call-to-action, which should be adhered to.
Multilingual Interfaces
You will receive guidance on the use of te reo Māori as part of your brief.
You must adhere to the Auckland Museum style guide, found here. This includes guidelines on the use of te reo Māori.
Please also refer to the Te Papa UI control names.
Interaction Design
Motion, scrolling, and gestures
“Motion is meaningful and appropriate, serving to focus attention and maintain continuity.” - Material Design
Motion, scrolling, and gestures should follow Material Design guidelines. As visitors are moving through the Museum engaging with different digital products, they should be able to use the same natural gestures and expect consistent results.
Adhere to the Material Design guidelines below, unless they are out of scope for your project brief (ie no pinch and zoom is required):
Material Design Motion
Virtual Reality and 3D
Refer to the Designing for Google Cardboard guidelines to begin with.