Click Potential, Competitive Density, CPC
TIP
Make sure to read Filter common rules.
These filters are combined in one guide, since they differ only in the filter parameter and the name. The principle of work and states are the same.
Description
These filters allow to enter only a custom number range. They have no preset data since click potetntial, competitive density and cost per click are very individual parameters for each product.
When working with these filters, it's important for the user to:
- understand that they can enter custom values
- quickly enter the data
- quickly understand that nothing was found
- quickly reset the entered data and search again
- be able to change data
Appearance
Trigger
Set the trigger min-width to 80px. It's not recommended to make the trigger smaller. When there is enough space in the interface, make the width of the trigger dependent on the content, so the trigger value isn't truncated.
Filter | Appearance example | Description |
---|---|---|
Click Potential | The Click Potential filter trigger always has one size. Don’t abbreviate its name. | |
Competitive Density | ||
CPC | The CPC filter trigger always has one size. Abbreviate its name to CPC (USD). |
Dropdown
Don't make the dropdown width less than 224px, otherwise the maximum possible values won't fit into the inputs.
Filter | Appearance example |
---|---|
Click Potential | |
Competitive Density | |
CPC |
Interaction
These filters use the InputRange pattern.
When user opens the dropdown, keyboard focus immediately goes to the first custom range input.
Filter interaction is described in detail in Filter common rules.
Tooltips
For more information about tooltips, refer to Filter common rules.
Filter | Appearance example |
---|---|
Click Potential | |
Competitive Density | |
CPC |
Validation
Validation is described in the Filter common rules.
Nothing found
"Empty" states is described in the Filter common rules.