Sprints/UX2011/KMessageWidget: Difference between revisions
(Created page with 'Three kinds of uses: 1. Positive or negative feedback 2. Opportunistic interaction (example: Firefox "remember password" bar) 3. Find/replace panels == Negative feedback == ...') |
No edit summary |
||
Line 7: | Line 7: | ||
3. Find/replace panels | 3. Find/replace panels | ||
== Negative feedback == | == Feedback == | ||
=== Negative feedback === | |||
The MessageWidget should be used as a second indicator of failure: the first | The MessageWidget should be used as a second indicator of failure: the first | ||
Line 17: | Line 19: | ||
- Second indicator of failure: a MessageWidget appears on top of the form | - Second indicator of failure: a MessageWidget appears on top of the form | ||
=== Placement of the MessageWidget === | ==== Placement of the MessageWidget ==== | ||
MessageWidget should be placed closed to its context. In the case of a form, it | MessageWidget should be placed closed to its context. In the case of a form, it | ||
Line 27: | Line 29: | ||
elements the user needs to interact with to fix the failure. | elements the user needs to interact with to fix the failure. | ||
== Positive feedback == | === Positive feedback === | ||
Should be used sparingly: only to confirm success of high-risk transactions or | Should be used sparingly: only to confirm success of high-risk transactions or | ||
completion of background tasks. | completion of background tasks. | ||
== Opportunistic interaction == | |||
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 MessageWidget should provide two possible layouts: | |||
- Line | |||
+----------------------------------+ | |||
| Password is wrong | | |||
+----------------------------------+ | |||
+--------------------------------------------------------------------------+ | |||
| Remember password for site example.com? (Remember) (Do not remember) (X) | | |||
+--------------------------------------------------------------------------+ | |||
The widget height should always be the height of one line of text (plus | |||
margins). If text is too long, it should be cropped like this: | |||
+------------------------------------------------------------------+ | |||
| Remember password for... _more_ (Remember) (Do not remember) (X) | | |||
+------------------------------------------------------------------+ | |||
Clicking on _more_ expands the widget to multiple lines: | |||
+------------------------------------------------------------------+ | |||
| 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. | |||
+--------------------+ | |||
| Do you want to (X) | | |||
| rip this CD? | | |||
| | | |||
| (Rip CD) | | |||
+--------------------+ | |||
Queuing: MessageWidgets should not stack on each others. Assuming MessageWidget | |||
A is visible, if MessageWidget 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 | |||
- 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. | |||
== To be refined == | |||
- MessageBox-like Icon on the left? | |||
- Integration with KNotification? | |||
- Definition of a container to implement queuing rules? |
Revision as of 22:44, 15 April 2011
Three kinds of uses:
1. Positive or negative feedback
2. Opportunistic interaction (example: Firefox "remember password" bar)
3. Find/replace panels
Feedback
Negative feedback
The MessageWidget should be used as a second indicator of failure: the first indicator is that the action the user expected to happen did not happen.
Example: User just filled a form, clicks "Submit". - Expected feedback: form closes - First indicator of failure: form stays there - Second indicator of failure: a MessageWidget appears on top of the form
Placement of the MessageWidget
MessageWidget should be placed closed to its context. In the case of a form, it should appear on top of the form entries.
MessageWidget should get inserted in the existing layout. Space should not be reserved for it, otherwise it becomes "dead space", ignored by the user. MessageWidget should not appear as an overlay to prevent blocking access to elements the user needs to interact with to fix the failure.
Positive feedback
Should be used sparingly: only to confirm success of high-risk transactions or completion of background tasks.
Opportunistic interaction
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 MessageWidget should provide two possible layouts:
- Line
+----------------------------------+ | Password is wrong | +----------------------------------+
+--------------------------------------------------------------------------+
| Remember password for site example.com? (Remember) (Do not remember) (X) |
+--------------------------------------------------------------------------+
The widget height should always be the height of one line of text (plus margins). If text is too long, it should be cropped like this:
+------------------------------------------------------------------+ | Remember password for... _more_ (Remember) (Do not remember) (X) | +------------------------------------------------------------------+
Clicking on _more_ expands the widget to multiple lines:
+------------------------------------------------------------------+ | 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.
+--------------------+ | Do you want to (X) | | rip this CD? | | | | (Rip CD) | +--------------------+
Queuing: MessageWidgets should not stack on each others. Assuming MessageWidget A is visible, if MessageWidget 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 - 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.
To be refined
- MessageBox-like Icon on the left?
- Integration with KNotification?
- Definition of a container to implement queuing rules?