ボックスを拡張可能なボックスとして直感的にマーク
いくつかのボックス（上下に配置されている）を使用してサイトを設計しました。各ボックスには、特定のトピックに関する情報-タイトル（件名）とテキスト（この件の説明）が含まれています。
初期状態では、ボックスにはサブジェクトのタイトルのみが表示されています。ボックスをクリックすると、説明テキストが展開されます（スライド効果あり）。
このボックスを、ボックスのタイトルの件名の説明も含む展開可能なものとして説明するにはどうすればよいですか？
私はこれを直感的にして、説明を取得するために必要なのはボックスをクリックするだけであることをすぐに理解してほしいと思います。
クリック前：
クリック後：
これを設計する方法はいくつかあります。
- 最初のオプションには欠点があります：ユーザーは別のページに誘導されていると思うかもしれません
- 2番目のオプションは他のオプションよりも直感的です。アイコンは右下隅にもあります
- 3番目のオプションにも欠点があります。ユーザーは、ボックスが画面全体に拡大すると考えているかもしれません。
私の意見では、最も重要なのはカーソルイベントです。つまり、ユーザーがクリック可能な要素にカーソルを合わせると、カーソルが「矢印」から「手」に変わります。
詳細を読むためのリンクとともに、「コンテンツ」テキストの最初の行をディスプレイに表示することを検討してください。
これにより、ユーザーは実際にもっと読みたいかどうかを判断するための追加のコンテキストが得られ、さらに読むべきことが明確になります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ソリューション1：
展開可能なボックスの横に+アイコンを実装できます。 http://fontawesome.io/icon/plus-square-o/
画像：
利点：
これは、ユーザーの展開属性として知られている
+としてユーザーに役立つ図です。別の利点は、それがあなたのサイトをきれいに保つことです。
あなたが望むようにクリック可能
ソリューション2：
Facebook See Moreトリックを使用します。
展開するときはテキストをExpandに、最小化するときはCollapseに変更することを検討してください。
画像：
利点：
このユーザーエクスペリエンスは、すでにWeb上の多くのユーザーに知られています。
シンプルに保ちます。
あなたが望むようにクリック可能
この種のアフォーダンスを通知するための私のお気に入りのアプローチは、下向きの矢印です。
Webから借用し、赤いテキストXD
これは、矢印をクリックすると、矢印の下に何かが表示されることを示しています。
「+」のようなものを使用することは一般的なデザインパターンですが、その意味はより複雑です。必ずユーザーの注意を引き、クリックを取得しますが、予期しない結果になる可能性があります。
私は「もっと読む」から逃れるでしょう。本文を少しプレビューしているのでない限り、これは混乱を招く可能性があります。何をもっと読む？これは記事ですか？それを理解するのに十分なコンテキストがありません。
幸運を！！
ところで-すでにやっているかどうかはわかりませんが、研究では左揃えのテキストがほとんどのシナリオで読みやすくなっています。