Commit d40399c4 authored by Carl Schwan's avatar Carl Schwan 🚴
Browse files

Port introduction, layout and color to Hugo

parent 800d4878
---
title: Introduction
weight: 1
---
---
title: Architecture
weight: 1
---
============
All KDE software is built using the Qt toolkit. You will be using
different components depending on whether you are developing an
......@@ -38,10 +39,7 @@ factor.
![Discover, a convergent application built using
Kirigami](/hig/kirigami.jpg)
::: {.hint}
::: {.title}
Hint
:::
{{< alert title="Hint" color="info" >}}
To test qml scenes use
......@@ -49,7 +47,7 @@ To test qml scenes use
for mobile
- `QT_QUICK_CONTROLS_MOBILE=0` and
`QT_QUICK_CONTROLS_STYLE=org.kde.desktop` for desktop
:::
{{< /alert >}}
Plasma
------
......@@ -114,13 +112,9 @@ look-and-feel of KDE applications and the Plasma workspace.
The default for all there of them is *Breeze*.
::: {.note}
::: {.title}
Note
:::
{{< alert title="Note" color="info" >}}
Only *Breeze*, *Breeze dark*, *Breeze Light*, *Breeze Highcontrast* are
covered by the HIG, all other themes are not covered.
:::
{{< /alert >}}
![Overview of breeze controls](/hig/breeze.jpeg)
---
title: Concept
weight: 5
---
=======
The conceptual model is the most fundamental aspect of the interface,
describing the relationship between the interface and the outside world.
......@@ -15,7 +16,7 @@ Project vision
A vision describes the goal of the project. It can be emotive and a
source of inspiration. For instance, by outlining how the final product
makes the world a better place you can draw upon inspiration to create
the end goal of your project. Describe the project\'s final goals.
the end goal of your project. Describe the project's final goals.
Explain who will use the product, and how he or she will take advantage
from it. Make sure your vision is shared between all project
stakeholders. Leave room in your vision for creativity and changes. Keep
......@@ -38,14 +39,14 @@ Personas can help identify the target users of your application and
provide a common understanding among the design and development team. A
persona is the representation of a user, based on empirical data.
Personas describe the target users, giving a clear picture of how
they\'re likely to use the system, and what they'll expect from it. The
they're likely to use the system, and what they'll expect from it. The
description includes a concise summary of characteristics of the user,
their experience, goals and tasks, pain points, environmental conditions
and even name.
The KDE usability team has created
`predefined personas <personas>`{.interpreted-text role="doc"} which we
highly recommended using for your project.
[predefined personas](../personas) which we highly recommended using for
your project.
If you choose to create your own personas, consider the following:
......@@ -92,11 +93,10 @@ class(es) the personas would use in that scenario. Currently, Plasma and
(some) KDE applications target the following device classes:
Desktop/laptop, media center (TV), phone and tablet/convertible. Your
application may target other device classes (like eg. in-vehicle
entertainment systems, kiosk systems, \...) as well.
entertainment systems, kiosk systems, ...) as well.
Documenting Your Concept
------------------------
A useful template for documenting your personas and scenarios is the
`Project User Research Template <research>`{.interpreted-text
role="doc"}.
[Project User Research Template](../research).
---
title: Optimized Convergence
weight: 2
---
=====================
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
......@@ -10,20 +11,18 @@ 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 `../resources/glossary`{.interpreted-text
role="doc"}.
the user experience, see the [glossary](/hig/resources/glossary).
Device Types
------------
The KDE HIG defines an optimal user experience for each device type, as
described in `device type <devicetypes>`{.interpreted-text role="doc"}.
described in [device type](../devicetypes).
Convergence requires an understanding of the commonalities in the user
interface. Convergence can then be implemented by providing variations
of `the common UI components <architecture>`{.interpreted-text
role="doc"} which correspond with the optimal user experience for each
device\'s usage model.
of `the common UI components [architecture](../architecture) which
correspond with the optimal user experience for each device's usage model.
Making convergent applications
------------------------------
......
---
title: Device Types
weight: 3
---
============
In today\'s world, there are many types of digital devices: desktop and
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
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 `../resources/glossary`{.interpreted-text
role="doc"}.
the user experience, see the [Glossary](/hig/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\"
into a large external screen) this can be achieved with a "responsive"
design, as described in `responsive`{.interpreted-text role="doc"}. 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.
::: {.contents depth="1" local="" backlinks="none"}
:::
Desktop/Laptop
--------------
......@@ -75,39 +71,37 @@ guidelines:
This describes the existing Plasma Desktop:
- **Workspace**: Has Virtual Desktops
> - **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 Panel
> - **Workspace Tools**: System Tray in the Panel
> - **Application-Workspace Interaction**: Titlebars and other window
> decoration for each application\'s window
- **Application**: Is windowed
- **Workspace**: Has Virtual Desktops
- **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 Panel
- **Workspace Tools**: System Tray in the Panel
- **Application-Workspace Interaction**: Titlebars and other window
decoration for each application\'s window
> - **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
- **Application**: Is windowed
- **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
![](/hig/Desktop_UX.png)
![Desktop](/hig/Desktop_UX.png)
Tablet
------
### 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*
- 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
......@@ -128,45 +122,42 @@ larger tablets.
Though the Plasma Tablet workspace does not yet exist, this example
shows how it might behave:
- **Workspace**: Has multiple home screens, similar to Virtual
- **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
- **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
----------
### 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*
- 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
......@@ -190,50 +181,48 @@ This example shows how the Smartphone UX can be applied in the
`Plasma Mobile <pm:Introduction>`{.interpreted-text role="doc"}
workspace:
- **Workspace**: Has multiple home screens (similar to Virtual
- **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
- **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
TV
--
### Characteristics
- Primary Input method:
- *Remote control from long range (\~3m)*
- *Voice control*
- Input device precision:
- *High: Remote control provides precise input but only with a
limited number of buttons*
- *Moderate: Remote control may provide rough cursor control.*
- *Low: Voice control allows executing any action directly but can
be difficult to interpret correctly*
- Screen size: *Typically: 81 - 140cm measured diagonally*
- Screen orientation: *Typically landscape mode*
- Learning curve:
- *Low: Intuitive remote control navigation on-screen*
- *Moderate: Voice control trigger phrases may take some time to
learn*
- Primary Input method:
- *Remote control from long range (\~3m)*
- *Voice control*
- Input device precision:
- *High: Remote control provides precise input but only with a
limited number of buttons*
- *Moderate: Remote control may provide rough cursor control.*
- *Low: Voice control allows executing any action directly but can
be difficult to interpret correctly*
- Screen size: *Typically: 81 - 140cm measured diagonally*
- Screen orientation: *Typically landscape mode*
- Learning curve:
- *Low: Intuitive remote control navigation on-screen*
- *Moderate: Voice control trigger phrases may take some time to
learn*
### Optimal user experience
......@@ -257,26 +246,24 @@ through voice control actions.
This example shows how the Smart TV UX can be applied in the Plasma
Bigscreen workspace:
- **Workspace**: Has a single home screen.
> - **Application Launcher**: A fullscreen launcher that is always
> open
> - **Application Shortcuts**: None (use Application Launcher only)
> - **Active Application Overview**: A fullscreen application
> accessible from the Application Launcher as a normal application
> (no Workspace shortcut)
> - **Workspace Actions**: A minimal top panel that is automatically
> hidden
> - **Application-Workspace Interaction**: Available from the Active
> Application Overview, and allows closing apps
- **Application**: Always runs fullscreen
> - **Application Tools**: The absolute minimum possible assortment of
> tools are available from large and clear user interface elements.
> These elements may be be smaller or hidden by default and are
> shown or made bigger when navigating to them. No desktop-style
> menubars are used. Commonly-used tools can be accessed through
> voice control.
> - **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 a single home screen.
- **Application Launcher**: A fullscreen launcher that is always
open
- **Application Shortcuts**: None (use Application Launcher only)
- **Active Application Overview**: A fullscreen application
accessible from the Application Launcher as a normal application
(no Workspace shortcut)
- **Workspace Actions**: A minimal top panel that is automatically
hidden
- **Application-Workspace Interaction**: Available from the Active
Application Overview, and allows closing apps
- **Application**: Always runs fullscreen
- **Application Tools**: The absolute minimum possible assortment of
tools are available from large and clear user interface elements.
These elements may be be smaller or hidden by default and are
shown or made bigger when navigating to them. No desktop-style
menubars are used. Commonly-used tools can be accessed through
voice control.
- **Application Content**: Needs to conform to the KDE HIG in order
to display content in a way that\'s suitable for this device type.
---
title: Introduction
---
============
::: {.toctree titlesonly="" hidden=""}
architecture convergence devicetypes responsive concept personas
research
:::
- `architecture`{.interpreted-text role="doc"}
- `convergence`{.interpreted-text role="doc"}
- `devicetypes`{.interpreted-text role="doc"}
- `responsive`{.interpreted-text role="doc"}
- `concept`{.interpreted-text role="doc"}
- `personas`{.interpreted-text role="doc"}
- `research`{.interpreted-text role="doc"}
---
title: Personas
weight: 6
---
========
> Personas are a simple way of grounding your design toward the type of
> people you consider your software\'s target user. In your design
> people you consider your software's target user. In your design
> sessions, you can call out the names of these personas to help you and
> your team make changes to your software. That way, you can ensure that
> your design is consistent with KDE visual goals.
>
> Software that you write will not necessarily satisfy all personas. It
> should not be the case either that you look to meet every persona\'s
> should not be the case either that you look to meet every persona's
> expectations through your software. Instead, focus your efforts into
> the persona that best meets your target audience and work to
> strengthen your software toward that KDE-specific audience.
......@@ -18,22 +19,22 @@ title: Personas
KDE Personas: Background
------------------------
The question \"Why should people switch to KDE?\" was an important
The question "Why should people switch to KDE?" was an important
factor in the creation of our Personas -- a crucial aspect if we want to
extend the current user base. The \"Technology Adoption Lifecycle\" by
extend the current user base. The "Technology Adoption Lifecycle" by
Rogers (1962) deals with this question by splitting the overall user
base in groups along a bell curve according to their willingness to
adopt new technology.
Looking at the \"Technology Adoption Lifecycle\", you\'ll find the
Looking at the "Technology Adoption Lifecycle", you'll find the
following user groups:
![Technology Adoption Lifecycle](/hig/Introduction_KDE4_Vision_tal.png)
We suggest to move away from the *KDE is for everybody* approach to *KDE
is for the more sophisticated 50% of computer users out there, who
choose it because it perfectly suits their work and that they \"want to
have it\".*
choose it because it perfectly suits their work and that they "want to
have it".*
Concentrating on this user base rather than everybody has both pragmatic
and motivational reasons: Pragmatically, it will be hard to make KDE a
......@@ -41,7 +42,7 @@ favourite product for *laggards* and even the *late majority* within the
next five years. Neither cutting away functionality nor hiding all the
complexity behind *Advanced* buttons is an acceptable solution. Second,
creating a desktop for ambitious users better fits the current
motivation in the KDE development base. We don\'t want to be *simple and
motivation in the KDE development base. We don't want to be *simple and
limited*, we want to develop a smart desktop with rich functionality!
To avoid misunderstandings: KDE will still be an option for educational,
......@@ -52,13 +53,13 @@ tools can still be adjusted to meet the needs of any other user base.
Berna
-----
![Berna](/hig/Berna_small.jpg){.align-right}
{{< persona name="Berna" src="/hig/Berna_small.jpg" >}}
Berna works as an office clerk in a big insurance company. Although she
is a very smart person, she is very often unsure how technology can help
her.
Berna\'s biggest daily task is to check on the details of insurance
Berna's biggest daily task is to check on the details of insurance
claims. She writes reports for her boss suggesting compensation payouts
for the cases she deals with. Berna is a very detail oriented
individual, and always resolves her tasks accurately.
......@@ -68,10 +69,12 @@ piece of technology worked. Since then, she has been very careful when
testing new functionality in the software she uses. She prefers to keep
things simple.
{{</ persona >}}
Matt
----
![Matt](/hig/Matt_small.jpg){.align-right}
{{< persona name="Matt" src="/hig/Matt_small.jpg" >}}
Matt is a geology student in the last year of his undergraduate studies.
For him, technology is meant to simplify annoying and repetitive tasks.
......@@ -85,10 +88,12 @@ Matt often struggles to keep track of all his notes. He is looking for
an effective routine, so he can concentrate on the content rather than
on finding information.
{{</ persona >}}
Susan
-----
![Susan](/hig/Susan_small.jpg){.align-right}
{{< persona name="Susan" src="/hig/Susan_small.jpg" >}}
While Susan seldom uses her computer for work, it has become an
essential part of her social life. With her computer, she can be
......@@ -96,20 +101,22 @@ creative and spread this creativity to the world.
She chats with her friends, shares music, playlists and other media,
creates videos and uploads them to her web space, and runs a blog with
her own style. She can\'t imagine life without her laptop.
her own style. She can't imagine life without her laptop.
She is a fun person and does not want to worry about technical details.
She expects her machine to work.
{{< /persona >}}
Santiago
--------
![Santiago](/hig/Santiago_small.jpg){.align-right}
{{< persona name="Santiago" src="/hig/Santiago_small.jpg" >}}
Santiago runs a medium-sized electric installations business. For him,
technology needs to be comfortable and make him feel smart.
As a manager with an engineering background, Santiago\'s main task is
As a manager with an engineering background, Santiago's main task is
customer negotiations. However, to avoid costs, he is the administrator
for the small network at the company, including a file server and
fifteen PCs for his office clerks.
......@@ -119,10 +126,12 @@ line to set up the small network. Santiago relies on the UI to achieve
these results. The system has to be reliable and easy to use, so his
employees get along with it.
{{< /persona >}}
Philip
------
![Philip](/hig/Philip_small.jpg){.align-right}
{{< persona name="Philip" src="/hig/Philip_small.jpg" >}}
Philip is a high-school student in his last year. He wants to go to
college to study computer science. He loves the challenge of making
......@@ -136,3 +145,5 @@ of free software.
Philip is fancy about technology and is never discouraged if something
does not work as expected. He feels that as a power user he can fix
technical issues himself.
{{< /persona >}}
---
title: Project User Research Profile
weight: 7
---
=============================
Short summary description of the purpose of the application, who it is
for, and what those people can do with it.
......@@ -10,7 +11,7 @@ Purpose
=======
**About the Project User Research Template:** The purpose of this
template is to provide a place to document an application\'s user
template is to provide a place to document an application's user
research information for reference during development. Top level items
are information everyone in the project should be aware of. Some of the
details in the lower sections may take some work and discussion within
......@@ -32,7 +33,7 @@ Who is the application for?