Fill in the blanks

The user needs to enter data into the system and labels don’t completely explain what the field is about.

Usage

• Use when you find yourself creating labels for input fields that does not really explain what the input field is all about;
• Use when you find yourself creating long and complicated labels for input fields, which in turn makes it hard for users to understand;
• Use when you can possibly express the context of the input field by placing it in a sentence;
• Use when filling out the input field is mandatory or strongly appreciated. Leaving parts of a sentence unfilled creates annoyance in the user;
• Use when you have a relatively small set of input fields to place as part of the sentence. If you have many input fields, placing them all in a sentence can seem tiresome for the user, as the sentence structure forces the user to read all sentences through and place all input fields in context of those sentences;
• Do not use if you have many fields that are not required to be filled out.

HTML Code

Input prompt

The user needs to enter data into the system and the system helps with suggestions.

Usage

• Use when the label of an input field does not fully explain what should be filled into it or when using such a label feels like over-explaining the interface;
• Use when an example text or question answers what should be filled into an input field just as well as a label;
• Use when you want to save the space that a label otherwise takes up;
• Use in combination with a label, to further explain what kind of input is needed.

Good defaults

The user needs to enter data into the system, whereof some options are most likely to match the default values.

Usage

• Use when the user has to choose among many options, whereof some are most likely to match the default values chosen by other users;
• Use when it is possibly for the system to make qualified guesses regarding what the user might choose;
• Use when it seems as a complicated thing to fill out the form without the default: when the number of required choices hinders the user from finishing filling out a form;
• Do not use for input fields that are important for the user to think about. For instance for signing up to a newsletter or accepting the terms and agreements of a website.

HTML Code

WYSIWYG editor

The user wants to add formatted text content, but does not have the know-how to write HTML.

Usage

• Use when you want to give the user a clear indication of how his or her content is going to look like when it is published. WYSIWYG is short for What You See Is What You Get;
• Use when the users of a site is not comfortable in formatting text by using HTML codes, a markup language such as textile or markdown;
• Use to lower the barrier of letting your users add formatted content to your site;
• Use when you want an easy way to integrate media into the formatted content of your site that does not require HTML or any other syntax knowledge;
• Use when the user is inclined to spend time correcting small layout details of his or her writing. As the user can see the formatted result as they edit it, they are boosted with confidence and allows for quick and good looking results fast;
• Do not use if you want to keep the HTML syntax clean. Many WYSIWYG editors are known to produce horrible HTML code;
• Do not use if you want the editor to function in all browsers. WYSIWYG editors rarely support all browsers, and if they do, it is often only the latest releases of the browsers.

Live preview

The user wants to check how changes in form fields affect an end result as quickly as possible.

Usage

• Use when you want to provide the user with a real-time preview of what he or she is creating;
• Use when it is hard for the user to comprehend how the final output will be without having a preview to reference;
• Do not use when the input is straightforward and the resulting output does not depend on a specific layout.

Preview button

×

PREVIEW

× Atenção! Antes de publicar, confira a seguinte informação.

Dados Gerais

Nome
Dr. Francisco António Mateus Silva

Data de Nascimento
1977/01/01

Morada
Rua do Zambeze, 192

Localidade
Porto

Publicar Cancelar

HTML Code

Password strenght meter

The currently entered password in the password field is measured on an often horizontal scale from none to max security.

Usage

• Use when you want your users to choose passwords for their user accounts that are hard to break or guess by either human or computerized help;
• Use when you want to higher the entry barriers for attackers to get started tampering with your system;
• Use when you want to be sure that your users know what a good password is and that their chosen password follows such guidelines.

HTML Code

Input feedback

When users submit content to your site via forms, errors in the data the user has provided is bound to happen from time to time.

Usage

• Use when you want to provide feedback to the user upon submitting content to your site;
• Use when you want to notice your users about errors that happened during form submission;
• Use when you want to let your users know that everything went as planned upon content submission.

HTML Code

Explaning the process

This is how "Step-by-step" forms must be.

Steps left (step-by-step, form progress)

Add a block of graphics describing the steps involved in submitting data to the system.

Usage

