web-dev-qa-db-ja.com

「閉じる」と「削除」の両方に「X」を使用すると混乱が生じる

ショッピングカートのデザインに取り組んでいます。

私は現在、「X」を使用して、インターフェースの「閉じる」と「削除」の両方を意味しています。以下のスクリーンショットに示すように。

これは不必要な混乱を引き起こしますか?

クイックリファレンスについては、名詞プロジェクトが close および remove を検索するを参照してください。

Shopping cart mock

30
charliesneath

「削除」という単語を象徴するものを探しているなら、「削除」という単語を使用しないのはなぜですか?

それは特に大きな言葉ではありません。そのUIには、それに収まる十分なスペースがあります。さらに、それが何を意味するかについてのあいまいさを取り除きます。

enter image description here

21
JonW

他のいくつかのオプション:

  • スタイルが異なるX。 Xは、どちらのアクションでも簡単に認識できる記号です。混乱は主に、両方に同じスタイルを使用していて、両方がインターフェースで同じアクションを実行するという期待を生み出しているという事実から生じていると思います。たとえば、削除アクションの比率が少し異なる赤いXがあったとしても、インターフェイスの理解に問題があるとは誰も思いません。
  • 小さなゴミ箱は、広く認識されているもう1つの削除記号です。
57
user31143

言葉を使うときは注意が必要です。 Wordを国際化すると、意図したよりも多くの文字を含む同等のWordになる可能性があります。グラフィックを使用する場合は、言語に依存せず、文字に依存しません(つまり、空間的には既知であることを意味します)が、文化やその他の要因に基づく考慮事項はまだあります。

子供のサイトでデジタルミュージックプレーヤーを表現したい場合、90年代のポータブルCDプレーヤーのように見える記号を使用すると、多くの子供がグラフィックを下線機能に関連付けません。

疑問がある場合は、既存のメンタルモデルを推進しているアプリケーションに目を向けてください...


Amazonを検討(Wordの削除を使用)

enter image description here


ウォルマートを検討(Wordの削除を使用)

enter image description here


AmazonやWalmartと同様のデザインを実装した場合、Amazon/Walmartカートを使いこなせる人なら誰でも、電子カートの動作に関する既存のメンタルモデルに基づいてカートを使用できると想定しても安全です。

9
ѺȐeallү

丸(-)で囲まれたマイナス記号の使用をお勧めします。テキストの長さの問題を軽減すると同時に、「削除」機能を暗示する必要があります。

5
RomC

これは簡単にテストできます。 +追加、-削除、xに同意します。ツールチップを使用して、シンボルラベルとWordラベルを組み合わせることができます。両方をモックアップして、約5人のユーザーの前に置き、フィードバックをもらいます。

あるいは、ユーザーがQtyを0に設定できるようにすることもできます。サーバーへのトリップが行われるタイミングと、ユーザーが更新を表示するタイミングによって異なります。

全体として、アプリの規則/スタイルに従ってください。ユーザーはシステムと対話する方法を学びます。一貫性は非常に役立ちます。

2
Ken

削除行のXまたはエラー行のXで同じ問題が発生しました。

しかし今では、アプリ、タブレット、スマートフォン、フラットアイコンで、削除アクションに単純なゴミ箱を使用する可能性があります。

0
pierre lebailly

ショッピングカートのコンテキストでcloseおよびremoveの意味について考えると、カートアイテムのbehalvは次のように考えることができます。

  • アイテムを削除(これは通常のようです)
  • アイテムを閉じる

それらの両方は、アイテムがカートにもうないという事実につながっています。したがって、ショッピングカートアイテムを閉じるという意味は、ショッピングカートからアイテムを削除することとほぼ同じです。

したがって、両方に「X」を使用して、ショッピングカートを閉じ、ショッピングカートアイテムを閉じることは、まったく問題ありません。

0
abto

