web-dev-qa-db-ja.com

X座標に応じたボタンの反応

いくつかの退屈なテーブル（いくつかの日付、いくつかの数字、いくつかのテキスト。画像はありません）を、退屈な詳細をたくさん表示する必要があります。銀行の明細書を想像してみてください。

モバイルでは、エントリごとに複数の行を使用する必要があります。幸い、これは、エントリがボタンとして機能するのに十分な大きさであることを意味します。

残念ながら、次のようなアクションでは、エントリごとに2つまたは3つのボタンが必要です。

  • さらに詳細を表示する（新しいページにつながる）
  • 既読にする
  • その他すべてのメニュー

明らかに、それらを追加すると多くのスペースが必要になります（現在、ユーザーは一度に約8つのエントリを表示できます。これは問題ないかもしれません。ボタンを追加すると、おそらく半分になります）。

そのため、触れた場所に応じて、エントリの反応を変えることを考えています。たとえば、

  • 左から3番目⇒既読にする
  • 中3分の⇒ショーメニュー
  • 右から3番目⇒詳細を表示

明らかに、ユーザーは初めて使用するときに何らかの助けが必要です。

  • これは良いアイデアですか？
  • すでに同じようなことをしている有名なアプリはありますか？
  • この機能を視覚的に示す簡単でコンパクトな方法はありますか？

説明

エントリが次のようになっていると想像してください

          SOMETHING HERE                            22.30         
Lorem ipsum dolor sit amet, consectetur adipiscing  02.12.2019    
elit, sed do eiusmod tempor incididunt ut labore et               
dolore magna aliqua. Mollis aliquam ut porttitor    WOW!

そしてその上に置かれた3つの透明なボタン

LLLLLLLLLLLLLLLLLLLLLMMMMMMMMMMMMMMMMMMMMMRRRRRRRRRRRRRRRRRRRRR    
LLLLLLLLLLLLLLLLLLLLLMMMMMMMMMMMMMMMMMMMMMRRRRRRRRRRRRRRRRRRRRR    
LLLLLLLLLLLLLLLLLLLLLMMMMMMMMMMMMMMMMMMMMMRRRRRRRRRRRRRRRRRRRRR    
LLLLLLLLLLLLLLLLLLLLLMMMMMMMMMMMMMMMMMMMMMRRRRRRRRRRRRRRRRRRRRR
buttonsmobile-applicationtouch-screen
2
maaartinus

これは機能する可能性がありますが、追加のアフォーダンスが必要になる可能性があります。

デフォルトでは、これには検出可能性はありません。ユーザーは3つの異なるアクションが可能であることを知らず、混乱して希望の結果を一貫してトリガーできない場合があります。

とは言っても、アイコンやラベルを使用して利用可能なアクションを示した場合、クリック可能な領域を見た目よりも大きくして操作を容易にすることで害はありません（通常、目に見える利点があります）。

幸いなことに、あなたが識別した3つのアクションのうち2つは、通常、画面の左側または右側にある一般的な用途にマッピングされています。詳細は通常、右側の矢印で表され、メニューは通常、左側に「ハンバーガー」アイコンとして表示されます。中央部分の既読のマークが残ります。 （ユーザーが本当にすべてのアイテムに手動でマークを付ける必要があるかどうか質問しますが、それは別の質問のトピックです。）

たとえば、以下のモックアップでは、ユーザーが実行できる3つの可能なアクションがあることを示すアフォーダンスがあり、色付きの領域はインタラクティブなホットスポットの大きさを表しています。これらの色はユーザーには表示されず、アクションのラベルをタップする必要があると思われるかもしれませんが、スペースが増えたことで、ずさんなタップは引き続き成功します。これにより、優れた発見可能性と同時に、高速で効率的な対話が可能になります。

Mockup of card showing a colored overlay where three interactions could occur.

2
Nathan Rabe

Gmailと同じように機能します。左右にスワイプしてアクションを見つけます。

enter image description here

4
Cristian Negraia

Nathan Rabeの答えは、説明なしでは機能しないため、アイデアを改善したものです。

しかし、私はあなたに別の方法をお勧めします（以前にdiggリーダーで見た-残念ながら中止された）

スワイプでアクションを明らかにする代わりに（クリスチャンネグレイアの答え）、アクションを直接トリガーできます。

まあ言ってみれば：

  • 左にスワイプ->既読にする
  • 右にスワイプ->メニューを表示

そして、不足しているアクションが詳細を表示するために、エントリ全体でタップを使用できます。

もちろんこの場合、スワイプ機能への参照も必要です。これは、左と右のアイコンで行うことができます。

大まかなスケッチ：

visualization of my suggestion

2
chrisbergr