web-dev-qa-db-ja.com

これは読みにくいですか?

これは、私が作成したばかりのサイトのスニペットです。読みやすさなど、企業の色を考えて、一緒に作業してみました。

Site screen print

実は、読んだり見たりするのはかなりリラックスできて、問題があるというテスト担当者やユーザーからのコメントはありません。全体として、緑は目にやさしい色です。

しかし、誰かがそれを嫌いで、読みにくいとコメントした人がいます。彼らの意見を受け入れたいのですが、私は困惑しています。だから、ここで何かを逃したのではないかと思いました。この配色は、ここにいる他のUXが妥当だと考えるものですか?

編集私が使用している赤は、問題を強調するために使用する通常のエラー赤よりも暗いです。

編集コメントで指摘したように、私はUI開発者ではありません。戸惑うのは、人々が私のデザインを好きではないということではありません(そう、私はそれほど敏感ではありません)。そして、私が言ったように、他のすべての要件があります。これらのいくつかは、完全に白い背景を除外します...(これは私がで始めたものです)。

みんなのコメントを受け入れます。残念ながら、これを変更する時間はないと思いますが、フィードバックは役に立ちます。

角に行ってちょっと泣いてみる...

編集面白いですね。ブラウザーを通常のモニターから別のモニターに移動したところ、突然、恐ろしく見えます。だから私は色をくすんで、うまく表示しないモニターにだまされたと思います。だから私が見たものは、実際、他の人が見ているものとは異なります。

20

まず最初に、これは色覚異常者(重度の盲目症、色覚異常の最も一般的な形)のユーザーにとっては次のようになります。 enter image description here (また、ゼブラストライプスは色盲かどうかにかかわらず、ほとんど見ることができません)

緑に赤 は古典的に悪い色の組み合わせですが、マゼンタのテキストは完全に判読できません。背景色は非常に騒々しいですが、目には難しい場合があります。

そうです 緑はリラックスしています しかし、Webデザインでは回避されることが多いため、多くのユーザーが緑で怖がっています(私のお気に入りの色なので、かなり残念ですが、一般的には避けているので、この)。

インスピレーションを得るために、ここに よくデザインされたグリーンウェブサイトの良いリスト を示します。通常、テキストはクリア黒または白であり、これらのページの赤の例の実際の数に注意してください目を引く。

いくつかの優れた カラーコントラストツール を使用して、アクセシビリティと読みやすさを自動的に確認できます。これらは実際のユーザーテストに代わるものではありませんが、最初にそれらがどのように一致するかを確認し、カラーコンボが少なくとも技術的にかどうかを確認することをお勧めしますユーザーに表示する前にアクセス可能。

37
Ben Brocka

コーポレートカラーはビジュアルブランディング用です[〜#〜] not [〜#〜] UI開発。

UIはユーザーの邪魔にならないように支援するものです。そのため、ほとんどの色(グレー、グレーブルーなど)はニュートラルになります。

22
DA01

はい、一部の色は良くない場合があります。画面は非常に整理されていますが、より良いカラーテーマを提案します。極端なものではありませんが、背景色はうるさすぎるので、実際よりもかなり明るくします。内容が気になったようです。

また、赤はフォントのデフォルトの最適な選択ではありません。ほとんどのWebサイトは、エラーやホバーイベントにフォントを使用するためです。

使用する緑のグラデーションの背景を明るくします:rgb(231、255、183)または次の16進値:#E7FFB7そして、あなたがしたように白にフェードします。

次に、赤いテキストを、背景でうまく機能する別の色に変更します。

10
b01

緑の背景に赤のテキストが表示されると、カラーホイール上で赤と緑が反対になるので直感に反するため、コントラストが大きくなると考えられます。残念ながら、それは実際にはそのようには機能せず、心が違いを整理しようとすると、一種のマイクロハロー効果を生み出します。緑の背景はそれだけで問題ありませんが、黒のテキストを使用します。

8
Jim Fell

カラーコントラストチェック は、色がさまざまな標準に準拠しているかどうかをテストするための優れたリソースです。ここであなたの色をチェックした後、あなたのデザインは部分的に準拠しているようです

それはさておき、グリーンは背景に対してかなり大胆で攻撃的です。ターゲット市場によっては、これがニッチ市場の場合に機能する場合があります。そうでない場合、それは少し勇気があります。それらはコーポレートカラーであり、すべてであると理解していますが、それらを組み込むことができるより微妙な方法があるはずです。

また、テキストの「通常の」色としての赤は避けてください。エラー、アラートなどを示すために赤を使用する必要があります。

6
Matt Rockwell

これは読みにくく、見た目も悪いです。

私自身を修飾するために、私はemeraldcode.comとkitgui.comの所有者であり、UIデザインの選択肢をそこで見ることができます。私のデザインの選択はそれだけであることに注意してください。私はそれらを選びました、私はそれらを造らなかった。アメリカンアイドルに行って「猫の乾燥機」を歌ってオーディションをするべきではないのと同じように、私は個人的にデザインの実装に夢中になっています。私が持っている唯一の節約の恵みは、何かが見栄えが良いか、またはよく聞こえるかを知ることです。

JQuery UIなどの既存のフレームワークから取得し、企業の色に合わせてテーマを変更する方がよいでしょう。率直に言って、これはWebの初期の頃からの取り組みのようです。 Apple、Google、Microsoftなどの上位のサイトを見ると、UI部門で苦痛を感じるでしょう。フレームワークを使用してください。私はjQuery UIとThemeForestの両方を使用しているため、これらを使用しました。

スクリプティングとマークアップの両方でHTML 5のテクニックを学ぶのもいいでしょう。あなたが意見を求めたことを思い出してください、そしてあなたが好きではないものはあなたが最も多くを学ぶものです。

6
Jason Sebring

自分で視力に問題があり、このページを読むのが非常に難しいと思います。特にグリーンゼブラストライプのグリーン。また、赤色はエラー用に予約する必要があることにも同意します。

5
Ewa Ev

私はメインの背景色として常に白を使用しています。Google、Facebook、Microsoft、Apple、Twitterなどもそうです。他の色を使用することは使いやすさの問題です。私は個人的に他の色で書かれたテキストを読むことを拒否します。

3
Jader Dias

色ではなく、グレーディングです。瞳孔が自動的に一直線に移動し、コントラストの異なる領域に苦しんでいるときに、瞳孔が拡大したり収縮したりするのを感じることができます。

2

私はすべての新しいサイトを白黒とグレーの色合いで開発しています。私は色を完全に放棄しているので、人々はコンテンツと形とレイアウトに集中する必要があります。

私は実際に人々をシフトする大きな成功を収めました 』色がないとき、焦点は色から何かに焦点を合わせました。

1
Evik James

緑を使いすぎると、視覚的な階層が薄れていくと思います。

ページが伝統的な白で黒いテキストで、緑が何かに注意を引くために使用されていた場合、タスクの完了を強化するためのブランドのより良い使用法です。

1
Mike Hill

上記のデザインの配色以外にも、フォントや読みやすさなど、考慮する必要があるものがあります。

ここにデザインパターンに関する興味深い記事があります

http://uxdesign.smashingmagazine.com/2009/06/23/10-ui-design-patterns-you-should-be-paying-attention-to/

0
Jay D