…で終わるテキストは、通常、読むべきものがまだあることを示します。しかし今、色あせたテキストについて話している人の中には、ユーザーエクスペリエンスが優れていると聞いたことがありますか？誰かがこれをテストしたか、「もっと読む」ことを示すためにトーンテキストの経験がありますか？

コメント

  • そのようなトーンテキストの例を投稿できますか？これにより、意味がより明確になるだけでなく、それについて独自の小さな調査を行う機会も得られます。
  • I '色あせたテキストのアプローチが好きかどうかはわかりません。 'レイアウトに問題があることをほぼ示しています。
  • I 'わからない'これまでに使用されたものを見たことがありますが、例はありますか？
  • 別の質問ですが、"の人は聞いたことがあります色あせたテキストについて話している人の中には、ユーザーエクスペリエンスが優れている人もいます"実際、周囲に1人いますか？それとも、色あせたテキストが従来の' .. 'よりも直感的であることを示唆していると指摘できる調査からですか？ ？
  • これに関する1つの参照があります： Androidマーク…ええと、つまり GooglePlay製品の説明-'これがOPの意味どおりかどうかはわかりませんが。また、私の例には、色あせたテキストに加えて、" more "ボタンもあることに注意してください。

回答

テキストの端をフェードすることは、省略記号の代わりに役立つ可能性があり、いくつかの点で優れていると思います。

コンテンツを混同しないでください

省略記号は、テキストコンテンツを置き換えて仕事をするため、実際のテキストが何であるかについて混乱を招く可能性があります。" … "？切り取り/コピー/貼り付けを行った場合、それは発生しますか？フェードによってコンテンツの表示方法が変わります 。

ある意味で、フェードは視覚的エンコーディングとセマンティックエンコーディングの分離の概念に準拠していますが、省略記号は準拠していません。

iOS 5では、 AppleはモバイルSafariのアドレスバーを省略記号の代わりにフェードを使用するように変更しました：

ここに画像の説明を入力してください

oではありません実際のURLが何であるかがより明確になりますが、（少なくともそのように感じますが）後を追うにつれて、もう少し多くのURLを見ることができます。

垂直に切り捨てられたテキスト

省略記号は垂直方向には機能しません。これはJIRAの例で、下のコンテンツはスクロールされますが、ヘッダーは配置されたままです（これが発生する直前にも、巧妙に圧縮されています。聞こえるほどぎくしゃくしていません）。フェードは、スクロールしている部分がどこかに移動していることを伝えるのに役立ちます。

ここに画像の説明を入力してください

テキストがオーバーフローした場合はコンテナですが折り返すことはできません

ここで、Gmailでは、オーバーフローが遮断されるエッジは困難です。幅は動的であるため、楕円を動的に挿入する必要がありますが、これは実用的ではありません（スナップすることはできなかったと思います）。フェードアウト、または"のいとこ"が、何が起こっているのかを伝えるのに役立つ可能性があると私は主張します。

ここに画像の説明を入力してください

いくつかの一般的な背景

一般的に、フェードアウト効果コントラストが高いほど解析が容易で、ユーザーには" "近くに見え、コントラストが低いほど難しいというスキューモーフィズムに起因します。 "日没で色あせている"と考えてください。 iOSからのより具体的なスキューモーフィズムは、アイデアを浮き彫りにします：

ここに画像の説明を入力してください

Gmapsからの別のタックアンダー：

ここに画像の説明を入力してください

明らかに、これは非常に一般的な規則ではなく、テキストの折り返しや楕円の代わりに設定されています。私だけですあなたが話していることの正確な例を1つ見つけました。しかし、それは「状況によっては有効なオプションだと思います。

コメント

  • +1それ´さまざまな種類のグラデーションの概要。 ´はブログ投稿である必要があります;）結論を »以上に拡張していただければ幸いですが、'状況によっては有効なオプションです。« あなたのように´私はそれについてたくさん考えました。ところで：最後の imho は"内側の影"です。ああ、リストを機能させるには、8スペースの画像を意図する必要があると思います。
  • @kaiser考えてくれてありがとう。リストを作り直しました。また、おそらく最後のものは両方とも"内部シャドウ"と呼ばれる可能性がありますが、重要なのは'は、テキストを切り捨てるコンテナの内側の影です。そのため、平行線を描画しようとしたのはなぜですか。私の言い回しには修正が必要です…

回答

まとめ：

グラデーションとフェードアウトのあるポイント 2）は常に同じです：悪いモニター/ LCDではうまく機能しません。

コントラストの問題

ここに画像の説明を入力

左：デザイナーモニターで見栄えがする|| 正しい：はるかに早くフェードアウトします。

色の範囲の問題

モニターの不良：

モニターの良さ：

上記のように、すべてのユーザーがモニターで個人的な体験を共有するわけではありません。画面に直接日光が当たると、結果はさらに

私の意見：

フェードアウトとグラデーションを使用しないでください回避できないまで。

コメント

  • これは

