User:Andrew/HIG/ViewAndNavigation: Difference between revisions

From KDE UserBase Wiki
 
(34 intermediate revisions by the same user not shown)
Line 1: Line 1:
__NOTOC__
__NOTOC__
= Viewing and Navigation =
= Viewing and Navigation =
Viewing and Navigation encompasses the wide variety of behaviors and operations that allow users to navigate the interface and affect its presentation.
Viewing and Navigation encompasses the wide variety of behaviors and operations that allow users to view content, navigate the interface and perform actions on application content.


== Access functions ==
==Viewing content==
* Try to omit the [https://techbase.kde.org/Projects/Usability/HIG/StatusBar status bar] from your application.
* [https://techbase.kde.org/Projects/Usability/HIG/Layout/ViewingVsEditing Viewing vs Editing] - Do not use input controls for content that is primarily viewed.
* Provide a [https://techbase.kde.org/Projects/Usability/HIG/ContextMenu context menu] for controls with implicit functions.
* [https://techbase.kde.org/Projects/Usability/HIG/Layout/Image Images] - Preserve the characteristics of images that convey emotion and meaning.
* Provide a [https://techbase.kde.org/Projects/Usability/HIG/Toolbar toolbar] for frequently used functions.
* [https://techbase.kde.org/Projects/Usability/HIG/IconsAndText Icons and text] - Consistently show icons with text.
* Use a [https://techbase.kde.org/Projects/Usability/HIG/Buttons push button] to initiate an action when the user clicks it.  
* [https://techbase.kde.org/Projects/Usability/HIG/ListView List view] - Use a list view to show some items out of one category.
* Use a [https://techbase.kde.org/Projects/Usability/HIG/Toggle_Buttons toogle button] to indicate a state, preferably in toolbars only.
* [https://techbase.kde.org/Projects/Usability/HIG/TreeView Tree view] - Use a tree view to show items with a single, natural, hierarchical categorization.
* Use a [https://techbase.kde.org/Projects/Usability/HIG/Command_Link command link] to navigate between pages.
* Grouping
* Support keyboard access by [https://techbase.kde.org/Projects/Usability/HIG/Keyboard_Accelerators accelerators] and [https://techbase.kde.org/Projects/Usability/HIG/Keyboard_Shortcuts shortcuts].
** [https://techbase.kde.org/Projects/Usability/HIG/GroupBox Groupbox] - Arrange associated controls by using a labeled group box or an unlabeled frame.
* Follow the guidelines for [https://techbase.kde.org/Projects/Usability/HIG/Dialogs dialogs] for secondary windows.
** [https://techbase.kde.org/Projects/Usability/HIG/Splitter Splitter] - Allow users to resize aligned groups by placing a splitter between the groups.
** [https://techbase.kde.org/Projects/Usability/HIG/TabControl Tabs] - Use tabs to show related information on separate pages.
* [https://techbase.kde.orgProjects/Usability/HIG/Tooltip Tooltips] - Consistently present tooltip information.
* [https://techbase.kde.org/Projects/Usability/HIG/SearchPattern Search and Filter] - Guidelines for exposing search and filter functions
* [https://techbase.kde.orgProjects/Usability/HIG/Layout/Wizard Wizard] - How to guide the user through a series of step to accomplish a task
* [https://techbase.kde.org/Projects/Usability/HIG/CustomControls Custom controls] - Always attempt to use the available Qt/KDE controls whenever possible. However follow these guidelines if you really need to create your own widget .


== Grouping ==
==Navigation==
* Arrange associated controls by using a labeled [https://techbase.kde.org/Projects/Usability/HIG/GroupBox group box] or an unlabeled [https://techbase.kde.org/Projects/Usability/HIG/GroupBox frame].
* [https://techbase.kde.org/Projects/Usability/HIG/Layout/NavigationPatterns Navigation Patterns] - Select navigation patterns appropriate for the application content.
* Allow users to resize aligned groups by placing a [https://techbase.kde.org/Projects/Usability/HIG/Splitter splitter] between the groups.
* Use [https://techbase.kde.org/Projects/Usability/HIG/TabControl tabs] to show related information on separate pages.


== Complex views ==
== Actions ==
* Use a [https://techbase.kde.org/Projects/Usability/HIG/ListView list view] to show some items out of one category.
* [https://techbase.kde.org/Projects/Usability/HIG/Layout/CommandPatterns Command Patterns] - Select command patterns appropriate for the application command structure.
* Use a [https://techbase.kde.org/Projects/Usability/HIG/TreeView tree view] to show items with a single, natural, hierarchical categorization.
* [https://techbase.kde.org/Projects/Usability/HIG/Buttons Push Button] - Use a push button to initiate an action when the user clicks it.
* If you really need to create your own widget follow the guidelines for [https://techbase.kde.org/Projects/Usability/HIG/CustomControls custom controls].
* [https://techbase.kde.org/Projects/Usability/HIG/Toggle_Buttons Toggle button] - Use a toggle button to indicate a state, preferably in toolbars only.
* Double check the guidelines about plotting [https://techbase.kde.org/Projects/Usability/HIG/Diagram diagram/charts].
* [https://techbase.kde.org/Projects/Usability/HIG/Toolbar Toolbar] - Provide a toolbar for frequently used functions.
 
* [https://techbase.kde.org/Projects/Usability/HIG/ContextMenu Context menu] - Use a context menu to provide a list of functions or options available to users for the selected item.
==Patterns==
* [https://techbase.kde.org/Projects/Usability/HIG/Menu_Bar Menu Bar] - Use a menu bar only for applications with a [[User:Andrew/HIG/OrganizationalModel|very complex command structure]].
* Navigation Patterns - Select patterns appropriate for the application content
* [https://techbase.kde.org/Projects/Usability/HIG/Keyboard_Accelerators Accelerators] and [https://techbase.kde.org/Projects/Usability/HIG/Keyboard_Shortcuts shortcuts] - Support keyboard access by accelerators and shortcuts.
* Content Patterns - A collection of consistent ways to present content
* [https://techbase.kde.org/Projects/Usability/HIG/Dialogs Dialogs] - Use dialogs carefully and sparingly to clearly communicate the actions to be performed and to avoid unnecessary interruption.
** [[Projects/Usability/HIG/Layout/Image|Images]] - Guidelines and patterns for displaying images
* [https://techbase.kde.org/Projects/Usability/HIG/Command_Link Command Link] - Use a command link to navigate between pages.
** [[Projects/Usability/HIG/IconsAndText|Icons and text]] - Patterns for consistently showing icons with text
* [https://techbase.kde.org/Projects/Usability/HIG/StatusBar Status Bar] - Try to omit the status bar from your application.
** [[Projects/Usability/HIG/Layout/ViewingVsEditing|Viewing vs Editing]] - Patterns and guidelines for laying out content that is primarily viewed.
** [[Projects/Usability/HIG/SearchPattern|Search and Filter]]- Patterns for exposing search and filter functions
** [[Projects/Usability/HIG/Layout/Wizard|Wizard]] - Patterns for guiding the user through a series of step to accomplish a task
** [[Projects/Usability/HIG/Tooltip|Tooltips]] - Patterns for consistent presentation of information in tooltips.

Latest revision as of 14:56, 28 September 2014

Viewing and Navigation

Viewing and Navigation encompasses the wide variety of behaviors and operations that allow users to view content, navigate the interface and perform actions on application content.

Viewing content

  • Viewing vs Editing - Do not use input controls for content that is primarily viewed.
  • Images - Preserve the characteristics of images that convey emotion and meaning.
  • Icons and text - Consistently show icons with text.
  • List view - Use a list view to show some items out of one category.
  • Tree view - Use a tree view to show items with a single, natural, hierarchical categorization.
  • Grouping
    • Groupbox - Arrange associated controls by using a labeled group box or an unlabeled frame.
    • Splitter - Allow users to resize aligned groups by placing a splitter between the groups.
    • Tabs - Use tabs to show related information on separate pages.
  • Tooltips - Consistently present tooltip information.
  • Search and Filter - Guidelines for exposing search and filter functions
  • Wizard - How to guide the user through a series of step to accomplish a task
  • Custom controls - Always attempt to use the available Qt/KDE controls whenever possible. However follow these guidelines if you really need to create your own widget .

Navigation

Actions

  • Command Patterns - Select command patterns appropriate for the application command structure.
  • Push Button - Use a push button to initiate an action when the user clicks it.
  • Toggle button - Use a toggle button to indicate a state, preferably in toolbars only.
  • Toolbar - Provide a toolbar for frequently used functions.
  • Context menu - Use a context menu to provide a list of functions or options available to users for the selected item.
  • Menu Bar - Use a menu bar only for applications with a very complex command structure.
  • Accelerators and shortcuts - Support keyboard access by accelerators and shortcuts.
  • Dialogs - Use dialogs carefully and sparingly to clearly communicate the actions to be performed and to avoid unnecessary interruption.
  • Command Link - Use a command link to navigate between pages.
  • Status Bar - Try to omit the status bar from your application.