docs(spindle-ui): ユーザーへの通知の使い分けについて詳細追加

openameba · Jan 10, 2025 · 229d44d · 229d44d
1 parent ed81d9c
commit 229d44d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 21 deletions.
diff --git a/packages/spindle-ui/src/InlineNotification/InlineNotification.stories.mdx b/packages/spindle-ui/src/InlineNotification/InlineNotification.stories.mdx
@@ -33,15 +33,25 @@ InlineNotificationコンポーネントは、ユーザーのアクションに
 
 また、エラー内容を表示するForm/InvalidMessageコンポーネントとは異なり、フォームに紐づかない形で提供されます。
 
-## 通知系のComponentの違い
+## ユーザーへの通知の種別
 
-ユーザーにお知らせをするための他のComponentとしてSnackbarとToastがあります。現状下記のように使い分けています。
+ユーザーにお知らせをするための他のComponentとしてToastとSnackbarがあります。画面内で完結せず、遷移させるべき状況もあります。現状下記のように使い分けています。
 
-Component | テキストの長さ | 追加のアクションの有無 | 自動で消える秒数 | 表示位置 | メッセージの内容
-:-- | :-- | :-- | :-- | :-- | :--
-[Toast](/docs/toast--information) | 1行のみ | なし | 4秒 | フローティングで位置固定で表示（画面上下の中央のみ※） | 見落としても支障がない
-[Snackbar](/docs/snackbar--information) | 3,4行まで | あり | 10秒 | フローティングで位置固定で表示（画面上下の左・右・中央）| 読んでは欲しい、訴求
-InlineNotification | 制限なし | あり | 消えない | ページに埋め込む必要がありレイアウトに影響を与える | エラー通知など、ユーザーの追加のアクションが必要なもの
+### 通信を伴うデータ更新のフィードバック
+
+- 成功：[Toast - Confirmation](/docs/toast--confirmation)で、成功した事実のみを伝える
+- 失敗：[InlineNotification - Error Emphasis](/docs/inlinenotification--error-emphasis)で、失敗した理由とユーザーがすべきアクションを伝える
+- 一連の動作のゴールがある場合：完了画面に遷移させる。例：
+  - 登録完了時
+  - 「元の画面に戻る」動作をユーザーにさせたい時
+
+### 通知系Componentの違い
+
+| Component | 用途 | テキストの長さ | 追加のアクション | 自動で消える秒数 | 表示位置 |
+| ---- | ---- | ---- | ---- | ---- | ---- |
+| [Toast](/docs/toast--information) | 更新処理の**成功を伝える**<br />**見落としても支障がないもの** | 1行 | なし | 4秒 | フローティング<br />（画面上下の中央のみ※） |
+| [Snackbar](/docs/snackbar--information) | **読んでは欲しい訴求** | 3,4行まで | あり | 10秒 | フローティング<br />（画面上下の左・右・中央） |
+| [InlineNotification](/docs/inlinenotification--information) | 更新処理の**失敗を伝える**<br />**ユーザーが追加でアクションする必要があるもの** | 制限なし | あり | 消えない | ページに埋め込む必要があり、レイアウトに影響を与える |
 
 ※現在は、SPは中央下のみ実装されています。
 

diff --git a/packages/spindle-ui/src/SnackBar/SnackBar.stories.mdx b/packages/spindle-ui/src/SnackBar/SnackBar.stories.mdx
@@ -120,15 +120,25 @@ SnackBarコンポーネントは、利用者に一時的なお知らせをする
 
 「重要なお知らせ」とは何かは別途まとめる予定です。
 
-## 通知系のComponentの違い
+## ユーザーへの通知の種別
 
-SnackbarとToastは非常に似ているComponentです。また、ユーザーにお知らせをするための他のComponentとしてInlineNotificationもあります。現状下記のように使い分けています。
+ユーザーにお知らせをするための他のComponentとしてToastとInlineNotificationがあります。画面内で完結せず、遷移させるべき状況もあります。現状下記のように使い分けています。
 
