web-dev-qa-db-ja.com

「画像の削除」ボタンは左上または右上にあるべきですか?

アプリケーションに関連するステータスの更新を許可するアプリケーションに取り組んでいます。 Facebookのステータスを投稿するのと非常に似ているので、私は彼らの投稿画面と同様のレイアウトを使用しています。

画像を追加/削除できます。入れようとしていた x 画像の左上にある画像ボタンを削除するのは、私と私のチームにとって直観的に見えるためですが、Facebookでは右上にあるxボタンを使用しています。

どちらを使用すればよいですか、またその理由は何ですか。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

5
Josue Espinosa

右上

ほとんどのユーザーは、画像と関連テキストを全体として認識し、左上から処理し、必要に応じて下に移動します。

画像とテキスト(英語/左から右への言語)の組み合わせの場合、視覚追跡は視線追跡調査から次のようになります。

enter image description here

Facebookの画像+テキストフィードのフローは次のようになります。

enter image description here

ほとんどのユーザーは削除するのではなく読むので、画像とテキストを読みたいだけのほとんどのユーザーの視覚的な流れを妨げるだけなので、左上に削除ボタンを配置することは邪魔になります。

置くことによって x 右上または右下のボタンをクリックすると、主要な視覚的な流れの邪魔にならないようにきれいに配置されますが、削除ボタンを見つけて押す必要があるユーザーがアクセスできる位置にあります。

このようにして、大多数のユーザーに対してより良いUXフローを作成しています。

8
tohster

右上。ほとんどの人は右利き(約90%の人が右利き)であり、フィッツの法則の公式を使用するので、これが最良の選択肢です。

スコット

http://en.wikipedia.org/wiki/Handedness

http://en.wikipedia.org/wiki/Fitts%27s_law

2
Scott Williams

まず、「ユーザーに写真を簡単に削除してほしいですか?」と自問することをお勧めします。

ある種の損失を引き起こすアクションは、それほど簡単に到達するべきではありません。直感的である必要がありますが、簡単ではありません。写真の削除もそのひとつです。また、サウンドプロファイルを作成するために、ユーザーに写真をできるだけ長く保持してもらいたいと思います。ある時点で誰かが写真を削除したくなったのに、後悔したいと思うかもしれません。私を信じて、このケースはより頻繁に発生します。この種のアクションを完了するのが少し難しいと、ユーザーに有利に働きます。

したがって、まず第一に、アクセスしやすい「写真の削除」アクションを行わないでください。あなたができることの一つは、画像を選択する何らかの方法を作ることです。画像を選択すると、画面が編集モードになり、選択した写真を削除するためのゴミ箱ボタンがナビゲーションバーに表示されます。

Facebookのような巨大なアプリを盲目的にフォローしないでください。彼らには巨大で忠実なユーザーベースがあります。ユーザーが気が散るように他のものが存在する場合、そのようなアプリでユーザーがそのような何かに気づくのは非常にまれであり、これにより、Facebookのエンジニアは自分が行っていることが正しいと考えるかもしれません。

それでもxボタンを使いたい場合は、これをチェックしてください http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices .php アクションアイテムを配置する場所を理解します。

2
Krishna

混乱していると思います。 [〜#〜] x [〜#〜]の意味(ほとんどすべてのサイトまたはアプリと同様にFacebookでも)[〜#〜] close [〜#〜]deleteではなくウィンドウ。削除アクションは重要であり、ユーザーが誤ってクリックする可能性のある場所に配置するべきではありません。ユーザーが実際にクリックすることを考えて故意にクリックする場合は、はるかに少ない[〜#〜] close [〜#〜] =ウィンドウ。

最初に何をしたいのか明確にすべきだと思います。ウィンドウを閉じようとしている場合は、はい、右上が最適な場所です。ほとんどの人は右利きなので、ウィンドウを越えて閉じるアクションを実行する必要がないためです(これはモバイルで特に顕著です:左上の閉じるボタンを適用してから、画面を手で覆ってそのアクションを実行します)

ただし、投稿が言うように[〜#〜] delete [〜#〜]にする場合は、[〜#〜] none [〜#〜]のオプションをお勧めします。代わりに、適切な削除アイコンおよび/またはを含むアクションバーを画像の上に置くことができます。テキストを削除するか、写真の下または追加コンテンツ(FBと同じように写真のタイトル、キャプション、説明など)の一部として「アクション」ブロックを削除します。そして、そのような重要なアクションを実行すると、確認ダイアログが必要になります。

つまり、それがCLOSEの場合は、トースターが言ったように、右上の2番目のモックアップを使用する必要があります。削除したい場合は、ここに私が言及した両方のオプションを示す簡単なモックアップがあります(明らかに、同時に両方ではなく1つを使用する必要があります)

enter image description here

[〜#〜] edit [〜#〜]質問からは理解できませんでした。これは進行中のアクション(画像の追加)に適用されるものでしたが、すでに実行されたアクションです。存在しないものは削除できません。あなたがやっていることはアクションのキャンセルですが、これは異なりますが、私の推論はまだ適用されます。アイコンキャンセルアクションを明確に確認できるFBアプリの画像を表示し、画像(およびFBが既にアップロードされたコンテンツを処理している)と比較します。実際のアイコン[〜#〜] closes [〜#〜]ウィンドウ。概念的には、これらは常に[キャンセル]ボタンです。最初のケースでは、画像をアップロードするアクションをキャンセルし、2番目のケースでは、以前にfiredされた要素の視覚化をキャンセルしますon_clickイベント

enter image description here

2
Devin

右上これは、ユーザーが慣れている一般的なユーザーインターフェイスのデザインパターンです。別のことをすることは勧められません。

0
Calvin