diff --git a/source/introduction/convergence.rst b/source/introduction/convergence.rst index 3e76652..8bd684e 100644 --- a/source/introduction/convergence.rst +++ b/source/introduction/convergence.rst @@ -1,80 +1,74 @@ Optimized Convergence ===================== The design of KDE software, and by extension the KDE HIG, is made with convergence in mind. *Convergence* means that a piece of software's user interface can immediately adapt its user experience to the particularities of each type of device that it can run on (desktop, laptop, tablet, phone, etc). For information regarding the differences between a user interface and the user experience, see the :doc:`../resources/glossary`. Device Types ------------ The KDE HIG defines an optimal user experience for each device type, as described in :doc:`devicetypes`. -Some devices are adaptable, e.g. a tablet with a keyboard plugged in, or a -convertible laptop with only the touchscreen in use. These types of devices -will require the user interface to adapt as necessary for each usage mode. -If minimal changes are needed, this can be achieved with a "responsive" design, -as described in :doc:`responsive`. For more extensive changes, an entirely -different user interface may paradigm need to be presented. Common Components ----------------- Convergence requires an understanding of the commonalities in the user interface. To that end, the KDE HIG defines a set of common components which are independent of any device type. Convergence can then be implemented by providing variations of these common UI components which correspond with the optimal user experience for each device's usage model. - **Workspace**: The top-level container of the whole user interface. Often called "desktop", "home screen", or "shell", it shows the wallpaper and allows users to add widgets, app launchers, files or folders. - **Application Launcher**: Provides an overview of installed applications and allows the user to launch one of them. - **Application Shortcuts**: Provides quick access to frequently-used applications. - **Active Application Overview**: Provides an overview of the active applications that are directly used by the user. - **Workspace Tools**: Provides quick access to functionality integrated into the workspace that's both highly visible to the user and frequently changed, like enabling/disabling WiFi and Bluetooth, or whether or not to show notifications. - **Application-Workspace Interaction**: Displays information about each application's windows, and provides ways to move or close them and change how they run within the workspace. - **Application**: The top-level container of a single application. - **Application Tools**: Provides access to an application's commonly-used functionality in an always-accessible toolbar or menubar. These tools should not change depending on what the application is displaying. - **Application Content**: The actual content of an application. This depends on the application itself, but conformance to the KDE HIG should make it easier to allow convergence for this component. This part of the application can also contain contextually-appropriate tools that operate directly on the active or selected content. These common components may become a bit more clear with a visual example: .. figure:: /img/Desktop_UX.png :scale: 25% :alt: Example showing the common components on a Desktop device type Making convergent applications ------------------------------ The best way to create convergent applications is to follow the recommendations and best practices from the KDE HIG, and build your app using the Kirigami UI toolkit, which provides many of these patterns and components "out of the box" so that they can be easily integrated. diff --git a/source/introduction/devicetypes.rst b/source/introduction/devicetypes.rst index dd5fb70..e70c564 100644 --- a/source/introduction/devicetypes.rst +++ b/source/introduction/devicetypes.rst @@ -1,150 +1,195 @@ Device Types ============ -A Device Type corresponds to the UX Context of a specific user experience (UX). -So for each Device Type the UX Context and the optimal UX are defined here. An -example is included to indicate how this might influence the Common Components -(which are described in :doc:`convergence`), but it is not part of the -definition for the Device Type. - -A single device may represent multiple Device Types so the UI would need to -adapt to the Device Type most closely matching the device's current behaviour in -order to provide an optimal UX. For example, a tablet will normally have an -optimal UX, as defined for a Tablet. When the tablet is docked into its -docking station its UX Context more closely matches that of the Desktop/Laptop -UX. So the UI needs to be changed to correspond with the optimal UX for a -Desktop/Laptop. This example essentially shows how convergence works. - -.. contents:: :depth: 2 +In today's world, there are many types of digital devices: desktop and laptop +computers, smartphones, tablets, and so on. A harmonious and efficient user +experience is only possible when the software's user interface is tailored to +each device's physical characteristics and the way that a user will interact +with it. + +For information regarding the differences between a user interface and the user experience, see the :doc:`../resources/glossary`. + +Some devices are adaptable, e.g. a tablet with a keyboard plugged in, or a +convertible laptop with only the touchscreen in use. These types of devices +will require the user interface to adapt as necessary for each usage mode. +If minimal changes are needed (for example, a laptop plugged into a large +external screen) this can be achieved with a "responsive" design, as described +in :doc:`responsive`. For more extensive changes (for example, a tablet +plugged into a docking station with a mouse and keyboard attached), an entirely +different user interface paradigm may need to be presented. + Desktop/Laptop -------------- -UX Context -^^^^^^^^^^ -- Primary Input method: *Keyboard/Pointing device from close range.* -- Screen size: *Moderate to Large.* -- Screen orientation: *Landscape, fixed.* +Characteristics +^^^^^^^^^^^^^^^ +- Primary Input method: *Keyboard and Pointing device* +- Input device precision: *Very high: individual keys and screen pixels can be targeted and pressed with high accuracy* +- Screen size: *Typically 28 - 76cm measured diagonally* +- Screen orientation: *Fixed landscape orientation* +- Learning curve: *Medium: keyboard and mouse skills must be learned* -Optimal UX -^^^^^^^^^^ +Optimal user experience +^^^^^^^^^^^^^^^^^^^^^^^ Since there is sufficient space, all components are directly accessible and multiple applications can be shown at once. The use of a keyboard allows quick and efficient text input without any on-screen elements. Pointing devices are -highly accurate and can use mouse-over (or "hover") effects. This allows for -additional elements, like hidden controls, to be shown on-screen when the cursor -"hovers" over a specific area. It is also possible to configure the workspace to -always maximize applications, which is more suitable for smaller screen sizes. +highly accurate and user interface elements may be compact. + +Though mouse-over (or "hover") effects are possible, using them to hide functionality is discouraged, as it impedes usability and makes convergence more +difficult. Hover effects should only be used for non-essential informational +purposes, such as displaying tooltips. + +It is possible to extensively customize the user interface to match the user's +workflow and aesthetic preferences. + +Laptops should be properly supported, keeping in mind the following guidelines: + +- When using a touchpad's two-finger scroll gesture, ensure that scrollviews do + pixel-by-pixel scrolling instead of "jumping" certain number of rows. +- Minimize window chrome and make sure that there's enough space for content; + avoid excessive toolbars and frames. Not everything needs to be visible all + at the same time! +- Minimize the use of Function keys as shortcuts, as these can be difficult to + access with a laptop keyboard. Provide alternative accelerators wherever + possible. +- Don't require right-clicking or middle-clicking for core functionality, as + these can be difficult or impossible to simulate with a touchpad. In + particular, never require the use of a right-click-drag or middle-click-drag. Example ^^^^^^^ -This example shows how the Desktop UX can be applied in the Plasma Desktop -workspace: +This describes the existing Plasma Desktop: -- **Workspace**: has Virtual Desktops. +- **Workspace**: Has Virtual Desktops - - **Application Launcher**: Kickoff Menu in the taskbar. + - **Application Launcher**: Kickoff Menu in the Panel - **Application Shortcuts**: Applications can be dragged to the Panel or - pinned in the Active Application Overview. - - **Active Application Overview**: Task Manager in the taskbar. - - **Workspace Actions**: System Tray in the taskbar. - - **Application-Workspace Interaction**: Window Decorations for each - application. + pinned in the Active Application Overview + - **Active Application Overview**: Task Manager in the Panel + - **Workspace Tools**: System Tray in the Panel + - **Application-Workspace Interaction**: Titlebars and other window decoration + for each application's window -- **Application**: is windowed. +- **Application**: Is windowed - - **Application Tools**: shows all top-level menu items at once at the top of - the application window. - - **Application Content**: most applications are already optimized for this - device type. + - **Application Tools**: Shows application-global tools at the top of the + application window in the form of toolbars and menubars + - **Application Content**: Most applications are already optimized for this + device type .. figure:: /img/Desktop_UX.png :scale: 25% :alt: Example of the Desktop UX in the Plasma Desktop + Tablet ------ -UX Context -^^^^^^^^^^ -- Primary Input method: *Touchscreen from close range, usually with both hands.* -- Screen size: *Moderate.* -- Screen orientation: *Landscape/Portrait, dynamic.* - -Optimal UX -^^^^^^^^^^ -The workspace hides as much as possible, given the lack of screen space. The -main focus is the Application Content. Components are designed to be controlled -by fingers, which are less accurate than a pointing device. Given that the user -interacts directly with the screen, swiping inwards from screen edges can be -used to access otherwise hidden components. +Characteristics +^^^^^^^^^^^^^^^ +- Primary Input method: *One or more fingers per hand touching a touchscreen, + often with both hands* +- Input device precision: *Low: wide variability of hand and fingertip sizes + across user ages, sizes and genders. Sloppy input must often be corrected* +- Screen size: *Typically: 18 - 30cm measured diagonally* +- Screen orientation: *Dynamically switches between landscape and portrait* +- Learning curve: *Low: intuitive touch input and simple apps* + +Optimal user experience +^^^^^^^^^^^^^^^^^^^^^^^ +The characteristics of the touch input method dominate the design. User +interface elements must be large enough to be accurately tapped by even the +largest fingers. Sloppy input should be corrected by intelligent software, +especially for textual input. + +The main focus is the Application Content. Because of limited screen space, the +workspace hides as much as possible. Applications should only show contextually +appropriate content and tools, making the greatest possible use of the small +screen space. Application windows should be opened maximized, with side-by-side +or quarter tiling possible for larger tablets. Example ^^^^^^^ -This example shows how the Tablet UX can be applied in a Plasma Tablet workspace -(though this does not exist yet, it is based on common tablet interfaces such as -on Android tablets): - -- **Workspace**: has multiple home screens (similar to Virtual Desktops). - - - **Application Launcher**: a launcher accessible from the home screen (not - necessarily fullscreen). - - **Application Shortcuts**: the bottom bar on the home screen. - - **Active Application Overview**: a fullscreen application switcher accessible - from the bottom bar or auto-hidden controls (like a button bar containing the - Home, Back and application switcher buttons). - - **Workspace Actions**: a minimal top bar that auto-hides. - - **Application-Workspace Interaction**: only from the Active Application - Overview (close only). - -- **Application**: running fullscreen or tiled. - - - **Application Tools**: available from a single button within the Application - Content, a component shown by swiping from the edge of the workspace or - through a shortcut (e.g. long-press a button in the button bar). - - **Application Content**: needs to conform to the KDE HIG in order to display - content in a way that's suitable for this device type. +Though the Plasma Tablet workspace does not yet exist, this example shows how it +might behave: + +- **Workspace**: Has multiple home screens, similar to Virtual Desktops + + - **Application Launcher**: A launcher accessible from the home screen (not + necessarily fullscreen) + - **Application Shortcuts**: Live on the bottom Panel, similar to on Plasma + Desktop + - **Active Application Overview**: A fullscreen application switcher accessible + from the bottom panel or auto-hidden controls (like a button bar containing the + Home, Back and application switcher buttons) + - **Workspace Actions**: A minimal top panel that auto-hides + - **Application-Workspace Interaction**: Available from the Active Application + Overview, and allows closing and re-arranging/re-ordering apps + +- **Application**: Runs fullscreen or tiled + + - **Application Tools**: Available from a toolbar within the application + window. No desktop-style menubars are used. Commonly-used tools can be + accessed through touch gesture shortcuts + - **Application Content**: Needs to conform to the KDE HIG in order to display + content in a way that's suitable for this device type + Smartphone ---------- -UX Context -^^^^^^^^^^ -- Primary Input method: *Touchscreen from close range, mostly with one hand.* -- Screen size: *Small.* -- Screen orientation: *Landscape/Portrait, dynamic.* - -Optimal UX -^^^^^^^^^^ -The workspace hides as much as possible, given the lack of screen space. The -main focus is the Application Content. Components are designed to be controlled -by fingers, which are less accurate than a pointing device. This UX differs from -the Tablet UX in that the Application Content is adapted more heavily to the -smaller screen size, for which guidelines are provided in this KDE HIG. Also, -while it is optimized for one-handed use it may sometimes be necessary to use -both hands. +Characteristics +^^^^^^^^^^^^^^^ +- Primary Input method: *One or more fingers touching a touchscreen, usually + with only one hand* +- Input device precision: *Low: wide variability of hand and fingertip sizes + across user ages, sizes and genders. Sloppy input must often be corrected* +- Screen size: *Typically: 11 - 18cm measured diagonally* +- Screen orientation: *Dynamically switches between landscape and portrait, + though mostly used in portrait mode* +- Learning curve: *Low: intuitive touch input and simple apps* + +Optimal user experience +^^^^^^^^^^^^^^^^^^^^^^^ +Like with the tablet device type, user interface elements must be large enough +to accommodate a large low-precision fingertip. Because of the even more +constrained screen size, only a few interactive controls can be presented at +one time. Others must be hidden on other pages or behind drawers and pop-up +views. + +Like the tablet mode, the workspace hides as much as possible and the main focus +is the Application Content--only even more so. Great care must be taken to +optimize the Application Content to the small screen size, omitting anything +not absolutely necessary + +While this device type is optimized for one-handed use, it may sometimes be +useful to support two-handed use, especially when typing. + Example ^^^^^^^ This example shows how the Smartphone UX can be applied in the Plasma Mobile workspace: -- **Workspace**: has multiple home screens (similar to Virtual Desktops). - - - **Application Launcher**: a fullscreen launcher accessible from the home - screen. - - **Application Shortcuts**: the bottom bar on the home screen. - - **Active Application Overview**: a fullscreen application switcher - accessible from the bottom bar or auto-hidden controls (like a button bar - containing the Home, Back and application switcher buttons). - - **Workspace Actions**: a minimal top bar that auto-hides. - - **Application-Workspace Interaction**: only from the Active Application - Overview (close only). - -- **Application**: always running fullscreen. - - - **Application Menu**: available from a single button within the Application - Content, a component shown by swiping from the edge of the workspace or - through a shortcut (e.g. long-press a button in the button bar). - - **Application Content**: needs to conform to the KDE HIG in order to display - content in a way that's suitable for this device type. +- **Workspace**: Has multiple home screens (similar to Virtual Desktops) + + - **Application Launcher**: A fullscreen launcher accessible from the home + screen + - **Application Shortcuts**: The bottom panel on the home screen + - **Active Application Overview**: A fullscreen application switcher + accessible from the bottom panel or auto-hidden controls (like a button bar + containing the Home, Back and application switcher buttons) + - **Workspace Actions**: A minimal top panel that auto-hides + - **Application-Workspace Interaction**: Available from the Active Application + Overview, and allows closing and re-arranging/re-ordering apps + +- **Application**: Always runs fullscreen + + - **Application Tools**: The absolute minimum possible assortment of tools + are available from a toolbar within the application window. No desktop-style + menubars are used. Commonly-used tools can be accessed through touch gesture + shortcuts + - **Application Content**: Needs to conform to the KDE HIG in order to display + content in a way that's suitable for this device type