Projects/Usability/HIG/SearchPattern: Difference between revisions

    From KDE TechBase
    < Projects‎ | Usability‎ | HIG
    No edit summary
    Line 1: Line 1:
    __NOTOC__
    __NOTOC__
    {{Construction}}
    {{Construction}}
    Ref's:
    * http://www.userfocus.co.uk/resources/searchchecklist.html
    * http://www.smileycat.com/miaow/archives/002015.php
    * http://forum.kde.org/viewtopic.php?f=285&t=120079


    == Purpose ==
    == Purpose ==
    Line 10: Line 6:


    Supplemental to search is the ''filter function'' which rather reduces a given number of items than generating an output. Filtering should be always instantaneous.
    Supplemental to search is the ''filter function'' which rather reduces a given number of items than generating an output. Filtering should be always instantaneous.
    {| class="wikitable collapsible collapsed" style="border:none"
    ! Use case for filter vs. search
    |-
    | Jane has Dolphin open in her Documents folder. Let's say Jane has ~100 miscellaneous files there that have built up over the years. Jane also has under Documents several more structured folders with oodles of files as well for different projects over the years, travel expense reports and receipts. Jane thinks that the file she's looking for is one of those ~100 miscellaneous files because that where she typically put documents that aren't project or travel expense related. She thinks the filename starts with "sta"  but isn't sure. So she opens the filter function on Dolphin and types "sta". What she expects is that out of ~100 files Dolphin shows in the Documents folder, some subset will be displayed with filenames starting with or containing "sta". She just wants to reduce the set of data that was already *visible* in Dolphin. She chose filter instead of search because she doesn't care about the 200 or so files in the Documents/Littlesburg Train Station project folder and its subfolders with "sta" in their filename.
    She's essentially just restricting her search to what is currently *visible* and not trying to recursively search the contents of the currently displayed Documents folder. She's still conceptually searching. But how she's searching, even in the current folder, is quite different.
    |}


    == Guidelines ==
    == Guidelines ==
    === Input ===
    * Provide filter function to shown content by default. Apply search using an extra dialog.
    * Consider to allow iterative search on result lists.
    * Do not inherit artificial intelligence from users. Search operations have always be clear and comprehensible to users.


    * Prefer instant over explicit search.
    === Filter ===
    ** If the search can be performed quickly and with low resource usage, start searching as the user types.  
    <HR>
    ** If the search requires more resources (such as computationally intensive search, reading lots of data from disk or transferring lots of data over the network), start searching only when the user presses enter or clicks the search button.
    ==== Input ====
    ** Do not mix search types.
    * 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.
    ==== Output ====
    * Make the filter result persistent until it is cleared explicitly. Users must not need to research after selecting or referencing an item.
    * Provide auto complete feature to the input based on previous operations.
    * Highlight matching results and jump to the first occurrence.
    ==== Appearance ====
    * Hide input control until users start the search.
    {{Note|I'd prefer to show it always but actually that's not the current behaviour in general.
    * Hide the input control in case the filter is not the primary function of the app, but show a small button which indicates clearly the availability of the function.}}
    * Active the control and focus it on ctrl+F or when user clicks the icon.
    * Place the input control at the bottom of the content area.


    === Search ===
    <HR>
    ==== Input ====
    * Do not inherit artificial intelligence from users. Search operations have always be clear and comprehensible to users.
    * Show hints on how to use the search effectively.
    * Show hints on how to use the search effectively.
    * Do case insensitive search, unless its important.
    * Do fuzzy search by default, if applicable. That means extend the results by adding a wildcard to the item.
    * Do fuzzy search by default, if applicable. That means extend the results by adding a wildcard to the item.
    * Make the search box large enough to show at least 20 characters (at the moment: KRunner & Kicker = 24, Konqueror = 54, KCM = 33, cf. ).
    * Run a combined AND search when two words have been entered unless the term is quoted (e.g. Hello World vs "Hello World")
    * Run a combined AND search when two words have been entered unless the term is quoted (e.g. Hello World vs "Hello World")
    + Wildcards
    ==== Output ====
    === Output ===
    * Show the search pattern at the header of the result list (e.g. "Search results for: <Hello World>")
    * Make the search result persistent. Users must not need to research after selecting or referencing an item.
    * Follow the guidelines on [[Projects/Usability/HIG/ProgressIndicator|delayed operations]] if the search takes longer.
    * Follow the guidelines on [[Projects/Usability/HIG/ProgressIndicator|delayed operations]] if the search takes longer.
    * Provide paging/scrolling of results.
    * Provide paging/scrolling of results.
    * Provide auto complete feature to the input based on previous operations.
    ==== Appearance ====
    * Show the search pattern at the header of the result list (e.g. "Search results for: <Hello World>")
    * Run search operation within an extra, modal dialog.  
    == Appearance ==
    {| class="wikitable collapsible collapsed"
    ! Use case for filter vs. search
    |-
    | Jane has Dolphin open in her Documents folder. Let's say Jane has ~100 miscellaneous files there that have built up over the years. Jane also has under Documents several more structured folders with oodles of files as well for different projects over the years, travel expense reports and receipts.
    Jane thinks that the file she's looking for is one of those ~100 miscellaneous files because that where she typically put documents that aren't project or travel expense related. She thinks the filename starts with "sta"  but isn't sure. So she opens the filter function on Dolphin and types "sta". What she expects is that out of ~100 files Dolphin shows in the Documents folder, some subset will be displayed with filenames starting with or containing "sta". She just wants to reduce the set of data that was already *visible* in Dolphin. She chose filter instead of search because she doesn't care about the 200 or so files in the Documents/Littlesburg Train Station project folder and its subfolders with "sta" in their filename, .
    She's essentially just restricting her search to what is currently *visible* and not trying to recursively search the contents of the currently displayed Documents folder. She's still conceptually searching. But how she's searching, even in the current folder, is quite different.
    |}
     
    === Input ===
    * Discriminate instant search from search that needs to be started explicitly by
    ** a special decorator of a common icon. Use version a) for the first option, and b) for second one.
    ** adding ellipsis to the inline text: 'Search...' instead of 'Search'
    * Search input consists of an icon, a line input to enter the search pattern, and a button to start the search. (VDG made a proposal how it looks nice; Actually, icon is not standard currently but makes sense; Make sure search icon is not mixed-up with zoom!; Omit icon because of lightweight appearance)
     
    * ''Placement'' (Presuming the app contains of a ''navigation area'' (or ''category selection'') left hand with ~1/3 of screen real estate, and a ''content area'' for the remaining space.)
    ** Start search at the upper right area of your dialog (KCM and input for web browser's search engine).
    ** Start above the content area (Search in Dolphin, KMail - search within current mail, KSystemLog)
    ** Start below the content area (Filter in Dolphin, Konqueror / Rekonq / Browser search within current page in general, KWrite, Konsole, Okular). (Most might be understood in terms of a filter since it don't generate something but jump to the right position!)
    ** Start above or below depending on the layout (Kicker, if started from a top- or bottom-aligned band).
    ** Make search floating (KRunner style).
    ** Use an extra (modal) dialog (KMail search for mails, Krusader).
    ** Start above the navigation area/category selection to clean the content on-the-fly (Bangarang).
     
    <cite="Thomas Pfeiffer">Above the content appears to be the common position for search bars that are always visible (like KMail or System Settings) while bottom seems to be the common position for search bars that only appear when a search is initiated (via the menu or Ctrl-F). </cite>
     
    * ''To show or not to show:''
    ** Always show search input. Do not hide the availability from users.
    ** Show input control only when users start the search.
    ** Hide the control in case the search is not the primary function of the app, but show a small button which indicates clearly the availability of the function.
    ** Active the control and focus it on Ctrl+F or when user clicks the icon.
    ** Do not use search icon anywhere else.
     
    === Output ===
    * ''How to present results'' (Depends on use case?)
    ** Highlight search results (KCM mode).
    ** Hide non-matching results (Kicker mode).
    ** Generate a new list that matches the search pattern  (KRunner mode).


    == Best Practice ==
    == Best Practice ==
    * [http://i.imgur.com/eL7mi4K.png Example 1]
    * [http://wstaw.org/m/2014/03/26/Category_search_pattern.png Example 2]


    [[Category:Usability]][[Category:Structure]][[Category:Organizational_Model]]
    [[Category:Usability]][[Category:Structure]][[Category:Organizational_Model]]

    Revision as of 13:40, 8 April 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 on ground of a user defined pattern. The function is essential to find matching items in case of a extended list or if the position of target(s) is unknown, as well as when bulk operations should be executed to a subset. A search operation interrupts the 'predefined workflow' and bypass core functions to a user-defined data set.

    Supplemental to search is the filter function which rather reduces a given number of items than generating an output. Filtering should be always instantaneous.

    Guidelines

    • Provide filter function to shown content by default. Apply search using an extra dialog.

    Filter


    Input

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

    Output

    • Make the filter result persistent until it is cleared explicitly. Users must not need to research after selecting or referencing an item.
    • Provide auto complete feature to the input based on previous operations.
    • Highlight matching results and jump to the first occurrence.

    Appearance

    • Hide input control until users start the search.
    Note
    I'd prefer to show it always but actually that's not the current behaviour in general.
    • Hide the input control in case the filter is not the primary function of the app, but show a small button which indicates clearly the availability of the function.
    • Active the control and focus it on ctrl+F or when user clicks the icon.
    • Place the input control at the bottom of the content area.

    Search


    Input

    • Do not inherit artificial intelligence from users. Search operations have always be clear and comprehensible to users.
    • Show hints on how to use the search effectively.
    • Do fuzzy search by default, if applicable. That means extend the results by adding a wildcard to the item.
    • Run a combined AND search when two words have been entered unless the term is quoted (e.g. Hello World vs "Hello World")

    Output

    • Show the search pattern at the header of the result list (e.g. "Search results for: <Hello World>")
    • Follow the guidelines on delayed operations if the search takes longer.
    • Provide paging/scrolling of results.

    Appearance

    • Run search operation within an extra, modal dialog.

    Best Practice