• Use when the user is about to go through a longer process of giving data to the system that is longer than two screens (steps);
• Use when the steps of a process is so long that the user might get the impression that it will go on forever without the guidance of steps;
• Do not use when there is only 1 or 2 steps in submitting data to the website;
• Do not use when the process of filling out data is easy foreseeable.

1. Step

2. Step

Some information.

3. Step

Agendamento

Data do agendamento

Tipo de movimento
Rec. Entrega suplementar Todos

Repetitivo
Único Rec. Entrega suplementar Replicado para próxima anuidade

Voltar

Seguinte

4. Step

Final step.

HTML Code

Process overview

Give an impression to the user, how the system will look once filled with data – or guide him or her to start filling it with data.

Usage

• Use when your application feels without life and empty before the user has started to enter data into the system;
• Use when you want to motivate the user to start using the system;
• Use when you want to aid the user in getting started with your web application;
• Use when you want to show best practices of using your web application;
• Use when you want to guide the user to get a good start with your web application.

HTML Code

Help box

Document your interface in-line with descriptive help blocks.

Usage

• Use when an interaction with your website is not necessarily intuitive and self-explanatory in itself;
• Use inline tips to document your interface;
• Use when you want to motivate the user to start using the system;
• Use when you want to aid the user in getting started with your web application;
• Use when you want to guide the user to get a good start with your web application;
• Use to gently introduce functionality to the new and untrained user;
• Use the ‘hide’ functionality to avoid frustration of the experienced and trained user.

HTML Code

Wizard (Go Back, Continue)

The task of inputting data into the system is parted into multiple steps. Each step is presented to the user one at a time.

Usage

• Use when the user needs to perform a task or a goal that dictates more than one step.
• An example is adding an image to a website which can include uploading the image and cropping the image; the image cannot be cropped before it is uploaded to a server;
• Use when the user needs to perform a complex task consisting of several dependable sub-tasks;
• Use when the user needs to input complex data into a system that is easier for the user to comprehend parting the process into multiple steps;
• Use when the user needs guidance: the user wants to achieve an overall goal, but may not be familiar in the steps needed to reach the goal;
• Use when the steps needed to reach a final goal may vary due to decisions made in previous stages;
• Use when the user lacks necessary domain knowledge;
• Use when the user must complete steps in a specific sequence.

1. Step

2. Step

Some information.

3. Step

Agendamento

Data do agendamento

Tipo de movimento
Rec. Entrega suplementar Todos

Repetitivo
Único Rec. Entrega suplementar Replicado para próxima anuidade

Voltar

Seguinte

4. Step

Final step.

Tooltips

A tooltip is a dialog box that displays when you hover your cursor over a web page element such as a hyperlink. It provides additional information about that element.

Usage

• You need a textual description to make it explicit what will happen when the user interacts with the object.

HTML Code

Processing page

Users need feedback that their action is being performed but may take a while to complete.

Usage

• You are designing a site where slow back-end systems are connected to;
• Some requests to the back-end system may take 5 to 30 seconds to complete and the users need some feedback telling them that their request is being performed and that they'll have to wait a bit;
• Only use this pattern when it is not possible to speed up the back-end processing time.

HTML Code

Tabs

This is how "Tabs" forms must be.

Navigation tabs

A horizontal and vertical bar contains the different sections or categories of your application.

Usage

• Use when there are more than 2 sections;
• Use when there less than 8-10 sections depending on the length of each section name;
• Use when section names are relatively short;
• Use when you want the navigation to fill the entire width of a page;
• Use when you want to provide a list of the highest available sections/subsections of the website;
• Do not use when wanting to show content-specific data. For instance for showing latest articles;
• Do not use when there is no need to single-out the currently selected option;
• Do not use when the list of sections or categories call for a “more…” link. Then consider another navigation pattern.

HTML Code

Jumping in hierarchy

This is how "breadcrums" navigation forms must be.

Breadcrumbs

Show the labels of the sections in the hierarchical path that leads to the viewed page.

Usage

