KDE human interface guidelines: About Viewing and Navigation

The KDE usability team is proud to present the next chapter of the human interface guidelines. We want to discuss the part about Viewing and Navigation.

Following the Universal Model of a User Interface we group all guidelines concerning controls within three, user-centered sections:

  1. controls that are used for viewing and navigation,
  2. controls that user apply to edit and manipulate content, and
  3. controls for help and assistance.

We started with the simple Editing and Manipulation section and have now continued with…

Viewing and Navigation

It consists of the following guidelines:

Access functions

Grouping

  • Arrange associated controls by using a labeled group box or an unlabeled frame.
  • Allow users to re-size aligned groups by placing a splitter between the groups.
  • Use tabs to show related information on separate pages.
  • Provide an accordion (aka tool box) for different views to content.

Complex views

  • Use a list view to show some items out of one category.
  • Use a tree view to show items with a single, natural, hierarchical categorization.
  • If you really need to create your own widget follow the guidelines for custom controls.

Participate

We explicitly ask about your opinion. So please make use of the comments section. Please read the guidelines carefully and make sure that the text is informative and complies with your requirements. The content should be both generic and comprehensive and intends to make KDE awesome. But we are also interested in support. If you are able to create nice sample UIs with Qt please contact the usability team via the kde-guidelines mailinglist.
{"cc_re__cc_re__cc_by_sa_3_0_en": ["track\":\"KDE+human+interface+guidelines%3A+About+Viewing+and+Navigation\",\"concat\":\"%3F\",\"display_infobox\":\"on\"});}});\n/* ]]&gt; */</script></div>\t\t\t\t\t\t\t<div class=\"postmeta\">\n\t\t\t\t\t\t<p id=\"comments\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"pagination floatbox\">\n\t\t\t\t\t\t<p class=\"float_left\"></p>\n\t\t\t\t\t\t<p class=\"float_right\"></p>\n\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"main-content_container_shadow\"></div>\n\t\t\t\t\t<footer class=\"site-footer\">\n\t\t<div class=\"site-info\">\n\t\t<a href=\"https://creativecommons.org/licenses/by-sa/3.0/deed.en\" target=\"_blank\" title=\"Open CC BY-SA 3.0\" alt=\"Open CC BY-SA 3.0\">&copy; CC BY-SA 3.0</a>\t\t\t \t\n\t\t\t<span class=\"sep\"> | </span>\n\t\t\t<a href=\"https://user-prompt.com/?page_id=59\">Impressum</a>\n\t\t</div>\n\t</footer>\n\n<!-- Lightbox Plus Colorbox v2.7.2/1.5.9 - 2013.01.24 - Message: 1-->\n<script type=\"text/javascript\">\njQuery(document).ready(function($){\n  $(\"a[rel*=lightbox]\").colorbox({speed:0,width:false,height:false,innerWidth:false,innerHeight:false,initialWidth:false,initialHeight:false,maxWidth:false,maxHeight:false,scalePhotos:false,opacity:0,preloading:false,"]}