Sprints/UX2011/KMessageWidget: Difference between revisions

From KDE Community Wiki
No edit summary
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
Three kinds of uses:
We can distinguish three kinds of inline messages:


1. Positive or negative feedback
# Positive or negative feedback
# Opportunistic interaction (example: Firefox "remember password" bar)
# Find/replace panels


2. Opportunistic interaction (example: Firefox "remember password" bar)
Feedback and opportunistic interactions are implemented by KMessageWidget.


3. Find/replace panels
Find/replace like panels are implemented by KDialogWidget.


== Negative feedback ==
== KMessageWidget ==
 
=== Negative feedback ===


The KMessageWidget should be used as a secondary indicator of failure: the first
The KMessageWidget should be used as a secondary indicator of failure: the first
indicator is that the action the user expected to happen did not happen.
indicator is for instance that the action the user expected to happen did not happen.


Example: User fills a form, clicks "Submit".
Example: User fills a form, clicks "Submit".
* Expected feedback: form closes
* Expected feedback: form closes
* First indicator of failure: form stays there
* First indicator of failure: form stays there
* Second indicator of failure: a KMessageWidget appears on top of the form
* Second indicator of failure: a KMessageWidget appears on top of the form, explaining the error condition


When used to provide negative feedback, KMessageWidget should be placed close to its context. In the case of a form, it should appear on top of the form entries.
When used to provide negative feedback, KMessageWidget should be placed close to its context. In the case of a form, it should appear on top of the form entries.
Line 23: Line 27:
KMessageWidget should also not appear as an overlay to prevent blocking access to elements the user needs to interact with to fix the failure.
KMessageWidget should also not appear as an overlay to prevent blocking access to elements the user needs to interact with to fix the failure.


== Positive feedback ==
=== Positive feedback ===


KMessageWidget can be used for positive feedback but it shouldn't be overused.  
KMessageWidget can be used for positive feedback but it shouldn't be overused. It is often enough to provide feedback by simply showing the results of an action.


Use KMessageWidget to:
Examples of acceptable uses:
* Confirm success of "critical" transactions
* Confirm success of "critical" transactions
* Indicate completion of background tasks
* Indicate completion of background tasks


Do not use KMessageWidget to:
Example of wrong uses:
* Indicate successful saving of a file
* Indicate successful saving of a file
* Indicate a file has been successfully removed


== Opportunistic interaction ==
=== Opportunistic interaction ===


Opportunistic interaction is the situation where the application suggests to the user an action he could be interested in perform, either based on an action the user just triggered or an event which the application noticed.
Opportunistic interaction is the situation where the application suggests to the user an action he could be interested in perform, either based on an action the user just triggered or an event which the application noticed.
Line 44: Line 49:
* A chat application may notify the user a "special friend" just connected
* A chat application may notify the user a "special friend" just connected


== Layouts ==
=== Layouts ===


The KMessageWidget should provide two possible shapes: line and rectangle.
The KMessageWidget should provide two possible shapes: line and rectangle.


=== Line ===
==== Line ====


Example of layout for a negative feedback KMessageWidget:
Example of layout for a negative feedback KMessageWidget:


  +------------------------------------------+
  +----------------------------------------------+
  | Sorry, the password you entered is wrong |
  | {X} Wrong username or password               |
  +------------------------------------------+
  +----------------------------------------------+
''{X} stands for the 'dialog-error' icon''


Example of layout for an opportunistic interaction KMessageWidget:
Example of layout for an opportunistic interaction KMessageWidget:


  +--------------------------------------------------------------------------+
  +------------------------------------------------------------------------------+
  | Remember password for site example.com? (Remember) (Do not remember) (X) |
  | {i} Remember password for site example.com? (Remember) (Do not remember) (X) |
  +--------------------------------------------------------------------------+
  +------------------------------------------------------------------------------+


The widget height is always the height of one line of text plus
The widget height is always the height of one line of text plus
margins. If text is too long, it is cropped like this:
margins. If text is too long, it is cropped like this:


  +------------------------------------------------------------------+
  +----------------------------------------------------------------------+
  | Remember password for... _more_ (Remember) (Do not remember) (X) |
  | {i} Remember password for... _more_ (Remember) (Do not remember) (X) |
  +------------------------------------------------------------------+
  +----------------------------------------------------------------------+


