編集ボタンまたはタップして編集

Question

レスポンシブWebアプリケーションのリストビューでインプレイス編集機能を示す最良の方法は何ですか？これはモバイル向けに設計されたブラウザアプリケーション（ネイティブモバイルアプリではない）であるため、クロスプラットフォームの互換性に留意する必要があります。

現在のページは次のようになります（ヘッダーとナビゲーションは表示されていません）。

enter image description here

従業員のリストを表示する以外に、この画面から実行する主要なアクションは、電話とテキストメッセージです。編集アクションは主要なアクションではないので、画面の不動産の量を考えると、鉛筆を表示するのは煩雑すぎると思います。

残念ながら、モバイルにはホバーオプションはありません。以下は実際の例です。

Androidでは、連絡先を編集するには、まず連絡先ビューに移動してから、アクションバーの編集ボタンをタップする必要があります。多くの連絡先の詳細があるので、これは理にかなっています。
Androidの目覚まし時計アプリケーションの場合、アラームを長押しすると、[アラームの編集]と[アラームの削除]を含むモーダルメニューが表示されます。 [アラームの編集]ボタンをクリックすると、新しい画面に移動します。フィールドが多数あるため、ここでも論理的です。削除するすべてのアラームの横にチェックボックスを表示する一括削除オプションもあります。
IOSでは、編集は新しい画面に移動するアイテムをタップすることで行われると思いますが、削除は左にスワイプしてマイナスアイコンをタップするか、編集画面で赤い削除ボタンをタップして行います（私はしません）現時点では、チェックするのに便利なiOSデバイスがありません）

このようなフィールド（姓、名、タイトル、電話、および電話にテキストメッセージがあるかどうかを示すチェックボックス）はほとんどないため、新しいビューに移行したり、モーダルを開いたりするのはやりすぎです。編集機能は、アイテム（行）を[更新]、[削除]、および[キャンセル]ボタンのあるフォームに展開します。私はいくつかのオプションについて考えました：

上記のようにリストアイテムをタップしてアイテムを展開します。このオプションのアフォーダンスについてはよくわかりません。
編集ボタンを保持する
[呼び出し]ボタンの右側にある縦長の楕円を使用して、[編集]と[削除]の2つのオプションがあるフライアウトメニューを開きます。

それで皆さんはどう思いますか？

Roger Attrill · Accepted Answer

私は行きます：

オプション3：[編集]と[削除]の2つのオプションがあるフライアウトメニューを開く[通話]ボタンの右側にある縦長の楕円を使用します。

これは主に、このオプションが誤って削除したり、編集モードに意図せずに入力されたりする可能性が最も低いためです。また、これらはあまり一般的ではないセカンダリアクションですが、検出する必要があります。

ただし、呼び出しボタンと縦の省略記号の間にすき間を空けて、最も一般的な主要なアクションから遠ざけるようにします。これも、誤タップを避けるためです。

Mike DeJonge · Answer

最適なビュー/編集パラダイムを特定する際に考慮に入れなければならない3つの大きなルールがあると思います。

情報を読みやすくしたい（編集が煩雑にならない概要/印刷ビュー）
重要なデータの不要な間違いを防ぎたい
情報をすばやく簡単に編集したい

View/EditのUXソリューションは、上記の3つのうちどれが最優先であるかによって異なる場合があります。これは、簡単な編集と混乱を防ぐことのバランスが常に取れているためです。一部のユーザーは、ユーザーが間違いを犯さないようにデータを編集することを困難にする方がよいと述べています。ただし、最初にデータを編集する権限がユーザーに与えられている場合は、そのユーザーがそのデータの変更を委ねられるインテリジェンスと専門知識を持っていると想定する必要があります。解決。

個人的には、ユーザーが入力にカーソルを合わせるまで情報が「表示」状態で表示される手法が気に入っています。次に、入力境界ボックスが表示され、情報が編集可能であることをユーザーに示します。クリックすると、カーソルが入力内に置かれ、ユーザーがデータを変更または入力できるようになります。最後に、ユーザーがフォーカスを終了してページを離れると、確認メッセージが表示され、ユーザーに加えられた変更が示され、変更を確認または削除できます。

これにより、3つの大きなルールはすべて解決されますが、いずれも犠牲になることはありません。データは簡単に編集でき（onfocus/onclick）、不当な変更は防止されます（確認メッセージ）。

以下のフィードバックごとに編集してください...はい、これはウェブのみのソリューションであり、モバイルでは機能しません。

Pierre · Answer

クリックするとすぐに編集モードになる単純な "Employees-tap to edit"ヘッダーとテーブルアイテムはどうですか？

その理由は次のとおりです。

これは明示的です
短くなり、インターフェースが過密になることはありません。
UIの傾向により、表示されるほとんどの要素に何らかのインタラクティブ機能が備わっているため、ユーザーがテーブルアイテムをクリックしようとするか、少なくとも快適にクリックすると、即座に編集モードに移行することがわかります。