View on Github
Settings
Purpose
Some system behaviors and settings may need to change depending on the user.
Description
Settings should be implemented when there is functionality and behaviors that may need to be changed to meet a user’s needs, such as notification settings, account settings, and other system behaviors.
Avoid the urge to “just make it a setting”. Only add a setting if:
- More than 15% of your users will change the setting
- It’s infrequently changed by users. If it’s frequently changed, consider making it more available
Basic functionality
Depending on the application type, settings can appear as a dedicated page or as a modal dialog. The complexity of the settings panel can vary drastically between applications.
The settings panel can be composed of:
- Navigation
- Settings forms
- Search
Navigation
Use tabs if there are 5 or less sections of settings without nesting, otherwise use tree navigation. Hierarchical tree navigation is preferred over nested levels of tabs and improves discoverability.
Flat navigation
Example HTML usage:
<!--Settings : Flat navigation -->
<div class="modal" tabindex="-1" role="dialog" id="settingExample1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Settings</h1>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body pt-0 pb-0">
<div class="row">
<div class="col-3 p-2">
<div
class="border-0"
id="v-pills-tab"
role="tablist"
aria-orientation="vertical"
>
<h4
class="dropdown-header text-secondary text-uppercase bg-light pt-2 pb-2"
>
General
</h4>
<a
class="dropdown-item active"
id="v-pills-profile-tab"
data-toggle="pill"
href="#v-pills-profile"
role="tab"
aria-controls="v-pills-profile"
aria-selected="true"
>Profile</a
>
<a
class="dropdown-item"
id="v-pills-deployment-tab"
data-toggle="pill"
href="#v-pills-deployment"
role="tab"
aria-controls="v-pills-deployment"
aria-selected="false"
>Deployment</a
>
<a
class="dropdown-item"
id="v-pills-billing-tab"
data-toggle="pill"
href="#v-pills-billing"
role="tab"
aria-controls="v-pills-billing"
aria-selected="false"
>Billing</a
>
<h4
class="dropdown-header text-secondary text-uppercase bg-light pt-32 pb-2"
>
System
</h4>
<a
class="dropdown-item"
id="v-pills-notification-tab"
data-toggle="pill"
href="#v-pills-notification"
role="tab"
aria-controls="v-pills-notification"
aria-selected="true"
>Notification</a
>
<a
class="dropdown-item"
id="v-pills-emails-tab"
data-toggle="pill"
href="#v-pills-emails"
role="tab"
aria-controls="v-pills-emails"
aria-selected="false"
>Emails</a
>
<a
class="dropdown-item"
id="v-pills-sshkeys-tab"
data-toggle="pill"
href="#v-pills-sshkeys"
role="tab"
aria-controls="v-pills-sshkeys"
aria-selected="false"
>SSH keys</a
>
</div>
</div>
<div class="col-9 border-left border-light p-3">
<div class="tab-content" id="v-pills-tabContent">
<div
class="tab-pane fade show active"
id="v-pills-profile"
role="tabpanel"
aria-labelledby="v-pills-profile-tab"
>
<h3 class="mb-3">Profile</h3>
<form class="col-6">
<div class="form-group">
<label for="exampleUserName">Username</label>
<input
type="text"
class="form-control"
id="exampleUserName"
value="jsmith12"
disabled
/>
</div>
<div class="form-group">
<label for="exampleName">Name</label>
<input
type="text"
class="form-control"
id="exampleName"
value="John Smith"
/>
</div>
<div class="form-group">
<label for="exampleIFInputEmail">Email address</label>
<input
type="email"
class="form-control"
id="exampleIFInputEmail"
value="john.smith@gmail.com"
/>
</div>
<button class="btn btn-primary" type="submit">
Save changes
</button>
</form>
</div>
<div
class="tab-pane fade"
id="v-pills-deployment"
role="tabpanel"
aria-labelledby="v-pills-deployment-tab"
>
<h3>Deployment</h3>
</div>
<div
class="tab-pane fade"
id="v-pills-billing"
role="tabpanel"
aria-labelledby="v-pills-billing-tab"
>
<h3>Billing</h3>
</div>
<div
class="tab-pane fade"
id="v-pills-notification"
role="tabpanel"
aria-labelledby="v-pills-notification-tab"
>
<h3>Notification</h3>
</div>
<div
class="tab-pane fade"
id="v-pills-emails"
role="tabpanel"
aria-labelledby="v-pills-emails-tab"
>
<h3>Emails</h3>
</div>
<div
class="tab-pane fade"
id="v-pills-sshkeys"
role="tabpanel"
aria-labelledby="v-pills-sshkeys-tab"
>
<h3>SSH keys</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Tree navigation
Example HTML usage:
<!--Settings : Flat navigation -->
<div class="modal" tabindex="-1" role="dialog" id="settingTreeExample1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Settings</h1>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body pt-0 pb-0">
<div class="row">
<div class="col-3 p-0">
<div class="accordion navigation" id="AccordionNavigationExample">
<h4
class="dropdown-header text-secondary text-uppercase bg-light p-3"
>
General
</h4>
<div class="clearfix">
<div id="heading-0">
<h3 class="accordion-heading">
<button
class="btn btn-white btn-block text-left collapsed"
type="button"
data-toggle="collapse"
data-target="#collapse-0"
aria-expanded="false"
aria-controls="collapse-0"
>
<i class="material-icons collapsed-icon invisible">add</i>
<i class="material-icons expanded-icon invisible"
>remove</i
>
Profile
</button>
</h3>
</div>
<div id="heading-1">
<h3 class="accordion-heading">
<button
class="btn btn-white btn-block text-left active"
type="button"
data-toggle="collapse"
data-target="#collapse-1"
aria-expanded="true"
aria-controls="collapse-1"
>
<i class="material-icons collapsed-icon">add</i>
<i class="material-icons expanded-icon">remove</i>
<span> Account </span>
</button>
</h3>
</div>
<div
id="collapse-1"
class="collapse show"
aria-labelledby="heading-1"
>
<div>
<ul class="sidenav">
<li class="success">
<a href="#" data-parent="Parent link"> General </a>
</li>
<li class="error">
<a href="#" data-parent="Parent link">Password </a>
</li>
<li class="active">
<a href="#" aria-current="page" data-parent="">
Billing
</a>
</li>
<li>
<a href="#" data-parent="Parent link"> Advanced</a>
</li>
</ul>
</div>
</div>
</div>
<h4
class="dropdown-header text-secondary text-uppercase bg-light p-3"
>
System
</h4>
<div>
<div id="heading-2">
<h3 class="accordion-heading">
<button
class="btn btn-white btn-block text-left collapsed"
type="button"
>
<i class="material-icons collapsed-icon invisible">add</i>
<i class="material-icons expanded-icon invisible"
>remove</i
>
Notifications
</button>
</h3>
</div>
</div>
<div>
<div id="heading-3">
<h3 class="accordion-heading">
<button
class="btn btn-white btn-block text-left collapsed"
type="button"
>
<i class="material-icons collapsed-icon invisible">add</i>
<i class="material-icons expanded-icon invisible"
>remove</i
>
Emails
</button>
</h3>
</div>
</div>
<div>
<div id="heading-3">
<h3 class="accordion-heading">
<button
class="btn btn-white btn-block text-left collapsed"
type="button"
data-toggle="collapse"
data-target="#collapse-4"
aria-expanded="false"
aria-controls="collapse-4"
>
<i class="material-icons collapsed-icon">add</i>
<i class="material-icons expanded-icon">remove</i> SSH
keys
</button>
</h3>
</div>
<div
id="collapse-4"
class="collapse"
aria-labelledby="heading-3"
>
<div>
<ul class="sidenav">
<li><a href="#" data-parent="Parent link"> Step 1</a></li>
<li><a href="#" data-parent="Parent link"> Step 2</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-9 border-left border-light p-3">
<div class="tab-content" id="v-pills-tabContent">
<div
class="tab-pane fade show active"
id="v-pills-profile"
role="tabpanel"
aria-labelledby="v-pills-profile-tab"
>
<form>
<h2 class="mx-3 my-4">Billing information</h2>
<div class="form-group col-md-8">
<label for="exampleFGStreetAddress">Address line 1</label>
<input
type="text"
class="form-control"
id="exampleFGStreetAddress"
/>
</div>
<div class="form-group col-md-8">
<label for="exampleFGStreetAddress2"
>Address line 2
<span class="text-muted">(optional)</span></label
>
<input
type="text"
class="form-control"
id="exampleFGStreetAddress2"
/>
</div>
<div class="form-group col-md-8">
<label for="exampleFXCity1">City</label>
<input
type="text"
class="form-control"
id="exampleFXCity1"
/>
</div>
<div class="form-group col-md-6">
<label for="exampleFXState2">State</label>
<select class="form-control" id="exampleFXState2">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="exampleFXZip2">Zip code</label>
<input
type="text"
class="form-control"
id="exampleFXZip2"
/>
</div>
<div class="form-group col-md-4">
<button class="btn btn-primary" type="submit">
Save changes
</button>
</div>
</form>
</div>
<div
class="tab-pane fade"
id="v-pills-deployment"
role="tabpanel"
aria-labelledby="v-pills-deployment-tab"
>
<h3>Deployment</h3>
</div>
<div
class="tab-pane fade"
id="v-pills-billing"
role="tabpanel"
aria-labelledby="v-pills-billing-tab"
>
<h3>Billing</h3>
</div>
<div
class="tab-pane fade"
id="v-pills-notification"
role="tabpanel"
aria-labelledby="v-pills-notification-tab"
>
<h3>Notification</h3>
</div>
<div
class="tab-pane fade"
id="v-pills-emails"
role="tabpanel"
aria-labelledby="v-pills-emails-tab"
>
<h3>Emails</h3>
</div>
<div
class="tab-pane fade"
id="v-pills-sshkeys"
role="tabpanel"
aria-labelledby="v-pills-sshkeys-tab"
>
<h3>SSH keys</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Tab navigation
Example HTML usage:
<!--Settings : Tab navigation -->
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Settings</h1>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!--Justified tabs-->
<ul
class="nav nav-tabs nav-fill nav-tabs-light"
id="myTab"
role="tablist"
>
<li class="nav-item" role="presentation">
<a
class="nav-link active"
id="profile-tab"
data-toggle="tab"
href="#profile"
role="tab"
aria-controls="profile"
aria-selected="true"
>Profile</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="deployments-tab"
data-toggle="tab"
href="#deployments"
role="tab"
aria-controls="deployments"
aria-selected="false"
>Deployments</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="billing-tab"
data-toggle="tab"
href="#billing"
role="tab"
aria-controls="billing"
aria-selected="false"
>Billing</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="notifications-tab"
data-toggle="tab"
href="#notifications"
role="tab"
aria-controls="notifications"
aria-selected="false"
>Notifications</a
>
</li>
<li class="nav-item" role="presentation">
<a
class="nav-link"
id="sshkeys-tab"
data-toggle="tab"
href="#sshkeys"
role="tab"
aria-controls="sshkeys"
aria-selected="false"
>SSH Keys</a
>
</li>
</ul>
<div
class="border border-light border-top-0 p-4 tab-content"
id="myTabContent"
>
<div
class="tab-pane fade show active"
id="profile"
role="tabpanel"
aria-labelledby="profile-tab"
>
<h3 class="mb-3">Receive email notifications when</h3>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input
type="checkbox"
class="custom-control-input"
id="customCheck1"
checked=""
/>
<label class="custom-control-label" for="customCheck1"
>My case is transferred to another examining attorney</label
>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input
type="checkbox"
class="custom-control-input"
id="customCheck2"
checked=""
/>
<label class="custom-control-label" for="customCheck2"
>New classes added</label
>
</div>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input
type="checkbox"
class="custom-control-input"
id="customCheck3"
checked=""
/>
<label class="custom-control-label" for="customCheck3"
>Classes originally paid for are deleted</label
>
</div>
</div>
</div>
<div
class="tab-pane fade"
id="deployments"
role="tabpanel"
aria-labelledby="deployments-tab"
>
<h3 class="mb-3">Deployments</h3>
</div>
<div
class="tab-pane fade"
id="billing"
role="tabpanel"
aria-labelledby="contact-tab"
>
<h3 class="mb-3">Billing</h3>
</div>
<div
class="tab-pane fade"
id="notifications"
role="tabpanel"
aria-labelledby="contact-tab"
>
<h3 class="mb-3">Notifications</h3>
</div>
<div
class="tab-pane fade"
id="sshkeys"
role="tabpanel"
aria-labelledby="contact-tab"
>
<h3 class="mb-3">SSH Keys</h3>
</div>
</div>
</div>
</div>
</div>
</div>Saving changes
There should be a
Save changes button on every panel
with savable changes. The buttons should be disabled if there have not yet
been any changes. If the user attempts to navigate away with unsaved
changes, the application or browser should ask them to confirm.
Example HTML usage:
<!--Dialog-->
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Abandon changes?</h1>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>You have unsaved changes. Your changes will be lost.</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-sm btn-outline-primary"
data-dismiss="modal"
>
Leave this page
</button>
<button type="button" class="btn btn-sm btn-primary">
Stay on this page
</button>
</div>
</div>
</div>
</div>
Example HTML usage:
<!--Dialog-->
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Abandon changes?</h1>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>You have unsaved changes. Your changes will be lost.</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-sm btn-outline-primary"
data-dismiss="modal"
>
Close settings
</button>
<button type="button" class="btn btn-sm btn-primary">
Keep settings open
</button>
</div>
</div>
</div>
</div>