Conversation
✅ Deploy Preview for smarthr-design-system ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
aguringo
requested review from
drivesketch,
uknmr,
versionfive,
daxelbook and
ayumizu
| ## 基本的な考え方 | ||
| 特定の作業のために複数の操作が必要な場合には、1つのモードに対してステップを複数に分けます。 | ||
| ユーザーが必要な操作を認知しやすい状況を設計するために、1画面内の操作を絞ります。 | ||
|
|
||
| 基本的には[アクションダイアログ](#h2-2)を使用します。ただし、フォームなどの要素が多い場合は、[BottomFixedAreaを伴うページ](#h2-3)を使用して、**モーダル（一連の操作）であることを明示**します。 | ||
|
|
||
| 画面間の動線は一方通行ではなく、前のステップにも移動できるようにリンクを設けます。加えて、途中で操作をキャンセルできるようにします。 |
There was a problem hiding this comment.
| ## 基本的な考え方 | |
| 特定の作業のために複数の操作が必要な場合には、1つのモードに対してステップを複数に分けます。 | |
| ユーザーが必要な操作を認知しやすい状況を設計するために、1画面内の操作を絞ります。 | |
| 基本的には[アクションダイアログ](#h2-2)を使用します。ただし、フォームなどの要素が多い場合は、[BottomFixedAreaを伴うページ](#h2-3)を使用して、**モーダル（一連の操作）であることを明示**します。 | |
| 画面間の動線は一方通行ではなく、前のステップにも移動できるようにリンクを設けます。加えて、途中で操作をキャンセルできるようにします。 | |
| ## 基本的な考え方 | |
| - 特定の作業のために複数の操作が必要な場合には、1つのモードに対してステップを複数に分けます。 | |
| - ユーザーが必要な操作を認知しやすい状況を設計するために、1画面内の操作を絞ります。 | |
| - 画面間の動線は一方通行ではなく、前のステップにも移動できるようにリンクを設けます。加えて、途中で操作をキャンセルできるようにします。 | |
| - 基本的には[ActionDialog](#h2-2)を使用します。ただし、フォームなどの要素が多い場合は、[BottomFixedAreaを伴うページ](#h2-3)を使用して、**モーダル（一連の操作）であることを明示**します。 |
それぞれ別のことをかいてるので箇条書きにして、並べ替えました。
「BottomFixedAreaを伴うページ」を以降は「ページ」と表記している場所がありますが、同じものと捉えられるかなぁ
There was a problem hiding this comment.
「BottomFixedAreaを伴うページ」を以降は「ページ」と表記している場所がありますが、同じものと捉えられるかなぁ
これちょっと悩んだんですよね…
でも「BottomFixedAreaを伴うページ」って毎回書くには長くてくどいよなぁと思ってしまい。
There was a problem hiding this comment.
毎回書くには長くてくどい
わかる。
「モーダルダイアログ（ActionDialog）」「モーダルページ（BottomFixedAreaを伴うページ）」とはじめに書いて、以降はモーダルダイアログ、モーダルページと書くとかでしょうか…
There was a problem hiding this comment.
なるほど！ 先に命名しちゃうのか。いいアイディアですね。
| アクションダイアログを開くボタンのテキストには、ダイアログタイトルの操作を表示します。 | ||
| - [ボタンやテキストリンクでは、助詞は「を」を使用する](../../../products/contents/app-writing/#h2-4) |
There was a problem hiding this comment.
タイトルエリアの説明欄なので少し違うような？
There was a problem hiding this comment.
ダイアログタイトルとその手前のアクションテキストは揃えようねってことを伝えたいんですけど、どこに書くのが適当ですかね…
dialogコンポーネントのコードには両方書くじゃないですか。だから、一緒に書いておきたいんですよね。
<Button>
ボタンのテキスト
</Button>
<ActionDialog title="タイトル".......>
<hoge>
</hoge>
</ActionDialog>
つか、こっちに書けば良いのかなぁ…
https://smarthr.design/products/components/dialog/#h2-3
There was a problem hiding this comment.
そうですね、場所としてはButtonかDialogにある方が適当な気がします
Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>
Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>
Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>
Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>
Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>
Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>
Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>
Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>
Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>
Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>
Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>
Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>
Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>
Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>
Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>
|
@versionfive ActionDialogのボタンテキストとタイトルを対応させるライティングの話は、Dialogコンポーネントのページの方を後で修正します。 |
Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>
| description: '特定の作業に複数の操作ステップが必要なときのデザインパターンについて説明します。' | ||
| order: 12 | ||
| --- | ||
|
|
There was a problem hiding this comment.
それだけ読んだらわかる一文が頭にほしい。
| 特定の作業に複数の操作ステップが必要なときのデザインパターンについて説明します。 | |
| - 特定の作業のために複数の操作が必要な場合には、1つのモードに対してステップを複数に分けます。 | ||
| - ユーザーが必要な操作を認知しやすい状況を設計するために、1画面内の操作を絞ります。 | ||
| - 画面間の動線は一方通行ではなく、前のステップにも移動できるようにリンクを設けます。加えて、途中で操作をキャンセルできるようにします。 | ||
| - 基本的には[ActionDialog](#h2-2)を使用します。ただし、フォームなどの要素が多い場合は、[BottomFixedAreaを伴うページ](#h2-3)を使用して、**モーダル（一連の操作）であることを明示**します。 |
There was a problem hiding this comment.
フォームなどの要素が多い場合は
確かにそう整理できそうなんだけど、ここはフォーム要素が多いから BottomFixedArea で! という思考はしてない気がした。
| --- | ||
|
|
||
| ## 基本的な考え方 | ||
| - 特定の作業のために複数の操作が必要な場合には、1つのモードに対してステップを複数に分けます。 |
There was a problem hiding this comment.
突然の「モード」で混乱するかも。削ってみたら、頭痛が痛い的な文章になったのでトルツメでもいい説ある。
| - 特定の作業のために複数の操作が必要な場合には、1つのモードに対してステップを複数に分けます。 | |
| - 特定の作業のために複数の操作が必要な場合に、ステップを複数に分けます。 |
| - 基本的には[ActionDialog](#h2-2)を使用します。ただし、フォームなどの要素が多い場合は、[BottomFixedAreaを伴うページ](#h2-3)を使用して、**モーダル（一連の操作）であることを明示**します。 | ||
|
|
||
| ### ライティング | ||
| 複数ステップの操作モードに入るためのボタンのアクションテキストと、操作画面のタイトルは関連付けます。 |
There was a problem hiding this comment.
この一文いる?
| 複数ステップの操作モードに入るためのボタンのアクションテキストと、操作画面のタイトルは関連付けます。 | |
| 複数ステップの操作モードに入るためのボタンラベルと、操作画面のタイトルは関連付けます。 |
| - 画面間の動線は一方通行ではなく、前のステップにも移動できるようにリンクを設けます。加えて、途中で操作をキャンセルできるようにします。 | ||
| - 基本的には[ActionDialog](#h2-2)を使用します。ただし、フォームなどの要素が多い場合は、[BottomFixedAreaを伴うページ](#h2-3)を使用して、**モーダル（一連の操作）であることを明示**します。 | ||
|
|
||
| ### ライティング |
There was a problem hiding this comment.
補足程度で良さそうなので、ライティングパターンとして、後ろの方に持っていきたい。
There was a problem hiding this comment.
と思ったら構成の中にライティングパターン出てきた🙄
いっそのことここで書いてることは、それぞれに重複して書いてもいい説。
There was a problem hiding this comment.
ライティングにおける基本的な考え方があるなら、個別にセクションつくっていい構成になっているはずですね。
https://smarthr.design/products/design-patterns/#h3-2
ただ、たしかに現状書いてあることだけをみると、タイトルまわりのことが主なので、そっちのライティングパターンに移動しても違和感はないかなと思いました◎
| ##### ライティングパターン | ||
| 基本的には、[ダイアログの場合](/products/design-patterns/wizard/#h4-0)と同様です。 | ||
|
|
||
| それぞれのステップごとの操作を見出しで伝えたい場合、画面タイトル（`screenTitle`）はライティングパターンに合わせる必要はありません。ただし、同じモードであることがわかるように、サブ・ブロックタイトル（`subBlockTitle`）を使って複数ステップの操作画面タイトルのライティングパターンに合わせたテキストを表示します。 |
There was a problem hiding this comment.
ここの読み取り難度が高そうです! 画面の例がすべてサブ・ブロック付きになってるからかも?
|
|
||
| それぞれのステップごとの操作を見出しで伝えたい場合、画面タイトル（`screenTitle`）はライティングパターンに合わせる必要はありません。ただし、同じモードであることがわかるように、サブ・ブロックタイトル（`subBlockTitle`）を使って複数ステップの操作画面タイトルのライティングパターンに合わせたテキストを表示します。 | ||
|
|
||
| ##### 例 |
| ### 2. 操作エリア | ||
| [よくあるテーブル](/products/design-patterns/smarthr-table/)や[FormControl](/products/components/form-control/)などを使用して、ステップごとの操作するためのエリアです。 |
There was a problem hiding this comment.
丸っといらなそう。
あと「よくあるテーブル」は見出しなども含めて「よくあるテーブル」パターンなので、説明としても語弊がある。
| - 前の画面に移動する：`戻る` | ||
|
|
||
| #### 複数ステップの操作を取り消すテキスト | ||
| 2ステップ以降の画面では、この操作モードから離脱するための[TextLink](/products/components/text-link/)を設置してください。 |
There was a problem hiding this comment.
どの目線で伝えるかに依って書き方が変わりそうです。
コンポーネントとしては tertiaryLinks という配列を渡すことになるので、少なくとも TextLink を意識することはなさそうです。
There was a problem hiding this comment.
書いてて思ったんだけど、これはリンクではなくボタンですね。
| - 特定の作業のために複数の操作が必要な場合には、1つのモードに対してステップを複数に分けます。 | ||
| - ユーザーが必要な操作を認知しやすい状況を設計するために、1画面内の操作を絞ります。 | ||
| - 画面間の動線は一方通行ではなく、前のステップにも移動できるようにリンクを設けます。加えて、途中で操作をキャンセルできるようにします。 | ||
| - 基本的には[ActionDialog](#h2-2)を使用します。ただし、フォームなどの要素が多い場合は、[BottomFixedAreaを伴うページ](#h2-3)を使用して、**モーダル（一連の操作）であることを明示**します。 |
There was a problem hiding this comment.
| - 基本的には[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.
画像について何点か気になりました！
1、2個目はまだ答えの無い話だと思うので他の人にも聞いてみたいです。
- SubBlockTitle・ScreenTitleの余白が広く、タイトルエリアのグルーピングが弱く見える
- 画面上部の「戻る」リンクがBFAと重複しているため、必要かどうか気になる
3.「戻る」リンクを置く場合、レイアウトがガイドラインと異なる（https://smarthr.design/products/design-patterns/upward-navigation/）
参考までに、タイトルエリアの余白を16px→8pxに変更したものを貼ります。
SubBlockTitleとScreenTitleの余白のみ詰めた例
説明文も含めて余白を詰めた例
There was a problem hiding this comment.
画面上部の「戻る」リンクがBFAと重複しているため、必要かどうか気になる
これ講座中に気になったのを思い出しました（自分の班では、戻るリンクがあるからという理由でキャンセルボタンをつけなかった）
「前ステップに戻るのか、モードから離脱するのか」の混乱もあるので、上部の戻るリンクはトリの方が良い気がしてきました。
There was a problem hiding this comment.
SubBlockTitle・ScreenTitleの余白が広く、タイトルエリアのグルーピングが弱く見える
タイトルエリアの余白、確かに！でした。ここ調整しますね。
画面上部の「戻る」リンクがBFAと重複しているため、必要かどうか気になる
こっちは、Slackのスレで会話進みそうなので、そちらで進め方決めましょう。
Co-authored-by: KANAMORI Yu <y.kinmori@gmail.com>
課題・背景
やったこと
動作確認
キャプチャ