Projects/Usability/HIG/SearchPattern: Difference between revisions

From KDE TechBase
< Projects‎ | Usability‎ | HIG
No edit summary
No edit summary
Line 15: Line 15:
|}
|}
== Example ==
== Example ==
[[Image:KDE-Search_KMail.png|300px|right]]
The example is based on KMail. To have both the static and dynamic filter in one application (which is not recommendable) the list of accounts can be reduced to a particular item. [[Projects/Usability/HIG/Combo_Box| Combo boxes]] are enhanced by a checkbox list together with a caption that shows the selected items or, in case of not enough space, the number of selected items. The [[Projects/Usability/HIG/Tooltip | tooltipp]] lists all selections. The search dialog makes use of a [[Projects/Usability/HIG/DualList | dual list]] pattern.  
The example is based on KMail. To have both the static and dynamic filter in one application (which is not recommendable) the list of accounts can be reduced to a particular item. [[Projects/Usability/HIG/Combo_Box| Combo boxes]] are enhanced by a checkbox list together with a caption that shows the selected items or, in case of not enough space, the number of selected items. The [[Projects/Usability/HIG/Tooltip | tooltipp]] lists all selections. The search dialog makes use of a [[Projects/Usability/HIG/DualList | dual list]] pattern.  
[[Image:KDE-Search_KMail.png|300px]]


== Search ==
== Search ==
* Use a search function to generate results based on various sources with sufficient options.
* Use a search function to generate results based on various sources with sufficient options.
* Always provide search function via extra secondary dialog.
* Always provide search function via extra secondary dialog.
* Use advanced query parser to show the pattern on the one hand and to enter or modify the query directly.


=== Behavior ===
=== Behavior ===
* Show hints on how to use the search effectively.
* Do not abuse the filter for search operations. In particular do not use filter short-cuts to start the search.
* Run a combined AND search when two words have been entered unless the term is quoted (e.g. Hello World vs "Hello World")
* Do not use search as the primary interaction method.
* Show search results with a new reference (e.g. folder), like 'Last search'.
* Allow users to save and reload queries.
 
* Show the query on ctrl+H.
* Close the query on escape or via close icon.
* Focus the query on alt+H (localization dependend) and on ctrl+H.
* Empty the query on context change by apply the new filter in case of a search reference (e.g. folder).
 
* Follow the guidelines on delayed operations if the search takes longer.
* Follow the guidelines on delayed operations if the search takes longer.


=== Appearance ===
=== Appearance ===
* Label the query with 'Search'.
* Place the input query above the result list.
[[Image:KDE-Search_Search.png|300px]]
* (Yet to be defined by the VDG)
* (Yet to be defined by the VDG)


Line 36: Line 49:
== Filter ==
== Filter ==
* Apply filter to restrict the number of items of a list.
* Apply filter to restrict the number of items of a list.
* Do not overload the simple filter function by options. If necessary, provide an additional search.
* Use a static filter for functions related to the navigation (e.g. to find an item out of a large list is the regular operation).
* Use a dynamic filter when the operation is part of the workflow (e.g. to just have fast access to an item).


=== Behavior ===
=== Behavior ===
* Do not overload the simple filter function by options. If necessary, provide an additional search.
* Perform filter operations always instantaneously.
* Perform filter operations always instantaneously.
* Make the operation as simple as possible. For instance, do not apply multi-dimensional filtering or do not use logical operators for input.
* Make the operation as simple as possible. For instance, do not apply multi-dimensional filtering or do not use logical operators for input.
* Run operation case insensitive, unless it is important.
* Run operation case insensitive, unless it is important.
* Make input control large enough to show at least 20 characters.
* Make input control large enough to show at least 20 characters.
* Consider to provide auto complete feature to the input based on previous operations.
* Do not mix static and dynamic filters in one dialog.
==== Static filter ====
* Do not apply  a short-cut to open or close the input. Consider to have an option in the menu or the configuration.
* Do not clear the filter on context change.
* If a Plasmoid or Plasma dialog has a filter capability, always use a static filter since there is no menu to show or hide it.
==== Dynamic filter ====
* Show the filter input on short-cut ctrl+I
* Hide the filter on escape or via close icon.
* Focus the input on alt+I (localization dependent) and on ctrl+I.
* By default clear the filter input when the content is changed. But consider to provide a sticky function and keep the filter until it is cleared explicitly. With this option users do not need to research after selecting or referencing an item.
* By default clear the filter input when the content is changed. But consider to provide a sticky function and keep the filter until it is cleared explicitly. With this option users do not need to research after selecting or referencing an item.
* Consider to provide auto complete feature to the input based on previous operations.


=== Appearance ===
=== Appearance ===
* Show the filter pattern above the list of items.
* Label the input with 'Filter'.
* Use Ctrl+H to show/hide the input.
* Show the static filter input above the list of items but the dynamic filter input below the list of items to avoid jumping content.
* Do not hide the input if the filter is an essential part of the application, i.e. when the list of items usually is large.
[[Image:KDE-Search_StaticFilter.png]]
* If a Plasmoid or Plasma dialog has a filter capability, always show the filter bar since there is no menu to show or hide it.
[[Image:KDE-Search_DynamicFilter.png]]
* Show 'Search...' as place holder unless the control is focused.
 
* (Yet to be defined by the VDG)


=== Implementation ===
=== Implementation ===
Line 57: Line 84:


== Highlight ==
== Highlight ==
* Provide 'highlight search' when the content is relevant.
* Provide a 'highlight search' for text.
* Do not overload the simple highlight function by options. If necessary, provide an additional search.
* Do not overload the simple highlight function by options. If necessary, provide an additional search.


