Lead: Omer.Glazer (Unlicensed)
...
Related Pages: << Links to related pages, if relevant >>
...
...
| Table of Contents |
|---|
Description
Tagging is one of the most frequent tasks. A tag is a keyword or term assigned (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). This kind of metadata helps describe an item and makes it easier for users to find their own content and for their peers to discover content related to their interests.
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.
Tags are usually added manually by item's creator or by its viewer, depending on the system, although they may also be chosen by the system itself.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), users will be able In addition you can enable users to create new tags as well.
Basic Flow
<< Relevant only for patterns that have a more complex flow than the typical control (e.g. drag & drop) >>
Types
<< Relevant only if the component has several distinct types (e.g. editable tables, nested tables). In this case each type should be described in a sub-page >>
<<If you are using this section Usage & Behaviour should be used only for the Common functionalities in the page>>
...
Type
...
Usage
...
Image
...
Tag Cloud
...
Typically used to depict keyword metadata (tags), or to visualize free form text. Tags are usually single words, and the importance of each tag is shown with font size or color.[2] This format is useful for quickly perceiving the most prominent terms to determine its relative prominence. When used as website navigation aids, the terms are hyperlinked to items associated with the tag.
...
<< Link to the relevant page >>
Usage & Behaviour
<< Use a visual for each sub-section >>
General guidelines
You want to let the users classify the data of the application in a way that is not provided by the application out of the box and
You want to let the users search data in the application using search criteria other than what you provide in the Search feature.
Structure
<<A description of the structure of the component, including areas, sub-components etc.>>
Placement and Positioning
<<For example, in popups and toast messages>>
Default State
<<When there is more than one state for a control or area. Including default values>>
Content
<<Including labels, microcopy, number of items, order of items etc.>>
Internal Logic
<<For example, controls dependencies in a form>>
States
<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>
Interaction
<<for example, how to change a value – type, arrows, use slider>>
<<use Click target to describe the interaction>>
Validations and errors
<<used for specific components e.g. slider>>
Transitions
<<Used to describe transitions or animations the occurs in any of the interaction stages>>
Best practices
<<e.g. Slider should display a label its on>>
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
Focus management
<<How will the component work with keyboard only - without a mouse. Can be reference if written above
We already set a general guidelines described in Keyboard & Focus Management Guidelines >>
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see Screen Reader Guidelines >>(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.
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.
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.
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>>