Lead: Omer.Glazer (Unlicensed)
| Table of Contents |
|---|
Description
A tag (or ‘Label’) is a keyword or term assigned to a piece of information (such as a page, database record or a file).
This kind of metadata helps describe Usage & Behaviour
General guidelines
Tags should be used when
You want to let the user categorised an item and
make it easier
to find
it.
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 may be assigned to an entire page content or to a particular piece of information within a page such as tables records, list item and more.
Tagging systems:
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)
.
Tags may be
personal (per each user) or shared within an organisation
Usage & Behaviour
General guidelines
Tags should be used when
you want to help the user describe
- make it easier to find standing out content and for their peers to discover content related to their interests
.
If you have only a small space to display a lot of content, Collapsing the page minimizes scrolling.
Hiding parts of the content can make the web page appear less daunting.
Structure
Tags chips | From an action bar menu or a single item actions menu, Once clicking on the action icon, the 'Edit tags’ popover box will appears |  |
Tags are spread out, 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 chip fits within the layout (like in table column), then a single tag shape with the number number of assigned tags will be displayed. |  | |
Edit Tags popover |
|  |
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 'Edit tags’ popover box will appears
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
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.
Managing tags
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 name.
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’ popover :
popover 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
<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>
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>>