Bootstrap Design Pattern Guide Created For: XXXXX Created By: Saggezza Inc
__________________________________________________________________________
This document is intended to be used as a UI (user interface) design guide for web applications and web portals created for RR Donnelley. In this document, you will find a list of UI components. A UI Component is the user interface grouping of HTML, CSS, and JS. This document will provide information about each UI component, which can be used in various RR Donnelley web applications and portals. This document is broken down into: ● ● ● ● ● ●
Original Bootstrap Components Custom Bootstrap Components Component Names Visual Examples of Component Instructions About the Components Examples of Intended Functionality for the Components
All of the components can be changed by adjusting the theme. A theme is a visual design intended to be applied to an application to uphold existing brand standards, or invoke specific feelings from a user. These components can be combined with one another; however, the styling (such as rounded corners and drop shadows) cannot change in efforts to withhold the integrity of the RR Donnelley UI Guide.
__________________________________________________________________________
Created By: Sophia Savino Created On: Updated By: Updated On:
Table of Contents Colors Application Header / Top Navigation Button Tables Input Tabs Pills Breadcrumbs Pagination Pager Alerts Labels Badges Progress Bar Jumbotron 404 Error List Groups List Group Continued Panel Well Popovers Tooltips Modal Global Left Hand Navigation Dropdown Field Date Input Search Filter Toggles Sortable Table Expanded Table Wizard Page Loader Interactive Donut Chart Interactive Vertical Bar Graph
2
Original Bootstrap Elements Colors Bootstrap has pre-set color types within its code. Bootstrap defines the following color types as default, primary, success, information, warning, and danger. All of the colors can be edited to match another applications color palette.
How to Use The Default color should be used as a secondary color to the primary. An example would be between a submit and cancel button. The submit should be the primary color in terms of hierarchy, while the cancel button should be the default color. The Primary color is the most commonly used color throughout the application. The Success color should be used to show successful validation. An example would be if you’ve successfully added an extra line to a table and you wanted to show it had been successfully added, the line then may appear temporarily green. The Info color is used on informational areas of the application. The Warning color may be used to let someone know that there is a possible or impending problem. It creates awareness to the user but does not limit the users ability to continue their task in the application. Examples would be if an item was delayed in shipping, or a pending request may be expiring soon. The Danger color should be used to alert the user of either an error or a problem, this would limit or halt the users ability to complete a task. An example would be when a input field is filled out incorrectly and there is an error in validation.
3
Application Header / Top Navigation An application header lets the user know what application they are logged into, who they are logged in as, and can supply them with additional application or user options. Navigation is the system that a user can use to move around a website.
How To Use A header should be used to display any of the following: ● ● ● ● ●
Logo User Name User Settings Application Options Optional Top Navigation
Example Upon logging into an application, a user will see a header containing a company logo, as well as a dropdown containing their username. A user will click on their name to see additional site-wide options they have access to, such as Account Profile or Settings, and also including an option to Sign Out.
4
Button A button is a stylized link that represents a call-to-action. By pressing a button a user may be taken to a new page, new website, or a file. Single Button - A single button is a button that stands on it’s own.
Button Group - A button group allow multiple buttons to be stacked together on a single line. This is useful when you want to place like alignment buttons together.
How to Use The Large button is the default button for the application, which means primary buttons should be this size. A primary button represents the most important item on a hierarchical level. This button will mostly be found outside of panels and tables, and can include nestled icons. This button is also used as the default footer button size for modals. The Default button is also called our medium button, use this button inside of panel headings and table headings, and within modals. (Note: this is not to be confused for the default footer buttons within modals.) The Small button is used as an expandable button. An expandable button is used within tables to expand additional data displayed within a row.
5
The Mini button is used for buttons placed inside of tables. These buttons can also be included as nested icons.
Tables A table is a component used to display a set of facts or figures systematically, especially in the form of columns.
How to Use A table should be used when there is data which requires specific information to be displayed with text. This information should be defined with a column heading and rows with assorted data. (Note: For large tables, each table line should be white, and not include an alternating line color. For small tables, each alternating line should display an alternating color.)
Example A user arrives to a screen within the application where a table is displayed. The table is created with 5 columns and 25 rows, and includes pagination. Under each column title the user will see associated data in the rows. A user will see the title “Location” in the column and the rows beneath it will display a location name.
6
Input An input field is used to allow a user to insert text, and save inserted text.
How to Use The Blank input field is the default field used throughout the application. These input fields should be used in forms, login, or wherever it is needed for a user to type. The Disabled input should be used on two occasions. The first is when a field area is not applicable to the user, the second is when it already contains entered text that cannot be edited. The Error input is to be used when a field either cannot be validated after submittal (Example: Incorrect login) or also when incorrect information or a value has been entered (Example: 10,00 = wrong, 10.00 = correct). These errors will prevent the user from moving forward in their task. The Warning input would not be used often, but should be used in concurrence with the warning alert. This would be used when the user enters text that needs to be validated but may still be incorrect in a form. This will not prevent the user from submittal, but may cause them problems later on. Example: The field asks for a weight, you enter in 100,001, but the weight to be shipped can only be 100,000. The Success input would not be used often, but should be used to signify a successful entry that requires immediate validation.
7
Tabs A tab is used as an alternative navigation element, helping the user move around within the application.
How to Use Tabs are intended to be used for switching between large bulk areas of content. Bulk areas of content could be anything from a large body of text, a table, or an entire page of information. It is best to separate similar but different information, such as data charts, or completely different information that falls under the same module such as data chart versus paragraphs. When a tab is active it will appear outlined and display a primary color, whereas the inactive tab text will be gray, and will not have be outlined.
Example 1 Within an application tabs are used for navigational purposes only. The user will be on the home screen, and click on the “bills” tab to switch to the bills page.
Example 2 Within the application a user is viewing the dashboard screen. Within the dashboard screen there is a section of tabs labeled “overview, day, week, month” which will update the screens information according to the selection. The user wants to see the dashboard for the week, so they’ll click on the “week” tab and then the screen will update from “overview” to the “week” selection. This tab sequence is acting as a filter between the information.
8
Pills A pills is an arranged set of navigational buttons. Pills are normally arranged horizontally but can also be arranged vertically.
How to Use Pills should be used when a similar functionality as tabs is desired. The difference between pills and tabs are that tabs are connected, where a pills is a self contained tab set. Pills act as a navigational tool. However, when a specific item is chosen, it is likely to refresh the page for new information to appear. Horizontal alignment would be the best choice when it is used for a top navigation, that is the first visual example above. The vertical alignment would be best when it is being used for a secondary in-page navigation, which is the example below.
Example Within an application a user will be on the “home” screen and that tab will be highlighted by the primary color. When the user clicks on “Messages” the messages tab will switch to the primary color, and the home tab will go back to it’s unselected state.
9
Breadcrumbs Breadcrumbs show hierarchy-based information for a site. In the case of blogs, breadcrumbs can show the dates of publishing, categories, or tags. They indicate the current page's location within a navigational hierarchy.
How to Use Breadcrumbs ​should be used to show the user their trail of how they got from point A to point B. The breadcrumb trail should always show the emphasis color on the page their presently at. The user should also be able to hover and click over previous pages and return to them. If the breadcrumb is used within a panel with a pre-existing gradient bar, then keep the breadcrumbs within the bar for hierarchy purposes. If the breadcrumbs relate to something that include a pre-existing gradient bar, then keep the breadcrumbs backgroundless.
Example If the user was going through a set of folders looking for a specific file within the application, the user would see a trail of previous landing pages that have brought them to their present screen. The user now knows the folder path and how to find the file again.
10
Pagination Pagination is used to show the user what page they are presently on. It also allows the user to get from one page to the next either by clicking on the next or back button, or a specific visible page number.
How to Use Pagination should be used when there are multiple pages of information a user needs to access; this includes pages within tables and forms. Pagination is used opposed to a pager to allow the user to select a specific page number from a list, in addition to clicking forward or backward. Above in the first row you’ll see the pagination bar in its natural state, and in the second row you will see the pagination bar with a page selected.
Example A user will be viewing information inside of a table within the application. The table has a lot of information available, too much to only have a scroll bar, so there is a pagination bar included so the user can easily sort between the pages of information, by selecting a specific page number from the available options, or pressing the “next” icon to get to the next set of 5 pages.
11
Pager A pager helps the user sort forwards or backwards between pages, especially within a form.
How to Use A pager is to be used within a form or wizard. It’s best used to go between two pages, or as a guide for a step by step process that doesn’t require the user to choose a specific page among many. A pager can consist of “next / previous” buttons or “older / newer” buttons, that help the user move forward or backwards between pages. In the above example you’ll see the first pager bar is in an active state. Whereas the pager bar below shows “older” as a disabled option. The disabled option would appear when there are no previous pages for a user to move to.
Example A user is filling out a form that has more than one page of steps, the “next” button will take the user to the next step, where the “previous” button can allow the user to return to the previous step to change an input field.
12
Alerts Alerts provide a way to style messages to the user. They provide contextual feedback messages for typical user actions.
How to Use An​ alert ​should be used when there is important information that needs to be displayed. The alert will be used to display this information. Alerts should automatically appear in concurrence to the event. Events can be defined as warnings, successes, errors, or additional information.
Example Within the application, if a user enters in the wrong information into an input field, the alert should appear immediately along side of the input field so the user knows what needs to be changed.
13
Labels A label is static non-clickable element that highlights specific information such as counts, tips, or other markups.
How to Use Labels are meant to be small, static non-clickable pieces within or next to an element. They are meant to highlight various pieces of information, and have a resemblance to a button.
Example A user lands on a page containing a table within the application. The table is displaying a list of items with start and end dates. A few of the rows in the table are displaying a red label with the word “expiring”. Now the user is aware that the line item is expiring soon. The user cannot click on the label for more information, but will see this is just a marker of information.
14
Badges Badges are mainly used to highlight new or unread items.
How to Use A badge should be used to showcase a notification that correlates with the element it’s positioned next to. Often this will be a number, but it could also be a word. Above the “Home” pills is selected, and an inverse of the “1” notification is displayed within the highlighted area. The message pills is not selected, so the badge will appear with the primary color, until “messages” is selected and the notification is received.
Example Within the application there is a message center, once the user logs in they see a badge displaying the number “2” next to the message tab. This badge is alerting the user that there are two unread or new messages available for them. When the user clicks the tab and reads the messages, the badge will go away. If the user only reads one of the messages, the badge may update to “1”.
15
Progress Bar The purpose of a progress bar is to show that assets are loading, in progress, or that there is action taking place regarding elements on the page.
How to Use A ​progress bar​ should be used whenever the progression status of an operation needs to be displayed. The progress bar is best used for an upload, download, update, or to display a changing percentage of data in a chart. When showing the exact percentage a user can either hover over the bar, or the percentage can be displayed on the same line.
Example Within the application a user wanted to see the status of a budget for an on going project. On the screen which displays the budget the user would see a progress bar. This progress bar would display the present progression of the budget and it’s percentage. If the user wants to see specific budget the numbers, they will hover over the progress bar, and the exact numbers would be displayed.
16
Jumbotron A jumbotron is used to display a full screen of information.
How to Use A jumbotron should be used whenever a full screen is needed to display information, and the only way a user can be redirected back inside the application is by clicking something like a button on the jumbotron. This component is often not used inside non-consumer facing applications. This screen is often used as an initial landing page when a user logs into an application, and is used to display the user a relevant or potentially important message, like an application update.
Example A user logs into an application and is initially brought to a jumbotron screen. This screen is letting them know that they need to update the application using one of the latest browser types. The screen displays a “download” button, which the user will need to click in order to be able to access the application.
17
404 Error The 404 error message is a HTTP standard response code indicating that the client was able to communicate with a given server, but the server could not find what was requested.
How to Use The 404 error page should appear when the user can access the application but the users browser won't run the application, or when a page within the application isn’t able to be loaded, is broken, or no longer exists. This is a full screen blackout which will require the user to go back to the last page they were at to navigate forward.
Example A user is logged into an application where the URL is internet.com. Instead of using the navigation within the application, the user types internet.com/rrdlogstics into the browser. The user is then redirected to an error 404 screen which is letting them know they’re still logged into the application, but they’ve landed on a page that doesn’t exist. The user will need to press the back button in order to be able to move forward within the application again. This screen appeared because the user spelled logistics wrong.
18
List Groups A list group is a grouping of list items.
How to Use A list group is best used when a user needs to select one or multiple items from a list that is found within a form or modal. Here a user has “Reports” already selected, and the user is hovering over “Billing & Payments”.
List Group with Badges A list group with badges is a grouping of items with a badge, or number, associated to each item.
How to Use A list group with badges is best used when the user needs to know there is additional information associated to a specific list item. The image above shows that there is 1 alert, such as a new document, in the Document Repository.
19
List Group with Headings
How to Use A​ list group with a heading​ is used when there is more information to be displayed than just a line item. Instead the line item is the heading, while the information below could be a caption explaining what that list item is, etc.
20
Panel A panel is a container of information, normally consisting of a header to tell the user what is inside of the container, the body of the container is meant for the content, and there may also be a footer attached to a panel.
How to Use A panel should be used when information needs to be divided into separate sections. Information could be a field of text, multiple data visualizations, or a table, etc. The header should be filled with the title or description of the section, and the footer panel can also double as an additional area for content if needed.
Example The user logs into the application and they see two panels. One panel is used to show transit information, while the other panel is used to show billing information. Each set of information is contained within their own panel to display their own relevant information. The transit panel says “Transit” in the title, and within the panel the user sees 2 donut charts and a table graph. The billing panel says “Billing” in the title, and inside the panel the user sees 4 progress bars pertaining to specific clients.
21
Well A well is a container that causes the content to appear sunken, or has an inset effect on the page.
How to Use A ​well​ is an alternative component to use for placing content, as opposed to a panel. The content displayed in a well should be text only and can exist outside or inside a panel. A great use for a well is if you want to call out specific information. It’s a good way to draw attention to a specific piece of information.
Example Within the application a user is searching for a contact. A user selects a company profile and on the company profile page a user will see a well at the top of the company page containing the primary contact information for the specific company.
22
Popovers A popover is similar to tooltip, useful when you need to describe a link, they offer an extended view complete with a heading. For the popover to activate, a user just needs to hover the cursor over the element.
How to Use A popover can be used to include text that links to additional information within the application that may not be displayed directly on the screen. It can also hold additional static information that doesn’t already appear on the screen. A popover stems directly from a clicked or hovered icon, button, progress bar or input field.
Example Within the application the user is viewing a table. The table has nestled folder icons found within each row. A user clicks on the folder icon and a popover appears, giving the user the option to click on 1 of 3 links that will show them additional information that is not already shown on the page.
23
Tooltips Tooltips are useful when you need to describe a link.
How to Use A​ tooltip​ appears once a user hovers or clicks on an icon. It can be used to include text that supplies information about a specific item. This is mostly used to display help information.
Example Within the application the user is filling out a form. On a specific input field the user wants more clarification of the information the input field needs. Next to the field is a question mark icon. The user clicks the icon and the tooltip appears. The tooltip will supply the user with additional information that can help them move forward in their task.
24
Modal A modal is a child window that is layered over its parent window. Typically, the purpose is to display content from a separate source that can have some interaction without leaving the parent window. Child windows can provide information, interaction, or more.
How to Use A modal should be used when a user needs to see additional information, or is prompted to do a specific task and is not being brought to a new page. It’s an alternative option to building an entire page, if you can fit the necessary information within a small subscreen. This comes in handy when a user is uploading a document, needs to update a saved form, is editing account settings, or doing an internal search. The user will most likely click on an icon or button, which will open up a modal window, which will darken the main screen, drawing focus to the modal window.
Example Within the application a user is completing a form which asks the user to choose an already existing document within the application. The user will click on the file icon which will open up a modal window. The modal window in turn will darken the main screen which draws the users focus to the modal window. The user will then select a document from a list of options, click on the primary “select” button which will close the modal and be returned to the main screen.
25
Custom Bootstrap Elements Global Left Hand Navigation Navigation is the system that a visitor can use to move around a website.
How to Use The ​global navigation​ is positioned vertically to the left. The navigation is collapsed and each module in the application is depicted through icons. A vertical global navigation should be used when there are multiple (5+) high level sections within an application. It’s also best used to maximize space within your application.
Example When the user clicks on the menu icon in the upper left corner the navigation will expand, and the module name will now appear next its associated icon. When the user hovers over an icon or name, it will appear in the specified hover color. In order to close the expanded navigation the user will click on the menu icon again. When the navigation is closed but a user hovers over an icon, the single module name will expand outwards, and appear with the appropriate hover color. If the user is to click on any section, the user will be directed into a new module within the application.
26
Dropdown Field A dropdown field allows the user to select an entry item from a specified list for that form field.
How to Use A dropdown field should be used when the user needs to select from a list of specific criteria for that form field. This is different than a button dropdown because of that way it’s styled.
Example While a user is filling out a form in the application, a field titled “Location” will display a dropdown button, which once clicked, requires the user to choose a location from a predetermined list. Once the user selects their location, it will replace the previous button text with the location name. If the user wants to change their selection they will just click the dropdown again, and make a different selection from the list.
27
Date Input A date input allows a user to choose a month, date, and year.
How to Use A ​date input​ could be used as a singular date picker, or a double date picker, which allows the user to select a time period. The date picker can be used inside a form as a form field, in a filter bar, or as a filter within a chart. If the date picker is used in a form, it should display the dates in the same styling as a dropdown form. If the date picker is used as a filter, the icon can just be displayed until a date is selected, where then the date will appear next to the icon.
Example A user within the application wants to select a date range for the data viewed in a table. The user will click on the date picker icon and select the day for a specific month and year. For the day, the user will see the day of the month highlighted on hover, prior to their selection. The user can also click on the arrow icons above the dates to choose a month and year they want.
28
Search Filter A search filter helps the user choose what specific categories they want to search through.
How to Use A search filter should be used when there are categories the user wants to search for. The search filter would most likely be used for a table, or large quantities of sortable data.
Example A user wants to search for a specific location under scheduled delivery inside of a table, so the user will type the location “Seattle” and to search under specific fields, the user will select “Location” and “Scheduled Delivery” when the user goes to search, if the location “Seattle” is found under any of those specific fields it’ll appear in the table window. If the user wants to clear their selections they can either unclick a specific field, or press the “clear all” button.
29
Toggles A toggle is a tool used to switch from one effect, feature, or state to another.
How to Use A toggle should be used when the user needs a fast or quick way to switch on or off a feature, or change an element from one state to another. It is essentially a good, styled hierarchical tool for when a user needs to change a state quickly.
Example A user wants to change the setting of a user from activated to deactivated. The user would see the toggle is
presently set to “Activated”, so the user would click on the non-selected part of the toggle to make that selected. So “Deactivated” would be the highlighted selection now.
30
Sortable Table A table component with a set of facts or figures systematically displayed, specifically in columns which are sortable.
How to Use A​ sortable table​ should be used when a user needs to easily sort through data rows. Normally the sorting function will bring the newest or oldest addition to the top of the line or sort by numeric or alphabetical order. This feature makes tasks easier for the user by limiting scrolling or pagination.
Example Within the application a user is viewing a table. The user wants to see the column for location in alphabetical order. So the user will click on the sort icon next to the location column, and the rows will reorder themselves to display location names by A - Z.
31
Expanded Table An expanded table is a component with a set of facts or figures systematically displayed once expanded from its original closed or hidden state.
How to Use Expanded tables appear within a bounding box and they are great as small tables. If they the table is larger than 10 lines, it must be able to scroll. These are not sortable tables. Each table line is half the size of the large tables, and they all show alternating line colors (white, and gray). Each expandable table may also have it’s own additional components in the header.
Example user is looking through a table within the application, and within the table there is a row with the option to A view details. The user will click on the expand button and the expanded table will open up showing a secondary table of information related to it’s associated row.
32
Wizard A wizard is a help feature that automates complex tasks by asking the user a series of questions, or having the user fill out necessary information, broken out into specific steps.
How to Use A wizard should be used to break down a complicated step into a step by step process. It’s perfect to use when there is a lot of information a user needs to fill out, and a good way to show the user what step they’re on with the ability to move backwards in the process if necessary. However Wizards should not be used when the step process exceeds 10 steps, the less steps used in the Wizard the better. Or else it’s a sign the Wizard might not be the best tool to use for the process.
Example A user needs to submit a form, and the form follows a wizard, or step by step process of what needs to be filled out before it’s submitted. The user will complete step one by selecting their service type, step two providing location and dates and so on until step 6, when the user will confirm all of the information before officially submitting the form. While filling out each step the user might realize they put the wrong address, and go back to step two to change the location.
33
Page Loader A page loader is what displays when a page is loading.
How to Use The ​page loader​ should be used as a moving svg to show the loading process. It should be showed when there is a longer than typical load time between pages and inside of tables, etc.
Example Within the application a user goes to click on the next page of a table, and the table needs some time to load in the new data, the loading icon would be displayed to the user to let them know that the new data is loading.
34
Interactive Donut Chart An interactive donut chart should be used as a visualization of numeric data separated by categories.
How to Use The interactive donut chart should be used to display numeric data in specific categories. Each category should be color coded, and there should be an interactive legend that goes with it showing what color belongs to what category. If the user hovers over or clicks on the name, the section of the donut chart will expand and the number within the circle will be updated according to that section. The chart also works in the opposite way where if the user hovers or clicks on a specific section of the donut chart, it will expand and the number within will update, and the name on the legend will highlight.
Example A user is on their dashboard screen, they see the donut chart and the legend below. The user hovers over the blue “Llectus” portion of the chart and it expands. Inside the user now see’s “12 Llrctus” and the legend below is highlighted.
35
Interactive Vertical Bar Graph A vertical bar graph is a chart that uses bars to show comparisons between categories of data. A bar graph will have two axes.
How to Use A ​vertical bar graph​ should be used when a visualization between an X and Y axis needs to be displayed. For these specific graphs, when a bar is hovered or clicked, it will change color and also a popover will display the correlating data associated with that specific chart bar. The X axis title will also be highlighted with hover or a click, and vice-versa.
Example In the application the user will see a graph showcasing the average dollar amount for revenue and margin for Company A - G. If the user wants to see the specifics for Company E, they will hover over company E, and in the popover they will see the company name and the specific dollar amount for the Margin and Revenue averages.
36