web-dev-qa-db-ja.com

パネルのサイズ変更のアフォーダンス

サイズ変更機能を初期化する標準的な方法は、オペレーティングシステムの独自のマウスポインター、サイズ変更する方向（水平、垂直、または斜め）の両方向矢印です。これは、マウスをEdgeの上に置くと発生します。

私のアプリケーションであるgoogle chrome拡張機能は、サイドバーとして特定のWebページに挿入される右利き用パネルで構成されています。ユーザーがそのエッジにカーソルを合わせると、パネルのハンドルが表示されます。このハンドルには、パネルを所定の位置にロックするためのアイコンがあり、ハンドルをクリックするとパネルが非表示/表示されます。

したがって、エッジは2つを分離するため、エッジが唯一であり、したがって、Webコンテンツと私のアプリ（パネル）の間の必要なパスです。したがって、ユーザーがこのEdgeに複数回ホバーする場合、ハンドルを非表示にして、ホバーにのみ表示するのは適切なインタラクションデザインですか？ほとんどの場合、不要な要素を非表示にしますが、アフォーダンスも非表示にします静的な状況で。

パネルのサイズ変更に関して、ハンドル全体でドラッグ時にサイズ変更を許可する必要がありますかまたはハンドル内のアイコンまたは視覚領域に制限する必要がありますか？この状況でどの視覚的キューが最適に機能しますか？

  • これらの視覚的な手がかりはホバー時に点灯しますか？

  • これらの「手がかり」を取得すると、これらの視覚的な手がかりの状態が変化しますか？

  • また、サイズ変更のために標準の両方向矢印カーソルの代わりにハンドカーソル（「グラブ」用）を使用するのは良い相互作用設計ですか？

interaction-designaffordance
7
Vic Goldfeld

説明を正しく理解できた場合は、通常の垂直分割バーを使用して、アプリであるサイドバーをWebページから分離する必要があります。

この分割バーすべきホバー時だけでなく、常に表示されます。また、一部のアイコンに限らず、スプリットバー全体が移動可能である必要があります。

notハンドカーソルを使用する必要がありますが、標準の両方向矢印カーソルを使用してください。

ユーザーは、このようなパネルのサイズ変更の概念に慣れていると思います（少なくとも、サイズを変更したいすべてのユーザー）。ただし、垂直分割バーがない場合、サイドバーの幅は固定されていて調整できないと考えられます。

enter image description here

8
Jørn E. Angeltveit

アフォーダンスを探している場合は、ユーザーが操作を開始する前にユーザーに何かを表示する必要があります。境界線にカーソルを合わせるとカーソルが両方向矢印に変わるだけの場合、これがオプションであることを知らないntil実際に境界線にカーソルを合わせる。

すべての展開可能なパネルのウィンドウに何かを表示して、この方法で操作できることを示す必要があります。

同様のことがさまざまなアプリケーションで行われています。ここではいくつかの例をいくつか紹介しました。

enter image description here

5
JonW

このような状況で信頼できるコンテキストはたくさんあります。私の見解では、ベストプラクティスとして常に行うべきことと、視聴者の経験から信頼できることの間には、ゆらぎの余地があります。

人々はこれを拡張機能としてインストールしていて、それをブラウザーアプリケーションの一部であるかのように見栄えをよくしたいので、インターフェイスにグラブ/移動アイコンを表示しないことは、おそらく望ましい目標です。私は、仮定の下でそれが妥当な幅を持ち（ウィンドウを引き継がない）、視覚的な補強としてカーソルの変更でサイズ変更可能になるとだけ言います。

小刻みに部屋を広げる別の角度は、グラブ/移動アイコンを表示しないことがいかに問題であるかを理解することです。ほとんどの視聴者の画面が広く、ウェブサイトを閲覧する経験が少ないとは思えない場合、ツールを表示しないことはそれほど悲しみの原因にはなりません。虚栄心の目的でそれを変更したい人は、彼らが利用されているように感じることなく、少し一生懸命働くことができます。

Evernoteには、同様の問題に対する適切な解決策があります。

enter image description here

それは、左の列を含む灰色の線です。カーソルが列の右側の10ピクセルの領域に移動すると、明るい青色のボックスが表示され、カーソルが中央にバーのある左/右矢印に変わります（そのアイコンの名前がわかりません）。

あなたが同様のことをした場合、私はいくつかのことを心配します：

  • 列のサイズを変更するボックスをyour側に配置します。他のサイトとの干渉をできるだけ少なくしようと思います。
  • Evernoteはこれを行いませんが、ロールオーバー時に表示されるボックス内にドラッグ/移動アイコンを置くとさらに明確になる場合があります。
  • 拡張機能がインストールされたレスポンシブ/アダプティブWebサイトをテストします。ウィンドウに合うように素敵なWebサイトを作成するのに多くの時間を費やし、誰かの拡張機能が私のデザインに重なっていた場合、私は非常に腹を立てます。

私はあなたがすでにその最後の部分を知っていると思います。確認したいだけです。 :)

1
Dan Ritz