"色あせたテキスト"の意味だと思いました。私の印象では、'は次のようになっています：[〜400文字の無地のテキスト] [〜50-100文字の急速に消えるテキスト]-この場合、視覚的体験の違いはフェード" speed " woudn '本当に重要ではありません。ただし、OPが彼女の意味を明確にするまで、これは推測です。

  • 確かに、後の部分は削除されますが、'は問題ではないため、少量のフェードテキストは、'を読むことを意図しておらず、"より多くのテキストの象徴的な表現としてのみ意図していることを意味します"が利用可能です。
  • グラデーションにはハードウェアの依存関係がなく、日光や悪いモニターによって大きな被害を受けることもありません。デザインの問題とUXの問題を混同しています。通常、オーバーレイなしで4〜10行を表示し、次に100％から0％にフェードする2〜4行を表示します。そのフェードがユーザーの'モニターに正確に表示されているかどうかは関係ありません。ユーザーが何らかのフェードを a 見ている限り、コントロールはさらなるコンテンツを示すという目的を果たしています。
  • 繰り返しになりますが、あなたは誤解しています。グラデーションはすべてのテキストをカバーするのではなく、下部のみをカバーします。その最後の部分でフェードが高いか低いかは、利用可能なコンテンツが多いことを示す指標としての値には特に関係ありません。コンテンツの大部分は完全に表示されます。一部のユーザーにはグラデーションが見えにくくなる可能性があるという事実を認識することは重要ですが（最悪の場合に設計できるようにするため）、ユーザーの品質に関係なく、グラデーションが目的を果たすことを妨げることはありません'の画面。
  • 重要なポイントは、OPがフェードが10マイルまたは10mmを超えて発生することを意味したかどうかです。簡潔な説明と例の欠如を考えると、'それが明確だとは思いません'。 'は、テキストの大きなグラデーションが悪いことに同意します。含める例は、最良の条件ではかなりひどいものに見えます。ただし、説明があいまいだからといって、'最悪のケースを想定する必要があるわけではありません。 'おそらく仮定がより楽観的である場合に対処する私の答えについてあなたがどう思うか興味があります。

    • 回答

    「色あせたテキスト」の手法はあまり使用されていませんが、ユーザーエクスペリエンスのポイントは、ユーザーが使いやすいものを設計することだと思います。 。ユーザーが何が起こっているのかを推測しようとしなければならない場合、あなたは目的を破っていると思います。ほとんどの場合、[…]または[more …]を追加するだけで十分であり、クリーンでわかりやすいパスを提供します。ユーザーがより多くの情報を入手するために…とにかく全体のポイントは正しいですか？

    回答

    色あせたテキストの使用がテストされているかどうかを尋ねますか？

    ご覧のとおり、これは次の例です。ユーザーインターフェイスで「情報の香り」を使用するというアイデア。言い換えると、データがインフォメーションスパのどこにあるかをユーザーに視覚的に伝えるにはどうすればよいでしょうか。 ce。この場合、フェードは、スクロールしたり、何らかの方法で操作したりすると、この方向に到達できる情報がさらにあることを示します。

    90年代後半、視覚化コミュニティで情報の香りの概念について多くのことを話し合いました。 CHIコミュニティには多くの研究文献があり、XeroxParcの情報採餌理論が出てきました。彼らはこの分野で多くの研究を行いました。PeterPirolliとStuCardの論文が思い浮かびます。

    情報の香りをクエリに適用することもできます。そのため、たとえば、グレースケールを使用して設計した一部の視覚化で情報の香りを使用して、スライダーに設定された特定の基準（黒が1つ失敗、濃い灰色が2つ失敗など）をデータがどのように満たすかを示しました。言い換えると、黒いデータポイントはクエリのすぐ外側にあるデータポイントです…したがって、スライダーをすばやく動かしてそれらを含めることができます。

    ここに画像の説明を入力してください

    Bob Spenceは、これらの情報の香り/残留技術。

    したがって、この特定の手法に関するデータを提供することはできませんが、この種の手がかりを提供することが情報ベースのタスクで人々をどのようにサポートするかについては、確かに多くの研究があります。

    コメント

    • ミニマップは、'ディスプレイに収まらないコンテンツの余白からのフェードアウトとどのように関連していますか？
    • 明確にするために編集…これは私がほのめかしている基本的な概念です。
    • 失敗ごとの色を示した棒グラフです。まだ'これがどのように関連しているかを確認してください。また、合格したすべての赤と最も多くの失敗が最も軽く、最後のz次数であるのはなぜですか？

    回答

    フェードテキストを使用することの良い点（これが何を意味するのかわからない場合：テキストがコース全体で背景色に「フェードアウト」するように、グラデーションの透明なオーバーレイ数行）は、エリプシスよりもはるかに大きく、見逃しにくいということです。さらに、省略記号はほとんどの場合を示すように機能しますが、テキストが正しい場所で適切に終了しているように見える場合もあるため、ユーザーに追加の単語を探すように促すぶら下がりの概念はありません。省略記号も非常に小さく、特に視力が低下している人（高齢者など）にとっては見逃しがちです。

    自分で使用した経験はなく、使用しているサイトを覚えていますが、省略記号があります。 …使用しているのサイトを思い出せません。お詫びします。気に入ったと言えます。コンセプトであり、その目的にはうまく機能すると思います。「詳細」ボタンに置き換わるものではなく、追加コンテンツをより大きく明確に表示するだけであることに注意してください。それでも、ユーザーがフェード効果を確認したときに引き寄せられるクリック（ウィンドウシェード、[その他]ボタン）を可能にする領域が必要です。

    回答

    このタイプの効果は、コンテンツのスクロールにのみ適しています（つまり、ティッカー、ニュースフィードなど）、片側からスクロールして（フェードイン）、反対側にフェードアウトします。

    回答

    これはうまくいくようです形状の読み取り、 http://www.microsoft.com/typography/ctfonts/WordRecognition.aspx 、および単語認識の概念。ただし、理論的には、これは水平（左から右）のフェードにのみ役立ち、Amazonの場合は ではありません。垂直フェード。 http://softwareas.com/pure-css-solution-to-avoid-cutting-off-text/ これはささやきと同等と見なすことができますが、ささやきは聴覚的ですが、これは視覚的なレベル。私の知る限り、研究は行われていませんが、誰かが見つけた場合は、ここに投稿してください。

    ここで「フェードサンプルと標準の省略記号。 http://www.theuxunicorn.com/fade_sample.png

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です