Toast usability

[romaninsh]

Usability report - Toast

I have interviewed few people regarding the "Toast" to collect the following usability feedback. Hopefully this can inspire someone to further improve "Toast".

(I compared with MacOS notifier, see "terminal-notifier")

1. Copy text from the toast.

In some cases user may want to interact with a toast - take a screenshot of it or copy text. Developer is faced with a choice - hide toast automatically or make it sit there forever. There is no middle option.

PROBLEM: toast can disappear preemptively

FIX: Allow user to prevent toast from disappearing by hovering mouse over it.

FIX: Set default timeout based on the length of title/message, so longer messages would be displayed longer.

2. Attention impact and readability

Thinking on how toast is used: It captures user's attention when it appears and user scans the message. If message is not important, user will re-focus back on the page.

PROBLEM: toast perform more animation when disappearing rather than when appearing.

FIX: Run animation when toast appears. Use fade-out when disappearing.

3. Interrupted and difficulty to follow

Imagine user reads a toast. Two events can occur. Either new toast appear or another toast disappear. Which of those should encourage user to "stop" reading and re-focus?

PROBLEM: toast disappearing is more disruptive than appearance of new toast due to repositioning of the text.

FIX: new toasts should appear next to the edge of the screen and move existing toasts. Old toasts should fade-out subliminally.

4. Text selection

Attempt to select text for copy-paste from a toast makes it disappear (even if it's not timed).

FIX: click-drag-release should not hide toast.

4. Shadow

Toast appears on a layer ABOVE the interface. All other UI elements that appear on top feature shadow in the default theme.

FIX: toast should also cast shadow.

5. Bouncy effect

User may continue reading message while it slides. Bouncy effect makes it very hard to follow. Using ease-in-ease-out slide is much more easy on the eyes.

FIX: replace animation with smooth reposition

6. Default progress

When progress goes forward it indicates that some work is being performed. For example when you are installing update, progress bar moves forward. Typically user interaction will cancel action (e.g. copying files).

When action is "paused" such as waiting 30 seconds before reboot or displaying dialog that will disappear, progress goes backwards (count-down seconds or reverse progress bar). This should be recommended and default action.

FIX: change default

7. Icon positioning

It looks like icon is not properly aligned with the text.

FIX: position icon in the middle vertically

8. Title

Title text is very hard to distinguish from the body text. It's bold but the size is the same.

FIX: make title more pronounced

9. Close button (x)

Currently if the message stays on forever, user may not know that it can be clicked.

FIX: add x button (may be optional feature)

10. Link & Interaction on toast

It would be nice to see a test where message contains clickable link or even a button (s). For instance, it can indicate failure on some action but offer "Retry / Dismiss" buttons.

[lubber-de]

Thanks for the suggestion and investigation.

1.+ 3. Text selection: I think we will make this optional. We are currently working on the feature to make any kind of content a toast (similar to modal), so i guess we will follow the suggested direction
4. Worth thinking about 🙂 we'll perhaps have an option for this (see comment above regarding "any content".
6. Good point
7. We'll test this again with different content

10. See comment above "any content"

Some behaviors you were mentioning are already possible/adjustable:

2. Show Animation:

transition: {
  showMethod  : 'scale'
}

5. Easing on close:

transition: {
  closeEasing  : 'ease-in-out'
}

8. At the moment you might simply use your desired CSS

.ui.toast .header {
  font-size: 5em;
font-weight: 'bold';
}

'header' is the new default titleclass as of v2.7.0

9. Closebutton: closeIcon:true

[romaninsh]

@lubber-de I'm leaving it to your consideration. Since it is marked beta, it might be a last chance to get it straightened out with the correct defaults.

[lubber-de]

Implemented everything by #1129 😁
Sorry it took so long