Skip to end of banner
Go to start of banner

Tagging

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 3 Next »

Lead:  Omer.Glazer (Unlicensed)

Related Pages: << Links to related pages, if relevant >>


Description

Tagging is one of the most frequent tasks. A tag 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 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.

The system will come with a set of out of the box default tags, users will be able 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.


Tags as links

Used to clearly state that the tag is linked to another page. clicking on a tag link usually leases the user to a search result page , searched by the the select tag.


Tags as buttons

Same functionality as link tags with deferent style.

Tags mimicking a physical tag,

As in Wordpress, mimicking a physical tag for quick comprehension of the ui element.

Usage & Behaviour

<< Use a visual for each sub-section >>

General guidelines

  1. 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

  2. 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 >>

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>>

  • No labels