垂直ツールバーのアニメーション？
私たちは、クライアントが1日10分から5時間の間のどこからでも使用できるWebマッピングアプリケーション（Flex）を持っています。
デスクトップアプリケーション（Photoshopに似ていると思います）をシミュレートしており、ユーザーは1つの水平ツールバーからさまざまなツールを選択します。
ユーザビリティテストは、多数のツールが、必要なツールの選択を困難にする可能性があることを示しています。したがって、よりインテリジェントなツールバーの動作について議論し、モックアップしています。
- ツールセットを選択できる1つの縦型「ツールバー」。
- これにより、パラレルサイドバーにそのツールセット内のツールが読み込まれます。
- これらのツールは、実際に使用頻度が最も高いツールに基づいて優先順位が付けられています（これらのツールが一番上にあります）。
私が苦労しているのは、どのツールセットが強調表示されているかを示すことです。
上記のモックアップから、ツールバーからツールセットを選択すると、次のようになります。
- それは上（円の中で）にフェードアウトしてフェードインします
- これにより、ツールバーに隙間ができるため、隙間の下のアイコンが上に移動します。
微妙で迅速である必要があるため、アニメーションはトリッキーです。
このモックアップの前は、選択したアイコンを強調表示して、Wordpressなどのように、テキストの横にアイコンがない状態で上部のテキストを変更することだけを見ていました。
しかし、うまくいけば、以前のモックアップを使った微妙なアニメーションによって、アプリケーションのUXが向上すると思いますか？
Q。私のシナリオでは、アニメーションを使用することがツールバーの良い選択でしょうか？模倣するのに適した例であるWeb上の同様の例を見た人はいますか？
注：アイコンセットにはあまり注意を払わないでください。モックアップの背景が明るいものもありますが、これは混乱を招きますが、無視してください。
アコーディオンは、ユーザーがクリックするかホバーするときに矢印で有効になっていると想定して機能するので、あまり解像度を必要としませんか？しかし、あなたが懸念を持っているように、私は2つのアイコンセットを持っています.1つは選択された状態用で、もう1つはほとんど無効になっているように見え、選択されたときにアイコンが順序を移動しない固定垂直バーにそれらを積み重ねます。ユーザーが上部にある「保存」（モックアップではクラウドで表されている）を希望する場合は、注文を上書きする構成設定を提供することに問題はないと思います。
アイコンをクリックする後続のアクションは、使用可能なアクションがオンになっているレイヤーを生成します。ブラウザでPDFを表示しているときに表示されるAdobe Acrobatツールバーに似ています。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
選択したアイコンを一番上に移動する場合は、はい、アニメーションを使用して変更を示すことをお勧めします。
ただし、アイコンを移動することは非常に良い考えだとは思いません。つまり、ツールバーのアイコンの位置が変化し続け、ツールバーの記憶力が低下することを意味します。マウスカーソルをツールバーに移動し、アイコンの位置をスキャンする必要があります。アイコンの一般的な領域を覚えるだけでなく、直感性が低下します。
Wordpressは、ナビゲーションが静的で、頻繁に使用されるコントロールが配置されている場所を覚えておくことができるため、優れたアプローチです。各ツールに関連付けられたサブアイテムがリストの上部に表示される可能性があることを除けば、彼らのアプローチにはマイナス面はありません。
これはテストする必要があるものです。ユーザーが決定したアニメーションを使用してツールバーを使用できるようにする単純なモックアップをHTMLで作成します（jQueryなどを使用して、あまり時間をかけずに済むようにします）。次に、廊下で誰かをつかんで、アプリを操作し、彼らが何をしているのか観察するように依頼します。
ラベルを付けてスペースを犠牲にせずにこれを行う1つの方法は、アコーディオンパターンを使用することです。私が質問に答えたとき、私はそのことを考えていませんでしたが、今やそれはあなたの問題に対する特に適切な解決策として私を襲います
Rahulのコメントに応えて、私はいくつかのモックアップをまとめて自分のQに回答し、アコーディオンが良い代替案であるかどうかを確認しました。
何かが足りない場合を除き、元のモックアップと比較するとスペースが犠牲になるため、これを実行可能な回答として除外するわけではありませんが、現在のデザインを信じていますが、適切な回答ではありません。
クライアントの画面解像度が平均以下になる可能性があるため、サイドバーのスペースを最大限に活用する必要があります。編集や選択などのツールセットの実際のサイドバーには多くの項目が含まれる可能性があります。