Placeholder Message

When a content view is empty, the user may wonder whether the software is broken. To alleviate this, add a placeholder message into the view telling the user that there is no content, ideally providing either instructions for how to add content, or even a UI control that will allow them to do so (if appropriate).

When to use

Show a Placeholder Message when a view that sometimes shows content or user interface controls happens to be empty right now.

How to use

• Visually center the message in the view so that it cannot be mistaken for content (which is typically top-aligned).
• Use 50% opacity for the message so that it is not too attention-getting.
• If there is already a UI control visible elsewhere in the same window/page that will allow the user to somehow populate the view, add an explanatory message below the main one pointing the user to it.
• If there is no such UI control already visible, add one directly beneath the message's text.
• If the view is typically used to display content but not add it directly, do not add any controls to allow the user to add content to the view.
• If the view is searchable, distinguish between the different conditions of "no content here" vs. "no search results".

Code

Kirigami

• Kirigami: PlaceholderMessage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

...
import org.kde.kirigami 2.15 as Kirigami
import QtQuick.Controls 2.15 as QQC2
import QtQuick.Layouts 1.13
...

Kirigami.ApplicationWindow {
    ...
    ColumnLayout {
        QQC2.ScrollView {
        id: scrollview
            ...
            Kirigami.PlaceholderMessage {
                visible: scrollview.count === 0
                text: "No content"
                explanation: "click the button below to add some"
            }
        }
        QQC2.Button {
            Layout.Alignment: Qt.AlignRight
            text: "Add content"
            icon.name: "list-add"
        }
    }
}