Projects/Usability/HIG/Animations: Difference between revisions

    From KDE TechBase
    < Projects‎ | Usability‎ | HIG
    No edit summary
    No edit summary
    Line 1: Line 1:
    __NOTOC__
    __NOTOC__
    {{Construction}}
    ==Purpose==
    ==Purpose==
    Both the interaction with controls as well as the workflow itself should be clear to users. For instance it has to be obvious if a button can be pressed at all, if it is in focus and one could use space or enter to execute the function, and whether or not it just has been pressed; Usually, disabled buttons are grayed out, if the focus is on the button it gets an extra frame, and when pressed it has a lowered appearance. Another method to support perception, especially for flat designs, is to use ''animations''.
    Both the interaction with controls as well as the workflow itself should be clear to users. For instance it has to be obvious if a button can be pressed at all, if it is in focus and one could use space or enter to execute the function, and whether or not it just has been pressed; Usually, disabled buttons are grayed out, if the focus is on the button it gets an extra frame, and when pressed it has a lowered appearance. Another method to support perception, especially for flat designs, is to use ''animations''.
    Line 6: Line 8:


    == Guidelines ==
    == Guidelines ==
    === Generic advices ===
    * Use animations only if it serves functional purpose.
    * Use animations only if it serves functional purpose.
    * Use animations to support users' consciousness on transition between two states that are not absolutely clear.
    * Use animations to support users' consciousness on transition between two states that are not absolutely clear.
    Line 15: Line 19:
    * Always allow users to easily switch off animations. But consider as well to increase the timing to gain accessibility.
    * Always allow users to easily switch off animations. But consider as well to increase the timing to gain accessibility.


    === Advices for creating an animation ===
    * Follow physical principles when using animations.  
    * Follow physical principles when using animations.  
    ** Accelerate and decelerate movement as if has a mass. Consider to correlate control size with mass and apply acceleration accordingly.
    ** Accelerate and decelerate movement as if has a mass. Consider to correlate control size with mass and apply acceleration accordingly.
    Line 30: Line 35:


    == Best practice ==
    == Best practice ==
    <blockquote>
    The life of an control follows a sequence from OnCreate -> OnShow -> OnActivate -> OnPaint -> OnResize -> OnPaint ... to
    … OnCloseQuery -> OnClose -> OnDeactivate -> OnHide -> OnDestroy. At some steps the support by an animation makes sense, others are well indicated right now by static visual features (like a frame around focused buttons). On the other hand, if a future animation is well conceivable the cell is marked with green color. This table should be filled up with small animations that illustrate the target behavior.
    </blockquote>
    {| class="wikitable"
    {| class="wikitable"
    !Control
    !Control
    Line 46: Line 55:
    | [[Projects/Usability/HIG/ContextMenu|Contextmenu]] || - ||-||expand on click||item selection||item clicked||menu closed||-
    | [[Projects/Usability/HIG/ContextMenu|Contextmenu]] || - ||-||expand on click||item selection||item clicked||menu closed||-
    |-
    |-
    | [[Projects/Usability/HIG/Toolbar|Toolbar]] || - ||-||on dock||-||-||on undock||-
    | [[Projects/Usability/HIG/Toolbar|Toolbar]] || - ||-||style="background:green;"| on (can) dock||-||-||style="background:green;"| on undock||-
    |-
    |-
    | Scrollbar/Scrollbox]] || - ||-||-||-||indicate if first/last item or start/end is reached on scroll; accelerate/decelerate on big changes||-||-
    | Scrollbar/Scrollbox || - ||-||-||-||style="background:green;"| indicate if first/last item or start/end is reached on scroll; accelerate/decelerate on big changes||-||-
    |-
    |-
    | [[Projects/Usability/HIG/Buttons|Push Button]]    || - ||-||mouse hoover||focus on button (cf. tab order)||button pressed||focus lost||-
    | [[Projects/Usability/HIG/Buttons|Push Button]]    || - ||-||mouse hoover||focus on button (cf. tab order)||button pressed||focus lost||-
    Line 60: Line 69:
    | [[Projects/Usability/HIG/GroupBox|Group Box]]  || - || - || - || - || - || - || -
    | [[Projects/Usability/HIG/GroupBox|Group Box]]  || - || - || - || - || - || - || -
    |-
    |-
    | [[Projects/Usability/HIG/Splitter|Splitter]]  || - || - || - || - || indicate the ability to resize || - || -
    | [[Projects/Usability/HIG/Splitter|Splitter]]  || - || - || - || - ||style="background:green;"|  indicate the ability to resize || - || -
    |-
    |-
    | [[Projects/Usability/HIG/TabControl|Tabs]]  || - || - || - ||-|| animate tab switching (from/to) || - || -
    | [[Projects/Usability/HIG/TabControl|Tabs]]  || - || - || - ||-|| animate tab switching (from/to) || - || -
    Line 66: Line 75:
    | [[Projects/Usability/HIG/Accordion|Accordion]]  || - || - || - || indicate where to click || animate accordion switching (from/to) || - || -
    | [[Projects/Usability/HIG/Accordion|Accordion]]  || - || - || - || indicate where to click || animate accordion switching (from/to) || - || -
    |-
    |-
    | [[Projects/Usability/HIG/ListView|List View]]  || - || - || - || indicate the ability to click an item || (cf. scrolling) || - || -
    | [[Projects/Usability/HIG/ListView|List View]]  || - || - || - || - || (cf. scrolling) || - || -
    |-
    |-
    | [[Projects/Usability/HIG/TreeView|Tree View]]  || - || - || - || indicate the ability to click an item || animate expand/collapse of nodes; cf. scrolling || - || -
    | [[Projects/Usability/HIG/TreeView|Tree View]]  || - || - || - || - || animate expand/collapse of nodes; cf. scrolling || - || -
    |-
    |-
    | [[Projects/Usability/HIG/Radio_Buttons|Radio Button]]  || - || - || - || - || indicate the change over (from/to) || - || -
    | [[Projects/Usability/HIG/Radio_Buttons|Radio Button]]  || - || - || - || - || indicate the change over (from/to) || - || -
    |-
    |-
    | [[Projects/Usability/HIG/Check_Box|Check Box]]  || - || - || - || - || in case of checking a box with children indicate their auto checking || - || -
    | [[Projects/Usability/HIG/Check_Box|Check Box]]  || - || - || - || - || style="background:green;"| in case of checking a box with children indicate their auto checking || - || -
    |-
    |-
    | [[Projects/Usability/HIG/DropDown|Drop-down list]]  || - || - || Indicate the difference to (editable) combobox || - || animate expanding; indicate the bearing of selection on other controls || animate collapsing || -
    | [[Projects/Usability/HIG/DropDown|Drop-down list]]  || - || - || Indicate the difference to (editable) combobox || - || animate expanding; indicate the bearing of selection on other controls || animate collapsing || -
    Line 84: Line 93:
    | [[Projects/Usability/HIG/TableView|Table]]  || - || - || - || - || Indicate add/del of col/row || - || -
    | [[Projects/Usability/HIG/TableView|Table]]  || - || - || - || - || Indicate add/del of col/row || - || -
    |-
    |-
    | [[Projects/Usability/HIG/Spin_Box|Spin box]]  || - || - || - || - || Animate the step on changing the value || - || -
    | [[Projects/Usability/HIG/Spin_Box|Spin box]]  || - || - || - || - || style="background:green;"| Animate the step on changing the value || - || -
    |-
    |-
    | [[Projects/Usability/HIG/Slider|Slider]]  || - || - || - || - || - || - || -
    | [[Projects/Usability/HIG/Slider|Slider]]  || - || - || - || - || - || - || -
    |-
    |-
    | [[Projects/Usability/HIG/Slider|Tooltip]]  || - || - || - || - || - || Indicate when a tip is closed soon || -
    | [[Projects/Usability/HIG/Slider|Tooltip]]  || - || - || - || - || - || style="background:green;"| Indicate when a tip is closed soon (cf. fade out for notifications)|| -
    |-
    |-
    | [[Projects/Usability/HIG/Slider|Notification]]  || - || - || - || - || - || Indicate when the notification is closed soon || -
    | [[Projects/Usability/HIG/Slider|Notification]]  || - || - || - || - || - || Indicate when the notification is closed soon || -
    |-
    |-
    | [[Projects/Usability/HIG/Slider|Progress bar]]  || - || - || - || - || indicate operation as well on slow progress (e.g. as Microsoft does)|| - || -
    | [[Projects/Usability/HIG/Slider|Progress bar]]  || - || - || - || - || Indicate operation as well on slow progress (e.g. as Microsoft does)|| - || -
    |-
    |-
    | [[Projects/Usability/HIG/Slider|Custom controls]]  || - || - || - || - || animate zoom || - || -
    | [[Projects/Usability/HIG/Slider|Custom controls]]  || - || - || - || - || style="background:green;"| animate zoom || - || -
    |}
    |}



    Revision as of 15:47, 25 July 2014

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


    Purpose

    Both the interaction with controls as well as the workflow itself should be clear to users. For instance it has to be obvious if a button can be pressed at all, if it is in focus and one could use space or enter to execute the function, and whether or not it just has been pressed; Usually, disabled buttons are grayed out, if the focus is on the button it gets an extra frame, and when pressed it has a lowered appearance. Another method to support perception, especially for flat designs, is to use animations.

    An animation is a very short sequence of intermediate states between initial and final state. It should be discriminated from high level animations, like wobbling windows, that only serve emotional purpose. By creating a sensation of space and placement, low level animations can help to enforce a feeling of air, openness and depth to the overall design.

    Guidelines

    Generic advices

    • Use animations only if it serves functional purpose.
    • Use animations to support users' consciousness on transition between two states that are not absolutely clear.
    • Guide the user’s attention by animations and focus through multiple steps of a process or procedure.
    • Make animations as much unobtrusive as possible. Good animations are those that users do not notice.
    • Use the same kind of animation of similar interactions. For instance, expanding the main menu, a context menu or an accordion should be equally animated.
    • Do not use animation that take longer than 200ms, at least for frequently used functions.
    • Make sure that animations run fluid even on lower spec machines.
    • Always allow users to easily switch off animations. But consider as well to increase the timing to gain accessibility.

    Advices for creating an animation

    • Follow physical principles when using animations.
      • Accelerate and decelerate movement as if has a mass. Consider to correlate control size with mass and apply acceleration accordingly.
      • Start animations from their origin.
      • Avoid linear spatial paths, except when movement is constrained to an axis or moving towards/away from a specific point in concert with other elements.
    • Make interactions responsive.
      • Show a surface reaction on input (like a drop into water).
      • Make the material responding (like pressing a button).
    • Make interactions anticipative.
      • Make sure that the direction in which elements move is cohesive across the transition. Avoid conflicting movements and overlapping paths.
      • Consider the depth story: what moves under what, and why?
      • Support spatial relationships through consistent motions for incoming and outgoing elements.

    Best practice

    The life of an control follows a sequence from OnCreate -> OnShow -> OnActivate -> OnPaint -> OnResize -> OnPaint ... to … OnCloseQuery -> OnClose -> OnDeactivate -> OnHide -> OnDestroy. At some steps the support by an animation makes sense, others are well indicated right now by static visual features (like a frame around focused buttons). On the other hand, if a future animation is well conceivable the cell is marked with green color. This table should be filled up with small animations that illustrate the target behavior.

    Control OnCreate OnShow OnActivate OnFocus OnExecute OnLeave OnDestroy
    Main menu - shown from hidden F10, expand on click item selection item clicked menu closed -
    Statusbar - shown from hidden - - - - -
    Contextmenu - - expand on click item selection item clicked menu closed -
    Toolbar - - on (can) dock - - on undock -
    Scrollbar/Scrollbox - - - - indicate if first/last item or start/end is reached on scroll; accelerate/decelerate on big changes - -
    Push Button - - mouse hoover focus on button (cf. tab order) button pressed focus lost -
    Toggle Button - - - - toggle on/off - -
    Command Link - - currently underline on hoover - link gets clicked - -
    Dialogs - dialog shows up in case of non-modal dialogs - - - dialog is being closed
    Group Box - - - - - - -
    Splitter - - - - indicate the ability to resize - -
    Tabs - - - - animate tab switching (from/to) - -
    Accordion - - - indicate where to click animate accordion switching (from/to) - -
    List View - - - - (cf. scrolling) - -
    Tree View - - - - animate expand/collapse of nodes; cf. scrolling - -
    Radio Button - - - - indicate the change over (from/to) - -
    Check Box - - - - in case of checking a box with children indicate their auto checking - -
    Drop-down list - - Indicate the difference to (editable) combobox - animate expanding; indicate the bearing of selection on other controls animate collapsing -
    Combo box - - Indicate the difference to (non-editable) dropdown - animate expanding; indicate the bearing of selection on other controls; animate when an item is being added animate collapsing -
    Line edit - - Indicate if it's editable - Animate enter; indicate bearing on other controls - -
    Text edit - - - - Indicate copy/paste function; cf. scrolling - -
    Table - - - - Indicate add/del of col/row - -
    Spin box - - - - Animate the step on changing the value - -
    Slider - - - - - - -
    Tooltip - - - - - Indicate when a tip is closed soon (cf. fade out for notifications) -
    Notification - - - - - Indicate when the notification is closed soon -
    Progress bar - - - - Indicate operation as well on slow progress (e.g. as Microsoft does) - -
    Custom controls - - - - animate zoom - -

    References

    Parts of the guideline were inspired by Google's guideline on animations.