Line 66: Line 93:
* Make input control large enough to show at least 20 characters.
* Make input control large enough to show at least 20 characters.
* Consider to provide auto complete feature to the input based on previous operations.
* Consider to provide auto complete feature to the input based on previous operations.
* Show the highlighter input on short-cut ctrl+F.
* Hide the highlighter input on escape or via close icon.
* Focus the input on alt+F (localization dependent) and on ctrl+F.
* Provide the [[Projects/Usability/HIG/Keyboard_Shortcuts | standard short-cuts]] F3/shift+F3 to go to the next/previous item.


=== Appearance ===
=== Appearance ===
* Place the input control at the bottom of the content area.
* Place the input control below the content area.
* Hide the input by default.
* Label the input with 'Find'.
* Active the control and focus it on ctrl+F, and use F3/Shift+F3 to go to the next/previous item (cf. HIG about [http://techbase.kde.org/Projects/Usability/HIG/Keyboard_Shortcuts short-cuts]).
[[Image:KDE-Search_Highlighter.png]]
 
* (Yet to be defined by the VDG)


=== Implementation ===
=== Implementation ===

Revision as of 11:21, 30 June 2014

 
Under Construction
This is a new page, currently under construction!


Purpose

A search function allows to generate a subset out of a big number of items based on a user defined pattern. It can usually be applied to various sources and has several options for fine-tuning. Often search results needs further refinement by a filter.

Supplemental to search the filter function reduces the number of items. This operation works on the current list only and does not generate a new output. Filtering should always be instantaneous and must not interrupt the workflow. It makes sense to discriminate between a static filter that is part of the navigation and always shown, and a dynamic filter used for the current workflow.

Similar to filtering the operation might be used to highlight information. This preselection is a common feature in text processing and used to locate a particular piece of information without concealing the surrounding.

Example

The example is based on KMail. To have both the static and dynamic filter in one application (which is not recommendable) the list of accounts can be reduced to a particular item. Combo boxes are enhanced by a checkbox list together with a caption that shows the selected items or, in case of not enough space, the number of selected items. The tooltipp lists all selections. The search dialog makes use of a dual list pattern.

Search

  • Use a search function to generate results based on various sources with sufficient options.
  • Always provide search function via extra secondary dialog.
  • Use advanced query parser to show the pattern on the one hand and to enter or modify the query directly.

Behavior

  • Do not abuse the filter for search operations. In particular do not use filter short-cuts to start the search.
  • Do not use search as the primary interaction method.
  • Show search results with a new reference (e.g. folder), like 'Last search'.
  • Allow users to save and reload queries.
  • Show the query on ctrl+H.
  • Close the query on escape or via close icon.
  • Focus the query on alt+H (localization dependend) and on ctrl+H.
  • Empty the query on context change by apply the new filter in case of a search reference (e.g. folder).
  • Follow the guidelines on delayed operations if the search takes longer.

Appearance

  • Label the query with 'Search'.
  • Place the input query above the result list.

  • (Yet to be defined by the VDG)

Implementation

  • (To be defined by devs)

Filter

  • Apply filter to restrict the number of items of a list.
  • Use a static filter for functions related to the navigation (e.g. to find an item out of a large list is the regular operation).
  • Use a dynamic filter when the operation is part of the workflow (e.g. to just have fast access to an item).

Behavior

  • Do not overload the simple filter function by options. If necessary, provide an additional search.
  • Perform filter operations always instantaneously.
  • Make the operation as simple as possible. For instance, do not apply multi-dimensional filtering or do not use logical operators for input.
  • Run operation case insensitive, unless it is important.
  • Make input control large enough to show at least 20 characters.
  • Consider to provide auto complete feature to the input based on previous operations.
  • Do not mix static and dynamic filters in one dialog.

Static filter

  • Do not apply a short-cut to open or close the input. Consider to have an option in the menu or the configuration.
  • Do not clear the filter on context change.
  • If a Plasmoid or Plasma dialog has a filter capability, always use a static filter since there is no menu to show or hide it.

Dynamic filter

  • Show the filter input on short-cut ctrl+I
  • Hide the filter on escape or via close icon.
  • Focus the input on alt+I (localization dependent) and on ctrl+I.
  • By default clear the filter input when the content is changed. But consider to provide a sticky function and keep the filter until it is cleared explicitly. With this option users do not need to research after selecting or referencing an item.

Appearance

  • Label the input with 'Filter'.
  • Show the static filter input above the list of items but the dynamic filter input below the list of items to avoid jumping content.

  • (Yet to be defined by the VDG)

Implementation

  • (To be defined by devs)

Highlight

  • Provide a 'highlight search' for text.
  • Do not overload the simple highlight function by options. If necessary, provide an additional search.

Behavior

  • Perform highlight operations always instantaneously.
  • Make the operation as simple as possible. Do not add options.
  • Run operation case insensitive.
  • Make input control large enough to show at least 20 characters.
  • Consider to provide auto complete feature to the input based on previous operations.
  • Show the highlighter input on short-cut ctrl+F.
  • Hide the highlighter input on escape or via close icon.
  • Focus the input on alt+F (localization dependent) and on ctrl+F.
  • Provide the standard short-cuts F3/shift+F3 to go to the next/previous item.

Appearance

  • Place the input control below the content area.
  • Label the input with 'Find'.

  • (Yet to be defined by the VDG)

Implementation

  • (To be defined by devs)

Legacy references