• Use when the structure of the website follows a strict hierarchical structure of similar formatted content;
• Use when the structure of the site is parted in to sections which can be divided into more subsections and so on;
• Use when the user is most likely to have landed on the page from an external source (another site deep linking to the web page in question). For instance from a blog or a search engine;
• Use when the page in question is placed fairly deep into the hierarchy of pages and when no other form of visual navigation can show the details of the same deep level;
• Use together with some sort of main navigation;
• Do not use on the topmost level of the hierarchy (typically the welcome page);
• Do not use alone as the main navigation of the website.

HTML Code

Shortcut Dropdown

Add a combobox (a select box in HTML) to list a number of fixed locations (URL's) on one or more pages. When the form is submitted, the user is redirected to the chosen page.

Usage

• Use to shortcut an otherwise hierarchical structure of a website;
• Use when there are specific functionality or pages that are more frequently used than other parts of the website. Use the shortcut box to show these choices in order to shorten the path for the users;
• Use when you want shortcuts to pages that are possibly on different hierarchical levels of the page;
• Can also be used as navigation when short on space, although it is not advised.

HTML Code

Homelink

Create a link to the starting point or front page of the website on the site’s logo on every single page on the website.

Usage

• Use when the user often enters the website through a page other than the start site. The user needs to be able to easily find his way to the starting point or front page of the website.

HTML Code

Sitemap

The users need to find a specific page.

Usage

• Small to medium sized sites. Typically when the site has more than two levels in the structure and many elements on each level. For such sites, the sitemap functions as a navigation alternative. For very small sites the main navigation typically already resembles a sitemap. Don't use sitemaps for really large sites unless it is a catalog. Users want to see where they can go. Users know that a site is organized but they don't know how. Users want to see where they are.

HTML Code

Menus

This is how "Menus" must be.

Content

This is how "Content" must be.

            <button type="button" class="btn btn-default">Default</button>

            <!-- Indicates a successful or positive action -->
            <button type="button" class="btn btn-success">Success</button>

            <!-- Contextual button for informational alert messages -->
            <button type="button" class="btn btn-info">Info</button>

            <!-- Indicates caution should be taken with this action -->
            <button type="button" class="btn btn-warning">Warning</button>

            <!-- Indicates a dangerous or potentially negative action -->
            <button type="button" class="btn btn-danger">Danger</button>

            

Thumbnail

A thumbnail is a miniature version of a larger picture. The thumbnail can illustrate anything graphical: a picture, movie or even a screenshot of a webpage.

Usage

• Use when you have a collection of images that you want to present to the user.
• Use when downloading full-size versions of all of the images you want to present to the user will both take up much bandwidth but will also take a long time for the user to download.
• Use when you want to allow the user to browse quickly through a collection of images.
• Use when you want to give the user an impression of an image, movie or page before he or she decides to download the original.

HTML Code

<img src="globalgis_files/images/thumb.png" alt="..." class="img-rounded-example"> <img src="globalgis_files/images/thumb.png" alt="..." class="img-circle-example"> <img src="globalgis_files/images/thumb.png" alt="..." class="img-thumbnail-example">

Error, Info & Warning Messages

A thumbnail is a miniature version of a larger picture. The thumbnail can illustrate anything graphical: a picture, movie or even a screenshot of a webpage.

Usage

• Use when you have a collection of images that you want to present to the user.
• Use when downloading full-size versions of all of the images you want to present to the user will both take up much bandwidth but will also take a long time for the user to download.
• Use when you want to allow the user to browse quickly through a collection of images.
• Use when you want to give the user an impression of an image, movie or page before he or she decides to download the original.

× This is a success message!

× This is an information message!

× This is a warning message!

× This is an error message!

HTML Code

<!-- Success message --> <div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <img class="icon" src="globalgis_files/images/icon-success.png">This is a success message! </div> <!-- Information message --> <div class="alert alert-info"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <img class="icon" src="globalgis_files/images/icon-info.png">This is an information message! </div> <!-- Warning message --> <div class="alert alert-warning"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <img class="icon" src="globalgis_files/images/icon-warning.png">This is a warning message! </div> <!-- Error message --> <div class="alert alert-danger"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> <img class="icon" src="globalgis_files/images/icon-error.png">This is an error message! </div>

Search

This is how dealing with information data must be.

Tables

This is how "tables" must be.

Adaptable View