web-dev-qa-db-ja.com

長いテキストラベルの切り捨て-ベストプラクティス?

ラベルが長くなりすぎてレイアウトで修正できない場合に備えて、切り捨てられたラベルに関する調査がないかと思いました。ラベルが途中で省略記号で省略されている場合、ユーザーを混乱させますか?

  • LabelBeginning ... LabelEnd

    または

  • LabelBeginning(...)LabelEnd

異なるテキストスタイルのガイドラインを比較すると、異なるアプローチがあります。 Appleたとえば、ラベルの中央に省略記号が付いた長いラベルは切り捨てられます。これは、人々がラベルをスキャンして識別する方法(最初と最後)を反映していると思うので、素晴らしい解決策だと思います。

「省略記号は、ドキュメントのタイトルまたはリストアイテムに表示する余地よりも多くのテキストがあることを示す場合もあります。たとえば、アイテムの名前が長すぎてメニューまたはリストボックスに収まらない場合は、名前の最初と最後を保持して、名前の中央に省略記号を挿入します。これにより、一意である可能性が最も高い名前の部分が引き続き表示されます。」

マイクロソフトは、可能な限りラベルの切り捨てを避けることを推奨していますが、長いラベルに省略記号を実装する方法については詳しく説明していません。

「楕円は不完全性を意味します。次のように、UIテキストで楕円を使用します。

Commands。コマンドに追加情報が必要であることを示します。アクションが別のウィンドウを表示するときは常に省略記号を使用しないでください。追加情報が必要な場合に限ってください。暗黙の動詞が別のウィンドウを表示することであるコマンドは、省略、ヘルプ、オプション、プロパティ、設定などの省略記号を使用しません。

Data。テキストが切り捨てられていることを示します。

Labels。タスクが進行中であることを示します(たとえば、「検索しています...」)。

Tip:未使用のスペースがあるウィンドウまたはページの切り捨てられたテキストは、レイアウトが不十分であるか、デフォルトのウィンドウサイズが小さすぎることを示しています。切り捨てられたテキストの量を排除または削減するレイアウトおよびデフォルトのウィンドウサイズに努めます。 」

13
spunkypixels

概要:状況によって異なりますが、デフォルトでは「abc ... def」よりも「abcdef ...」

文字列の最後または中央のテキストがアイテムを区別する可能性が高いかどうかに基づいて方法を選択します。これはドメインに依存します(そのため、特定のコンテキストからの独立した研究が役立つとは思いません)。

たとえば、不動産のWebサイトでは、住所文字列は通常「Road」または「Street」で終わります。したがって、最後の文字はほとんど常に「oad」または「eet」であり、どちらもユーザーの役に立たないため、「abc ... def」の形式はあまり役に立ちません。

答えが明確でない場合は、デフォルトで「abc ... def」よりも「abcdef ...」の形式を使用します。これは、部分的な単語は、最初の文字から推測する方が、最後の文字より推測しやすいと強く思うからです。たとえば、「Openi ...」は「... ening」よりもはるかに認識されます。これは、多くの英語の単語に一意でない接尾辞と終了パターンがあるためです。

6

Ellipsisを使用すると、代わりにEllipsis自体が実際に役立つ情報をより多く表示するために使用できるスペースを取るという欠点があります。特にどちらかの端で省略記号を使用する場合は、スペースを3つドット浪費する代わりに、最後の数文字でテキストをフェードアウトすることを検討してください。テキストは読みやすいままですが、フェードアウトすることで、さらに多くのテキストが必要であることを示します。

例えば:

example of using a fade effect instead of Ellipsis

ソース 画像の)

もちろん、ラベルでこれを行う必要がないことが常に望ましいので、絶対に避けてください。ただし、岩と固い場所の間に本当に行き詰まっている場合は、これが解決策になる可能性があります。

3
André

ラベルを壊さないことに関しては、代わりに石に設定されているように見える、書かれていないルールがあります。
1つの説明になり得る2行のラベルを設定しようとすると、おそらく多くのレイアウトがひどく壊れてしまいます。
とはいえ、長いラベルを切り詰めるのではなく、必要なだけ行を分割し、フォームデザインのラベルとフィールドケイデンスの(退屈な)通常の間隔を壊します。
理論的根拠は、ユーザーの都合を考慮してフォームを設計する必要があること、および省略記号の付いた省略記号でユーザーを困惑させないなど、ユーザーにトリッキーな不要なインタラクション(省略記号をクリックするなど)で困惑させない方が良いことです。外国語を話す人にとっては不可解であることがわかりました。
デザインの一貫性を実現するためにラベルを微調整することは、コンテンツの前にフォームを置くことです。
残酷なデザイナーに、ユーザーの明快さに対する欲求を支配させています。

2
Juan Lanus

ラベルを切り捨てる必要がある場合、楕円を配置する場所はデータによって異なります。デフォルトは通常最後にありますが、一部のデータについては、最初と最後の一部を見る方が良いでしょう。ただし、最初と最後の両方に十分な文字を表示する必要があるため、後者はより多くのスペースを必要とします。他のデータの場合、たとえば、最初に省略記号を表示する数値は、最後の桁が最も重要である場合に適しています。ただし、他の投稿で述べられているように、これを回避するように設計する必要があります。

2
Paul

ラベルを切り捨てる必要があるというのはある意味それ自体が失敗ですが、最善の努力にもかかわらず、やむを得ない状況で私たちが詰まることが時々あります。

1つの可能性は、利用可能なスペースの最後に楕円を使用することですが、ボタンのようなものにします(標準の灰色のボタンではなく、クリック可能ですが、アタッチされているテキストとより調和します)。 「ボタン」をクリックすると、残りのテキストに展開されます。残りのテキストにも「ボタン」スタイルがあります。拡張テキストの「ボタン」をクリックすると、省略ボタンに折りたたまれます。

最初はホバーアクションを実行して全文を表示することを考えましたが、タッチデバイスでは機能しません。

0
obelia