web-dev-qa-db-ja.com

丸みを帯びた角は、ユーザビリティにどのように影響しますか?

ボタンやコンテナの角を丸くすると、使いやすさにどのように影響しますか?ボタンをクリックすると見やすくなりますか?他の非ボタン要素で使用すると、サイトがよりフレンドリーに見えますか?私はそれらの効果についていくつかの科学的なテストを探しています。

digg firefox ie

丸みを帯びた角は、古いバージョンのInternet Explorerでは非常に時間がかかります。 Digg などの多くのWebサイトは、それをサポートするブラウザーでborder-radius: 0.4emを使用し、鋭いエッジを持つ不良ブラウザーを残します。 IEに丸みを帯びたコーナーを実装するのに必要な時間がユーザビリティの向上に値しないため、彼らは意図的にこれをIEに行いましたか?

80
JoJo

コンターバイアスとして知られています(これについては 本のユニバーサルプリンシパルオブデザインのページ を参照してください)。この本は、輪郭バイアスに関する独創的な研究をこの記事として引用しています Humans Prefer Curved Visual Objects Moshe BarおよびMaital Net著

ただし、丸みを帯びた角は必ずしもrightとは限らないことに注意してください。本には次のようにも書かれています。

先のとがった機能を持つオブジェクトは、連想処理に関連する脳の領域でより強い活性化を引き出しました。つまり、angularオブジェクトはあまり好まれなかったものの、輪郭のあるオブジェクトよりも深いレベルの処理を引き出しました-それらは効果的で、より興味深く、考えさせられる

したがって、おそらく、コンテンツをより親しみやすいように見せたいか、もっと目立たせたいかどうかの問題です。本が続くように:

角のあるオブジェクトは、注意を引き、思考を引き付けるのにより効果的です。輪郭のあるオブジェクトは、感情的で審美的な印象を与えるのにより効果的です。

編集:

私たちが自然の中で見つけたもの、そして潜在意識の解釈について考えていました。

私たちは、自然界で見つかるものに時間をかけて前処理されています。曲線は自然界で見つかる可能性が高く、正方形のコーナーはほとんどありませんが、多くの場合、それらが発生する可能性がある場所(たとえば、破損、破損、またはその他の力により)は、時間の経過とともに摩耗して、自然な曲線を再作成します。四角い角は、自然界に存在しないだけです。

このため、自然に見えるページを作成しようとすると、四角い角ではなく丸い角が作成されます。これにより、ボーダーまたはフレームがコンテンツに快適に収まるようになります。ただし、四角い角を使用すると、これらの鋭いポイントがより目立ちます(潜在意識は危険と脅威を探すために組み込まれています)。

正方形の角がコンテンツから離れ始めます。その結果、正方形のフレームは、別のウィンドウとしてより解釈され、内部のコンテンツへのビューが提供されます。少し驚いたことに、そのアートは正方形のフレームに掛けられています。フレームは画像の一部としては見えません。これにより、画像全体を妨げることなく見ることができます。それは図と地面の分離についてです。

このため、角の丸いフレームよりも角のある四角いフレームの方が、正方形のボタン内のメッセージがはっきりと認識されると思います。実際、深刻なメッセージや警告は、友好的な丸みを帯びたものよりも正方形の形でより重要であり、より尊敬を集めるようです。また、警告サインにさらに先のとがった三角形が使用されているのも当然です。

だから-四角と丸めの両方は、コンテキストとメッセージの認識方法に応じて場所があるようです-メッセージが深刻で、最大の影響のために妨げられずに表示される必要があるか、または自然で有機的で、フレンドリーで魅力的な環境がより適切です。

76
Roger Attrill

ソフトウェアに制限する理由-@Paul Olyslagerが指摘した「角丸長方形の方が目に優しい」という別の例は、Appleの製品でこのブログ投稿 Realizations of Rounded Rectangles が指摘しているように明白です。

角丸長方形はソフトウェアで止まりませんでした。ますます、角丸四角形はpartiAppleハードウェア設計)になっています。形状大型機は近づきやすく、小型機はポケットに入れられるようになりました。

enter image description here

したがって、丸みを帯びた角は重要なユーザビリティ要素ではないかもしれませんが、それらは親しみやすさと親しみやすさの知覚を作成するのに役立ちます。このようにして、彼らは 内臓レベル で心理的な必要性に取り組んでいます。

20
Kartik G

