デザインパターン「視覚的グルーピング」を追加 #1355
デザインパターン「視覚的グルーピング」を追加 #1355
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.
より実践で役に立つようにとレイアウトを複雑にしていると思いますが、余白以外にも矩形（Base）も追加されているので、余白が生かされていることがわかりにくくなっていると思いました。
もっとシンプルにしても余白だけでコントロールしたほうが伝わるかもと思いました。
There was a problem hiding this comment.
多重構造の表現に余白は向いていないよ！という文脈で例を出していたので矩形でのレイアウト例を載せていました！
ただ多重構造のDo/Don'tであることが結構分かりづらいですかね〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
There was a problem hiding this comment.
あー、そうか、余白、矩形、罫線のだめな使い方に注意してなのですね。
Do/Don'tを使っているからDoを見たときに推奨した使い方というバイアスがあったので、より大事にしているのはだめな使い方の方っていう構成なんですかね。
There was a problem hiding this comment.
矩形の表現を COLUMの色で囲っている例を出しているので、すべて取り払われているのはいわかんありました。ある程度はほしいなということで、イメージ貼っつけておきます。
There was a problem hiding this comment.
矩形の過剰な使用のDo/Don'tなので確かにもうちょっと現実的なラインに寄せても良さそうですね
変更してみます
| SmartHRプロダクトの基本的な視覚的グルーピングのパターンをまとめています。 | ||
|
|
||
| ## 基本的な考え方 | ||
| 余白・矩形・罫線・影による視覚的グルーピングは、情報の支配関係や意味的なまとまりといった要素同士の関係性を視覚的に表現するために使います。 |
There was a problem hiding this comment.
支配関係
言いたいことはわかるけど、この表現でいいのかちょっとわからない…
従属関係？主従関係？
後の文章に「影響範囲」「階層」「階層構造・内包関係」という言葉もでてくる
content/articles/products/design-patterns/visual-grouping/index.mdx
Outdated
Show resolved
Hide resolved
content/articles/products/design-patterns/visual-grouping/index.mdx
Outdated
Show resolved
Hide resolved
| また、同じ階層・同じ粒度のグループが複数ある場合は、特別な理由がない限り同じ表現でグルーピングしてください。むやみに異なる表現を利用することは、ユーザーが情報を理解する障壁となります。 | ||
|
|
||
| ### 階層を深くしない | ||
| 視覚的なグループの内部でさらに要素をグルーピングすることで、情報の階層構造・内包関係を表現できます。ただし、過剰に深い階層はユーザーの素早く正確な情報の理解を妨げます。 |
There was a problem hiding this comment.
| 視覚的なグループの内部でさらに要素をグルーピングすることで、情報の階層構造・内包関係を表現できます。ただし、過剰に深い階層はユーザーの素早く正確な情報の理解を妨げます。 | |
| 視覚的なグループの内部でさらに要素をグルーピングすることで、情報の階層構造・内包関係を表現できます。ただし、階層が深くなるほど情報の関係性の把握が難しくなることに注意してください。 |
「情報の理解」よりも今回は「情報の関係性の理解」かなと思って直してみたのですが、、いまいちかも
| また、情報が関連しているからといって必ずしも視覚的にグルーピングしなければならないわけではありません。 | ||
|
|
||
| ユーザーのユースケースに基づいて情報設計やページ構成を見直し、階層が深くなることを避け、素早く理解できるレイアウトを提供してください。 |
There was a problem hiding this comment.
| また、情報が関連しているからといって必ずしも視覚的にグルーピングしなければならないわけではありません。 | |
| ユーザーのユースケースに基づいて情報設計やページ構成を見直し、階層が深くなることを避け、素早く理解できるレイアウトを提供してください。 | |
| また、情報が関連しているからといって必ずしも視覚的にグルーピングしなければならないわけではありません。 | |
| ユーザーのユースケースに基づいて情報設計やページ構成を見直し、階層が深くなることを避け、素早く理解できるレイアウトを提供してください。 |
この2段落は一連の話だと理解したので同じ段落にしました。
この1文目の意図の確認ですが、
そもそも視覚的にグルーピングしなくても、関連した情報自体には暗黙的に関連があることをユーザーは見いだせるって話ですかね？「視覚情報に頼ったグルーピングをしなくてもわかるよ」みたいなニュアンスがつたえたい？
There was a problem hiding this comment.
関連性がある情報すべてを視覚的にグルーピングする必要はなく、ユーザーにとってその関連性を理解することが有益な場合にグルーピングすべき、ということを伝えたかったです！
ただ、実際そんな例があるか改めて考えると思い当たらないのでこの一文取っちゃっても良いかなぁという気もしています
| <DoAndDont | ||
| type="dont" | ||
| img={<StaticImage src={imageUrlBorderDont} alt="Dont" />} | ||
| label="どこまでの要素をどの見出しが支配するのか理解が難しい。smarthr-uiではInputやButtonなど操作可能な要素に対して罫線をつける意匠を使っているため、それと競合し操作可能な領域がわかりづらい。" |
There was a problem hiding this comment.
smarthr-uiではInputやButtonなど操作可能な要素に対して罫線をつける意匠を使っているため、それと競合し操作可能な領域がわかりづらい。
これ罫線をつかわない肝だとおもってまして、Do/Don'tの外で書いたほうがよさそうだと思いました。
content/articles/products/design-patterns/visual-grouping/index.mdx
Outdated
Show resolved
Hide resolved
|
|
||
| セクションの内容を切り替えるコントロールを提供する場合には、[TabBar](/products/components/tab-bar/)または[SideNav](/products/components/side-nav/)を利用し以下のようにレイアウトします。 | ||
|
|
||
| TabBarを使う場合、見出し領域にTabBarを配置し、Baseを切り替えます。見出しは省略できます。操作の対象がタブごとに異なる場合は[DropdownMenuButton](/products/components/dropdown/dropdown-menu-button/)で操作まとめます。 |
There was a problem hiding this comment.
視覚上は見出しは省略するんですが、HTML的に見出し要素は必要なので、実際は<Heading visuallyHidden>の配置が必要かなと思います。
content/articles/products/design-patterns/visual-grouping/index.mdx
Outdated
Show resolved
Hide resolved
content/articles/products/design-patterns/visual-grouping/index.mdx
Outdated
Show resolved
Hide resolved
…x.mdx Co-authored-by: versionfive <[email protected]>
Co-authored-by: versionfive <[email protected]>
課題・背景
使用性チェックリスト10番の基準充足
やったこと
例として挙げている画像の妥当性がやや気になっているのでよりよい例があれば提案ほしいです
やらなかったこと
動作確認
https://deploy-preview-1355--smarthr-design-system.netlify.app/products/design-patterns/visual-grouping/
キャプチャ