Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 取り返しのつかない操作を追加 #1165

Merged
merged 1 commit into from
May 22, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
---
title: '取り返しのつかない操作'
description: 'ユーザーにとって取り返しのつかない操作を提供する際のルールを定義しています。'
order: 13
---

ユーザーにとって取り返しのつかない操作を提供する際のルールを定義しています。

## 基本的な考え方

一度実行するとやり直しや巻き戻しが効かない操作のことを「取り返しのつかない操作」としています。

サービス内でのデータ損失の原因の多くは人的ミスによるものです。
ユーザーの誤操作によって「取り返しのつかない操作」が実行されないよう、提供時に十分に配慮しましょう。

## 代表的な取り返しのつかない操作

取り返しのつかない操作の代表的なものとして以下のような操作があります。

- 登録されたデータを削除する操作
- 設定をリセットする操作
- 復元方法がない、または復元に複雑な手順を要するステータスの変更操作

## 取り返しのつかない操作ボタンの提供方法

取り返しのつかない操作をボタンなどのコンポーネントで提供する際は、ユーザーの誤操作を防ぐために可能な限りメイン操作領域の遠くに置く(1)、または領域を変更して置くこと(2)を推奨します。

![取り返しのつかない操作ボタンの提供方法](./images/irreversible-operation/button-layout.png)

上記例のようにレイアウトの差をどうしてもつけられない場合は[Dangerボタン](/products/components/button/#h3-3)などのユーザーへ警告を伝えるボタンを設置しましょう。

ただし、一覧の操作セルなど、ファーストビューですぐに触れる領域への「取り返しのつかない操作ボタン」の設置や、Dangerボタンを連続して設置することは通常**推奨しません。**

![取り返しのつかない操作ボタンの提供方法](./images/irreversible-operation/danger-buttons-in-smarthr-table.png)

## 取り返しのつかない操作を実行しようとした際のフィードバック

取り返しのつかない操作をユーザーが実行した際は、その操作によって何が起こるのかをフィードバックで伝えましょう。
フィードバック方法としては、[削除ダイアログ](/products/design-patterns/delete-dialog/)をはじめとした確認ダイアログなどを表示するのが良いでしょう。

![取り返しのつかない操作をしようとした際のフィードバック](./images/irreversible-operation/feedback-dialog.png)