Skip to end of metadata
Go to start of metadata

Coding standards

While we don't yet have our own guidelines, the following resources is a good reference that should be followed reasonably closely:

http://na.isobar.com/standards/#_javascript

Current interactions we use in V3 template

Icon

A (tick) or (error) against each example indicates if the implementation complies with this guideline.

Accordion

Accordion

When to use it

  • If you are unfortunate enough to have a very long page of information.
  • If there are too many items displaying at once that would overwhelm the user
  • there's too much scrolling and the list of items can be grouped into smaller chunks

See what Accordion should and shouldn't do plus examples.

Auto-suggest or Auto-complete

Auto-suggest or Auto-complete

When to use it

The user is entering terms into an input box.

Also:

  • there's ambiguous or hard to remember information
  • searching large datasets
  • when the total number of items to select from would exceed the usable length of a drop down box
  • when speed and accuracy of entry is an important goal
  • for removing ambiguity about expected input data
  • avoiding potential mis-typed information
  • narrowing down the correct choices

Examples are names of staff, list of countries.

See what Auto-suggest or Auto-complete should and shouldn't do plus examples.

Carousel

When to use it

You have a series of pictures you want to show, but have a limited space and cannot display all of them on the page at the same time. This is particularly useful for thumbnails of profile pics that link to full profiles.

See what Carousel should and shouldn't do plus examples.

Date picker

Date picker

When to use it

When you need to enter a date...?

See what Date picker should and shouldn't do plus examples.

Form validation

Form validation

When to use it

You have a form that will be doing a post and the information needs to be in a particular format (e.g. dd/mm/yyyy). It can also be used to ensure information is entered, e.g. into required fields.

See what Form validation should and shouldn't do plus examples.

Image slideshow

Image slideshow

When to use it

  • On homepages
  • You have a selection of photos that you want to convey to the user in a limited area as opposed to displaying a whole bunch in one go,
    • ie. automatically transition between each pic

See what Image slideshow should and shouldn't do plus examples.

Lightbox

Lightbox

When to use it

You want to display pertinent information that isn't immediately available to the user on their request, but don't want to navigate them away from the page. Use this when you want the user to focus on that information specifically.

See what Lightbox should and shouldn't do plus examples.

Scrollable text

Scrollable text

When to use it

You have a list of information that you don't want to display in one go in a limited amount of space. Not all of the information is essential to be displayed at once.

See what Scrollable text should and shouldn't do plus examples.

Show hide

Show hide

When to use it

You have lots of content that doesn't need to be displayed in its entirety on a page, but a portion of which is enough to denote to the user the purpose of that content.

For example on a personal profile page where there may be lots of content of different categories, each category could be shortened by only showing a portion of that category initially, e.g. a list of publications for an academic is likely to be more than ten items long, but would be too long to display on a page. Showing the first three and making it easy for the user to see more on the same page is a good use.

See what Show hide should and shouldn't do plus examples.

Slide-up text in a picture boxout

Slide-up text in a picture boxout

When to use it

You have additional information regarding the subject of an image, but have very limited space.

See what Slide-up text in a picture boxout should and shouldn't do plus examples.

Sortable table and filter

Sortable table and filter

When to use it

You have a large table of >5 rows and multiple columns.

See what Sortable table and filter should and shouldn't do plus examples.

Tabs

Tabs

When to use it

You have a fair amount of content but want to keep your page short.

  • There are multiple panes of content, but there is space to only show one content pane at a time.
  • The different panes of content do not need to be viewed in context with each other.
  • You need a way to switch between the content without going to a different page.
  • There are 2-10 category titles.
  • The category titles are relatively short and predictable.

See what Tabs should and shouldn't do plus examples.

Interactions we don't currently use but would be beneficial

  • Drag n drop
  • Sign-up progress bar
  • Progress bar
  • Desktop notifications
  • Fade-out notification/flash/"Bink"