-Component | テキストの長さ | 追加のアクションの有無 | 自動で消える秒数 | 表示位置 | メッセージの内容
-:-- | :-- | :-- | :-- | :-- | :--
-[Toast](/docs/toast--information) | 1行のみ | なし | 4秒 | フローティングで位置固定で表示（画面上下の中央のみ※） | 見落としても支障がない
-Snackbar | 3,4行まで | あり | 10秒 | フローティングで位置固定で表示（画面上下の左・右・中央）| 読んでは欲しい、訴求
-[InlineNotification](/docs/inlinenotification--information) | 制限なし | あり | 消えない | ページに埋め込む必要がありレイアウトに影響を与える | エラー通知など、ユーザーの追加のアクションが必要なもの
+### 通信を伴うデータ更新のフィードバック
+
+- 成功：[Toast - Confirmation](/docs/toast--confirmation)で、成功した事実のみを伝える
+- 失敗：[InlineNotification - Error Emphasis](/docs/inlinenotification--error-emphasis)で、失敗した理由とユーザーがすべきアクションを伝える
+- 一連の動作のゴールがある場合：完了画面に遷移させる。例：
+  - 登録完了時
+  - 「元の画面に戻る」動作をユーザーにさせたい時
+
+### 通知系Componentの違い
+
+| Component | 用途 | テキストの長さ | 追加のアクション | 自動で消える秒数 | 表示位置 |
+| ---- | ---- | ---- | ---- | ---- | ---- |
+| [Toast](/docs/toast--information) | 更新処理の**成功を伝える**<br />**見落としても支障がないもの** | 1行 | なし | 4秒 | フローティング<br />（画面上下の中央のみ※） |
+| [Snackbar](/docs/snackbar--information) | **読んでは欲しい訴求** | 3,4行まで | あり | 10秒 | フローティング<br />（画面上下の左・右・中央） |
+| [InlineNotification](/docs/inlinenotification--information) | 更新処理の**失敗を伝える**<br />**ユーザーが追加でアクションする必要があるもの** | 制限なし | あり | 消えない | ページに埋め込む必要があり、レイアウトに影響を与える |
 
 ※現在は、SPは中央下のみ実装されています。
 

diff --git a/packages/spindle-ui/src/Toast/Toast.stories.mdx b/packages/spindle-ui/src/Toast/Toast.stories.mdx
@@ -115,15 +115,25 @@ Toastコンポーネントは、利用者に一時的なお知らせをする際
 
 「重要なお知らせ」とは何かは別途まとめる予定です。
 
-## 通知系のComponentの違い
+## ユーザーへの通知の種別
 
-SnackbarとToastは非常に似ているComponentです。また、ユーザーにお知らせをするための他のComponentとしてInlineNotificationもあります。現状下記のように使い分けています。
+ユーザーにお知らせをするための他のComponentとしてSnackbarとInlineNotificationがあります。画面内で完結せず、遷移させるべき状況もあります。現状下記のように使い分けています。
 
-Component | テキストの長さ | 追加のアクションの有無 | 自動で消える秒数 | 表示位置 | メッセージの内容
-:-- | :-- | :-- | :-- | :-- | :--
-Toast | 1行のみ | なし | 4秒 | フローティングで位置固定で表示（画面上下の中央のみ※） | 見落としても支障がない
-[Snackbar](/docs/snackbar--information) | 3,4行まで | あり | 10秒 | フローティングで位置固定で表示（画面上下の左・右・中央）| 読んでは欲しい、訴求
-[InlineNotification](/docs/inlinenotification--information) | 制限なし | あり | 消えない | ページに埋め込む必要がありレイアウトに影響を与える | エラー通知など、ユーザーの追加のアクションが必要なもの
+### 通信を伴うデータ更新のフィードバック
+
+- 成功：[Toast - Confirmation](/docs/toast--confirmation)で、成功した事実のみを伝える
+- 失敗：[InlineNotification - Error Emphasis](/docs/inlinenotification--error-emphasis)で、失敗した理由とユーザーがすべきアクションを伝える
+- 一連の動作のゴールがある場合：完了画面に遷移させる。例：
+  - 登録完了時
+  - 「元の画面に戻る」動作をユーザーにさせたい時
+
+### 通知系Componentの違い
+
+| Component | 用途 | テキストの長さ | 追加のアクション | 自動で消える秒数 | 表示位置 |
+| ---- | ---- | ---- | ---- | ---- | ---- |
+| [Toast](/docs/toast--information) | 更新処理の**成功を伝える**<br />**見落としても支障がないもの** | 1行 | なし | 4秒 | フローティング<br />（画面上下の中央のみ※） |
+| [Snackbar](/docs/snackbar--information) | **読んでは欲しい訴求** | 3,4行まで | あり | 10秒 | フローティング<br />（画面上下の左・右・中央） |
+| [InlineNotification](/docs/inlinenotification--information) | 更新処理の**失敗を伝える**<br />**ユーザーが追加でアクションする必要があるもの** | 制限なし | あり | 消えない | ページに埋め込む必要があり、レイアウトに影響を与える |
 
 ※現在は、SPは中央下のみ実装されています。