たまたま、これについて「 Call to Action Buttons Part 3:Shape and Size 」という記事を書いたところです。記事では、3つの理由で角を丸くすることを提案しました。

  • まず、丸みを帯びた角が内側を指し、ボタンの内側(コンテンツ)に注意を向けます。反対側の正方形のエッジは、外側を向き、そのオブジェクトから注意を引きます。
  • 丸みを帯びた角を使用する2番目の理由は、これらが潜在意識を落ち着かせるということです。研究により、脅威の可能性があるため、本質的に鋭いエッジ(原始反応)を回避するように「プログラム」されていることが示されています。
  • 角丸四角形を使用する最後の理由は、実際に表示するのにかかる労力が少ないためです。 Visual Perception の作者であるJürgNänni教授を引用したいと思います。私たちの「中心窩」は、円を記録するときにさらに高速です。エッジには、追加の神経画像ツールが含まれます。したがって、プロセスは遅くなります。」.
14
Paul Olyslager

調査によると、ユーザーは、魅力的なインターフェースのみが美的である場合でも、より魅力的なインターフェースを使いやすいものとして認識しています。多くのユーザーは不親切なインターフェースにうんざりしています。つまり、ユーザーは通常、アプリケーションを使用するのが難しいと疑われる場合に、アプリケーションの代替手段を探すことになります(「試してみるだけでも、疑いが根拠のないものであることが判明した場合でも」。

あなたの質問は特にボタンについてのようですが、丸みを帯びた角と使いやすさについて技術的にかなり一般的な質問をしたので、別のアイデアも提案します。丸みを帯びた角は、視覚的に異なるボックス間の隣接性を示す優れた方法であり、デザインを視覚的に面白く保ちながら、1つのオブジェクトを処理していることをユーザーに納得させます(Webフォームでは、ユーザーは入力するデータの各グループが1つのフォームの「オブジェクト」にリンクされていると感じなければなりません。

次のWebフォームを検討してください。

enter image description here

ここで、私のフォームは、1つの青、1つの白、もう1つの青の3つの視覚的に異なるボックスで構成されています。この視覚的なバリエーションは、オブジェクトが単一の青または白のブロックよりも興味深い外観になるのに役立ちますが、上部または下部の丸い角は、3つが同じオブジェクトの一部であることを示しています。ユーザーには視覚的に変化したフォームが表示されますが、関連するデータが別々のボックスに分割されているのを見るのは気になりません。

7

UXムーブメントに関する記事 角の丸い方が目に優しい理由 ここにあるコメントの一部を反映していますが、角の丸い角と角の丸い角がどのように異なる方向に目を向けるのかについても興味深い点があります。長方形に焦点を合わせるための丸みを帯びた勝利と、周囲のネガティブスペースを強調する鋭い角。

4
Todd Sieling

角を丸くすると、要素がページの構造から分離されます。

丸みを帯びたオブジェクトは、周囲のオブジェクトから構造的に分離された単一のオブジェクトです。私たちはこの品質を、独立して移動が可能な要素に関連付けることに慣れています。 Webサイトでは、これは通常、ボタンなどのインタラクティブな要素にのみ適用されます。ボタンは、他の方法で押したり移動したりできます。

丸みを帯びたオブジェクトの構造的な分離を再現するIEの要素の代替設計ソリューションを見つけるのはかなり簡単です。たとえば、目立つ枠線や1ピクセルのドロップシャドウなどです。これにより、開発の苦痛なしに、丸みを帯びたコーナーの使いやすさの利点が得られます。

3
josef

視覚的環境に対する人の反応は学習された行動であることを示唆する心理学的研究があります。つまり、まっすぐなエッジの多い都市環境に住んでいる場合、異なる反応をします。

http://www.eamonfulcher.com/CogPsych/page3.htm

•異文化研究。 Segall et al。 (1966)ズールー族の人々がミュラー・リヤー幻想を知覚することができなかったことを発見しました。これは、それらの視覚環境に含まれる長方形、直線、および規則的な角がほとんどないため、トップダウン処理の影響を受けなかった(したがって、知覚における環境の影響の重要性を暗示する)

Annis and Frost(1973)は、田舎に住んでいたカナダのクリー族インディアンは、対角線、垂直、水平のどちらで表示されているかに関係なく、2本の線が平行かどうかを判断するのに非常に優れていることを発見しました。線は斜めに表示されました。提供された説明は、都市の垂直線と水平線への露出が対角線の知覚をより困難にするということです。

2
PhillipW

IEに丸みを帯びたコーナーを実装するのに必要な時間は、使いやすさの向上に値しなかったので、彼らはIEに対して意図的にこれを行いましたか?

短い答え:はい

長い答え:はい、しかし必ずしも丸い角がないという直接的なUXの問題があるわけではありません(ロジャーのリンクは、直接的な関連性に関するいくつかの研究へのリンクです)。それは、時代遅れのテクノロジーをいじくり回すのに費やされる時間の問題であり、残りのユーザーのために残りの機能に対応するのに費やされた時間です。丸みを帯びた角は、優先順位のリストではかなり低いので、IEユーザーに手放せる機能です。その上で、Diggの人口統計(少なくとも当初は)には、古いIEユーザーがはるかに少なかったでしょう。

2
DA01

角が丸いのはほとんどのブラウザで見栄えが良いですが、それが表示されているデバイスを考慮してください。モバイルデバイスはますます広く使用されるようになり、特にタブレットの人気が新たに高まっています。丸みを帯びた角は、IOS以外のタブレットやモバイルデバイスでは、星形よりも小さく見えることがあります。

(ボタンと背景の間の)コントラストをアピールして「クリック音」を高めることをお勧めします。

1
Christie Day

長方形のボタンはシャープです。私たちの脳はより鋭い物体を危険として処理します。たとえば、ナイフ。丸みを帯びた角は私たちの脳を安全に感じさせます。

0
Agnel Vishal

半径が大きすぎると、テキスト用の余地が少なくなり、ユーザビリティに影響を与える可能性があります。

たとえば、Googleの新しいモバイルChromeスタイル(Android Oreo)では、テキストフィールドに角がありません。つまり、端が半円になっています。これは、一般的に小さなモバイル画面には適していません。 。

0
nsandersen

これは本当に良い質問で、多くの有用な回答/意見がすでに出されています。

しかし、私はあなたや他の多くが尋ねている可能性があるフォローアップの質問に焦点を当てたいです:

Internet Explorer 6,7,8のような問題のあるブラウザに対して、丸みを帯びた角を引き続きサポートする必要がありますか?


IE 6,7,8:

Cascading Style Sheets level 3(CSS3) 数行のコードでこれを非常に簡単に行うことができます。古いバージョンのCSSでは、これらの丸みを帯びた角を生成するために画像またはその他の手法が必要です。 IE(6,7,8)の古いバージョンは、この新しいCSS3言語をサポートしていないため、より専門的なCSSの知識を必要とするため、実装時間が長くなる古い技術に依拠しています。これらのブラウザはクライアントが最も使用しているブラウザであることが多いため、企業はこの種の問題に直面することがよくあります。


丸い角はユーザーエクスペリエンスに影響を与える可能性があると言って間違いありません。上記の答えはその理由を説明しようとしています。私たちは単に問題のユーザビリティの側面を見ているだけですが、より大きな観点(UX)から見るべきです。

それらをサポートするのが面倒でない場合は、適切に使用する必要があります。ただし、UXの分野では、他の側面も考慮する必要があります。

IE 6,7,8:で角丸のサポートを提供してはならない理由がいくつかあります

  • プロジェクトは、IEの角を丸くサポートするために、実装中に追加の作業と時間を必要とします。多くの場合、より優れたリソースを意味する、より専門的なCSSの知識が必要です。これはすべて、プロジェクトの総コストに追加され、予算によって制約されることがよくあります。この予算は、はるかに重要なUXの側面に集中し、使用するすべてのブラウザー間でピクセルの完全なブラウザー互換性を確保するために必要です。
  • 同じ問題に対してワークロードの増加を主張するよりも、優先度の小さいUXの問題に対してワークロードの削減を主張する方が簡単です。最初に重要なことに集中することが重要です。
  • 使用されているすべてのブラウザで角丸を完全にサポートしているとしましょう。基本的に、これは、これらの特定のバージョンのブラウザーをサポートするために作成されたこれらの丸みを帯びた角を確保するための手法を使用していることを意味します。これらのブラウザー(バージョン)の一般的なサポートは、年月が経過すると世界中で終了します。これは、存在しないブラウザバージョンに対して古い技術を使用する製品が残ることを意味します。 CSS3をすぐに使用して gracefully degradation を適用すると、企業がCSS3をサポートするようにブラウザーを更新したときに、ブラウザーサポートが自動的に提供されます。

結論:これらのブラウザのすべてのサポートを終了する必要があるとは言っていません。この時点では不可能です。丸みを帯びたコーナーについて話しているが、UXにあまり影響を与えずに優雅に低下させることができる他のこともあるかもしれない。これらが何であり、UXにどのように影響するかを自問してください。

UXプロフェッショナルがビジネスや管理ではなく、これについて決定していることを確認してください。

0
Dennis Gommé