Pinterestトラップ

Question

最初に少しコンテキスト：

デザインの「Pinterestization」または「Pinterest Trap」の犠牲になっています。自分だけではないような気がします。 UX Magの2013年のレビュー記事のHana Schankからのこの抜粋を参照してください。

「今年は、Pinterestスパイラルが制御不能になり、2012年の終わりに定着し始めた傾向を確認しました。つまり、コンテンツの代わりにブロック画像やナビゲーションがブロックされ、ナビゲーションの一部がPinterestのようになりました。側[…]私の直感は、数年後に振り返って、なぜそれほど多くのインターフェイスがボックス内の画像のグループであったのか疑問に思うことです。この傾向が解消されることを期待しています。」

私は彼女に同意します。ユビキタスな「メトロ」レイアウトについても同じことが言えます。

しかし、代替案は何ですか？

私は追いかけます：私は大規模な組織のポートフォリオサイトで作業しており、おそらく次のようになります。

Mullen.com/work

これが私がこのプロジェクトや他のプロジェクトで遭遇している問題です：

この処理は、特によく行われたホバーステートで、ビジュアルコンテンツに対して非常に効果的です。目はそれをすばやく解析できます。かわいいです。限られたスペースに多くの素晴らしいコンテンツを配置します。 RWDに適しています。しかし、何よりも、ユーザーはこのようなサイトを操作したいようです。彼らはクリックされることを懇願します。

しかし、問題のページのコンテンツは、視覚的部分と非視覚的部分の両方です。戦略作業の表現についてはどうですか？オーディオの例？明確な視覚的な成果物がない作品はありますか？

1つのオプションは、安っぽいストック画像を追加して、非ビジュアルコンテンツにビジュアルアセットを与えることです。しかし、それは警官のように感じられ、コンテンツの大部分が画像ベースの場合にのみ機能します。しかし、私が言ったように、それは50/50です。それはたくさんのクマのストック写真です…

ここでクラムのストック写真を使用する代わりの方法を考えることができますか？高度な解析性と魅力性を維持しながら、視覚的作業と非視覚的作業を同等に扱うことができるのは、どのようなやり取りですか？

JonW · Answer

装飾目的でのみ意味のない画像を使用しないでください。無視されます、煩雑です。エンドユーザーがダウンロードする必要があるため、サイトの読み込みが遅くなります...このような画像を使用しない場合、使用しない理由は数多くあります何の目的もありません。

しかし、私はあなたが1つのオプションを見逃していると思います：タイポグラフィ。優れたタイポグラフィは美しく、優れたデザインの中心です。したがって、画像では表現できないコンテンツの場合は、代わりにいくつかのニースタイポグラフィを使用します。ツイート、紹介文、引用、見出しなどを表示できます（タイポグラフィの場合（画像として保存されたテキストではなく実際のテキスト））、次のことができます支援技術を利用している人も検索して読むことができます。

mockup

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

Midas · Answer

別のオプションは、テキストの画像の上に半透明のレイヤーを使用することです。これにより、すべての画像の色と色相を制御できるため、より一貫した外観のポートフォリオを作成できます（必要な場合）。

Vergeは多くの色のグラデーションを使用しますが、好みに合わない可能性がありますが、これは、さまざまな画像だけでなく、UIを制御しながら、両方のテキストを組み合わせる効果的な方法です。

enter image description here

user56reinstatemonica8 · Answer

Pinterestレイアウトの問題を解決する別の方法を見つけるには、ステップ1 で、Pinterestレイアウトの問題を具体的に特定しますis。

最も重要なレイアウトとあなたの例での大きなデザインの妥協点は、****階層の欠如****-目を引くために、均等に重み付けされたアイテムの画像に完全に依存しています。これは、非ビジュアルアイテムが失われるという問題と、これらのレイアウトがコンテンツダンプのように感じるというより広い問題の根底にあります。

さまざまな品質のユーザーが選別したコンテンツを大量に閲覧するPinterestのようなサイトには問題ありませんが、会社のポートフォリオには、ユーザーをガイドする何かが必要です/ストーリー、メッセージ、会社の概要。

あなたcouldファンシーなタイポグラフィを追加するか名詞プロジェクトスタイルアイコン非ビジュアルアイテムの場合、少なくともそれらを提供するsomeプレゼンス-しかし、それは明確なメッセージやフローではなく、競合するもののヒープを与える階層の欠如というより深い問題を解決しません。

Relative prominence 、using sizing、positioning and whitespace 、is a drawing to eye eye to content to均等にすべてを等しくしようとする-キャッチ。すべてが同じ音量で話すとき、何も目立ちません。

したがって、ステップ2 は、「持ち帰りメッセージ」やオーディエンスの意図した応答を把握しているため、レイアウトは全体に渡って設計されます。これが何であるかは、完全にクライアントに依存します。

ステップ3 はstructuring内容になりますaroundこのメッセージまたはフロー。この段階で、抽象的に考えます。細部にとらわれないでください。 Photoshopのカンプではなく、紙にポストイットノート。

そのメッセージをレイアウトに変換するのに役立つツールは、基本的に情報をグループ化する5つの方法があり、「 5つの帽子のラック」と呼ばれることもあります。

Location/geography ： Development Seed のホームページは、情報を地理的に整理して会社を紹介する気の利いた例です（ただし、直感とは少し異なりますが、下にスクロールすると、アニメーションの次のステップに進むとより良いです）
アルファベット順（または他の任意の既知の規則）：インデックスのような参照ルックアップに適しています
時間：リーセンシーが重要な場合、または最初、中間、最後の適切で魅力的なストーリーテリングに適しています-他のものにはリスクがあります。
Category ：非常に柔軟-常に物事をグループ化する方法はいくつかあります。
Continuum /階層/スケール：（たとえば、最高から最低、最大から最小）また、非常に柔軟です。