Single Website Experience (SWE) Pattern Library

The Single Website Experience (SWE) is a frontend framework used for www.qld.gov.au

Documentation now located here: Single Website Experience

Legacy Documentation

Please visit point in time for source documents https://github.com/qld-gov-au/pattern-library/tree/9ebce75c3ff9545977ee73d6d06e4a60987ccc5a

• SWE 3 is a rapid protoyping framework, built on bootstrap 3
  • SWE 3 is used for all new websites
  • SWE 3 replaces SWE 2
  • SWE 3's appearance laregly reflects SWE 2
  • SWE 3 is not feature complete, required components will be ported as necessary

Quick links

• SWE resources (including SWE Product Definition document)
• SWE 3 Page models and templates
• Consistent User Experinece (CUE) standard
• Websites policy (IS26)
• Web Content Accessibility Guidelines 2.0

Pattern library

This SWE 2 Pattern Library is now deprecated since June 30, 2019. Please refer to SWE 3 Page models and templates for the SWE3 Pattern Library.

• Content types

  • Figures (images, diagrams, captions)
  • Status messages 🤔
    • Warnings
    • Information
    • Success
    • Success (step)
  • Data tables (sortable tables)
  • Downloadable document link
  • Meta links
  • Pull-quote
  • Pull-quote with citation
  • Video
  • Contacts
  • Checklist
  • Side-by-side comparison
  • Side-by-side comparison (advantages and disadvantages)
  • Cross-selling links
  • News slideshow
  • Slider 🤔
    • Featured sslideshow based on xml feeds

• Asides

  • Contacts (asides)
  • Emergency contact
  • Tip
  • Events (franchise landing page)
  • Feedback
  • Sponsors
  • Beta indicator
  • App aside

• Forms 🤔

  • Structure of a form
    • Title
    • Status
      • Validation messages
    • Preamble
    • List of questions
    • Actions
  • Questions
    • Question prompts
      • Hints
      • Help
    • Answers
      • Short text answers
      • Selecting from a list of choices
        • Please select
        • Other, please specify
      • Radio buttons and checkboxes
      • Groups
      • Collecting personal information
        • Autofill
      • "Either or" questions
    • Accessible labels
  • Progressive disclosure
    • Showing sections of a form one at a time (e.g. step-by-step wizard)
    • Hiding irrelevant questions
  • Autocomplete address form
  • Client-side validation
    • Validation techniques
      • Example: email address must be a .qld.gov.au address
      • Required checkboxes
    • HTML5 input type notes
    • HTML5 constraint validation API notes
  • References

• Guides

  • Guide headings
  • Guide table of contents
  • Process menu (applications)
  • Pagination

• Lightbox

  • Images
  • Image gallery
  • Definition
  • Map

• Pages 🤔

  • Page models 🤔 (old Govdex link)
  • Metadata 🤔 (old Govdex link)
  • Page properties

• Dynamic content

  • Content expiry (XSSI)
  • Time-based content
  • Datasets
    • Events from CSV datasets
    • Counters from csv Datasets

• News

• Social media

• App links

• Print

• Web applications 🤔 (already linked, should probably move to all this content in to Forms, under validationa lerts or something)

• Content types 🤔

• disaster-alert-aside.md

• errors.md

• maps.md

• news-based-on-xml-feeds.md🤔(already in news?)

• patterns-for-web-forms.md🤔(already in forms?)

• print-remote-pages.md🤔(combine with print)

• quick-exit.md

• video-pattern.md🤔💀 3 years old!

Related

Consistent User Experience (CUE)

To ensure a consistent experience, the Consistent User Experience (CUE) Standard requires that:

• agency web pages are laid out consistently, with elements such as the navigation, search button and agency name always in the same place
• navigation is based on what visitors are likely to be looking for, rather than on how departments are organised
• the underlying techniques used to create the pages ensure they are accessible to as many people as possible.

The CUE Standard incorporates previously independent standards and guidelines into a suite of requirements for the Queensland Government online.

• Consistent User Experience (CUE) standard
• CUE Template (V3.0, 2010)

👉 The Single Website Experience (SWE) framework is built on top of the Consistent User Experience (CUE) standard.

IS26

This Queensland Government Enterprise Architecture (QGEA) policy states the minimum requirements for Queensland Government agencies in the creation, implementation and management of websites.

• Websites policy (IS26)

Web Content Accessibility Guidelines 2.0 (WCAG 2.0)

Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general.

• Web Content Accessibility Guidelines 2.0

As per IS26's Policy requirement 1 Queensland Government websites must meet AA level conformance.

Naming conventions and categories in the Pattern libarary

Content pages may be further categorised by content type. e.g. form, guidelines, instruction etc. The AGLS Document Vocabulary Encoding Scheme offers a starting point.

• Category types

---

Legend

• 🤔 = under review, this content might move or be removed soon
• 🚀 = experimental, not to be trusted