web-dev-qa-db-ja.com

長いラベルのあるボタンをどうするか

長いラベルが付いたボタンの処理方法に関するベストプラクティスはありますか?

いくつかのオプション:

  1. ラベルを切り捨てる
  2. ボタンを2行にして幅を維持しますが、見苦しいかもしれません
  3. 2行のボタン、幅を維持し、すべてのボタンのスペースの高さ

enter image description here

6
Didier

ボタンはそんなに長くてはいけません

ボタンは、簡潔なアクションステートメントである必要があります。
Download
Upload
View results
Add to cart

ボタンが文に近づくと、最適化する余地ができます。
これらのアクションはユーザーにとってどの程度スキャン可能ですか?
情報を整理するより良い方法はありますか?
サブセクションを作成する必要がありますか?

あなたの例を使ってみましょう(ただし、コンテキストは完全には理解していません)。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

この形式では、複数の選択を許可して、必要なすべての形式をダウンロードしたり、Send by emailオプション。

13
plainclothes

情報アーキテクチャやコピーライティングの問題ほどデザインの課題ではありません。

私は元の画像を見て、少なくとも2ノードの分類法が1つのレベルにフラット化されているのを確認します。それはあなたの特権ですが、それはまたこの問題を引き起こしました。

私は、ファイル形式と関連するオプションを分離することを、それらが存在する独立したパラメーターとして検討します。 Uliwitnessはこれの素晴らしい実用的な説明を行いました。 CSVオプションはサブセットである必要があります。

1
Luke Smith

これらのユーザー定義のタイトルですか、それとも定義しますか?前者の場合、ユーザーが指定できる名前の長さに制限を設けることができます。一般に、人々はそのようなテキストの砂漠をすばやくナビゲートすることはできません。

それらを提供する場合は、タイトルを重要な部分に短縮し、同様のオプションを組み合わせてラジオボタンの下にそれらのバリアント階層オブジェクトをインデントすることにより、それらを構造化します。

CSV turned into one radio choice with a popup for the field choices

UI要素の数とテキストの長さをできるだけ減らすようにしてください。スキャンを促進します。

1
uliwitness