...
...
...
...
...
...
...
...
...
| Table of Contents |
|---|
Description
...
Tagging (or
...
‘Labels’) allows a user to categorize content through keywords that they define, to a piece of information (such as a page, database record or a file).
...
Basic Flows
Tagging a singel item
Clicking the actions icon, then clicking the tag name will apply the tag and close
...
the tags list.
Clicking on the tag text will assign tag and closed the popup.
...
Assigning one or more tags at once
...
Clicking the actions icon, then clicking the checkboxes near tag name, clicking apply to execute selection and close list.
...
If the tags list is nested, checking that checkbox once, will select all the list tags, checking the checkbox once again will unselect all the list tags.
...
Types
Type | Usage | Image |
|---|---|---|
categorize a piece of information | categorize, or organize items using keywords |  |
field entry with multi select entitles | add multiple entitles to an entry filed such as ‘Attendees’ | missing image |
The system will come with a set of out of the box default tags (Top-down taxonomies), In addition you can enable users to create new tags (Bottom-up taxonomies).
...
Tag selector withoutTag selector without manage tags
...
Tag selector withTag selector with manage tags
...
Nested list
...
Usage & Behaviour
General guidelines
Tagging action
The tags selector appears within a
...
-module list (missing from popup types)
Tags may be added to an entire page content or to a particular piece of information within a page such as tables records, list item and more.
Multiple or single tags can be used to categorize items.
...
Tags may
...
You may set the selector tags list as nested under ‘All’ item or leave it as a flat list.
Tagging system:
...
be added to multiple items at once.
Tags elements presentation
Tags should be placed in close proximity to the content it is categorizing.
Tags are shared within an organisation.
Tags should be used when
You want to let the user categorised an item and make it easier to find it.
The content on is possibly mapped into one or multiple categories.
You want to let users organize their contributed data themselves.User conducts “item/s triage” to determine and mark: Relevancy, Grouping, Importance, Categorisation, Affiliation, Reporting.
Structure
The pattern is composed of:
Add tags action
Tags chips
Tags selector
Search field
Nested / flat checkbox list
Actions
‘Apply’ button
Manage tags (Optional)
Create new tag (Optional)
Placement and Positioning
Tags chips may be placed within detail panes, table cells and cards.
It’s recommended to spread out the tags chips as much as possible, in order to present out-front the different classifications.
In case the tags space is limited, several bags will be merged together:
Tags Placement | Image |
|---|---|
Empty state |   |
Tags are spread out tags | |
Last tags are merges |   |
All tags are merges |  |
Internal Logic
Assigned tags chips as well as selector checkbox list will be sorted alphabetic
States
Tags Chips
...
Tags selector
Default state
‘Apply’ button is disabused
‘Create New’ and manage tags are enabled
Upon one (or more) tag selection / deselection
‘Apply’ button will be enabled
‘Create New’ and manage tags are in disabused .
Search
...
Typing in the search field will activate a live search
By default the ‘Search’ field is in focus.
Once user starts typing a search term, the action will on the bottom of the dialog box will change, to quickly create a new tag of the entered input.
Interaction
Clicking (any) tag text or Add tags action button will open the tags selector dialog box
Hovering (any) tag chip changes the frame the frame to blue
Hovering regular tag shows the remove icon ( X )
Hovering regular tag text (left side) will change the text area background to dark gray.
Hovering the remove icon (right side) will change icon ( X ) background to dark gray.
Clicking the remove icon ( X ) will remove the tag
Best practices
Wherever assigning tags is implemented it is vital to enable user also to filter by these tags.
It recommended to enable the ability to tag multiple items at once, on table and list pages where listed items are 'Taggable'
Filtering by tags
User will be able to filter by tags whenever tags are assigned to the page entities.
The filter panel (container) and filter chiclets follow the search panel cross system guilders.
The search panel tags list will be the same as the tags selector list structure( Flat/Nested)
Tags filter panel | Tags Filter chiclets |
|---|---|
 |  |
Tagging multiple items at once
...
On table and list pages, User will be able to ….
Managing tags (Optional capability)
Creating (defining) and managing bottom-up taxonomies tags, may be included or not in the tagging feature.
Creating and managing bottom-up taxonomies tags may be an autorotation granted by rule.
Creating a new tag
...
By default the field is in focus, user will add his new tag and click ‘Create’.
The popup will close, add the new tag will already be assigned to entity.
Managing tags
Tags appear in a table, with Tag name, Indication of the tag is enabled or not, count of tagged items and actions.
User can Enable (enable to tag with) each tag (System and custom)
...
Edit a tag
Only custom tags may be edited.
...
Remove tag
Only custom tags may be deleted.
Deleting a tag will not delete the records it’s assigned to.
...
Contrast & size compliance
<<Visual designers must comply with the minimal of Contrast + Font Size Guidelines for each component>>
Design
Zeplin link | Screen thumbnail |
|---|---|
 <<Short Zeplin link. YouUse this >> | <<Screen with 200 width>> |
Code
<<a box containing the code - discuss with Femi>>