📂
Design
  • Design and Interaction System
  • Designing for MR
    • Introduction - Design for MR
    • Content Placement in Mixed Reality
    • User's State of Experience
  • Visual Design
    • Introduction - Visual Design
    • User Interfaces in Mixed Reality
    • Scale, Depth & Size
    • Theme System
      • Color System
      • Typography
      • Shape System
      • Transition System
    • Components of Tesseract Mixed Reality Design
      • Typography
      • Button
      • Progress Indicator
      • Radio Button
      • Check Box
      • Keyboard
      • Toggle Button (Switch)
      • Video View
      • Voice UX
      • Canvas
      • Image View
      • Text View
      • Slider
      • Scroll View
      • Dialog Box
      • Dropdown
      • Pointer
      • Input Field
      • Search Bar
      • Tool Tip
  • Interaction Design
    • Introduction - Interaction Design
    • Multimodal Interactions
    • Voice
    • JioGlass Controller
    • Navigation System
      • States
      • Transitions
Powered by GitBook
On this page
  • Best Practices
  • Layout
  • Content
  • Toggle Button Design (without Text)
  • States
  • Transitions
  • Toggle Button Design (with Text)
  • States
  • Transitions
  1. Visual Design
  2. Components of Tesseract Mixed Reality Design

Toggle Button (Switch)

PreviousKeyboardNextVideo View

Last updated 3 years ago

A toggle represents a physical switch that allows someone to choose between two mutually exclusive options. For example, “On/Off”, “Show/Hide”. Choosing an option should produce an immediate result.

Best Practices

Layout

  • When people need to perform extra steps for changes to take effect, use a check box instead. For example, if they must click "Submit", "Next", or "OK" button to apply changes, use a check box.

Content

  • Only replace the On/Off labels if there are more specific labels for the setting. For example, you might use Show/Hide if the setting is "Show images".

  • Keep descriptive text short and concise - two to four words; preferably nouns. For example, "Focused inbox" or "Wi-Fi".

Toggle Button Design (without Text)

States

Transitions

Transitions

Front View

Isometric View

Appear

Enter

Exit

Interact

Disappear

Toggle Button Design (with Text)

States

Transitions

Transitions

Front View

Isometric View

Appear

Enter

Exit

Interact

Disappear