web-dev-qa-db-ja.com

UI要素間の接続を作成するための直感的なインターフェイスとは何ですか?

基本的にメモを作成して接続できるWebアプリをリリースしました http://www.noodl.in

ただし、多くのユーザーが接続の作成に問題を抱えています。彼らがどんな問題を抱えているのか正確にはわかりませんが、ほとんどの場合彼らは「できなかった」とだけ言っています。

現在、私のアプリは接続を作成する2つの方法をサポートしています。

  1. 境界線をクリックしてから、別のノートをクリックします
  2. 境界線をクリックして別のメモにドラッグします

接続を作成するより直感的な方法はありますか?それともチュートリアルでそれを提示できるでしょうか?

5
kristina

形状と接続のあるツールバーを使用します。より良いアイデアを得るためには、もっとリサーチをする必要があると思います。

Lucid Charts: https://www.lucidchart.com/

Cacoo: https://cacoo.com/

Gliffy: https://www.gliffy.com/

Diagram.ly: http://www.diagram.ly/

注:UIの使用に慣れていません。考え直してください。ちなみに私はノートを削除する方法が好きです:-)

1

私もあなたの答えを読むまで、音符間の関係を作る方法を理解していませんでした。

(特に)2番目のインタラクションオプション(ノートの境界線から別のノートへのドラッグ)の1つの問題は、ノートの右端に「水平方向にサイズ変更」動作がアタッチされていることです。つまり、私はあなたがその目的のために存在しているように見せているダイナミックな境界線を知覚します。そのスペースから線をドラッグできることを理解したとしても、しないノートのサイズを変更しないターゲット領域の幅も縮小します。最後に、サイズ変更動作は別のカーソルを使用するため、境界線とコンテンツの間でカーソルが変更されない場合は、隠れた動作はないと想定します。

これを修正するという点では、要素間の接続をドラッグできるようにすることを唯一の目的とするアンカーを実装します。これらのアンカーは、ノートがフォーカスされるか、接続がその近くにドラッグされるまで非表示にできます。 OmniGraffleはこれらの「磁石」を呼び出し、それらをそのように提示します(選択したノード-パブリッシュアーティクル-4つの磁石すべてが表示されますが、カーソルがEditing記事ノードに向かってドラッグされると、最も近い磁石が動的に表示されます)。

A screenshot from OmniGraffle 5 showings its "magnet" behaviour
画像 Getting Started with OmniGraffle 5

1
Kit Grose