Clicking on _more_ expands the widget to multiple lines:
Clicking on _more_ expands the widget to multiple lines:


  +------------------------------------------------------------------+
  +----------------------------------------------------------------------+
  | Remember password for site      (Remember) (Do not remember) (X) |
  | {i} Remember password for site      (Remember) (Do not remember) (X) |
  | example.com?                                                    |
  |     example.com?                                                    |
  +------------------------------------------------------------------+
  +----------------------------------------------------------------------+


Note: One should try to ensure the beginning of the message text makes it
Note: One should try to ensure the beginning of the message text makes it
Line 80: Line 86:
_more_ link. So avoid generic introductions like "Do you want FooApp to...".
_more_ link. So avoid generic introductions like "Do you want FooApp to...".


=== Rectangle ===
==== Rectangle ====


Example usage: showing feedback at the bottom of a sidebar.
Example usage: showing feedback at the bottom of a sidebar.


  +--------------------+
  +------------------------+
  | Do you want to (X) |
  | {i} Do you want to (X) |
  | rip this CD?      |
  |     rip this CD?      |
  |                   |
  |                       |
  |           (Rip CD) |
  |               (Rip CD) |
  +--------------------+
  +------------------------+


Queuing: KMessageWidgets should not stack on each others. Assuming KMessageWidget
Queuing: KMessageWidgets should not stack on each others. Assuming KMessageWidget
Line 95: Line 101:
visible for at least 3 seconds and replace it.
visible for at least 3 seconds and replace it.


== Widget API ==
=== Widget API ===


* Properties
* Properties
Line 107: Line 113:
** setMainWidget() low-level method to replace the existing text + buttons layout with a custom widget. Setting text and adding actions with addAction() should be preferred whenever possible.
** setMainWidget() low-level method to replace the existing text + buttons layout with a custom widget. Setting text and adding actions with addAction() should be preferred whenever possible.


== To be refined ==
== KDialogWidget ==
 
* Initiated and ended by the user
* Primary task but not the primary function of the interface
* Examples:
** Find/replace
** Spellchecking
** Filtering
 
=== Layout ===


* MessageBox-like Icon on the left?
Content of the widget is on the left, close button is on its right, naturally
appearing when user finishes reading the line.
 
+------------------------------------------------------------------+
| Find: [_______] (Done)                                          |
+------------------------------------------------------------------+
 
+------------------------------------------------------------------+
|    Find: [_______] (Next  ) (Previous  ) (Done)                |
| Replace: [_______] (Replace) (Replace All)                      |
+------------------------------------------------------------------+
 
The widget can optionally provide two different content, one thin and one taller. It will then show a collapse/expand button, like this:
 
+------------------------------------------------------------------+
| (+) Find: [_______] (Done)                                      |
+------------------------------------------------------------------+
 
+------------------------------------------------------------------+
| (-)    Find: [_______] (Next  ) (Previous  ) (Done)            |
|    Replace: [_______] (Replace) (Replace All)                  |
+------------------------------------------------------------------+
 
 
=== To be refined ===


* Integration with KNotification?
* Integration with KNotification?


* Definition of a container to implement queuing rules?
* Definition of a container to implement queuing rules?
* Using a different widget for the "find/replace" use-case?

Latest revision as of 14:05, 28 April 2011

We can distinguish three kinds of inline messages:

  1. Positive or negative feedback
  2. Opportunistic interaction (example: Firefox "remember password" bar)
  3. Find/replace panels

Feedback and opportunistic interactions are implemented by KMessageWidget.

Find/replace like panels are implemented by KDialogWidget.

KMessageWidget

Negative feedback

The KMessageWidget should be used as a secondary indicator of failure: the first indicator is for instance that the action the user expected to happen did not happen.

Example: User fills a form, clicks "Submit".

  • Expected feedback: form closes
  • First indicator of failure: form stays there
  • Second indicator of failure: a KMessageWidget appears on top of the form, explaining the error condition

