web-dev-qa-db-ja.com

アイコン駆動ナビゲーションを使用する場合のトレードオフは何ですか?

最近の多くのWebアプリケーションのUIデザインでは、アイコン駆動のナビゲーションを使用することが一般的なテーマのようです(ナビゲーション用のアイコンのみで構成される左側の固定サイドバー)

なぜこれがトレンドになりつつあるのか、そしてそれが好ましいアプローチであることを示唆する研究があるのか​​、それとも単にトレンドをそのように動かしているのか...

12
lamps92

ラベルが長い場合、アイコンだけでスペースを節約できますが、トレードオフはユーザーのメモリ消費です。

アイコンは、特にサイドナビゲーションにおいて、レイアウトに視覚的な順序と調和を与えることができます。ただし、複雑なマルチノードナビゲーションでは、多くのアイコンを記憶するようユーザーに求めています。

例としてfirebase consoleを参照してください:

enter image description here

展開表示では、明確なラベルが表示されます。認証のような言葉は、小さいサイズでも、閉じた状態のアイコンの下に追加するのは難しいでしょう。

Firebaseはラベルを表示するクイックホバーヒントを提供しますが、トレードオフは次のとおりです。

  • ナビを上下させて目的の場所を見つける必要があるかもしれません。

  • 作業するドキュメント領域により多くのスペースができます。これは、表示/読み取りではなく、ユーザーがコンテンツを編集、操作、および作成するWebアプリケーションに非常に役立ちます。

  • アイテムをグループ化するのに役立つカテゴリの説明を失う

比喩のマッピングの難しさ

ここには多くの概念があり(このナビゲーションでは26ノードです)、広く理解されている物理的または文化的なメタファー(たとえば、編集用の鉛筆)に簡単にマッピングできないため、意味のある広く受け入れられているアイコンを思い付くのは非常に困難です。このドメイン(アプリ開発者)であっても、それぞれの意味を解析することは非常に困難です。

Nielsen Norman Groupは アイコンの使いやすさ についても考えています。

ナビゲーション用のアイコンを考え出す必要がある場合は、ユーザーが簡単に認識したり直感的に理解したりできない可能性があります。

アイコンラベルは、ユーザーが操作することなく、常に表示されている必要があります。ナビゲーションアイコンの場合、ラベルは特に重要です。ホバーに依存してテキストラベルを表示しないでください。インタラクションコストが増加するだけでなく、タッチデバイスでもうまく翻訳できません。

23
Mike M

主な要因はコストです。Webおよびモバイルアプリケーションには、多くの場合、グローバルなユーザーベースがありますが、適切なローカリゼーションのための予算はありません。さらに、多くの開発者、デザイナー、さらにはプロジェクト管理者でさえも、独自の認知バイアスを適用しており、図像は文化や体験に固有のものであることを認識できていません。そのため、ローカリゼーションの負担を増やすテキストラベルの代わりに「ユニバーサル」アイコンを選択します。

使用方法によっては、デザインに国際標準のアイコンを使用することができます。ただし、ユーザーが意味を理解していることを確認するために、かなりのフィールドテストを行う必要があります。また、プロジェクトの残りの部分でアイコンをローカライズする必要がある可能性が高いことを認めてください。

また、アイコンは、テキストに必要な可変長ラベルよりもデザイナーに魅力的な特定の固定サイズと固定方向を保証します。ただし、それでも、左から右への言語と右から左への言語の違い(サイドバーはstart-alignedである必要があります)、およびアクセシビリティに必要な自由回転と自由スケーリングが考慮されていません(特にモバイル)。

3
MandisaW

通常、アイコンはExpert Users用に設計されたUIで頻繁に使用されます。

エキスパートユーザーは非常に異なるカテゴリーのユーザーであり、通常、ソフトウェアの使用法の学習に多大な労力を費やして喜んで提供されます。

エキスパートユーザー向けに設計されたアプリケーションは、豊富な機能を備えています。 Photoshop(下のスクリーンショットを参照)やMicrosoft Wordなどのコンテンツ作成UI。そのようなアプリケーションでは非常に多くのオプションが利用できるため、ラベルにすべてのものを提供することは非現実的です。

通常、アイコンは、機能/機能のグループを説明する慎重に作成された設計言語を形成します。ユーザーがアプリケーション機能アイコンのデザイン言語を学ぶ準備ができている場合、ユーザーは必要なすべてのアイコンでメニューバーを並べて表示できます。これにより、必要な機能を見つけるためにマルチレベルのメニューを参照する必要がなくなり、長期的には生産性を向上させることができます。

Photoshop example screenshot

1
Franchesca

「なぜ」はデザイナーがきれいな絵を好むからです。だから明らかにアイコンに惹かれます。また、特に小さな画面で、デザイナーにより多くのスペースを提供します。ほとんどの人はそれが素晴らしい解決策だと思っています。

ただし、トレンドがあるからといって、それが良いアイデアであるとは限りません。

ほとんどのデザイナーが無視するナビゲーションにすべてのアイコンを使用するという議論は次のとおりです。すべての人間が直感的に理解できる非常に少数のアイコンがあります(浴室の性別のアイコンと考えてください)。それ以外では、人々はアイコンの考えられるすべての意味を検討するために大量の認知エネルギーを費やして、それをアプリ内で最も可能性の高い意味と関連付けて配置する必要があります。はい、人々はアイコンの意味を時間の経過とともに学習し、一度習得すると、その後の使用のために対話は速くなりますが、作業が必要です。

人間の脳はこの学習プロセスを好まない。私たちは習慣の生き物ですが、私たちは習慣を形成することを嫌います。

「ツールチップ」は、スペースが限られている場合のこのコンテキスト/理解の問題に対処するために特別に作成されました(ブラウザーのツールバーを見てください)。

したがって、トレンドに従う前に、最初のユーザーがどのように感じるかを検討してください。彼らは非常に迅速に進行する方法を理解する必要がありますか?さらに悪いことに、「間違った」ことをすることでマイナスの結果が生じるのでしょうか?もしそうなら、インターフェースの単語は画像よりもはるかに多くのコンテキストを提供するので、テキスト+アイコンを使用するほうがよいでしょう。

1
Bryce Howitson