Design guidelines - QutEcoacoustics/baw-server GitHub Wiki

Design guidelines

Casing and terminology are important in this document!

Inspirations:

Main menu

  • Ecosounds
  • Projects
  • Listen
  • Library
  • Custom Menu
  • Contact Us
  • {spacer}
  • Admin menu {if admin}
  • {user name} {user profile picture} / Register
  • Log out/Log in

Drop down should contain: For admin on rails side: profile; scripts; orphan sites; user list

Secondary menu

All links on the left will be global unless descending into a hierarchy, in which case contextual navigation links will be shown in groups. Icons will also be added to the left menu. Particular focus on not allowing actions in this menu.

  • (home) Home
  • (sign-in) Log in / (user) My Profile
  • (user-plus) Register / (<custom annotation item>) My Annotations
  • (globe) Projects
    • (folder-open) Project
      • (map-marker) Site
  • (server) Audio Analysis
    • (tasks) Analysis Job
  • (book) Library
  • (table) Data Request
  • (envelope) Send Audio
  • (bug) Report Problem
  • (line-chart) Website Statistics

Other Icon References

  • (map) visualize (project & site) [new name: Explore audio]

  • (tag) tags

  • (square-o/th-large) annotations

      .fa-baw-annotation {
    &:before {
      content: $fa-var-square-o;
      position: relative;
      margin-left: 0.25em;
    }
  
    &:after {
      content: $fa-var-th-large;
      font-size: (2/3) * 100%;
      position: relative;
      top: -2px;
      left: calc(-1em - (1/3 * 1px));
    }
  }

  • (play) Only used when immediate audio is played

  • (headphones) Any link that takes to a listen page and must have text to say "listen"/"listen to audio"

  • (map-marker) sites

  • (download) Download

  • (plus) new/add/create item action, also: add list item

  • (minus) remove/delete item from list

  • (edit) edit/change item action

  • (trash) remove/delete item action

  • (table) results / data

  • (repeat) retry

  • (pause-circle) pause (non-audio, e.g. jobs)

  • (play-circle) resume (non-audio, e.g. jobs)

  • (file-archive) download zip

  • (key) permissions

Casing

  • Title Case for all menu items
  • Sentance case for all action items
  • Sentance case for buttons, radio items, and checkboxes
  • lower case or for anchors. Lower case when in a sentence. An exception to the sentence rule is when the link is a duplicate of a menu item or action - in that case, it should mirror the style of the original for consistency.

Personal Pronouns

  • For pages / menu items / actions that apply only to that user use the personal pronoun My/my
  • Avoid pronouns altogether.
  • If pronouns are used, do not use gendered pronouns. Use they/their