-
Notifications
You must be signed in to change notification settings - Fork 16
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
#1300 ステップ式の操作画面のタイトルの書き方 #1053
base: main
Are you sure you want to change the base?
The head ref may contain hidden characters: "#1300-\u30B9\u30C6\u30C3\u30D7\u5F0F\u306E\u64CD\u4F5C\u753B\u9762\u306E\u30BF\u30A4\u30C8\u30EB\u306E\u66F8\u304D\u65B9"
Conversation
✅ Deploy Preview for smarthr-design-system ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
全体的にSuggestionしました。
## 基本的な考え方 | ||
特定の作業のために複数の操作が必要な場合には、1つのモードに対してステップを複数に分けます。 | ||
ユーザーが必要な操作を認知しやすい状況を設計するために、1画面内の操作を絞ります。 | ||
|
||
基本的には[アクションダイアログ](#h2-2)を使用します。ただし、フォームなどの要素が多い場合は、[BottomFixedAreaを伴うページ](#h2-3)を使用して、**モーダル(一連の操作)であることを明示**します。 | ||
|
||
画面間の動線は一方通行ではなく、前のステップにも移動できるようにリンクを設けます。加えて、途中で操作をキャンセルできるようにします。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
## 基本的な考え方 | |
特定の作業のために複数の操作が必要な場合には、1つのモードに対してステップを複数に分けます。 | |
ユーザーが必要な操作を認知しやすい状況を設計するために、1画面内の操作を絞ります。 | |
基本的には[アクションダイアログ](#h2-2)を使用します。ただし、フォームなどの要素が多い場合は、[BottomFixedAreaを伴うページ](#h2-3)を使用して、**モーダル(一連の操作)であることを明示**します。 | |
画面間の動線は一方通行ではなく、前のステップにも移動できるようにリンクを設けます。加えて、途中で操作をキャンセルできるようにします。 | |
## 基本的な考え方 | |
- 特定の作業のために複数の操作が必要な場合には、1つのモードに対してステップを複数に分けます。 | |
- ユーザーが必要な操作を認知しやすい状況を設計するために、1画面内の操作を絞ります。 | |
- 画面間の動線は一方通行ではなく、前のステップにも移動できるようにリンクを設けます。加えて、途中で操作をキャンセルできるようにします。 | |
- 基本的には[ActionDialog](#h2-2)を使用します。ただし、フォームなどの要素が多い場合は、[BottomFixedAreaを伴うページ](#h2-3)を使用して、**モーダル(一連の操作)であることを明示**します。 |
それぞれ別のことをかいてるので箇条書きにして、並べ替えました。
「BottomFixedAreaを伴うページ」を以降は「ページ」と表記している場所がありますが、同じものと捉えられるかなぁ
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
「BottomFixedAreaを伴うページ」を以降は「ページ」と表記している場所がありますが、同じものと捉えられるかなぁ
これちょっと悩んだんですよね…
でも「BottomFixedAreaを伴うページ」って毎回書くには長くてくどいよなぁと思ってしまい。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
毎回書くには長くてくどい
わかる。
「モーダルダイアログ(ActionDialog)」「モーダルページ(BottomFixedAreaを伴うページ)」とはじめに書いて、以降はモーダルダイアログ、モーダルページと書くとかでしょうか…
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
なるほど! 先に命名しちゃうのか。いいアイディアですね。
アクションダイアログを開くボタンのテキストには、ダイアログタイトルの操作を表示します。 | ||
- [ボタンやテキストリンクでは、助詞は「を」を使用する](../../../products/contents/app-writing/#h2-4) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
タイトルエリアの説明欄なので少し違うような?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ダイアログタイトルとその手前のアクションテキストは揃えようねってことを伝えたいんですけど、どこに書くのが適当ですかね…
dialogコンポーネントのコードには両方書くじゃないですか。だから、一緒に書いておきたいんですよね。
<Button>
ボタンのテキスト
</Button>
<ActionDialog title="タイトル".......>
<hoge>
</hoge>
</ActionDialog>
つか、こっちに書けば良いのかなぁ…
https://smarthr.design/products/components/dialog/#h2-3
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
そうですね、場所としてはButtonかDialogにある方が適当な気がします
Co-authored-by: versionfive <[email protected]>
Co-authored-by: versionfive <[email protected]>
Co-authored-by: versionfive <[email protected]>
Co-authored-by: versionfive <[email protected]>
Co-authored-by: versionfive <[email protected]>
Co-authored-by: versionfive <[email protected]>
Co-authored-by: versionfive <[email protected]>
Co-authored-by: versionfive <[email protected]>
Co-authored-by: versionfive <[email protected]>
Co-authored-by: versionfive <[email protected]>
Co-authored-by: versionfive <[email protected]>
Co-authored-by: versionfive <[email protected]>
Co-authored-by: versionfive <[email protected]>
Co-authored-by: versionfive <[email protected]>
Co-authored-by: versionfive <[email protected]>
@versionfive ActionDialogのボタンテキストとタイトルを対応させるライティングの話は、Dialogコンポーネントのページの方を後で修正します。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🙏
Co-authored-by: versionfive <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
デザインパターン内のパターンが崩れてきてるので揃えた方が良さそうです。
(「種類」の中でダイアログと BottomFixedArea と Stepper などをまず並べると他に沿うかも?)
description: '特定の作業に複数の操作ステップが必要なときのデザインパターンについて説明します。' | ||
order: 12 | ||
--- | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
それだけ読んだらわかる一文が頭にほしい。
特定の作業に複数の操作ステップが必要なときのデザインパターンについて説明します。 | |
- 特定の作業のために複数の操作が必要な場合には、1つのモードに対してステップを複数に分けます。 | ||
- ユーザーが必要な操作を認知しやすい状況を設計するために、1画面内の操作を絞ります。 | ||
- 画面間の動線は一方通行ではなく、前のステップにも移動できるようにリンクを設けます。加えて、途中で操作をキャンセルできるようにします。 | ||
- 基本的には[ActionDialog](#h2-2)を使用します。ただし、フォームなどの要素が多い場合は、[BottomFixedAreaを伴うページ](#h2-3)を使用して、**モーダル(一連の操作)であることを明示**します。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
フォームなどの要素が多い場合は
確かにそう整理できそうなんだけど、ここはフォーム要素が多いから BottomFixedArea で! という思考はしてない気がした。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Stepper の場合もありそう
--- | ||
|
||
## 基本的な考え方 | ||
- 特定の作業のために複数の操作が必要な場合には、1つのモードに対してステップを複数に分けます。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
突然の「モード」で混乱するかも。削ってみたら、頭痛が痛い的な文章になったのでトルツメでもいい説ある。
- 特定の作業のために複数の操作が必要な場合には、1つのモードに対してステップを複数に分けます。 | |
- 特定の作業のために複数の操作が必要な場合に、ステップを複数に分けます。 |
- 基本的には[ActionDialog](#h2-2)を使用します。ただし、フォームなどの要素が多い場合は、[BottomFixedAreaを伴うページ](#h2-3)を使用して、**モーダル(一連の操作)であることを明示**します。 | ||
|
||
### ライティング | ||
複数ステップの操作モードに入るためのボタンのアクションテキストと、操作画面のタイトルは関連付けます。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
この一文いる?
複数ステップの操作モードに入るためのボタンのアクションテキストと、操作画面のタイトルは関連付けます。 | |
複数ステップの操作モードに入るためのボタンラベルと、操作画面のタイトルは関連付けます。 |
- 画面間の動線は一方通行ではなく、前のステップにも移動できるようにリンクを設けます。加えて、途中で操作をキャンセルできるようにします。 | ||
- 基本的には[ActionDialog](#h2-2)を使用します。ただし、フォームなどの要素が多い場合は、[BottomFixedAreaを伴うページ](#h2-3)を使用して、**モーダル(一連の操作)であることを明示**します。 | ||
|
||
### ライティング |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
補足程度で良さそうなので、ライティングパターンとして、後ろの方に持っていきたい。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
と思ったら構成の中にライティングパターン出てきた🙄
いっそのことここで書いてることは、それぞれに重複して書いてもいい説。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ライティングにおける基本的な考え方があるなら、個別にセクションつくっていい構成になっているはずですね。
https://smarthr.design/products/design-patterns/#h3-2
ただ、たしかに現状書いてあることだけをみると、タイトルまわりのことが主なので、そっちのライティングパターンに移動しても違和感はないかなと思いました◎
##### ライティングパターン | ||
基本的には、[ダイアログの場合](/products/design-patterns/wizard/#h4-0)と同様です。 | ||
|
||
それぞれのステップごとの操作を見出しで伝えたい場合、画面タイトル(`screenTitle`)はライティングパターンに合わせる必要はありません。ただし、同じモードであることがわかるように、サブ・ブロックタイトル(`subBlockTitle`)を使って複数ステップの操作画面タイトルのライティングパターンに合わせたテキストを表示します。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ここの読み取り難度が高そうです! 画面の例がすべてサブ・ブロック付きになってるからかも?
|
||
それぞれのステップごとの操作を見出しで伝えたい場合、画面タイトル(`screenTitle`)はライティングパターンに合わせる必要はありません。ただし、同じモードであることがわかるように、サブ・ブロックタイトル(`subBlockTitle`)を使って複数ステップの操作画面タイトルのライティングパターンに合わせたテキストを表示します。 | ||
|
||
##### 例 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
何を表しているのかを読みとれなかった。
### 2. 操作エリア | ||
[よくあるテーブル](/products/design-patterns/smarthr-table/)や[FormControl](/products/components/form-control/)などを使用して、ステップごとの操作するためのエリアです。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
丸っといらなそう。
あと「よくあるテーブル」は見出しなども含めて「よくあるテーブル」パターンなので、説明としても語弊がある。
- 前の画面に移動する:`戻る` | ||
|
||
#### 複数ステップの操作を取り消すテキスト | ||
2ステップ以降の画面では、この操作モードから離脱するための[TextLink](/products/components/text-link/)を設置してください。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
どの目線で伝えるかに依って書き方が変わりそうです。
コンポーネントとしては tertiaryLinks
という配列を渡すことになるので、少なくとも TextLink
を意識することはなさそうです。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
書いてて思ったんだけど、これはリンクではなくボタンですね。
- 特定の作業のために複数の操作が必要な場合には、1つのモードに対してステップを複数に分けます。 | ||
- ユーザーが必要な操作を認知しやすい状況を設計するために、1画面内の操作を絞ります。 | ||
- 画面間の動線は一方通行ではなく、前のステップにも移動できるようにリンクを設けます。加えて、途中で操作をキャンセルできるようにします。 | ||
- 基本的には[ActionDialog](#h2-2)を使用します。ただし、フォームなどの要素が多い場合は、[BottomFixedAreaを伴うページ](#h2-3)を使用して、**モーダル(一連の操作)であることを明示**します。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- 基本的には[ActionDialog](#h2-2)を使用します。ただし、フォームなどの要素が多い場合は、[BottomFixedAreaを伴うページ](#h2-3)を使用して、**モーダル(一連の操作)であることを明示**します。 | |
- 基本的には[ActionDialog](../components/dialog/#h3-1)を使用します。ただし、フォームなどの要素が多い場合はActionDialogではなくページを使用し、[BottomFixedArea](../components/bottom-fixed-area/)を伴うことで**モーダル(一連の操作)であることを明示**します。詳しくは、[ダイアログの構成](#h2-1)、[BottomFixedAreaを伴うページの構成](#h2-2)を参照してください。 |
このサジェストもあんまりイケてない気がするんですが、
- ActionDialogやBFAのComponentへの言及と、当ページ内で解説しているそれぞれの構成パターンへの言及は分ける方が良いのではないか
- 「モーダルであることを明示」しているのは「BFA(を伴うこと)」であって「(BFAを伴う)ページ」ではない
という方向性の意見です。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
画像について何点か気になりました!
1、2個目はまだ答えの無い話だと思うので他の人にも聞いてみたいです。
- SubBlockTitle・ScreenTitleの余白が広く、タイトルエリアのグルーピングが弱く見える
- 画面上部の「戻る」リンクがBFAと重複しているため、必要かどうか気になる
3.「戻る」リンクを置く場合、レイアウトがガイドラインと異なる(https://smarthr.design/products/design-patterns/upward-navigation/)
参考までに、タイトルエリアの余白を16px→8pxに変更したものを貼ります。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
画面上部の「戻る」リンクがBFAと重複しているため、必要かどうか気になる
これ講座中に気になったのを思い出しました(自分の班では、戻るリンクがあるからという理由でキャンセルボタンをつけなかった)
「前ステップに戻るのか、モードから離脱するのか」の混乱もあるので、上部の戻るリンクはトリの方が良い気がしてきました。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
SubBlockTitle・ScreenTitleの余白が広く、タイトルエリアのグルーピングが弱く見える
タイトルエリアの余白、確かに!でした。ここ調整しますね。
画面上部の「戻る」リンクがBFAと重複しているため、必要かどうか気になる
こっちは、Slackのスレで会話進みそうなので、そちらで進め方決めましょう。
Co-authored-by: KANAMORI Yu <[email protected]>
課題・背景
やったこと
動作確認
キャプチャ