...
...
...
...
...
...
...
...
...
...
...
| 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).
...
User conducts “item/s triage” to determine and mark:
Relevancy
Grouping
Importance
Categorisation
Affiliation
Reporting
Each organisation has it’s own untick tagging system.
Each person has it’s own categorisation system.
...
...
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)
...
.
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.
Add / manage tags may be applied to a singel entity or multiples at once.
Tagged items can by be quickly searched and located by the filter panel.
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.
Tags may be personal (per each user) or shared within an organisation.
Basic Flows
View Tags
...
Multiple or single tags can be used to categorize items.
Tags may 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.
...
If the entire set of assigned tags don’t fit within the layout, the last tags will be merge and counted.
...
If only one tag fits within the layout (like in table column), then a single tag shape with the number number of assigned tags will be displayed.
...
Clicking any tag will open the ‘Edit tags’ dialog box
Editing tags
Tagging a singel item
...
From an action bar menu or a single item actions menu, Once clicking on the 'Edit Tags' action icon, the following dialog box will appear:
...
Assigning a single tag
User clicks a tag label, the dialog box will close and tag and the tag will be assigned.
...
Assigning one or more tags at once
Once one (or more) check box is checked/ unchecking, ‘Apply' button will become enabled,
Clicking the 'Apply’ button will close the dialog and tags selection will be applied.
...
Assigning ‘All’ and ‘None’ of the tags
The available tags list is nested under ‘All’ item, checking that checkbox once, will select all the list tags, checking the checkbox once again will unselect all the list tags.
...
Search
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.
...
Magnifier icon: placed at the right area of text field, indicates that this is a search input field.
...
Hint and text input: left-aligned.
...
Once user starts typing, the list will filter out all tags that don’t match the search entry, and entry text will be highlighted in each list item (no need to click the magnifying glass).
...
'x' icon (clear): left-aligned.
...
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.
...
Removing tags
User can remove tags from ‘Edit tags’ dialog box, a quicker way to remove a tag is by hovering a tag label, then clicking the 'X' remove icon that has appeared.
...
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.
Filtering by tags
Types
...
Type
...
Usage
...
Image
...
System assigned tags
...
Tags that the system automatically assigned to items and users can not control and use.
...
Top-down taxonomies
...
Predefined tags that users can use.
...
Bottom-up taxonomies
...
Tags that are created and managed by users. for their convenient classification use.
Usage & Behaviour
Use when the content on is possibly mapped into multiple categories and does not necessarily only fit into one hierarchical category.
Use when you want users to contribute data and let them organize their contributed data themselves.
General guidelines
Structure
‘Edit tags’ dialog box :
Dialog box includes a search field, tags list and actions at the button.
The list first shows the preselected tags in alphabetical order, followed by the the rest of available tags also alphabetical.
Once user selects/ unselects one or more item, the button actions will be replaced with an ‘Apply’ button.
States
...
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>>