Webインタフェース

原則 †

• 直接的なインタフェースを作ろう ... そこに出力のある限り、入力を可能にせよ
• 軽快さを心掛けよう
• 1ページで完結させよう
• インビテーションを仕掛けよう
• トランジションを利用しよう
• すばやく反応しよう

直接的なインタフェース †

ドラッグ＆ドロップ †

• 気になる瞬間マトリクス

軽快さを心掛けよう †

コンテンツ連動型ツール †

• 常時表示型ツール
  • アクションを喚起したいときに使う
  • 重要度によって、置き場所と大きさを変える
• ロールオーバー表示型ツール
  • ユーザがオブジェクトの上でマウスポインタを止めたときにツールを表示する
  • ロールオーバーしない限りツールの存在に気付かないため、気付かせる工夫が必要
  • ユーザが必ずマウスポインタを重ねるところで使うと良い
• トグル表示型ツール
• 段階的表示型ツール
  • 放射状メニュー（Songza）... 曲名をクリックすると放射状メニューが表示される
    • このメニューを使い続けているユーザなら、手の動きを覚えているので、メニュー項目を見なくても操作できる
    • メニュー項目間の距離の近さと、ターゲットの大きさのおかげでメニュー操作が楽になっている
  • mutton ... menu + button
    • ロールオーバーするとハイライトされ、押すとメニューを開くことなく機能が実行される
    • ドロップダウン用の矢印をクリックするとコマンドが現れる
• サブメニュー
  • ブラウザの右クリックメニューがあることを考慮する
  • 右クリックの代わりにマウスを1秒以上長押ししたときにサブメニューを表示することも考えてみる

1ページで完結させる †

オーバーレイ †

• ライトボックス効果
  • 注目させたい部分以外を暗くして目立たせる
  • ユーザが別のモードに入っていることを強調するときに使う

• 詳細表示用オーバーレイ
  • ロールオーバーで起動するときは、表示する前にわずかな間（0.5〜1秒）を置く
  • 簡単に消去できるようにしておくこと（マウスポインタを外すだけで消す等）
  • 事例（Netflix）

インレイ †

• ダイアログ用
  • ページ自体に直接コンテンツを挿入
  • 事例（My Yahoo!） ... 「Change Appearance」を押すとインレイが表示される
• リスト用
  • アコーディオン
    • リスト中に一度に1枚だけパネルを開く

バーチャルページ †

• バーチャルスクロール
• インラインページング
• スクロール型ページング
• バーチャルパンニング
• ズーム型ユーザインタフェース

プロセスフロー †

• インタラクティブページ型プロセス
• インラインアシスタンス型プロセス
• ダイアログオーバーレイ型プロセス
• コンフィギュレータ型プロセス
• 非インタラクティブページ型プロセス

インビテーションを仕掛けよう †

静的インビテーション †

動的インビテーション †

トランジションを利用しよう †

明度／濃度の増減 †

展開／折り畳み †

回復型フェード †

アニメーション †

スポットライト †

スライドイン／スライドアウト †

フェイスプレート †

フリップ †

カルーセル †

すばやく反応しよう †

オートコンプリート †

ライブサジェスト †

ライブサーチ †

絞り込み検索 †

ライブプレビュー †

段階的表示 †

進行状況表示 †

自動リロード †

参考書籍 †

• Designing Web Interfaces
  • 画像