web-dev-qa-db-ja.com

AppleやGoogleの3本の横棒のアイコンの意味はより一般的ですか?

AppleとGoogleは、3つの水平バーのアイコンの意味を明確にするために、真正面から向き合っています。 enter image description here

IOSでは、このアイコンは「ドラッグしてリストの項目を並べ替える」を意味し、Google Chromeのバージョンは「クリックしてメニューを表示する」を意味します。

これら2つの意味の1つは、モバイル、Web、またはデスクトップソフトウェアですでに広く確立されていますか?また、このアイコンを使用している人気のあるアプリ(どのプラットフォームでも)と、それらのアプリでの意味は?

「リストの再注文」機能を備えたアプリを作成しているので(もちろん、標準のiOSアイコンを使用して!) 。これにより、どちらのバリアントがどれほど人気が​​あるかを知りました。アイコンがiOS標準である場合でも、あまり使用されておらず、他のバリアントが非常に人気がある場合、準備したいユーザー教育の課題がいくつかあります。

こちらが最新のGoogle Chromeの写真です。

enter image description here

IOSから 設計ガイドライン

enter image description here

サンプルiOSアプリから:

enter image description here

38
Justin Grant

「リスト/メニューの表示」機能を示すために3つのバーアイコンが広く使用されています-Chromeだけではありません。以下はDay OneとPlaceMeのスクリーンショットです(私はいくつかのアプリを開くだけでこの使用例を見つけてください)。

Day One ScreenshotPlaceMe Screenshot

アイコンはApple(後から見て))には不適切な選択だったと思います-明確なインタラクションキューを提供せず、再注文可能な状態インジケーターです。しかし、Appleは、このすべてのアプリの狂気が発生する前にこの選択をしました。

IOSでは、メニュー/リストインジケーターとしてのアイコンは1つのアイコンであり、「並べ替え可能な状態」は各リストアイテムの横にアイコンがあるため、混乱なく、両方の用途が共存できる可能性があります。

より良い選択は、「ドラッグ可能」アイコンに似たものに移動して再注文可能性を示し、3つのバーを「リスト/メニューの表示」機能の手がかりにして、牽引力を高めることです。

icon sketch

21
Luke Charde

ドラッグアンドドロップでは、ほとんどの場合、アフォーダンスが悪い。

Gmailの現在のモデルは次のとおりです。

gmail's new dd affordance

彼らが本当にそれについて真剣であるかどうかはわかりませんが、特に。ホバーされた要素にのみ表示されるため。

以前のものはこれでした:

gmail's old dd affordance

もっと引きずっぽいが、それでも悪い。

ドラッグアンドドロップコントロールで適切なアフォーダンスに到達するには、明示的なアクション(上下の矢印、かなり明示的)であるか、「でこぼこ」(タッチスクリーンの場合)である必要があると思います:Appleバージョンは、何かをつかむためのものではなく、一種の空気抜き穴のように見えます。

ドラッグアンドドロップアフォーダンスは通常、ハードウェアスイッチとバッテリーカバーのふたから来ます。これは、これら3つの「線」が意味することです(それらは「receded」タイプ)。しかし、(Chromeと比較して3行であるので)3行欠落した場合でも、ユーザーが理解することは期待できません...

以下は、「実生活」の例です。

A Kodak battery lid

電池のふたの突き出し( ここから

A fuji (dotted) battery lid

点線のバッテリー蓋(- ここから

A Kodak receding battery lid

後退するバッテリー蓋(- ここから

ネイティブから抜け出すことを恐れない場合は、次の相互作用を作成することもできます。

iOS affordance mockup

矢印があるため、ユーザーはそれが何のためにあるのかをすぐに理解し(私はそう思います。これは単なるモックアップであり、まだユーザーテストはありません)、インターフェイスの探索の一部としてタップしようとします。あなたがそれを十分にうまくやれば、彼らは変位に気づき(おそらくタッチスタートから150-250ミリ秒の間に起こる場合)、それはタップの動きであることを理解します。

これは単なるヒントです。ノーマンの古典的な「The Design Of Everyday Things」はこれに役立つかもしれません。

37
Aadaam

長年にわたり、状況は多少変化しました。

Chromeは、マテリアルデザインHIGに準拠するために、メニューアイコンを縦に3つドットに変更しました。

enter image description here

Appleは、ドラッグアンドドロップアイコンをハンバーガーと視覚的に区別できるように変更しました。

enter image description here

ハンバーガーアイコンはまだ一貫して使用されていませんが(たとえば、FirefoxとGnomeはこれを汎用メニューアイコンとして使用しています)、MicrosoftとGoogleの両方がナビゲーションメニューに使用しています。 (Appleはこのアイコンをどこでも使用していないようです。)

Material および Fluent HIGの両方で、ナビゲーションドロワーの推奨で使用されているアイコンを確認できます。

2
Tin Man

三線のアイコンが何かを引く場所として確立されていることに同意します。 (特に、iOS画面の上部から下にドラッグして通知を表示した場合、または複数の通知が待機している場合のロック画面、またはロック画面のカメラアイコンに表示される、線の付いたタブを参照してください。)

そのアイコンをバッテリードア/スライド式のプラスチックウィジェットの実例に合わせるのは理にかなっています。 Google Chromeアイコンはその理由で私を混乱させます、そして私は常に「ギア」または同様の「設定」関連アイコンがそこでうまく機能するだろうと常に思っていました。

2
Matt Boggie