web-dev-qa-db-ja.com

より多くのコンテンツを示すために色あせたテキストを使用することに関する研究または経験?

...で終わるテキストは、通常、さらに読む必要があることを示します。しかし、今では、色あせたテキストの方がユーザーエクスペリエンスが優れているという話を聞いています。誰かがこれをテストしたり、「もっと読む」ことを示すためにトーンテキストからの経験がありますか?

19

テキストのエッジをフェードすることは、楕円の代わりに役立つ場合があり、私はいくつかの点で優れていると主張します。


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

省略記号は、テキストコンテンツを置き換えて仕事を行うため、実際のテキストが何であるかについて混乱を招く可能性があります。 「...」は含まれていますか?切り取り/コピー/貼り付けを行うと、それは起こりますか?フェードは、コンテンツの表示方法を変更します表示されます

ある意味では、フェードは ビジュアルエンコーディングとセマンティックエンコーディングの分離 の概念に準拠し、楕円はそうではありません。

IOS 5では、モバイルのSafariで楕円の代わりにフェードを使用するように Appleがアドレスバーを変更しました

enter image description here

実際のURLがより明確になるだけでなく、(少なくともそのように感じられますが)後から少しずつ見ることができます。


垂直方向に切り詰められたテキスト

楕円は垂直方向には機能しません。以下はJIRAの例です。下部のコンテンツはスクロールされますが、ヘッダーはそのまま残ります(これは、これが発生する直前に巧妙に圧縮されています-聞こえるかもしれないほどぎくしゃくしていません)。フェードは、スクロールしている部分がどこかに移動していることを伝えるのに役立ちます。

enter image description here


テキストがオーバーフローすると、コンテナになりますが折り返すことができません

ここ、Gmailでは、オーバーフローをカットするEdgeは難しいです。幅は動的であるため、楕円を動的に挿入する必要がありますが、これは実用的ではありません(私は、楕円をきちんと作成できないと思います)。フェードアウト、または「タックアンダー」の従兄弟であることが、何が起こっているのかを伝えるのに役立つと私は主張します。

enter image description here


一般的な背景

一般に、フェードアウト効果は、高いコントラストが解析しやすく、ユーザーに「近づく」ように見えるコントラストと、低いコントラストがより難しく、遠くに見えるように見える「擬態」から生じます。 iOSに関連するより具体的なスキューモーフは、アイデアを強調しています。

enter image description here

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

enter image description here

明らかにこれは超一般的な慣習ではなく、テキストの折り返しや楕円を置き換えるように設定されています。私はあなたが話していることの正確な例を1つだけ見つけました。しかし、状況によっては有効なオプションだと思います。

24
peteorpeter

要約する:

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

コントラストの問題

enter image description here

:デザイナーのモニターで見栄えがします|| :かなり早くフェードアウトします。

色範囲の問題

不良モニター:

良いモニター:

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

私の意見:

回避できない限り、フェードアウトやグラデーションを使用しないでください

5
kaiser

「色あせたテキスト」のテクニックがあまり使われていないのは確かですが、ユーザーエクスペリエンスのポイントは、ユーザーにとって使いやすいものをデザインすることだと思います。ユーザーが何が起こっているのかを推測する必要がある場合、私はあなたが目的を打ち負かしていると思います。ほとんどの場合、[...]または[more ...]を追加するだけで十分であり、ユーザーがより多くの情報を取得するためのわかりやすい簡単なパスを提供します。

2
Stephen

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

私が見ると、これはユーザーインターフェースで「情報の香り」を使用するアイデアの例です。言い換えると、データが情報スペースのどこにあるかをユーザーに視覚的に伝えるにはどうすればよいでしょうか。この場合、フェーディングは、この方向にスクロールまたは何らかの方法で対話した場合に取得できる情報がさらにあることを示しています。

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

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

enter image description here

ボブスペンスは、これらの多くの情報をまとめた論文を書きました 情報の香り/残さのテクニック

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

2
Lisa Tweedie

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

私自身はそれを使った経験はありません。私が使用しているサイトは覚えていますが、覚えていませんwhich私が使っているサイトです。謝罪します。私はそのコンセプトが好きだと言えるし、その目的のためにうまく機能すると信じている。 [もっと見る]ボタンに代わるものではないことに注意してください。これにより、追加のコンテンツがはるかに大きく明確に示されます。フェード効果が表示されたときにユーザーが引き寄せられる(ウィンドウシェード、[その他]ボタン)をクリックできる領域がまだ必要です。

1
Myrddin Emrys

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

1
Ades

これは、形状読み取り、 http://www.Microsoft.com/typography/ctfonts/WordRecognition.aspx 、およびWord認識の概念でうまく機能するようです。ただし、理論的には、これは水平(左から右)フェードでのみ有効であり、Amazonの垂直フェードでもしないことがわかります。 http ://softwareas.com/pure-css-solution-to-avoid-cutting-off-text/ これをささやき声と同等と見なすことができますが、ささやき声は聴覚的に聞こえますが、これは視覚的なレベルでの同様の効果です。私の知る限りでは、調査は行われていませんが、誰かが見つけたら、ここに投稿してください。

これは、標準の楕円と比較したフェードのサンプルです。 http://www.theuxunicorn.com/fade_sample.png

0
Jonathan Bowman