
GIS
This page defines the styleguides and UI Patterns for i2S implementation team.
This page defines the styleguides and UI Patterns for i2S implementation team.
After defining the UI patterns, this is how forms must be.
The user needs to quickly enter data into the system, without being forced choose data from combo-boxes or other selection mechanism.
An input text form field is presented with an accompanying label describing what input is expected in the field. The label describes a specific structure the user must follow to input a valid value.
The user needs to enter data into the system and labels don’t completely explain what the field is about.
The user needs to enter data into the system and the system helps with suggestions.
The user needs to enter data into the system, whereof some options are most likely to match the default values.
The user wants to add formatted text content, but does not have the know-how to write HTML.
The user wants to check how changes in form fields affect an end result as quickly as possible.
The currently entered password in the password field is measured on an often horizontal scale from none to max security.
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.
This is how "Step-by-step" forms must be.
Add a block of graphics describing the steps involved in submitting data to the system.
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.
Document your interface in-line with descriptive help blocks.
The task of inputting data into the system is parted into multiple steps. Each step is presented to the user one at a time.
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.
Users need feedback that their action is being performed but may take a while to complete.
This is how "Tabs" forms must be.
A horizontal and vertical bar contains the different sections or categories of your application.
This is how "breadcrums" navigation forms must be.
Show the labels of the sections in the hierarchical path that leads to the viewed page.
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.
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.
The users need to find a specific page.
This is how "Menus" must be.
A list of main sections is listed on the same horizontal line.
Each headline / section has a panel, which upon clicking can be expanded either vertically or horizontally into showing its subsections.
This is how "Content" must be.
Use the available buttons style or class depending of the following situation:
Green button: must be use for submit data into the server, situations like "submit" or "create".
Blue button: must be use for situations like "Previous", "Next" or "Close".
White button: must be use for situations like "Print" or open a lightbox.
Light blue button: must be use to check more information if needed.
Red button: must be use if the action will make the user lose data.
Red link: must be use if the action will cancel the action without losing data.
<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>
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.
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.
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.
Indicating clearly required or optional fields on a form tells the user what needs to be filled in to complete the form. If most of the form fields are optional, use text or asterisk (*) next to each field to indicate required fields. If you choose asterisk, provide a legend which tells the meaning of it.
This is how dealing with information data must be.
Provide dropdown inputs that present the categories by which the user can filter the data set by.
Nome | Data de Nascimento | Nº contribuinte | Nº identificação | Nº apólice |
---|---|---|---|---|
António Silva | 1965/04/23 | 123654321 | 123654897 | 1198 |
Joana Silva | 1945/02/22 | 981234321 | 2830489932 | 1187 |
Zulmira Silva | 1975/11/11 | 952354321 | 193827463 | 1128 |
Inês Silva | 1956/08/30 | 567654321 | 192876423 | 1135 |
Patrícia Silva | 1968/05/29 | 521654321 | 394002918 | 1167 |
Tiago Silva | 1978/09/13 | 284639836 | 293847565 | 1148 |
Francisco Silva | 1980/01/29 | 283940247 | 2938476547 | 1173 |
João Silva | 1965/03/12 | 96378456 | 28347251 | 1122 |
Manuel Silva | 1969/02/10 | 273894021 | 293871544 | 1145 |
Pedro Silva | 1971/12/25 | 38203947 | 119283746 | 1133 |
Nome | Data de Nascimento | Nº contribuinte | Nº identificação | Nº apólice |
---|---|---|---|---|
António Silva | 1965/04/23 | 123654321 | 123654897 | 1198 |
Joana Silva | 1945/02/22 | 981234321 | 2830489932 | 1187 |
Zulmira Silva | 1975/11/11 | 952354321 | 193827463 | 1128 |
Inês Silva | 1956/08/30 | 567654321 | 192876423 | 1135 |
Patrícia Silva | 1968/05/29 | 521654321 | 394002918 | 1167 |
Tiago Silva | 1978/09/13 | 284639836 | 293847565 | 1148 |
Francisco Silva | 1980/01/29 | 283940247 | 2938476547 | 1173 |
João Silva | 1965/03/12 | 96378456 | 28347251 | 1122 |
Manuel Silva | 1969/02/10 | 273894021 | 293871544 | 1145 |
Pedro Silva | 1971/12/25 | 38203947 | 119283746 | 1133 |
Whenever you make a change to any input fields, the search results are immediately updated without refreshing the page.
Present items that match what the user is entering into a text field.
This is how "tables" must be.
Each column headline/label is a link.
To differentiate table rows from each other, a different shade is used as background color for every second row.
Provide some sort of mechanism to switch or alter the default style of a page so that it fits the specific needs of the user.