When used to provide negative feedback, KMessageWidget should be placed close to its context. In the case of a form, it should appear on top of the form entries.

KMessageWidget should get inserted in the existing layout. Space should not be reserved for it, otherwise it becomes "dead space", ignored by the user. KMessageWidget should also not appear as an overlay to prevent blocking access to elements the user needs to interact with to fix the failure.

Positive feedback

KMessageWidget can be used for positive feedback but it shouldn't be overused. It is often enough to provide feedback by simply showing the results of an action.

Examples of acceptable uses:

  • Confirm success of "critical" transactions
  • Indicate completion of background tasks

Example of wrong uses:

  • Indicate successful saving of a file
  • Indicate a file has been successfully removed

Opportunistic interaction

Opportunistic interaction is the situation where the application suggests to the user an action he could be interested in perform, either based on an action the user just triggered or an event which the application noticed.

Example use cases:

  • A browser can propose remembering a recently entered password
  • A music collection can propose ripping a CD which just got inserted
  • A chat application may notify the user a "special friend" just connected

Layouts

The KMessageWidget should provide two possible shapes: line and rectangle.

Line

Example of layout for a negative feedback KMessageWidget:

+----------------------------------------------+
| {X} Wrong username or password               |
+----------------------------------------------+

{X} stands for the 'dialog-error' icon

Example of layout for an opportunistic interaction KMessageWidget:

+------------------------------------------------------------------------------+
| {i} Remember password for site example.com? (Remember) (Do not remember) (X) |
+------------------------------------------------------------------------------+

The widget height is always the height of one line of text plus margins. If text is too long, it is cropped like this:

+----------------------------------------------------------------------+
| {i} Remember password for... _more_ (Remember) (Do not remember) (X) |
+----------------------------------------------------------------------+

Clicking on _more_ expands the widget to multiple lines:

+----------------------------------------------------------------------+
| {i} Remember password for site      (Remember) (Do not remember) (X) |
|     example.com?                                                     |
+----------------------------------------------------------------------+

Note: One should try to ensure the beginning of the message text makes it possible for the regular user to understand the message without clicking on the _more_ link. So avoid generic introductions like "Do you want FooApp to...".

Rectangle

Example usage: showing feedback at the bottom of a sidebar.

+------------------------+
| {i} Do you want to (X) |
|     rip this CD?       |
|                        |
|               (Rip CD) |
+------------------------+

Queuing: KMessageWidgets should not stack on each others. Assuming KMessageWidget A is visible, if KMessageWidget B is created, it should wait until A has been visible for at least 3 seconds and replace it.

Widget API

  • Properties
    • tone (negative, neutral, positive)
    • text
    • shape (line, rectangle)
    • showCloseButton
  • Methods
    • addAction(QAction*)
    • setMainWidget() low-level method to replace the existing text + buttons layout with a custom widget. Setting text and adding actions with addAction() should be preferred whenever possible.

KDialogWidget

  • Initiated and ended by the user
  • Primary task but not the primary function of the interface
  • Examples:
    • Find/replace
    • Spellchecking
    • Filtering

Layout

Content of the widget is on the left, close button is on its right, naturally appearing when user finishes reading the line.

+------------------------------------------------------------------+
| Find: [_______] (Done)                                           |
+------------------------------------------------------------------+
+------------------------------------------------------------------+
|    Find: [_______] (Next   ) (Previous   ) (Done)                |
| Replace: [_______] (Replace) (Replace All)                       |
+------------------------------------------------------------------+

The widget can optionally provide two different content, one thin and one taller. It will then show a collapse/expand button, like this:

+------------------------------------------------------------------+
| (+) Find: [_______] (Done)                                       |
+------------------------------------------------------------------+
+------------------------------------------------------------------+
| (-)    Find: [_______] (Next   ) (Previous   ) (Done)            |
|     Replace: [_______] (Replace) (Replace All)                   |
+------------------------------------------------------------------+


To be refined

  • Integration with KNotification?
  • Definition of a container to implement queuing rules?