私は...するだろう

  1. 既に述べたように、単語は単一の文字や画像よりも誤解される可能性が低いため、テキストリンクとして"Remove item"を使用します。
  2. アイテム画像はより大きな視覚的領域の結果として最初のフォーカスポイントであるため、アイテム画像の削除アイテムリンクすぐ右にを配置します。 (いいえ、UX StackExchangeのゲートキーパー:自明であるべきことを補強する調査へのリンクはありません)現在、アイテムと価格/数量/削除情報の間にスペースが多すぎます。 itemとremove-itemリンクが空間的にペアになっている場合、レイアウトはより直感的になります。それは、照明スイッチが部屋の25フィート離れた場所にあるようなものです-なぜそれをするのですか?
  3. 最後に、数量値にユーザーに「0」を入力させますでアイテムを削除します。プログラミングは簡単で、直感的に使用できます。おそらく、アイテムの削除リンクをクリックするよりもさらに簡単です。 Amazonにはこの機能があると思います。いずれにせよ、一般的なサイズとモデル(つまり、ポンプに対するガスキャップの位置)の車両に十分な長さのポンプホースを備えたガソリンスタンドのように、なぜより多くの人々が使用しないのか疑問に思うのは、対応するフェイルセーフです。 )。
0
Tim Huynh

私にとっては、特に「削除」アイコンが上と右の境界線と同じ間隔になっているため、非常に混乱しているように見えます。おそらく、それをコンボボックスに少し近づけて、少し縮小して、別の色(たとえば、赤)にすることは役立つでしょう。

0
Serj.by

アイコンの使い方は素晴らしいです。アイコンの意味がわかる限り

xでマークしても問題ありませんが、

アイテムごとにxをアイテムに「属している」ように見せます。現在のところ、それは一種の宇宙空間での座り込みです。 xを含めて、アイテム行全体を囲むボックスを描画して、それらが一緒に表示されることを示すことができます。

対応する-なしで+を使用しないでください:

  • 言及したコメントのように、-は「このアイテムの数量を1つ減らす」と簡単に解釈できるため、アイデアを実行してください。数量ごとに上下ボタンを配置し、数量がゼロの場合(重要)に、これはこのアイテムをゼロで注文することを意味する明確なフィードバックを提供します

  • 一方、「マークされた数量に関係なく、このラインアイテム全体を削除する」と解釈できます。その場合、* +を提供する必要がありますが、+は「別のラインアイテムを追加する」ことを示す必要があります。

  • これらの非常に異なる解釈のため、このペアから離れて、代わりに言葉を支持することをお勧めします。

私の経験則では、アイコンを提供しますonlyそれらが大多数のユーザーに明確さを追加する場合でさえ、それに頼らないonlyアイコン上。アイコンのシンボリズムが失敗した場合に、マウスオーバーテキストまたは字幕などの代替機能を提供します。

0
hoosierEE

Xを削除するのではなく、単にclose xを大きくすることをお勧めします。もう1つのことは、マウスオーバー時にxの上部に「閉じる」を追加し、カートアイテムのマウスオーバー時に「削除」を使用して同じことを行うことです。セクションを定義するための行がすでにあり、これにより、現在の配置で発生する可能性のある混乱が軽減されます。

0
Zeeshan Rasool

2つの異なるアクションで同じシンボルを維持することは、疑わしいUIプラクティスです。ユーザーが2つの異なる「X」記号を関連として関連付けるため、それらに異なる視覚的処理を与えると、問題は部分的にしか解決されません(既存の画像と比較してオブジェクトを認識する傾向があるため)。推奨事項として、カートからの商品の削除にはマイナス記号(-)を使用することをお勧めします。それは私たちの初等教育から私たちに直接教えられたので、それはいくつかのエンティティを「削除する」場合に最も簡単に認識できます。また、項目を追加するための(+)記号と削除するための(-)記号を使用して、定数設計言語を設定できます。

0
Mayank sagar