web-dev-qa-db-ja.com

UIモードの切り替え、表示/非表示

現在、エンタープライズWebアプリに取り組んでいます。請求書の入力画面で、UIの問題が発生しました。

基本的に、現在の請求書入力画面は次のようなものです。

Screenshot

デフォルトのモード/状態アイテム入力モード/状態([アイテム入力の切り替え]ボタンが押されたとき)

現在の項目の入力方法がやや直感的でないという現在の問題。

インライン編集は検討されますが、モジュールのフローティングのオートコンプリートスタイルは不格好であるため、常に在庫検索および選択モジュールが存在する必要があるため拒否されます。

現在のボタンソリューション以外に、より直感的な画面/モードを切り替える方法はありますか?


4桁を表示せずに価格を表示しながら、正確性を維持するための最善の方法など、まだ取り組んでいることがまだあります。 (いくつかのアドバイスはいいでしょう)

2
vener

それが直感的でないとどうして分かりますか?ユーザーが正確にどのような行動をとっていて、何を言っているのですか?

ボタンが見つからない場合は、ボタンのラベルが問題だと思います。ユーザーが請求書アイテムを追加する必要があるとき、「何かを切り替える必要がある」とは考えていません。彼らは「製品を追加または編集する必要がある」と考えています。代わりに「製品入力」を試してください。ユーザーが他の「トグル」機能も見つけられない場合は、おそらくそれが問題です。

一般に、テキストラベルではなく、グラフィックデザインでコントロールアクションを示す必要があります。たとえば、ボタンの場合、ラベルの上端に上向き矢印または+記号を追加するか、Java-Swingスタイルの閉じたタップを下向き矢印、-記号に置き換えるか、入力ペインが開いているときにタップを開きます。または、ボタンを切り替えボタンにします。この場合、ユーザーがUIの動作を予測することはそれほど重要ではないかもしれません。ユーザーがボタンをクリックすると、その動作を確認し、次に何をすべきかを理解します。

別の考えられる問題は、編集とアイテムの追加を同じボタンに組み合わせているように見えることです。これには、特定のロジックがあります。ただし、「入力」の概念は、ユーザーが物事をどう考えているかよりも抽象レベルの高いものかもしれません。むしろ、彼らは追加と編集を別個のコントロールを持つべき別個の機能と考えるかもしれません。したがって、別々の[追加]ボタンと[編集]ボタン(どちらも同じペインを切り替える)を用意し、追加の混乱を避ける必要があります。ラベルについては、「商品の編集」と「商品の追加」または「商品の挿入」のどちらかを試します。

また、編集している可能性のあるユーザーに表示されるようにペインをデフォルト設定することを検討することもできます。

インプレース編集を行う方法を見つけることができないことを残念に思う。

3