Projects/Usability/HIG: Difference between revisions

    From KDE TechBase
    No edit summary
    No edit summary
    (5 intermediate revisions by the same user not shown)
    Line 42: Line 42:
    == Editing and Manipulation ==
    == Editing and Manipulation ==
    === Selection ===
    === Selection ===
    * Use a [[Projects/Usability/HIG/Radio Buttons|radio button]] for 1 of a few n selections.
    * Use [[Projects/Usability/HIG/Radio Buttons|radio buttons]] for 1 of a few n selections.
    * Use one or more [[Projects/Usability/HIG/Check_Box|check boxes]] for clear options or n of a few m selections.
    * Use one or more [[Projects/Usability/HIG/Check_Box|check boxes]] for clear options or n of a few m selections.
    * Use a [[Projects/Usability/HIG/ListView|list view]] for one or a few n of some m selections.
    * Use a [[Projects/Usability/HIG/DropDown| drop-down]] list for 1 of a few n selection.
    * Use a [[Projects/Usability/HIG/DropDown| drop-down]] list for 1 of some n selection and a [[Projects/Usability/HIG/Combo_Box| combo box]] if users should be able to add items.
    * Use a [[Projects/Usability/HIG/Combo_Box| combo box]] for 1 of a few n selection where users should be able to add items.
    * Use the [[Projects/Usability/HIG/SOU_Workspace/Two_Lists| dual list]] pattern for n of m selections.
    * Use a [[Projects/Usability/HIG/ListView|list view]] for 1 of some m (singular) selections.
    * Apply the [[Projects/Usability/HIG/DualList| dual list]] pattern for n of m (multiple) selections.


    === Unconstrained input ===
    === Unconstrained input ===
    * To enter one line of text use a [[Projects/Usability/HIG/edits| line edit]] and for multiple lines of texts a [[Projects/Usability/HIG/edits| text edit]].
    * Provide a [[Projects/Usability/HIG/LineEdit| line edit]] to enter one line of text.
    * Provide a [[Projects/Usability/HIG/TextEdit| text edit]] to enter multiple lines of texts.
    * Consider to provide inline editing with complex views.
    * Consider to provide inline editing with complex views.
     
    <div style="display: none;">http://techbase.kde.org/Projects/Usability/HIG/inline_editing</div>
    === Constrained input ===
    === Constrained input ===
    * Use a [[Projects/Usability/HIG/Spin_Box|Spin Box]] for numerical input within a range and with fix steps.
    * Use a [[Projects/Usability/HIG/Spin_Box|Spin Box]] for numerical input within a range and with fix steps.
    Line 78: Line 80:
    * Default and minimal size
    * Default and minimal size
    * Spacing
    * Spacing
    * Alignment & Placement
    * Carefully place control according the KDE [[Projects/Usability/HIG/Alignment| alignment]] style.
    ** [[Projects/Usability/HIG/Form_Label_Alignment|Forms: Label Alignment]]
    * Do not use [[Projects/Usability/HIG/Color| color]]  as primary method of communication.
    * Do not use [[Projects/Usability/HIG/Color| color]]  as primary method of communication.
    * Icons
    * Icons

    Revision as of 13:59, 31 July 2013

    Structure

    Conceptual Model

    • Real World, Vision

    Task Flow

    • Core usability goals, Use cases / User requirements, Task aggregation
    • Personas, Scenarios, Usability criteria, Feature list

    Organizational Model

    Behaviour

    Viewing and Navigation

    General navigation

    Access functions

    Grouping

    • Group box, Panel
    • Splitter

    Complex views

    • Use a List View to show some items out of one category.
    • Tree view
    • Grids
    • If you really need to create your own widget follow the guidelines for custom controls.

    Editing and Manipulation

    Selection

    • Use radio buttons for 1 of a few n selections.
    • Use one or more check boxes for clear options or n of a few m selections.
    • Use a drop-down list for 1 of a few n selection.
    • Use a combo box for 1 of a few n selection where users should be able to add items.
    • Use a list view for 1 of some m (singular) selections.
    • Apply the dual list pattern for n of m (multiple) selections.

    Unconstrained input

    • Provide a line edit to enter one line of text.
    • Provide a text edit to enter multiple lines of texts.
    • Consider to provide inline editing with complex views.

    Constrained input

    • Use a Spin Box for numerical input within a range and with fix steps.
    • Use a Slider for arbitrary changes within a defined range.
    • (Under construction): Numeric input with both large changes and precise control: Slider and Spin Box
    • Use Date and Time Pickers for formatted input of datum, time of day, or periods etc.

    User Assistance

    User-driven information

    • Provide tool-tips for user driven information.

    System triggered notification

    Disruptive messages

    • Show a modal message dialog if the processing has reached an unexpected condition that needs interaction.

    Help system

    • Support the user by an elaborated interface or per help system.

    Presentation

    Layout

    • Resizing
    • Default and minimal size
    • Spacing
    • Carefully place control according the KDE alignment style.
    • Do not use color as primary method of communication.
    • Icons

    Style

    Text

    See also:

    Contributing

    Didn't find what you were looking for?

    A guide to the guide can be found at the about page.

    Our Human Interface Guidelines are a work in progress and we need your help. Visit the Contributing page to report problems or get involved.

    Index

    B

    C


    D

    E

    F

    K

    L

    M

    R

    S

    T

    W



    Legacy Stuff

    List Views

    Please add any guidelines questions or requests to the HIG Questions page.

    Also see the Season of Usability HIG & Design Patterns Workspace.